/* Compatibility layer for ported Claude Design pages.
   The original page CSS lives inline in each page's <style>.
   These rules re-implement the runtime behavior (driven by body-state classes)
   and use !important to override the static inline fallback styles. */

/* image placeholders (replace <img> when real photos are added) */
.img-slot{background:linear-gradient(135deg,#cdd6cc,#aeb9ad 60%,#94a399)}
.img-slot.dark{background:linear-gradient(135deg,#33473b,#1d2a22)}
/* Awaiting-photo slots.
   Two problems: the label was absolutely positioned with no positioned parent,
   so labels from separate slots stacked on top of each other; and the text was
   an internal instruction ("Drop a...") rendering to whoever views the site.
   The slot now reads as a quiet branded panel with no copy. The data-ph
   attribute is kept so the team can still see what each slot wants via
   dev tools or the admin, without showing it to a visitor. */
.img-slot[data-ph]{position:relative;background:linear-gradient(135deg,#e8e3d8,#dcd6c8 60%,#cfc8b7)}
.img-slot[data-ph]::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1px solid rgba(30,56,45,.18);background:radial-gradient(circle at 50% 50%, rgba(30,56,45,.10) 0 40%, transparent 41%)}
.img-slot.dark[data-ph]{background:linear-gradient(135deg,#33473b,#1d2a22)}
.img-slot.dark[data-ph]::after{border-color:rgba(255,255,255,.18);background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.12) 0 40%, transparent 41%)}
/* Logo marks are not photography: an empty box where a Google or Houzz logo
   belongs reads as broken, so hide those until a real mark is supplied. */
.img-slot.logo-slot[data-ph]{display:none !important}

/* hero background video: sits over the image slot, which stays visible as the
   poster until mp.js confirms the video is actually playing */
.video-slot{object-fit:cover;pointer-events:none;opacity:0;transition:opacity .9s ease}
.video-slot.is-playing{opacity:1}
@media (prefers-reduced-motion:reduce){.video-slot{display:none}}

/* sticky condensed nav: shows on scroll everywhere, and always on interior
   pages (which have no in-hero nav of their own; only the home hero does) */
body.scrolled .mp-sticky{opacity:1 !important;transform:translateY(0) !important;pointer-events:auto !important}
body:not(.home) .mp-sticky{opacity:1 !important;transform:translateY(0) !important;pointer-events:auto !important}

/* shared mega panel: drops below the condensed nav (74px) whenever it is the
   visible nav (scrolled, or any interior page); 132px only under the home hero nav */
body.scrolled .mp-panel{top:74px !important}
body:not(.home) .mp-panel{top:74px !important}
body.menu-open .mp-panel{opacity:1 !important;transform:translateY(0) !important;pointer-events:auto !important}

/* mega panel sections (menu) - hidden until their menu is open */
body[data-menu="home"]  .mp-if[data-if="isMenuHome"],
body[data-menu="reno"]  .mp-if[data-if="isMenuReno"],
body[data-menu="other"] .mp-if[data-if="isMenuOther"],
body[data-menu="about"] .mp-if[data-if="isMenuAbout"]{display:block !important}

/* hero mode swap */
body[data-mode="renovation"] .mp-if[data-if="isCustom"]{display:none !important}
body[data-mode="renovation"] .mp-if[data-if="isReno"]{display:block !important}
/* fade the custom hero image out in renovation mode to reveal the reno image beneath */
body[data-mode="renovation"] .mp-hero-custom{opacity:0 !important}

/* renovation before/after wipe: --mp-split is the divider position, set by mp.js */
.mp-ba-after{clip-path:inset(0 calc(100% - var(--mp-split,50%)) 0 0)}
.mp-ba-divider{left:var(--mp-split,50%)}
.mp-ba-ui{display:none}
body[data-mode="renovation"] .mp-ba-ui{display:block}
body[data-mode="renovation"] .mp-home-hero[data-ba]{cursor:ew-resize}

/* mobile menu overlay */
body.mobile-open .mp-mobile{opacity:1 !important;transform:translateY(0) !important;pointer-events:auto !important}
body.mobile-open{overflow:hidden}

/* hero toggle active states */
body[data-mode="custom"]     .mp-toggle-custom{background:#00833E !important;color:#fff !important}
body[data-mode="renovation"] .mp-toggle-reno{background:#00833E !important;color:#fff !important}

/* reveal-on-scroll default (their inline CSS defines the .pre transition) */
[data-reveal].pre{opacity:0;transform:translateY(26px)}

/* ---- before / after comparison slider (portfolio highlights) ----
   --mp-cmp is the divider position (0-100), set by mp.js from the range input.
   No-JS fallback: divider sits at 50% and both halves are visible. */
.mp-cmp{--mp-cmp:50;cursor:ew-resize;user-select:none;background:#e7e4dc}
.mp-cmp-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.mp-cmp-before{clip-path:inset(0 calc(100% - var(--mp-cmp) * 1%) 0 0)}
.mp-cmp-line{position:absolute;top:0;bottom:0;left:calc(var(--mp-cmp) * 1%);width:2px;margin-left:-1px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(20,32,26,.18);pointer-events:none}
.mp-cmp-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(16,28,20,.32);display:flex;align-items:center;justify-content:center}
.mp-cmp-grip::before{content:"";width:20px;height:8px;background:no-repeat center/20px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M6 0L2 4l4 4M14 0l4 4-4 4' fill='none' stroke='%231E382D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mp-cmp-tag{position:absolute;bottom:16px;font-family:'Outfit',sans-serif;font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(20,32,26,.62);padding:6px 12px;border-radius:100px;pointer-events:none}
.mp-cmp-tag-before{left:16px}
.mp-cmp-tag-after{right:16px}
/* the range input is the accessible control: full-cover, invisible, keyboard-operable */
.mp-cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.mp-cmp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:100%}
.mp-cmp-range::-moz-range-thumb{width:44px;height:480px;border:0;background:transparent}
.mp-cmp-range:focus-visible{outline:none}
.mp-cmp-range:focus-visible ~ .mp-cmp-grip,.mp-cmp:focus-within .mp-cmp-grip{box-shadow:0 3px 12px rgba(16,28,20,.32),0 0 0 3px #00833E}
@media (max-width:900px){.mp-cmp{height:340px !important}.mp-cmp-range::-moz-range-thumb{height:340px}}

/* ---------- Article prose (blog posts) ----------
   Post bodies come from the editor rather than hand-written inline styles, so
   they need real CSS. Sized for long-form reading and for answer engines
   lifting a clean paragraph or list out of the page. */
.mp-prose{font-family:'Poppins',sans-serif;font-weight:300;font-size:17px;line-height:1.85;color:#3F3D36}
.mp-prose > *:first-child{margin-top:0}
.mp-prose p{margin:0 0 26px}
.mp-prose h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(27px,3.4vw,38px);line-height:1.16;letter-spacing:-.01em;color:#20251E;margin:56px 0 18px;text-wrap:balance}
.mp-prose h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(22px,2.6vw,27px);line-height:1.22;color:#20251E;margin:42px 0 14px}
.mp-prose h4{font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#00833E;margin:36px 0 12px}
.mp-prose ul,.mp-prose ol{margin:0 0 26px;padding-left:24px}
.mp-prose li{margin:0 0 11px;padding-left:4px}
.mp-prose li::marker{color:#B98F35}
.mp-prose a{color:#00833E;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mp-prose a:hover{color:#20251E}
.mp-prose strong{font-weight:600;color:#20251E}
.mp-prose blockquote{margin:38px 0;padding:4px 0 4px 26px;border-left:2px solid #B98F35;font-family:'Cormorant Garamond',serif;font-size:23px;font-style:italic;line-height:1.5;color:#20251E}
.mp-prose blockquote p{margin:0}
.mp-prose img{max-width:100%;height:auto;border-radius:4px;display:block;margin:38px 0}
.mp-prose figure{margin:38px 0}
.mp-prose figcaption{font-size:13.5px;color:#7A776C;margin-top:10px;text-align:center}
.mp-prose hr{border:0;border-top:1px solid #DED7C8;margin:48px 0}
.mp-prose table{width:100%;border-collapse:collapse;margin:32px 0;font-size:15.5px}
.mp-prose th,.mp-prose td{border:1px solid #DED7C8;padding:12px 14px;text-align:left}
.mp-prose th{background:#F7F4EE;font-family:'Outfit',sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#20251E}
.mp-prose > .wp-block-table{overflow-x:auto}

/* Pagination on the blog index */
.nav-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nav-links .page-numbers{display:inline-block;padding:11px 16px;border:1px solid #DED7C8;border-radius:3px;color:#5F5C52;text-decoration:none}
.nav-links .page-numbers.current{background:#1E382D;border-color:#1E382D;color:#fff}
.nav-links a.page-numbers:hover{border-color:#00833E;color:#00833E}

/* ---------- Consultation form ----------
   These inputs were rendering as raw browser defaults, which read as a generic
   contact form rather than the first step of a high-end build. The treatment
   is deliberately quiet: a warm ground, a hairline rule that thickens on focus,
   and no heavy chrome, so the form feels like stationery rather than software. */
.mp-field{
  width:100%;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
  font-weight:300;
  font-size:15.5px;
  line-height:1.5;
  color:#20251E;
  background:#FBFAF7;
  border:1px solid #DED7C8;
  border-radius:3px;
  padding:15px 16px;
  transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;
  -webkit-appearance:none;appearance:none;
}
.mp-field::placeholder{color:#A9A69B;font-weight:300}
.mp-field:hover{border-color:#C9C2B2}
.mp-field:focus{
  outline:none;
  background:#fff;
  border-color:#00833E;
  box-shadow:0 0 0 3px rgba(0,131,62,.10);
}
.mp-field:focus-visible{outline:none}

/* Selects need their own arrow once the native chrome is removed. */
select.mp-field{
  padding-right:44px;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237A776C' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
textarea.mp-field{min-height:132px;resize:vertical;line-height:1.75}

/* Choice pills: unselected reads as an option, selected reads as a decision. */
.mp-pill{
  font-family:'Outfit',sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.02em;
  color:#3F3D36;background:#FBFAF7;border:1px solid #DED7C8;border-radius:100px;
  padding:12px 22px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.mp-pill:hover{border-color:#B98F35;color:#20251E}
.mp-pill[aria-pressed="true"],.mp-pill.is-selected{
  background:#1E382D;border-color:#1E382D;color:#fff;
}
.mp-pill:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,131,62,.18)}

/* Field label, so the form stops using h3 for what is really a label. */
.mp-label{
  display:block;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#7A776C;margin:0 0 10px;
}
.mp-label .req{color:#B98F35;margin-left:2px}
.mp-label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:#A9A69B}

@media (max-width:640px){
  .mp-field{font-size:16px} /* stop iOS zooming on focus */
}

/* Anchored sections must clear the sticky header, or a mega-menu jump lands
   with the heading hidden behind the nav. */
section[id]{scroll-margin-top:120px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Responsive gaps ----------
   Three layout hooks shipped in templates without matching rules, so these
   grids stayed at desktop column counts on a phone: the portfolio masonry, the
   reviews masonry, and the reputation bar on the reviews page. */
@media (max-width:1000px){
  [data-r="revgrid"]{column-count:2}
  [data-r="rep"]{flex-wrap:wrap; gap:26px; justify-content:flex-start !important}
}
@media (max-width:620px){
  [data-r="revgrid"]{column-count:1}
  /* the project grid drops to a single column on a phone */
  [data-r="gal"]{grid-template-columns:1fr !important}
  [data-r="rep"]{flex-direction:column; align-items:flex-start !important; text-align:left}
}

/* ---------- Responsive gaps, second pass ----------
   The templates ship 35 `data-r` layout hooks but only three ever had rules,
   so most multi-column sections held their desktop column count on a phone:
   four- and five-across grids were rendering at roughly 80px per column.
   Every grid below carries a fixed column count inline, so these rules need
   !important to override the style attribute. The header (`navlinks`,
   `burger`) is deliberately untouched, since the burger menu already handles
   it. */
@media (max-width:1000px){
  [data-r="do4"], [data-r="pillars"], [data-r="process"], [data-r="proof"],
  [data-r="services"], [data-r="stats"], [data-r="values"], [data-r="five"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  [data-r="benefits"], [data-r="cols3"], [data-r="expect"], [data-r="gallery"],
  [data-r="grid3"], [data-r="statgrid"], [data-r="team"], [data-r="work3"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  [data-r="footcols"]{grid-template-columns:repeat(2,1fr) !important}
  [data-r="main"], [data-r="split"], [data-r="hl"], [data-r="sig"],
  [data-r="vs"], [data-r="phases"], [data-r="adv"], [data-r="form2"]{
    grid-template-columns:1fr !important;
  }
  [data-r="barwrap"]{flex-wrap:wrap}
}
@media (max-width:620px){
  [data-r="do4"], [data-r="pillars"], [data-r="process"], [data-r="proof"],
  [data-r="services"], [data-r="stats"], [data-r="values"], [data-r="five"],
  [data-r="benefits"], [data-r="cols3"], [data-r="expect"], [data-r="gallery"],
  [data-r="grid3"], [data-r="statgrid"], [data-r="team"], [data-r="work3"],
  [data-r="cols2"], [data-r="ba2"], [data-r="grid2"], [data-r="footcols"]{
    grid-template-columns:1fr !important;
  }
}


/* Review-platform marks (reviews page hero band, on #1E382D).
   Held back to a quiet monochrome so three brand palettes do not fight the
   gold and cream the band already uses; they lift to full white on hover. */
.mp-review-mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:rgba(255,255,255,.6);transition:color .25s ease}
.mp-review-mark svg{fill:currentColor;flex:none}
.mp-review-mark span{font-family:'Outfit',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.mp-review-mark:hover,.mp-review-mark:focus-visible{color:#fff}