/* Layout-2 look for every page that is NOT the home page (products, product detail, blog, team, locations, county pages, FAQ, About, services, quote, terms).
   Scoped to <main> when it does not hold the home page wrapper (.l2). Palette comes from tailwind.config.cjs (NEXT_PUBLIC_CONCEPT=l2); this file is type, rhythm and surfaces.
   Loaded only by src/concepts/l2/shell.tsx. Fonts (Archivo, Fraunces) are declared in l2.css. */

main:not(:has(> .l2)) {
  --i-ink: #17191b; --i-cream: #faf8f4; --i-line: #d9d2c5; --i-red: #b4121f; --i-red-hot: #d41f2d; --i-muted: #4a4a4a;
  padding-top: 95px;                                   /* clears the fixed 95px header */
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 17px; line-height: 1.65; color: var(--i-ink);
}
main:not(:has(> .l2)) h1, main:not(:has(> .l2)) h2, main:not(:has(> .l2)) h3 { font-family: "Fraunces", Georgia, serif; letter-spacing: -0.02em; line-height: 1.1; }
main:not(:has(> .l2)) h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; }
main:not(:has(> .l2)) h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; }
main:not(:has(> .l2)) h3 { font-size: 22px; font-weight: 700; }
main:not(:has(> .l2)) h4 { font-family: "Archivo", system-ui, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }

/* page rhythm */
main:not(:has(> .l2)) .container { max-width: 1200px; }
main:not(:has(> .l2)) .py-16 { padding-block: clamp(40px, 5vw, 72px); }
main:not(:has(> .l2)) header.text-center { margin-bottom: 2.5rem; }
main:not(:has(> .l2)) header.text-center p { font-size: 18px; color: var(--i-muted); }

/* photo hero bands (FAQ, About, Team, services, county pages): shorter, darker scrim so the title always reads */
main:not(:has(> .l2)) section[class*="h-[75vh]"] { height: 52vh !important; min-height: 340px; }
main:not(:has(> .l2)) section[class*="h-[75vh]"] h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
main:not(:has(> .l2)) section[class*="h-[75vh]"] > div.absolute.inset-0:not(.z-0) { background: linear-gradient(to bottom, rgba(8,8,8,.55), rgba(8,8,8,.45)) !important; }

/* long copy */
main:not(:has(> .l2)) .prose { max-width: 760px !important; margin-inline: auto; font-size: 18px; line-height: 1.7; color: #2b2b2b; }
main:not(:has(> .l2)) .prose p { margin-block: 1em; }
main:not(:has(> .l2)) .prose h2 { margin-top: 2.2em; margin-bottom: .55em; }
main:not(:has(> .l2)) .prose h3 { margin-top: 1.8em; margin-bottom: .5em; }
main:not(:has(> .l2)) .prose h4 { margin-top: 1.6em; margin-bottom: .4em; }
main:not(:has(> .l2)) .prose a { color: var(--i-red); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
main:not(:has(> .l2)) .prose a:hover { color: var(--i-red-hot); }
main:not(:has(> .l2)) .prose strong { color: var(--i-ink); }
main:not(:has(> .l2)) .prose ul { list-style: none; padding-left: 0; }
main:not(:has(> .l2)) .prose ul > li { position: relative; padding-left: 1.5em; margin: .5em 0; }
main:not(:has(> .l2)) .prose ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; background: var(--i-red); }
main:not(:has(> .l2)) .prose ol { padding-left: 1.5em; }
main:not(:has(> .l2)) .prose ol > li::marker { color: var(--i-red); font-weight: 700; }
main:not(:has(> .l2)) .prose blockquote { border-left: 4px solid var(--i-red); padding-left: 1.2em; font-style: normal; color: var(--i-ink); }
main:not(:has(> .l2)) .prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
main:not(:has(> .l2)) .prose th { background: var(--i-ink); color: #fff; text-align: left; padding: .6em .8em; }
main:not(:has(> .l2)) .prose td { border-bottom: 1px solid var(--i-line); padding: .6em .8em; }
main:not(:has(> .l2)) .prose img { margin-block: 1.5em; }

/* surfaces: squared cards with warm hairlines, no soft shadows */
main:not(:has(> .l2)) [class*="rounded-lg"], main:not(:has(> .l2)) [class*="rounded-xl"] { border-radius: 2px !important; }
main:not(:has(> .l2)) [class*="bg-theme-card-background"], main:not(:has(> .l2)) details[class*="bg-white"] { border: 1px solid var(--i-line); box-shadow: none !important; }
main:not(:has(> .l2)) article[class*="bg-theme-card-background"], main:not(:has(> .l2)) a[class*="bg-theme-card-background"] { transition: border-color .2s, transform .2s; }
main:not(:has(> .l2)) article[class*="bg-theme-card-background"]:hover, main:not(:has(> .l2)) a[class*="bg-theme-card-background"]:hover { border-color: var(--i-red); transform: translateY(-2px); }
main:not(:has(> .l2)) article h2, main:not(:has(> .l2)) article h3 { font-size: 22px; }

/* pills and buttons */
main:not(:has(> .l2)) a[class*="rounded-full"] { border-radius: 2px !important; border: 1px solid var(--i-line); background: #fff !important; color: var(--i-ink) !important; font-weight: 600; }
main:not(:has(> .l2)) a[class*="rounded-full"]:hover { border-color: var(--i-red); color: var(--i-red) !important; }
main:not(:has(> .l2)) a[class*="bg-theme-logo"] { background: var(--i-red) !important; color: #fff !important; }
main:not(:has(> .l2)) a[class*="bg-theme-accent"], main:not(:has(> .l2)) button[class*="bg-brand-red"] { font-weight: 700; letter-spacing: .01em; }

/* FAQ accordions */
main:not(:has(> .l2)) details > summary { font-family: "Fraunces", Georgia, serif; font-size: 20px; font-weight: 700; color: var(--i-ink); }
main:not(:has(> .l2)) details[open] { border-color: var(--i-red); }

/* forms */
main:not(:has(> .l2)) input, main:not(:has(> .l2)) select, main:not(:has(> .l2)) textarea { border-radius: 2px; border-color: var(--i-line); font-size: 17px; }
main:not(:has(> .l2)) label { font-weight: 600; }

/* images in cards */
main:not(:has(> .l2)) article img { width: 100%; object-fit: cover; }

@media (max-width: 767px) {
  main:not(:has(> .l2)) { font-size: 16px; padding-top: 72px; }
  main:not(:has(> .l2)) .prose { font-size: 17px; }
  main:not(:has(> .l2)) section[class*="h-[75vh]"] { height: 40vh !important; min-height: 260px; }
}

/* county and blog heroes (65vh bands): dark band when there is no photo, scrim over the photo, title always white */
main:not(:has(> .l2)) div[class*="h-[65vh]"] { background-color: var(--i-ink) !important; height: 48vh !important; min-height: 320px !important; }
main:not(:has(> .l2)) div[class*="h-[65vh]"]::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(to bottom, rgba(8,8,8,.58), rgba(8,8,8,.46)); }
main:not(:has(> .l2)) div[class*="h-[65vh]"] h1 { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.7); }

/* ---- critic interior-1 fixes (2026-10-15) ---- */
/* no text under 14px on interior pages */
main:not(:has(> .l2)) .text-xs { font-size: 14px !important; line-height: 1.5 !important; }
main:not(:has(> .l2)) .text-sm { font-size: 15px !important; line-height: 1.55 !important; }
main:not(:has(> .l2)) [class*="text-[1"] { font-size: max(14px, 1em) !important; }
/* phone: the chat button is smaller and tucked into the corner, and the page leaves room so it never sits on the last line */
@media (max-width: 767px) {
  button[class*="fixed bottom-6 right-6"], button[class*="bottom-6"][class*="right-6"] { width: 46px !important; height: 46px !important; bottom: 12px !important; right: 12px !important; opacity: .92; }
  main:not(:has(> .l2)) { padding-bottom: 8px; }
  main:not(:has(> .l2)) section[class*="h-[75vh]"] img, main:not(:has(> .l2)) div[class*="h-[65vh]"] img { object-position: center 18% !important; }
}
main:not(:has(> .l2)) section[class*="h-[75vh]"] img { object-position: center 35%; }

/* long county lists: a toggle per county (added by l2-behavior.js; without JS everything stays open) */
main:not(:has(> .l2)) .l2-toggle { display: inline-flex; align-items: center; gap: .5em; margin-top: 12px; padding: 10px 16px; min-height: 44px; border: 1px solid var(--i-line); background: #fff; color: var(--i-ink); font: 600 15px "Archivo", system-ui, sans-serif; cursor: pointer; border-radius: 2px; }
main:not(:has(> .l2)) .l2-toggle:hover { border-color: var(--i-red); color: var(--i-red); }
main:not(:has(> .l2)) .l2-toggle::after { content: "+"; font-weight: 700; }
main:not(:has(> .l2)) .l2-toggle[aria-expanded="true"]::after { content: "\2212"; }

/* closing band on every content page: recent buildings + the estimate button */
.l2-close { background: #17191b; color: #fff; padding: clamp(40px, 5vw, 72px) 0; font-family: "Archivo", system-ui, sans-serif; }
.l2-close .wrap { max-width: 1440px; margin-inline: auto; padding-inline: clamp(18px, 5.6vw, 80px); }
.l2-close h2 { font-family: "Fraunces", Georgia, serif; font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 8px; color: #fff; }
.l2-close p { margin: 0 0 24px; color: #d9d2c5; font-size: 18px; max-width: 60ch; }
.l2-close .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 28px; }
.l2-close .strip img { width: 100%; height: 190px; object-fit: cover; display: block; }
.l2-close .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.l2-close .acts a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; font-weight: 700; font-size: 17px; text-decoration: none; border: 1px solid rgba(255,255,255,.7); color: #fff; }
.l2-close .acts a.primary { background: #d41f2d; border-color: #d41f2d; }
@media (max-width: 767px) { .l2-close .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .l2-close .strip img { flex: 0 0 72%; height: 170px; scroll-snap-align: start; } }
main:not(:has(> .l2)) .l2-collapsed { display: none !important; }

/* ---- round 3: photos on content pages, readable sizes, form alignment ---- */
main:not(:has(> .l2)) .text-sm { font-size: 16px !important; }
.l2-figure { margin: 0 0 3rem; display: grid; gap: 8px; }
.l2-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l2-figure.two { grid-template-columns: 1fr 1fr; max-width: 1100px; margin-inline: auto; }
.l2-figure.two img { aspect-ratio: 16 / 10; }
.l2-figure.three { grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin-inline: auto; }
.l2-figure.three img { aspect-ratio: 4 / 3; }
.l2-figure.one { margin: 2.2em 0; }
.l2-figure.one img { aspect-ratio: 16 / 8; }
@media (max-width: 767px) {
  .l2-figure.two, .l2-figure.three { grid-template-columns: 1fr; }
  main:not(:has(> .l2)) header.text-center p, main:not(:has(> .l2)) .prose p { text-align: left; }
  button.l2-chat-away { transform: translateX(80px); opacity: 0 !important; pointer-events: none; transition: transform .25s, opacity .25s; }
}
main:not(:has(> .l2)) form .grid[class*="grid-cols-2"], main:not(:has(> .l2)) form .grid.sm\:grid-cols-2 { align-items: end; }
main:not(:has(> .l2)) form label span { white-space: nowrap; }