/* =========================================================================
   Scarlet Ibis Bookkeeping — Design System
   Ported 1:1 from the Figma redesign's Tailwind values (App.tsx + theme.css).
   Breakpoints match Tailwind defaults: sm 640 / md 768 / lg 1024 / xl 1280.
   ========================================================================= */

:root {
  --background: #FAF8F5;
  --foreground: #1C1917;
  --card: #FFFFFF;
  --primary: #86200E;
  --primary-foreground: #FFFFFF;
  --secondary: #F2EBE3;
  --secondary-soft: #E8E0D8;
  --muted-foreground: #6B5E52;
  --accent: #64180A;
  --accent-foreground: #FFFFFF;
  --border: rgba(28, 25, 23, 0.1);
  --border-strong: rgba(28, 25, 23, 0.2);
  /* the brighter rust used specifically on dark/photo backgrounds in the source (hero em, hero cards, credentials bar numbers) */
  --primary-on-dark: rgb(220, 110, 90);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 2px;
  --shadow-sm: 0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.05);
  --shadow-md: 0 6px 16px rgba(28,25,23,.08);

  --container: 80rem;     /* max-w-7xl */
  --container-narrow: 45rem;
  --gutter: 1.5rem;       /* px-6 */

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
svg { fill: none; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--foreground); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: 3rem; }               /* text-5xl */
h2 { font-size: 2.25rem; }            /* text-4xl */
h3 { font-size: 1.25rem; line-height: 1.3; }  /* text-xl */
h4 { font-size: 1rem; line-height: 1.35; }
@media (min-width: 1024px) { h2 { font-size: 3rem; } } /* lg:text-5xl on section headings */

a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

strong, b { font-weight: 600; color: var(--foreground); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary); color: #fff; }

/* ---- Layout primitives -------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: 4rem; }
.section--tight { padding-block: 2.5rem; }
.stack > * + * { margin-top: 1.1em; }

.eyebrow {
  font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary); display: block; margin-bottom: 1rem;
}
.eyebrow--on-dark { color: rgba(250,248,245,.5); margin-bottom: 1.25rem; }
.lede { font-size: 1rem; color: var(--muted-foreground); line-height: 1.6; }
.section-head { max-width: 36rem; margin-bottom: 4rem; }
.section-head.center, .center { margin-inline: auto; text-align: center; }

.hl { font-style: normal; color: var(--primary); }

/* ---- Skip link + a11y --------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--foreground); color:#fff; padding:.75rem 1.1rem; }
.skip-link:focus { left: 0; color:#fff; }
.screen-reader-text { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ---- Buttons -------------------------------------------------------------
   Every button label in the source is text-sm (.875rem); padding varies by
   context (px-8/py-4 hero, px-7/py-4 about, px-6/py-3 band, px-5/py-2.5 nav) —
   default matches the most common px-7/py-4, with .btn--lg/.btn--sm for the rest. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 500; font-size: .875rem;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 1rem 1.75rem; border-radius: var(--radius); border: 1px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg { width: 1em; height: 1em; }
.btn--lg { padding: 1rem 2rem; }       /* px-8 py-4 */
.btn--sm { padding: .625rem 1.25rem; } /* px-5 py-2.5 */
.btn--primary { background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { background: var(--accent); color: #fff; }
.btn--secondary { background: transparent; color: var(--foreground); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--foreground); }
.btn--secondary.btn--on-dark { border-color: rgba(250,248,245,.25); color: #FAF8F5; }
.btn--secondary.btn--on-dark:hover { background: rgba(250,248,245,.08); border-color: #FAF8F5; }
.btn--light { background: var(--background); color: var(--foreground); }
.btn--light:hover { background: var(--secondary); }

.btn-row { display:flex; flex-wrap: wrap; gap:1rem; align-items:center; }

.text-link { display:inline-flex; align-items:center; gap:.5rem; font-weight:500; font-size:.875rem; color: var(--primary); text-decoration:none; margin-top: 2rem; }
.text-link:hover { color: var(--accent); }
.text-link svg { width:.95em; height:.95em; transition: transform .2s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ---- Header --------------------------------------------------------------
   Source header is fixed; kept sticky here (simpler for a multi-page WP site
   with no matching pt-16 offset built into every template) — same white bar,
   same border, same 64px height either way. */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--border); }
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height: 4rem; }
.brand { display:flex; align-items:center; flex-shrink:0; text-decoration:none; color:var(--foreground); }
.brand:hover { color: var(--foreground); }
.brand img { height: 2.5rem; width:auto; object-fit:contain; }
.brand__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--foreground); }

.primary-nav ul { list-style:none; display:flex; align-items:center; gap: 2rem; margin:0; padding:0; }
.primary-nav a { font-weight:500; font-size:.875rem; color:var(--muted-foreground); text-decoration:none; padding:.4rem .1rem; transition: color .2s var(--ease); }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color: var(--foreground); }

/* Dropdown submenus (e.g. Industries -> its 3 industry pages). Desktop:
   hover/focus reveals an absolutely-positioned panel. Mobile: no hover, so
   it's just an always-visible indented list under its parent instead. */
.primary-nav .menu-item-has-children { position: relative; }
.primary-nav .menu-item-has-children > a { display:inline-flex; align-items:center; gap:.35rem; }
.primary-nav .menu-item-has-children > a::after { content:""; width:.4rem; height:.4rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg); margin-top:-.15rem; }
.primary-nav .sub-menu { display:none; list-style:none; margin:0; padding:0; }
@media (min-width: 901px) {
  /* No margin-top gap: a gap between the link and the panel is a dead zone
     the mouse has to cross, dropping :hover mid-transit and closing the menu
     before you reach it. The panel sits flush; padding-top fakes the visual
     breathing room from inside the (still contiguously hoverable) box. */
  .primary-nav .sub-menu {
    position:absolute; top:100%; left:-1rem; min-width:15rem;
    background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-md); border-radius:var(--radius);
    padding:.75rem 0 .5rem; flex-direction:column; align-items:stretch; gap:0; z-index:10;
  }
  .primary-nav .menu-item-has-children:hover > .sub-menu,
  .primary-nav .menu-item-has-children:focus-within > .sub-menu { display:flex; }
  .primary-nav .sub-menu a { display:block; padding:.65rem 1.1rem; font-size:.85rem; white-space:nowrap; }
  .primary-nav .sub-menu a:hover { background:var(--secondary); color:var(--primary); }
}

.header__actions { display:flex; align-items:center; gap:1rem; }
.header__phone { font-weight:500; font-size:.875rem; color:var(--foreground); text-decoration:none; white-space:nowrap; }
.header__phone:hover { color:var(--primary); }

.nav-toggle { display:none; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border:0; background:transparent; color:var(--foreground); padding:.5rem; }
.nav-toggle svg { width:22px; height:22px; }

@media (max-width: 900px) {
  .nav-toggle { display:inline-flex; }
  .primary-nav { position:fixed; inset:4rem 0 auto 0; background:var(--background); border-top:1px solid var(--border); box-shadow:var(--shadow-md); padding: 1.5rem var(--gutter); transform: translateY(-8px); opacity:0; pointer-events:none; transition:.2s var(--ease); }
  .primary-nav.is-open { transform:none; opacity:1; pointer-events:auto; }
  .primary-nav ul { flex-direction:column; align-items:stretch; gap:1.25rem; }
  .primary-nav a { display:block; padding:0; font-size:1rem; color:var(--foreground); }
  .primary-nav .sub-menu { display:block; margin-top:.75rem; padding-left:1rem; }
  .primary-nav .sub-menu li + li { margin-top:.75rem; }
  .primary-nav .sub-menu a { font-size:.9rem; color:var(--muted-foreground); }
  .primary-nav .menu-item-has-children > a::after { display:none; }
  .header__phone { display:none; }
}
/* Logo + CTA + menu toggle overflow narrow phones (page scrolls sideways);
   the CTA is repeated in the hero and the menu, so drop it here. */
@media (max-width: 480px) {
  .header__actions .btn { display:none; }
}

/* ---- Hero ------------------------------------------------------------------
   Full-bleed photo + two stacked gradient overlays (bg-gradient-to-br +
   bg-gradient-to-t) + scarlet left rail + two-column layout: copy left,
   2x2 credential cards right (lg+ only). */
.hero { position:relative; min-height: 72vh; display:flex; align-items:center; overflow:hidden; color:#FAF8F5; }
.hero .container { position:relative; z-index:2; padding-block: 4rem; width:100%; }
@media (min-width: 1024px) { .hero .container { padding-block: 6rem; } }
.hero__bg { position:absolute; inset:0; z-index:0; background: var(--foreground); }
.hero__bg-empty { background: radial-gradient(120% 100% at 12% 20%, rgba(134,32,14,.35), transparent 60%), var(--foreground); }
.hero__bg-img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.35; }
.hero__scrim-1 { position:absolute; inset:0; background: linear-gradient(to bottom right, rgba(28,25,23,.6), rgba(28,25,23,.4) 50%, rgba(28,25,23,.2)); }
.hero__scrim-2 { position:absolute; inset:0; background: linear-gradient(to top, rgba(28,25,23,.9), transparent 50%); }
.hero__rail { position:absolute; left:0; top:0; bottom:0; width:.25rem; background:var(--primary); opacity:.8; z-index:1; }

.hero__layout { display:flex; flex-direction:column; align-items:flex-start; gap:3rem; }
.hero__content { min-width:0; max-width: 36rem; }
.hero__heading { color:#FAF8F5; font-weight:500; letter-spacing:-.025em; line-height:1.05; }
.hero__heading .hl { color: var(--primary-on-dark); }
.hero__sub { margin-top:1.75rem; font-size:1.125rem; color:rgba(250,248,245,.68); line-height:1.6; max-width:28rem; }
.hero .btn-row { margin-top: 2.5rem; }

.hero__cards { display:none; }
@media (min-width: 1024px) {
  .hero__layout { flex-direction:row; align-items:center; gap:4rem; }
  .hero__content { flex:1; }
  .hero__cards { display:grid; grid-template-columns: repeat(2, 1fr); gap:.75rem; flex-shrink:0; width:21.25rem; }
  .hero__card:nth-child(even) { margin-top: 1.25rem; }
}
.hero__card { background:rgba(250,248,245,.1); backdrop-filter: blur(4px); border:1px solid rgba(250,248,245,.15); border-radius: var(--radius); padding:1.5rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.hero__card-value { font-family:var(--font-display); font-weight:500; font-size:1.875rem; line-height:1; color: var(--primary-on-dark); }
.hero__card-label { font-size:.75rem; line-height:1.4; color:rgba(250,248,245,.65); }
@media (min-width: 1024px) { h1.hero__heading, .hero__heading { font-size: 4.25rem; } }
@media (min-width: 1280px) { .hero__heading { font-size: 5rem; } }

/* ---- Trust bar (dark credentials strip) --------------------------------- */
.trust-bar { background: var(--primary); color:#FAF8F5; }
.trust-bar__inner { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:2rem 1rem; padding-block: 2.5rem; text-align:center; }
@media (min-width: 768px) { .trust-bar__inner { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display:flex; flex-direction:column; gap:.25rem; }
.trust-item__value { font-family:var(--font-display); font-size: clamp(1.35rem, 6vw, 1.875rem); color: var(--primary-foreground); font-weight:500; line-height:1; }
.trust-item__label { font-size:.75rem; color:rgba(250,248,245,.85); line-height:1.4; }

/* ---- Cards / grids ------------------------------------------------------- */
.grid { display:grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; position:relative;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
  display:flex; flex-direction:column; gap:.75rem; text-decoration:none;
}
a.card:hover { border-color: rgba(134,32,14,.4); transform: translateY(-2px); }
.card__rule { display:block; width:2rem; height:2px; background: var(--primary); margin-bottom:.5rem; }
.card h3 { color:var(--foreground); font-size:1.25rem; margin-bottom:.5rem; }
.card p { color:var(--muted-foreground); font-size:.875rem; line-height:1.6; }
.card__more { margin-top:auto; padding-top:.5rem; font-weight:500; font-size:.75rem; color:var(--primary); display:inline-flex; align-items:center; gap:.35rem; }
a.card:hover .card__more { gap:.55rem; }
.card__more svg { width:.85em;height:.85em; transition:transform .2s var(--ease); }
.bg-secondary { background: var(--secondary); }
.bg-surface { background: var(--card); }

/* ---- Service grid (sticky intro + flush divided list) -------------------- */
.service-grid__layout { display:grid; grid-template-columns: 1fr; gap: 3rem; align-items:start; }
@media (min-width: 1024px) { .service-grid__layout { grid-template-columns: 1fr 2fr; gap:4rem; } .service-grid__intro { position:sticky; top: 7rem; } }
.service-list { display:grid; grid-template-columns: repeat(2, 1fr); background: var(--border); gap:1px; }
.service-list__row { background:var(--background); padding:1.5rem 1.75rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-decoration:none; transition: background-color .2s var(--ease); }
.service-list__row:hover { background: var(--secondary); }
.service-list__title { font-family:var(--font-display); font-weight:500; font-size:1rem; color:var(--foreground); }
.service-list__row:hover .service-list__title { color: var(--primary); }
.service-list__arrow { flex:none; width:1rem; height:1rem; color:var(--muted-foreground); transition: color .2s var(--ease); }
.service-list__arrow svg { transform: rotate(-90deg); } /* rows link to a page, so point right, not down */
.service-list__row:hover .service-list__arrow { color: var(--primary); }
@media (max-width: 620px) { .service-list { grid-template-columns:1fr; } }

/* ---- Content + image (About / Meet Leisa / Locations intro) -------------- */
/* Source uses a fixed h-[520px] image (not a tall portrait crop) sitting
   beside the text column — i.e. the image is roughly as tall as the content,
   not a separate aspect ratio. We approximate with grid stretch: the image
   fills the row's height (driven by the taller of the two columns) once the
   columns sit side by side; a plain 4:5 card is the sane mobile fallback. */
.media-row { display:grid; grid-template-columns: 1fr; gap: 3rem; align-items:center; }
@media (min-width: 1024px) { .media-row { grid-template-columns: 1fr 1fr; gap:4rem; align-items:stretch; } }
.media-row__media { position:relative; order:1; }
.media-row__text { order:2; }
@media (min-width: 1024px) { .media-row__media { order:2; } .media-row__text { order:1; } .media-row.reverse .media-row__media { order:1; } .media-row.reverse .media-row__text { order:2; } }
.media-row__media img, .media-row__media svg { border-radius: var(--radius); width:100%; aspect-ratio: 4/5; object-fit:cover; object-position:top; background:var(--secondary); }
@media (min-width: 1024px) { .media-row__media img, .media-row__media svg { height:100%; aspect-ratio:auto; min-height:22rem; max-height:32.5rem; } }
.media-row__badge { position:absolute; bottom:0; right:0; background:var(--primary); color:#fff; padding:1.5rem 2rem; border-radius: var(--radius) 0 var(--radius) 0; display:none; }
@media (min-width: 1024px) { .media-row__badge { display:block; } }
.media-row__badge-value { display:block; font-family:var(--font-display); font-size:1.875rem; font-weight:500; line-height:1; }
.media-row__badge-label { display:block; font-size:.75rem; color:rgba(255,255,255,.7); margin-top:.25rem; }

/* ---- Checklist ------------------------------------------------------------ */
.checklist { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.checklist li { position:relative; padding-left:1.75rem; color:var(--foreground); font-size:.9375rem; }
.checklist li::before { content:""; position:absolute; left:0; top:.2em; width:1.1rem; height:1.1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386200E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/1rem no-repeat; }
.checklist--sm li { font-size:.8125rem; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { display:grid; gap:.5rem; max-width: 46rem; margin-inline:auto; }
.faq details { background:var(--card); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.faq details[open] { border-color: var(--border-strong); }
.faq summary { cursor:pointer; list-style:none; padding:1.25rem 1.5rem; font-family:var(--font-display); font-weight:500; color:var(--foreground); font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:none; width:1rem; height:1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386200E' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__answer { padding: 0 1.5rem 1.4rem; color:var(--muted-foreground); font-size:.9375rem; }
.faq .faq__answer > * + * { margin-top:.8rem; }

/* ---- Testimonials ---------------------------------------------------------- */
.quotes { display:grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.quote { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; display:flex; flex-direction:column; gap:1rem; }
.quote__stars { color: var(--primary); display:flex; gap:.15rem; }
.quote__stars svg { width:1rem; height:1rem; fill: currentColor; }
.quote blockquote { font-size:1rem; color:var(--foreground); line-height:1.65; }
.quote figcaption { font-size:.875rem; color:var(--muted-foreground); margin-top:auto; }
.quote figcaption b { display:block; color:var(--foreground); font-family:var(--font-display); }
.empty-note { color:var(--muted-foreground); font-style:italic; border:1px dashed var(--border-strong); border-radius:var(--radius); padding:1.5rem; text-align:center; }

/* ---- CTA band ---------------------------------------------------------------
   Source has exactly one CTA treatment: a full-bleed bg-primary section,
   centered text, button below. No card, no rounding, no split layout. */
.cta-band-section { background: var(--primary); color:#fff; padding-block: 4rem; }
.cta-band__inner { max-width: 48rem; margin-inline: auto; text-align: center; }
.cta-band__inner h2 { color:#fff; font-size: 2.25rem; }
@media (min-width: 1024px) { .cta-band__inner h2 { font-size: 3rem; } }
.cta-band__inner .hl { color: var(--primary-on-dark); }
.cta-band__text { color:rgba(255,255,255,.7); margin-top:1.5rem; max-width:32rem; margin-inline:auto; font-size:1rem; line-height:1.6; }
.cta-band__inner .btn-row { margin-top: 3rem; justify-content: center; }
.cta-band__form { margin-top: 3rem; text-align: left; }

/* ---- Locations band ("Serving the Emerald Coast") --------------------------- */
.locations-band { display:flex; flex-direction:column; gap:1.5rem; border:1px solid var(--border); background:var(--card); padding:2rem; border-radius:var(--radius); }
@media (min-width: 768px) { .locations-band { flex-direction:row; align-items:center; justify-content:space-between; padding:2.5rem; } }
.locations-band__info .eyebrow { margin-bottom:.5rem; }
.locations-band__info h3 { font-size:1.5rem; }
.locations-band__info p { margin-top:.5rem; font-size:.9375rem; color:var(--muted-foreground); }
.locations-band__actions { display:flex; flex-direction:column; gap:1rem; }
@media (min-width: 640px) { .locations-band__actions { flex-direction:row; align-items:center; } }
.locations-band__email { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:var(--muted-foreground); text-decoration:none; }
.locations-band__email:hover { color:var(--foreground); }
.locations-band__email svg { width:.9rem; height:.9rem; }

/* ---- Contact split (large form + NAP/map) ----------------------------------- */
.contact-split { display:grid; grid-template-columns: 1fr; gap: 2.5rem; align-items:start; }
@media (min-width: 900px) { .contact-split { grid-template-columns: 1.4fr 1fr; gap: 3rem; } }
.contact-split__form.form-card { padding: 2.5rem; }
@media (min-width: 768px) { .contact-split__form.form-card { padding: 3rem; } }
.contact-split__form h2 { font-size: 1.75rem; }
.contact-split__form .lede { margin-top: .75rem; font-size: .9375rem; }
.contact-split__form-body { margin-top: 2rem; }
.contact-split__info { display:grid; gap: 1.5rem; }

/* ---- Local info banner ----------------------------------------------------- */
.local-banner { display:grid; grid-template-columns: 1fr; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; background:var(--card); }
@media (min-width: 900px) { .local-banner { grid-template-columns: 1.1fr .9fr; } }
.local-banner__info { padding: 2.5rem; }
.local-banner__nap { font-style:normal; color:var(--foreground); margin-top:1.5rem; display:grid; gap:.85rem; }
.local-banner__nap .row { display:flex; gap:.75rem; align-items:flex-start; font-size:.9375rem; }
.local-banner__nap .row svg { flex:none; width:1.1rem; height:1.1rem; color:var(--primary); margin-top:.15rem; }
.local-banner__nap a { color:var(--foreground); text-decoration:none; }
.local-banner__nap a:hover { color:var(--primary); }
.local-banner__map { min-height: 280px; background:var(--secondary); }
.local-banner__map iframe { width:100%; height:100%; min-height:280px; border:0; display:block; }
.hours-list { list-style:none; padding:0; margin:1rem 0 0; }
.hours-list li { display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px dotted var(--border); font-size:.875rem; }
.hours-list li:last-child { border-bottom:0; }
.hours-list .day { color:var(--muted-foreground); }
.map-embed { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); min-height:220px; background:var(--secondary); }
.map-embed iframe { width:100%; height:100%; min-height:220px; border:0; display:block; }

/* ---- Why us: stats / cards / dark divided list ----------------------------- */
.stats { display:grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align:center; }
.stat b { display:block; font-family:var(--font-display); font-size:1.875rem; color:var(--primary); font-weight:500; line-height:1; }
.stat span { color:var(--muted-foreground); font-size:.8125rem; margin-top:.4rem; display:block; }

.why-us--list { background: var(--foreground); color:#FAF8F5; }
.why-list__layout { display:grid; grid-template-columns: 1fr; gap: 3rem; align-items:center; }
@media (min-width: 1024px) { .why-list__layout { grid-template-columns: 1fr 1fr; gap:4rem; } }
.why-list__intro .eyebrow { color: var(--primary-on-dark); }
.why-list__intro h2 { color:#FAF8F5; }
.why-list__intro .lede { color: rgba(250,248,245,.65); margin-top:1rem; margin-bottom:2.5rem; }
.why-list__intro img { width:100%; height:14rem; object-fit:cover; border-radius:var(--radius); margin-top:2.5rem; }
.why-list { list-style:none; padding:0; margin:0; }
.why-list li { display:flex; gap:1rem; align-items:flex-start; padding:1.5rem 0; border-bottom:1px solid rgba(250,248,245,.1); }
.why-list li:first-child { padding-top:0; }
.why-list li:last-child { border-bottom:0; }
.why-list__dot { flex:none; width:.375rem; height:.375rem; border-radius:50%; background:var(--primary); margin-top:.5rem; }
.why-list li b { display:block; font-family:var(--font-display); font-weight:500; color:#FAF8F5; font-size:1rem; margin-bottom:.25rem; }
.why-list li span span { display:block; font-size:.875rem; color:rgba(250,248,245,.55); line-height:1.6; }

/* ---- Breadcrumbs ------------------------------------------------------------ */
.breadcrumbs { font-size:.8125rem; color:var(--muted-foreground); padding-block:1rem; border-bottom:1px solid var(--border); }
.breadcrumbs a { color:var(--muted-foreground); text-decoration:none; }
.breadcrumbs a:hover { color:var(--primary); }
.breadcrumbs .sep { margin:0 .4rem; color:var(--border-strong); }

/* ---- Page hero (deep pages: services, industries, singles, blog, 404) ------ */
.page-hero { background: var(--secondary); border-bottom:1px solid var(--border); position:relative; }
.page-hero__inner { padding-block: 4rem; position:relative; z-index:2; }
.page-hero__inner .lede { max-width: 48rem; }
@media (min-width: 768px) { .page-hero__inner { padding-block: 5.5rem; } }

/* Optional photo variant: full-bleed background image + dark scrim, light text. */
.page-hero--photo { border-bottom:0; color:#FAF8F5; overflow:hidden; }
.page-hero--photo .page-hero__bg { position:absolute; inset:0; z-index:0; background:var(--foreground); }
.page-hero--photo .page-hero__bg-img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.4; }
.page-hero--photo .page-hero__scrim { position:absolute; inset:0; z-index:1; background: linear-gradient(to bottom right, rgba(28,25,23,.7), rgba(28,25,23,.5) 55%, rgba(28,25,23,.3)); }
.page-hero--photo h1 { color:#FAF8F5; }
.page-hero--photo h1 .hl { color: var(--primary-on-dark); }
.page-hero--photo .lede { color: rgba(250,248,245,.72); }

/* ---- Single (service/industry/location) entry layout ----------------------- */
.entry-layout { display:grid; grid-template-columns: 1fr; gap: 2.5rem; align-items:start; }
@media (min-width: 1024px) { .entry-layout { grid-template-columns: minmax(0,1fr) 20rem; gap:3.5rem; } }
.entry-body > * + * { margin-top: 1.5rem; }
.entry-body h2 { margin-top: 2.5rem; font-size:1.5rem; }
.entry-body h3 { margin-top: 1.75rem; font-size:1.125rem; }
.entry-body ul:not(.checklist) { padding-left:1.2rem; display:grid; gap:.5rem; }
.entry-aside { position:sticky; top:5.5rem; display:grid; gap:1rem; }
.aside-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; }
.aside-card--flush { padding:0; overflow:hidden; }
.aside-card h3 { font-size:1.125rem; margin-bottom:.75rem; }
.aside-card p { font-size:.9375rem; color:var(--muted-foreground); }
.aside-card .btn { width:100%; margin-top: .75rem; }
.aside-card__note { margin-top:1rem; font-size:.875rem; color:var(--muted-foreground); }
@media (max-width: 1023px){ .entry-aside { position:static; } }

.pill-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pill-list a, .pill-list span { display:inline-block; padding:.4rem .8rem; border:1px solid var(--border-strong); border-radius: var(--radius); font-size:.8125rem; color:var(--foreground); text-decoration:none; background:var(--background); }
.pill-list a:hover { border-color:var(--primary); color:var(--primary); }

/* ---- Prose ------------------------------------------------------------------ */
.prose { max-width: 45rem; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { margin-top:2.5rem; font-size:1.5rem; }
.prose h3 { margin-top:1.75rem; font-size:1.125rem; }
.prose ul, .prose ol { padding-left:1.3rem; display:grid; gap:.5rem; }
.prose blockquote { border-left:2px solid var(--primary); padding-left:1.2rem; color:var(--muted-foreground); font-style:italic; }
.prose img { border-radius: var(--radius); }

/* ---- Footer -----------------------------------------------------------------
   Source: bg-foreground text-background, py-12; a 3-col grid (brand/services/
   contact) with pb-10 border-b before the bottom bar. We add a 4th "Company"
   nav column for real internal linking across the multi-page site. */
.site-footer { background: var(--foreground); color:rgba(250,248,245,.6); padding-block: 3rem; }
.site-footer a { color:rgba(250,248,245,.65); text-decoration:none; }
.site-footer a:hover { color: var(--primary); }
.footer-brand .brand { color:#fff; }
/* The logo file is a JPEG with an opaque white background (no transparency to
   invert), so brightness/invert filters just turn the whole image white. A
   light badge card around it reads as intentional instead of like a bug. */
.footer-brand .brand img { background:var(--background); padding:.5rem .75rem; border-radius:var(--radius); }
.footer-brand .brand__wordmark { color:#fff; }
.footer-grid { display:grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap:2.5rem; } }
.footer-brand p { color:rgba(250,248,245,.55); margin-top:.75rem; max-width:24rem; font-size:.875rem; line-height:1.6; }
.footer-col h4 { color:rgba(250,248,245,.4); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; font-family:var(--font-body); font-weight:500; }
.footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; font-size:.875rem; }
.footer-col ul a { color:rgba(250,248,245,.65); }
.footer-col address { font-style:normal; display:grid; gap:.75rem; font-size:.875rem; }
.footer-col address .row { display:flex; gap:.75rem; align-items:flex-start; }
.footer-col address svg { flex:none; width:.875rem; height:.875rem; color: var(--primary); margin-top:.15rem; }
.footer-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.footer-pills .pill { font-size:.75rem; padding:.25rem .65rem; border:1px solid rgba(250,248,245,.15); border-radius:var(--radius); color:rgba(250,248,245,.55); }
.footer-bottom { padding-top:2rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.75rem; color:rgba(250,248,245,.35); }
.footer-bottom .footer-credit { color:rgba(250,248,245,.6); text-decoration:underline; text-underline-offset:2px; }
.footer-bottom .footer-credit:hover { color:#FAF8F5; }

/* ---- Contact form (CF7) ------------------------------------------------------
   CF7 wraps every field's input in <span class="wpcf7-form-control-wrap">,
   which defaults to display:inline-block — that becomes the containing block
   for the input's width, and an inline-block with no set width sizes to its
   content (shrink-to-fit), so the input's width:100% can't resolve and every
   field falls back to its HTML size/cols attribute instead. Force it block. */
.wpcf7-form-control-wrap { display: block; }
.form-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding: 2rem; }
@media (min-width: 768px) { .form-card { padding: 2.5rem; } }
/* CF7 nests the input INSIDE <label> (text, <br>, then the field) — margin on
   label lands after the whole pair, not between text and input. Row/field
   spacing comes from the owl-selector rule on the form's direct children. */
.wpcf7 .wpcf7-form > :where(p, div) { margin:0; } /* :where keeps this at 0,2,0 so the owl rule below wins */
.wpcf7 .wpcf7-form > * + * { margin-top: 1.5rem; }
.wpcf7 .two-col p { margin:0; }
.wpcf7 label { display:block; font-weight:500; font-size:.75rem; letter-spacing:.05em; color:var(--foreground); text-transform:uppercase; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {
  width:100%; margin-top:.5rem; padding:.8rem 1rem; border:1px solid var(--border-strong); border-radius:var(--radius);
  font: inherit; font-size:.875rem; text-transform:none; color:var(--foreground); background:var(--background); transition:border-color .15s;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline:none; border-color:var(--primary); }
.wpcf7 textarea { min-height:130px; resize:vertical; }
.wpcf7 .two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .wpcf7 .two-col { grid-template-columns:1fr; } }
.wpcf7-submit { display:inline-flex; align-items:center; justify-content:center; font-weight:500; background:var(--primary); color:#fff; border:0; padding:1rem 2rem; border-radius:var(--radius); cursor:pointer; font-size:.875rem; transition:background-color .18s var(--ease); text-transform:none; }
.wpcf7-submit:hover { background:var(--accent); }
.wpcf7 .wpcf7-response-output { border-radius:var(--radius); margin:1rem 0 0; padding:.8rem 1rem; font-size:.875rem; }

/* ---- CTA band form (dark variant) — must load after .wpcf7 above; equal
   selector specificity means source order decides the winner. ---------------- */
/* CF7 nests the input INSIDE <label> (label text, <br>, then the field), so
   margin on label lands after the whole label+input pair, not between the
   label text and its input — spacing between rows/fields is handled by the
   owl-selector rule below instead, on the form's direct children. */
.cta-band__form .wpcf7-form > :where(p, div) { margin:0; }
.cta-band__form .wpcf7-form > * + * { margin-top: 1.5rem; }
.cta-band__form .two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .cta-band__form .two-col { grid-template-columns:1fr; } }
.cta-band__form .two-col p { margin:0; }
.cta-band__form label { display:block; font-weight:500; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.cta-band__form input[type=text], .cta-band__form input[type=email], .cta-band__form input[type=tel], .cta-band__form textarea {
  width:100%; margin-top:.5rem; padding:.8rem 1rem; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius);
  font:inherit; font-size:.875rem; text-transform:none; color:#fff; background:rgba(255,255,255,.1);
}
.cta-band__form input::placeholder, .cta-band__form textarea::placeholder { color:rgba(255,255,255,.4); }
.cta-band__form input:focus, .cta-band__form textarea:focus { outline:none; border-color:rgba(255,255,255,.5); }
.cta-band__form textarea { min-height:110px; resize:vertical; }
.cta-band__form .si-hp { display:none; }
.cta-band__form .wpcf7-submit { display:flex; width:100%; align-items:center; justify-content:center; gap:.5rem; margin-top:.5rem; background:var(--background); color:var(--foreground); border:0; padding:1rem; border-radius:var(--radius); font-weight:500; font-size:.875rem; cursor:pointer; }
.cta-band__form .wpcf7-submit:hover { background:var(--secondary); }
.cta-band__form .wpcf7-response-output { color:#fff; border-color:rgba(255,255,255,.3) !important; }
.cta-band__form .wpcf7-not-valid-tip { color:#ffb4a8; font-size:.8rem; margin-top:.4rem; }

/* ---- Reveal on scroll (progressive) ------------------------------------------ */
.reveal { opacity:0; transform: translateY(14px); }
.reveal.in { opacity:1; transform:none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } }

/* ---- Search form -------------------------------------------------------------- */
.search-field { padding:.8rem 1rem; border:1px solid var(--border-strong); border-radius: var(--radius); min-width:16rem; font:inherit; font-size:.875rem; background:var(--card); }

/* ---- Utilities ----------------------------------------------------------------- */
.text-center { text-align:center; }
.mx-auto { margin-inline:auto; }
.mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; } .mt-4 { margin-top:2.5rem; }
.divider { height:1px; background:var(--border); border:0; }