/* 2 and 1/2 Mechanics
   Colour comes from the building and the bays: white siding, white shop walls
   with one red stripe run along them, red two post lifts, and graphite for the
   floor and the tool chests. Red is the only accent and it means "act": book,
   call, the current page. Photographs open from the middle, the half in the
   name, and the red stripe marks where a section starts. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #16171a;
  --graphite: #1f2125;
  --steel: #2c2f35;
  --paper: #f2f1ed;
  --paper-2: #e8e6e0;
  --white: #ffffff;
  --text: #1a1b1e;
  --muted: #5b5d63;
  --muted-dark: #a9abb1;
  --line: #d9d7d0;
  --line-dark: #363940;
  --red: #d6202a;
  --red-press: #b5161f;
  --sky: #2f6fc9;

  --display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

h1, h2, h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; line-height: 1; letter-spacing: -.01em; margin: 0; color: inherit; }
h1 { font-size: clamp(2.6rem, 6.6vw, 5.9rem); font-weight: 900; font-stretch: 118%; text-transform: uppercase; letter-spacing: -.015em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
p { margin: 0 0 1em; max-width: 68ch; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--red); color: #fff; padding: 10px 16px; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: var(--r);
  font: 650 1rem/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-press); }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-outline { border-color: var(--text); color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--paper); }
.btn-line { border-color: var(--line); color: var(--text); }
.btn-line:hover { border-color: var(--text); }
.sec-dark .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.sec-dark .btn-outline:hover { background: #fff; color: var(--ink); }
.phead .btn-ghost { border-color: var(--text); color: var(--text); }
.phead .btn-ghost:hover { background: var(--text); color: var(--paper); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ header
   White like the siding, with the shop's red stripe along its foot. */

.hdr { position: sticky; top: 0; z-index: 50; background: var(--white); color: var(--text); box-shadow: 0 1px 0 var(--line); }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(var(--red) 0 2px, transparent 2px); pointer-events: none; }
.hdr-in { display: flex; align-items: center; gap: 24px; height: var(--hdr); }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 50px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { position: relative; padding: 10px 11px; font-size: .95rem; font-weight: 550; text-decoration: none; color: var(--text); }
.nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.hdr-tel { font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hdr-book { min-height: 44px; padding: 0 18px; }
.burger { display: none; }
.progress { position: absolute; left: 0; bottom: -2px; z-index: 1; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

@media (max-width: 1140px) { .hdr-tel { display: none; } }
@media (max-width: 980px) {
  :root { --hdr: 66px; }
  .brand img { height: 42px; }
  .burger {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    background: none; border: 2px solid var(--text); border-radius: var(--r);
    color: var(--text); font: 650 .95rem/1 var(--body); height: 44px; padding: 0 14px; cursor: pointer;
  }
  .burger i { position: relative; width: 16px; height: 2px; background: currentColor; transition: background-color .2s; }
  .burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
  .burger i::before { top: -5px; } .burger i::after { top: 5px; }
  .burger[aria-expanded="true"] i { background: transparent; }
  .burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
  .burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
  .hdr-book { display: none; }
  .nav {
    position: fixed; inset: calc(var(--hdr) + 2px) 0 0 0; z-index: 49;
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 120px;
    background: var(--white); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav a { font: 800 1.9rem/1 var(--display); font-stretch: 115%; text-transform: uppercase; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav a[aria-current] { color: var(--red); }
  .nav .nav-extra { display: grid; gap: 10px; margin-top: 28px; }
  .nav .nav-extra .btn-ghost { border-color: var(--text); color: var(--text); }
}
@media (min-width: 981px) { .nav .nav-extra { display: none; } }
@media (max-width: 400px) { .brand img { height: 36px; } }

/* ------------------------------------------------------------ status line
   Real state only: open or closed, worked out in Ottawa time by site.js. */

.status { background: var(--graphite); color: #d4d5d9; font-size: .9rem; }
.status-in { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 12px; padding-bottom: 12px; }
.status a { color: #fff; }
.status b { color: #fff; font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7a7c82; margin-right: 8px; vertical-align: 1px; }
.status[data-open="true"] .dot { background: #3fae5a; box-shadow: 0 0 0 3px rgba(63,174,90,.25); }

/* ------------------------------------------------------------ home hero
   The storefront itself, three bay doors under the sign, kept clear of text:
   the words sit on the graphite panel and the photo gets its own half. */

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; min-height: min(calc(100svh - var(--hdr)), 820px); color: #fff; background: var(--graphite); overflow: hidden; }
.hero-media { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; min-height: 460px; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(1.04); }
.hero-media::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red); }
.hero-in { grid-column: 1; grid-row: 1; align-self: center; position: relative; padding: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 56px) clamp(36px, 5vw, 64px) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.hero .status { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line-dark); }
.hero-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font: 700 .8rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.hero-kicker::before { content: ""; width: 36px; height: 3px; background: var(--red); flex: none; }
.hero h1 { font-size: clamp(2.4rem, 4.1vw, 4rem); max-width: 11ch; text-wrap: balance; }
.hero-lead { font-size: clamp(1.04rem, 1.35vw, 1.2rem); max-width: 44ch; margin: 22px 0 30px; color: #dfe1e6; }
.hero-facts { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.22); }
.hero-facts li { padding: 14px 24px 0 0; margin-right: 24px; color: #c9ccd2; font-size: .9rem; }
.hero-facts li + li { border-left: 1px solid rgba(255,255,255,.22); padding-left: 24px; margin-left: -24px; }
.hero-facts b { display: block; font: 900 1.8rem/1 var(--display); font-stretch: 118%; color: #fff; margin-bottom: 4px; }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
  .hero-media { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; }
  .hero-media::after { top: auto; right: 0; width: auto; height: 6px; }
  .hero-in { grid-column: 1; grid-row: 2; padding: 30px var(--gutter) 34px; }
  .hero .status { grid-row: 3; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3.6rem); }
}

/* the words of a page title rise in one after another on load */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .05em; }
.w > span { display: inline-block; transform: translateY(105%); animation: rise .85s var(--ease) forwards; animation-delay: calc(.07s * var(--i) + .1s); }
@keyframes rise { to { transform: none; } }
.fade-up { opacity: 0; animation: fadeUp .8s var(--ease) .4s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ inner page header
   Light, like walking into the office: text on the left, the photograph on
   the right in close to its own shape, opening from its middle. */

.phead { position: relative; background: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.phead-in { grid-column: 1; align-self: center; padding: clamp(44px, 6vw, 88px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 72px) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.phead-media { grid-column: 2; position: relative; min-height: clamp(380px, 40vw, 600px); }
.phead-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phead h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); max-width: 13ch; text-wrap: balance; }
.phead .lead { font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 48ch; margin: 20px 0 28px; color: var(--muted); }
.phead .status { grid-column: 1 / -1; }
.crumb { font-size: .86rem; color: var(--muted); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span[aria-hidden] { opacity: .5; }
@media (max-width: 860px) {
  .phead { grid-template-columns: 1fr; }
  .phead-media { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 3 / 2; }
  .phead-in { grid-column: 1; grid-row: 2; padding: 30px var(--gutter) 34px; }
  .phead h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
}

.chips { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; border-top: 2px solid var(--text); max-width: 760px; }
.chips li { padding: 12px 26px 0 0; margin-right: 26px; display: grid; gap: 2px; }
.chips li + li { border-left: 1px solid var(--line); padding-left: 26px; margin-left: -26px; }
.chips span { font-size: .8rem; color: var(--muted); }
.chips b { font: 900 1.45rem/1 var(--display); font-stretch: 115%; }
.chips li:first-child b { color: var(--red); }

/* ------------------------------------------------------------ sections */

.sec { padding: clamp(64px, 9vw, 116px) 0; }
.sec-tight { padding: clamp(40px, 6vw, 72px) 0; }
.sec-dark { background: var(--graphite); color: #eceef1; }
.sec-white { background: var(--white); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head h2 { position: relative; padding-top: 22px; }
.sec-head h2::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 3px; background: var(--red); }
.sec-head p { margin: 0; color: var(--muted); font-size: 1.08rem; }
.sec-dark .sec-head p { color: var(--muted-dark); }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ the half door
   A photograph opens from its middle seam: the top half lifts away, the
   bottom half drops, and the picture settles from a slight zoom. */

.door { position: relative; overflow: hidden; background: var(--paper-2); }
.door img { width: 100%; height: 100%; object-fit: cover; }
.js .door::before, .js .door::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50.5%; z-index: 1; pointer-events: none;
  background: var(--paper-2);
  transition: transform 1s cubic-bezier(.7, 0, .25, 1);
}
.js .door::before { top: 0; border-bottom: 2px solid var(--red); }
.js .door::after { bottom: 0; }
.js .door.in::before { transform: translateY(-101%); }
.js .door.in::after { transform: translateY(101%); }
.js .door img { transform: scale(1.07); transition: transform 1.5s var(--ease); }
.js .door.in img { transform: none; }
.sec-dark .door, .sec-dark .door::before, .sec-dark .door::after { background: var(--steel); }

.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(22px); }

/* ------------------------------------------------------------ symptom index (home) */

.sx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.sx-media { position: sticky; top: calc(var(--hdr) + 28px); aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.sx-pic { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s; }
.sx-pic.on { opacity: 1; }
.sx-pic img { width: 100%; height: 100%; object-fit: cover; }
.sx-pic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-size: .84rem; color: #eee; background: linear-gradient(0deg, rgba(0,0,0,.72), transparent); }
.sx-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.sx-list li { border-bottom: 1px solid var(--line); }
.sx-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; padding: 19px 4px; text-decoration: none; transition: padding-left .25s var(--ease); }
.sx-sym { font-size: 1.1rem; font-weight: 500; }
.sx-svc { font: 800 .98rem/1.2 var(--display); font-stretch: 112%; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .2s; }
.sx-list a:hover, .sx-list a.on { padding-left: 14px; }
.sx-list a:hover .sx-svc, .sx-list a.on .sx-svc { color: var(--red); }
.sx-thumb { display: none; }
@media (max-width: 980px) {
  .sx { grid-template-columns: 1fr; gap: 0; }
  .sx-media { display: none; }
  .sx-list a { grid-template-columns: 72px 1fr; gap: 2px 16px; padding: 14px 0; align-content: center; }
  .sx-sym { align-self: end; } .sx-svc { align-self: start; }
  .sx-list a:hover, .sx-list a.on { padding-left: 0; }
  .sx-thumb { display: block; grid-row: span 2; width: 72px; height: 72px; border-radius: var(--r); overflow: hidden; }
  .sx-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sx-svc { font-size: .88rem; white-space: normal; }
}

/* ------------------------------------------------------------ how we work */

.rules { list-style: none; counter-reset: r; margin: 26px 0 0; padding: 0; border-top: 2px solid var(--text); }
.rules li { counter-increment: r; display: grid; grid-template-columns: 52px 1fr; gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rules li::before { content: counter(r); grid-row: span 2; font: 900 2.2rem/1 var(--display); font-stretch: 118%; color: var(--red); }
.rules b { font-weight: 700; font-size: 1.08rem; }
.rules span { color: var(--muted); }
.prose-tight p { max-width: 58ch; }

/* ------------------------------------------------------------ 24/7 booking band */

.bookband { background: var(--red); color: #fff; padding: clamp(56px, 8vw, 100px) 0; overflow: hidden; position: relative; }
.bookband::before { content: "½"; position: absolute; right: -2vw; top: 50%; transform: translateY(-52%); font: 900 clamp(16rem, 34vw, 30rem)/1 var(--display); color: rgba(255,255,255,.07); pointer-events: none; }
.bookband-in { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 72px; align-items: center; }
.bookband h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); text-transform: uppercase; font-weight: 900; font-stretch: 118%; }
.bookband p { font-size: 1.1rem; margin: 22px 0 30px; color: #fff; max-width: 48ch; }
.bookband .clock { font: 600 .95rem/1 var(--body); margin: 0 0 18px; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
.bookband .btn-dark { background: var(--ink); color: #fff; }
.bookband .btn-dark:hover { background: #000; }
.bookband .btn-line { border-color: rgba(255,255,255,.65); color: #fff; }
.bookband .btn-line:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; border-top: 2px solid rgba(255,255,255,.6); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 1.03rem; }
.steps li::before { content: counter(s); font: 900 2.3rem/.9 var(--display); font-stretch: 118%; }
.steps b { display: block; font-weight: 700; }
@media (max-width: 860px) { .bookband-in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ price board
   A white card pinned to the wall, red stripe across the top. */

.board { background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--red); border-radius: var(--r); padding: clamp(24px, 4vw, 40px); box-shadow: 0 18px 40px -28px rgba(20,20,25,.35); }
.board h2 { margin-bottom: 10px; }
.board > p { color: var(--muted); }
.prices { margin: 24px 0 0; border-top: 2px solid var(--text); }
.prices > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline; padding: 17px 0; border-bottom: 1px dashed var(--line); }
.prices dt { font-weight: 650; font-size: 1.06rem; }
.prices dt a { text-decoration: none; }
.prices dt a:hover { color: var(--red); }
.prices dt span { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); margin-top: 2px; }
.prices dd { margin: 0; font: 900 1.85rem/1 var(--display); font-stretch: 112%; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.board-note { font-size: .88rem; color: var(--muted); margin: 18px 0 0; }

/* ------------------------------------------------------------ photo strip (drag or swipe) */

.strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--steel) transparent; cursor: grab; }
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.strip figure { flex: 0 0 min(80vw, 520px); margin: 0; scroll-snap-align: start; }
.strip .door { aspect-ratio: 3 / 2; border-radius: var(--r); }
.strip figcaption { font-size: .88rem; color: var(--muted-dark); padding-top: 10px; }
.strip img { pointer-events: none; user-select: none; }
@media (min-width: 1300px) { .strip { padding-left: calc((100vw - var(--wrap)) / 2 + var(--gutter)); scroll-padding-left: calc((100vw - var(--wrap)) / 2 + var(--gutter)); } }

/* ------------------------------------------------------------ split feature */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split.top { align-items: start; }
.split .door { aspect-ratio: 3 / 2; border-radius: var(--r); }
.split.flip > :first-child { order: 2; }
.split h2 { margin-bottom: 20px; }
.split ul { padding-left: 1.1em; margin: 0 0 1.4em; }
.split li { margin-bottom: 6px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }

.facts { margin: 0; border-top: 2px solid var(--text); }
.facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 650; font-size: .9rem; color: var(--muted); }
.facts dd { margin: 0; }

/* ------------------------------------------------------------ service rows (hub) */

.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 2px solid var(--text); }
.rows li { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 156px 1fr; gap: 22px; align-items: center; padding: 20px 0; text-decoration: none; }
.row-pic { aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.row-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.row:hover .row-pic img { transform: scale(1.05); }
.row-name { display: block; font: 800 1.3rem/1.05 var(--display); font-stretch: 112%; margin-bottom: 6px; transition: color .2s; }
.row:hover .row-name { color: var(--red); }
.row-blurb { display: block; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.row-price { display: inline-block; margin-top: 8px; font-size: .85rem; font-weight: 700; color: var(--red); }
@media (max-width: 860px) {
  .rows { grid-template-columns: 1fr; }
  .row { grid-template-columns: 104px 1fr; gap: 16px; padding: 16px 0; }
  .row-name { font-size: 1.15rem; }
}

/* ------------------------------------------------------------ prose */

.prose { font-size: 1.07rem; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 1.7em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; margin: 1.5em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; max-width: 66ch; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--text); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.prose strong { font-weight: 700; }
.prose-centred { max-width: 760px; margin: 0 auto; }

/* service page: article plus a rail that stays in view */
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.svc-rail-in { position: sticky; top: calc(var(--hdr) + 28px); display: grid; gap: 26px; }
.rail-h { font: 800 1.1rem/1 var(--display); font-stretch: 112%; text-transform: uppercase; margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: .93rem; color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--text); border-color: var(--red); font-weight: 650; }
.rail-facts > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
.rail-cta { display: grid; gap: 10px; }
.mid-band { margin: 2.4em 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mid-band figure { margin: 0; }
.mid-band .door { aspect-ratio: 3 / 2; border-radius: var(--r); }
.mid-band figcaption { font-size: .84rem; color: var(--muted); padding-top: 8px; }
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-rail { display: none; }
}
@media (max-width: 560px) { .mid-band { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ faq */

.faq { border-top: 2px solid var(--text); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; padding: 20px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: 650 1.1rem/1.4 var(--body); }
.faq summary::after { content: ""; width: 12px; height: 12px; justify-self: center; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: translateY(-4px) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq details > div { padding: 0 48px 22px 0; color: var(--muted); }
.faq details > div p { margin: 0; }

/* ------------------------------------------------------------ related cards */

.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rel a { text-decoration: none; display: grid; gap: 10px; align-content: start; }
.rel .door { aspect-ratio: 3 / 2; border-radius: var(--r); }
.rel strong { font: 800 1.35rem/1.05 var(--display); font-stretch: 112%; transition: color .2s; }
.rel a:hover strong { color: var(--red); }
.rel span.b { color: var(--muted); font-size: .96rem; line-height: 1.5; }
@media (max-width: 860px) { .rel { grid-template-columns: 1fr; gap: 28px; } }

.link-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: grid; gap: 4px; padding: 20px 0; text-decoration: none; }
.link-list strong { font: 800 1.35rem/1.1 var(--display); font-stretch: 112%; transition: color .2s; }
.link-list a:hover strong { color: var(--red); }
.link-list span { color: var(--muted); font-size: .96rem; }
.link-list time { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ gallery */

.gal { columns: 3 300px; column-gap: 16px; }
.gal figure { break-inside: avoid; margin: 0 0 16px; }
.gal .door { border-radius: var(--r); }
.gal figcaption { font-size: .86rem; color: var(--muted); padding: 8px 0 4px; }

/* ------------------------------------------------------------ customer stories */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.quotes blockquote { margin: 0; padding: 28px 26px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); position: relative; }
.quotes blockquote::before { content: "“"; position: absolute; top: 6px; right: 18px; font: 900 4.2rem/1 var(--display); color: var(--red); opacity: .9; }
.quotes p { font-size: 1.05rem; padding-right: 26px; }
.quotes cite { font-style: normal; font-size: .9rem; font-weight: 700; }

/* ------------------------------------------------------------ closing call */

.close { background: var(--graphite); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.close-in { align-self: center; padding: clamp(56px, 8vw, 108px) clamp(24px, 4vw, 56px) clamp(56px, 8vw, 108px) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.close-media { position: relative; min-height: 380px; }
.close-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close .door, .close .door::before, .close .door::after { background: var(--steel); }
.close h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); text-transform: uppercase; font-weight: 900; font-stretch: 118%; max-width: 13ch; }
.close p { color: #d9dbe0; font-size: 1.08rem; margin: 20px 0 32px; max-width: 46ch; }
@media (max-width: 860px) {
  .close { grid-template-columns: 1fr; }
  .close-media { min-height: 0; aspect-ratio: 16 / 9; }
  .close-in { padding: 40px var(--gutter) 56px; }
}

/* ------------------------------------------------------------ map */

.map { border: 0; width: 100%; height: clamp(320px, 42vw, 460px); border-radius: var(--r); display: block; }
.map-wrap { position: relative; }

/* ------------------------------------------------------------ footer
   Light, so the logo reads as it does on the sign. The FluxFront credit is
   the very last line of every page. */

.ftr { background: var(--paper-2); color: var(--text); padding: 64px 0 28px; font-size: .95rem; border-top: 4px solid var(--red); }
.ftr-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.ftr h3 { font: 800 1.05rem/1 var(--display); font-stretch: 112%; text-transform: uppercase; margin: 0 0 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--red); text-decoration: underline; }
.ftr-brand { margin-bottom: 18px; }
.ftr-brand img { height: 58px; width: auto; }
.ftr address { font-style: normal; line-height: 1.7; }
.ftr-hours { margin-top: 16px; font-variant-numeric: tabular-nums; }
.ftr-hours div { display: flex; justify-content: space-between; max-width: 240px; }
.ftr-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--muted); }
.powered { margin: 22px 0 0; text-align: center; font-size: .82rem; color: var(--muted); max-width: none; }
.powered a { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); }
@media (max-width: 980px) { .ftr { padding-bottom: 96px; } .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-top { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ phone call bar */

.callbar { display: none; }
@media (max-width: 980px) {
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(0,0,0,.3);
    transform: translateY(110%); transition: transform .35s var(--ease);
  }
  .callbar.show { transform: none; }
  .callbar a { min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); font-weight: 700; text-decoration: none; }
  .callbar .c-tel { color: var(--text); border: 2px solid var(--text); }
  .callbar .c-book { background: var(--red); color: #fff; }
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .btn-lg { min-height: 52px; padding: 0 20px; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
  .hero-facts li, .hero-facts li + li { padding: 12px 14px 0 0; margin: 0; font-size: .84rem; line-height: 1.35; }
  .hero-facts li + li { padding-left: 14px; }
  .hero-facts b { font-size: 1.35rem; }
  .chips li, .chips li + li { padding: 10px 16px 0 0; margin-right: 16px; }
  .chips li + li { padding-left: 16px; margin-left: -16px; }
  .chips b { font-size: 1.2rem; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .prices dd { font-size: 1.5rem; }
  .status-in { font-size: .85rem; gap: 4px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .w > span { transform: none; }
  .fade-up { opacity: 1; }
  .hero-media img { transform: none !important; }
}