/* ============================================================
   CONTENT PAGES
   ============================================================ */
.page__head { max-width: 62ch; margin-bottom: var(--s10); }
.page__title {
  font-size: var(--t-h1);
  letter-spacing: -.04em;
  line-height: .96;
  margin-bottom: var(--s5);
}
.page__deck {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: #2C3A57;
  max-width: 52ch;
}

.page__hero {
  margin-bottom: var(--s12);
  position: relative;
}
.page__hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.page__hero::before, .page__hero::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid var(--paper);
}
.page__hero::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.page__hero::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(var(--s8), 5vw, var(--s16));
  align-items: start;
}
@media (max-width: 900px) { .page__grid { grid-template-columns: 1fr; } }
.page__side { position: sticky; top: 96px; }
@media (max-width: 900px) { .page__side { position: static; margin-top: var(--s12); } }

/* ---- Prose ---- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s5); }
.prose h2 {
  /* Subordinate to the page title. In a CMS body an h2 is a section marker,
     not a second headline — it should not compete with the h1 above it. */
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -.02em;
  margin-top: var(--s10);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.prose h3 {
  font-size: 1.125rem;
  letter-spacing: -.015em;
  margin-top: var(--s8);
}
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--s2); }
.prose img {
  /* Editor-inserted images carry srcset + an inline style. These rules make
     sure they behave even if the inline style is stripped or the image came
     from elsewhere. height:auto preserves aspect ratio; the width/height
     attributes on the tag reserve space so the page doesn't jump while
     loading (cumulative layout shift). */
  max-width: 100%;
  height: auto;
  margin-block: var(--s8);
  border-radius: 10px;
}

/* A figure with a caption, if the editor's image_caption is used */
.prose figure { margin-block: var(--s8); }
.prose figure img { margin-block: 0; }
.prose figcaption {
  font-family: var(--data);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy);
  opacity: .6;
  margin-top: var(--s3);
}

/* Let a wide image break out of the text column — it's the one place where
   full width genuinely helps, and 68ch is narrow for a photograph. */
.prose img[width]:not([width="0"]) { max-width: 100%; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--saffron); }
.prose blockquote {
  border-left: 2px solid var(--saffron);
  padding-left: var(--s5);
  font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prose th {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1.5px solid var(--rule);
  font-family: var(--data); font-size: var(--t-tiny);
  text-transform: uppercase; letter-spacing: .1em;
}
.prose td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }

/* ---- Filters ---- */
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s10); }
.filters button {
  font-family: var(--display);
  font-weight: 600; font-size: .9375rem;
  padding: var(--s2) var(--s4);
  background: 0;
  border: 1px solid var(--rule);
  cursor: pointer;
  text-transform: capitalize;
  color: var(--ink);
}
.filters button .data { opacity: .5; margin-left: 4px; }
.filters button.on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.filters button.on .data { opacity: .7; }

/* index grids reuse the plate system */
.work--index { grid-template-columns: repeat(6, 1fr); }
.work--index > .plate { grid-column: span 2; }
@media (max-width: 900px) {
  .work--index { grid-template-columns: repeat(2, 1fr); }
  .work--index > .plate { grid-column: span 1; }
}
@media (max-width: 560px) {
  .work--index { grid-template-columns: 1fr; }
  .work--index > .plate { grid-column: span 1; }
}

.empty {
  padding: var(--s16) 0;
  text-align: center;
  color: var(--navy); opacity: .55;
}

/* ---- FAQ ---- */
.faq-block { margin-top: var(--s16); }
.faq-block > h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-bottom: var(--s6); }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s5) 0;
  background: 0; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--display); font-weight: 700;
  font-size: 1.0625rem; color: var(--ink);
}
.faq-icon { color: var(--saffron); font-size: 1.375rem; font-weight: 400; flex-shrink: 0; }
.faq-a { padding-bottom: var(--s5); max-width: 64ch; color: #2C3A57; }

/* ---- Rating ---- */
.rating-widget {
  margin-top: var(--s12);
  padding-block: var(--s6);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
}
.rating-widget .stars { display: flex; gap: 2px; }
.rating-widget .star {
  background: 0; border: 0; cursor: pointer;
  font-size: 1.75rem; line-height: 1; color: var(--rule);
  padding: 0 1px;
  transition: color .14s, transform .14s var(--ease);
}
.rating-widget .star:hover:not(:disabled) { transform: scale(1.12); }
.rating-widget .star.on { color: var(--saffron); }
.rating-meta { font-family: var(--data); font-size: var(--t-data); color: var(--navy); opacity: .7; }
.rating-meta b { color: var(--ink); opacity: 1; font-size: 1rem; }
.rating-meta .thanks { color: var(--ok); font-weight: 700; }

/* ---- Gallery ---- */
.image-gallery-section, .video-grid-section { margin-top: var(--s16); }
.image-gallery-section h3, .video-grid-section h3 {
  font-size: var(--t-h2); margin-bottom: var(--s6);
}
.gallery-filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.gallery-filters button {
  font-family: var(--data); font-size: var(--t-tiny);
  text-transform: uppercase; letter-spacing: .1em;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule); background: 0; cursor: pointer;
}
.gallery-filters button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11,29,63,.96);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s12);
}
.lightbox img { max-width: 92%; max-height: 86vh; object-fit: contain; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(247,245,241,.12); color: var(--paper);
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lb-close { top: var(--s6); right: var(--s6); width: 44px; height: 44px; font-size: 1.5rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 64px; font-size: 2rem; }
.lb-prev { left: var(--s5); } .lb-next { right: var(--s5); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--saffron); }
.lb-caption {
  position: absolute; bottom: var(--s6); left: 0; right: 0;
  text-align: center; color: var(--paper);
  font-family: var(--data); font-size: var(--t-data);
}

.video-card { margin-bottom: var(--s6); }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.video-thumb {
  position: relative; width: 100%; padding: 0; border: 0; background: 0;
  cursor: pointer; overflow: hidden; display: block;
}
.video-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.video-thumb .play-icon {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px;
  background: var(--saffron); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; padding-left: 3px;
}
.video-card h4 { font-family: var(--display); font-size: 1rem; margin-top: var(--s3); }
.video-card p { font-size: var(--t-sm); color: #2C3A57; }

/* ---- Blog index: a list, not cards ---- */
.posts { list-style: none; border-top: 1px solid var(--rule); }
.post { border-bottom: 1px solid var(--rule); }
.post a {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 5rem;
  gap: var(--s6);
  align-items: baseline;
  padding-block: var(--s6);
  transition: padding-inline .25s var(--ease), background .2s;
}
.post a:hover { padding-inline: var(--s4); background: var(--slab); }
.post__date, .post__read { color: var(--navy); opacity: .5; white-space: nowrap; }
.post__read { text-align: right; }
.post__body h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: var(--s2); }
.post__body p { color: #2C3A57; font-size: var(--t-sm); max-width: 62ch; }
@media (max-width: 700px) {
  .post a { grid-template-columns: 1fr; gap: var(--s2); }
  .post__read { display: none; }
}

/* ---- Contact ---- */
.contact__list {
  margin-top: var(--s10);
  border-top: 1px solid var(--rule);
}
.contact__list > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.contact__list dt {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--t-tiny);
  color: var(--navy);
  opacity: .55;
}
.contact__list dd a:hover { color: var(--saffron); }

/* ---- About ---- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(var(--s8), 5vw, var(--s16));
  align-items: start;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about__side { position: sticky; top: 96px; }
@media (max-width: 900px) { .about__side { position: static; } }
.about__stats { border-top: 1px solid var(--rule); margin-bottom: var(--s6); }
.about__stats > div {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}
.about__side .btn { width: 100%; justify-content: center; }

/* ---- 404 ---- */
.nf { max-width: 46ch; padding-block: var(--s16); }
.nf__code {
  display: block;
  color: var(--saffron);
  font-weight: 700;
  margin-bottom: var(--s5);
}

/* ============================================================
   COMMENTS
   Set as a discussion, not a card stack. The reply is visually
   subordinate and clearly marked as coming from the business.
   ============================================================ */
.comments { margin-top: var(--s16); }

.comments__list { list-style: none; margin-bottom: var(--s12); }

.comment {
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}
.comment:first-child { border-top: 1px solid var(--rule); }

.comment__head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.comment__who {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.comment__when {
  color: var(--navy);
  opacity: .5;
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.comment__stars { color: var(--saffron); font-size: .8125rem; letter-spacing: .05em; }

.comment__body {
  color: #2C3A57;
  max-width: 64ch;
  white-space: pre-line;   /* keep the visitor's line breaks */
}

/* Our reply. Indented, on the slab, marked as ours. */
.comment__reply {
  margin-top: var(--s5);
  margin-left: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--slab);
  border-left: 2px solid var(--saffron);
}
.comment__reply .comment__who {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
  font-size: .9375rem;
}
.comment__badge {
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--saffron);
  border: 1px solid currentColor;
  padding: 2px 6px;
}
.comment__reply .comment__body { font-size: var(--t-sm); }

/* ---- Form ---- */
.comments__form { max-width: 42rem; }
.comments__form h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  margin-bottom: var(--s5);
}
.comments__form textarea,
.comments__form input {
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule);
  background: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
}
.comments__form textarea { resize: vertical; }
.comments__form textarea:focus,
.comments__form input:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgba(255,122,24,.12);
}

.comments__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
@media (max-width: 560px) {
  .comments__row { grid-template-columns: 1fr; }
}

.comments__error { color: var(--stop); margin-bottom: var(--s3); }

.comments__note {
  color: var(--navy);
  opacity: .5;
  margin-top: var(--s4);
  font-size: var(--t-tiny);
}

.comments__thanks {
  padding: var(--s5);
  border: 1px solid var(--ok);
  color: var(--ok);
  font-family: var(--data);
  font-size: var(--t-data);
  line-height: 1.6;
}

/* ---- Post meta: a title block, like the plates ---- */
.postmeta {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}
.postmeta__list { margin-top: var(--s4); }
.postmeta__list > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.postmeta__list dt {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--t-tiny);
  color: var(--navy);
  opacity: .55;
}
.postmeta__list dd { color: var(--ink); font-weight: 500; }

.postmeta__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}
.postmeta__tags li {
  border: 1px solid var(--rule);
  padding: 3px 9px;
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy);
  opacity: .75;
}

/* The callback form and the meta card need breathing room between them */
.page__side > * + * { margin-top: var(--s8); }

/* ============================================================
   GOOGLE BUSINESS PROFILE
   ============================================================ */
.gmb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin-block: var(--s12);
}
@media (max-width: 860px) { .gmb { grid-template-columns: 1fr; } }

.gmb__panel { padding: var(--s8); }
@media (max-width: 560px) { .gmb__panel { padding: var(--s6); } }

.gmb__name {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.03em;
  margin-top: var(--s4);
}
.gmb__addr { color: #2C3A57; max-width: 34ch; margin-top: var(--s2); }

.gmb__rating {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.gmb__score {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gmb__stars { color: var(--saffron); font-size: 1.0625rem; letter-spacing: .04em; }
.gmb__count { color: var(--navy); opacity: .6; }

.gmb__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

/* ---- Map ---- */
.gmb__map { position: relative; min-height: 300px; border-left: 1px solid var(--rule); }
@media (max-width: 860px) { .gmb__map { border-left: 0; border-top: 1px solid var(--rule); } }

.gmb__map iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }

/* Placeholder until the person asks for the map — a Maps embed is 1-2 MB
   and sets cookies, so we don't load it for everyone by default. */
.gmb__mapload {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: grid;
  place-content: center;
  gap: var(--s2);
  background:
    repeating-linear-gradient(0deg,  transparent 0 27px, var(--rule) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--rule) 27px 28px),
    var(--slab);
  border: 0;
  cursor: pointer;
  text-align: center;
  font-family: var(--body);
  transition: background-color .2s var(--ease);
}
.gmb__mapload:hover { background-color: #E2DED7; }
.gmb__pin { font-size: 1.75rem; color: var(--saffron); line-height: 1; }
.gmb__loadlabel { font-family: var(--display); font-weight: 700; color: var(--ink); }
.gmb__loadnote { color: var(--navy); opacity: .55; font-size: var(--t-tiny); }

.gmb--compact .gmb__panel { padding: var(--s6); }
.gmb--compact .gmb__map,
.gmb--compact .gmb__mapload { min-height: 240px; }

/* ============================================================
   IMAGE GALLERY
   Equal tiles on a strict grid — the images vary wildly in
   aspect ratio, and a masonry layout makes a builder's site
   look like a scrapbook. object-fit crops to a consistent
   shape so the grid reads as deliberate.
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
}
@media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--slab);
  padding: 0;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.gallery-item:hover { border-color: var(--saffron); }
.gallery-item:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }

/* Caption sits over the image, revealed on hover — keeps the grid clean */
.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s5) var(--s3) var(--s3);
  background: linear-gradient(to top, rgba(11,29,63,.88), transparent);
  color: var(--white);
  font-family: var(--data);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption { opacity: 1; transform: none; }

/* Always show captions on touch — there's no hover */
@media (hover: none) {
  .gallery-caption { opacity: 1; transform: none; }
}

.gallery-filters {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s5);
}
.gallery-filters button {
  border: 1px solid var(--rule);
  background: transparent;
  padding: 6px 14px;
  font-family: var(--data);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy);
  cursor: pointer;
  transition: all .16s var(--ease);
}
.gallery-filters button:hover { border-color: var(--navy); }
.gallery-filters button.on {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}