/* K.O. Solutions FL: deferred styles. Critical half is inlined by includes/head.php. */
/* ---------- 6. Sections ---------- */
.section{ padding:56px 0; }
.section--tight{ padding:32px 0; }
.section h2{ margin-bottom:.5em; }
.section__intro{ max-width:62ch; margin-bottom:28px; }
.divider{ padding:8px 0 40px; }
@media (min-width:900px){
  .section{ padding:88px 0; }
}

/* Bands. The cream tint is the light band. Navy is the brand band, the same
   navy and cream as the logo and the ads (2026-09-14). */
.on-cream{ background:var(--cream-tint); color:var(--ink); }
.on-navy{ background:var(--navy); color:var(--cream); }
.on-navy .muted{ color:var(--cream-2); }

/* rule helper: depth is a 1px rule, nothing else */
.rule-top{ border-top:1px solid var(--rule); }

/* ---------- 7. Services grid ---------- */
.services{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px;
  list-style:none; margin:0; padding:0;
}
.service{ border-top:1px solid var(--rule); padding-top:14px; }
.service a{ text-decoration:none; display:block; color:inherit; }
.service a:hover h3,.service a:focus-visible h3{ color:var(--navy-hover); }
.service .ico{ margin-bottom:12px; }
.service h3{ font-size:20px; margin-bottom:8px; line-height:1.05; }
.service p{ margin:0; font-size:15px; color:var(--ink-2); }
@media (min-width:900px){
  .services{ grid-template-columns:repeat(3,1fr); gap:44px 32px; }
  .service h3{ font-size:24px; }
  .service p{ font-size:16px; }
}

/* ---------- 8. Proof band (navy, mesh) ---------- */
.proof{
  position:relative; isolation:isolate;
}
.proof::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.08;
  /* same 6x6 mesh as motif.svg's #ko-mesh, in the brand cream */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 3H6M3 0V6' stroke='%23FFEDD9' stroke-width='0.5'/></svg>");
}
.proof__facts{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 28px; padding:0; list-style:none;
}
.proof__facts strong{ font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1; display:block; color:var(--navy); }
.on-navy .proof__facts strong{ color:var(--blue-lt); }
.reviews{ display:grid; gap:24px; margin:0; padding:0; list-style:none; }
.review{
  border-top:1px solid var(--rule); padding-top:16px; margin:0;
}
.review blockquote{ margin:0 0 10px; font-size:17px; }
.review blockquote p{ margin:0; }
.review figcaption{ color:var(--ink-2); }
.on-navy .review{ border-top-color:var(--rule-navy); }
.on-navy .review figcaption{ color:var(--cream-2); }
@media (min-width:900px){
  .reviews{ grid-template-columns:repeat(3,1fr); gap:32px; }
  .reviews--4{ grid-template-columns:repeat(2,1fr); }
  .proof__facts strong{ font-size:44px; }
}

/* ---------- 9. Why (the four claims) ---------- */
.why{ display:grid; gap:24px; margin:0; padding:0; list-style:none; }
.why li{ border-top:1px solid var(--rule); padding-top:14px; }
.why .q{ font-style:italic; color:var(--ink-2); margin:0 0 8px; font-size:16px; }
.why h3{ font-size:20px; margin-bottom:6px; }
.why p:last-child{ margin:0; }
@media (min-width:900px){
  .why{ grid-template-columns:repeat(2,1fr); gap:36px 40px; }
}

/* ---------- 10. Photos, gallery ---------- */
.frame{
  border:1px solid var(--rule); margin:0; background:var(--white);
  border-radius:var(--r-img); overflow:hidden;
}
.frame img{ width:100%; }
.frame figcaption{ padding:8px 10px; color:var(--ink-2); line-height:1.35; }
.gallery{ columns:2; column-gap:16px; }
.gallery .frame{ break-inside:avoid; margin-bottom:16px; }
@media (min-width:900px){
  .gallery{ columns:3; column-gap:24px; }
  .gallery .frame{ margin-bottom:24px; }
}

/* ---------- 11. Cities ---------- */
.cities{ display:grid; gap:20px; margin:0 0 24px; padding:0; list-style:none; }
.city{ border-top:1px solid var(--rule); padding-top:14px; }
.city a{ text-decoration:none; }
.city a:hover h3{ color:var(--navy-hover); }
.city p{ margin:0; color:var(--ink-2); }
.towns{ margin:0; }
@media (min-width:900px){
  .cities{ grid-template-columns:repeat(2,1fr); gap:32px; }
}

/* ---------- 12. CTA band ---------- */
.cta{ padding:44px 0; }
.cta h2{ margin-bottom:8px; }
.cta p{ max-width:56ch; }
.cta__row{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
@media (min-width:900px){
  .cta{ padding:64px 0; }
  .cta__row{ flex-direction:row; align-items:center; gap:20px; }
}

/* ---------- 13. Service page copy ---------- */
.copy{ max-width:66ch; }
.copy h2{ margin-top:1.2em; }
.copy h2:first-child{ margin-top:0; }
.what{ columns:1; }
.what li{ margin-bottom:6px; }
.faq{ max-width:66ch; }
.faq details{ border-top:1px solid var(--rule); padding:14px 0; }
.faq details:last-child{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; font-weight:600; font-size:18px; list-style:none;
  display:flex; justify-content:space-between; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-mono); color:var(--navy); }
.faq details[open] summary::after{ content:"-"; }
.faq details p{ margin:12px 0 0; }
.also{ margin:28px 0 0; padding-top:18px; border-top:1px solid var(--rule); color:var(--ink-2); }
.also a{ color:var(--navy); }

.related{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.related a{
  display:inline-block; padding:8px 12px; border:1px solid var(--rule);
  border-radius:var(--r-ui);
  text-decoration:none; font-size:15px; font-weight:600;
}
.related a:hover{ border-color:var(--navy); background:var(--cream-tint); }
.two-col{ display:grid; gap:32px; }
@media (min-width:900px){
  .what{ columns:2; column-gap:40px; }
  .two-col{ grid-template-columns:3fr 2fr; gap:56px; align-items:start; }
}

/* ---------- 14. Form ---------- */
.lead-form{ max-width:560px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; margin-bottom:6px; font-size:15px; }
.field input,.field select,.field textarea{
  width:100%; min-height:48px; padding:10px 12px;
  font:inherit; color:var(--ink); background:var(--white);
  border:1px solid var(--rule); border-radius:var(--r-ui);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy);
}
.field .err{ display:none; color:#8A3A1E; font-size:14px; margin-top:6px; }
.field.bad .err{ display:block; }
.field.bad input,.field.bad select{ border-color:#8A3A1E; }
.form-note{ font-size:14px; color:var(--ink-2); margin:10px 0 0; }
.sent{
  display:none; border:1px solid var(--rule); border-top:3px solid var(--navy);
  border-radius:var(--r-ui); padding:20px; margin-top:16px; background:var(--cream-tint);
}
.sent.show{ display:block; }
.sent p:last-child{ margin:0; }
.lead-form.done{ display:none; }

/* contact page */
.contact-grid{ display:grid; gap:32px; }
.contact-list{ list-style:none; margin:0 0 24px; padding:0; }
.contact-list li{ border-top:1px solid var(--rule); padding:14px 0; }
.contact-list .mono{ display:block; color:var(--ink-2); margin-bottom:4px; }
.contact-list a{ font-weight:600; text-decoration:none; }
.contact-list a:hover{ color:var(--navy-hover); }
.phone-xl{
  display:inline-block; font-family:var(--font-mono); font-weight:500;
  font-size:28px; letter-spacing:.02em; text-decoration:none; color:var(--navy);
}
@media (min-width:900px){
  .contact-grid{ grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .phone-xl{ font-size:34px; }
}

/* ---------- 15. Footer ---------- */
/* Navy with the logo in cream, the way the logo file is drawn. */
.site-foot{ background:var(--navy); color:var(--cream); padding:48px 0 32px; }
.foot-grid{ display:grid; gap:28px; }
.site-foot p{ margin:0 0 8px; }
.site-foot a{ color:var(--cream); }
.site-foot a:hover{ color:var(--blue-lt); }
.site-foot .muted{ color:var(--cream-2); }
.foot-links{ list-style:none; margin:0; padding:0; }
.foot-links li{ margin:0 0 8px; }
.foot-links a{ text-decoration:none; }
.foot-links .label{ color:var(--cream-2); }
.foot-legal{
  border-top:1px solid var(--rule-navy); margin-top:32px; padding-top:20px;
  color:var(--cream-2);
}
.foot-legal p{ margin:0 0 6px; }
@media (min-width:900px){
  .foot-grid{ grid-template-columns:2fr 1fr 1fr; gap:48px; }
}

/* ---------- 16. Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ---------- 17. Answer-first block ----------
   The 40 to 70 word plain answer directly under the H1 on every service and
   service-city page. It is the passage an answer engine quotes, so it is set
   larger than body copy and given air rather than being buried in a column. */
.answer-first{
  font-size:19px; line-height:1.55; max-width:64ch;
  border-left:3px solid var(--navy); padding:2px 0 2px 18px; margin:0 0 28px;
}
@media (min-width:900px){ .answer-first{ font-size:20px; } }

/* ---------- 18. Breadcrumbs ---------- */
.crumbs{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding:0; }
.crumbs li::after{ content:"/"; margin-left:6px; color:var(--rule); }
.crumbs li:last-child::after{ content:""; }
.crumbs a{ text-decoration:none; color:var(--ink-2); }
.crumbs a:hover{ color:var(--navy); }
.crumbs [aria-current]{ color:var(--ink-2); }

/* ---------- 19. Form error ---------- */
.form-error{
  margin:12px 0 0; padding:12px 14px; font-size:15px;
  color:#8A3A1E; background:#FBF2EE; border-left:3px solid #8A3A1E;
}

/* ---------- 20. Standard blocks ---------- */
.standard{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.standard li{ border-top:1px solid var(--rule); padding-top:14px; }
.standard h3{ font-size:19px; margin-bottom:6px; }
.standard p{ margin:0; color:var(--ink-2); font-size:16px; }
@media (min-width:900px){ .standard{ grid-template-columns:repeat(2,1fr); gap:28px 40px; } }

/* ---------- 21. Blog ---------- */
.posts{ list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.posts li{ border-top:1px solid var(--rule); padding-top:16px; }
.posts h3{ font-size:20px; margin-bottom:6px; }
.posts a{ text-decoration:none; }
.posts a:hover h3{ color:var(--navy-hover); }
.posts time{ display:block; }
.empty-note{
  border:1px solid var(--rule); border-top:3px solid var(--navy);
  border-radius:var(--r-ui); padding:20px; background:var(--cream-tint); max-width:66ch;
}
.empty-note p:last-child{ margin:0; }
@media (min-width:900px){ .posts{ grid-template-columns:repeat(2,1fr); gap:32px 40px; } }

/* ---------- 22. Areas index ---------- */
.combo-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.combo-links a{ text-decoration:none; font-weight:600; }
.combo-links a:hover{ color:var(--navy-hover); }
@media (min-width:700px){ .combo-links{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .combo-links{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 23. Post body ---------- */
.post-content{ max-width:66ch; }
.post-hero{ aspect-ratio:16 / 9; overflow:hidden; max-width:66ch; margin:0 0 24px; border:1px solid var(--rule); border-radius:var(--r-img); }
.post-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-content h2{ margin-top:1.2em; }
.post-content img{ border:1px solid var(--rule); border-radius:var(--r-img); }

/* ---------- 24. Services grid, photo-led ----------
   The grid leads with a photo of the work instead of a line icon. The card's
   own top rule is dropped, because the image edge already draws that line and
   two lines stacked read as a mistake.

   Will's notes, 2026-09-07:
   - the heading sat 14px under the photo and read as glued to it. The display
     face is uppercase at line-height .95, so it has almost no ascender space of
     its own and needs the gap the type does not provide. 20px, 24px on desktop.
   - the square photo corners read hard. Radius on the FRAME, not the <img>,
     because the frame is what clips the hover zoom.

   Will again, 2026-09-08: "still pressed up against the pictures really
   heavily." 24px was not enough, and the reason is ratio, not absolute size.
   The heading sat 24px under the photo and 8px above its own paragraph, so the
   eye had to decide which block it belonged to from a 3:1 margin that reads as
   ambiguous when both neighbours are heavy: a photo is a solid field of colour
   and the display face is a dense condensed mass. Widening to 32/40 makes it
   4:1 and then 5:1, so the heading is unmistakably the top of the text block
   rather than a caption stuck to the image. The paragraph gap is deliberately
   left alone; moving both would preserve the ambiguity at a larger size.

   The frame is a span, not the img itself, for two reasons: overflow:hidden has
   to live on something that is not the element being scaled, and aspect-ratio
   on the frame makes every card in the row the same height no matter what the
   source crop measures. */
.services--photo .service{ border-top:0; padding-top:0; }
.service__frame{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid var(--rule);
  border-radius:var(--r-img);
  background:var(--cream-tint);
  margin-bottom:32px;
}
.service__img{
  width:100%; height:100%; display:block;
  object-fit:cover;
  transition:transform .4s ease;
}
.service a:hover .service__frame,
.service a:focus-visible .service__frame{ border-color:var(--navy); }
.service a:hover .service__img,
.service a:focus-visible .service__img{ transform:scale(1.04); }
/* The icon fallback still has to sit inside the frame without being stretched. */
.service__frame .ico{
  position:absolute; inset:0; margin:auto;
  width:44px; height:44px;
}
@media (min-width:900px){
  .service__frame{ margin-bottom:40px; }
}

/* ---------- 26. Projects ----------
   Finished jobs published from the TDM dashboard (2026-09-14). Cards reuse
   section 24's photo card and photos reuse section 10's frame, so a job reads
   as part of the site, not as a module dropped into it. The only new rule is
   the before and after pair.

   Contractor photos arrive in any shape. Both sides crop to 4:3, so a portrait
   before and a landscape after still meet edge to edge. Side by side on a
   phone too: stacked, the pair stops being a comparison. */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pair .frame img{ aspect-ratio:4/3; object-fit:cover; }
@media (min-width:900px){
  .pair{ gap:24px; }
}