/* ==========================================================================
   IDAcoat LLC — child brand stylesheet (ported in full from the prototype)
   Brand: black / asphalt-gray / gold-yellow / white. Clean, scannable.
   Enqueued AFTER the parent Customizer :root (dep: arenex-responsive),
   so the tokens declared here win.
   ========================================================================== */

@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/GoogleSansFlex.woff2") format("woff2");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans.woff2") format("woff2");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}

:root {
  --black:    var(--heading-color, #080808);
  --charcoal: #151515;
  --asphalt:  #242424;
  --yellow:   var(--primary-color, #f4c400);
  --gold:     var(--accent-color, #d99b00);
  --gold-text:#8a6200; /* AA-contrast gold for text on light backgrounds */
  --white:    #ffffff;
  --gray:     #c9c9c9;
  --gray-2:   #8a8a8a;
  --line:     rgba(255,255,255,.10);
  --line-dark:rgba(0,0,0,.10);

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --shadow: 0 18px 40px -18px rgba(0,0,0,.45);

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Google Sans Flex", "DM Sans", system-ui, sans-serif;

  /* ===== TYPE SCALE (major-third ~1.25; headings fluid & bounded <=2.5x min) ===== */
  --text-xs:      0.78rem;    /* fine print: breadcrumb, form note, legal */
  --text-sm:      0.875rem;   /* labels, metadata, captions */
  --text-base:    var(--body-size, 1.0625rem);
  --text-lead:    clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);  /* lead / intro / hero-sub */
  --text-h5:      var(--h5-size, clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem));
  --text-h6:      var(--h6-size, 1.0625rem);
  --text-h4:      var(--h4-size, clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem));
  --text-h3:      var(--h3-size, clamp(1.375rem, 1.1rem + 1.12vw, 2rem));
  --text-h2:      var(--h2-size, clamp(1.625rem, 1.25rem + 1.55vw, 2.375rem));
  --text-display: var(--hero-title-size, clamp(2.125rem, 1.1rem + 4.1vw, 4.5rem));
  --lh-tight: 1.1;    /* display + headings */
  --lh-snug:  1.25;   /* sub-heads */
  --lh-body:  1.65;   /* body */

  /* ===== SPACING SCALE (4pt base) ===== */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;     --space-7: 3rem;     --space-8: 4rem;  --space-9: 6rem;
  --space-section: clamp(3.5rem, 2rem + 5.5vw, 6.5rem);  /* section padding-block rhythm */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; color: var(--black); text-wrap: balance; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0 0 1rem; padding-left: 1.1rem; }
strong { color: inherit; font-weight: 700; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.accent { color: var(--gold); }
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: .8rem;
}
.section-dark .eyebrow, .cta-band .eyebrow, .hero .eyebrow { color: var(--yellow); }
section { padding: var(--space-section) 0; }
main h2 { text-transform: uppercase; letter-spacing: -.01em; }
.section-light { background: var(--white); }
.section-tint  { background: #f6f6f4; }
#areas { background: #f0f0f0; }
.section-dark  { background: var(--black); color: var(--gray); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-dark .section-head p { color: var(--gray); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: .98rem; letter-spacing: .01em;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* primary — map both the prototype .btn-primary AND the helper .btn--primary */
.btn-primary, .btn--primary { background: var(--yellow); color: var(--black); }
.btn-primary:hover, .btn--primary:hover { background: var(--gold); color: var(--black); }
/* outline — map both .btn-outline AND .btn--outline */
.btn-outline, .btn--outline { border-color: currentColor; color: var(--black); }
.section-dark .btn-outline, .hero .btn-outline, .svc-hero .btn-outline, .cta-band .btn-outline,
.section-dark .btn--outline, .hero .btn--outline, .svc-hero .btn--outline, .cta-band .btn--outline { color: var(--white); }
.btn-outline:hover, .btn--outline:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
/* dark — map both .btn-dark AND .btn--dark */
.btn-dark, .btn--dark { background: var(--black); color: var(--white); }
.btn-dark:hover, .btn--dark:hover { background: var(--asphalt); }
/* ghost — map both .btn-ghost AND .btn--ghost */
.btn-ghost, .btn--ghost { color: var(--gold-text); padding-inline: 0; }
.btn-ghost:hover, .btn--ghost:hover { color: var(--gold-text); }
.section-dark .btn-ghost, .cta-band .btn-ghost,
.section-dark .btn-ghost:hover, .cta-band .btn-ghost:hover,
.section-dark .btn--ghost, .cta-band .btn--ghost,
.section-dark .btn--ghost:hover, .cta-band .btn--ghost:hover { color: var(--yellow); }
.btn-ghost::after, .btn--ghost::after { content: "\2192"; transition: transform .15s ease; }
.btn-ghost:hover::after, .btn--ghost:hover::after { transform: translateX(4px); }

/* ---------- header / nav (legacy single-tier — kept for completeness) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,8,8,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: padding .2s ease, background .2s ease;
}
.site-header.shrink, .site-header.scrolled { background: rgba(8,8,8,.98); }
.nav { display: flex; align-items: center; gap: 28px; padding-block: 16px; transition: padding-block .2s ease; }
.site-header.shrink .nav { padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { height: 42px; width: auto; transition: height .2s ease; }
.site-header.shrink .brand img { height: 36px; }
.brand .brand-name { display:none; }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) {
  color: var(--white); font-weight: 600; font-size: var(--menu-size, .96rem); padding: 6px 0; position: relative;
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"] { color: var(--yellow); }
.nav-links a:not(.btn)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--yellow);
  transition: right .2s ease;
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { right:0; }
/* WP active states: wp_nav_menu marks current items with .current-menu-item / .current_page_item */
.nav-links .current-menu-item > a:not(.btn),
.nav-links .current_page_item > a:not(.btn),
.nav-links .current-menu-ancestor > a:not(.btn) { color: var(--yellow); }
.nav-links .current-menu-item > a:not(.btn)::after,
.nav-links .current_page_item > a:not(.btn)::after,
.nav-links .current-menu-ancestor > a:not(.btn)::after { right: 0; }
/* Dropdown parents (Services) get a chevron - desktop + mobile. Down by default; flips up on
   desktop hover/focus or mobile .open. Repurposes the parent link ::after. */
.nav-links li.menu-item-has-children > a:not(.btn) { padding-right: 22px; }
.nav-links li.menu-item-has-children > a:not(.btn)::after {
  content: ""; position: absolute; left: auto; right: 2px; top: 50%; bottom: auto;
  width: 7px; height: 7px; margin-top: -6px;
  border: solid currentColor; border-width: 0 2px 2px 0; background: none;
  transform: rotate(45deg); transition: transform .2s ease;
}
.nav-links li.menu-item-has-children.open > a:not(.btn)::after { transform: rotate(-135deg); margin-top: -2px; }
@media (hover: hover) and (pointer: fine) {
  .nav-links li.menu-item-has-children:hover > a:not(.btn)::after,
  .nav-links li.menu-item-has-children:focus-within > a:not(.btn)::after { transform: rotate(-135deg); margin-top: -2px; }
}

/* dropdown — prototype .has-dropdown/.dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  min-width: 230px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
}
/* WP-standard menu output: li.menu-item-has-children > ul.sub-menu
   (header renders wp_nav_menu(theme_location=primary, depth=2)) */
.masthead li.menu-item-has-children,
.menubar li.menu-item-has-children,
.nav-links li.menu-item-has-children { position: relative; }
.masthead li.menu-item-has-children > .sub-menu,
.menubar li.menu-item-has-children > .sub-menu,
.nav-links li.menu-item-has-children > .sub-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--charcoal); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  min-width: 230px; box-shadow: var(--shadow); list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 60;
}
/* desktop hover dropdown — gated to pointer devices so touch uses the JS tap-toggle */
@media (hover: hover) and (pointer: fine) {
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .masthead li.menu-item-has-children:hover > .sub-menu,
  .masthead li.menu-item-has-children:focus-within > .sub-menu,
  .menubar li.menu-item-has-children:hover > .sub-menu,
  .menubar li.menu-item-has-children:focus-within > .sub-menu,
  .nav-links li.menu-item-has-children:hover > .sub-menu,
  .nav-links li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  /* transparent bridge across the gap so moving the cursor down keeps :hover */
  .dropdown::before,
  .masthead li.menu-item-has-children > .sub-menu::before,
  .menubar li.menu-item-has-children > .sub-menu::before,
  .nav-links li.menu-item-has-children > .sub-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
  }
}
.dropdown a,
.masthead li.menu-item-has-children > .sub-menu a,
.menubar li.menu-item-has-children > .sub-menu a,
.nav-links li.menu-item-has-children > .sub-menu a {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--gray); font-weight: 600;
}
.dropdown a::after,
.masthead li.menu-item-has-children > .sub-menu a::after,
.menubar li.menu-item-has-children > .sub-menu a::after,
.nav-links li.menu-item-has-children > .sub-menu a::after { display:none; }
.dropdown a:hover,
.masthead li.menu-item-has-children > .sub-menu a:hover,
.menubar li.menu-item-has-children > .sub-menu a:hover,
.nav-links li.menu-item-has-children > .sub-menu a:hover { background: var(--asphalt); color: var(--yellow); }
/* highlight the visible Services parent when a child service page is active */
.has-dropdown:has(a[aria-current="page"]) > .dropdown-parent { color: var(--yellow); }
.has-dropdown:has(a[aria-current="page"]) > .dropdown-parent::after { right: 0; }
.nav-links li.menu-item-has-children.current-menu-ancestor > a:not(.btn),
.nav-links li.menu-item-has-children:has(.current-menu-item) > a:not(.btn) { color: var(--yellow); }
.nav-links li.menu-item-has-children.current-menu-ancestor > a:not(.btn)::after,
.nav-links li.menu-item-has-children:has(.current-menu-item) > a:not(.btn)::after { right: 0; }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone { color: var(--white); font-weight: 800; display: inline-flex; align-items: center; gap: 7px; }
.nav-phone:hover { color: var(--yellow); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--white); margin: 5px 0; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== masthead: two-tier header (white logo bar + black sticky menu) ===== */
.masthead { position: relative; z-index: 60; }
.topbar { background: var(--white); border-bottom: 1px solid rgba(0,0,0,.08); }
.topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: var(--header-height, 0px); padding-block: var(--header-padding, 18px); }
.topbar-contact { display: flex; align-items: center; gap: 14px; color: var(--asphalt); font-weight: 600; font-size: .92rem; }
.topbar-contact a, .topbar-contact span { display: inline-flex; align-items: center; gap: 7px; }
.topbar-contact a:hover { color: var(--gold-text); }
.topbar-contact svg { color: var(--gold); flex: none; }
.topbar-contact .sep { color: rgba(0,0,0,.18); }
.topbar-logo { justify-self: center; }
.topbar-logo img { width: clamp(180px, 19vw, 250px); height: auto; }
.topbar-social { display: flex; justify-content: flex-end; gap: 10px; }
.topbar-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--white); transition: background .2s ease, transform .2s ease, color .2s ease; }
.topbar-social a:hover { background: var(--yellow); color: var(--black); transform: translateY(-2px); }
.menubar { position: sticky; top: 0; z-index: 55; background: var(--black); border-bottom: 3px solid var(--yellow); }
.menubar-inner { display: flex; align-items: center; gap: 24px; min-height: auto; padding-block: 20px; }
.menubar-inner > nav { flex: 1; min-width: 0; }
.menubar .nav-links { gap: 26px; justify-content: center; }
.menubar .nav-links > li > a:not(.btn) { text-transform: var(--menu-text-transform, uppercase); letter-spacing: .04em; font-size: var(--menu-size, .82rem); font-weight: 700; }
.menubar .nav-cta-item { margin-left: 6px; }
.menubar-phone { display: none; align-items: center; gap: 8px; color: var(--white); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.menubar-phone svg { color: var(--yellow); flex: none; }
.menubar-phone:hover { color: var(--yellow); }
/* sticky-scroll shrink: prototype toggles .masthead.scrolled via JS */
.masthead.scrolled .menubar { background: var(--black); }
.masthead.scrolled .menubar-inner { padding-block: 12px; }
@media (max-width: 860px){
  .topbar-inner { min-height: 74px; gap: 10px; }
  .topbar-logo img { width: 140px; }
  .topbar-contact { font-size: .78rem; gap: 8px; }
  .topbar-contact .loc { display: none; }
  .menubar-inner { min-height: 54px; }
}
@media (max-width: 600px){
  .topbar-contact .label { display: none; }
  .topbar-social a { width: 36px; height: 36px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; color: var(--white);
  background: var(--charcoal) center/cover no-repeat;
  min-height: clamp(540px, 78vh, 760px); display: flex; align-items: center;
}
.hero::before {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(105deg, rgba(8,8,8,.93) 0%, rgba(8,8,8,.78) 42%, rgba(8,8,8,.35) 100%);
}
.hero-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(56px, 10vw, 96px); }
.hero-inner { max-width: 720px; }
.hero h1 { color: var(--white); margin-bottom: .35em; }
.hero .tagline { font-weight: 800; color: var(--yellow); letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; margin-bottom: 1rem; }
.hero .lead { font-size: 1.18rem; color: #e9e9e9; max-width: 60ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8rem; }

/* home hero (cleaner, less text) — bottom-left text over full-bleed video/image, Boswell-style */
.home-hero { align-items: flex-end; }
.home-hero::before { background: linear-gradient(to top, rgba(8,8,8,.93) 0%, rgba(8,8,8,.8) 28%, rgba(8,8,8,.5) 52%, rgba(8,8,8,.18) 78%, rgba(8,8,8,.05) 100%); }
.home-hero .wrap { padding-block: clamp(48px,9vw,92px) clamp(46px,7vw,88px); }
.home-hero .hero-inner { max-width: 700px; }
.home-hero .hero-kicker, .home-hero .hero-title, .home-hero .hero-sub { text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--yellow); font-weight: 700; font-size: .92rem; letter-spacing: .02em; margin-bottom: 1.1rem;
}
.hero-kicker::before { content: ""; width: 28px; height: 2px; background: var(--yellow); display: inline-block; }
.hero-title {
  color: var(--white); font-size: var(--text-display); line-height: 1.02;
  letter-spacing: -.02em; text-wrap: balance; text-transform: uppercase; margin: 0 0 1.1rem;
}
.hero-title span { color: var(--yellow); }
.hero-sub { font-size: var(--text-lead); color: #ececec; max-width: 54ch; margin: 0; }
.hero-trust { margin-top: 2.2rem; color: var(--gray); font-weight: 600; font-size: .88rem; }
/* staggered load-in (ends visible; not JS-gated) */
.home-hero .hero-inner > * { animation: heroRise .7s cubic-bezier(.22,1,.36,1) both; }
.home-hero .hero-kicker { animation-delay: .05s; }
.home-hero .hero-title  { animation-delay: .15s; }
.home-hero .hero-sub    { animation-delay: .30s; }
.home-hero .hero-cta    { animation-delay: .45s; }
.home-hero .hero-trust  { animation-delay: .60s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .home-hero .hero-inner > * { animation: none; } }

/* trust bar — clean dark credential strip */
.trust-bar { background: var(--charcoal); border-top: 3px solid var(--yellow); padding: 0; }
.trust-bar .trust-row { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 30px; }
.trust-bar .titem { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 0 16px; position: relative; }
.trust-bar .titem:not(:last-child)::after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:44px; background: rgba(255,255,255,.13); }
.trust-bar .tic { flex:none; color: var(--yellow); display:grid; place-items:center; }
.trust-bar .tic svg { width: 32px; height: 32px; }
.trust-bar .ttx { display:flex; flex-direction:column; align-items:flex-start; text-align:left; line-height:1.3; white-space:nowrap; }
.trust-bar .ttx strong { color: var(--white); font-weight: 800; font-size: .96rem; }
.trust-bar .ttx span { color: var(--gray); font-size: .84rem; }
@media (max-width: 940px){ .trust-bar .trust-row { grid-template-columns: repeat(2,1fr); gap: 26px 0; } .trust-bar .titem:nth-child(2)::after{ display:none; } }
@media (max-width: 460px){ .trust-bar .trust-row { grid-template-columns: 1fr; } .trust-bar .titem{ padding: 0; } .trust-bar .titem::after{ display:none; } }

/* ---------- two-tone split sections (Boswell-style) ---------- */
.bsplit { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 0; }
.bsplit .panel { display: flex; align-items: center; padding: clamp(36px, 6vw, 84px); background: var(--yellow); color: var(--black); }
.bsplit .panel-inner { max-width: 540px; }
.bsplit .panel .eyebrow { color: rgba(8,8,8,.62); }
.bsplit .panel h2 { color: var(--black); margin-bottom: .8rem; }
.bsplit .panel p { color: rgba(8,8,8,.84); }
.bsplit .media { min-height: var(--media-split-height, 440px); background: var(--asphalt) center/cover no-repeat; filter: grayscale(1) contrast(1.04); }
.bsplit.media-left .panel { order: 2; }
.bsplit.media-left .media { order: 1; }
.svc-list { list-style: none; margin: 0 0 1.7rem; padding: 0; }
.svc-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid rgba(8,8,8,.18); color: var(--black); font-weight: 700; }
.svc-list a::after { content: "\2192"; transition: transform .2s ease; }
.svc-list a:hover { color: #2a2925; }
.svc-list a:hover::after { transform: translateX(5px); }
.serve-list { list-style: none; margin: 0 0 1.7rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.serve-list li { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--black); }
.serve-list li::before { content: "\2713"; font-weight: 900; color: var(--black); }
@media (max-width: 520px){ .serve-list { grid-template-columns: 1fr; } }

/* ---------- intro: pavement preservation (premium two-column) ---------- */
.intro2-cols { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(34px, 6vw, 80px); align-items: start; }
.intro2-left { display: flex; flex-direction: column; }
.intro2 .eyebrow { margin-bottom: .6rem; }
.intro2-title { font-size: var(--text-h2); text-transform: uppercase; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.intro2-rule { width: 92px; height: 4px; background: var(--yellow); margin: 1.1rem 0 1.5rem; }
.intro2-subhead { font-weight: 800; font-size: clamp(1.2rem, 1.9vw, 1.55rem); color: var(--black); margin: 0 0 .6rem; }
.intro2-lead { color: #4a4a47; max-width: 42ch; margin: 0 0 2.2rem; }
.feat-row { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 26px; max-width: 460px; }
.feat-row li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.feat-row .ficon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--black); }
.feat-row .ficon svg { width: 30px; height: 30px; }
.feat-row > li > span:last-child { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--asphalt); line-height: 1.35; }
.intro2-body { display: flex; flex-direction: column; }
.intro2-body p { color: #4a4a47; }
.intro2-body .btn { margin-top: 1.4rem; align-self: flex-start; }
.intro2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 16px; margin: 1.8rem 0; padding-top: 1.6rem; border-top: 1px solid rgba(0,0,0,.12); }
.intro2-stats .stat strong { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; color: var(--black); }
.intro2-stats .stat span { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--asphalt); }
@media (max-width: 860px){ .intro2-cols { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 520px){ .feat-row { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } }

/* hero flush-left on wide screens */
.home-hero .wrap, .page-hero .wrap { max-width: var(--maxw); width: 100%; margin-inline: auto; padding-inline: var(--pad); }

/* dark services cards */
.section-dark .card { background: #161616; border-color: rgba(255,255,255,.10); }
.section-dark .card-body p { color: var(--gray); }

/* ---------- testimonials ---------- */
.reviews-section { position: relative; overflow: hidden; background: var(--white); }
.reviews-section::after { content: ""; position: absolute; inset: 0; background: url('../img/reviews-bg.jpg') no-repeat center / cover; opacity: .9; pointer-events: none; z-index: 0; }
.reviews-section .wrap { position: relative; }
.reviews-quote { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 0; font: 900 14rem/.8 Georgia, "Times New Roman", serif; color: rgba(20,20,20,.05); pointer-events: none; }
.reviews-head { max-width: 720px; text-align: center; margin: 0 auto clamp(30px,4vw,48px); position: relative; z-index: 1; }
.reviews { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { position: relative; overflow: hidden; display: flex; flex-direction: column; margin: 0; background: var(--white); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 34px 30px 26px; box-shadow: 0 26px 54px -30px rgba(0,0,0,.3); }
.review > p { font-style: italic; color: #3a3a37; font-size: var(--text-base); line-height: 1.6; margin: 0 0 1.5rem; }
.review .rrule { width: 54px; height: 3px; background: var(--yellow); margin-top: auto; margin-bottom: 1rem; }
.review footer { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.review footer strong { color: var(--black); font-size: 1.05rem; }
.review footer span { color: #8a8a86; font-size: var(--text-sm); }
@media (max-width: 860px){ .reviews { grid-template-columns: 1fr; } .reviews-quote { font-size: 9rem; } }
@media (max-width: 860px){
  .bsplit { grid-template-columns: 1fr; }
  .bsplit.media-left .panel, .bsplit.media-left .media { order: 0; }
  .bsplit .media { min-height: 260px; }
}

/* sub-page slim hero */
.page-hero { padding: clamp(64px,9vw,120px) 0 clamp(48px,7vw,84px); }
.page-hero .breadcrumb { color: var(--gray); font-size:.85rem; margin-bottom:1rem; }
.page-hero .breadcrumb a:hover { color: var(--yellow); }
/* About hero credential badges — aligned with the hero text, spaced below the buttons */
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 1.6rem; }
.hero-badges span { display: inline-flex; align-items: center; gap: 8px; color: #e8e8e8; font-weight: 600; font-size: var(--text-sm); }
.hero-badges svg { color: var(--yellow); flex: none; }

/* ---------- intro / lead row ---------- */
.lead-row { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,64px); align-items:center; }
.lead-text p { font-size: var(--text-lead); }

/* ---------- services grid ---------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.cards.cols-2 { grid-template-columns: repeat(2,1fr); }
.card {
  background: var(--white); border: 1px solid #ececec; border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #e0e0e0; }
.card-media { height: var(--media-card-height, 240px); background: var(--asphalt) center/cover no-repeat; position: relative; }
.card-media .tag {
  position:absolute; left:12px; bottom:12px; background: var(--yellow); color: var(--black);
  font-weight:800; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:6px;
}
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: .35em; }
.card-body p { color: #555; font-size: var(--text-base); flex: 1; }
.card-body .btn-ghost { margin-top: 10px; }

/* ---------- trust strip ---------- */
.trust { background: var(--yellow); color: var(--black); }
.trust-row { display:flex; flex-wrap:wrap; justify-content:center; gap: 14px 40px; text-align:center; }
.trust-row .item { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1rem; }
.trust-row .item svg { flex:none; }

/* ---------- split feature (about teaser / why) ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items:center; }
.split .media { border-radius: var(--radius); overflow:hidden; min-height: var(--media-split-height, 440px); background: var(--asphalt) center/cover; }
.split .media.ph { background-image: repeating-linear-gradient(125deg,#222 0 18px,#1c1c1c 18px 36px); }
.quote-block {
  border-left: 4px solid var(--yellow); padding: 6px 0 6px 22px; margin: 1.2rem 0;
  font-size: 1.18rem; font-style: italic; color: var(--black);
}
.section-dark .quote-block { color: var(--white); }

/* ---------- value/feature list ---------- */
.features { display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
.feature { display:flex; gap:14px; }
.feature .ico { flex:none; width:44px; height:44px; border-radius:10px; background: rgba(244,196,0,.14); color: var(--yellow); display:grid; place-items:center; }
.section-dark .feature .ico { background: rgba(244,196,0,.16); }
.feature h3 { margin-bottom:.25em; font-size:1.05rem; }
.feature p { font-size:.96rem; color:#555; margin:0; }
.section-dark .feature p { color: var(--gray); }

/* ---------- process steps ---------- */
.steps { counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.step { position:relative; padding-top: 8px; }
.step::before {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  font-weight:900; font-size:1.5rem; color: var(--gold); display:block; margin-bottom:.4rem;
}
.step h3 { font-size:var(--text-h4); margin-bottom:.3em; }
.step p { font-size:.93rem; color:#555; margin:0; }
.section-dark .step p { color: var(--gray); }

/* ---------- checks list ---------- */
.checks { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.checks li { position:relative; padding-left: 34px; }
.checks li::before {
  content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23080808' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- areas ---------- */
.areas-grid { display:flex; flex-wrap:wrap; gap:12px; }
.area-chip {
  background: var(--white); border:1px solid #e3e3e3; border-radius:999px; padding:9px 18px; font-weight:700; font-size:.95rem;
}
.section-dark .area-chip { background: var(--charcoal); border-color: var(--line); color: var(--white); }
.area-chip.is-primary { background: var(--yellow); border-color: var(--yellow); color: var(--black); }

/* ---------- comparison table ---------- */
.compare { width:100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.compare th, .compare td { padding: 14px 18px; text-align:left; border-bottom:1px solid #ececec; font-size:.97rem; }
.compare thead th { background: var(--black); color: var(--white); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; }
.compare tbody tr:last-child td { border-bottom:0; }
.compare td:first-child { font-weight:700; color: var(--black); }

/* ---------- FAQ ---------- */
.faq { display:grid; gap: 12px; max-width: 820px; }
.faq details { background: var(--white); border:1px solid #e7e7e7; border-radius: 12px; padding: 4px 20px; }
.section-dark .faq details { background: var(--charcoal); border-color: var(--line); }
.faq summary {
  cursor:pointer; list-style:none; font-weight:700; padding: 16px 30px 16px 0; position:relative; color: var(--black);
}
.section-dark .faq summary { color: var(--white); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:0; top:13px; font-size:1.5rem; color: var(--gold); font-weight:400; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 16px; margin:0; color:#555; }
.section-dark .faq details p { color: var(--gray); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--charcoal); color: var(--white); text-align:center; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--gray); max-width: 56ch; margin-inline:auto; }
.cta-band .hero-cta { justify-content:center; }

/* ---------- quote form ---------- */
.quote-section { background: var(--charcoal); color: var(--white); }
.quote-grid { display:grid; grid-template-columns: .9fr 1.1fr; grid-template-areas: "head form" "info form"; grid-template-rows: min-content 1fr; column-gap: clamp(28px,5vw,56px); row-gap: 1.5rem; align-items:start; }
.quote-head { grid-area: head; }
.quote-grid .form-card { grid-area: form; }
.quote-grid h2 { color: var(--white); }
.quote-grid .lead { color: var(--gray); }
.quote-info { grid-area: info; display:grid; gap:18px; align-self:start; }
.quote-info a { color: var(--white); font-weight:600; }
.quote-info .ln { display:flex; gap:12px; align-items:flex-start; }
.quote-info .ln svg { color: var(--yellow); flex:none; margin-top:3px; }
.form-card { background: var(--white); border-radius: var(--radius); padding: clamp(22px,4vw,36px); box-shadow: var(--shadow); }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.field { margin-bottom:14px; }
.field label { display:block; font-weight:700; font-size:.85rem; color: var(--asphalt); margin-bottom:6px; }
.field input, .field select, .field textarea {
  width:100%; padding:13px 14px; border:1px solid #d7d7d7; border-radius:10px; font:inherit; font-size:.97rem; color: var(--charcoal); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--gold); box-shadow:0 0 0 3px rgba(244,196,0,.25); }
.field textarea { resize:vertical; min-height:90px; height:90px; }
.form-card .btn-primary, .form-card .btn--primary { width:100%; justify-content:center; }
.form-note { font-size:.82rem; color:#777; margin:.8rem 0 0; text-align:center; }
/* Contact Form 7 feedback - the response text was inheriting the dark section white color,
   so it was invisible on the white form card. Give it readable success/error banners. */
.wpcf7-response-output {
  margin: 16px 0 0 !important; padding: 12px 16px !important; border-radius: 10px;
  border-width: 1px !important; font-size: .9rem; font-weight: 600; line-height: 1.45;
  color: var(--charcoal);
}
.wpcf7 form.sent .wpcf7-response-output { color: #15803d; background: #f0fdf4; border-color: #15803d !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { color: #b91c1c; background: #fef2f2; border-color: #dc2626 !important; }
.wpcf7-not-valid-tip { color: #dc2626 !important; font-size: .8rem; font-weight: 600; margin-top: 4px; }
.wpcf7-spinner { margin: 0 0 0 10px; }

/* ---------- footer ---------- */
.site-footer { background: var(--black); color: var(--gray); padding-top: clamp(48px,7vw,80px); border-top: 1px solid rgba(255,255,255,.1); }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px,5vw,56px); }
.site-footer img.flogo { height:60px; width:auto; margin-bottom:1.1rem; background:#fff; border-radius:12px; padding:12px 18px; box-sizing:content-box; }
.site-footer h3 { color: var(--white); font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; }
.site-footer a:hover { color: var(--yellow); }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-contact { display:grid; gap:10px; }
.footer-contact a, .footer-contact span { display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg { color: var(--yellow); flex:none; margin-top:3px; }
.footer-quote { font-style:italic; color: var(--white); border-left:3px solid var(--yellow); padding-left:14px; margin-top:1rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.2); margin-top: clamp(36px,5vw,56px); padding: 22px 0; font-size:.85rem; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
.footer-credit a { color: inherit; text-decoration: none; font-weight: 600; }
.footer-credit a:hover { color: var(--yellow); }

/* ---------- scroll reveal ---------- */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .cards, .cards.cols-2 { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .lead-row, .split, .quote-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-areas: "head" "form" "info"; grid-template-rows: none; }
  .features { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    background: var(--charcoal); flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 90px 28px 28px; transform: translateX(100%); transition: transform .28s ease; box-shadow: var(--shadow);
  }
  .nav-links.open { transform: none; }
  .nav-links a:not(.btn) { width:100%; font-size:1.05rem; padding:10px 0; }
  /* prototype dropdown: stacked + JS-toggled */
  .dropdown { position: static; transform:none; opacity:1; visibility:visible; box-shadow:none; background:transparent; border:0; padding:4px 0 4px 12px; min-width:0; display:none; }
  .has-dropdown.open .dropdown { display:block; transform:none; opacity:1; visibility:visible; }
  /* WP-standard sub-menu: same stacked + JS-toggled behaviour on mobile */
  .nav-links li.menu-item-has-children > .sub-menu,
  .masthead li.menu-item-has-children > .sub-menu,
  .menubar li.menu-item-has-children > .sub-menu {
    position: static; transform:none; opacity:1; visibility:visible; box-shadow:none; background:transparent; border:0; padding:4px 0 4px 12px; min-width:0; display:none;
  }
  .nav-links li.menu-item-has-children.open > .sub-menu,
  .masthead li.menu-item-has-children.open > .sub-menu,
  .menubar li.menu-item-has-children.open > .sub-menu { display:block; transform:none; opacity:1; visibility:visible; }
  .nav-toggle { display:block; z-index: 60; }
  .menubar-phone { display: inline-flex; }
  .topbar-contact { visibility: hidden; }
  .topbar-social { display: none; }
  .nav-phone { padding:8px; min-width:44px; min-height:44px; justify-content:center; }
  .nav-phone span { display:none; }
  .cards, .cards.cols-2, .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

/* Services grid heading centered (sits under full-width split) */
#services .section-head { text-align: center; margin-inline: auto; }

/* ===== Feature box: single-row "why it lasts" strip (before testimonials) ===== */
/* collapse double gap: intro's bottom padding is removed so the feature box's top padding is the only gap */
.intro2 { padding-bottom: 0; }
.feat-strip-section { padding-block: clamp(38px, 6vw, 72px); }
.feat-strip { list-style: none; margin: 0; padding: clamp(26px, 3vw, 40px) clamp(12px, 2vw, 28px); display: grid; grid-template-columns: repeat(4, 1fr); background: #f0f0f0; border-radius: 18px; }
.feat-strip li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px clamp(14px, 2.2vw, 32px); }
.feat-strip li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 56%; background: rgba(8,8,8,.14); }
.feat-strip .fs-ico { flex: none; display: grid; place-items: center; color: #1a1a1a; }
.feat-strip .fs-ico svg { width: 34px; height: 34px; }
.feat-strip .fs-label { font-weight: 700; font-size: .97rem; line-height: 1.3; letter-spacing: .01em; text-transform: uppercase; color: var(--black); }
.intro2-left .intro2-lead { font-size: var(--text-lead); line-height: 1.65; color: #3a3a37; max-width: 46ch; margin: 0; }
.intro2-cta { margin-top: 1.6rem; align-self: flex-start; }
@media (max-width: 760px){
  .feat-strip { grid-template-columns: repeat(2, 1fr); }
  .feat-strip li::before { display: none; }
  .feat-strip li { padding: 18px 12px; }
}

/* Footer social icons (replaces the old quote) */
.footer-social { display: flex; gap: 10px; margin-top: 1.2rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--white); transition: background .2s ease, color .2s ease, transform .2s ease; }
.footer-social a:hover { background: var(--yellow); color: var(--black); transform: translateY(-2px); }

/* ===== Service page: centered hero banner (Boswell-style) ===== */
.svc-hero { position: relative; display: grid; place-items: center; text-align: center; min-height: clamp(320px, 42vw, 500px); overflow: hidden; background: var(--charcoal) center/cover no-repeat; color: var(--white); border-bottom: 3px solid var(--yellow); }
.svc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(8,8,8,.5), rgba(8,8,8,.72)); z-index: 1; }
.svc-hero > .wrap { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.svc-hero .breadcrumb { color: var(--gray); font-size: var(--text-sm); margin: 0 0 1rem; }
.svc-hero .breadcrumb a:hover { color: var(--yellow); }
.svc-hero .eyebrow { color: var(--yellow); }
.svc-hero h1 { color: var(--white); margin: 0 0 .55rem; text-transform: uppercase; }
.svc-hero .lead { color: #ececec; max-width: 46ch; margin: 0 auto; font-size: var(--text-lead); }
.svc-hero .hero-cta { justify-content: center; margin-top: 1.8rem; }

/* ===== Service: alternating image + text rows ===== */
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.svc-media { border-radius: 16px; overflow: hidden; height: var(--media-service-height, 440px); box-shadow: var(--shadow); background: var(--asphalt) center/cover no-repeat; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-copy .eyebrow { margin-bottom: .55rem; }
.svc-copy h2 { margin: 0 0 .7rem; }
.svc-copy > p { margin: 0 0 1.05rem; max-width: 56ch; }
.svc-copy h3 { margin: 1.5rem 0 .4rem; }
.section-dark .svc-copy h3 { color: var(--white); }
.svc-copy .hero-cta { margin-top: 1.6rem; }
@media (max-width: 860px){
  .svc-row { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2rem); }
  .svc-media { height: auto; aspect-ratio: 16 / 10; }   /* height:auto so aspect-ratio governs (natural wide image, not a 440px crop) */
  .svc-row .svc-media { order: 1; }            /* default: text first on mobile (heading orients the reader) */
  .svc-row--mimg .svc-media { order: -1; }     /* per-row override: Mobile Order = Image first */
}

/* ────────────────────────────────────────────────
 *  Child port reconciliation — classes introduced when
 *  porting the static prototype into WordPress markup.
 * ──────────────────────────────────────────────── */

/* Breadcrumb (idacoat_breadcrumb) — used in the about/contact dark page-hero. */
.crumb { font-size: var(--text-sm); color: var(--gray); margin: 0 0 1rem; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; }
.crumb li { display: inline-flex; align-items: center; }
.crumb li:not(:last-child)::after { content: "/"; margin-left: .45rem; color: var(--gray); opacity: .55; }
.crumb a { color: var(--gray); text-decoration: none; }
.crumb a:hover { color: var(--yellow); }
.crumb [aria-current="page"] { color: #fff; }

/* "Next: …" link below the service CTA band. */
.cta-next { margin-top: 1.5rem; }
.cta-next a { color: var(--yellow); font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.cta-next a:hover { text-decoration: underline; }

/* Review star rating (added for the ACF rating field). */
.stars { display: inline-flex; gap: 3px; color: var(--gold); margin-bottom: .75rem; }
.stars svg { width: 18px; height: 18px; }

/* Footer logo link wrapper (the white badge styling lives on .flogo). */
.flogo-link { display: inline-block; line-height: 0; }

/* Service hero is centered → center its breadcrumb too (page-hero stays left). */
.svc-hero .breadcrumb { display: flex; justify-content: center; }
.svc-hero .crumb ol { justify-content: center; }


/* Clickable service cards: whole card links to the service page (visible Learn more link stretched via ::after). */
.card { position: relative; }
.card .btn-ghost::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Touch devices: drop the :hover lift so the first tap opens the card. */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; border-color: #ececec; }
}

/* Mobile media heights: Customizer image-height vars are desktop values, so shrink on phones. */
@media (max-width: 760px) {
  .card-media   { height: 200px; }
  .split .media { min-height: 240px; }
}