/* ==========================================================================
   HEC Ottawa  /  assets/css/styles.css
   One stylesheet for the whole site.

   Colour system: the three brand colours are not decoration, they are the
   wayfinding. Heating is red, Cooling is blue, Electrical is yellow. A visitor
   learns that once on the homepage and can then find the right service by
   colour alone on every later page.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* Brand */
  --red:        #E23E3E;
  --red-dark:   #C22F2F;
  --red-soft:   #FDECEC;
  --yellow:     #F5B921;
  --yellow-dark:#C98F05;
  --yellow-soft:#FEF6E2;
  --blue:       #3EA8DE;
  --blue-dark:  #2A8CC0;
  --blue-soft:  #EAF6FD;

  /* Neutrals */
  --ink:        #16212E;
  --ink-soft:   #3C4A5A;
  --muted:      #64748B;
  --line:       #E3E9F0;
  --bg:         #FFFFFF;
  --bg-alt:     #F6F9FC;
  --bg-deep:    #121D2A;

  /* Shape */
  --radius:     14px;
  --radius-lg:  22px;
  --shadow:     0 1px 2px rgba(22,33,46,.05), 0 8px 24px rgba(22,33,46,.06);
  --shadow-lg:  0 2px 6px rgba(22,33,46,.06), 0 18px 44px rgba(22,33,46,.10);

  /* Rhythm */
  --wrap:       1140px;
  --gap:        clamp(28px, 5vw, 56px);
  --section:    clamp(56px, 8vw, 104px);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); }
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.1em; }

/* Keyboard users must always see where they are. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- layout */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section__head { max-width: 640px; margin-bottom: clamp(30px, 4vw, 46px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p { color: var(--muted); font-size: 1.06rem; margin-bottom: 0; }

.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--red);
}

.lead { font-size: 1.1rem; color: var(--ink-soft); }
.muted { color: var(--muted); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--call   { background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(226,62,62,.28); }
.btn--call:hover { background: var(--red-dark); }
.btn--book   { background: var(--yellow); color: var(--ink); box-shadow: 0 8px 20px rgba(245,185,33,.30); }
.btn--book:hover { background: var(--yellow-dark); color: #fff; }
.btn--quote  { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(62,168,222,.28); }
.btn--quote:hover { background: var(--blue-dark); }
.btn--ghost  { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; }
.btn--onDark { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.32); }
.btn--onDark:hover { background: rgba(255,255,255,.18); }
.btn--sm { padding: 11px 20px; font-size: .93rem; }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------- header */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__bar { display: flex; align-items: center; gap: 20px; min-height: 74px; }

/* ---- LOGO ------------------------------------------------------------
   Two crops of one piece of artwork, because the logo was drawn for a dark
   ground: its wordmark is white, so dropping it straight onto the white
   header would make the words vanish.

   Header  -> .logo--plate puts it back on the dark navy it was designed for,
              as a rounded badge. That crop also drops the tagline, which at
              this size renders about four pixels tall and reads as mush.
   Footer  -> already dark navy, so the full lockup (tagline included) sits
              directly on it. Its background was keyed out to transparency so
              it blends instead of showing as a darker rectangle.

   To change the logo later, replace assets/img/logo.png (header, no tagline)
   and assets/img/logo-footer.png (footer, full lockup). No markup changes. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { display: block; height: 54px; width: auto; }

.logo--plate {
  background: var(--bg-deep);
  border-radius: 12px;
  padding: 6px 12px;
}
.logo--plate img { height: 48px; }

.footer .logo img { height: 96px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 9px 14px; border-radius: 9px; text-decoration: none;
  font-weight: 600; font-size: .97rem; color: var(--ink-soft);
}
.nav a:hover { background: var(--bg-alt); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 800; }

.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: 11px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobilemenu { display: none; border-top: 1px solid var(--line); background: #fff; padding: 14px 0 22px; }
.mobilemenu.is-open { display: block; }
.mobilemenu a.mobilemenu__link {
  display: block; padding: 13px 4px; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid var(--line);
}
.mobilemenu .btn-row { margin-top: 18px; }

@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
}

/* ----------------------------------------------------------------- hero */
.hero { position: relative; background: var(--bg-alt); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(62,168,222,.16), transparent 62%),
    radial-gradient(52% 62% at 4% 96%, rgba(226,62,62,.12), transparent 62%);
  pointer-events: none;
}
.hero__grid {
  position: relative; display: grid; gap: var(--gap);
  grid-template-columns: 1.02fr .98fr; align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
}
.hero h1 { margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--ink-soft); max-width: 34em; margin-bottom: 28px; }
.hero .btn-row { margin-bottom: 22px; }

.hero__strip { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; }
.hero__strip li { display: flex; align-items: center; gap: 8px; font-size: .93rem; font-weight: 600; color: var(--ink-soft); }
.hero__strip svg { flex: none; color: var(--blue); }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
}

/* ------------------------------------------------- image placeholders
   Every frame below is a stand-in. The Higgsfield prompt for each one is in
   IMAGE-PROMPTS.md and repeated in an HTML comment beside the frame. To go
   live, drop a real JPG in assets/img/ and swap the placeholder div for an
   img tag with the same class on its wrapper.                            */
.ph {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background:
    linear-gradient(135deg, rgba(226,62,62,.10), rgba(245,185,33,.10) 48%, rgba(62,168,222,.14)),
    repeating-linear-gradient(45deg, rgba(22,33,46,.028) 0 12px, transparent 12px 24px);
  border: 2px dashed rgba(22,33,46,.16);
  display: grid; place-items: center; text-align: center;
  padding: 26px; color: var(--ink-soft);
  aspect-ratio: 4 / 3;
}
.ph--wide   { aspect-ratio: 16 / 10; }
.ph--tall   { aspect-ratio: 4 / 5; }
.ph--banner { aspect-ratio: 21 / 9; }
.ph__tag {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.86); border: 1px solid rgba(22,33,46,.10);
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ph__title { font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }
.ph__note  { font-size: .84rem; color: var(--muted); max-width: 30em; margin: 0 auto; line-height: 1.5; }
.ph__inner { max-width: 34em; }

/* --------------------------------------------------------------- trust */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust__row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-block: 26px; list-style: none; margin: 0; padding-inline: 0;
}
.trust__item {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  font-weight: 700; font-size: .95rem; color: var(--ink-soft); text-align: left;
}
.trust__badge {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-dark);
  border: 1px dashed rgba(62,168,222,.45);
}
@media (max-width: 780px) { .trust__row { grid-template-columns: repeat(2, 1fr); } }

/* Below 560px two columns leave about 160px per cell, which is too narrow:
   "Licensed & insured" and its note each wrap onto two lines, and the icon —
   vertically centred against a four-line block — floats away from the words it
   belongs to. One column fixes both. Left-aligned and top-aligned so it reads
   as a tidy list rather than four ragged clusters. */
@media (max-width: 560px) {
  .trust__row { grid-template-columns: 1fr; gap: 14px; }
  .trust__item { justify-content: flex-start; align-items: flex-start; }
  .trust__badge { margin-top: 1px; }
}

/* -------------------------------------------------------------- cards */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .cards, .cards--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 16px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .98rem; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card__top { height: 5px; }

/* Service colour coding, used on cards and on the service sections. */
.s-heat  { --accent: var(--red);    --accent-dark: var(--red-dark);    --accent-soft: var(--red-soft); }
.s-cool  { --accent: var(--blue);   --accent-dark: var(--blue-dark);   --accent-soft: var(--blue-soft); }
.s-elec  { --accent: var(--yellow); --accent-dark: var(--yellow-dark); --accent-soft: var(--yellow-soft); }
.s-heat .card__top, .s-cool .card__top, .s-elec .card__top { background: var(--accent); }
.s-heat .card__icon, .s-cool .card__icon, .s-elec .card__icon { background: var(--accent-soft); color: var(--accent-dark); }

.ticks { list-style: none; padding: 0; margin: 0 0 22px; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 9px; font-size: .97rem; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent, var(--blue));
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--accent, var(--blue));
}

/* ------------------------------------------------------ service blocks */
.svc { padding-block: var(--section); border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.svc--alt { background: var(--bg-alt); }
.svc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.svc--flip .svc__media { order: -1; }
.svc__chip {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  padding: 7px 16px 7px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.svc__chip span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.svc h2 { margin-bottom: 12px; }
@media (max-width: 900px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc--flip .svc__media { order: 0; }
}

/* ----------------------------------------------------------- why / steps */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }
.why__item { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.why__num {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 12px; background: var(--yellow-soft); color: var(--yellow-dark); font-weight: 900;
}
.why__item h3 { font-size: 1.1rem; }
.why__item p { color: var(--muted); font-size: .96rem; margin: 0; }

/* -------------------------------------------------------- testimonials
   CURRENTLY UNUSED. The testimonials section was removed from index.html on
   27 Aug 2026 because there are no real reviews yet. These rules are kept so
   the section can be pasted back unchanged from
   hec-ottawa-notes/removed-testimonials-section.html. */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: #fff; border: 2px dashed rgba(22,33,46,.16); border-radius: var(--radius);
  padding: 26px; position: relative;
}
.quote__stars { color: var(--yellow); letter-spacing: .12em; margin-bottom: 12px; font-size: 1.05rem; }
.quote p { font-size: .99rem; color: var(--ink-soft); font-style: italic; }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote__dot { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-alt); border: 1px dashed var(--line); flex: none; }
.quote__name { font-weight: 800; font-size: .95rem; }
.quote__meta { font-size: .82rem; color: var(--muted); }
.quote__flag {
  position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .64rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ faq */
.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-weight: 700; font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 18px; color: var(--ink-soft); font-size: .99rem; }

/* ----------------------------------------------------------------- CTA */
.cta { background: var(--bg-deep); color: #fff; }
.cta__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap); align-items: center; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.76); }
.cta__phone {
  display: inline-flex; flex-direction: column; gap: 2px; margin-bottom: 20px;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 900; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
}
.cta__phone small { font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--yellow); }
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- form */
.formcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.6vw, 38px); box-shadow: var(--shadow-lg); color: var(--ink);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .93rem; margin-bottom: 7px; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 11px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(62,168,222,.16);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--red); box-shadow: 0 0 0 4px rgba(226,62,62,.12);
}
.field__error { display: none; color: var(--red-dark); font-size: .86rem; font-weight: 700; margin-top: 6px; }
.field__error.is-shown { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* The honeypot. Off screen, never announced, no human ever meets it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote { font-size: .86rem; color: var(--muted); margin: 14px 0 0; }
.formstatus { border-radius: 12px; padding: 15px 18px; margin-bottom: 22px; font-weight: 700; display: none; }
.formstatus.is-shown { display: block; }
.formstatus--ok   { background: var(--blue-soft); color: var(--blue-dark); border: 1px solid rgba(62,168,222,.35); }
.formstatus--bad  { background: var(--red-soft);  color: var(--red-dark);  border: 1px solid rgba(226,62,62,.30); }

/* -------------------------------------------------------------- contact */
.contactgrid { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .contactgrid { grid-template-columns: 1fr; } }
.contactlist { list-style: none; padding: 0; margin: 0 0 26px; }
.contactlist li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contactlist__icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--red-soft); color: var(--red-dark);
}
.contactlist__label { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.contactlist__value { margin: 0; font-weight: 700; font-size: 1.05rem; }
.contactlist a { text-decoration: none; }
.contactlist a:hover { color: var(--red); }

/* --------------------------------------------------------------- footer */
.footer { background: var(--bg-deep); color: rgba(255,255,255,.72); padding-block: clamp(44px, 6vw, 66px) 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__about { font-size: .95rem; margin: 16px 0 0; max-width: 30em; }
.footer__bar {
  margin-top: clamp(34px, 5vw, 52px); padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .87rem;
}

/* ------------------------------------------------- sticky mobile action bar
   On a phone the two conversion actions are always one thumb away. */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .callbar .btn { padding: 14px 10px; font-size: .96rem; box-shadow: none; }
  body { padding-bottom: 84px; }

  /* The hero's own Call/Book pair is redundant once this bar exists — the same
     two actions, permanently on screen. Worse, on a tall phone the hero pair
     lands in the bottom 84px at scroll zero, so the very first thing a visitor
     sees is two identical button rows overlapping. Hiding the inline pair
     removes the collision and gives the headline room. Tied to this same
     breakpoint deliberately: the bar appears exactly where the buttons go, so
     there is never a moment with no call to action. */
  .hero .btn-row { display: none; }
  .hero__sub { margin-bottom: 22px; }
}

/* ------------------------------------------------------------ page head */
.pagehead { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding-block: clamp(40px, 6vw, 68px); }
.pagehead h1 { margin-bottom: 14px; }
.pagehead p { color: var(--ink-soft); font-size: 1.08rem; max-width: 44em; margin-bottom: 0; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--red); }

/* ------------------------------------------------------------ utilities */
.center { text-align: center; }
.mb0 { margin-bottom: 0; }
.stack > * + * { margin-top: 18px; }

/* ---------------------------------------------------- real images in frames
   A finished photograph reuses the same .ph frame classes as the placeholder
   it replaced, so the aspect ratio and rounded corners are unchanged and the
   layout never shifts. object-fit crops rather than distorts, which is what
   lets one generated ratio sit correctly in any frame. */
img.ph, video.ph {
  object-fit: cover; width: 100%;
  border: 0; padding: 0; background: none;
}

/* The About page install clip is decoration, not content: it is muted, looping
   and carries no information the surrounding text does not. Anyone who has asked
   the system for less motion gets the poster frame held still instead. */
@media (prefers-reduced-motion: reduce) {
  video.ph { display: none; }
  video.ph + .ph-fallback { display: block; }
}
.ph-fallback { display: none; }
.card__img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10; object-fit: cover;
}