/* ==========================================================================
   Page-level compositions. Reuses tokens and components: these rules only
   handle placement and grid shape.
   ========================================================================== */

/* ============================================================ section head */

.sechead { margin-bottom: clamp(28px, 4vw, 56px); }
.sechead h2 { max-width: 28ch; }
.sechead .lead { margin-top: var(--s-4); }

/* centerd variant for full-width sections */
.sechead--center {
  text-align: center;
}
.sechead--center h2 { margin-inline: auto; }
.sechead--center .lead { margin-inline: auto; }

/* split variant: title left, supporting copy right */
.sechead--split { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 900px) {
  .sechead--split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); }
  .sechead--split .lead { margin-top: 0; }
}

/* ================================================================== split */

.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5.5vw, 88px); }
  .split--wide-media { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__copy { order: 1; }
}

/* Offset slate block behind the photograph, from the live site, with a red
   keyline down its right edge. Drawn with shadows so it follows the radius and
   never adds to the page width. */
.split__media > .media {
  aspect-ratio: 4 / 3;
  --off: clamp(12px, 1.8vw, 24px);
  box-shadow: var(--off) var(--off) 0 0 var(--slate-3), calc(var(--off) + 4px) var(--off) 0 0 var(--red), var(--sh);
  margin-right: var(--off);
  margin-bottom: var(--off);
}
.on-grey .split__media > .media { box-shadow: var(--off) var(--off) 0 0 var(--slate-2), calc(var(--off) + 4px) var(--off) 0 0 var(--red), var(--sh); }
.on-dark .split__media > .media { box-shadow: var(--off) var(--off) 0 0 var(--charcoal-2), calc(var(--off) + 4px) var(--off) 0 0 var(--red), var(--sh); }
.split__caption {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin: var(--s-3) 0 0;
}
.on-dark .split__caption { color: #A8AEB5; }

/* stacked pair of images, offset so the composition is not a flat rectangle */
.mediastack { position: relative; }
.mediastack__main .media { aspect-ratio: 4 / 3; box-shadow: var(--sh-lg); }
.mediastack__main { padding: 0 clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vw, 24px) 0; }
.mediastack__inset {
  display: none;
  position: absolute;
  right: calc(var(--s-7) * -1);
  bottom: calc(var(--s-7) * -1);
  width: 46%;
  border: 6px solid var(--white);
  border-radius: var(--radius);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.mediastack__inset .media { aspect-ratio: 1; border-radius: 0; box-shadow: none; }
@media (min-width: 940px) { .mediastack__inset { display: block; } }
.on-dark .mediastack__inset { border-color: var(--charcoal); }

/* ======================================================== problem grid */

.probgrid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
@media (min-width: 600px) { .probgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .probgrid { grid-template-columns: repeat(4, 1fr); } }

/* ========================================================= product grid */

/* Uneven by design: a lead tile spanning two columns and two rows so the grid
   reads composed rather than as four identical boxes. */
.prodgrid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.prodgrid .tile { min-height: 280px; }
.prodgrid .tile__body { min-height: 280px; }

@media (min-width: 600px) { .prodgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .prodgrid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); }
  /* Lead tile holds two columns and two rows; the four standard tiles fill the
     remainder of those rows exactly, and the wide tile closes the grid as a
     full-width banner so no dead cells are left over. */
  .prodgrid__lead { grid-column: span 2; grid-row: span 2; }
  .prodgrid__lead .tile__body { min-height: 520px; }
  .prodgrid__lead .tile__title { font-size: var(--fs-h2); }
  .prodgrid__wide { grid-column: 1 / -1; }
  .prodgrid__wide, .prodgrid__wide .tile__body { min-height: 300px; }
  .prodgrid__wide .tile__title { font-size: var(--fs-h2); }
  .prodgrid__wide .tile__body { max-width: 46rem; }
}

/* ========================================================== area list */

.arealist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}
.areacard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.areacard:hover { border-color: var(--red); box-shadow: var(--sh-sm); }
.areacard__city {
  font-family: var(--ff-head);
  font-size: var(--fs-h4);
  font-weight: var(--wt-semi);
  letter-spacing: var(--ls-h3);
  color: var(--ink);
}
.areacard__note { font-size: var(--fs-xs); color: var(--ink-3); }
.areacard--all { background: var(--grey-50); border-style: dashed; }
.areacard--all .areacard__note { color: var(--red-text); font-weight: var(--wt-semi); }

/* ================================================== service area, homepage */

/* Ten identical boxes gave Ocoee the same weight as everywhere else, which
   buries the fact that carries the section: there is a real building here, and
   it is the reason the drive times work. Home base gets a photograph and its
   own card; everything else becomes a scannable link list.
   The plain .arealist above still runs /locations, where equal weight is right. */

.areamap { display: grid; gap: var(--grid-gap); }
@media (min-width: 900px) { .areamap { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }

.areahome {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--charcoal);
  color: #fff;
  padding: var(--s-7) var(--s-6) var(--s-6);
  box-shadow: var(--sh);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.areahome:hover { box-shadow: var(--sh-lg, var(--sh)); }


.areahome__flag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: #FF8A8E;
  font-size: var(--fs-sm); font-weight: var(--wt-black);
  margin-bottom: var(--s-3);
}
.areahome__flag svg { width: 13px; height: 13px; fill: currentColor; }

.areahome__city {
  display: block;
  font-family: var(--ff-head);
  font-size: var(--fs-h1);
  font-weight: var(--wt-bold);
  letter-spacing: var(--ls-head);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.areahome__addr { font-size: var(--fs-sm); color: #C2C7CD; line-height: 1.6; }

/* Facts a visitor can check, which is the whole point of the card. */
.areahome__facts {
  display: grid; gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--charcoal-line);
}
.areahome__fact { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: #E4E7EA; }
.areahome__fact svg { width: 15px; height: 15px; fill: var(--gold); flex-shrink: 0; }

.areahome__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-6);
  color: #fff; font-weight: var(--wt-bold); font-size: var(--fs-sm);
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
}

.areahome__link svg { width: 13px; height: 13px; fill: currentColor; }

/* The whole card is the target; the visible link is decorative. */
.areahome__hit { position: absolute; inset: 0; z-index: 2; }

.arealinks { display: grid; grid-template-columns: 1fr; border-top: var(--hair) solid var(--line); }
@media (min-width: 560px) { .arealinks { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }

.arealink {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: var(--hair) solid var(--line);
  transition: padding-left var(--t) var(--ease);
}
.arealink:hover { padding-left: var(--s-2); }
.arealink__city {
  font-family: var(--ff-head);
  font-size: var(--fs-h4);
  font-weight: var(--wt-semi);
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  transition: color var(--t) var(--ease);
}
.arealink:hover .arealink__city { color: var(--red-text); }
.arealink__note {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Reads as the catch-all rather than one more city. */
@media (min-width: 560px) { .arealink--all { grid-column: 1 / -1; } }
.arealink--all .arealink__city { color: var(--red-text); }
.arealink--all .arealink__note { color: var(--red-text); font-weight: var(--wt-semi); }
.arealink--all svg {
  /* base.css blocks every svg, which pushed this arrow onto its own line */
  display: inline-block;
  width: 11px; height: 11px;
  fill: currentColor;
  vertical-align: -1px;
  margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .arealink, .areahome, .areahome__link { transition: none; }
  .areahome:hover { box-shadow: var(--sh-lg, var(--sh)); }
  .arealink:hover { padding-left: 0; }
}

/* ============================================================ faq layout */

.faqlayout { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 940px) {
  .faqlayout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); }
  .faqlayout > :first-child { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ========================================================= article page */

.article { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1000px) {
  .article { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(44px, 5vw, 88px); }
  .article__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

.aside-cta {
  background: var(--grey-50);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.aside-cta h3 { margin-bottom: var(--s-3); }
.aside-cta p { font-size: var(--fs-sm); color: var(--ink-3); }

.toc { border: var(--hair) solid var(--line); border-radius: var(--radius); padding: var(--s-5); }
.toc__heading {
  font-size: var(--fs-sm);
  font-weight: var(--wt-bold);
  color: var(--ink-label);
  margin-bottom: var(--s-3);
}
.toc a { display: block; padding: var(--s-2) 0; font-size: var(--fs-sm); color: var(--ink-2); }
.toc a:hover { color: var(--red-text); }

/* ============================================================= gallery */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--grid-gap); }
.gallery__item { display: block; }
.gallery__item .media { aspect-ratio: 4 / 3; }
.gallery__cap { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-3); }
/* All gallery photography is cropped to 4:3 by the image pipeline, so the grid
   stays uniform. Mixing portrait tiles in a CSS grid leaves ragged gaps, since
   this is a grid rather than a masonry layout. */
.gallery__item .media { aspect-ratio: 4 / 3; }

/* ======================================================== compare table */

.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.compare th, .compare td {
  text-align: left;
  padding: var(--s-4);
  border-bottom: var(--hair) solid var(--line);
  vertical-align: top;
}
.compare thead th {
  font-size: var(--fs-sm);
  font-weight: var(--wt-bold);
  color: var(--ink-3);
  background: var(--grey-50);
  border-bottom: 2px solid var(--line-strong);
}
.compare tbody th { font-weight: var(--wt-semi); color: var(--ink); width: 28%; }
.compare tbody tr:hover { background: var(--grey-50); }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: var(--hair) solid var(--line); }

/* ============================================================ n-column */

.cols2 { display: grid; gap: var(--grid-gap); }
@media (min-width: 760px) { .cols2 { grid-template-columns: 1fr 1fr; } }

.cols3 { display: grid; gap: var(--grid-gap); }
@media (min-width: 600px) { .cols3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cols3 { grid-template-columns: repeat(3, 1fr); } }

.cols4 { display: grid; gap: var(--grid-gap); }
@media (min-width: 600px) { .cols4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cols4 { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================ brand strip */

/* Was eight empty bordered boxes with the brand name set as plain text, which
   told a visitor nothing and read as a placeholder waiting for logos. These are
   the real vendor marks, trimmed to their ink so they optically align on a
   shared baseline despite very different proportions. Muted at rest so the
   strip supports the page instead of competing with it. */

.logostrip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-4);
  align-items: center;
  padding: var(--s-6) 0;
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
}
@media (min-width: 560px) { .logostrip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .logostrip { grid-template-columns: repeat(4, 1fr); gap: var(--s-6) var(--s-7); } }

.logostrip__item { display: grid; height: 62px; padding: 0 var(--s-3); }

/* <picture> is inline and has no intrinsic height, so height:100% on the img
   inside it never resolves and the marks overflowed the row. */
.logostrip__item picture {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;      /* grid items default to min-height:auto, which blocks the shrink */
  min-width: 0;
}

/* A fixed-height box plus object-fit: contain gives every mark the same vertical
   budget, so a square logo and a long wordmark read as the same size. */
.logostrip__item img {
  /* width/height 100% plus contain does the letterboxing. A percentage
     max-height does not resolve against a centerd grid area, so the marks
     overflowed and collided with the row below. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: .78;
  transition: filter var(--t) var(--ease), opacity var(--t) var(--ease);
}
.logostrip__item:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .logostrip__item img { transition: none; } }

/* ============================================================ contact rows */

.contactlist { display: grid; gap: var(--s-3); margin-top: var(--s-5); }

.contactrow {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
a.contactrow:hover { border-color: var(--red); box-shadow: var(--sh-sm); }

.contactrow__icon {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--red-tint);
  color: var(--red);
  border-radius: var(--radius-sm);
}
.contactrow__icon svg { width: 18px; height: 18px; }

.contactrow__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--wt-bold);
  color: var(--ink-label);
  margin-bottom: 2px;
}
.contactrow__value {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--wt-semi);
  color: var(--ink);
  line-height: 1.45;
}
a.contactrow:hover .contactrow__value { color: var(--red-text); }
.contactrow--static { background: var(--grey-50); }
.contactrow--static .contactrow__value { font-weight: var(--wt-med); }

/* ================================================================== map */

.mapframe {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  background: var(--grey-100);
}
.mapframe iframe { display: block; }

/* ============================================================ booking page */

.bookgrid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) {
  .bookgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 64px); }
  .bookgrid > aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}



/* ======================================================= related products */

/* Closing block on every product page: photo tiles for the neighbouring
   products, then the Google rating. */
.related__grid .tile, .related__grid .tile__body { min-height: 300px; }
.related__rating { margin-top: clamp(32px, 4vw, 56px); }

/* ============================================================ stat band */

/* Figures lifted over the page header curve, like the spec card on product
   pages. */
.statband { position: relative; z-index: 3; margin-top: calc(clamp(40px, 5vw, 64px) * -1); }
.statband .figrow {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -28px rgb(31 33 36 / .45), var(--sh-sm);
  border-bottom: 4px solid var(--red);
  padding: var(--s-6) clamp(20px, 3vw, 44px);
}
.statband + .section { padding-top: var(--section-y); }

.statband .fig { text-align: center; }
.statband .fig__label { margin-inline: auto; }
.tilegrid .tile, .tilegrid .tile__body { min-height: 280px; }

/* Long unbroken values (the email address) must wrap rather than widen the
   column on phones. */
.split > * { min-width: 0; }
.contactrow__value { overflow-wrap: anywhere; }

/* ====================================================== product galleries */

.pgallery__grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
a.gallery__item { cursor: zoom-in; border-radius: var(--radius); }
@media (max-width: 599px) {
  .pgallery__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Photo viewer opened from any gallery link (site.js). */
.lightbox {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(20 22 25 / .92); }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: var(--s-3); padding: 0 64px; }
.lightbox__img {
  width: auto; height: auto;
  max-width: min(100%, 1200px);
  max-height: 80vh;
  border-radius: var(--radius-sm);
}
.lightbox__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); color: #E4E7EA; font-size: var(--fs-sm); text-align: center; }
.lightbox__count { color: #A8AEB5; }
.lightbox__btn {
  position: fixed;
  top: 50%;
  width: 48px; height: 48px;
  margin-top: -24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  color: #fff;
  transition: background-color var(--t) var(--ease);
}
.lightbox__btn:hover { background: var(--red); }
.lightbox__btn svg { width: 18px; height: 18px; }
.lightbox__prev { left: clamp(8px, 2vw, 24px); }
.lightbox__next { right: clamp(8px, 2vw, 24px); }
.lightbox__close { top: 20px; right: 20px; margin-top: 0; }
@media (max-width: 599px) {
  .lightbox__fig { padding: 0 12px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; margin-top: 0; }
}

/* ================================================================== blog */

/* Post header: the plain page head with a longer title and the date. */
.pagehead--post h1 { max-width: 30ch; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.14; }
.post-meta { color: rgb(255 255 255 / .78); font-size: var(--fs-sm); margin: 0 auto; }

.post-figure { margin: var(--s-6) 0; }
.post-figure img, .post-figure video {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--radius);
  outline: 1px solid rgb(0 0 0 / .08);
  outline-offset: -1px;
}
.post-figure video { background: var(--charcoal); }
.post-figure--cover { margin-top: 0; }
.post-body h2 { font-size: var(--fs-h3); }
.post-body h3 { font-size: var(--fs-h4); }
.post-body h4, .post-body h5, .post-body h6 { font-size: var(--fs-body); }

/* Tables in posts (paint comparisons, cost breakdowns). They scroll on their
   own at phone width rather than pushing the page sideways. */
.post-body table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.post-body td, .post-body th {
  border: 1px solid var(--line-strong);
  padding: var(--s-3);
  vertical-align: top;
  min-width: 8rem;
}
.post-body tr:first-child td { background: var(--slate-wash); font-weight: var(--wt-semi); color: var(--ink); }

.post-related { margin-top: var(--s-9); padding-top: var(--s-7); border-top: var(--hair) solid var(--rule); }
.post-related__lead { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.post-related .card__title { font-size: var(--fs-h3); }
.post-related__back { margin-top: var(--s-5); font-size: var(--fs-sm); }
.post-related__back a { color: var(--red-text); font-weight: var(--wt-semi); }

/* Post cards on /blog: photograph flush to the card's top edge. */
.card--post { padding-top: 0; overflow: hidden; }
.card--post .media { margin: 0 calc(-1 * var(--s-6)) var(--s-2); border-radius: 0; }
.card__date { color: var(--ink-3); font-size: var(--fs-xs); margin: 0; }
.card--post .card__title { font-size: var(--fs-h4); line-height: var(--lh-head); }
/* Hashtag runs and pasted URLs from the old posts wrap rather than widen the page. */
.post-body p, .post-body li { overflow-wrap: anywhere; }