/* TopLine Pro — inner pages.
   Loaded after styles.css: reuses its tokens, buttons, kickers, contact form,
   closing CTA and footer, and adds the long-form components the pillar pages need. */

/* Inner-page tokens. --label is --blue-600 taken two steps darker: the 11px
   caps labels need 4.5:1 on white and on the sky tint, which --blue-600 misses. */
:root {
  --label: #3d6e94;
  --section-y: 120px;
  --head-gap: 64px;
  --card-pad: 36px 36px 40px;
}

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-bottom: 36px;
  background: transparent;
  color: #fff;
}
/* Same as the home hero: the photo runs 36px past the section and is cut
   into two thin strips at the bottom edge (Figma "Group 3"). */
.page-hero__media {
  position: absolute;
  inset: 0 0 -36px;
  z-index: -1;
  overflow: hidden;
  background: var(--navy-950);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent calc(100% - 36px) calc(100% - 31px), #000 calc(100% - 31px) calc(100% - 14px), transparent calc(100% - 14px) calc(100% - 9px), #000 calc(100% - 9px));
  mask-image: linear-gradient(#000 calc(100% - 36px), transparent calc(100% - 36px) calc(100% - 31px), #000 calc(100% - 31px) calc(100% - 14px), transparent calc(100% - 14px) calc(100% - 9px), #000 calc(100% - 9px));
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.08);
  animation: hero-zoom 2600ms var(--ease-soft) both;
}
/* Same recipe as the homepage hero: navy from the top-left for the copy, a
   multiply shade off the bottom edge, then the soft-light ice wash. */
.page-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgb(6 24 39 / .92) 0%, rgb(var(--navy-rgb) / .72) 42%, rgb(var(--navy-rgb) / .2) 78%),
    linear-gradient(0deg, rgb(var(--shade) / .9) 0%, rgb(var(--shade) / 0) 46%),
    linear-gradient(180deg, rgb(var(--shade) / .6) 0%, rgb(var(--shade) / 0) 26%);
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ice-300);
  opacity: .35;
  mix-blend-mode: soft-light;
}
.page-hero__inner { padding-top: 168px; padding-bottom: 64px; }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--ice-100);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.breadcrumb li + li::before { content: "›"; margin-right: 10px; opacity: .6; }
.breadcrumb a { opacity: .72; transition: opacity .3s; }
.breadcrumb a:hover { opacity: 1; }

.page-hero h1 {
  max-width: 15.5em;
  font-size: clamp(38px, 4.7vw, 60px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.page-hero__lead {
  max-width: 560px;
  margin-top: 25px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}
.page-hero .cta-row { margin-top: 35px; }

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 72px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgb(255 255 255 / .22);
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}
/* Dots only while the bar holds one line; once it wraps, a dot would open a row. */
@media (min-width: 1100px) {
  .trust-bar li + li::before { content: "·"; margin-inline: 12px; color: var(--blue-400); }
}

.site-nav a[aria-current="page"]::after { right: 0; }

/* ---------- On this page ---------- */
.page-toc {
  position: sticky;
  top: 0;
  z-index: 15;
  border-bottom: 1px solid var(--silver-200);
  background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.page-toc__row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-toc__row::-webkit-scrollbar { display: none; }
.page-toc a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 14px;
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 700;
  transition: color .3s;
}
.page-toc a:first-child { padding-left: 0; }
.page-toc a:hover, .page-toc a.is-active { color: var(--navy-900); }
.page-toc a.is-active { box-shadow: inset 0 -2px 0 var(--blue-600); }

/* ---------- Sections ---------- */
.page-section { padding-block: var(--section-y); scroll-margin-top: 56px; }
/* The tint never reaches white: a sky section that faded out would merge with the
   white section after it and double the gap between them. */
.page-section--sky { background: linear-gradient(180deg, var(--sky-50) 0%, #f1f8fd 100%); }
/* White into the (white-topped) contact block: one section gap, not two. */
.page-section:not(.page-section--sky, .page-section--navy) + .contact { padding-top: 0; }
.page-section--navy { background: var(--grad-dark); color: #fff; }
.page-section--navy .h2 { color: #fff; }
.page-section [id] { scroll-margin-top: 80px; }

.section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.section-intro .h2 { max-width: 640px; }
.section-intro > p {
  width: min(520px, 100%);
  color: var(--slate-700);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.prose {
  color: var(--slate-700);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
}
.prose p { max-width: 68ch; }
.prose p + p { margin-top: 20px; }
.prose strong { color: var(--navy-900); font-weight: 700; }

/* ---------- Split (copy + photo) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}
.split__copy { display: grid; gap: 32px; }
.split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.split__media img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; }
.split__media figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border: 1px solid rgb(164 217 255 / .5);
  border-radius: var(--radius-lg);
  background: rgb(12 27 41 / .55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: #fff;
}
.split__media figcaption strong {
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
}
.split__media figcaption span { max-width: 210px; font-size: 14px; font-weight: 600; line-height: 1.35; }

/* ---------- Numbered points ---------- */
.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: var(--head-gap) 0 0;
  padding: 0;
  list-style: none;
}
.points li {
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.points__num {
  color: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
}
.points h3 {
  margin-top: 56px;
  color: var(--navy-800);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.points p { margin-top: 16px; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }

/* ---------- Comparison table ---------- */
.compare {
  margin-top: 10px;
  padding: 16px 36px 28px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 260fr) minmax(0, 400fr) minmax(0, 480fr);
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--silver-200);
  color: var(--slate-600);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
.compare__row--head {
  border-top: 0;
  color: var(--slate-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.compare__row > [role="rowheader"] { color: var(--navy-800); font-weight: 700; }
.compare__ours {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  margin-block: -18px;
  padding: 18px 24px;
  background: var(--navy-900);
  color: #fff;
  font-weight: 600;
}
.compare__row--head .compare__ours { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: 0; }
.compare__row:last-child .compare__ours { border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-bottom: 0; }
.compare__ours img { width: 92px; height: auto; }
.compare__ours svg, .check-list svg {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-ice);
  box-shadow: var(--inset-sheen), 0 0 0 1px rgb(89 147 191 / .25);
  color: var(--navy-900);
}
.compare__ours svg { background: var(--grad-blue); box-shadow: none; }

/* ---------- Metal types ---------- */
.metal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--head-gap);
}
.metal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-xl);
  background: #fff;
}
.metal-card__media { position: relative; overflow: hidden; }
.metal-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.metal-card:hover .metal-card__media img { transform: scale(1.05); }
.metal-card__media span {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 14px;
  border-radius: var(--pill);
  background: var(--grad-ice);
  box-shadow: var(--inset-sheen);
  color: var(--navy-900);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.metal-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--card-pad); }
.metal-card h3 { color: var(--navy-800); font-size: 28px; font-weight: 500; letter-spacing: -.05em; }
.metal-card__body > p { margin-top: 14px; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }
.metal-card dl { display: grid; gap: 14px; margin: auto 0 0; padding-top: 28px; }
.metal-card dl div { padding-top: 14px; border-top: 1px solid var(--silver-200); }
.metal-card dt { color: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.metal-card dd { margin: 6px 0 0; color: var(--navy-800); font-size: 14px; font-weight: 600; line-height: 1.45; }

/* ---------- Profiles and seam heights ---------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--head-gap);
}
.profile-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 36px;
  border: 1px solid rgb(164 217 255 / .22);
  border-radius: var(--radius-xl);
  background: rgb(164 217 255 / .06);
}
.profile-card svg { width: 168px; height: 84px; overflow: visible; }
.profile-card svg path {
  fill: none;
  stroke: var(--blue-300);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-card svg .profile-card__deck { stroke: rgb(255 255 255 / .2); stroke-width: 1; stroke-dasharray: 3 4; }
.profile-card h3 { margin-top: 28px; font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.profile-card p { margin-top: 12px; color: rgb(255 255 255 / .78); font-size: 14.5px; line-height: 1.6; }
.profile-card .profile-card__best { margin-top: auto; padding-top: 24px; color: #fff; font-weight: 600; }
.profile-card__best strong {
  display: block;
  padding-bottom: 6px;
  color: var(--blue-400);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.heights {
  display: grid;
  grid-template-columns: minmax(0, 420fr) minmax(0, 760fr);
  gap: 72px;
  margin-top: var(--section-y);
}
.heights__intro p { margin-top: 24px; color: rgb(255 255 255 / .82); font-size: 16px; font-weight: 500; line-height: 1.6; }
.heights__intro .heights__note { padding-left: 20px; border-left: 2px solid var(--blue-400); color: #fff; }
.heights__list { display: grid; margin: 0; padding: 0; list-style: none; }
.heights__list li {
  display: grid;
  grid-template-columns: 40px 84px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border-top: 1px solid rgb(164 217 255 / .22);
}
.heights__list li:last-child { border-bottom: 1px solid rgb(164 217 255 / .22); }
.heights__list .is-recommended { border-radius: var(--radius-lg); border-color: transparent; background: rgb(164 217 255 / .1); }
.heights__list .is-recommended + li { border-top-color: transparent; }
/* A seam drawn to scale: 1in = 22px. */
.heights__bar {
  justify-self: center;
  align-self: end;
  width: 12px;
  height: calc(var(--size) * 22px);
  border-radius: 3px 3px 0 0;
  background: var(--grad-blue);
}
.heights__list strong { font-size: 30px; font-weight: 500; letter-spacing: -.05em; }
.heights__list p { max-width: 62ch; color: rgb(255 255 255 / .82); font-size: 15px; line-height: 1.55; }
.heights__list em {
  display: block;
  padding-bottom: 4px;
  color: var(--blue-300);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* ---------- Energy ---------- */
.energy-grid {
  display: grid;
  grid-template-columns: minmax(0, 760fr) minmax(0, 510fr);
  gap: 10px;
  margin-top: var(--head-gap);
}
.energy-card {
  padding: 44px 44px 48px;
  border-radius: var(--radius-xl);
  background: rgb(228 233 237 / .38);
}
.energy-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.energy-card:nth-child(4) { grid-column: 1; grid-row: 2; }
.energy-card__tag {
  color: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.energy-card h3 {
  margin-top: 12px;
  color: var(--navy-800);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.05em;
}
.energy-card .prose { margin-top: 20px; font-size: 15px; }
.energy-card--photo {
  position: relative;
  isolation: isolate;
  min-height: 420px;
  overflow: hidden;
  padding: 0;
  background: var(--navy-950);
  color: #fff;
}
.energy-card--photo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.energy-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(var(--shade) / .92) 0%, rgb(var(--shade) / 0) 58%);
}
.energy-card__over { position: absolute; left: 44px; right: 44px; bottom: 44px; }
.energy-card--photo .energy-card__tag { color: var(--blue-300); }
.energy-card--photo h3 { color: #fff; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 36px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--silver-300);
  list-style: none;
}
.stat-row strong { display: block; color: var(--navy-800); font-size: 34px; font-weight: 500; letter-spacing: -.056em; white-space: nowrap; }
.stat-row span { display: block; padding-top: 6px; color: var(--slate-600); font-size: 12.5px; line-height: 1.45; }

.check-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.energy-card h3 ~ .check-list { margin-top: 28px; }
.check-list li { display: flex; gap: 16px; }
.check-list svg { margin-top: 0; }
.check-list p { max-width: 68ch; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }
.check-list strong { color: var(--navy-900); font-weight: 700; }

.callout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  margin-top: 10px;
  padding: 40px 44px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-xl);
  background: var(--grad-dark);
  color: #fff;
}
.callout__tag { font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.05em; }
.callout p:not(.callout__tag) { max-width: 72ch; color: rgb(255 255 255 / .86); font-size: 16px; font-weight: 500; line-height: 1.6; }
.callout strong { color: var(--blue-300); font-weight: 700; }

/* ---------- Process ---------- */
.process {
  display: grid;
  grid-template-columns: minmax(0, 470fr) minmax(0, 720fr);
  align-items: start;
  gap: 90px;
}
.process__aside { position: sticky; top: 96px; display: grid; gap: 28px; }
.process__aside > p { color: var(--slate-700); font-size: 16px; font-weight: 500; line-height: 1.6; }
.process__aside figure { overflow: hidden; border-radius: var(--radius-xl); }
.process__aside img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 38%; }
.process__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.process__steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  padding: 32px 36px 32px 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 40px rgb(132 148 160 / .1);
}
.process__steps span {
  color: var(--label);
  font-size: 13px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: .08em;
}
.process__steps h3 { color: var(--navy-800); font-size: 21px; font-weight: 600; line-height: 28px; letter-spacing: -.035em; }
.process__steps p { max-width: 64ch; margin-top: 10px; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }

.timeline { margin-top: var(--section-y); }
.timeline__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: var(--head-gap) 0 0;
  padding: 0;
  list-style: none;
}
.timeline__grid li {
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.timeline__grid strong { color: var(--navy-800); font-size: 50px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.timeline__grid span { margin-left: 8px; color: var(--label); font-size: 14px; font-weight: 700; }
.timeline__grid p { margin-top: 22px; color: var(--slate-700); font-size: 15px; font-weight: 600; line-height: 1.4; }

/* ---------- Warranties ---------- */
.warranty {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 670fr);
  gap: 90px;
  align-items: start;
}
.warranty__hero {
  position: sticky;
  top: 96px;
  padding: 52px 48px 56px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-xl);
  background: var(--grad-dark);
  box-shadow: var(--shadow-panel);
  color: #fff;
}
.warranty__figure { display: flex; align-items: baseline; gap: 14px; margin-top: 28px; }
.warranty__figure strong {
  background: var(--grad-ice);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(120px, 13vw, 176px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.08em;
  padding-right: .06em;
}
.warranty__figure span { font-size: 30px; font-weight: 500; letter-spacing: -.05em; }
.warranty__hero h3 { margin-top: 28px; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.warranty__hero > p:last-child { margin-top: 16px; color: rgb(255 255 255 / .82); font-size: 15px; line-height: 1.6; }
.warranty__body { display: grid; gap: 40px; }
.warranty__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.warranty__table th, .warranty__table td { padding: 18px 0; border-bottom: 1px solid var(--silver-200); text-align: left; vertical-align: top; }
.warranty__table thead th {
  padding-top: 0;
  color: var(--slate-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.warranty__table tbody th { padding-right: 24px; color: var(--slate-700); font-weight: 500; }
.warranty__table td { width: 38%; color: var(--navy-800); font-weight: 700; }
.warranty__table .is-ours th, .warranty__table .is-ours td { color: var(--label); font-weight: 700; }

.inner-page .contact { background: linear-gradient(180deg, #fff 0%, var(--sky-50) 100%); }
/* Inner pages run a tighter estimate form: less padding, shorter fields, and
   email + address share a row. The homepage keeps its own form untouched. */
/* Same 1280 column as the nav bar; the two cards share it 50/50. */
@media (min-width: 768px) { .inner-page .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.inner-page .estimate-form { gap: 16px; padding: 36px 36px 32px; }
.inner-page .estimate-form .form-row { gap: 14px; }
.inner-page .estimate-form .form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inner-page .field { gap: 7px; }
.inner-page .field__label { font-size: 12.5px; }
.inner-page .field input, .inner-page .field select { min-height: 46px; height: 46px; }
.inner-page .field textarea { height: 84px; padding: 12px 15px; }
.inner-page .form-foot { margin-top: 4px; }
.inner-page .contact-card { gap: 28px; padding: 38px 32px; }
.inner-page .contact-card__lead { width: 236px; }
.inner-page .contact-card__lead h2 { font-size: 34px; }
.inner-page .contact-card__list { gap: 24px; }
.inner-page .contact-card__list dt { font-size: 13px; }
.inner-page .contact-card__list dd { padding-top: 6px; font-size: 16px; line-height: 26px; }
@media (max-width: 767px) {
  .inner-page .estimate-form { padding: 28px 22px 28px; }
  .inner-page .estimate-form .form-row--pair { grid-template-columns: 1fr; }
  .inner-page .contact__grid { gap: 12px; }
  .inner-page .contact-card { padding: 32px 24px; }
  .inner-page .contact-card__lead { width: auto; }
  .inner-page .contact-card__lead h2 { font-size: 30px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  :root { --section-y: 96px; --head-gap: 56px; }
  .trust-bar { gap: 8px 28px; }
  .section-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split__media img { aspect-ratio: 16 / 10; }
  .points { grid-template-columns: 1fr; }
  .points h3 { margin-top: 24px; }
  .metal-grid { grid-template-columns: 1fr; }
  .metal-card { flex-direction: row; }
  .metal-card__media { flex: 0 0 40%; }
  .metal-card__media img { height: 100%; aspect-ratio: auto; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heights { grid-template-columns: 1fr; gap: 40px; }
  .energy-grid { grid-template-columns: 1fr; }
  .energy-card:nth-child(3), .energy-card:nth-child(4) { grid-column: auto; grid-row: auto; }
  .process { grid-template-columns: 1fr; gap: 48px; }
  .process__aside, .warranty__hero { position: static; }
  .timeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warranty { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 767px) {
  .page-hero__inner { padding-top: 128px; padding-bottom: 40px; }
  .page-hero__lead { font-size: 16px; }
  .page-hero__media img { object-position: 62% 50%; }
  .trust-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 48px; font-size: 12px; }
  .page-toc a { min-height: 50px; }

  :root { --section-y: 72px; --head-gap: 44px; --card-pad: 28px 24px 32px; }

  /* The table becomes one card per row: the item, then both answers labelled. */
  .compare { padding: 4px 24px 24px; }
  .compare__row--head { display: none; }
  .compare__row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .compare__row:nth-child(2) { border-top: 0; }
  .compare__row [data-label]::before {
    content: attr(data-label);
    display: block;
    padding-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
  }
  .compare__ours, .compare__row:last-child .compare__ours {
    display: block;
    margin: 0;
    padding: 14px 18px;
    border-radius: var(--radius-md);
  }
  .compare__ours svg { display: none; }

  .metal-card { flex-direction: column; }
  .metal-card__media { flex: none; }
  .metal-card__media img { aspect-ratio: 16 / 10; }
  .profile-grid { grid-template-columns: 1fr; }
  .heights__list li { grid-template-columns: 24px 64px minmax(0, 1fr); gap: 12px; padding: 20px 14px; }
  .heights__list strong { font-size: 24px; }

  .energy-card { padding: var(--card-pad); }
  .energy-card--photo { min-height: 340px; padding: 0; }
  .energy-card__over { left: 24px; right: 24px; bottom: 28px; }
  .stat-row { grid-template-columns: 1fr; gap: 18px; }
  .callout { grid-template-columns: 1fr; gap: 16px; padding: var(--card-pad); }

  .process__steps li { grid-template-columns: 1fr; padding: 24px 24px 28px; }
  .timeline__grid { gap: 8px; }
  .timeline__grid li { padding: 24px 20px 28px; }
  .timeline__grid strong { font-size: 36px; }
  .timeline__grid span { margin-left: 5px; font-size: 12px; }
  .warranty__hero { padding: 36px 24px 40px; }
  .profile-card { padding: var(--card-pad); }
}

@media (hover: none) {
  .metal-card:hover .metal-card__media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__media img { transform: none; }
}

/* ---------- vs. Asphalt ---------- */
.page-hero--short .page-hero__inner { padding-bottom: 96px; }
.page-hero--short .page-hero__media img { object-position: 50% 60%; }

/* Two-column comparison: photo headers, metal column tinted navy. */
.versus {
  margin-top: var(--head-gap);
  padding: 0 36px 28px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.versus__head, .versus__row {
  display: grid;
  grid-template-columns: minmax(0, 240fr) minmax(0, 450fr) minmax(0, 450fr);
  gap: 24px;
}
.versus__head { align-items: end; }
.versus__head > span { position: relative; display: block; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.versus__head img { width: 100%; height: 150px; object-fit: cover; }
.versus__head b {
  display: block;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.versus__head .versus__metal { background: var(--navy-900); color: #fff; }
.versus__head .versus__asphalt { background: var(--silver-200); color: var(--navy-800); }
.versus__row {
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--silver-200);
  color: var(--slate-600);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
.versus__row:first-of-type { border-top: 0; }
.versus__row > [role="rowheader"] { color: var(--navy-800); font-weight: 700; }
.versus__row .versus__metal, .versus__row .versus__asphalt {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-block: -18px;
  padding: 18px 24px;
}
.versus__row .versus__metal { background: var(--navy-900); color: #fff; font-weight: 600; }
.versus__row .versus__asphalt { background: rgb(228 233 237 / .45); }
.versus__row:last-child .versus__metal, .versus__row:last-child .versus__asphalt { border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-bottom: 0; }
.versus__row:last-child { padding-bottom: 0; }

/* Home value: copy left, the two recoup figures and the advice card right. */
.value {
  display: grid;
  grid-template-columns: minmax(0, 700fr) minmax(0, 500fr);
  align-items: start;
  gap: 80px;
}
.value__copy { display: grid; gap: 32px; }
.value__aside { position: sticky; top: 96px; display: grid; gap: 10px; }
.recoup {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 36px 36px 32px;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
  list-style: none;
}
.recoup li:not(.recoup__note) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: baseline;
  padding: 18px 0 22px;
}
.recoup li + li:not(.recoup__note) { border-top: 1px solid var(--silver-200); }
.recoup strong { grid-row: 1 / 3; color: var(--navy-800); font-size: 54px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.recoup li > span { color: var(--slate-600); font-size: 12.5px; }
.recoup em { color: var(--navy-800); font-size: 14px; font-style: normal; font-weight: 700; }
.recoup i { grid-column: 1 / -1; height: 6px; margin-top: 16px; border-radius: 3px; background: var(--silver-200); }
.recoup i::after { content: ""; display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit; background: var(--grad-blue); }
.recoup li:first-child i::after { background: var(--navy-900); }
.recoup__note { padding-top: 14px; color: var(--slate-600); font-size: 12.5px; line-height: 1.5; }
.advice {
  padding: 36px 36px 40px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-xl);
  background: var(--grad-dark);
  color: #fff;
}
.advice__tag { font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.advice p:not(.advice__tag) { margin-top: 16px; color: rgb(255 255 255 / .86); font-size: 15.5px; font-weight: 500; line-height: 1.6; }
.advice strong { color: var(--blue-300); font-weight: 700; }

.split--reverse .split__media { order: -1; }
.split--reverse .split__media img { aspect-ratio: 4 / 5; }

/* Third option: photo and navy panel side by side, no overlay. Same dark recipe as .advice. */
.hybrid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px;
  min-height: 380px;
  padding: 12px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--grad-dark);
  box-shadow: var(--shadow-card);
  color: #fff;
}
.hybrid__media { position: relative; overflow: hidden; border-radius: calc(var(--radius-xl) - 8px); }
.hybrid__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hybrid__body { display: grid; gap: 18px; align-content: center; padding: 44px 24px 44px 44px; }
.hybrid__body h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
.hybrid__body > p { max-width: 46ch; color: rgb(255 255 255 / .84); font-size: 15px; font-weight: 500; line-height: 1.6; }
.hybrid__spots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.hybrid__spots li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 14px;
  background: rgb(255 255 255 / .06);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.hybrid__spots i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); }
.hybrid__spots svg { width: 20px; height: 20px; }
.hybrid__body .cta-row { margin-top: 8px; }

@media (max-width: 1099px) {
  .value { grid-template-columns: 1fr; gap: 48px; }
  .value__aside { position: static; }
  .hybrid { grid-template-columns: 1fr; min-height: 0; }
  .hybrid__media { height: 300px; }
  .hybrid__body { padding: 28px 28px 20px; }
}
@media (max-width: 767px) {
  .page-hero--short .page-hero__inner { padding-bottom: 64px; }
  .versus { padding: 0 24px 24px; }
  .versus__head { grid-template-columns: 1fr 1fr; gap: 8px; }
  .versus__head > span:first-child { display: none; }
  .versus__head img { height: 96px; }
  .versus__head b { padding: 12px 14px; font-size: 13px; }
  .versus__row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .versus__row .versus__metal, .versus__row .versus__asphalt { margin: 0; padding: 12px 16px; border-radius: var(--radius-md); }
  .versus__row [data-label]::before {
    content: attr(data-label);
    display: block;
    padding-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
  }
  .versus__row .versus__metal, .versus__row .versus__asphalt { display: block; }
  .versus__row:last-child { padding-bottom: 4px; }
  .recoup { padding: 24px 24px 22px; }
  .recoup strong { font-size: 44px; }
  .advice { padding: var(--card-pad); }
  .hybrid__media { height: 220px; }
  .hybrid__body { padding: 20px 12px 12px; }
  .hybrid__spots { grid-template-columns: 1fr; }
}

/* ---------- Accent & partial metal ---------- */
.page-hero__media--accent img { object-position: 50% 30%; }

/* Six spots: three-up cards, the same recipe as the numbered points. */
.spots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: var(--head-gap) 0 0;
  padding: 0;
  list-style: none;
}
.spots li {
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.spots__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); }
.spots__icon svg { width: 26px; height: 26px; }
.spots h3 {
  margin-top: 28px;
  color: var(--navy-800);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.spots p { max-width: 42ch; margin-top: 14px; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }

/* Cost and honest word: two cards, one white, one navy. */
.twin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.twin__card {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 48px 48px 52px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-xl);
  background: #fff;
}
.twin__card--navy {
  border-color: var(--navy-line);
  background: var(--grad-dark);
  color: #fff;
}
.twin__card--navy .h2 { color: #fff; }
.twin__title { font-size: clamp(28px, 2.8vw, 36px); }
.twin__card .kicker { margin-bottom: -10px; }
.prose--light { color: rgb(255 255 255 / .84); }
.prose--light strong { color: #fff; }

/* Gallery placeholders: dashed tile in the grid's own silver. */
/* The staggered 3x2 gallery the home once used; its rules left styles.css
   with the project stack, so the accent page carries its own copy. */
.project-grid--page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--head-gap); }
.project-grid--page .project-grid__col { display: grid; gap: 16px; align-content: start; }
.project-grid--page .project-tile { margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: rgb(228 233 237 / .45); }
.project-grid--page .project-tile--short { aspect-ratio: 4 / 3; }
.project-grid--page .project-tile--tall { aspect-ratio: 4 / 5; }
.project-grid--page .project-tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.project-tile--placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--silver-300);
  background: rgb(228 233 237 / .45);
  color: var(--slate-600);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 1099px) {
  .spots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spots h3 { margin-top: 20px; }
  .twin { grid-template-columns: 1fr; }
  .twin__card { padding: 40px; }
}
@media (max-width: 767px) {
  .spots { grid-template-columns: 1fr; }
  .twin__card { padding: var(--card-pad); }
  .project-grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid--page .project-grid__col { display: contents; }
  .project-grid--page { gap: 12px; }
  .project-grid--page .project-tile--short, .project-grid--page .project-tile--tall { aspect-ratio: 1; }
}

/* ---------- Services ---------- */
.page-hero__media--services img { object-position: 74% 60%; }
/* Metal pointer closes the page: a full section gap above, the contact block brings its own below. */
.inner-page .svc-section.page-section + .page-section.page-section--tight { padding-block: var(--section-y) 0; }

/* Pointer to the metal roofing page (2026-10-15): a navy card (--grad-dark),
   the copy on the left and the photo in its own rounded frame on the
   right, inset like a card inside the card. No fade over the photo. */
.pointer {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px;
  min-height: 380px;
  padding: 12px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--grad-dark);
  box-shadow: var(--shadow-card);
  color: #fff;
}
.pointer__media { position: relative; grid-column: 2; grid-row: 1; overflow: hidden; border-radius: calc(var(--radius-xl) - 8px); }
.pointer__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1.2s var(--ease-out); }
.pointer:hover .pointer__media img { transform: scale(1.04); }
.pointer__body { grid-column: 1; grid-row: 1; display: grid; gap: 18px; align-content: center; justify-items: start; padding: 44px 24px 44px 44px; }
.pointer__body h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
.pointer__body > p { max-width: 46ch; color: rgb(255 255 255 / .84); font-size: 15px; font-weight: 500; line-height: 1.6; }
.pointer__body .btn { margin-top: 6px; }

/* Services: one row per service, photo alternating sides; text-only services
   pair up two to a row. */
.service-list { display: grid; gap: 10px; margin-top: var(--head-gap); }
.service {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 790fr);
  gap: 48px;
  align-items: center;
  padding: 40px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-xl);
  background: #fff;
  scroll-margin-top: 80px;
}
.service:nth-child(even):not(.service--text) .service__media { order: 2; }
.service__media { overflow: hidden; border-radius: var(--radius-lg); }
.service__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.service:hover .service__media img { transform: scale(1.04); }
.service__body { display: grid; gap: 22px; justify-items: start; }
.service__body h3 { color: var(--navy-800); font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
.service__body .prose { font-size: 15.5px; }
.service__body .prose p { max-width: 64ch; }
.service__body .prose p + p { margin-top: 14px; }
.service__label {
  color: var(--label);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.service__handle { display: grid; gap: 10px; }
.service__handle ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.service__handle li {
  padding: 7px 12px;
  border: 1px solid var(--silver-200);
  border-radius: var(--pill);
  color: var(--navy-800);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.service__facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.service__facts dt { color: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.service__facts dd { margin: 4px 0 0; color: var(--navy-800); font-size: 14px; font-weight: 600; }
.service__body .text-link { margin-top: 2px; }

/* Text-only services sit side by side in the same 10px rhythm. */
.service--text { grid-template-columns: 1fr; padding: 40px 40px 44px; }
.service--text .service__body h3 { font-size: 26px; }
.service--wide { grid-column: 1 / -1; }
.service--wide .service__body { max-width: 790px; }
@supports (grid-template-columns: subgrid) {
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service:not(.service--text) { grid-column: 1 / -1; }
}
.page-section--sky .service { border-color: transparent; box-shadow: var(--shadow-card); }

@media (max-width: 1099px) {
  .pointer { grid-template-columns: 1fr; min-height: 0; }
  .pointer__media { grid-column: 1; grid-row: 2; height: 260px; }
  .pointer__body { padding: 28px 28px 20px; }
  .service { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .service:nth-child(even):not(.service--text) .service__media { order: 0; }
  .service__media img { aspect-ratio: 16 / 9; }
  @supports (grid-template-columns: subgrid) { .service-list { grid-template-columns: 1fr; } }
}
@media (max-width: 767px) {
  .pointer__media { height: 200px; }
  .pointer__body { padding: 20px 12px 12px; }
  .service, .service--text { padding: var(--card-pad); }
  .service__body h3, .service--text .service__body h3 { font-size: 24px; }
}

/* ---------- Projects ---------- */
.page-hero__media--projects img { object-position: 50% 40%; }

/* Filter bar: sticky, one row. The pills scroll sideways once they stop fitting,
   behind edge fades that app.js switches on only while there is more to see. */
.work-filters__inner { display: flex; align-items: center; gap: 20px; }
.work-filters__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-right: 20px;
  border-right: 1px solid var(--silver-200);
  color: var(--slate-600);
  font-size: 11px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work-filters__label svg { width: 16px; height: 16px; color: var(--label); }
/* The label sits beside the pills only where the column can hold both on one row. */
@media (max-width: 1439px) { .work-filters__label { display: none; } }
.work-filters__row {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 5px;
  border-radius: var(--pill);
  background: rgb(228 233 237 / .5);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.work-filters__row::-webkit-scrollbar { display: none; }
.work-filters__row[data-edge="right"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.work-filters__row[data-edge="left"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.work-filters__row[data-edge="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
/* Same segmented control as the Services tabs: a grey track, the active pill in navy. */
.work-filters button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .3s, background-color .3s;
}
.work-filters button:hover { color: var(--navy-900); }
.work-filters button.is-active { background: var(--navy-900); color: #fff; box-shadow: 0 8px 20px rgb(22 50 74 / .25); }
.work-filters__count { font-size: 11px; font-weight: 700; opacity: .6; transition: opacity .3s; }
.work-filters button.is-active .work-filters__count { opacity: .8; }
.work-filters__inner { padding-block: 10px; }

/* Above phones the bar floats at the bottom of the screen, centred, while the
   gallery is on screen; it slides away over the contact form and footer. */
@media (min-width: 768px) {
  .work-filters {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    padding-inline: var(--gutter);
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .4s, transform .5s var(--ease-out);
  }
  .work-filters.is-floating { opacity: 1; transform: none; pointer-events: auto; }
  .work-filters__inner { width: auto; max-width: 100%; margin: 0; padding: 0; }
  .work-filters__label { display: none; }
  .work-filters__row {
    padding: 6px;
    border: 1px solid rgb(255 255 255 / .6);
    background: rgb(255 255 255 / .82);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-panel);
  }
  .work { padding-bottom: 160px; }
}

/* Results row: how many are showing, which filter is on, one way back to all. */
.work { padding-block: 36px 120px; scroll-margin-top: 0; }
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}
.work-head__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; color: var(--slate-600); font-size: 14px; font-weight: 600; }
.work-head__count b { color: var(--navy-900); font-weight: 700; }
.work-head__filter { display: inline-flex; align-items: baseline; gap: 10px; color: var(--navy-900); }
.work-head__filter::before { content: "·"; color: var(--silver-300); }
.work-head__filter[hidden] { display: none; }
.work-head__clear { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.work-head__clear[hidden] { display: none; }

/* The gallery: photos whole in rounded frames, the title underneath, every card the same size. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
}
.work-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  grid-column: 1 / -1;
  margin: 24px 0 -8px;
  padding-top: 24px;
  border-top: 1px solid var(--silver-300);
  color: var(--navy-800);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.04em;
}
.work-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.work-group span { color: var(--slate-600); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.work-group[hidden] { display: none; }
.work-card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 14px;
  min-width: 0;
  border-radius: var(--radius-lg);
}
.work-card:focus-visible { outline-offset: 6px; }
.work-card.is-hidden { display: none; }
.work-card__media {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--silver-200);
  aspect-ratio: 4 / 3;
  transform: translateZ(0);
}
/* Width pinned as well: with only the height set, aspect-ratio would widen the frame past its columns. */
.work-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: transform 1.2s var(--ease-out);
}
.work-card:hover .work-card__media img { transform: scale(1.04); }
.work-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 8px 11px;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--pill);
  background: rgb(12 27 41 / .5);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}
.work-card__go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 8px 24px rgb(7 21 36 / .25);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .5s var(--ease-out);
}
.work-card__go svg { width: 20px; height: 20px; }
.work-card:hover .work-card__go, .work-card:focus-visible .work-card__go { opacity: 1; transform: none; }
.work-card__body { display: grid; gap: 4px; padding: 0 2px; }
.work-card__body b {
  display: -webkit-box;
  overflow: hidden;
  color: var(--navy-800);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .3s;
}
.work-card__body span { color: var(--slate-600); font-size: 13px; font-weight: 500; }
.work-card:hover .work-card__body b { color: var(--blue-600); }

/* Cards settle in when a filter changes; only once they are already revealed,
   so the entrance never fights the scroll reveal. */
@keyframes work-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.js .work-card.is-in.is-entering { animation: work-in .55s var(--ease-out) backwards; animation-delay: calc(var(--k, 0) * 40ms); }

.work-empty {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 56px 24px;
  border: 1px dashed var(--silver-300);
  border-radius: var(--radius-xl);
  color: var(--slate-600);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.work-empty[hidden] { display: none; }

/* Pages that open on white: the header switches to navy on light. */
.inner-page--light .site-header { color: var(--navy-800); }
.inner-page--light .site-header.is-scrolled .site-header__bar { border-color: var(--silver-200); background: rgb(255 255 255 / .8); box-shadow: 0 18px 40px rgb(132 148 160 / .22); }
.inner-page--light .brand img { filter: brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(1400%) hue-rotate(178deg) brightness(.9); }
.inner-page--light .site-nav a, .inner-page--light .site-nav a[aria-current="page"] { color: var(--navy-800); }
.inner-page--light .site-nav a::after { background: var(--navy-800); }
.inner-page--light .btn-ghost--nav { border-color: var(--navy-800); color: var(--navy-800); }
.inner-page--light .btn-ghost--nav:hover { background: rgb(22 50 74 / .06); }
.inner-page--light .btn-ghost--nav .btn-ghost__disc { background: var(--navy-900); color: #fff; }
.inner-page--light .btn-ghost--nav.btn-ghost--call::before { background: var(--navy-900); }
.inner-page--light .btn-ghost--nav.btn-ghost--call:hover { border-color: var(--navy-900); color: #fff; }
.inner-page--light .btn-ghost--nav.btn-ghost--call:hover .btn-ghost__disc { background: var(--ice-300); color: var(--navy-900); }
.inner-page--light .menu-toggle { border-color: var(--navy-800); }
.inner-page--light .menu-toggle span { background: var(--navy-800); }
.inner-page--light .breadcrumb ol { color: var(--label); }

/* Individual project: light header, then the photos in the same 3-up 4:3 frames as the gallery. */
.project-head { padding: 150px 0 48px; background: #fff; color: var(--navy-800); }
.project-head .breadcrumb ol { color: var(--label); }
.project-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.project-head h1 { max-width: 16em; color: var(--navy-800); font-size: clamp(34px, 3.6vw, 46px); font-weight: 500; line-height: 1.14; letter-spacing: -.05em; text-wrap: balance; }
.project-meta { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.project-meta dt, .project-facts dt { color: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.project-meta dd { margin: 6px 0 0; color: var(--navy-800); font-size: 15px; font-weight: 600; }
.project-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }
.is-placeholder { font-style: italic; opacity: .7; }
.project-gallery { padding: 8px 0 0; background: #fff; }
.project-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project-gallery__item { overflow: hidden; margin: 0; border-radius: var(--radius-lg); background: var(--silver-200); aspect-ratio: 4 / 3; }
.project-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.project-gallery__item--empty { display: grid; place-items: center; border: 1px dashed var(--silver-300); background: rgb(228 233 237 / .45); color: var(--slate-600); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.project-body { padding-top: 96px; }
.project-body .cta-row { gap: 24px; }
.project-facts {
  align-self: start;
  display: grid;
  gap: 18px;
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: rgb(228 233 237 / .38);
}
.project-facts dl { display: grid; gap: 14px; margin: 0; }
.project-facts dl div { padding-top: 14px; border-top: 1px solid var(--silver-300); }
.project-facts dt { color: var(--label); }
.project-facts dd { margin: 5px 0 0; color: var(--navy-800); font-size: 15px; font-weight: 600; }

@media (max-width: 1099px) {
  .work { padding-bottom: 96px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .project-head { padding-top: 130px; }
  .project-gallery__grid { gap: 16px; }
  .project-body { padding-top: 72px; }
}
@media (max-width: 767px) {
  .work { padding-block: 24px 72px; }
  .work-filters { top: 72px; }
  .work-filters__label { display: none; }
  /* The pill row bleeds to the screen edges so the fades sit on the edge, not the gutter. */
  .work-filters__row { gap: 4px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); border-radius: 0; }
  .work-filters button { min-height: 38px; padding: 0 14px; font-size: 12px; }
  .work-head { margin-bottom: 18px; }
  .work-head__count { font-size: 13px; }
  .work-grid { gap: 20px 12px; }
  .work-group { margin: 12px 0 -6px; padding-top: 16px; font-size: 18px; }
  .work-card { gap: 10px; }
  .work-card__media { aspect-ratio: 1; }
  .work-card__tag { top: 8px; left: 8px; padding: 7px 9px; font-size: 10px; }
  .work-card__body b { font-size: 14px; }
  .work-empty { padding: 40px 20px; }
  .project-meta { gap: 14px 24px; }
  .project-gallery__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .project-gallery__item:first-child { grid-column: 1 / -1; }
  .project-gallery__item:not(:first-child) { aspect-ratio: 1; }
}
@media (hover: none) {
  .work-card__go { display: none; }
}

/* ---------- Financing ---------- */
.page-hero__media--financing img { object-position: 50% 55%; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: var(--head-gap); }
.trio__card { padding: var(--card-pad); border: 1px solid var(--silver-200); border-radius: var(--radius-xl); background: #fff; }
.page-section--sky .trio__card { border-color: transparent; box-shadow: var(--shadow-card); }
.trio__icon, .check-grid svg, .promo li svg {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-blue); color: var(--navy-900);
}
.trio__icon svg { width: 22px; height: 22px; }
.trio__card h3 { margin-top: 26px; color: var(--navy-800); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.trio__icon + h3 { margin-top: 26px; }
.trio__card > h3:first-child { margin-top: 0; }
.trio__card p { margin-top: 12px; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }

.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: var(--head-gap) 0 0; padding: 0; list-style: none; }
.check-grid li { display: flex; gap: 18px; padding: 30px 28px 32px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); }
.check-grid svg { width: 40px; height: 40px; margin-top: 0; }
.check-grid svg > * { width: 100%; height: 100%; }
.check-grid h3 { color: var(--navy-800); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.check-grid p { margin-top: 8px; color: var(--slate-700); font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.page-section:not(.page-section--sky) .check-grid li { border: 1px solid var(--silver-200); box-shadow: none; }

.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: var(--head-gap) 0 0; padding: 0; list-style: none; counter-reset: how; }
.how--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.how li { padding: var(--card-pad); border: 1px solid var(--silver-200); border-radius: var(--radius-xl); background: #fff; }
.page-section--sky .how li { border-color: transparent; box-shadow: var(--shadow-card); }
.how__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 16px; font-weight: 700; }
.how h3 { margin-top: 26px; color: var(--navy-800); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.how p { margin-top: 10px; color: var(--slate-700); font-size: 14.5px; font-weight: 500; line-height: 1.55; }

.examples { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 500fr); gap: 10px; align-items: stretch; }
.examples__table { display: grid; align-content: start; gap: 24px; padding: 44px 44px 40px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); }
.examples__lead { color: var(--slate-700); font-size: 15.5px; font-weight: 500; line-height: 1.6; }
.examples__list { display: grid; margin: 0; padding: 0; list-style: none; }
.examples__list li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 1px solid var(--silver-200); }
.examples__list b { display: block; color: var(--navy-800); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.examples__list li > div > span { display: block; margin-top: 4px; color: var(--slate-600); font-size: 13px; }
.examples__list strong { flex: none; color: var(--navy-800); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.examples__list em { color: var(--label); font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: 0; }
.examples__note { color: var(--slate-600); font-size: 12.5px; line-height: 1.5; }
.promo {
  display: grid; align-content: start; gap: 16px; justify-items: start;
  padding: 44px 40px;
  border: 1px solid var(--navy-line); border-radius: var(--radius-xl);
  background: var(--grad-dark); color: #fff;
}
.promo__clock { width: 48px; height: 48px; color: var(--blue-300); }
.promo h3 { font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.05em; }
.promo p { color: rgb(255 255 255 / .84); font-size: 15px; font-weight: 500; line-height: 1.6; }
.promo ul { display: grid; gap: 12px; margin: 4px 0; padding: 0; list-style: none; }
.promo li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.promo li svg { width: 26px; height: 26px; }
.promo .btn { margin-top: 8px; }
.check-list--wide { margin-top: var(--head-gap); }
.check-list--wide p { max-width: 78ch; font-size: 16px; }
.disclaimer { max-width: none; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--silver-200); color: var(--slate-600); font-size: 12.5px; line-height: 1.6; }

/* ---------- About ---------- */
.page-hero--about .page-hero__inner { padding-top: 220px; padding-bottom: 96px; }
.page-hero__media--about img { object-position: 50% 30%; }
.page-hero--about .page-hero__lead { max-width: none; }
.page-hero__lead--wide { max-width: none; }
@media (max-width: 900px) { .page-hero--about .page-hero__lead, .page-hero__lead--wide { max-width: 640px; } .lead-br { display: none; } }
.owners { display: grid; gap: 10px; }
.owner { display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 890fr); gap: 56px; align-items: center; padding: 40px; border: 1px solid var(--silver-200); border-radius: var(--radius-xl); background: #fff; }
.owner:nth-child(even):not(.owner--stack) { grid-template-columns: minmax(0, 890fr) minmax(0, 380fr); }
.owner:nth-child(even):not(.owner--stack) .owner__photo { order: 2; }
.owner__photo { overflow: hidden; border-radius: var(--radius-lg); }
.owner__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.owner__body h2 { color: var(--navy-800); font-size: clamp(30px, 2.8vw, 38px); font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
.owner__role { margin-top: 8px; color: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.owner__body .prose { margin-top: 24px; }
.check-grid--tight li { padding: 26px 26px 28px; }
.believe { display: grid; grid-template-columns: minmax(0, 720fr) minmax(0, 470fr); gap: 90px; align-items: center; }
.believe__copy { display: grid; gap: 32px; }
.believe__quote { padding-left: 28px; border-left: 2px solid var(--blue-400); }
.believe__quote p { font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.believe__quote cite { display: block; margin-top: 20px; color: var(--blue-300); font-size: 13px; font-style: normal; font-weight: 600; }
.numbers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; margin: 72px 0 0; padding: 40px 0 0; border-top: 1px solid var(--silver-200); list-style: none; }
.numbers li { grid-column: span 3; }
.numbers li:nth-child(n+5) { grid-column: span 4; }
.numbers strong { display: block; color: var(--navy-800); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.numbers span { display: block; margin-top: 8px; color: var(--slate-600); font-size: 13px; line-height: 1.45; }
.insta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--head-gap); }
.insta__tile { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed var(--silver-300); border-radius: 9px; background: rgb(228 233 237 / .45); color: var(--slate-600); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.insta__note { margin-top: 14px; color: var(--slate-600); font-size: 12.5px; }
.areas__regions--page { margin-top: var(--head-gap); padding: 0; }
.areas__regions--page .region:nth-child(2) h3 { visibility: hidden; }

/* ---------- FAQ, thank you, legal ---------- */
/* Plain hero has no photo layer, so the strips come from its own background. */
.page-hero--plain { background: none; }
.page-hero--plain::before {
  content: "";
  position: absolute;
  inset: 0 0 -36px;
  z-index: -1;
  /* Figma 6239:647 (2026-10-21): project photos in soft light over the radial
     navy, the same plate on every inner page. */
  /* A fixed plate size instead of cover, so the photo keeps the same scale on
     every page whatever the hero height (tallest hero is ~724px with strips). */
  --plate: max(100vw, 2200px);
  background: #0b1b2a url("assets/page-hero-bg.webp") center top / var(--plate) auto no-repeat;
  animation: plate-zoom 2600ms var(--ease-soft) both;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent calc(100% - 36px) calc(100% - 31px), #000 calc(100% - 31px) calc(100% - 14px), transparent calc(100% - 14px) calc(100% - 9px), #000 calc(100% - 9px));
  mask-image: linear-gradient(#000 calc(100% - 36px), transparent calc(100% - 36px) calc(100% - 31px), #000 calc(100% - 31px) calc(100% - 14px), transparent calc(100% - 14px) calc(100% - 9px), #000 calc(100% - 9px));
}
@keyframes plate-zoom { from { background-size: calc(var(--plate) * 1.08) auto; } }
@media (prefers-reduced-motion: reduce) { .page-hero--plain::before { animation: none; } }
.page-hero--plain .page-hero__inner { padding-bottom: 80px; }
.page-hero--plain h1 { max-width: 14em; }
.faq__list { display: grid; gap: 8px; }
.faq__item { border: 1px solid var(--silver-200); border-radius: var(--radius-lg); background: #fff; }
.faq__item { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.faq__item[open] { border-color: var(--ice-300); background: linear-gradient(180deg, var(--sky-50) 0%, #f1f8fd 100%); box-shadow: 0 24px 48px rgb(132 148 160 / .12); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h2 { color: var(--navy-800); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
.faq__toggle { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--silver-300); border-radius: 50%; transition: transform .35s var(--ease-out), background-color .3s; }
.faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--navy-800); transform: translate(-50%, -50%); }
.faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease-out); }
.faq__item[open] .faq__toggle { background: var(--navy-900); border-color: var(--navy-900); }
.faq__item[open] .faq__toggle::before, .faq__item[open] .faq__toggle::after { background: #fff; }
.faq__item[open] .faq__toggle::after { transform: translate(-50%, -50%) rotate(0); }
.faq__answer { padding: 0 28px 28px; }
.faq__answer p { max-width: 70ch; color: var(--slate-700); font-size: 15.5px; font-weight: 500; line-height: 1.65; }
.faq__answer a { color: var(--label); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.thanks .page-hero__inner { padding-top: 180px; padding-bottom: 140px; }
.thanks h1 { font-size: clamp(44px, 5.5vw, 72px); }
.thanks .page-hero__lead a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.thanks__while { margin-top: 48px; color: var(--ice-100); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.thanks .cta-row { margin-top: 16px; }
.inner-page--minimal .site-header__actions .btn--sm { display: none; }

.legal__body { display: grid; gap: 0; }
/* Each block spans the 1280 column: heading on the left, copy on the right. */
.legal__block { display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 844fr); column-gap: 56px; padding-block: 40px; border-top: 1px solid var(--silver-200); }
.legal__block:first-child { padding-top: 0; border-top: 0; }
.legal__block:last-child { padding-bottom: 0; }
.legal__block > * { grid-column: 2; }
.legal__block > h2 { grid-column: 1; grid-row: 1 / span 12; }
.legal__block h2 + p, .legal__block h2 + ul, .legal__block h2 + dl { margin-top: 0; }
@media (max-width: 899px) {
  .legal__block { grid-template-columns: 1fr; padding-block: 28px; }
  .legal__block > *, .legal__block > h2 { grid-column: 1; grid-row: auto; }
  .legal__block h2 + p, .legal__block h2 + ul, .legal__block h2 + dl { margin-top: 14px; }
}
.legal__block h2 { color: var(--navy-800); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.legal__block p, .legal__block li { color: var(--slate-700); font-size: 16px; font-weight: 500; line-height: 1.65; }
.legal__block p + p, .legal__block ul + p, .legal__block p + ul { margin-top: 14px; }
.legal__block ul { padding-left: 22px; }
.legal__block li + li { margin-top: 6px; }
.legal__block strong { color: var(--navy-900); font-weight: 700; }
.legal__block a { color: var(--label); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal__facts { margin: 0; padding: 24px 28px; border-radius: var(--radius-lg); background: rgb(228 233 237 / .38); }
.legal__facts dt { color: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.legal__facts dd { margin: 6px 0 0; color: var(--navy-800); font-size: 28px; font-weight: 500; letter-spacing: -.05em; }

@media (max-width: 1099px) {
  .trio, .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how, .how--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .examples { grid-template-columns: 1fr; }
  .owner { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .owner:nth-child(even) .owner__photo { order: 0; }
  .owner__photo { max-width: 360px; }
  .believe { grid-template-columns: 1fr; gap: 48px; }
  .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-hero--about .page-hero__inner { padding-top: 168px; }
}
@media (max-width: 767px) {
  .trio, .check-grid, .how, .how--five { grid-template-columns: 1fr; }
  .check-grid li { padding: 24px 22px 26px; }
  .examples__table { padding: var(--card-pad); }
  .examples__list li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .promo { padding: var(--card-pad); }
  .owner { padding: var(--card-pad); }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 48px; }
  .numbers strong { font-size: 32px; }
  .insta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__item summary { padding: 18px 20px; gap: 16px; }
  .faq__item h2 { font-size: 17px; }
  .faq__answer { padding: 0 20px 22px; }
  .thanks .page-hero__inner { padding-top: 140px; padding-bottom: 96px; }
  .page-hero--plain .page-hero__inner { padding-bottom: 56px; }
  .page-hero--about .page-hero__inner { padding-top: 128px; padding-bottom: 56px; }
}

/* ======================================================================
   v2: bring the homepage's language into the inner pages — full-bleed
   photo bands, layered copy, big figures, fewer boxes.
   ====================================================================== */

/* Full-bleed band: photo on one side fading into navy, copy on the other. */
.band { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-950); color: #fff; }
.band--navy { background: var(--grad-dark); }
.band__media { position: absolute; inset: 0 45% 0 0; z-index: -1; }
.band__media--full { inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.band__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(var(--shade) / .15) 0%, rgb(var(--shade) / .55) 55%, var(--navy-925) 100%);
}
.band__media--full::after { background: linear-gradient(90deg, rgb(var(--shade) / .1) 0%, rgb(var(--shade) / .5) 40%, rgb(var(--shade) / .9) 70%); }
.band__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ice-300); opacity: .35; mix-blend-mode: soft-light; }
.band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); align-items: center; gap: 64px; padding-block: 140px; }
.band__inner--end { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); padding-block: 120px; }
.band__copy { grid-column: 2; display: grid; gap: 28px; }
.band__copy .h2 { color: #fff; }
.band__figure { grid-column: 1; grid-row: 1; align-self: end; display: grid; gap: 10px; max-width: 320px; }
.band__figure strong { font-size: clamp(120px, 14vw, 220px); font-weight: 500; line-height: .85; letter-spacing: -.08em; }
.band__figure span { color: rgb(255 255 255 / .82); font-size: 15px; font-weight: 600; line-height: 1.4; }
.check-list--light p { color: rgb(255 255 255 / .84); }
.check-list--light strong { color: #fff; }

/* Difference cards: the homepage's photo cards with a line of copy each. */
.difference-cards--page { margin: var(--head-gap) 0 0; padding: 0; list-style: none; }
.difference-cards--page .photo-card { height: 600px; }
.difference-cards--page .photo-card__body { gap: 12px; }
.difference-cards--page h3 { max-width: 9em; }
.photo-card__copy { max-width: 34ch; color: rgb(255 255 255 / .84); font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.difference-cards--page + .compare { margin-top: 10px; }

/* Metal types: taller photo, tag as glass. */
.metal-card__media img { aspect-ratio: 4 / 3.6; }

/* Energy: figures pinned beside the copy. */
.energy__summer { display: grid; grid-template-columns: minmax(0, 420fr) minmax(0, 760fr); gap: 90px; margin-top: var(--head-gap); }
.stat-stack { position: sticky; top: 96px; align-self: start; display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.stat-stack li { padding-top: 22px; border-top: 1px solid var(--silver-200); }
.stat-stack strong { display: block; color: var(--navy-800); font-size: clamp(56px, 6vw, 84px); font-weight: 500; line-height: .95; letter-spacing: -.07em; }
.stat-stack span { display: block; max-width: 28ch; margin-top: 10px; color: var(--slate-600); font-size: 14px; line-height: 1.45; }
.energy__copy { display: grid; gap: 16px; }
.energy__copy h3 { color: var(--navy-800); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.05em; }
.energy__copy .prose + .energy-card__tag { margin-top: 40px; }
.energy__copy .check-list { margin-top: 8px; }
.energy > .container:last-child { margin-top: 10px; }
.energy > .winter { margin-top: var(--section-y); }

/* Process steps: a running line with the numbers on it instead of stacked cards. */
.process__steps--line { position: relative; gap: 0; }
.process__steps--line::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 27px; width: 1px; background: var(--silver-300); }
.process__steps--line li { grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 26px 0 30px; border-radius: 0; background: none; box-shadow: none; }
.process__steps--line li + li { border-top: 1px solid var(--silver-200); }
.process__steps--line span { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); color: var(--navy-900); font-size: 15px; letter-spacing: 0; line-height: 1; }
.process__steps--line h3 { line-height: 56px; }
.process__steps--line p { margin-top: 2px; }

@media (max-width: 1099px) {
  .band__media { inset: 0; }
  .band__media::after { background: linear-gradient(180deg, rgb(var(--shade) / .35) 0%, rgb(var(--shade) / .9) 55%, var(--navy-925) 100%); }
  .band__media--full::after { background: linear-gradient(180deg, rgb(var(--shade) / .3) 0%, rgb(var(--shade) / .92) 60%); }
  .band__inner, .band__inner--end { grid-template-columns: 1fr; gap: 40px; padding-block: 96px; }
  .band__copy, .band__figure { grid-column: 1; grid-row: auto; }
  .band__figure { order: -1; }
  .difference-cards--page .photo-card { height: auto; }
  .energy__summer { grid-template-columns: 1fr; gap: 48px; }
  .stat-stack { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
  .band__inner, .band__inner--end { padding-block: 72px; }
  .band__figure strong { font-size: 120px; }
  .stat-stack { grid-template-columns: 1fr; gap: 18px; }
  .stat-stack strong { font-size: 52px; }
  .process__steps--line::before { left: 21px; }
  .process__steps--line li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 22px 0 24px; }
  .process__steps--line span { width: 44px; height: 44px; font-size: 13px; }
  .process__steps--line h3 { line-height: 1.25; padding-top: 12px; }
}


/* Framed photos: the image whole, in a rounded frame, no fade. */
.split--wide { grid-template-columns: minmax(0, 560fr) minmax(0, 640fr); gap: 80px; }
.frame { overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.frame img { width: 100%; height: auto; display: block; }
.frame--tall { max-width: 520px; justify-self: end; }
.big-figure { display: grid; gap: 8px; padding-top: 8px; }
.big-figure strong { color: var(--navy-800); font-size: clamp(72px, 8vw, 120px); font-weight: 500; line-height: .9; letter-spacing: -.08em; }
.big-figure span { max-width: 26ch; color: var(--slate-600); font-size: 14px; font-weight: 600; line-height: 1.4; }
.energy__winter { margin-top: var(--section-y); }
.energy__winter .split__copy { gap: 28px; }
.page-section:not(.page-section--sky, .page-section--navy) + .page-section:not(.page-section--sky, .page-section--navy) { padding-top: 0; }
@media (max-width: 1099px) {
  .split--wide { grid-template-columns: 1fr; gap: 40px; }
  .frame--tall { max-width: 100%; justify-self: stretch; }
  .energy__winter .frame--tall { max-width: 420px; }
}

/* Services v2: every photo the same size, same side, same crop. */
.service:not(.service--text) { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: center; }
.service:nth-child(even):not(.service--text) .service__media { order: 0; }
.service__media { order: 2; align-self: center; }
.service__media img { aspect-ratio: 4 / 3; height: auto; }
.service__body { max-width: 640px; }
@media (max-width: 1099px) {
  .service:not(.service--text) { grid-template-columns: 1fr; gap: 28px; }
  .service__media { order: 0; }
  .service__media img { aspect-ratio: 16 / 9; }
}
.service:not(.service--text) .service__body { grid-column: 1; grid-row: 1; }
.service:not(.service--text) .service__media, .service:nth-child(even):not(.service--text) .service__media { grid-column: 2; grid-row: 1; order: 0; }
@media (max-width: 1099px) {
  .service:not(.service--text) .service__media, .service:nth-child(even):not(.service--text) .service__media { grid-column: 1; grid-row: 1; }
  .service:not(.service--text) .service__body { grid-row: 2; }
}

/* ---------- Services v3: one carousel per category, three cards in view ---------- */
.section-intro--carousel { align-items: flex-end; }
.svc-nav { display: flex; gap: 8px; }
.svc-nav button {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--silver-300); border-radius: 50%; background: #fff; color: var(--navy-900);
  transition: background-color .3s, color .3s, border-color .3s;
}
.svc-nav button svg { width: 20px; height: 20px; }
.svc-nav button[data-dir="-1"] svg { transform: scaleX(-1); }
.svc-nav button:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.svc-nav button:disabled { opacity: .35; pointer-events: none; }
.svc-carousel { margin-top: var(--head-gap); }
.svc-track {
  --svc-gap: 10px;
  display: flex; gap: var(--svc-gap);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc {
  flex: 0 0 calc((100% - 2 * var(--svc-gap)) / 3);
  display: flex; flex-direction: column;
  overflow: hidden; border-radius: var(--radius-xl); background: #fff;
  scroll-snap-align: start; scroll-margin-top: 80px;
}
.svc { border: 1px solid var(--silver-200); }
.page-section--sky .svc { border-color: rgb(207 213 218 / .6); }
.svc__media { margin: 0; overflow: hidden; }
.svc__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.svc:hover .svc__media img { transform: scale(1.04); }
.svc__media--empty {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  border-bottom: 1px dashed var(--silver-300); background: rgb(228 233 237 / .45);
  color: var(--slate-600); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: center; text-transform: uppercase;
}
.svc__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 28px 32px; }
.svc__body h3 { color: var(--navy-800); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -.04em; }
.svc__body .prose { font-size: 14.5px; }
.svc__body .prose p + p { margin-top: 12px; }
.svc__body .text-link { align-self: flex-start; margin-top: auto; }
@media (max-width: 1099px) {
  .svc { flex-basis: calc((100% - var(--svc-gap)) / 2); }
  .section-intro--carousel { flex-direction: row; align-items: flex-end; }
}
@media (max-width: 767px) {
  .svc { flex-basis: min(82%, 340px); }
  .svc__body { padding: 22px 22px 26px; }
  .svc-nav button { width: 44px; height: 44px; }
}

/* Carousel sections: even rhythm above and below the track, no clipped shadows. */
.page-section--carousel { padding-block: 96px; }
.page-section--carousel + .page-section { padding-top: 96px; }
.svc-track { padding-block: 2px; }
@media (max-width: 767px) { .page-section--carousel, .page-section--carousel + .page-section { padding-block: 64px; } }

/* Service cards: equal collapsed height, the rest of the copy unfolds on demand. */
.svc-track { align-items: flex-start; }
.svc { min-height: var(--svc-h, auto); }
.svc__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--ease-out), opacity .35s ease; }
.svc__more > div { display: grid; gap: 18px; min-height: 0; overflow: hidden; }
.svc.is-open .svc__more { grid-template-rows: 1fr; opacity: 1; }
.svc.is-open .svc__more > div { padding-bottom: 4px; }
.svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: auto; padding-top: 6px; }
.svc__toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--slate-600); font-size: 13px; font-weight: 700;
  transition: color .3s;
}
.svc__toggle:hover { color: var(--navy-900); }
.svc__toggle svg { width: 10px; height: 6px; transition: transform .35s var(--ease-out); }
.svc.is-open .svc__toggle svg { transform: rotate(180deg); }
.svc__toggle[hidden] { display: none; }
/* The track stays inside the column: nothing peeks past the gutter. */
.svc-track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }

/* ======================================================================
   Services explorer: list left, pinned detail right; accordion on phones.
   ====================================================================== */
.explorer { display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 720fr); gap: 56px; align-items: start; margin-top: var(--head-gap); }
.explorer__group + .explorer__group { margin-top: 28px; }
.explorer__group-title {
  display: flex; align-items: baseline; gap: 10px; padding: 0 0 8px 16px;
  color: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.explorer__group-title span { color: var(--slate-600); font-weight: 600; letter-spacing: 0; }
.explorer__group ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.explorer__item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 20px; align-items: center; gap: 16px;
  width: 100%; padding: 10px 16px 10px 10px; text-align: left;
  border: 1px solid transparent; border-radius: var(--radius-lg); background: transparent;
  transition: background-color .3s, border-color .3s;
}
.explorer__item:hover { background: rgb(228 233 237 / .45); }
.explorer__item[aria-selected="true"] { border-color: var(--silver-200); background: #fff; box-shadow: var(--shadow-card); }
.explorer__thumb { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; background: var(--silver-200); }
.explorer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.explorer__thumb--empty { border: 1px dashed var(--silver-300); background: rgb(228 233 237 / .5); }
.explorer__text { display: grid; gap: 3px; min-width: 0; }
.explorer__text b { color: var(--navy-800); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.explorer__text span { overflow: hidden; color: var(--slate-600); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.explorer__chev { width: 20px; height: 20px; color: var(--silver-300); transition: color .3s, transform .35s var(--ease-out); }
.explorer__item:hover .explorer__chev, .explorer__item[aria-selected="true"] .explorer__chev { color: var(--navy-900); transform: translateX(3px); }

.explorer__panel { position: sticky; top: 96px; }
.explorer__detail {
  overflow: hidden; border: 1px solid var(--silver-200); border-radius: var(--radius-xl); background: #fff;
  animation: detail-in .5s var(--ease-out) both;
}
@keyframes detail-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.explorer__photo { margin: 0; overflow: hidden; }
.explorer__photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.explorer__photo--empty { display: grid; place-items: center; aspect-ratio: 16 / 9; border-bottom: 1px dashed var(--silver-300); background: rgb(228 233 237 / .45); color: var(--slate-600); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.explorer__body { display: grid; gap: 20px; justify-items: start; padding: 32px 36px 36px; }
.explorer__body h3 { color: var(--navy-800); font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
.explorer__body .kicker { margin-bottom: -8px; }
.explorer__body .prose { font-size: 15.5px; }
.explorer__body .prose p { max-width: 62ch; }
.explorer__body .prose p + p { margin-top: 12px; }
.explorer__body .cta-row { margin-top: 8px; gap: 20px; }

@media (max-width: 1099px) {
  /* Phones and tablets: the detail opens under its own row. */
  .explorer { grid-template-columns: 1fr; gap: 0; }
  .explorer__panel { display: none; }
  .explorer__group ul li { display: grid; gap: 6px; }
  .explorer__item { grid-template-columns: 56px minmax(0, 1fr) 20px; }
  .explorer__thumb { width: 56px; height: 56px; }
  .explorer__chev { transform: rotate(90deg); }
  .explorer__item[aria-selected="true"] .explorer__chev { transform: rotate(-90deg); }
  .explorer__item:hover .explorer__chev { transform: rotate(90deg); }
  .explorer__item[aria-selected="true"]:hover .explorer__chev { transform: rotate(-90deg); }
  li > .explorer__detail { margin: 0 0 10px; }
  .explorer__body { padding: 24px 22px 28px; }
}
@media (max-width: 767px) {
  .explorer__text b { font-size: 15px; }
  .explorer__text span { -webkit-line-clamp: 1; }
}

/* Explorer, desktop fixes: the panel fits the viewport and the pairing is obvious. */
@media (min-width: 1100px) {
  .explorer { grid-template-columns: minmax(0, 430fr) minmax(0, 760fr); gap: 40px; }
  .explorer__panel { top: 88px; }
  .explorer__detail { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100vh - 112px); }
  .explorer__photo img, .explorer__photo--empty { aspect-ratio: 21 / 9; }
  .explorer__body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--silver-300) transparent; padding: 28px 36px 36px; }
  .explorer__item[aria-selected="true"] { position: relative; border-color: var(--navy-900); background: var(--navy-900); box-shadow: none; }
  .explorer__item[aria-selected="true"] .explorer__text b { color: #fff; }
  .explorer__item[aria-selected="true"] .explorer__text span { color: rgb(255 255 255 / .72); }
  .explorer__item[aria-selected="true"] .explorer__chev { color: var(--blue-300); }
  /* Small notch pointing at the panel. */
  .explorer__item[aria-selected="true"]::after { content: ""; position: absolute; top: 50%; right: -9px; width: 14px; height: 14px; background: var(--navy-900); transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
}
.explorer__label { display: flex; align-items: center; gap: 8px; color: var(--slate-600); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.explorer__label span { color: var(--label); }

.explorer__detail[hidden] { display: none; }

/* ======================================================================
   Services: tabs + tile grid + slide-over drawer
   ====================================================================== */
.tabs { display: flex; gap: 6px; margin-top: 40px; padding: 6px; border-radius: var(--pill); background: rgb(228 233 237 / .5); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-label { display: none; }
.tabs[data-edge="right"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.tabs[data-edge="left"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.tabs[data-edge="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.tabs [role="tab"] {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--pill); background: transparent; color: var(--slate-600);
  font-size: 14px; font-weight: 700; white-space: nowrap; transition: background-color .3s, color .3s;
}
.tabs [role="tab"] span { font-size: 11px; font-weight: 700; opacity: .6; }
.tabs [role="tab"]:hover { color: var(--navy-900); }
.tabs [role="tab"][aria-selected="true"] { background: var(--navy-900); color: #fff; box-shadow: 0 8px 20px rgb(22 50 74 / .25); }
.tabs [role="tab"][aria-selected="true"] span { opacity: .8; }
.svc-section .section-head { scroll-margin-top: 150px; }
.svc-section { padding-bottom: 0; }
.tab-panel { margin-top: 36px; animation: detail-in .5s var(--ease-out) both; }
.tab-panel[hidden] { display: none; }
.tab-panel__lead { color: var(--navy-800); font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.tile {
  display: grid; width: 100%; height: 100%; padding: 0; text-align: left;
  overflow: hidden; border: 1px solid var(--silver-200); border-radius: var(--radius-xl); background: #fff;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.tile:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-panel); }
.tile__photo { margin: 0; overflow: hidden; }
.tile__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile:hover .tile__photo img { transform: scale(1.05); }
.tile__photo--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--grad-dark); }
.tile__photo--empty img, .drawer__photo--empty img { width: 120px; height: auto; aspect-ratio: auto; opacity: .9; }
.tile:hover .tile__photo--empty img { transform: none; }
.tile__body { display: grid; gap: 8px; padding: 22px 24px 24px; }
.tile__body b { color: var(--navy-800); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.tile__body > span { color: var(--slate-600); font-size: 14px; line-height: 1.5; }
.tile__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--label); font-size: 13px; font-style: normal; font-weight: 700; }
.tile__cta svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.tile:hover .tile__cta svg { transform: translateX(3px); }

/* Drawer: slides in from the right on desktop, up from the bottom on phones. */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(7 21 36 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s ease; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: #fff; box-shadow: -30px 0 60px rgb(7 21 36 / .25);
  transform: translateX(100%); transition: transform .55s var(--ease-out);
}
.drawer.is-open .drawer__sheet { transform: none; }
.drawer__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--navy-900); font-size: 26px; line-height: 1; box-shadow: var(--shadow-card); }
.drawer__content { overflow-y: auto; overscroll-behavior: contain; }
.drawer__photo { margin: 0; }
.drawer__photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.drawer__photo--empty { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--grad-dark); }
.drawer__body { display: grid; gap: 20px; justify-items: start; padding: 28px 32px 32px; }
.drawer__body .kicker { margin-bottom: -8px; }
.drawer__body h3 { color: var(--navy-800); font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
.drawer__body .prose { font-size: 15.5px; }
.drawer__body .prose p + p { margin-top: 12px; }
.drawer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 32px; border-top: 1px solid var(--silver-200); background: #fff; }
body.drawer-open { overflow: hidden; }

@media (max-width: 1099px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  /* Phones: the four categories sit in a 2x2 tray, all in view, nothing to swipe. */
  .tabs-label { display: block; margin-top: 32px; color: var(--slate-600); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: auto; margin-top: 12px; border-radius: 22px; overflow: visible; }
  .tabs [role="tab"] { justify-content: space-between; min-height: 48px; padding: 0 12px 0 16px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(22 50 74 / .08); color: var(--navy-900); }
  .tabs [role="tab"] span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: rgb(22 50 74 / .07); opacity: 1; }
  .tabs [role="tab"][aria-selected="true"] span { background: rgb(255 255 255 / .16); opacity: 1; }
  .tile-grid { grid-template-columns: 1fr; }
  .drawer__sheet { top: auto; left: 0; width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; transform: translateY(100%); box-shadow: 0 -30px 60px rgb(7 21 36 / .25); }
  .drawer__body { padding: 22px 22px 26px; }
  .drawer__foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); }
}
/* Drawer becomes a centred modal card on desktop and tablet. */
@media (min-width: 768px) {
  .drawer { display: grid; place-items: center; padding: 24px; }
  .drawer__sheet {
    position: relative; inset: auto; width: min(720px, 100%); max-height: min(88vh, 900px);
    overflow: hidden; border-radius: var(--radius-xl); box-shadow: 0 48px 128px rgb(7 21 36 / .45);
    transform: translateY(16px) scale(.98); opacity: 0;
    transition: transform .5s var(--ease-out), opacity .35s ease;
  }
  .drawer.is-open .drawer__sheet { transform: none; opacity: 1; }
  .drawer__photo img, .drawer__photo--empty { aspect-ratio: 21 / 9; }
  .drawer__body { padding: 28px 40px 32px; }
  .drawer__foot { padding: 18px 40px; }
}

/* ---------- Mobile pass (2026-09-26) ---------- */
/* Difference cards: the page variant must not undo the phone rail from
   styles.css (gutter padding, snap, portrait ratio). */
@media (max-width: 899px) {
  .difference-cards--page { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .difference-cards--page .photo-card { height: auto; }
}
@media (max-width: 767px) {
  /* Regions partial is shared with the home and splits Massachusetts in two
     columns; stacked on a phone the second heading reads as a duplicate. */
  .areas__regions--page .region:nth-child(2) h3 { display: none; }
  .areas__regions--page .region:nth-child(2) { padding-top: 0; }
}

/* ---------- Metal Roofing v3 (2026-09-26) ---------- */
/* What it is: three numbered points under the copy, photo with a glass stat. */
.system { align-items: center; }
.system__points { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.system__points li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 16px 18px 16px 14px; border: 1px solid var(--silver-200); border-radius: var(--radius-lg); background: #fff;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.system__points li:hover { transform: translateY(-2px); border-color: var(--ice-300); box-shadow: 0 18px 36px rgb(132 148 160 / .14); }
.system__points span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.system__points h3 { color: var(--navy-800); font-size: 16px; font-weight: 700; line-height: 22px; letter-spacing: -.02em; }
.system__points p { margin-top: 2px; color: var(--slate-600); font-size: 14px; font-weight: 500; line-height: 1.5; }
.system__media img { aspect-ratio: 4 / 5; }
.system__media figcaption strong { font-size: 64px; }
.system__media figcaption span { max-width: 170px; }

/* Compare: an X for the typical column, a check for ours, numbered rows. */
.compare--v3 { padding: 20px 32px 24px; }
.compare--v3 .compare__row { grid-template-columns: minmax(0, 240fr) minmax(0, 420fr) minmax(0, 480fr); padding: 0; border-top: 0; }
.compare--v3 .compare__row > * { padding-block: 18px; }
.compare--v3 .compare__row + .compare__row > [role="rowheader"],
.compare--v3 .compare__row + .compare__row > .compare__them { border-top: 1px solid var(--silver-200); }
.compare--v3 [role="rowheader"] { display: flex; align-items: center; gap: 12px; }
.compare--v3 [role="rowheader"] b { flex: none; color: var(--blue-600); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.compare--v3 .compare__them { display: flex; align-items: center; gap: 12px; color: var(--slate-600); }
.compare--v3 .compare__them svg { flex: none; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--silver-200); color: var(--slate-600); box-sizing: border-box; }
.compare--v3 .compare__row--head .compare__them { color: var(--slate-600); }
.compare--v3 .compare__row--head .compare__them svg { background: transparent; border: 1px solid var(--silver-300); }
.compare--v3 .compare__ours { margin-block: 0; padding: 18px 26px; background: var(--navy-900); position: relative; }
.compare--v3 .compare__row + .compare__row .compare__ours { border-top: 1px solid var(--navy-line); }
.compare--v3 .compare__row--head .compare__ours { justify-content: space-between; padding-block: 16px; background: var(--grad-dark); }
.compare--v3 .compare__row--head .compare__ours em { padding: 6px 12px; border: 1px solid rgb(164 217 255 / .4); border-radius: var(--pill); color: var(--blue-300); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.compare--v3 .compare__ours svg { width: 22px; height: 22px; box-shadow: 0 0 0 4px rgb(123 189 236 / .18); }
.compare--v3 .compare__row:not(.compare__row--head) { transition: background .3s; }
.compare--v3 .compare__row:not(.compare__row--head):hover { background: linear-gradient(90deg, transparent, var(--sky-50) 45%, transparent 66%); }
.compare--v3 .compare__row:last-of-type .compare__ours { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.compare__foot { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--sky-50); color: var(--slate-700); font-size: 14px; font-weight: 500; }
.compare__foot strong { color: var(--navy-900); font-weight: 700; }
.compare__foot svg { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--grad-blue); color: var(--navy-900); }
@media (max-width: 767px) {
  .compare--v3 { padding: 4px 20px 20px; }
  .compare--v3 .compare__row { grid-template-columns: 1fr; gap: 0; padding: 20px 0 0; }
  .compare--v3 .compare__row--head { display: none; }
  .compare--v3 .compare__row + .compare__row > [role="rowheader"] { border-top: 0; }
  .compare--v3 .compare__row + .compare__row { border-top: 1px solid var(--silver-200); }
  .compare--v3 .compare__row > * { padding-block: 0; }
  .compare--v3 .compare__row + .compare__row > .compare__them { border-top: 0; }
  .compare--v3 [role="rowheader"] { padding-bottom: 10px; }
  .compare--v3 .compare__them { padding: 12px 14px; border-radius: var(--radius-lg); background: rgb(228 233 237 / .5); }
  .compare--v3 .compare__them::before, .compare--v3 .compare__ours::before { display: none; }
  .compare--v3 .compare__ours, .compare--v3 .compare__row:last-of-type .compare__ours { margin-top: 8px; padding: 14px 16px; border-radius: var(--radius-lg); border-top: 0; }
  .compare--v3 .compare__ours { display: flex; align-items: center; gap: 12px; }
  .compare--v3 .compare__ours svg { display: block; }
}

/* Winter photo: cropped to a portrait frame that matches the copy's height. */
.energy__winter { align-items: center; }
.energy__winter .frame--tall { max-width: 480px; }
.energy__winter .frame--tall img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }

/* Process: one navy line that draws itself down to the current step. */
.process__steps--live { --progress: 0; }
.process__steps--live::before { left: 27px; width: 2px; background: var(--silver-300); }
.process__steps--live::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 27px; width: 2px;
  background: var(--navy-900);
  transform: scaleY(var(--progress)); transform-origin: top; transition: transform .5s var(--ease-out);
}
.process__steps--live span { position: relative; overflow: hidden; border: 2px solid var(--silver-300); box-shadow: none; background: #fff; color: var(--slate-600); transition: border-color .35s, background .35s, color .35s, box-shadow .35s; }
.process__steps--live span i { font-style: normal; transition: opacity .25s, transform .35s var(--ease-out); }
.process__steps--live span svg { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .4s var(--ease-out); }
.process__steps--live li.is-active span { border-color: var(--navy-900); color: var(--navy-900); box-shadow: 0 0 0 6px rgb(22 50 74 / .08); }
.process__steps--live li.is-done span { border-color: var(--navy-900); background: var(--navy-900); }
.process__steps--live li.is-done span i { opacity: 0; transform: translateY(-8px); }
.process__steps--live li.is-done span svg { opacity: 1; transform: none; }
.process__steps--live li h3 { transition: color .35s; }
.process__steps--live li:not(.is-active):not(.is-done) h3 { color: var(--slate-600); }
@media (max-width: 767px) { .process__steps--live::before, .process__steps--live::after { left: 21px; } }

/* How long it takes: a day grid with one solid bar per job type. */
.timeline--bars { margin-top: var(--section-y); }
.timeline__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; gap: 40px; }
.timeline__head > p { color: var(--slate-700); font-size: 16px; font-weight: 500; line-height: 1.6; }
.timeline__bars { display: grid; gap: 0; margin: var(--head-gap) 0 0; padding: 12px 36px 20px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); list-style: none; }
.timeline__bars li { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr) 120px; align-items: center; gap: 28px; padding: 22px 0; }
.timeline__bars li + li { border-top: 1px solid var(--silver-200); }
.timeline__bars p { color: var(--navy-800); font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.timeline__bars strong { justify-self: end; color: var(--navy-800); font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.timeline__bars strong small { margin-left: 6px; color: var(--label); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.timeline__track {
  position: relative; height: 22px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--silver-300) 0 1px, transparent 1px calc(100% / var(--max)));
  background-size: calc(100% + 1px) 100%;
}
.timeline__track::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--silver-300); }
.timeline__lead { display: none; }
.timeline__span {
  position: absolute; top: 3px; bottom: 3px; border-radius: 5px;
  left: calc(var(--from) / var(--max) * 100%); width: calc((var(--to) - var(--from)) / var(--max) * 100%);
  background: var(--navy-900);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out);
}
.timeline__bars.is-in .timeline__span { transform: none; }
.timeline__bars.is-in li:nth-child(2) .timeline__span { transition-delay: .1s; }
.timeline__bars.is-in li:nth-child(3) .timeline__span { transition-delay: .2s; }
.timeline__bars.is-in li:nth-child(4) .timeline__span { transition-delay: .3s; }
.timeline__scale { padding: 10px 0 0 !important; border-top: 0 !important; }
.timeline__scale div { display: flex; justify-content: space-between; color: var(--slate-600); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 1099px) {
  .timeline__head { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 767px) {
  .timeline__bars { padding: 8px 20px 16px; gap: 0; }
  .timeline__bars li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label num" "bar bar"; row-gap: 12px; column-gap: 12px; padding: 18px 0; }
  .timeline__bars p { grid-area: label; }
  .timeline__bars strong { grid-area: num; font-size: 24px; }
  .timeline__track { grid-area: bar; }
  .timeline__scale { display: block !important; }
  .timeline__scale p, .timeline__scale strong { display: none; }
}

/* Winter (v3): portrait photo with a glass stat, points as numbered cards,
   the solar note as the fourth card in navy. */
.winter { display: grid; grid-template-columns: minmax(0, 720fr) minmax(0, 480fr); align-items: center; gap: 72px; margin-top: var(--section-y) !important; padding-top: var(--section-y); border-top: 1px solid var(--silver-200); }
.winter__media { order: 2; align-self: stretch; }
.winter__media img { height: 100%; aspect-ratio: auto; min-height: 560px; object-fit: cover; object-position: 50% 45%; }
.winter__media figcaption strong { font-size: 44px; }
.winter__media figcaption span { max-width: 200px; }
.winter__body { display: grid; gap: 36px; }
.winter__lead { max-width: 46ch; margin-top: 8px; color: var(--slate-700); font-size: 16px; font-weight: 500; line-height: 1.6; }
.winter__points { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.winter__points li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 20px 24px 22px 18px; border: 1px solid var(--silver-200); border-radius: var(--radius-lg); background: #fff;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.winter__points li:hover { transform: translateY(-2px); border-color: var(--ice-300); box-shadow: 0 18px 36px rgb(132 148 160 / .14); }
.winter__points span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.winter__points span svg { width: 20px; height: 20px; }
.winter__points h3 { color: var(--navy-800); font-size: 17px; font-weight: 700; line-height: 22px; letter-spacing: -.02em; }
.winter__points p { margin-top: 6px; color: var(--slate-600); font-size: 14px; font-weight: 500; line-height: 1.55; }
.winter__solar { border-color: transparent !important; background: var(--grad-dark) !important; }
.winter__solar span { background: var(--grad-blue); box-shadow: none; }
.winter__solar h3 { color: #fff; }
.winter__solar p { color: rgb(255 255 255 / .82); }
.winter__solar p strong { color: var(--blue-300); }
@media (max-width: 1099px) {
  .winter { grid-template-columns: 1fr; gap: 40px; }
  .winter__media { order: 0; }
  .winter__media img { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .winter__points { gap: 8px; }
  .winter__points li { padding: 18px 18px 20px 14px; }
}

/* ---------- vs. Asphalt: side cards + grouped comparison (v2) ---------- */
.vs-sides { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: var(--head-gap); }
.vs-side { --vs-media-h: 240px; display: grid; align-content: start; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
/* Fixed px height, not 100% of a grid row: iOS Safari resolved the percentage
   against the whole card and the photo covered the text. */
.vs-side img { display: block; width: 100%; height: var(--vs-media-h); object-fit: cover; }
.vs-side__body { display: grid; gap: 10px; padding: 28px 32px 30px; }
.vs-side__tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.vs-side h3 { font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.045em; }
.vs-side__body > p:not(.vs-side__tag) { max-width: 44ch; font-size: 14.5px; font-weight: 500; line-height: 1.55; opacity: .85; }
.vs-side dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 14px 0 0; padding-top: 18px; border-top: 1px solid currentColor; }
.vs-side dl { border-color: rgb(255 255 255 / .15); }
.vs-side dt { font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.vs-side dd { margin: 6px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; opacity: .75; }
.vs-side--metal { background: var(--grad-dark); color: #fff; }
.vs-side--metal .vs-side__tag, .vs-side--metal dt { color: var(--blue-300); }
.vs-side--asphalt { background: #fff; color: var(--navy-800); }
.vs-side--asphalt dl { border-color: var(--silver-200); }
.vs-side--asphalt .vs-side__tag { color: var(--blue-600); }
.vs-side--asphalt .vs-side__body > p:not(.vs-side__tag) { color: var(--slate-700); }
.vs-side--asphalt dd { color: var(--slate-600); }
.vs-sides__vs { position: absolute; top: 120px; left: 50%; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--grad-blue); box-shadow: 0 10px 24px rgb(22 50 74 / .25), 0 0 0 6px #fff; color: var(--navy-900); font-size: 15px; font-weight: 700; letter-spacing: -.02em; translate: -50% -50%; }

.vs-groups { display: grid; gap: 14px; margin-top: 14px; }
.vs-group { padding: 8px 32px 12px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); }
.vs-group__head, .vs-row { display: grid; grid-template-columns: minmax(0, 220fr) minmax(0, 460fr) minmax(0, 460fr); gap: 24px; align-items: center; }
.vs-group__head { padding: 18px 0 12px; border-bottom: 1px solid var(--silver-200); }
.vs-group__head h3 { color: var(--navy-900); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.vs-group__head span { padding-left: 46px; color: var(--slate-600); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vs-row { padding: 16px 0; }
.vs-row + .vs-row { border-top: 1px solid var(--silver-200); }
.vs-row__label { color: var(--navy-800); font-size: 15px; font-weight: 700; line-height: 1.35; }
.vs-row__cell { display: flex; align-items: center; gap: 14px; color: var(--slate-600); font-size: 15px; font-weight: 500; line-height: 1.45; }
.vs-row__mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--silver-200); color: var(--slate-600); }
.vs-row__mark svg { width: 20px; height: 20px; }
.vs-row[data-edge="metal"] .vs-row__cell--metal, .vs-row[data-edge="asphalt"] .vs-row__cell--asphalt { color: var(--navy-900); font-weight: 600; }
.vs-row[data-edge="metal"] .vs-row__cell--metal .vs-row__mark, .vs-row[data-edge="asphalt"] .vs-row__cell--asphalt .vs-row__mark { background: var(--grad-blue); color: var(--navy-900); box-shadow: 0 6px 14px rgb(89 147 191 / .3); }
.vs-row[data-edge="even"] .vs-row__mark { background: var(--sky-50); color: var(--blue-600); }
.vs-row[data-edge="even"] .vs-row__cell { color: var(--navy-800); }
.vs-note { max-width: 66ch; margin: 28px auto 0; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; text-align: center; }

@media (max-width: 1099px) {
  .vs-side { --vs-media-h: 200px; }
  .vs-sides__vs { top: 100px; }
  .vs-side dl { gap: 10px; }
  .vs-side dt { font-size: 22px; }
}
@media (max-width: 767px) {
  .vs-sides { grid-template-columns: 1fr; gap: 10px; }
  .vs-side { --vs-media-h: 180px; }
  .vs-side__body { padding: 22px 22px 24px; }
  .vs-sides__vs { display: none; }
  .vs-group { padding: 4px 18px 8px; }
  .vs-group__head { grid-template-columns: 1fr; padding: 16px 0 10px; }
  .vs-group__head span { display: none; }
  .vs-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .vs-row__label { padding-bottom: 2px; }
  .vs-row__cell { align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: rgb(228 233 237 / .35); font-size: 14px; }
  .vs-row__cell { flex-wrap: wrap; }
  .vs-row__cell::before { content: "Metal"; flex-basis: calc(100% - 38px); order: 1; margin-left: 38px; margin-top: -2px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
  .vs-row__cell--asphalt::before { content: "Asphalt"; }
  .vs-row__cell .sr-only + *, .vs-row__mark { order: 0; }
  .vs-row__mark { width: 26px; height: 26px; margin-top: 1px; }
  .vs-row__mark svg { width: 16px; height: 16px; }
  .vs-row[data-edge="metal"] .vs-row__cell--metal, .vs-row[data-edge="asphalt"] .vs-row__cell--asphalt { background: var(--sky-50); }
}

/* ---------- vs. Asphalt: "where asphalt is the right call" (v2) ---------- */
.shingle { display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 760fr); grid-template-areas: "copy cases"; column-gap: 72px; align-items: center; }
.shingle__copy { grid-area: copy; display: grid; gap: 22px; }
.shingle__lead { max-width: 40ch; color: var(--slate-700); font-size: 17px; font-weight: 500; line-height: 1.55; }
.shingle__note { max-width: 40ch; padding-top: 18px; border-top: 1px solid var(--silver-200); color: var(--slate-600); font-size: 14px; font-weight: 500; line-height: 1.55; }
.shingle__cases { grid-area: cases; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.shingle__cases li { display: grid; gap: 10px; align-content: start; padding: 26px 26px 28px; border: 1px solid var(--silver-200); border-radius: var(--radius-xl); background: #fff; }
.shingle__cases span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.shingle__cases h3 { color: var(--navy-800); font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.shingle__cases p { color: var(--slate-600); font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.shingle__media { grid-area: media; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.shingle__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1099px) {
  .shingle { grid-template-columns: 1fr; grid-template-areas: "copy" "cases"; row-gap: 36px; }
  .shingle__media img { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .shingle__cases { grid-template-columns: 1fr; gap: 8px; }
  .shingle__cases li { padding: 20px 20px 22px; }
}

/* ---------- Accent: middle path (v2) ---------- */
.middle { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 560fr); align-items: center; gap: 80px; }
.middle__copy { display: grid; gap: 28px; }
.middle__lead { max-width: 52ch; color: var(--slate-700); font-size: 17px; font-weight: 500; line-height: 1.6; }
.middle__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0; padding: 0; list-style: none; }
.middle__facts li { display: grid; gap: 8px; padding: 18px 18px 20px; border: 1px solid var(--silver-200); border-radius: var(--radius-lg); background: #fff; }
.middle__facts strong { color: var(--navy-900); font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.middle__facts span { color: var(--slate-600); font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.middle__quote { max-width: 56ch; padding: 20px 0 0 22px; border-left: 3px solid var(--blue-400); color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.65; }
.middle__quote strong { color: var(--navy-900); }
.middle__media img { aspect-ratio: 4 / 5; }
@media (max-width: 1099px) {
  .middle { grid-template-columns: 1fr; gap: 44px; }
  .middle__media img { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .middle__media figcaption { gap: 14px; padding: 14px 18px; }
  .middle__media figcaption strong { font-size: 30px; }
  .middle__media figcaption span { max-width: none; font-size: 13px; }
  .middle__facts { grid-template-columns: 1fr; gap: 8px; }
  .middle__quote { padding-left: 18px; }
}

/* ---------- Financing: why-finance bento ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 280fr) minmax(0, 340fr) minmax(0, 280fr); grid-template-rows: auto auto; grid-template-areas: "photo stat1 navy navy" "photo wide wide stat2"; gap: 12px; margin-top: var(--head-gap); }
.bento__tile { position: relative; display: grid; align-content: start; gap: 10px; padding: 30px 30px 32px; border: 1px solid var(--silver-200); border-radius: var(--radius-xl); background: #fff; overflow: hidden; }
.bento__tile h3 { color: var(--navy-800); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; }
.bento__tile > p:not(.bento__num):not(.bento__label) { max-width: 40ch; color: var(--slate-600); font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.bento__num { color: var(--navy-800); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.bento__label { margin-top: -4px; color: var(--slate-600); font-size: 13px; font-weight: 600; }
.bento__tile--stat h3 { margin-top: 22px; }
.bento__tile--stat:nth-of-type(2) { grid-area: stat1; }
.bento__tile--stat:nth-of-type(5) { grid-area: stat2; align-content: space-between; }
.bento__tile--stat:nth-of-type(5) > p:last-child { margin-top: 28px; }
.bento__tile--photo { grid-area: photo; padding: 0; border: 0; min-height: 440px; color: #fff; background: var(--navy-900); }
.bento__tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.bento__tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 21 36 / .15) 0%, rgb(7 21 36 / .1) 45%, rgb(7 21 36 / .82) 100%); }
.bento__photo-body { position: relative; z-index: 1; display: grid; gap: 18px; align-self: end; padding: 30px; }
.bento__photo-body h3 { max-width: 14ch; color: #fff; font-size: 26px; }
.bento__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bento__chips li { padding: 7px 12px; border: 1px solid rgb(255 255 255 / .28); border-radius: var(--pill); background: rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; font-weight: 700; }
.bento__tile--navy { grid-area: navy; justify-items: start; align-content: center; min-height: 220px; border: 0; background: var(--grad-dark); color: #fff; }
.bento__tile--navy h3 { color: #fff; font-size: 28px; }
.bento__tile--navy > p { color: rgb(255 255 255 / .8) !important; }
.bento__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 14px; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); }
.bento__icon svg { width: 24px; height: 24px; }
.bento__tile--wide { grid-area: wide; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.bento__tile--wide > div { display: grid; gap: 10px; }
.bento__tile--wide > div p { max-width: 36ch; color: var(--slate-600); font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.bento__num--big { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: 2px; font-size: 84px; letter-spacing: -.08em; text-align: right; }
.bento__num--big small { font-size: 40px; letter-spacing: -.04em; }
.bento__num--big span { grid-column: 1 / -1; max-width: 18ch; margin-top: 8px; color: var(--slate-600); font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
@media (max-width: 1099px) {
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "photo navy" "stat1 stat2" "wide wide"; }
  .bento__tile--photo { min-height: 320px; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "photo" "stat1" "navy" "wide" "stat2"; gap: 8px; }
  .bento__tile { padding: 22px 22px 24px; }
  .bento__tile--photo { min-height: 300px; }
  .bento__photo-body { padding: 22px; }
  .bento__tile--wide { grid-template-columns: 1fr; }
  .bento__num--big { justify-content: start; text-align: left; font-size: 64px; }
}

/* ---------- Process slider (Financing, About): section pins, cards slide sideways ---------- */
.hsteps { --pt: 72px; --card-w: clamp(300px, 29vw, 380px); --num: 44px; margin-block: calc(-1 * var(--section-y)); }
.hsteps__stage { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 5vh, 56px); height: 100vh; padding: 104px 0 40px; box-sizing: border-box; }
.hsteps__head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.hsteps__head .section-head { align-items: center; }
.hsteps__head > p { max-width: 56ch; }
.hsteps__head .h2 { font-size: clamp(30px, 3vw, 40px); }
.hsteps__head > p { padding-bottom: 6px; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }
.hsteps__track { position: relative; width: max-content; padding-top: var(--pt); will-change: transform; }
.hsteps__rail { position: absolute; top: calc(var(--num) / 2 - 1px); left: calc(var(--num) / 2); right: calc(var(--card-w) - var(--num) / 2); height: 2px; border-radius: 2px; background: var(--silver-200); }
.page-section--sky .hsteps__rail { background: var(--silver-300); }
.hsteps__rail i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--navy-900); }
.hsteps__list { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.hsteps__item { position: relative; flex: none; display: flex; width: var(--card-w); }
.hsteps__num { position: absolute; top: calc(-1 * var(--pt)); left: 0; display: grid; place-items: center; width: var(--num); height: var(--num); border: 2px solid var(--silver-300); border-radius: 50%; box-sizing: border-box; background: #fff; color: var(--slate-600); font-size: 13px; font-weight: 700; letter-spacing: .02em; transition: background .4s, border-color .4s, color .4s; }
.hsteps__item.is-active .hsteps__num, .hsteps__item.is-done .hsteps__num { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.hsteps__card { flex: 1; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 28px 28px 32px; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); opacity: .5; transition: opacity .5s var(--ease-out); }
.hsteps__item.is-active .hsteps__card, .hsteps__item.is-done .hsteps__card { opacity: 1; }
.hsteps__card h3 { margin-top: 14px; color: var(--navy-900); font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.hsteps__card p { color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.6; }
.hsteps__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--silver-200); color: var(--slate-600); transition: background .4s, color .4s; }
.hsteps__icon svg { width: 26px; height: 26px; }
.hsteps__item.is-active .hsteps__icon { background: var(--grad-blue); color: var(--navy-900); }
@media (max-height: 760px) and (min-width: 901px) {
  .hsteps { --pt: 60px; }
  .hsteps__stage { padding-top: 92px; }
  .hsteps__head > p { display: none; }
}
/* Phones, tablets and reduced motion: no pinning, a native swipe row instead */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hsteps { height: auto !important; margin-block: 0; }
  .hsteps__stage { position: static; height: auto; padding: 0; }
  .hsteps__viewport { margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .hsteps__viewport::-webkit-scrollbar { display: none; }
  .hsteps__track { transform: none !important; }
  .hsteps__item { scroll-snap-align: start; }
  .hsteps__card { opacity: 1; }
}
@media (max-width: 900px) {
  .hsteps { --card-w: min(80vw, 340px); --pt: 64px; }
  .hsteps__head { gap: 14px; }
}

/* ---------- Financing: why it is worth it (editorial split) ---------- */
.worth2 { display: grid; grid-template-columns: minmax(0, 460fr) minmax(0, 700fr); gap: 80px; align-items: start; }
.worth2__aside { position: sticky; top: 110px; display: grid; gap: 24px; justify-items: start; }
.worth2__lead { max-width: 36ch; color: var(--slate-700); font-size: 16px; font-weight: 500; line-height: 1.6; }
.worth2__aside .btn { margin-top: 4px; }
.worth2__list { display: grid; margin: 0; padding: 0; list-style: none; }
.worth2__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 30px 0 32px; border-top: 1px solid var(--silver-200); }
.worth2__list li:last-child { border-bottom: 1px solid var(--silver-200); }
.worth2__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); }
.worth2__icon svg { width: 22px; height: 22px; }
.worth2__list h3 { color: var(--navy-800); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.045em; }
.worth2__list p { max-width: 54ch; margin-top: 10px; color: var(--slate-700); font-size: 15.5px; font-weight: 500; line-height: 1.6; }
.worth2 + .disclaimer { margin-top: 56px; }
@media (max-width: 1099px) {
  .worth2 { grid-template-columns: 1fr; gap: 36px; }
  .worth2__aside { position: static; }
}
@media (max-width: 767px) {
  .worth2__list li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 22px 0 24px; }
  .worth2__icon { width: 40px; height: 40px; }
  .worth2__list h3 { font-size: 20px; }
}

/* ---------- About v2 (2026-09-26) ---------- */
/* How we work: five steps in two columns, icon tile + numbered title. */
.steps-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin: var(--head-gap) 0 0; padding: 0; list-style: none; }
.steps-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 26px 0 28px; border-top: 1px solid var(--silver-300); }
.steps-list__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-card); color: var(--navy-900); }
.steps-list__icon svg { width: 22px; height: 22px; }
.steps-list h3 { display: flex; align-items: baseline; gap: 10px; color: var(--navy-800); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.steps-list h3 b { color: var(--blue-600); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.steps-list p { max-width: 44ch; margin-top: 8px; color: var(--slate-700); font-size: 15px; font-weight: 500; line-height: 1.55; }
/* Why us: seven reasons, two columns, hairlines instead of cards. */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin: var(--head-gap) 0 0; padding: 0; list-style: none; }
.reasons li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 24px 0 26px; border-top: 1px solid var(--silver-200); }
.reasons__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--grad-ice); box-shadow: var(--inset-sheen); color: var(--navy-900); }
.reasons__icon svg { width: 22px; height: 22px; background: none; box-shadow: none; }
.reasons h3 { color: var(--navy-800); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.reasons p { max-width: 46ch; margin-top: 8px; color: var(--slate-700); font-size: 14.5px; font-weight: 500; line-height: 1.55; }
/* Believe: two figures under the quote. */
.believe__stats { display: flex; gap: 40px; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid rgb(255 255 255 / .15); list-style: none; }
.believe__stats strong { display: block; color: #fff; font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.believe__stats span { display: block; margin-top: 8px; color: rgb(255 255 255 / .7); font-size: 13px; }
@media (max-width: 1099px) {
  .owner, .owner:nth-child(even) { grid-template-columns: minmax(0, 320fr) minmax(0, 560fr); gap: 36px; }
  .steps-list, .reasons { gap: 0 40px; }
  .numbers li, .numbers li:nth-child(n+5) { grid-column: span 4; }
}
@media (max-width: 767px) {
  .owner, .owner:nth-child(even) { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .owner:nth-child(even) .owner__photo { order: 0; }
  .owner__photo img { aspect-ratio: 4 / 3; }
  .steps-list, .reasons { grid-template-columns: 1fr; }
  .steps-list li { padding: 20px 0 22px; }
  .reasons li { padding: 18px 0 20px; }
  .numbers li, .numbers li:nth-child(n+5) { grid-column: span 6; }
  .believe__stats { gap: 28px; }
}

/* ---------- About: who we work with (photo trio + number band) ---------- */
.clients { display: grid; grid-template-columns: minmax(0, 320fr) minmax(0, 620fr) minmax(0, 320fr); gap: 14px; margin-top: var(--head-gap); }
.clients__card { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--radius-xl); background: var(--navy-900); color: #fff; }
.clients__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.clients__card:hover img { transform: scale(1.04); }
.clients__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 21 36 / 0) 25%, rgb(7 21 36 / .55) 55%, rgb(7 21 36 / .92) 100%); }
.clients__body { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 8px; padding: 26px 26px 28px; }
.clients__body h3 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.04em; }
.clients__body p { max-width: 46ch; color: rgb(255 255 255 / .8); font-size: 14px; font-weight: 500; line-height: 1.5; }
.numbers--band { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; padding: 0; border-top: 0; }
.numbers--band li { grid-column: auto; padding: 32px 28px 28px 0; border-top: 1px solid var(--silver-200); }
.numbers--band li + li { padding-left: 28px; border-left: 1px solid var(--silver-200); }
.numbers--band strong { font-size: 48px; }
@media (max-width: 1099px) {
  .clients { grid-template-columns: 1fr 1fr; }
  .clients__card:nth-child(2) { grid-column: 1 / -1; min-height: 360px; }
  .clients__card { min-height: 340px; }
  .numbers--band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers--band li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .clients { grid-template-columns: 1fr; gap: 10px; }
  .clients__card, .clients__card:nth-child(2) { min-height: 320px; }
  .clients__body h3 { font-size: 20px; }
  .clients__body { padding: 20px; }
  .numbers--band strong { font-size: 40px; }
  .numbers--band li { padding: 22px 16px 20px 0; }
  .numbers--band li + li { padding-left: 16px; }
}

/* ---------- About: community (mockup left, copy right) ---------- */
.community { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 640fr); overflow: hidden; border-radius: var(--radius-xl); background: var(--grad-dark); color: #fff; box-shadow: 0 30px 60px -24px rgb(7 21 36 / .45); }
.community__media { position: relative; min-height: 460px; background: rgb(255 255 255 / .04); border-right: 1px solid rgb(255 255 255 / .08); }
.community__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community__media.is-empty img { display: none; }
.community__placeholder { position: absolute; inset: 0; display: none; place-items: center; color: rgb(255 255 255 / .55); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; text-align: center; text-transform: uppercase; background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(196 225 246 / .06) 14px 15px); }
.community__media.is-empty .community__placeholder { display: grid; }
.community__body { display: grid; gap: 18px; align-content: center; justify-items: start; padding: 64px 72px; }
.community__body > p:not(.kicker) { max-width: 46ch; color: rgb(255 255 255 / .8); font-size: 16px; font-weight: 500; line-height: 1.6; }
.community__body strong { color: #fff; }
.community .kicker { color: var(--ice-300); }
.community .h2 { color: #fff; }
.community .text-sky { color: var(--ice-300); }
.community__social { margin-top: 10px; gap: 10px; }
.community__social a { width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / .28); background: rgb(255 255 255 / .08); color: #fff; }
.community__social a:hover { background: #fff; border-color: #fff; color: var(--navy-900); }
@media (max-width: 1099px) {
  .community { grid-template-columns: 1fr; }
  .community__media { min-height: 0; aspect-ratio: 16 / 10; }
  .community__body { padding: 40px; }
}
@media (max-width: 767px) {
  .community__body { padding: 28px 22px 32px; }
  .community__media { aspect-ratio: 4 / 3; }
}

/* Believe v2: title + quote + figures on the left, the long copy on the right. */
.believe--v2 { grid-template-columns: minmax(0, 560fr) minmax(0, 600fr); gap: 80px; align-items: start; }
.believe__lead { display: grid; gap: 32px; }
.believe--v2 .believe__quote { margin: 0; padding-left: 24px; border-left: 2px solid var(--blue-400); }
.believe--v2 .believe__quote p { font-size: clamp(22px, 2vw, 27px); }
.believe--v2 .believe__stats { margin-top: 0; }
.believe--v2 .believe__copy { padding-top: 6px; }
@media (max-width: 1099px) { .believe--v2 { grid-template-columns: 1fr; gap: 40px; } }

/* Centered section intro (title + lead stacked, centered). */
.section-intro--center { flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.section-intro--center .section-head { align-items: center; }
.section-intro--center .h2 { max-width: 24ch; margin-inline: auto; }
.section-intro--center > p { max-width: 56ch; margin-inline: auto; }

/* ---------- About: owners as sticky stacked cards ---------- */
/* Equal rows: both owner cards take the height of the taller one. */
.owners--stack { gap: 24px; grid-auto-rows: 1fr; }
.owner--stack { position: sticky; top: calc(96px + var(--i) * 16px); display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 440fr); gap: 0; align-items: stretch; margin-bottom: 0; padding: 12px; border: 1px solid var(--silver-300); border-radius: var(--radius-xl); background: #fff; box-shadow: 0 -6px 24px rgb(22 50 74 / .06); }
.owner--stack:last-child { margin-bottom: 0; }
.owner--stack .owner__photo { order: 2; border-radius: calc(var(--radius-xl) - 8px); }
/* Side by side the photo fills the card height, so the 12px frame is even on every side. */
.owner--stack .owner__photo { position: relative; min-height: 420px; }
.owner--stack .owner__photo img { position: absolute; inset: 0; }
.owner--stack .owner__photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--focus, 50% 25%); transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 25%); }
/* Entrance: each portrait settles from 108% as it scrolls into view (app.js adds .is-in). */
.js .owner--stack .owner__photo img { transform: scale(calc(var(--zoom, 1) * 1.08)); transition: transform 2600ms var(--ease-soft); }
.js .owner--stack .owner__photo.is-in img { transform: scale(var(--zoom, 1)); }
@media (prefers-reduced-motion: reduce) { .js .owner--stack .owner__photo img { transform: scale(var(--zoom, 1)); transition: none; } }
.owner--stack .owner__body { display: grid; align-content: center; gap: 18px; padding: 44px 52px; }
.owner__meta { color: var(--blue-600); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.owner--stack .owner__body h2 { font-size: clamp(30px, 2.8vw, 40px); }
.owner--stack .owner__body .prose { margin-top: 4px; }
.owner--stack .prose p { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 1099px) {
  .owner--stack { grid-template-columns: minmax(0, 560fr) minmax(0, 360fr); }
  .owner--stack .owner__body { padding: 32px; }
}
@media (max-width: 767px) {
  .owner--stack { position: static; grid-template-columns: 1fr; padding: 10px; }
  .owners--stack { gap: 12px; grid-auto-rows: auto; }
  .owner--stack .owner__photo { order: 0; min-height: 0; }
  .owner--stack .owner__photo img { position: static; min-height: 0; aspect-ratio: 4 / 3; }
  .owner--stack .owner__body { padding: 22px 16px 24px; }
}

/* ---------- Projects: photo lightbox ----------
   The project cards open the photo in high resolution over a dark glass backdrop.
   The card thumbnail shows at once and the sharp file swaps in when it has loaded. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  grid-template-rows: 76px minmax(0, 1fr) auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility 0s .3s;
}
.lightbox.is-open { visibility: visible; opacity: 1; transition: opacity .3s; }
body.lightbox-open { overflow: hidden; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(8 19 30 / .92);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.lightbox__stage {
  position: relative;
  grid-column: 2;
  grid-row: 2 / 4;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 18px;
  min-height: 0;
  margin: 0;
  padding-bottom: 28px;
  pointer-events: none;
}
.lightbox__img {
  align-self: center;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .45);
  pointer-events: auto;
  transform: scale(.97);
  transition: transform .5s var(--ease-out), opacity .25s;
  touch-action: pan-y pinch-zoom;
}
.lightbox.is-open .lightbox__img { transform: none; }
.lightbox__img.is-swapping { opacity: 0; }
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  max-width: 720px;
  color: #fff;
  text-align: center;
}
.lightbox__caption b { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.lightbox__tag {
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--pill);
  background: rgb(255 255 255 / .08);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}
.lightbox__count {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
  color: rgb(255 255 255 / .7);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.lightbox__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  color: #fff;
  cursor: pointer;
  transition: background .25s, color .25s, transform .4s var(--ease-out);
}
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn:hover { background: #fff; color: var(--navy-900); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox__close { grid-column: 3; grid-row: 1; align-self: center; justify-self: center; }
.lightbox__nav { grid-row: 2; align-self: center; justify-self: center; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--prev svg { transform: scaleX(-1); }
.lightbox__nav--next { grid-column: 3; }
.lightbox__nav--prev:hover { transform: translateX(-3px); }
.lightbox__nav--next:hover { transform: translateX(3px); }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 767px) {
  .lightbox { grid-template-columns: 16px minmax(0, 1fr) 16px; grid-template-rows: 64px minmax(0, 1fr) auto 84px; }
  .lightbox__stage { grid-row: 2 / 4; padding-bottom: 12px; }
  .lightbox__img { border-radius: 8px; }
  .lightbox__caption b { font-size: 14px; }
  .lightbox__count { grid-column: 2; justify-self: start; padding-left: 4px; }
  .lightbox__close { grid-column: 2; justify-self: end; }
  .lightbox__nav { grid-row: 4; align-self: start; }
  .lightbox__nav--prev { grid-column: 2; justify-self: start; margin-left: calc(50% - 60px); }
  .lightbox__nav--next { grid-column: 2; justify-self: end; margin-right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img, .lightbox__btn { transition: none; }
}

/* Closing CTA on phones, inner pages (Gabriel, 2026-09-29): the home's plate is
   drawn at 1576px wide, so on a phone the text sat on a zoomed slice of roof.
   Here the copy gets clean navy on top and the photo sits whole underneath it:
   160vw wide (house gable + installer in frame), its sky fading into the navy,
   its foot running on under the glass footer. The section's bottom padding
   reserves the photo's visible height so no page title can reach it. */
@media (max-width: 767px) {
  .inner-page .closing-wrap { --plate-w: 160vw; --plate-h: calc(var(--plate-w) * 1431 / 1672); --plate-under: 150px; }
  .inner-page .closing { min-height: 0; padding-top: 96px; padding-bottom: calc(var(--plate-h) - var(--plate-under)); }
  .inner-page .closing-wrap__media img {
    top: auto;
    bottom: calc(var(--plate-under) * -1);
    left: -52vw;
    width: var(--plate-w);
    height: var(--plate-h);
    object-fit: cover;
    -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 78%, transparent);
    mask-image: linear-gradient(transparent, #000 24%, #000 78%, transparent);
  }
  .inner-page .closing-wrap__shade { display: none; }
}

/* One top gap for every inner-page hero (2026-09-29): nav bar to breadcrumb
   is the Services measure on all pages (About and Thank You used to sit lower). */
.page-hero .page-hero__inner { padding-top: 168px; }
@media (max-width: 767px) {
  .page-hero .page-hero__inner { padding-top: 128px; }
}

/* vs Asphalt, phones: the long "See Accent & Partial Metal Roofs" button was
   3px wider than the column; let it wrap inside the pill instead (2026-09-29). */
@media (max-width: 767px) {
  .hybrid__body .btn { max-width: 100%; height: auto; min-height: 50px; padding-block: 11px; white-space: normal; line-height: 1.3; }
}


/* Hybrid card on phones (2026-10-21): centred; the four spots sit two by two
   with icon above label. */
@media (max-width: 599px) {
  .hybrid__body { justify-items: center; text-align: center; }
  .hybrid__body .kicker { justify-self: center; }
  .hybrid__spots { grid-template-columns: 1fr 1fr; width: 100%; }
  .hybrid__spots li { flex-direction: column; justify-content: center; gap: 8px; padding-block: 14px; text-align: center; }
  .hybrid__body .cta-row { justify-content: center; }
}