/* Exterior Coatings, art direction pass (owner 2026-11-04): the frame language of the home reviews carousel.
   One ink field, one smoked-glass panel carrying the customer's words in Playfair, orange only as small accents
   (stars, a thin rule, the quote mark). The flake and gallery links are full-bleed photo tiles with the name top-left.
   No photo of the pool deck exists yet, so the review frame stands on ink and never borrows a stand-in picture.
   Scoped under #main so it outranks the shared section/heading rules without !important. */

#main .ex-frame, #main .ex-tiles, #main .ex-close {
  --ex-ink: #141414;
  --ex-serif: var(--font-body);
  --ex-hair: rgba(255, 255, 255, .13);
  background: var(--ex-ink);
  color: #fff;
  position: relative;
}

/* ---------- frame: system heading and lead centred, the glass panel below (as in the home reviews) ---------- */
#main .ex-frame {
  padding: clamp(64px, 8vw, 112px) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 62%),
    var(--ex-ink);
}
#main .ex-frame__in { display: block; }
#main .ex-eyebrow {
  display: block;
  margin: 0 0 18px;
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
#main :is(.ex-frame, .ex-tiles, .ex-close) .sec__head { max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 44px); }
#main :is(.ex-frame, .ex-tiles, .ex-close) .sec__head h2 { color: #fff; }
#main :is(.ex-frame, .ex-close) .sec__head > p {
  max-width: 34em;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
  text-align: center;
}

#main .ex-glass {
  width: min(100%, 880px);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(28px, 4.2vw, 56px) clamp(22px, 4.6vw, 64px);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--ex-hair);
  border-radius: var(--r-s);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .85), 0 16px 32px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
}
#main .ex-glass__label {
  margin: 0 0 18px;
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}
#main .ex-glass__stars { display: flex; justify-content: center; gap: 6px; margin: 0 0 6px; }
#main .ex-glass__stars svg { width: 22px; height: 22px; fill: var(--orange); }
#main .ex-glass .exterior-quote {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  quotes: "\201C" "\201D";
}
#main .ex-glass .exterior-quote::before {
  content: open-quote;
  display: block;
  height: 34px;
  margin: 0 0 10px;
  font: 700 72px/1 var(--ex-serif);
  color: var(--orange);
  text-align: center;
}
#main .ex-glass .exterior-quote > p {
  margin: 0;
  max-width: none;
  font-family: var(--ex-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.75vw, 23px);
  line-height: 1.5;
  letter-spacing: -.003em;
  color: #fff;
  text-align: center;
  text-wrap: pretty;
}
#main .ex-glass .exterior-quote > footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  font: 700 12px/1.5 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  border-top: 1px solid var(--ex-hair);
}
#main .ex-glass .exterior-quote > footer::before {
  content: "";
  flex: none;
  width: 36px;
  height: 2px;
  background: var(--orange);
}
#main .ex-glass__note {
  margin: 20px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}

/* ---------- photo tiles ---------- */
#main .ex-tiles { padding: clamp(24px, 3vw, 40px) 0 clamp(64px, 8vw, 112px); }
#main .ex-tiles .sec__head { margin-bottom: clamp(20px, 2.6vw, 32px); }
#main .ex-tiles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, .94vw, 12px);
}
#main .ex-tile {
  position: relative;
  display: block;
  min-height: clamp(280px, 30vw, 440px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-s);
  background: #1b1b1a;
  color: #fff;
  text-decoration: none;
}
#main .ex-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}
/* The flake source frames its swatch with a printed border; 1.14 from the top centre crops it out. */
#main .ex-tile--flake img { object-position: 50% 0; transform: scale(1.14); transform-origin: 50% 0; }
#main .ex-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .08) 46%, rgba(10, 10, 10, .22) 100%);
}
#main .ex-tile--flake::before { background: linear-gradient(0deg, rgba(10, 10, 10, .84) 0%, rgba(10, 10, 10, .3) 42%, rgba(10, 10, 10, .12) 100%); }
#main .ex-tile__name {
  position: absolute;
  top: clamp(12px, 1.8vw, 22px);
  left: clamp(12px, 1.8vw, 22px);
  max-width: calc(100% - 24px);
  padding: .22em .55em .3em;
  border-radius: 6px;
  background: rgba(14, 14, 14, .7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font: 600 clamp(22px, 2.6vw, 34px)/1.1 var(--ex-serif);
  letter-spacing: -.005em;
}
#main .ex-tile__meta {
  position: absolute;
  left: clamp(14px, 1.8vw, 22px);
  right: clamp(14px, 1.8vw, 22px);
  bottom: clamp(14px, 1.8vw, 22px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
}
#main .ex-tile__note { flex: 1 1 14em; max-width: 24em; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
#main .ex-tile__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}
#main .ex-tile__go::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--orange);
  box-shadow: 0 0 0 0 transparent;
  transition: width var(--dur-2, .2s) var(--ease-standard, ease);
}
#main .ex-tile:hover .ex-tile__go::after, #main .ex-tile:focus-visible .ex-tile__go::after { width: 38px; }
#main .ex-tile:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- closing frame: one centred idea, the service links in a hairline row ---------- */
#main .ex-close { padding: clamp(64px, 8vw, 104px) 0; border-top: 1px solid var(--ex-hair); }
#main .ex-close__acts { display: flex; justify-content: center; margin: 0 0 clamp(36px, 4.5vw, 56px); }
#main .ex-close__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 clamp(20px, 3vw, 44px);
  padding-top: 24px;
  border-top: 1px solid var(--ex-hair);
}
#main .ex-close__more .ex-eyebrow { flex: 1 0 100%; margin: 0 0 6px; text-align: center; }
#main .ex-close__more a { display: inline-flex; align-items: center; min-height: 48px; color: #fff; font-size: 16px; }

/* ---------- tablet and phone ---------- */
@media (max-width: 639.98px) {
  #main .ex-tiles__grid { grid-template-columns: minmax(0, 1fr); }
  #main .ex-tile { min-height: 300px; }
  #main .ex-glass .exterior-quote::before { height: 28px; font-size: 60px; }
  #main .ex-glass .exterior-quote > footer { flex-wrap: wrap; gap: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #main .ex-tile__go::after { transition: none; }
}