/*!
 * Kitchen LP styles.
 * Ported from mockup-v2/site.css + the inline <style> block in mockup-v2/_template.php
 * so the cream design lives inside the theme and loads through wp_enqueue_scripts.
 * Previously these were hardcoded <link>/<style> tags in a template that exited
 * before wp_footer, which is why plugin shortcodes could not be embedded.
 */

/* ===================== shared: site.css ===================== */
:root{
  --cream:#F2EDE4;
  --cream-soft:rgba(242,237,228,.92);
  --cream-deep:#EAE3D6;
  --ink:#1A1714;
  --ink-soft:rgba(26,23,20,.7);
  --ink-mute:rgba(26,23,20,.55);
  --bronze:#9B7B4A;
  --bronze-light:#B89366;
  --bronze-pale:rgba(155,123,74,.18);
  --stone:#7A7164;
  --hairline:rgba(26,23,20,.12);
  --hairline-strong:rgba(26,23,20,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',system-ui,sans-serif;font-weight:400;line-height:1.65;font-size:16px}
::selection{background:var(--bronze);color:var(--cream)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

header{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;transition:padding .3s ease, background-color .35s ease;background:rgba(26,23,20,.78);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(155,123,74,.18)}
header.scrolled{background:rgba(26,23,20,.94);border-bottom-color:rgba(155,123,74,.32);padding:13px 48px}
.hamburger span{background:var(--cream)!important}
nav.menu{display:flex;gap:36px;align-items:center}
nav.menu a{font-family:'Inter';font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);position:relative;padding:6px 0}
nav.menu a::after{background:var(--bronze-light)!important}
nav.menu a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze);transition:right .35s cubic-bezier(.22,1,.36,1)}
nav.menu a:hover::after{right:0}
header.scrolled nav.menu a{color:var(--cream)}
.header-right{display:flex;align-items:center;gap:28px}
/* 700, not 500: this is the action every LP is trying to get taken, and it sits
   beside ghost links that were reading at nearly the same weight. Matches what
   .avp-btn-primary already does inside the visualizer modal. */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--bronze);color:var(--cream);font-family:'Inter';font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:13px 22px;border:0;cursor:pointer;transition:background-color .2s ease,transform .2s ease}
.btn-primary:hover{background:var(--bronze-light)}
.btn-primary .arrow{transition:transform .25s ease;font-size:14px}
.btn-primary:hover .arrow{transform:translateX(4px)}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-mark{height:42px;width:auto;display:block}
.logo-text{font-family:'Fraunces';font-weight:400;font-size:18px;letter-spacing:.18em;color:var(--ink);line-height:1}
.logo-text small{display:block;font-family:'Inter';font-size:8px;letter-spacing:.32em;color:var(--stone);font-weight:500;margin-top:4px}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:36px;height:36px}
.hamburger span{display:block;width:22px;height:1px;background:var(--ink);margin:6px 0;transition:transform .3s,opacity .3s}

.eyebrow{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze)}
.ghost-link{display:inline-flex;align-items:center;gap:10px;font-family:'Inter';font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--ink);transition:color .2s ease,border-color .2s ease}
.ghost-link:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
.ghost-link .arrow{transition:transform .25s ease}
.ghost-link:hover .arrow{transform:translateX(4px)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}

@keyframes imgIn{to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{to{opacity:.55}}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1240px;margin:0 auto}
/* default, not pointer: the cards are not links (see page-kitchen-lp.php), and a
   hand cursor on something that does nothing reads as a broken link. */
.project-card{display:block;cursor:default}
.project-card .img-wrap{aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep);position:relative;background-size:cover;background-position:center;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.project-card:hover .img-wrap{transform:scale(1.02)}
.project-meta{padding-top:20px}
.project-meta .scope{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.project-meta .name{margin-top:8px;font-family:'Fraunces';font-weight:400;font-size:22px;line-height:1.25;color:var(--ink)}
.project-meta .place{margin-top:6px;font-family:'Inter';font-size:13px;color:var(--ink-soft)}

.s-talk{background:var(--cream);padding:160px 48px 144px;text-align:center}
.s-talk .eyebrow{display:block;margin-bottom:32px}
.s-talk h2{font-family:'Fraunces';font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-0.02em;color:var(--ink);max-width:760px;margin:0 auto}
.s-talk h2 em{font-style:italic;color:var(--bronze);font-weight:300}
.s-talk p.lead{margin:28px auto 64px;font-family:'Inter';font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:520px}
.talk-form{max-width:640px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;text-align:left}
.talk-form .field{position:relative;border-bottom:1px solid var(--hairline-strong);padding:18px 0}
.talk-form .field.full{grid-column:1 / -1}
.talk-form .field input,.talk-form .field select,.talk-form .field textarea{width:100%;border:0;background:transparent;outline:0;font-family:'Inter';font-size:16px;color:var(--ink);padding:6px 0 0;-webkit-appearance:none;appearance:none;border-radius:0}
.talk-form .field textarea{resize:vertical;min-height:60px;font-family:'Inter'}
.talk-form .field label{font-family:'Inter';font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:0}
.talk-form .field input:focus,.talk-form .field select:focus,.talk-form .field textarea:focus{border-bottom-color:var(--bronze)}
.talk-form .submit{margin-top:40px;align-self:center;grid-column:1 / -1;justify-self:center}
.talk-form .form-msg{grid-column:1 / -1;margin-top:18px;font-size:13px;text-align:center;font-family:'Inter';color:var(--ink-soft)}
.talk-form .form-msg.error{color:#a83232}
.talk-success{display:none;text-align:center;padding:48px 24px;max-width:520px;margin:0 auto}
.talk-success.show{display:block}
.talk-success h3{font-family:'Fraunces';font-weight:300;font-size:32px;color:var(--bronze);margin:0 0 14px;letter-spacing:-0.01em}
.talk-success p{font-family:'Inter';font-size:15px;line-height:1.6;color:var(--ink-soft)}
@media (max-width:640px){.talk-form{grid-template-columns:1fr;gap:0}}
.talk-form .submit{margin-top:40px;align-self:center}

footer{background:var(--ink);color:var(--cream);padding:96px 48px 48px}
/* Three columns, not four: the Services column was removed with the sibling-service
   grid, so the brand block takes the slack rather than leaving a hole on the right. */
footer .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;max-width:1240px;margin:0 auto}
footer h4{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze-light);margin-bottom:24px}
footer ul{list-style:none}
footer li{margin-bottom:12px}
footer a{font-family:'Inter';font-size:14px;color:var(--cream);opacity:.78;transition:opacity .2s ease}
footer a:hover{opacity:1}
footer .brand p{margin-top:20px;font-family:'Fraunces';font-style:italic;font-size:18px;line-height:1.4;color:var(--cream);opacity:.85;max-width:280px}
footer .legal{margin-top:80px;padding-top:32px;border-top:1px solid rgba(242,237,228,.18);max-width:1240px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);opacity:.55}
/* Privacy / Terms. Inherits the legal bar's uppercase 11px treatment; underlined on
   hover only, so it reads as fine print rather than a third navigation row. */
footer .legal .legal-links{display:flex;gap:24px;flex-wrap:wrap}
footer .legal .legal-links a{color:var(--cream);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s ease,opacity .25s ease}
footer .legal .legal-links a:hover,footer .legal .legal-links a:focus-visible{border-bottom-color:currentColor}
.footer-logo{height:30px;width:auto}

@media (max-width:1000px){
  .projects-grid{grid-template-columns:1fr;gap:40px}
  footer .grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:640px){
  header{padding:14px 22px}
  /* Mobile nav drawer */
  nav.menu{
    display:none; position:fixed; top:64px; left:0; right:0;
    background:rgba(26,23,20,.98); padding:24px;
    flex-direction:column; gap:0; align-items:stretch;
    border-bottom:1px solid rgba(155,123,74,.32);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  nav.menu.open{display:flex}
  nav.menu a{padding:16px 0;border-bottom:1px solid rgba(242,237,228,.12);font-size:13px;letter-spacing:.22em}
  nav.menu a:last-child{border-bottom:0}
  .header-right{gap:14px}
  /* Hide topbar See It First on mobile (irrelevant arrow) */
  header .header-right .btn-primary{display:none}
  .hamburger{display:block;order:-1}
  .logo-text{font-size:15px}
  .logo-text small{display:none}
  .logo-mark{height:30px}
  .s-talk{padding:80px 24px}
  footer{padding:72px 24px 32px}
  footer .grid{grid-template-columns:1fr;gap:32px}
  footer .legal{flex-direction:column;align-items:flex-start;gap:14px;text-align:left}
  /* Niche CTA centered on mobile */
  .avp-niche-meta{align-items:center;text-align:center}
  .avp-niche-cta{justify-content:center;align-self:center;margin-top:12px;padding:12px 18px;border:1px solid var(--bronze);color:var(--bronze)}
}

.dev-tag{position:fixed;right:14px;bottom:14px;z-index:99;font-family:'Inter';font-size:10px;letter-spacing:.2em;background:var(--ink);color:var(--cream);padding:8px 12px;text-transform:uppercase;opacity:.5}


/* === ACE Live points (global) === */
.live-points{margin-top:40px;list-style:none;padding:0}
.live-points li{padding:18px 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:170px 1fr;align-items:baseline;gap:24px}
.live-points li:last-child{border-bottom:1px solid var(--hairline)}
.live-points .lbl{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);align-self:center}
.live-points .val{font-family:'Fraunces';font-weight:400;font-size:18px;color:var(--ink)}
@media (max-width:640px){
  .live-points li{grid-template-columns:130px 1fr;gap:16px;padding:16px 0}
  .live-points .val{font-size:16px}
}


/* === Services submenu (dropdown desktop, accordion mobile) === */
nav.menu .menu-item{position:relative;display:flex;align-items:center}
nav.menu .menu-item.has-submenu > .menu-trigger{display:inline-flex;align-items:center;gap:6px}
nav.menu .menu-item .caret{font-size:10px;line-height:1;transition:transform .25s ease;color:var(--bronze-light)}
nav.menu .submenu{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(8px);
  background:rgba(26,23,20,.97); padding:8px 0; min-width:260px;
  display:flex; flex-direction:column; gap:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  border-top:2px solid var(--bronze);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  z-index:60;
}
nav.menu .submenu a{
  padding:13px 22px; font-family:'Inter'; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
  border-bottom:1px solid rgba(242,237,228,.08); white-space:nowrap; text-align:left;
}
nav.menu .submenu a::after{display:none !important}
nav.menu .submenu a:last-child{border-bottom:0}
nav.menu .submenu a:hover{color:var(--bronze-light); background:rgba(155,123,74,.10)}
nav.menu .submenu .submenu-all{color:var(--bronze-light); font-weight:600}
@media (min-width:641px){
  nav.menu .menu-item.has-submenu:hover .submenu,
  nav.menu .menu-item.has-submenu:focus-within .submenu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  nav.menu .menu-item.has-submenu:hover .caret,
  nav.menu .menu-item.has-submenu:focus-within .caret{transform:rotate(180deg)}
}

@media (max-width:640px){
  nav.menu .menu-item{flex-direction:column;align-items:stretch;width:100%}
  nav.menu .menu-item .menu-trigger{
    padding:16px 0;border-bottom:1px solid rgba(242,237,228,.12);
    font-size:13px;letter-spacing:.22em;
    display:flex;align-items:center;justify-content:space-between;
  }
  nav.menu .submenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border-top:0;box-shadow:none;padding:0;min-width:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  nav.menu .menu-item.open .submenu{max-height:600px}
  nav.menu .submenu a{
    padding:14px 16px;font-size:12px;color:var(--cream);opacity:.85;
    border-bottom:1px solid rgba(242,237,228,.08);background:rgba(0,0,0,.18);
  }
  nav.menu .menu-item.open .caret{transform:rotate(180deg)}
}


/* === MOBILE-FIRST FOUNDATION (added 2026-05-05) ============================
   Mobile is the baseline. Desktop enhancements are gated by min-width queries.
   This block intentionally lives at the END to win the cascade where needed,
   without rewriting the original rules above (revertible).
   =========================================================================*/

/* --- 0. CSS supports: viewport units that respect mobile chrome --- */
:root{
  --vh: 1vh;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --tap-min: 48px;
}

/* --- 1. Tap highlight + touch behavior --- */
html{
  -webkit-tap-highlight-color: rgba(155,123,74,.18);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
a, button, [role=button]{
  touch-action: manipulation;
}

/* --- 2. Focus-visible ring (accessibility) --- */
*:focus{ outline: none; }
*:focus-visible{
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 1px;
}
nav.menu a:focus-visible,
.btn-primary:focus-visible,
.ghost-link:focus-visible{
  outline-offset: 4px;
}

/* --- 3. Reduced motion guard --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{opacity:1; transform:none}
}

/* --- 4. Form fields: 48px min-height + 16px font (iOS auto-zoom guard) --- */
input, select, textarea, button{
  font-size: 16px;
}
.talk-form .field input,
.talk-form .field select,
.talk-form .field textarea{
  min-height: 28px;
  font-size: 16px;
}
.talk-form .field{
  min-height: var(--tap-min);
}
.talk-form .submit,
.btn-primary{
  min-height: var(--tap-min);
}

/* --- 5. Project cards: portrait 3:4 on mobile, 4:5 on desktop --- */
.project-card .img-wrap{ aspect-ratio: 3 / 4; }
@media (min-width: 641px){
  .project-card .img-wrap{ aspect-ratio: 4 / 5; }
}

/* --- 6. Container paddings honor safe-area on mobile --- */
@media (max-width: 640px){
  header{
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }
  footer{
    padding-bottom: calc(32px + var(--safe-bottom));
  }
}

/* --- 7. Hamburger min tap target (was 36x36) --- */
.hamburger{
  width: var(--tap-min);
  height: var(--tap-min);
  display: none; /* shown on mobile via existing rule */
  align-items: center;
  justify-content: center;
}

/* --- 8. Mobile nav drawer: smooth open + lock body scroll handled by JS --- */
@media (max-width: 640px){
  nav.menu{
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
  }
  nav.menu.open{
    transform: translateY(0);
    opacity: 1;
  }
  nav.menu a, nav.menu .menu-trigger{
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
  }
}

/* --- 9. Body lock when drawer is open (JS toggles .nav-open on body) --- */
body.nav-open{
  overflow: hidden;
}

/* --- 10. Disable hover-only effects on touch (no sticky-hover state) --- */
@media (hover: none){
  .project-card:hover .img-wrap{ transform: none; }
  .ghost-link:hover{ color: inherit; border-bottom-color: inherit; }
}

/* --- 11. Selection consistency --- */
::-moz-selection{ background: var(--bronze); color: var(--cream); }

/* === MOBILE STICKY CTA BAR ===============================================
   New: was missing in cream production. Bronze CTAs anchored above safe-area.
   Markup expected (injected via shared site.js or inline at end of body):
     <div class=m-cta role=region aria-label=Quick contact>
       <a class=m-cta-btn m-cta-call href=tel:+13104386866>Call Now</a>
       <a class=m-cta-btn m-cta-quote href=/contact/>Free Quote</a>
     </div>
   ========================================================================= */
.m-cta{
  display: none;
}
@media (max-width: 640px){
  .m-cta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    background: var(--ink);
    border-top: 1px solid rgba(155,123,74,.32);
    padding-bottom: var(--safe-bottom);
    transform: translateY(0);
    transition: transform .25s ease;
  }
  body.nav-open .m-cta,
  body.kbd-open .m-cta{
    transform: translateY(110%);
  }
  /* text-align matters even though this is a centred flex container: the label is
     an anonymous text item and the arrow is a ::after item, so a label too wide to
     fit takes the whole row, wraps, and renders start-aligned while the arrow is
     pushed to the far edge. That is what "Free AI Leak Check" did at 375px. */
  .m-cta-btn{
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    padding: 0 10px;
    font-family: 'Inter';
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    border: 0;
  }
  .m-cta-call{
    background: rgba(242,237,228,.06);
    border-right: 1px solid rgba(155,123,74,.22);
  }
  .m-cta-call::before{
    content: '\2706'; /* phone glyph */
    margin-right: 10px;
    font-size: 14px;
    color: var(--bronze-light);
  }
  /* The free option is the one we want taken, so it carries the weight. The
     tighter tracking is what buys the single line: at .22em the longest label
     ("Free AI Leak Check") overflows a 187px half-bar and wraps. */
  .m-cta-quote{
    background: var(--bronze);
    color: var(--cream);
    font-weight: 700;
    letter-spacing: .08em;
  }
  .m-cta-quote::after{
    content: '\2192';
    margin-left: 8px;
    font-size: 14px;
  }
  /* Compensate body so content isn't hidden behind the bar */
  body{
    padding-bottom: calc(56px + var(--safe-bottom));
  }
}

/* === END MOBILE-FIRST FOUNDATION ========================================= */

/* ============ service page sections (from _template.php) ============ */
/* Full viewport. svh is listed second so browsers that support it win: on mobile,
   100vh measures the tallest layout (URL bar hidden) and crops the bottom strip. */
.svc-hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--ink)}
.svc-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.05) 80%),linear-gradient(to right,rgba(0,0,0,.45),rgba(0,0,0,.05) 55%)}
/* Raised from 96px to clear .hero-foot, which now sits along the bottom of the hero. */
.svc-hero .content{position:absolute;left:48px;bottom:150px;z-index:2;max-width:780px;color:var(--cream)}

/* Bottom rail: credentials on the left, scroll cue on the right. */
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 48px 32px}
.hero-cred,.hero-scroll{font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--cream)}
/* fadeUpDim, not fadeUp: this rail is supporting detail and settles at 60%, where
   fadeUp would land it at full opacity and let it compete with the headline. */
@keyframes fadeUpDim{to{opacity:.6;transform:translateY(0)}}
.hero-cred{opacity:0;transform:translateY(8px);padding-bottom:2px;animation:fadeUpDim .9s cubic-bezier(.22,1,.36,1) 1.7s forwards}
.hero-scroll{display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(8px);text-decoration:none;transition:opacity .3s ease;animation:fadeUpDim .9s cubic-bezier(.22,1,.36,1) 1.85s forwards}
.hero-scroll:hover,.hero-scroll:focus-visible{opacity:1}
.hero-scroll i{display:block;width:1px;height:52px;transform-origin:top;background:linear-gradient(to bottom,rgba(242,237,228,.85),rgba(242,237,228,0));animation:heroScrollCue 2.6s ease-in-out 2.4s infinite}
@keyframes heroScrollCue{0%,100%{transform:scaleY(.55);opacity:.45}50%{transform:scaleY(1);opacity:1}}
.svc-hero .crumbs{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--cream);opacity:.78;margin-bottom:24px;opacity:0;transform:translateY(8px);animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .9s forwards}
.svc-hero .crumbs a{color:inherit;border-bottom:1px solid rgba(242,237,228,.4)}
.svc-hero h1{font-family:'Fraunces';font-weight:300;font-size:clamp(40px,6vw,80px);line-height:1.04;letter-spacing:-0.02em;color:var(--cream);opacity:0;transform:translateY(16px);animation:fadeUp 1s cubic-bezier(.22,1,.36,1) 1.05s forwards}
.svc-hero h1 em{font-style:italic;font-weight:300;color:#E8DCC4}
.svc-hero p{margin-top:28px;font-family:'Inter';font-size:15px;line-height:1.7;max-width:560px;opacity:.88;color:var(--cream);opacity:0;transform:translateY(12px);animation:fadeUp .9s cubic-bezier(.22,1,.36,1) 1.4s forwards}

.svc-vis{background:var(--cream);padding:144px 48px;text-align:center}
.svc-vis .eyebrow{display:block;margin-bottom:32px}
.svc-vis h2{font-family:'Fraunces';font-weight:300;font-size:clamp(30px,4.6vw,58px);line-height:1.1;letter-spacing:-0.02em;color:var(--ink);max-width:880px;margin:0 auto}
.svc-vis h2 em{font-style:italic;color:var(--bronze);font-weight:300}
.svc-vis .btn-primary{margin-top:48px}
.svc-transform{background:var(--cream-deep);padding:120px 48px}
.svc-transform .inner{max-width:1240px;margin:0 auto;text-align:center}
.svc-transform .eyebrow{display:block;margin-bottom:24px}
.svc-transform h2{font-family:'Fraunces';font-weight:300;font-size:clamp(28px,4.4vw,52px);line-height:1.1;letter-spacing:-0.02em;color:var(--ink);margin:0 0 18px}
.svc-transform h2 em{font-style:italic;color:var(--bronze);font-weight:300}
.svc-transform .lead{font-family:'Inter';font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:600px;margin:0 auto 56px}
.ba-slider{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:8px;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:var(--cream-deep);box-shadow:0 16px 48px rgba(26,23,20,.12);max-width:1100px;margin:0 auto 56px;touch-action:pan-y}
.ba-slider .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-drag:none}
.ba-slider .ba-before{clip-path:inset(0 50% 0 0);will-change:clip-path}
.ba-slider .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 24px rgba(0,0,0,.25);will-change:left}
.ba-slider .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:0 6px 20px rgba(0,0,0,.30),0 0 0 1px rgba(0,0,0,.06);font-family:'Inter',sans-serif;font-size:18px;color:#1A1714;font-weight:600}
.ba-slider .ba-knob span{display:inline-block;line-height:1;padding:0 1px}
.ba-slider .ba-label{position:absolute;top:18px;background:rgba(26,23,20,.85);color:#F2EDE4;padding:7px 14px;font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;border-radius:4px;backdrop-filter:blur(8px);pointer-events:none}
.ba-slider .ba-label-before{left:18px}
.ba-slider .ba-label-after{right:18px;background:#9B7B4A;color:#1A1714}
/* On a phone the two pills are ~110px each inside a ~340px slider, and with the
   drag knob parked mid-frame they meet in the middle and read as one smudged word.
   Shrinking the type and the insets buys back the gap; the labels stay legible
   because they are two words, not a sentence. */
@media (max-width: 640px){
  .ba-slider .ba-label{top:10px;padding:5px 9px;font-size:9px;letter-spacing:.14em}
  .ba-slider .ba-label-before{left:10px}
  .ba-slider .ba-label-after{right:10px}
}
.ba-slider .ba-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(26,23,20,.55);padding:6px 12px;border-radius:4px;pointer-events:none;backdrop-filter:blur(6px);transition:opacity .4s}
.ba-slider.ba-touched .ba-hint{opacity:0}
@media (max-width:760px){.ba-slider{aspect-ratio:4/5}.ba-slider .ba-knob{width:44px;height:44px}}
/* The bath pair is square (1024x1024); the kitchen pair is 16:10. Cover-cropping a
   square into 16/10 eats the ceiling and most of the floor, and the floor tile is
   half of what changes between the two frames, so this variant runs shallower.
   Must stay below the rule above so the mobile override wins. */
.ba-slider--square{aspect-ratio:4/3;max-width:940px}
@media (max-width:760px){.ba-slider--square{aspect-ratio:1/1}}
.svc-transform .stats-row{display:flex;justify-content:center;gap:60px;margin:0 auto 48px;flex-wrap:wrap}
.svc-transform .stat{text-align:center}
.svc-transform .stat .n{font-family:'Fraunces';font-weight:300;font-size:48px;line-height:1;color:var(--bronze);letter-spacing:-0.02em;margin-bottom:8px}
.svc-transform .stat .l{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
@media (max-width:760px){
  .svc-transform{padding:80px 20px}
  .svc-transform .ba-pair{grid-template-columns:1fr;gap:10px}
  .svc-transform .stats-row{gap:32px}
  .svc-transform .stat .n{font-size:36px}
}

.svc-projects{background:var(--cream);padding:48px 48px 144px}
.svc-projects .head{max-width:1240px;margin:0 auto 64px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.svc-projects .head h2{font-family:'Fraunces';font-weight:300;font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-0.015em;color:var(--ink);max-width:520px}

.svc-la{background:var(--cream-deep);padding:144px 48px}
.svc-la .grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;max-width:1240px;margin:0 auto;align-items:center}
.svc-la .text .eyebrow{display:block;margin-bottom:28px}
.svc-la .text h2{font-family:'Fraunces';font-weight:300;font-size:clamp(28px,3.8vw,46px);line-height:1.15;letter-spacing:-0.015em;color:var(--ink)}
.svc-la .text h2 em{font-style:italic;color:var(--bronze);font-weight:300}
.svc-la .text p{margin-top:28px;font-family:'Inter';font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:520px}
.svc-la .tags{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.svc-la .tags span{font-family:'Inter';font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--bronze-pale);padding:8px 14px}

.svc-price{background:var(--ink);color:var(--cream);padding:144px 48px}
.svc-price .inner{max-width:1240px;margin:0 auto}
.svc-price .top{margin-bottom:64px;max-width:580px}
.svc-price .eyebrow{color:var(--bronze-light)}
.svc-price h2{font-family:'Fraunces';font-weight:300;font-size:clamp(28px,3.8vw,46px);line-height:1.1;letter-spacing:-0.015em;color:var(--cream);margin-top:24px}
.svc-price h2 em{font-style:italic;color:var(--bronze-light);font-weight:300}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(242,237,228,.18)}
.price-row{display:flex;justify-content:space-between;align-items:baseline;padding:24px 0;border-bottom:1px solid rgba(242,237,228,.18)}
.price-row .lbl{font-family:'Inter';font-size:13px;letter-spacing:.04em;color:var(--cream);opacity:.72}
.price-row .val{font-family:'Fraunces';font-weight:300;font-size:28px;letter-spacing:-0.01em;color:var(--cream)}
.price-grid .price-row:nth-child(odd){padding-right:32px;border-right:1px solid rgba(242,237,228,.18)}
.price-grid .price-row:nth-child(even){padding-left:32px}

.svc-faq{background:var(--cream);padding:144px 48px}
.svc-faq .inner{max-width:880px;margin:0 auto}
.svc-faq .top{margin-bottom:48px}
.svc-faq h2{font-family:'Fraunces';font-weight:300;font-size:clamp(28px,3.8vw,46px);line-height:1.1;letter-spacing:-0.015em;color:var(--ink);margin-top:16px}
.svc-faq details{border-top:1px solid var(--hairline);padding:28px 0}
.svc-faq details:last-of-type{border-bottom:1px solid var(--hairline)}
.svc-faq summary{font-family:'Fraunces';font-weight:400;font-size:22px;line-height:1.3;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;transition:color .25s ease}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{content:'+';font-family:'Inter';font-weight:400;font-size:24px;color:var(--bronze);line-height:1;flex-shrink:0;transition:transform .35s ease}
.svc-faq details[open] summary::after{transform:rotate(45deg)}
.svc-faq details:hover summary{color:var(--bronze)}
.svc-faq details p{margin-top:16px;font-family:'Inter';font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:680px}

/* The .svc-other / .other-grid / .other-cell rules that lived here styled the
   "Other things we do" grid. That section was removed from the kitchen LP, so
   the rules went with it. mockup-v2/site.css still carries its own copies for
   the legacy pages — this file is enqueued for page-kitchen-lp.php only. */

@media (max-width:1000px){
  .svc-la .grid{grid-template-columns:1fr;gap:48px}
  .price-grid{grid-template-columns:1fr}
  .price-grid .price-row:nth-child(odd),.price-grid .price-row:nth-child(even){padding:24px 0;border-right:0}
}
@media (max-width:640px){
  /* min-height, never a fixed height. The hero used height:100svh with the text
     absolutely centred inside it, which meant the text block had no relationship
     to the two fixed bands it shares the screen with — the 59px header above and
     the credential rail + 56px .m-cta bar below. Once the block's own height
     passed the free space (a 320px phone, longer copy, or Android/iOS font
     scaling — 1.15x is enough on a 640px-tall viewport) it grew in BOTH
     directions and slid under the header and over the rail. Letting the section
     outgrow the viewport is what makes that impossible rather than merely
     unlikely. */
  .svc-hero{min-height:100svh;height:auto;display:flex;flex-direction:column}
  /* Both children come back into flow as flex items, so the layout engine — not a
     magic padding number — guarantees they cannot overlap. Reserving space for the
     rail with padding was the first attempt and it still failed: the credential
     strip goes from two lines to three under font scaling, and no constant can
     track that. position:relative rather than static, because the base rules put
     these two on z-index 2 and 3 to sit above .svc-hero::after (the scrim), and
     z-index is ignored on a static box.
     flex:1 + justify-content:center keeps the text optically centred in whatever
     is left, so a short hero looks exactly as it did before. */
  .svc-hero .content{
    position:relative;transform:none;left:auto;right:auto;bottom:auto;top:auto;
    max-width:none;width:100%;flex:1 1 auto;
    display:flex;flex-direction:column;justify-content:center;
    padding:calc(80px + var(--safe-top)) 24px 24px
  }
  /* clamp(40px,6vw,80px) is dead on a phone: 6vw only clears the 40px floor above
     a 667px viewport, so every handset from 320px to 640px rendered the same
     40px. This ramp is live across the whole phone range and arrives at exactly
     40px by 640px, so it hands off to the desktop rule with no step. */
  .svc-hero h1{font-size:clamp(32px,24px + 2.5vw,40px)}
  /* Eyebrow wrapped to two lines under ~370px at .32em, which cost a whole line
     of vertical budget before the headline even started. */
  .svc-hero .crumbs{font-size:10px;letter-spacing:.22em;margin-bottom:18px}
  .svc-hero p{margin-top:20px}
  /* Centered text sits over the brightest part of most kitchen photos, where the
     desktop bottom-weighted scrim is only ~18% black. Flatter, deeper curve here. */
  .svc-hero::after{background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.44) 62%,rgba(0,0,0,.14) 100%)}
  /* In flow as the second flex item (see .content above). The bottom padding is
     still the 56px .m-cta bar plus clearance — that bar is position:fixed to the
     viewport, so it is the one thing here that flow cannot account for. */
  .hero-foot{position:relative;left:auto;right:auto;bottom:auto;flex:0 0 auto;
    padding:0 24px calc(72px + var(--safe-bottom));gap:16px}
  /* 60% forced a third line on narrow phones; 72% keeps it at two. */
  .hero-cred{font-size:9px;letter-spacing:.2em;max-width:72%;line-height:1.9}
  .hero-scroll span{display:none}
  .hero-scroll i{height:38px}
  .svc-vis,.svc-projects,.svc-la,.svc-price,.svc-faq{padding:80px 24px}
  .svc-projects .head{flex-direction:column;align-items:flex-start;gap:20px}
}

/* Landscape phones and other very short viewports. 100svh here is ~360px, of
   which the header and CTA bar already claim 115px, so the headline has to give
   up size rather than let the hero run to three screens of scroll. Height-gated,
   not width-gated, so tall phones are untouched. */
@media (max-width:900px) and (max-height:520px){
  .svc-hero h1{font-size:clamp(24px,5.4vh,32px)}
  .svc-hero p{font-size:14px;margin-top:14px}
  .svc-hero .crumbs{margin-bottom:12px}
  .svc-hero .content{padding-top:calc(68px + var(--safe-top))}
}

/* hero + LA visual images are set inline per-page; keep the non-image rules here */
.svc-hero .img{position:absolute;inset:0;background-size:cover;background-position:center 40%;opacity:0;transform:scale(1.04);animation:imgIn 1.6s cubic-bezier(.22,1,.36,1) .15s forwards}
.svc-la .visual{aspect-ratio:4/5;background-size:cover;background-position:center;background-color:var(--cream)}

/* ============ FAQ questions-only variant (from _template.php) ============ */
.svc-faq-questions-only .faq-questions{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline)}
.svc-faq-questions-only .faq-questions li{border-bottom:1px solid var(--hairline)}
.svc-faq-questions-only .faq-questions a{display:block;padding:24px 0;font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.3;color:var(--ink);text-decoration:none;transition:color .25s ease,padding .25s ease}
.svc-faq-questions-only .faq-questions a:hover{color:var(--bronze);padding-left:8px}

/* The CTA under the questions. Scoped to .svc-faq, not to the questions-only
   variant it was written for: the kitchen page is an accordion now and dropped that
   class, which silently took the CTA's spacing and centring with it. The block ended
   up flush against the last answer's rule and its button flush against its own text.
   Both layouts use it, so both selectors resolve here. */
.svc-faq .faq-cta{margin-top:56px;text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.svc-faq .faq-cta p{font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0 0 28px}
/* The button is an inline <a>; without this its line-height alone decides the gap. */
.svc-faq .faq-cta .btn-primary{margin-top:4px}

/* ============ additions for the WP-native kitchen LP ============ */

/* Skip link (was inline in _template.php). */
.skip-link{position:absolute;left:-9999px;top:0;background:#9B7B4A;color:#F2EDE4;padding:12px 20px;z-index:200;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:12px;top:12px}

/* The visualizer sits inside .svc-vis, which was built for a centred headline and a
   single button. Drop its padding so the plugin controls its own rhythm. */
.svc-vis{padding:0}
.svc-vis .avp-root{max-width:1100px;margin:0 auto}

/* The plugin ships its own reset-ish styles; make sure the fixed site header
   never sits under the modal. */
.avp-modal{z-index:120}
body.avp-modal-locked #site-header{z-index:1}

/* WordPress admin bar offset for logged-in previews. */
body.admin-bar #site-header{top:32px}
@media (max-width:782px){body.admin-bar #site-header{top:46px}}

/* Anchor targets clear the fixed header when the browser jumps without JS
   (deep link, no-JS, reduced-motion). Mirrors the offset the scroll handler uses. */
#section-visualizer,#section-projects,#section-la,#section-faq,#section-talk{scroll-margin-top:88px}
@media (max-width:640px){
  #section-visualizer,#section-projects,#section-la,#section-faq,#section-talk{scroll-margin-top:74px}
}

/* ============ MC wordmark (stands in until the real logo lands) ============ */
.mc-wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1}
.mc-wordmark-initials{
  font-family:Fraunces,Georgia,serif;font-weight:400;font-size:26px;letter-spacing:.02em;
  color:var(--bronze-light);border:1.5px solid var(--bronze-light);
  padding:5px 9px 6px;border-radius:3px
}
.mc-wordmark-text{
  display:flex;flex-direction:column;gap:3px;
  font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.20em;text-transform:uppercase;color:var(--cream)
}
.mc-wordmark-text em{
  font-style:normal;font-size:9px;font-weight:500;letter-spacing:.16em;
  color:var(--bronze-light);opacity:.9
}
/* Footer sits on the dark band too, but the mark should recede next to the copy. */
.mc-wordmark-footer{margin-bottom:18px}
.mc-wordmark-footer .mc-wordmark-initials{font-size:22px}
.mc-wordmark-footer .mc-wordmark-text{font-size:11px}

@media (max-width:900px){
  .mc-wordmark-text{display:none}
}

/* ============ .svc-la feature band (bathroom LP) ============
 * The bathroom page runs two .svc-la sections back to back: the one real photo,
 * then Built for South Florida. Both default to --cream-deep with the text left
 * and image right, so adjacent they merge into one band that reads as a single
 * section repeating itself.
 *
 * This modifier darkens the first one and flips its columns. The colour values
 * are not new — they are the reversed set .svc-price already established for
 * cream-on-ink, reused here rather than invented.
 */
.svc-la--feature{background:var(--ink)}
.svc-la--feature .visual{order:-1}
.svc-la--feature .text .eyebrow{color:var(--bronze-light)}
.svc-la--feature .text h2{color:var(--cream)}
.svc-la--feature .text h2 em{color:var(--bronze-light)}
.svc-la--feature .text p{color:rgba(242,237,228,.72)}
.svc-la--feature .tags span{color:var(--cream);background:rgba(184,147,102,.22)}

/* .svc-la .grid collapses to a single column at 1000px. Left flipped, the photo
   would stack above its own heading; reset the order so the heading still leads. */
@media (max-width:1000px){
  .svc-la--feature .visual{order:0}
}

/* ============ MC's five promises (template-parts/mc-promises.php) ============
 * The financing / consultation / insurance-billing / satisfaction / licensed row
 * carried over from mcenterprisesfl.com. Sits on the deep band between the FAQ
 * and the form — which also breaks up what was two cream sections in a row.
 * Styled as ruled columns rather than the original's floating green headings so
 * it reads as this design, not a paste from the old site. */
.mc-promises{background:var(--cream-deep);padding:144px 48px}
.mc-promises .top{max-width:1240px;margin:0 auto 64px}
.mc-promises h2{font-family:'Fraunces';font-weight:300;font-size:clamp(26px,3.4vw,42px);line-height:1.15;letter-spacing:-0.015em;color:var(--ink);margin-top:16px;max-width:520px}
.mc-promises h2 em{font-style:italic}
.promise-grid{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.promise{padding:28px 24px 8px;border-left:1px solid var(--hairline)}
.promise:first-child{border-left:0;padding-left:0}
.promise h3{font-family:'Fraunces';font-weight:400;font-size:19px;line-height:1.25;color:var(--ink);margin:0 0 14px;position:relative;padding-top:18px}
.promise h3::before{content:'';position:absolute;top:0;left:0;width:28px;height:2px;background:var(--bronze)}
.promise p{font-family:'Inter';font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin:0}
@media (max-width:1000px){
  .promise-grid{grid-template-columns:1fr 1fr;gap:8px 40px}
  .promise{border-left:0;padding:20px 0 12px}
  /* the odd fifth card spans the full row rather than sitting orphaned in one column */
  .promise:last-child{grid-column:1/-1;max-width:560px}
}
@media (max-width:640px){
  .mc-promises{padding:80px 24px}
  .promise-grid{grid-template-columns:1fr;gap:4px}
  .promise:last-child{grid-column:auto;max-width:none}
}

/* ============ Legal pages (page-legal.php) ============
   Privacy Policy, Terms of Service, Terms and Conditions. These used to render
   through page.php with no layout stylesheet at all, because main.css has been
   dequeued since 2026-05-05 and nothing replaced it for non-LP pages. A visitor
   clicking Privacy in the footer landed on unstyled blue-link HTML.
   Reading measure is narrower than the LP container: this is long-form text. */
body.mc-legal{background:var(--cream);color:var(--ink)}
.legal-header{position:static;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 48px;background:var(--ink)}
.legal-header .logo-mark{height:34px;width:auto;display:block}
.legal-header .header-cta{font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);text-decoration:none;border:1px solid rgba(242,237,228,.4);padding:11px 20px;transition:background .25s ease,color .25s ease}
.legal-header .header-cta:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}

.legal-page{padding:80px 48px 120px}
.legal-page .inner{max-width:760px;margin:0 auto}
.legal-back{display:inline-block;margin-bottom:40px;font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);text-decoration:none}
.legal-back:hover{text-decoration:underline}
.legal-page h1{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(32px,5vw,52px);line-height:1.1;letter-spacing:-0.015em;color:var(--ink);margin:0 0 12px}
/* The rule under the title now belongs to the content block, since the template no
   longer prints a modified-date line above it. */
.legal-wrap-top{margin-top:40px;padding-top:36px;border-top:1px solid var(--hairline)}

/* The page content itself. The stored HTML is plain h2/h3/p/ul, so these are
   element selectors rather than classes. */
.legal-wrap{font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.8;color:var(--ink-soft)}
.legal-wrap h2{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:1.25;color:var(--ink);margin:48px 0 14px}
.legal-wrap h3{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:20px;line-height:1.3;color:var(--ink);margin:32px 0 10px}
.legal-wrap h2:first-child,.legal-wrap h3:first-child{margin-top:0}
.legal-wrap p{margin:0 0 18px}
.legal-wrap ul,.legal-wrap ol{margin:0 0 22px;padding-left:22px}
.legal-wrap li{margin-bottom:9px}
.legal-wrap strong{color:var(--ink);font-weight:600}
.legal-wrap a{color:var(--bronze);text-decoration:none;border-bottom:1px solid rgba(155,123,74,.4)}
.legal-wrap a:hover{border-bottom-color:var(--bronze)}
.legal-wrap table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.legal-wrap th,.legal-wrap td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hairline)}
.legal-wrap th{font-family:Inter,system-ui,sans-serif;font-weight:600;color:var(--ink)}

.legal-foot-cta{margin-top:64px;padding-top:32px;border-top:1px solid var(--hairline);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.legal-foot-cta a{color:var(--bronze);text-decoration:none;border-bottom:1px solid rgba(155,123,74,.4)}

@media (max-width:640px){
  .legal-header{padding:14px 20px;gap:12px}
  .legal-header .logo-mark{height:26px}
  .legal-header .header-cta{padding:9px 12px;font-size:11px;letter-spacing:.1em}
  .legal-page{padding:48px 24px 88px}
  .legal-back{margin-bottom:28px}
  .legal-wrap-top{margin-top:28px;padding-top:26px}
  .legal-wrap{font-size:15.5px}
}

/* ===== Diagnosis LPs: per-service accent shift. Surfaces and type stay cream/ink;
   everything keyed off --bronze recolors (buttons, eyebrows, em, selection). ===== */
body.lp-leak{--bronze:#3E6B8C;--bronze-light:#5A88A8;--bronze-pale:rgba(62,107,140,.18)}
body.lp-mold-rem{--bronze:#4A7C64;--bronze-light:#699C82;--bronze-pale:rgba(74,124,100,.18)}
body.lp-mold-insp{--bronze:#5D6E5F;--bronze-light:#7C8E7E;--bronze-pale:rgba(93,110,95,.18)}

/* Sample-report card in the "what you get" section (CSS-built, no image). */
.diag-sample{max-width:520px;margin:48px auto 0;background:#fff;border:1px solid var(--hairline);box-shadow:0 24px 60px rgba(26,23,20,.10);padding:32px 36px;text-align:left}
.diag-sample-eyebrow{font-family:'Inter';font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--stone)}
.diag-sample-title{font-family:'Fraunces';font-weight:400;font-size:22px;margin-top:10px;color:var(--ink)}
.diag-sample-meter{margin:18px 0 6px;height:8px;border-radius:5px;background:linear-gradient(90deg,#7fb069,#e6c96b,#e0954f,#c0392b);opacity:.3;position:relative}
.diag-sample-meter i{position:absolute;top:-4px;bottom:-4px;left:0;width:58%;border-right:3px solid var(--bronze);display:block}
.diag-sample-meter-caption{display:flex;justify-content:space-between;font-family:'Inter';font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.diag-sample-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hairline)}
.diag-sample-row .n{font-family:'Inter';font-weight:600;font-size:12px;color:var(--ink-mute);min-width:1.1em}
.diag-sample-row .bar{flex:1;height:9px;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(26,23,20,.16) 0 38px,rgba(26,23,20,.05) 38px 66px);filter:blur(1.5px)}
.diag-sample-row .tag{font-family:'Inter';font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}

/* ── Post-check page state ───────────────────────────────────────────────────
   Driven by html.avp-done, stamped from localStorage in <head> before first
   paint and again by the visualizer the instant the funnel finishes.

   Once someone has actually run the AI check, the pre-check page is arguing for
   something they already hold: the sample report spoils their own result, the
   "60 seconds / $0" stats sell a thing already delivered, and four separate
   Free AI Check buttons all lead back into a funnel they just completed. Each
   of those swaps for the offer and a phone number.

   .diag-done-only defaults to hidden, so with JS off or localStorage blocked the
   page renders the pre-check variant. That is the safe direction to fail: it
   still sells the check to someone who might not have run it, whereas failing
   the other way would show "your assessment is ready" to a stranger. */
.diag-done-only{display:none}
html.avp-done .diag-pre-only{display:none !important}
html.avp-done .diag-done-only{display:block}
/* .btn-primary is inline-flex; a plain block here would break the arrow's
   alignment inside the header's call button. */
html.avp-done .header-right .diag-done-only{display:inline-flex}
/* ...but NOT on phones. `header .header-right .btn-primary{display:none}` in the
   ≤640px block exists because the sticky bottom bar already carries Call Now there;
   the rule above re-forced it back on, so a finished visitor got two identical CTAs
   stacked on one screen with the logo squeezed between them. */
@media (max-width:640px){
  html.avp-done .header-right .diag-done-only{display:none !important}
  /* With the CTA gone the logo is the only thing left in the bar — let it sit flush
     left rather than pinned to the right edge by space-between. */
  #site-header{justify-content:flex-start}
  .header-right{margin-right:auto}
}
/* The sticky bar is a 2-column grid that just lost a column — without this the
   surviving Call Now sits in the left half with dead space beside it. */
html.avp-done .m-cta{grid-template-columns:1fr}

.diag-done{max-width:640px;margin:0 auto;text-align:center}
.diag-done-kicker{font-family:'Inter';font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin:0 0 14px}
.diag-done-lead{font-family:'Inter';font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0 0 28px}
.diag-done-phone{font-family:'Inter';font-size:14px;letter-spacing:.06em;color:var(--ink-soft);margin:18px 0 0}
.diag-done-phone a{color:var(--ink);font-weight:700;text-decoration:none}
.diag-done-phone a:hover{color:var(--bronze)}

/* ==========================================================================
   Owner pass, 2026-08-10. What the page looks like AFTER the AI check.
   ========================================================================== */

/* The header carried two gold CTAs that swapped on avp-done: "See It First"
   before the check, "Call Now" after. Both are gone now, at every width. On
   phones the sticky bottom bar already carries Call Now; on desktop the button
   crowded the logo against the right edge. The header is the logo. */
#site-header .header-right .btn-primary{ display:none !important; }
#site-header{ justify-content:flex-start !important; }
#site-header .header-right{ margin-right:auto !important; }

/* Everything whose job was to argue the visitor should RUN the check is noise
   once they have run it. Driven by the same html.avp-done stamp the existing
   diag-pre-only rules use; these three were simply never tagged, on any of the
   five LPs:
     #avpLauncher    the launcher, "Continue where you left off"
     .svc-transform  the pitch, and the stock before/after demo beneath it
     #section-la     the region block and its capability chips
   Kept as CSS rather than a class on each section element because that markup
   lives in three separate templates and this is a presentational toggle. */
html.avp-done #avpLauncher,
html.avp-done .svc-transform,
html.avp-done #section-la{ display:none !important; }

/* ...and any link pointing at the block we just hid, header nav and footer
   alike, so nothing scrolls to a dead anchor. */
html.avp-done a[href="#section-la"]{ display:none !important; }

/* ==========================================================================
   Owner pass, 2026-08-11. Kitchen: the three pitch blocks go for good.
   ========================================================================== */

/* The launcher, the "same room, twice" pitch and the region block were hidden
   after the check by the rules above. The owner wants them gone from kitchen
   full stop. The popup is forced open on entry (data-forced="1"), so nobody
   browses this page before running the check anyway - pre-check these three
   argue for something the visitor is already inside. Scoped to the kitchen
   template; the other four LPs keep the after-the-check behaviour. */
body.page-template-page-kitchen-lp #avpLauncher,
body.page-template-page-kitchen-lp .svc-transform,
body.page-template-page-kitchen-lp #section-la{ display:none !important; }

/* After the check, the visualizer section keeps its box even though everything
   inside it is hidden: 24px of .avp-root padding top and bottom plus the
   progress bar 2px and its 48px bottom margin - 98px of empty band between the
   hero and Our Work. It cannot be display:none, because #avpModal lives inside
   it (#avpModal < #avpQuiz < .avp-root < #section-visualizer) and hiding the
   section would take the popup with it. Collapse the box instead. */
html.avp-done #section-visualizer > .avp-root{ padding:0 !important; }
html.avp-done #section-visualizer .avp-progress{ display:none !important; }

/* ...and every link that pointed into it. There are four, not one: the footer
   "The Visualizer", a hero scroll cue, an inline "AI Visualizer" text link and
   "Free Visualizer" in the sticky bar. All target #section-visualizer, which
   after the check is an empty band. */
html.avp-done a[href="#section-visualizer"]{ display:none !important; }

/* Header order: logo left, nav right (owner, 2026-08-11). The flex-start plus
   margin-right:auto pair added yesterday was written when the header was going
   to be logo-only; with the nav visible it packed the links and the logo hard
   against each other on the left and left 714px of dead space to their right.
   They belong at opposite ends: the logo takes order -1 so it leads, the nav
   follows it, and space-between pushes them apart. On phones .menu is display
   none and .hamburger takes its slot, so the same rules read logo left,
   hamburger right. */
#site-header{ justify-content:space-between !important; }
#site-header .header-right{ order:-1 !important; margin-right:0 !important; }
#site-header .menu{ order:1 !important; }

/* The same three blocks go on leak and bathroom (owner via Amir, 2026-08-11).
   Kitchen got this yesterday; leak is where Amir's list came from, and bathroom
   was asked for alongside it. The two mold LPs share leak's template but nobody
   asked for them, so they keep the after-the-check behaviour until someone does. */
body.page-template-page-leak-lp #avpLauncher,
body.page-template-page-leak-lp .svc-transform,
body.page-template-page-leak-lp #section-la,
body.page-template-page-bath-lp #avpLauncher,
body.page-template-page-bath-lp .svc-transform,
body.page-template-page-bath-lp #section-la{ display:none !important; }

/* Molds matched to leak (owner, 2026-08-11). They share leak's template, so
   leaving them with the launcher and the pitch still showing made the three
   diagnosis LPs disagree with each other. All five now behave the same. */
body.page-template-page-mold-inspection-lp #avpLauncher,
body.page-template-page-mold-inspection-lp .svc-transform,
body.page-template-page-mold-inspection-lp #section-la,
body.page-template-page-mold-remediation-lp #avpLauncher,
body.page-template-page-mold-remediation-lp .svc-transform,
body.page-template-page-mold-remediation-lp #section-la{ display:none !important; }

/* ==========================================================================
   Responsive pass, 2026-08-11. Line breaking on small phones.
   ========================================================================== */

/* At 320px a lot of copy stranded its last word on a line of its own - "step.",
   "room.", "doorbell.", "(OPTIONAL)", and a heading that broke to leave only
   "Removed" underneath. Five of them on the mold page alone. balance evens the
   line lengths on short headings; pretty specifically refuses to leave a single
   word on the final line of body copy. Both degrade to normal wrapping where the
   browser does not support them, so there is no fallback to write. */
h1, h2, h3, h4,
.avp-step-title, .avp-gate-title, .eyebrow, .avp-lead-success-title{
  text-wrap: balance;
}
p, li, label,
.avp-step-help, .avp-gate-lead, .avp-lead-success-body, .lead{
  text-wrap: pretty;
}

/* The footer blurb runs at 18px, which is larger than the body copy above it and
   too large for a 272px measure: at 320px it broke to five lines and stranded
   "homeowners." alone on the last one. text-wrap:pretty could not rescue it -
   pulling that word up would have left the line above badly short, so Chrome
   correctly declined. Smaller type is the actual fix rather than a wrapping hint. */
@media (max-width:480px){
  footer .brand p{ font-size: 15px !important; line-height: 1.6 !important; }
}

/* Buttons were not covered by the wrap rules above, and the quiz options are the
   one place a button routinely runs to two lines: at 320px "Under a sink /
   appliance" and "Just the bill or a sound" each dropped their last word alone.
   balance rather than pretty - these are short labels where evening the two lines
   reads better than protecting the last one. */
.avp-option, .avp-btn, button, .avp-option-label{ text-wrap: balance; }