/*
Playa Flamenca Painting - design system

The whole visual language of the site: tokens, layout, header and mega menu,
footer, cards, hero, forms and motion. Loaded by the divi-child theme; Divi
supplies the page structure, this file supplies the design.
*/

/* =========================================================================
   Playa Flamenca Painting — prototype stylesheet
   Design tokens are the single source of truth for colour, spacing and type.
   ========================================================================= */
:root{
  --ink:#16202B; --ink-soft:#5A6472;
  --red:#E0271C; --red-dark:#B81E15;
  --green:#7DBE3C; --amber:#F5A623; --purple:#6E2E8F;
  --paper:#fff; --mist:#F6F7F9; --line:#E4E7EB;
  --wa:#25D366; --wa-dark:#1EBE5D;
  --r-card:6px; --r-btn:8px;
  --sh-1:0 1px 2px rgba(22,32,43,.06),0 1px 3px rgba(22,32,43,.10);
  --sh-2:0 8px 24px rgba(22,32,43,.10);
  --wrap:1240px; --pad:24px; --hpad:clamp(20px,3.5vw,56px);
  --t:160ms cubic-bezier(.2,0,.2,1);
  --mbar:60px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.7;color:var(--ink-soft);background:var(--paper);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Manrope,system-ui,sans-serif;color:var(--ink);
  margin:0 0 .5em;letter-spacing:-.02em;text-transform:none}
h1{font-size:clamp(2.125rem,1.6rem + 2.4vw,3.25rem);line-height:1.1;font-weight:800}
h2{font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);line-height:1.15;font-weight:700}
h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);line-height:1.25;font-weight:700}
p{margin:0 0 1.1em}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
code{background:var(--mist);padding:2px 6px;border-radius:4px;font-size:.9em}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{padding:112px 0}
.sec--mist{background:var(--mist)}
.center{text-align:center}
.sec-head{max-width:760px;margin:0 auto 56px}
.sec-head.center p{margin-left:auto;margin-right:auto}
.eyebrow{font:600 13px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px;display:block}
.lead{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);line-height:1.6;max-width:68ch}
.center .lead,.center p{margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:0}

/* ---------------------------------------------------------------- BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 16px/1 Inter,sans-serif;padding:16px 26px;min-height:52px;
  border-radius:var(--r-btn);border:2px solid transparent;text-decoration:none;
  cursor:pointer;transition:var(--t);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-dark);color:#fff}
/* WhatsApp green with DARK text — white on this green measures 1.98:1 and fails WCAG. */
.btn--wa{background:var(--wa);color:var(--ink)}
.btn--wa:hover{background:var(--wa-dark);color:var(--ink)}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--outline-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--block{width:100%;margin-bottom:10px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.btns.center{justify-content:center;margin-bottom:0}

/* ------------------------------------------------------------ UTILITY BAR */
.util{background:var(--ink);color:#AEB7C2;font-size:14px}
.util__in{display:flex;justify-content:space-between;align-items:center;gap:20px;
  min-height:42px;padding:0 var(--hpad)}         /* full width, no max-width */
.util span{display:flex;align-items:center;gap:8px}
.util a{color:#AEB7C2;text-decoration:none}
.util a:hover{color:#fff}
.util svg{width:15px;height:15px;color:var(--green);flex:none}

/* ------------------------------------------- HEADER — full-bleed, edge to edge */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,2vw,40px);
  min-height:96px;padding:0 var(--hpad);width:100%}   /* NO max-width = full screen */
.hdr__rule{height:4px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--amber) 25% 50%,
             var(--green) 50% 75%,var(--purple) 75% 100%)}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:clamp(48px,4.6vw,66px);width:auto}
.hdr.is-stuck .hdr__in{min-height:76px}
.hdr.is-stuck .brand img{height:clamp(42px,3.6vw,52px)}

.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative}
.nav>ul>li>a{display:flex;align-items:center;gap:6px;font:600 15.5px/1 Inter,sans-serif;
  color:var(--ink);text-decoration:none;padding:13px 14px;border-radius:6px;transition:var(--t);
  white-space:nowrap}
.nav>ul>li>a:hover,.nav>ul>li>a[aria-current]{background:var(--mist);color:var(--red)}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
  opacity:.5;margin-top:3px}
.sub{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-2);
  padding:14px;opacity:0;visibility:hidden;transition:var(--t);z-index:5}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub ul{display:grid;gap:1px;list-style:none;margin:0;padding:0}
.sub--2 ul{grid-template-columns:repeat(2,minmax(190px,1fr))}
.sub--3 ul{grid-template-columns:repeat(3,minmax(170px,1fr))}
.sub li a{display:block;padding:9px 12px;font-size:14.5px;color:var(--ink);
  text-decoration:none;border-radius:5px;white-space:nowrap;transition:var(--t)}
.sub li a:hover{background:var(--mist);color:var(--red)}
.sub__all{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);text-align:right}
.sub__all a{font-size:14px;font-weight:600;text-decoration:none}

.hdr__cta{display:flex;align-items:center;gap:16px;flex:none}
.tel{display:flex;align-items:center;gap:8px;font:800 18px/1 Manrope,sans-serif;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.tel svg{width:18px;height:18px;color:var(--red)}
.tel:hover{color:var(--red)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;
  padding:12px;margin-left:auto;cursor:pointer}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:var(--t)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mnav{display:none;position:sticky;top:96px;z-index:55;background:#fff;
  border-bottom:1px solid var(--line);max-height:calc(100vh - 160px);overflow-y:auto}
.mnav.is-open{display:block}
.mnav ul{list-style:none;margin:0;padding:8px var(--hpad) 20px}
.mnav li a{display:block;padding:14px 4px;font:600 17px/1 Inter,sans-serif;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
  border:0;padding:0 0 8px 14px}
.mnav .sub ul{grid-template-columns:1fr;padding:0}
.mnav .sub li a{font-size:15px;font-weight:500;padding:10px 4px;color:var(--ink-soft)}
.mnav .caret{display:none}

/* Photographs sit on a neutral tile so a slow or offline load degrades quietly
   instead of showing a broken-image box. */
.hero__media img,.card img,.split img,.ba img{background:var(--mist)}

/* ------------------------------------------------------------------- HERO */
.pf-hero{background:linear-gradient(180deg,#fff 0%,var(--mist) 100%);padding:80px 0 96px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.pf-hero h1{margin-bottom:20px}
.pf-hero h1 em{font-style:normal;color:var(--red)}
.pf-hero .lead{margin-bottom:30px}
.hero__media{position:relative}
.hero__media img{border-radius:var(--r-card);box-shadow:var(--sh-2);width:100%;
  aspect-ratio:4/3;object-fit:cover}
.hero__badge{position:absolute;left:-22px;bottom:-22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh-2);padding:16px 20px;max-width:280px}
.hero__badge .t{font:800 15px/1.3 Manrope,sans-serif;color:var(--ink);margin-bottom:3px}
.hero__badge .s{font-size:13.5px;line-height:1.45}
.revstrip{display:flex;align-items:center;gap:14px;padding-top:26px;border-top:1px solid var(--line)}
.revstrip p{margin:0;font-size:15px;line-height:1.45}
.revstrip strong{color:var(--ink);font-weight:600}
.stars{display:inline-flex;gap:2px;color:var(--amber);flex:none}
.stars svg{width:19px;height:19px}

/* inner-page hero */
.phero{background:var(--mist);padding:64px 0 56px;border-bottom:1px solid var(--line)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:center}
.phero h1{margin-bottom:18px;max-width:20ch}
.phero .lead{margin-bottom:28px}
.phero .btns{margin-bottom:0}
.phero__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px;box-shadow:var(--sh-1)}
.phero__card .stars{margin-bottom:10px}
.phero__card p{font-size:15px;line-height:1.55;margin:0 0 16px}
.phero__card .btn{width:100%;margin-bottom:8px}
.phero__card .hrs{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:12px 0 0}
.phero__card .hrs svg{width:15px;height:15px;color:var(--red);flex:none}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;margin:0 0 18px;padding:0;list-style:none}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--red)}
.crumbs li::after{content:"/";margin-left:6px;color:#B9C0C8}
.crumbs li:last-child::after{content:""}
.crumbs li[aria-current]{color:var(--ink);font-weight:600}

/* -------------------------------------------------------------- TRUST BAR */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust__i{padding:30px 26px;display:flex;gap:14px;align-items:flex-start;border-left:1px solid var(--line)}
.trust__i:first-child{border-left:0;padding-left:0}
.ico{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;flex:none}
.ico svg{width:20px;height:20px;color:var(--ink)}
.ico--red{background:#FDE3E1}.ico--green{background:#E9F5DA}
.ico--amber{background:#FDEED2}.ico--purple{background:#EDE0F3}
.trust__t{display:block;font:800 15.5px/1.3 Manrope,sans-serif;color:var(--ink);margin-bottom:3px}
.trust__s{display:block;font-size:14px;line-height:1.5}

/* ------------------------------------------------------------------ CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;transition:var(--t)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#D3D8DE}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card__rule{height:4px;display:block}
.card__rule--interior{background:var(--red)}
.card__rule--exterior{background:var(--green)}
.card__rule--property{background:var(--amber)}
.card__rule--specialist{background:var(--purple)}
.card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.card__t{font:700 clamp(1.25rem,1.15rem + .5vw,1.5rem)/1.25 Manrope,sans-serif;color:var(--ink);margin-bottom:8px}
.card__p{font-size:15.5px;line-height:1.6;margin-bottom:18px}
.more{margin-top:auto;display:flex;align-items:center;gap:7px;font:600 15px/1 Inter,sans-serif;color:var(--red)}
.more svg{width:15px;height:15px;transition:var(--t)}
.card:hover .more{gap:11px}

.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.linkgrid a{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px;text-decoration:none;transition:var(--t)}
.linkgrid a:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--sh-1)}
.linkgrid strong{display:block;font:700 18px/1.3 Manrope,sans-serif;color:var(--ink);margin-bottom:6px}
.linkgrid span{font-size:15px;line-height:1.55;color:var(--ink-soft)}

/* ------------------------------------------------------------------ SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split img{border-radius:var(--r-card);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--sh-1)}
.ticks{list-style:none;margin:0 0 28px;padding:0}
.ticks li{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.55}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%2316202B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.ticks strong{color:var(--ink);font-weight:600}
.ticks a{text-decoration:none;font-weight:600}
.ticks a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- REVIEWS */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.revs--3{grid-template-columns:repeat(3,1fr)}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:28px;margin:0;display:flex;flex-direction:column;height:100%}
.rev blockquote{margin:14px 0 20px;padding:0;border:0;font-size:16.5px;line-height:1.65;color:var(--ink);flex:1}
.rev__who{display:flex;align-items:center;gap:11px;padding-top:18px;border-top:1px solid var(--line)}
.rev__av{width:38px;height:38px;border-radius:50%;background:var(--mist);border:1px solid var(--line);
  display:grid;place-items:center;font:800 14px/1 Manrope,sans-serif;color:var(--ink);flex:none}
.rev__name{display:block;font:600 15px/1.3 Inter,sans-serif;color:var(--ink)}
.rev__src{display:block;font-size:13px;color:var(--ink-soft)}
.rev-wrap{max-width:640px;margin:36px 0}
.rev-wrap--wide{max-width:760px;margin:56px auto 0}
.side__rev .rev{background:var(--mist)}

/* ------------------------------------------------------------------ AREAS */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.areas a{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:15px 16px;min-height:52px;text-decoration:none;
  color:var(--ink);font:500 15.5px/1.3 Inter,sans-serif;transition:var(--t)}
.areas a:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.areas svg{width:15px;height:15px;color:var(--red);flex:none}

/* ----------------------------------------------------------------- STEPS */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;position:relative}
.steps::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:2px;background:var(--line)}
.step{text-align:center;position:relative}
.step__n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  font:800 19px/1 Manrope,sans-serif;border:4px solid #fff;position:relative;z-index:1}
.sec--mist .step__n{border-color:var(--mist)}
.step__n--1,.step__n--5{background:var(--red);color:#fff}
.step__n--2{background:var(--amber);color:var(--ink)}
.step__n--3,.step__n--6{background:var(--green);color:var(--ink)}
.step__n--4{background:var(--purple);color:#fff}
.step h3{font-size:17px;margin-bottom:6px}
.step p{font-size:14.5px;line-height:1.55;margin:0}
.steps-ol{padding-left:20px;margin:0 0 1.1em}
.steps-ol li{margin-bottom:10px;line-height:1.6}

/* -------------------------------------------------------------------- FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;min-height:48px;
  font:700 17px/1.4 Manrope,sans-serif;color:var(--ink);
  display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:-4px;
  border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(45deg);transition:var(--t)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:4px}
.faq__a{padding:0 24px 22px}
.faq__a p{margin:0;font-size:16px}

/* --------------------------------------------------------- PROSE + SIDEBAR */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.cols--form{grid-template-columns:minmax(0,1fr) 380px}
.prose{max-width:72ch}
.prose h2{margin-top:48px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:32px}
.prose ul:not(.ticks){padding-left:20px}
.prose ul:not(.ticks) li{margin-bottom:9px;line-height:1.6}
.prose-intro{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);line-height:1.6;max-width:68ch;margin-bottom:48px}
.prose .faq{margin:0}
.note{background:#FFF8E8;border:1px solid #F0DBAA;border-left:4px solid var(--amber);
  border-radius:var(--r-card);padding:18px 22px;margin:0 0 28px;font-size:15.5px;line-height:1.6;color:#5C4A22}
.note strong{color:#3E3113}
.related{margin-top:48px;padding:26px;background:var(--mist);border-radius:var(--r-card);border:1px solid var(--line)}
.related h2{margin:0 0 14px;font-size:17px}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.related li a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:14.5px;text-decoration:none;color:var(--ink);transition:var(--t)}
.related li a:hover{border-color:var(--red);color:var(--red)}

.side{position:sticky;top:130px;display:grid;gap:20px}
.side__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.side__card--soft{background:var(--mist)}
.side__card h3{font-size:18px;margin-bottom:12px}
.side__card p{font-size:15px;line-height:1.6}
.side__hrs{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px}
.side__hrs svg{width:15px;height:15px;color:var(--red);flex:none}
.side__hint{font-size:13.5px;line-height:1.5;margin:-2px 0 18px}

/* ------------------------------------------------------------- PORTFOLIO */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.filter{font:600 15px/1 Inter,sans-serif;padding:12px 20px;min-height:44px;
  background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--ink);
  cursor:pointer;transition:var(--t)}
.filter:hover{border-color:var(--red);color:var(--red)}
.filter.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.projects{display:grid;gap:56px}
.proj__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-bottom:16px;flex-wrap:wrap}
.proj__head h3{margin:0}
.proj__meta{font-size:14.5px;color:var(--ink-soft)}
.proj__note{margin:14px 0 0;font-size:15px;max-width:68ch}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba--one{grid-template-columns:minmax(0,560px)}
.ba figure{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.ba img{aspect-ratio:4/3;object-fit:cover;width:100%}
.chip{position:absolute;top:12px;left:12px;font:600 12px/1 Inter,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;padding:7px 11px;border-radius:999px;color:var(--ink)}
.chip--b{background:var(--amber)}
.chip--a{background:var(--green)}
.is-hidden{display:none!important}

/* ------------------------------------------------------------------ FORMS */
.pf-form{max-width:600px}
.f{margin-bottom:18px}
.f label{display:block;font:600 15px/1.4 Inter,sans-serif;color:var(--ink);margin-bottom:6px}
.opt{font-weight:400;color:var(--ink-soft)}
.f input,.f select,.f textarea{width:100%;font-size:16px;font-family:inherit;
  padding:14px 16px;min-height:52px;border:1px solid var(--line);border-radius:var(--r-card);
  background:#fff;color:var(--ink);transition:var(--t)}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--red);outline:none;
  box-shadow:0 0 0 3px rgba(224,39,28,.12)}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}
.form__note{font-size:14px;margin:14px 0 0}

/* -------------------------------------------------------------- CTA BAND */
.ctaband{background:var(--ink);color:#C7CED6;position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--amber) 25% 50%,
             var(--green) 50% 75%,var(--purple) 75% 100%)}
.ctaband h2{color:#fff}
.ctaband .lead{color:#C7CED6;margin-bottom:32px}
.ctaband .eyebrow{color:var(--amber)}

/* ----------------------------------------------------------------- FOOTER */
.ftr{background:#0F1720;color:#98A2AE;font-size:15px;padding:72px 0 0}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.ftr__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.ftr .foot__h,.ftr h4{color:#fff;font:800 15px/1.3 Manrope,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:18px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:10px}
.ftr a{color:#98A2AE;text-decoration:none;transition:var(--t)}
.ftr a:hover{color:#fff}
.ftr p{line-height:1.65}
.ftr__logo{background:#fff;border-radius:var(--r-card);padding:12px 16px;display:inline-block;margin-bottom:18px}
.ftr__logo img{height:46px;width:auto}
.ftr__hrs{margin-top:16px;font-size:14px}
.ftr__bot{border-top:1px solid #1E2A36;padding:22px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:14px}
.ftr__bot a{margin-left:20px}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:38px;height:38px;border:1px solid #1E2A36;border-radius:8px;display:grid;place-items:center}
.socials a:hover{border-color:var(--red);background:var(--red)}
.socials svg{width:17px;height:17px;color:#fff}

/* ------------------------------------------------------- MOBILE ACTION BAR */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(22,32,43,.10);
  padding-bottom:env(safe-area-inset-bottom)}
.mbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:var(--mbar);text-decoration:none;font:600 12.5px/1 Inter,sans-serif;color:var(--ink)}
.mbar .i{display:block}
.mbar svg{width:20px;height:20px}
.mbar .i--red svg{color:var(--red)}
.mbar .i--wa svg{color:var(--wa)}
.mbar__q{background:var(--red);color:#fff!important}
.mbar__q svg{color:#fff}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1300px){
  .nav>ul>li>a{padding:13px 10px;font-size:15px}
  .tel span{display:none}
}
@media (max-width:1180px){
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .hdr__in{min-height:84px}
  .cols,.cols--form{grid-template-columns:1fr;gap:48px}
  .side{position:static;grid-template-columns:repeat(2,1fr);display:grid}
  .hero__grid,.phero__grid{grid-template-columns:1fr;gap:40px}
  .hero__badge{position:static;margin-top:18px;max-width:none}
  .cards,.linkgrid{grid-template-columns:repeat(2,1fr)}
  .revs,.revs--3{grid-template-columns:1fr}
  .areas{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:32px}
  .steps::before{display:none}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__i{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .trust__i:nth-child(-n+2){border-top:0}
  .split{grid-template-columns:1fr;gap:40px}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .mnav{top:84px}
}
@media (max-width:720px){
  body{padding-bottom:calc(var(--mbar) + env(safe-area-inset-bottom))}
  .util{display:none}
  .sec{padding:64px 0}
  .pf-hero{padding:48px 0 64px}
  .phero{padding:44px 0 40px}
  .hdr__in{min-height:72px}
  .mnav{top:72px}
  .brand img{height:44px}
  .cards,.linkgrid{grid-template-columns:1fr}
  .areas{grid-template-columns:repeat(2,1fr)}
  .side{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .step{display:grid;grid-template-columns:52px 1fr;gap:18px;text-align:left}
  .step__n{margin:0}
  .ba{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr;gap:32px}
  .mbar{display:flex}
  .btns .btn{flex:1 1 100%}
  .btns.center .btn{flex:1 1 auto}
}

/* =========================================================================
   v3 — hero background image, mega menu, colour bands, motion
   Appended block; overrides earlier rules where they collide.
   ========================================================================= */

:root{
  --tint-green:#F3F9EA;
  --tint-amber:#FFF7E9;
  --tint-purple:#F7F1FA;
  --tint-red:#FEF2F1;
}

/* Screen-reader-only. Used for card headings whose text is baked into the
   artwork — the heading stays in the document outline, the image is alt="". */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------------- COLOUR BANDS */
.sec--tint-green {background:var(--tint-green)}
.sec--tint-amber {background:var(--tint-amber)}
.sec--tint-purple{background:var(--tint-purple)}
.sec--tint-red   {background:var(--tint-red)}
.sec--tint-green .step__n,.sec--tint-amber .step__n,
.sec--tint-purple .step__n,.sec--tint-red .step__n{border-color:transparent}

.sec--ink{background:var(--ink);color:#C7CED6;position:relative}
.sec--ink h1,.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink .eyebrow{color:var(--amber)}
.sec--ink .lead{color:#C7CED6}
.sec--ink .areas a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.sec--ink .areas a:hover{background:rgba(255,255,255,.12);border-color:var(--amber);color:#fff}
.sec--ink .areas svg{color:var(--amber)}
.sec--ink::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--amber) 25% 50%,
             var(--green) 50% 75%,var(--purple) 75% 100%)}

/* Inner-page hero tints */
.phero--amber {background:var(--tint-amber)}
.phero--green {background:var(--tint-green)}
.phero--purple{background:var(--tint-purple)}

/* ------------------------------------------------- HERO BACKGROUND IMAGE */
.pf-hero{position:relative;overflow:hidden;background:#fff;padding:0;
  min-height:clamp(520px,58vw,720px);display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;z-index:0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:left center;
  background:#fff}
/* Guarantees the copy stays readable over the artwork's busiest edge. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.72) 46%,
    rgba(255,255,255,.96) 56%,
    #fff 66%)}
.hero__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;
  width:100%;padding-block:64px}
.hero__content .lead{margin-bottom:30px}
.pf-hero .revstrip{border-top-color:rgba(22,32,43,.14)}

@media (max-width:1180px){
  .pf-hero{display:block;min-height:0}
  .hero__bg{position:relative;inset:auto;height:auto}
  .hero__bg img{height:auto;aspect-ratio:1920/823;object-position:left center}
  .hero__scrim{display:none}
  .hero__spacer{display:none}
  .hero__grid{grid-template-columns:1fr;padding-block:40px 56px}
}
@media (max-width:720px){
  .hero__bg img{aspect-ratio:16/10;object-position:22% center}
}

/* ------------------------------------------------------------ MEGA MENU */
.nav>ul>li{position:static}                 /* panel spans the header, not the item */
.hdr{position:sticky}                        /* containing block for .mega */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 18px 40px rgba(22,32,43,.14);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  z-index:40;max-height:calc(100vh - 140px);overflow-y:auto;
}
.has-mega:hover>.mega,.has-mega:focus-within>.mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__in{max-width:var(--wrap);margin:0 auto;padding:32px var(--pad) 36px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.mega__h{font:600 12.5px/1.4 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 16px}
.mega__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega__list--svc  {grid-template-columns:repeat(3,1fr)}
.mega__list--areas{grid-template-columns:repeat(4,1fr)}
.mega__list--adv  {grid-template-columns:repeat(2,1fr)}
.mega__list a{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-radius:var(--r-card);text-decoration:none;color:var(--ink);
  font:500 15px/1.4 Inter,sans-serif;transition:var(--t)}
.mega__list a:hover{background:var(--mist);color:var(--red)}
.mega__list strong{display:block;font-weight:600;font-size:15px}
.mega__list small{display:block;font-size:13px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.mega__list a:hover small{color:var(--ink-soft)}
.mega__list svg{width:14px;height:14px;color:var(--red);flex:none;margin-top:3px}
.dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px}
.dot--interior{background:var(--red)}
.dot--exterior{background:var(--green)}
.dot--property{background:var(--amber)}
.dot--specialist{background:var(--purple)}
.mega__all{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.mega__all a{font:600 15px/1 Inter,sans-serif;text-decoration:none}

.mega__promo{display:block;background:var(--mist);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;text-decoration:none;transition:var(--t)}
.mega__promo:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--sh-1)}
.mega__promo-img{display:block;overflow:hidden;background:#fff}
.mega__promo-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 400ms var(--t)}
.mega__promo:hover .mega__promo-img img{transform:scale(1.04)}
.mega__promo-body{display:block;padding:18px}
.mega__promo-k{display:block;font:600 11.5px/1.4 Inter,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red);margin-bottom:6px}
.mega__promo-t{display:block;font:700 17px/1.25 Manrope,sans-serif;color:var(--ink);margin-bottom:6px}
.mega__promo-p{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-bottom:12px}

/* Mobile: mega panels become plain stacked lists inside the off-canvas menu */
.mnav .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
  border:0;max-height:none;overflow:visible}
.mnav .mega__in{display:block;padding:0 0 10px 14px;max-width:none}
.mnav .mega__list--svc,.mnav .mega__list--areas,.mnav .mega__list--adv{grid-template-columns:1fr}
.mnav .mega__list a{padding:11px 4px;font-size:15px;border-bottom:1px solid var(--line)}
.mnav .mega__list small{display:none}
.mnav .mega__promo,.mnav .mega__h{display:none}
.mnav .mega__all{border-top:0;padding-top:10px}
.mnav .caret{display:none}

/* ----------------------------------------------------- CARDS with media */
.card__media{display:block;overflow:hidden;background:#fff}
.card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 500ms cubic-bezier(.2,0,.2,1)}
.card:hover .card__media img{transform:scale(1.045)}
.cards--svc{margin-top:8px}

/* --------------------------------------------------- SCROLL PROGRESS BAR */
.hdr__rule{position:relative;background:var(--line)}
.hdr__prog{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--red),var(--amber),var(--green),var(--purple));
  transition:width 90ms linear}

/* --------------------------------------------------------- SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity 520ms cubic-bezier(.2,0,.2,1),transform 520ms cubic-bezier(.2,0,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* Animated connector on the process row */
.steps::after{content:"";position:absolute;top:26px;left:8%;width:0;height:2px;
  background:linear-gradient(90deg,var(--red),var(--amber),var(--green),var(--purple));
  transition:width 1200ms cubic-bezier(.2,0,.2,1)}
.steps.is-in::after{width:84%}

/* ------------------------------------------------------------ BACK TO TOP */
.totop{position:fixed;right:20px;bottom:24px;z-index:65;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:#fff;box-shadow:var(--sh-2);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--t)}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--red);border-color:var(--red);color:#fff}
.totop svg{width:20px;height:20px}
@media (max-width:720px){ .totop{bottom:calc(var(--mbar) + 16px);right:14px} }

/* Respect the user's motion preference — everything above degrades to static. */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .steps::after{transition:none;width:84%}
  .hero__bg{transform:none!important}
  .card:hover .card__media img,.mega__promo:hover .mega__promo-img img{transform:none}
}

/* --- fixes -------------------------------------------------------------
   `.nav ul{display:flex}` (specificity 0,1,1) was beating `.mega__list`
   (0,1,0), so the mega lists laid out as a single flex row and overflowed.
   Scoping these to .nav raises them above it. */
.nav .mega__list,.mnav .mega__list{display:grid;gap:2px;align-items:start}
.nav .mega__list--svc   {grid-template-columns:repeat(3,minmax(0,1fr))}
.nav .mega__list--areas {grid-template-columns:repeat(4,minmax(0,1fr))}
.nav .mega__list--adv   {grid-template-columns:repeat(2,minmax(0,1fr))}
.mnav .mega__list{grid-template-columns:1fr!important}
.nav .mega__list a{white-space:normal}

/* Keep the four-colour brand rule visible and let progress reveal it:
   a white veil sits over the gradient and retreats as the page scrolls. */
.hdr__rule{background:linear-gradient(90deg,var(--red) 0 25%,var(--amber) 25% 50%,
           var(--green) 50% 75%,var(--purple) 75% 100%)}
.hdr__prog{position:absolute;top:0;right:0;bottom:0;left:auto;width:100%;
  background:rgba(255,255,255,.74);transition:width 90ms linear}

/* Give the hero copy enough room for all three buttons on one line. */
.hero__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
@media (min-width:1181px){ .hero__content .btns .btn{padding-inline:22px} }

/* Promo panel height trimmed so the mega panel doesn't leave a tall gap
   under the link columns. */
.mega__promo-img img{aspect-ratio:16/10}
.mega__promo-body{padding:16px 18px}
.mega__promo-p{margin-bottom:10px}
.mega__in{padding-bottom:28px}
/* Keep the brand rule readable at the top of the page while still letting it
   intensify as you scroll. */
.hdr__prog{background:rgba(255,255,255,.6)}

/* --- more fixes --------------------------------------------------------
   `.ticks li{display:flex}` made <strong> and the following text node two
   separate flex items, so they fought over the column width and the copy
   collapsed into a narrow ragged block. Absolute-positioning the marker keeps
   the item a normal text block. */
.ticks li{display:block;position:relative;padding:11px 0 11px 35px}
.ticks li::before{position:absolute;left:0;top:14px;margin-top:0}

/* Card text must not inherit the wrapping anchor's link colour. */
.card__t{color:var(--ink)}
.card__p{color:var(--ink-soft)}
.card .more{color:var(--red)}

/* Give the split section's tick list a little more breathing room. */
.split .ticks li{font-size:16px;line-height:1.6}

/* Grid `1fr` resolves its minimum to auto, so a wide image can refuse to
   shrink and starve the text column. minmax(0,1fr) is the robust form. */
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cols{grid-template-columns:minmax(0,1fr) 340px}
.cols--form{grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:1180px){ .split,.cols,.cols--form{grid-template-columns:minmax(0,1fr)} }

/* Scope the hero column split to desktop. The unscoped rule appended above was
   overriding the mobile single-column rule and squeezing the headline. */
@media (min-width:1181px){
  .hero__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,1fr)!important}
  .hero__spacer{display:none!important}
}

/* On the tinted bands the standard brand red measures 4.2–4.4 against the
   background — just under AA — so links and eyebrows there step down to the
   darker red, which clears it comfortably. Buttons are unaffected: white on
   solid red is 4.69 whatever the page behind it. */
.sec--tint-green .eyebrow,.sec--tint-amber .eyebrow,
.sec--tint-purple .eyebrow,.sec--tint-red .eyebrow,
.phero--amber .eyebrow,.phero--green .eyebrow,.phero--purple .eyebrow,
.sec--tint-green p a,.sec--tint-amber p a,.sec--tint-purple p a,.sec--tint-red p a,
.phero--amber p a,.phero--green p a,.phero--purple p a,
.sec--tint-green li a,.sec--tint-amber li a,.sec--tint-purple li a,.sec--tint-red li a{
  color:var(--red-dark);
}


/* =========================================================================
   WordPress integration
   ========================================================================= */

:0; }

/* Logged-in admin bar must not sit on top of the sticky header. */
body.admin-bar .hdr{ top:32px; }
@media (max-width:782px){ body.admin-bar .hdr{ top:46px; } }
body.admin-bar .mnav{ top:calc(96px + 32px); }

/* WordPress core alignment + caption classes, since we replace the theme's. */
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.aligncenter{ margin-inline:auto; }
.wp-caption-text{ font-size:14px; color:var(--ink-soft); margin-top:8px; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* The default WordPress search / 404 body copy uses the prose measure. */
.pf-simple{ padding-block:96px; }
.pf-simple .in{ max-width:760px; }




/* ------------------------------------------------------ FOCUS INDICATOR
   Amber on its own measures 2.03:1 against white — below the 3:1 that WCAG
   2.1 (1.4.11) requires for a non-text indicator. A dark ring with an amber
   halo stays visible on light and dark surfaces alike, so keyboard users get
   the same indicator everywhere. Do not "simplify" this back to one colour. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:2px;
  box-shadow:0 0 0 6px var(--amber)}
.sec--ink :focus-visible,.ctaband :focus-visible,.ftr :focus-visible{
  outline-color:var(--amber);box-shadow:0 0 0 6px rgba(255,255,255,.9)}



/* ------------------------------------------------------------ FOOTER FIX
   Three faults, all fixed here:

   1. The footer menus are wp_nav_menu output, so a parent theme can hand them
      `.menu{display:flex}`, which lays the links out as a wrapping row with no
      gaps — "InteriorExteriorVilla" run together. They now carry their own
      class and an explicit display, so no parent theme can flatten them again.
   2. Those flexed lists had a huge min-content width, which starved the first
      grid column until its paragraph wrapped one word per line. minmax(0,…)
      stops a column being forced wider than its share.
   3. The footer is now full width, matching the header, rather than capped at
      the 1240px content wrap. */

.ftr__in{max-width:none;margin:0;padding:0 var(--hpad)}
.ftr__cols{display:grid;gap:44px;padding-bottom:48px;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)}
.ftr__about p{max-width:44ch}
.ftr__list{display:block;list-style:none;margin:0;padding:0}
.ftr__list li{display:block;margin:0 0 10px}
.ftr__list li a{display:inline-block}
.ftr__bot{padding-inline:0}

@media (max-width:1180px){
  .ftr__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:720px){
  .ftr__cols{grid-template-columns:minmax(0,1fr);gap:32px}
  .ftr__about p{max-width:none}
}

/* ------------------------------------------------- DIVI TYPOGRAPHY OVERRIDE
   Divi's own stylesheet styles bare h1–h6 (uppercase, its own sizes) and loads
   after this file, so equal-specificity element selectors lose. Prefixing with
   `body` lifts these to (0,0,2) and settles it without !important or a load-
   order fight. Only the properties Divi actually overrides are restated. */

body h1, body h2, body h3, body h4, body h5, body h6{
  font-family:Manrope,system-ui,sans-serif;color:var(--ink);
  letter-spacing:-.02em;text-transform:none;padding-bottom:0}
body h1{font-size:clamp(2.125rem,1.6rem + 2.4vw,3.25rem);line-height:1.1;font-weight:800}
body h2{font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);line-height:1.15;font-weight:700}
body h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);line-height:1.25;font-weight:700}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.7;color:var(--ink-soft)}
body a{color:var(--red)}

/* Divi re-applies list bullets inside content areas, which put a stray dot in
   front of every breadcrumb and menu item. Only the decorative lists are reset;
   real prose lists keep their bullets. */
body .crumbs, body .crumbs li,
body .nav ul, body .nav li,
body .mnav ul, body .mnav li,
body .ftr__list, body .ftr__list li,
body .mega__list, body .mega__list li,
body .socials, body .socials li,
body .ticks, body .ticks li{list-style:none}

/* ------------------------------------------------- DIVI CONTACT FORM SKIN
   Divi's own contact form module, dressed in the site's form styles.
   Divi hides field labels by default; they are shown here, because a
   placeholder on its own is not a label (WCAG 3.3.2) and vanishes the
   moment somebody starts typing. */
.pfp-form.et_pb_contact_form_container{max-width:600px;margin:0;padding:0}
.pfp-form .et_pb_contact{width:100%}
.pfp-form .et_pb_contact_form{display:block}
.pfp-form p.et_pb_contact_field{padding:0!important;margin:0 0 18px!important;
  width:100%!important;float:none!important}
.pfp-form .et_pb_contact_form_label{display:block!important;position:static!important;
  font:600 15px/1.4 Inter,sans-serif;color:var(--ink);margin:0 0 6px;padding:0;
  width:auto;height:auto;clip:auto;overflow:visible;text-transform:none;letter-spacing:0}
.pfp-form .et_pb_contact_field .input,
.pfp-form .et_pb_contact_field input.input,
.pfp-form .et_pb_contact_field select.input,
.pfp-form .et_pb_contact_field textarea.input{width:100%;font-size:16px;
  font-family:Inter,system-ui,sans-serif;line-height:1.4;color:var(--ink);
  padding:14px 16px;min-height:52px;background-color:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);
  transition:var(--t);-webkit-appearance:none;appearance:none}
.pfp-form .et_pb_contact_field select.input{padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316202B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.pfp-form .et_pb_contact_field textarea.input{min-height:130px;resize:vertical;display:block}
.pfp-form .et_pb_contact_field .input:focus{border-color:var(--red);outline:none;
  box-shadow:0 0 0 3px rgba(224,39,28,.12)}
.pfp-form .et_pb_contact_field .input::placeholder{color:var(--ink-soft);opacity:1}
.pfp-form .et_pb_contact_field.et_contact_error .input,
.pfp-form .et_pb_contact_field .input.et_contact_error{border-color:var(--red);
  box-shadow:0 0 0 3px rgba(224,39,28,.12)}
.pfp-form .et_contact_bottom_container{float:none;text-align:left;margin:6px 0 0;width:100%}
.pfp-form .et_pb_contact_submit.et_pb_button{display:inline-flex;align-items:center;
  justify-content:center;gap:9px;font:600 16px/1 Inter,sans-serif!important;
  padding:16px 26px!important;min-height:52px;border-radius:var(--r-btn);
  border:2px solid transparent!important;background:var(--red)!important;color:#fff!important;
  cursor:pointer;transition:var(--t);text-transform:none;letter-spacing:0}
.pfp-form .et_pb_contact_submit.et_pb_button:hover{background:var(--red-dark)!important;
  color:#fff!important;padding:16px 26px!important}
.pfp-form .et_pb_contact_submit.et_pb_button:after,
.pfp-form .et_pb_contact_submit.et_pb_button:before{display:none!important}
.pfp-form .et-pb-contact-message{margin:0 0 18px}
.pfp-form .et-pb-contact-message p{margin:0 0 .6em}
.pfp-form .et-pb-contact-message ul{list-style:disc;margin:0;padding:0 0 0 1.2em}
.pfp-form .et_pb_contact_error_text{color:var(--red);font-weight:600}
.pfp-formnote .form__note{margin:14px 0 0}

/* Form-control boundaries need 3:1 against white (WCAG 1.4.11), which the
   card hairline does not give. Controls get their own, darker line. */
.pfp-form .et_pb_contact_field .input,
.pfp-form .et_pb_contact_field input.input,
.pfp-form .et_pb_contact_field select.input,
.pfp-form .et_pb_contact_field textarea.input{border-color:#8A929C}
/* Keep the site's focus ring. The earlier rule suppressed the outline, which
   left keyboard users with a 12%-alpha halo and nothing else. */
.pfp-form .et_pb_contact_field .input:focus{outline:revert}
.pfp-form .et_pb_contact_field .input:focus-visible{outline:3px solid var(--ink);
  outline-offset:2px;box-shadow:0 0 0 6px var(--amber)}
.pfp-form .et_pb_contact_submit.et_pb_button:focus-visible{outline:3px solid var(--ink);
  outline-offset:2px;box-shadow:0 0 0 6px var(--amber)}

/* ------------------------------------------------- PORTFOLIO IMAGE PAIRS
   The one rule Divi has no native setting for: the before and after
   photographs are different shapes, so without a shared aspect ratio the two
   columns finish at different heights. Everything else on that page is a
   stock Divi module. */
.pfp-ba-img img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}

/* -------------------------------------------------- GOOGLE RATING PANEL
   The verified Google rating. The figure is typed in, not fetched, so the
   date it was checked is shown beside it — the claim is dated and can be
   audited against the live listing. */
.grate{display:flex;align-items:center;gap:22px;background:var(--mist);
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:22px 26px;margin:0 0 34px}
.grate__score{font:800 44px/1 Manrope,system-ui,sans-serif;color:var(--ink);
  letter-spacing:-.02em;flex:none}
.grate .stars svg{width:22px;height:22px}
.grate__meta{margin:7px 0 0;font-size:15px;color:var(--ink-soft)}
@media (max-width:560px){
  .grate{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
}

/* ------------------------------------------------ ALL-REVIEWS GRID
   The testimonials page carries every Google review, and they run from one
   line to a full paragraph. A CSS grid would stretch every card in a row to
   the height of the longest; columns let each card keep its own height. */
.revs--all{display:block;column-count:3;column-gap:26px}
.revs--all .revcol{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 26px}
.revs--all .rev{height:auto}
@media (max-width:980px){.revs--all{column-count:2}}
@media (max-width:640px){.revs--all{column-count:1}}

/* -------------------------------- TWO-SOURCE RATING PANEL + FB BADGE
   Facebook has no star rating, only a recommendation, so its cards carry a
   badge rather than stars. Inventing five stars for a thumbs-up would be a
   claim nobody made. */
.grate{flex-wrap:wrap;gap:20px 52px;align-items:center}
.grate__it{display:flex;align-items:center;gap:20px}
.grate__chk{flex-basis:100%;margin:0;font-size:14px;color:var(--ink-soft)}
.rev__rec{display:inline-flex;align-items:center;font:700 11px/1 Inter,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--green);
  padding:7px 12px;border-radius:999px}
@media (max-width:560px){.grate__it{gap:14px}}

/* --------------------------------------------------- PHONE LAYOUT
   1. The hero artwork is a wide landscape illustration. Stacked above the
      headline on a phone it pushes the words and the buttons below the fold,
      so it is dropped there and kept on tablet and desktop.
   2. Four trust items in two columns leaves each one about 140px wide, which
      breaks the headings across three lines. One per row on a phone. */
@media (max-width:720px){
  .pf-hero .hero__bg{display:none}
  .pf-hero .hero__grid{padding-block:28px 44px}

  .trust__grid{grid-template-columns:1fr}
  .trust__i{border-left:0;border-top:1px solid var(--line);padding:18px 0;align-items:center}
  .trust__i:nth-child(-n+2){border-top:1px solid var(--line)}
  .trust__i:first-child{border-top:0}
}