@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/slick-inter-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/slick-saira-condensed-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/slick-saira-condensed-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --brand-primary:    #C1121F;
  --brand-accent:     #79D6FC;
  --brand-neutral:    #0E1116;
  --brand-bg:         #0E1116;
  --brand-on-primary: #FFFFFF;

  --c-bg:        #0E1116;
  --c-panel:     #141922;
  --c-card:      #1C2129;
  --c-card-hi:   #232A34;

  --c-ink:       #FFFFFF;   /* 18.91:1 on #0E1116 */
  --c-ink-muted: #B6C0CC;   /* 10.27:1 on #0E1116, 8.78:1 on #1C2129 */
  --c-ink-dim:   #8B95A1;   /*  6.22:1 on #0E1116, 5.32:1 on #1C2129 */

  --red:         #E8342A;   /* non-text only: fills, rules, hairlines (3:1) */
  --red-text:    #F9695C;   /*  6.49:1 on #0E1116, 5.55:1 on #1C2129 */
  --red-surface: #C1121F;   /* white label on it 6.22:1 */
  --red-deep:    #A50E19;   /* white label on it 7.85:1 */

  --cyan:        #79D6FC;   /* 11.56:1 on #0E1116, 9.88:1 on #1C2129 */
  --cyan-deep:   #03769F;   /*  5.13:1 on #FFFFFF - light surfaces only */
  --gold:        #FFB400;   /* 10.61:1 on #0E1116 - never on white (1.78:1) */
  --ok:          #3DDC84;   /* 10.60:1 on #0E1116 */

  --line:        #262C35;
  --line-strong: #6E7681;   /* 4.12:1 on #0E1116 - UI boundaries (1.4.11) */

  --color-accent-text: var(--red-text);
  --focus-ring:        var(--cyan);
  --focus-ring-width:  3px;
  --focus-ring-offset: 3px;

  --color-primary:    var(--red-surface);
  --color-accent:     var(--red);
  --color-text:       var(--c-ink);
  --color-text-muted: var(--c-ink-muted);
  --color-bg:         var(--c-bg);
  --color-bg-alt:     var(--c-panel);
  --color-border:     var(--line);

  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Saira Condensed', 'Arial Narrow', var(--font-body);
  --font-sans:    var(--font-body);

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  --content-max: 76rem;
  --wide-max:    90rem;
  --reading-max: 44rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --hex-cut:   14px;

  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --hex-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3Cpath d='M28 64 56 80v32L28 128 0 112V80z' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");
}

/* base */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw + .6rem, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3vw + .6rem, 3rem); }
h3 { font-size: clamp(1.15rem, .7vw + .9rem, 1.45rem); letter-spacing: 0; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }

h1 .tight, h2 .tight { display: block; }

p  { max-width: var(--reading-max); }
a  { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose a, p a { text-decoration: underline; text-underline-offset: 3px; }

strong { font-weight: 650; color: var(--c-ink); }

/* layout */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5); }
.container-wide { max-width: var(--wide-max); margin-inline: auto; padding-inline: var(--sp-5); }
section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

.band-panel { background: var(--c-panel); }
.band-hex { background: var(--c-panel) var(--hex-tile) repeat; background-size: 56px 97px; }
.band-red { background: linear-gradient(100deg, var(--red-deep), var(--red-surface)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--red); flex: none;
}
.eyebrow-cyan { color: var(--cyan); }
.eyebrow-cyan::before { background: var(--cyan); }

.lead { font-size: 1.125rem; color: var(--c-ink-muted); max-width: var(--reading-max); }
.section-title { margin-bottom: var(--sp-8); max-width: 46rem; }
.section-title p { color: var(--c-ink-muted); margin-top: var(--sp-4); }
.center { text-align: center; }
/* .center may sit on an ancestor or on the block itself; without the second selector a
   max-width section-title centers its text but stays pinned to the left of the container */
.center .section-title,
.section-title.center { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
/* Same trap as the section-title pair above, and it bit again on 2026-08-11. `p` carries
   max-width:var(--reading-max), so a <p class="center"> centered its own text but sat pinned
   to the left of the container - measured 236px off center in a 1216px container. The
   descendant selector alone never matched, because the class is ON the p. Keep both. */
.center p,
p.center { margin-inline: auto; }

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-58 { grid-template-columns: 1.35fr 1fr; }
  .split-85 { grid-template-columns: 1fr 1.35fr; }
  .split-flip > :first-child { order: 2; }
}

/* hex */
.hex {
  display: grid; place-items: center;
  width: 58px; aspect-ratio: 1 / 1.06;
  flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, var(--c-card-hi), var(--c-card));
  color: var(--red-text);
}
.hex svg, .hex img { width: 26px; height: 26px; }
.hex-red  { background: linear-gradient(150deg, var(--red-surface), var(--red-deep)); color: #fff; }
.hex-cyan { color: var(--cyan); }

.chamfer {
  clip-path: polygon(
    var(--hex-cut) 0, 100% 0, 100% calc(100% - var(--hex-cut)),
    calc(100% - var(--hex-cut)) 100%, 0 100%, 0 var(--hex-cut)
  );
}

.rule-red { width: 64px; height: 3px; background: var(--red); border: 0; margin: var(--sp-6) 0; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--wide-max); margin-inline: auto;
  padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.brand { display: inline-flex; align-items: center; color: var(--c-ink); }
.brand__logo { width: 156px; height: auto; }
.site-footer .brand__logo { width: 178px; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.header-phone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .02em; color: var(--c-ink); white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; color: var(--red-text); flex: none; }
.header-phone:hover { color: var(--cyan); text-decoration: none; }
/* Mobile header sizing. The client asked for the number at the top next to the
   burger, so the NUMBER wins the space and the logo yields, not the other way
   round. At 156px the logo left only ~154px for phone + burger, which is 4px
   short at 390px - the width of an iPhone 14, i.e. the most common phone there
   is. Rather than add a breakpoint per handset, .brand is allowed to shrink
   (min-width:0) and the logo follows it (max-width:100%), so the mark scales
   down only as far as it has to and the number always fits.
   Below 360px there is genuinely not enough room for both, so there the digits
   drop and the icon becomes the tap target. The aria-label still reads
   "Call (501) 420-1939", so a screen reader loses nothing. */
.brand { min-width: 0; }
.brand__logo { max-width: 100%; }
@media (max-width: 1059px) {
  .site-header__inner { gap: var(--sp-3); }
}
@media (max-width: 359px) {
  .header-phone__num { display: none; }
  .header-phone { padding: var(--sp-2); }
}

.nav-desktop { display: none; }
.nav-desktop > ul { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav-desktop a {
  display: block; padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-ink-muted); border-radius: var(--radius-sm);
}
.nav-desktop a:hover { color: var(--c-ink); text-decoration: none; }
.nav-desktop a[aria-current="page"] { color: var(--c-ink); box-shadow: inset 0 -2px 0 var(--red); }
.nav-desktop .cta {
  background: var(--red-surface); color: #fff;
  padding-inline: var(--sp-5);
}
.nav-desktop .cta:hover { background: var(--red-deep); color: #fff; }

.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: ""; display: inline-block; margin-left: .45em;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
}
.dropdown {
  position: absolute; top: 100%; left: 0; z-index: 5;
  min-width: 15rem; padding: var(--sp-2);
  list-style: none; margin: 0;
  background: var(--c-card); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  font-family: var(--font-body); font-weight: 500; font-size: .94rem;
  letter-spacing: 0; text-transform: none; padding: var(--sp-2) var(--sp-3);
}
.dropdown a:hover { background: var(--c-card-hi); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--c-ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (min-width: 1060px) {
  .nav-desktop { display: flex; }
  .nav-toggle  { display: none; }
}

/* drawer */
.nav-mobile {
  padding: var(--sp-16) var(--sp-5) var(--sp-8);
  background: var(--c-bg);
  border-left: 1px solid var(--line);
  color: var(--c-ink);
  overflow-y: auto;
}
.nav-mobile__close {
  position: absolute; top: var(--sp-3); right: var(--sp-4);
  background: transparent; color: var(--c-ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav-mobile a {
  display: block; padding: var(--sp-3) var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink);
}
.nav-mobile a:hover { color: var(--red-text); text-decoration: none; }
.nav-mobile a[aria-current="page"] { color: var(--red-text); }
.nav-mobile summary {
  padding: var(--sp-3) var(--sp-2); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .04em; text-transform: uppercase;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease);
}
.nav-mobile details[open] summary::after { transform: rotate(-135deg); }
.nav-mobile details ul { padding-left: var(--sp-4); border-left: 1px solid var(--line); margin-bottom: var(--sp-2); }
.nav-mobile details a { font-family: var(--font-body); font-weight: 500; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--c-ink-muted); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .07em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }

.btn-primary { background: var(--red-surface); color: #fff; }
.btn-primary:hover { background: var(--red-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, .07); color: var(--c-ink); border-color: var(--c-ink); }
.btn-cyan { background: transparent; color: var(--cyan); border-color: var(--cyan); }
.btn-cyan:hover { background: rgba(121, 214, 252, .12); color: var(--cyan); }
.btn-lg { min-height: 52px; padding: var(--sp-4) var(--sp-8); font-size: 1.08rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
  .btn-row .btn { width: 100%; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: .92rem;
  color: var(--red-text);
}
.link-arrow::after {
  content: ""; width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* hero */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(30rem, 74vh, 44rem);
  padding-block: var(--sp-20) var(--sp-16);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 17, 22, .86) 0%, rgba(14, 17, 22, .45) 30%, rgba(14, 17, 22, .95) 86%),
    linear-gradient(92deg, rgba(14, 17, 22, .95) 0%, rgba(14, 17, 22, .88) 30%, rgba(14, 17, 22, .45) 62%, transparent 88%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hex-tile) repeat; background-size: 56px 97px;
  opacity: .8; mask-image: linear-gradient(75deg, transparent 42%, #000 100%);
}
.hero__inner { position: relative; width: 100%; }
.hero h1 { max-width: 18ch; }
.hero .lead { margin-top: var(--sp-6); font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem); color: #DDE3EA; }
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .92rem; color: var(--c-ink-muted);
}
.hero__trust b { color: var(--c-ink); font-weight: 600; }

.pagehead {
  position: relative; isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--c-panel);
  border-bottom: 1px solid var(--line);
}
.pagehead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hex-tile) repeat; background-size: 56px 97px;
  mask-image: linear-gradient(105deg, transparent 45%, #000 100%);
}
.pagehead h1 { max-width: 20ch; }
.pagehead .lead { margin-top: var(--sp-5); }

/* cards */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 1080px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* founder portraits: capped so two 4/5 photos support the copy instead of filling the viewport */
.owners { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
.owners figcaption h3 { font-size: 1.05rem; }
.owners figcaption p { font-size: .88rem; margin-top: var(--sp-1); }
@media (max-width: 30rem) { .owners { max-width: 15rem; grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: var(--sp-6);
  background: var(--c-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.card::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 30px; height: 2px; background: var(--red);
  transition: width var(--dur-base) var(--ease-out);
}
.card:hover { background: var(--c-card-hi); border-color: var(--line-strong); transform: translateY(-3px); }
.card:hover::before { width: 72px; }
.card h3 { margin-bottom: var(--sp-3); }
.card h3 a { color: var(--c-ink); }
.card h3 a:hover { color: var(--red-text); text-decoration: none; }
.card p { color: var(--c-ink-muted); font-size: .96rem; }
.card .hex { margin-bottom: var(--sp-5); }
.card__foot { margin-top: var(--sp-5); }

.card-flat { background: transparent; border-color: transparent; }
.card-flat::before { display: none; }
.card-flat:hover { background: transparent; border-color: transparent; transform: none; }

.stat { font-family: var(--font-display); font-weight: 800; line-height: 1; color: var(--c-ink); font-size: clamp(2.2rem, 3vw + 1rem, 3.2rem); }
.stat-label { display: block; margin-top: var(--sp-2); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-dim); }

.frame { overflow: hidden; border-radius: var(--radius-md); background: var(--c-card); }
.frame img { width: 100%; height: auto; }
.frame-tall { aspect-ratio: 4 / 5; }
.frame-wide { aspect-ratio: 16 / 10; }
/* 2026-08-11: for 16:9 source photos. A 16:9 image in a .frame-wide (16:10) box is cropped
   ~5 percent off EACH SIDE by object-fit:cover, which clipped the front splitter off the
   showroom Porsche - that car has only 59px of margin on its left in the original, so no
   16:10 crop of it can hold the whole vehicle. Matching the frame to the source is the fix;
   do not re-crop the photo to suit the box when the box can suit the photo. */
.frame-16x9 { aspect-ratio: 16 / 9; }
/* img() emits <picture><img>, so height:100% needs a sized parent or it resolves to auto */
.frame-tall picture, .frame-wide picture, .frame-16x9 picture { display: block; width: 100%; height: 100%; }
.frame-tall img, .frame-wide img, .frame-16x9 img { height: 100%; object-fit: cover; object-position: center; }

/* video facade
   16/9 rather than the 16/10 of .frame-wide, so the YouTube player fills the box
   exactly and adds no pillar or letterbox bars of its own once it swaps in.
   The .chamfer clip-path on the same element carries the cut corners through to
   the live player, which is the whole point - it is one box, and the <iframe>
   simply replaces the poster inside it. */
.video-embed {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--c-card); cursor: pointer;
}
.video-embed picture { display: block; width: 100%; height: 100%; }
.video-embed img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
/* self-hosted player (includes/video-local.php). contain, not cover: the mp4 is
   encoded 16/9 to match the box, but a future clip at another ratio must letterbox
   rather than have its edges silently cropped off. */
.video-embed video { display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
/* hexagon play button, matching the .hex motif used for the service icons */
.video-embed__play {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center;
  width: 74px; aspect-ratio: 1 / 1.06;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, var(--red-surface), var(--red-deep));
  color: #fff;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.video-embed__play svg { width: 30px; height: 30px; margin-left: 3px; }
.video-embed:hover .video-embed__play { transform: scale(1.08); filter: brightness(1.12); }
.video-embed:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.video-embed__caption {
  margin-top: var(--sp-4); font-size: .9rem; color: var(--c-ink-dim);
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .video-embed:hover .video-embed__play { transform: none; }
}

/* list */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ticks li { position: relative; padding-left: var(--sp-8); color: var(--c-ink-muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}
.ticks-red li::before { border-color: var(--red); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-6); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--red-text); line-height: 1;
  padding-top: .1em;
}
.steps h3 { margin-bottom: var(--sp-2); }
.steps p { color: var(--c-ink-muted); }

/* how it works: three numbered cards across (includes/section-steps.php) */
.steps-row { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps-row > li { counter-increment: step; background: var(--c-card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-6); }
.steps-row > li::before {
  content: counter(step, decimal-leading-zero); display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1;
  color: var(--red-text); margin-bottom: var(--sp-4);
}
.steps-row h3 { margin-bottom: var(--sp-2); }
.steps-row p { color: var(--c-ink-muted); }

/* one-line mid-page call to action (includes/section-cta-inline.php) */
/* sits between two full sections that already carry their own padding */
.cta-inline-band { padding-block: 0; }
.cta-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding-block: var(--sp-6); border-block: 1px solid var(--line); }
.cta-line p { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .02em; color: var(--c-ink); max-width: none; }

/* the small "Book online" link under hero and CTA buttons; Urable is secondary */
.book-link { margin-top: var(--sp-4); font-size: .92rem; color: var(--c-ink-muted); }
.book-link a { color: var(--c-ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.book-link a:hover { color: var(--cyan); }
#contact-form { scroll-margin-top: 6rem; }

/* faq */
/* cards run the full container; the section-title above keeps its own 46rem cap and stays left */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  background: var(--c-card); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: .01em; color: var(--c-ink);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); }
.faq__a p { color: var(--c-ink-muted); max-width: none; }
.faq__a p + p { margin-top: var(--sp-3); }

/* partners */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-6) var(--sp-10); }
.partners li { list-style: none; }
.partner-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--c-ink-dim);
  transition: color var(--dur-fast) var(--ease);
}
.partners li:hover .partner-name { color: var(--c-ink); }

/* reviews */
.rating {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-4) var(--sp-8); text-align: center;
}
.rating__score { display: flex; align-items: baseline; gap: var(--sp-2); font-family: var(--font-display); font-weight: 800; }
.rating__num { font-size: clamp(2.6rem, 4vw + 1rem, 3.6rem); line-height: 1; color: var(--c-ink); }
.rating__of { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-dim); }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 20px; height: 20px; fill: var(--gold); }
.stars-sm svg { width: 15px; height: 15px; }

.rv-wall { columns: 3 20rem; column-gap: var(--sp-5); }
@media (max-width: 900px) { .rv-wall { columns: 2 17rem; } }
@media (max-width: 560px) { .rv-wall { columns: 1; } }

.rv {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: var(--sp-5);
  padding: var(--sp-5);
  background: var(--c-card); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.rv__q { margin: 0; }
.rv__q blockquote { margin: var(--sp-3) 0 0; }
.rv__q blockquote p { color: var(--c-ink-muted); font-size: .96rem; max-width: none; }
.rv__by { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.rv__mono {
  display: grid; place-items: center; flex: none;
  width: 38px; aspect-ratio: 1 / 1.06;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, var(--red-surface), var(--red-deep));
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.rv__name { font-weight: 600; color: var(--c-ink); }
.rv__meta { display: block; font-size: .8rem; color: var(--c-ink-dim); }

.rv-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-8); }
.rv-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-filter label {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-ink-muted); background: var(--c-card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rv-filter label:hover { color: var(--c-ink); border-color: var(--c-ink); }
.rv-filter input:checked + label { background: var(--red-surface); border-color: var(--red-surface); color: #fff; }
.rv-filter input:focus-visible + label {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* before-after */
.ba__stage { --ba-pos: 50%; position: relative; }
.ba__pair { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.ba__half { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.ba__tag {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(14, 17, 22, .86); color: var(--c-ink);
  border-radius: var(--radius-sm);
}
.ba__range { width: 100%; margin-top: var(--sp-4); }

.js .ba__pair { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; }
.js .ba__half { position: absolute; inset: 0; border-radius: 0; }
.js .ba__half:first-child { position: relative; }
.js .ba__half + .ba__half { clip-path: inset(0 0 0 var(--ba-pos)); }
.js .ba__half + .ba__half .ba__tag { left: auto; right: var(--sp-3); }
.js .ba__handle {
  position: absolute; inset-block: 0; left: var(--ba-pos); z-index: 3;
  width: 3px; margin-left: -1.5px; background: var(--cyan);
  pointer-events: none;
}
.js .ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; aspect-ratio: 1 / 1.06; transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--cyan);
}
.js .ba__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.js .ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100vh; }
.js .ba__range::-moz-range-thumb { width: 46px; height: 100vh; border: 0; }
.js .ba__range:focus-visible {
  opacity: 1; outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px;
}
.ba__note { margin-top: var(--sp-4); font-size: .85rem; color: var(--c-ink-dim); }

@supports selector(:has(*)) {
  /* one rule per key in $labels (section-reviews.php) or the chip renders and filters nothing */
  .rw:has(#rf-all:checked)        .rv { display: block; }
  .rw:has(#rf-tint:checked)       .rv:not([data-svc~="tint"]),
  .rw:has(#rf-ppf:checked)        .rv:not([data-svc~="ppf"]),
  .rw:has(#rf-coating:checked)    .rv:not([data-svc~="coating"]),
  .rw:has(#rf-detail:checked)     .rv:not([data-svc~="detail"]),
  .rw:has(#rf-correction:checked) .rv:not([data-svc~="correction"]),
  .rw:has(#rf-lighting:checked)   .rv:not([data-svc~="lighting"]) { display: none; }
}
/* No :has() (Firefox <121, Chrome <105, Safari <15.4, ~6% of global traffic):
   the reviews filter chips are hidden and every review renders unfiltered. */
@supports not selector(:has(*)) {
  .rv-filter { display: none; }
}

/* pricing */
.pkg { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.pkg__card { display: flex; flex-direction: column; position: relative; padding: var(--sp-6); background: var(--c-card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pkg__card.is-popular { border-color: var(--red); }
.pkg__flag {
  position: absolute; top: 0; right: var(--sp-5); transform: translateY(-50%);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--red-surface); color: #fff; border-radius: var(--radius-sm);
}
.pkg__price { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--c-ink); margin: var(--sp-4) 0 var(--sp-1); }
.pkg__from { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-dim); }
.pkg__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-4) 0; padding: var(--sp-3) 0; border-block: 1px solid var(--line); font-size: .86rem; color: var(--c-ink-dim); }
.pkg__meta b { color: var(--c-ink-muted); font-weight: 600; }
.pkg .ticks { margin: var(--sp-4) 0 var(--sp-6); }
.pkg .ticks li { font-size: .92rem; }
.pkg__card .btn { margin-top: auto; }
.pkg__book { display: block; margin-top: var(--sp-3); text-align: center; font-size: .92rem; color: var(--c-ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.pkg__book:hover { color: var(--cyan); }
.pkg__basis { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: rgba(121, 214, 252, .06); border-left: 3px solid var(--cyan); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pkg__basis p { font-size: .9rem; color: var(--c-ink-muted); max-width: none; }
.pkg__basis p + p { margin-top: var(--sp-2); }

/* Popular add-ons, under the tier columns. Added 2026-08-27 from the client's
   revision notes: "this could be listed at the bottom of the columns". Optional
   per package group - a group without an 'addons' key renders nothing. */
.pkg__addons { margin-top: var(--sp-5); }
.pkg__addons h3 { font-size: 1rem; margin-bottom: var(--sp-3); }
.pkg__addons ul { display: grid; gap: var(--sp-2) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pkg__note { margin-top: var(--sp-4); font-size: .85rem; color: var(--c-ink-muted); max-width: none; }

/* areas */
/* 2026-08-11, client reported the area cards as "aligned right". They were: the chip was a
   single flex row with `justify-content: space-between`, which pinned each meta line to the
   card's right padding edge while the city name stayed left. Measured every meta ending flush
   at the card edge. With the longer names wrapping to two and three lines at a 226px column it
   read as a right-aligned column of text. Now a left-aligned stack.
   Two related faults fixed in the same pass, because they are what made the right-alignment
   look as bad as it did:
   - Cards in a row were ragged heights (117 / 89 / 77 / 77 / 77px). `.areas li { display:flex }`
     plus `flex: 1` makes the chip fill its grid cell, so a row is now uniform.
   - Column min 13rem -> 16rem gives four columns at desktop instead of five, so the eight areas
     land as two clean rows of four rather than five plus an orphan three, and the wider card
     stops most of the name wrapping at source. */
.areas { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.areas li { display: flex; }
.area-chip {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-card); border: 1px solid var(--line); border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.area-chip:hover { background: var(--c-card-hi); border-color: var(--line-strong); text-decoration: none; }
.area-chip span { font-family: var(--font-body); font-weight: 400; font-size: .82rem; text-transform: none; letter-spacing: 0; color: var(--c-ink-dim); }

/* cta */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--c-panel); }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hex-tile) repeat; background-size: 56px 97px;
  mask-image: radial-gradient(ellipse at 78% 50%, #000, transparent 72%);
}
.cta-band h2 { max-width: 22ch; }
.cta-band .lead { margin-top: var(--sp-4); }
.cta-phone { margin-top: var(--sp-6); font-size: .95rem; color: var(--c-ink-muted); }
.cta-phone a { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: .02em; color: var(--c-ink); }
.cta-phone a:hover { color: var(--cyan); }

/* breadcrumbs */
.breadcrumbs { font-size: .84rem; color: var(--c-ink-dim); padding-block: var(--sp-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--line-strong); }
.breadcrumbs a { color: var(--c-ink-dim); }
.breadcrumbs a:hover { color: var(--c-ink); }

/* form */
.form { display: grid; gap: var(--sp-5); max-width: 40rem; }
.form-row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; margin-bottom: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-muted); }
.form input, .form textarea, .form select {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--c-card); color: var(--c-ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.form input::placeholder, .form textarea::placeholder { color: var(--c-ink-dim); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--cyan); }
.form textarea { min-height: 9.5rem; resize: vertical; }
.form-help { font-size: .85rem; color: var(--c-ink-dim); }
.form-status { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }
.field-error { color: #FF8A8A; margin-top: var(--sp-2); }
.hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }

/* footer */
.site-footer { background: #090B0F; border-top: 1px solid var(--line); padding-block: var(--sp-16) var(--sp-8); }
.site-footer__grid {
  max-width: var(--wide-max); margin-inline: auto; padding-inline: var(--sp-5);
  display: grid; gap: var(--sp-10); grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
@media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h2 {
  font-family: var(--font-display); font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--c-ink-dim); margin-bottom: var(--sp-5);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.site-footer a { color: var(--c-ink-muted); font-size: .94rem; }
.site-footer a:hover { color: var(--c-ink); }
.site-footer__tagline {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red-text);
  margin-top: var(--sp-5);
}
.site-footer__address { font-style: normal; color: var(--c-ink-muted); margin-top: var(--sp-4); font-size: .94rem; line-height: 1.8; }
.site-footer__address a { color: var(--c-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.site-footer__bottom {
  max-width: var(--wide-max); margin: var(--sp-12) auto 0; padding: var(--sp-6) var(--sp-5) 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center;
  font-size: .84rem; color: var(--c-ink-dim);
}
.site-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__credit { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* 2026-08-11, client asked for a bigger Spark badge. Two things were wrong with the old
   `18px`: it was too small at the client's eye, and being a fixed pixel value it did not
   scale with the credit line (13.44px here), unlike the rest of the fleet which sizes this
   mark in em. Now em-relative. NOTE the fleet default is 1.5em; this site is deliberately
   larger at 2em (~26.9px, up from 18px) because the client called the badge out by name.
   The parent is an inline-flex with align-items:center, so no vertical-align is needed -
   that part of the fleet snippet only applies where the mark sits in normal inline flow. */
.spark-mark { width: 2em; height: 2em; flex: none; }
.site-footer__social { flex-direction: row !important; gap: var(--sp-3); margin-top: var(--sp-6); }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--c-card); color: var(--c-ink-muted);
}
.site-footer__social a:hover { background: var(--red-surface); color: #fff; }
.site-footer__social svg { width: 18px; height: 18px; }

/* skip + consent */
.skip-link { background: var(--red-surface); color: #fff; font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; }

.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-card); color: var(--c-ink);
  border-top: 2px solid var(--red);
}
.consent-banner[hidden] { display: none; }
.consent-banner__text { max-width: 62ch; font-size: .9rem; margin: 0; color: var(--c-ink-muted); }
.consent-banner__text a { color: var(--cyan); text-decoration: underline; }
.consent-banner__actions { display: flex; gap: var(--sp-3); }

/* motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* utils */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--c-ink-muted); }
.dim { color: var(--c-ink-dim); }
.nowrap { white-space: nowrap; }

/* gallery */
.gal { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); grid-auto-flow: dense; }
.gal__item { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--c-card); aspect-ratio: 4 / 3; }
/* img() emits <picture><img>, so height:100% needs a sized parent or it resolves to auto */
.gal__item picture { display: block; width: 100%; height: 100%; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--dur-slow) var(--ease-out); }
.gal__item:hover img { transform: scale(1.04); }
/* Spanning tiles drop the ratio and stretch to their grid area, otherwise a 16/9 or 3/4 box
   does not reach the row height the 4/3 tiles set and leaves dead space under the image.
   Their picture is taken out of flow so its intrinsic height cannot inflate the row either. */
.gal__item--wide { grid-column: span 2; aspect-ratio: auto; }
.gal__item--tall { grid-row: span 2; aspect-ratio: auto; }
.gal__item--wide, .gal__item--tall { position: relative; }
.gal__item--wide picture, .gal__item--tall picture { position: absolute; inset: 0; }
@media (max-width: 640px) {
  .gal__item--wide { grid-column: auto; aspect-ratio: 4 / 3; }
  .gal__item--tall { grid-row: auto; aspect-ratio: 4 / 3; }
  .gal__item--wide picture, .gal__item--tall picture { position: static; }
}