/* Bridge: hand full layout control to the ported design CSS.
   Elementor only provides the container; every visual rule comes from styles.css. */
html{-webkit-text-size-adjust:100%}
body{margin:0}

/* Neutralise Elementor container chrome inside our ported templates */
[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .e-con-inner,
[data-elementor-type="footer"] .e-con,
[data-elementor-type="footer"] .e-con-inner,
[data-elementor-type="wp-page"] .e-con:not(.hclv-el),
[data-elementor-type="wp-page"] .e-con-inner:not(.hclv-el),
[data-elementor-type="single-post"] .e-con,
[data-elementor-type="single-post"] .e-con-inner{
  padding:0!important;margin:0!important;max-width:none!important;width:100%!important;
  --container-max-width:100%;--content-width:100%;--padding-top:0;--padding-bottom:0;
  --padding-left:0;--padding-right:0;display:block!important
}
/* Pages still built as a single HTML widget. */
.e-con:not(.hclv-el)>.elementor-widget-html,
.e-con:not(.hclv-el)>.elementor-widget-html>.elementor-widget-container{width:100%;margin:0;padding:0}
.e-con:not(.hclv-el)>.elementor-widget:not(:last-child){margin-block-end:0}
.elementor-element{--widgets-spacing:0px 0px}

/* Hello Elementor scaffolding we are replacing */
.site-header,.site-footer,.page-header{display:none!important}
.site-main,.page-content,.entry-content{margin:0;padding:0;max-width:none}
.elementor-section.elementor-section-boxed>.elementor-container{max-width:none}

/* Elementor resets that would otherwise leak into the design's own components */
[data-elementor-type] img{max-width:100%;display:block}
[data-elementor-type] button{font:inherit}

/* ---------------------------------------------------------------------------
   Native Elementor pages (.hclv-el containers).

   Text widgets are marked .hclv-flat (display:contents), so the element the
   kit styles is a direct child of the kit's own parent and the kit CSS applies
   unchanged - including child-combinator rules and margins. What remains here
   is only what Elementor's container reset takes away. */

.hclv-el{padding:0;--gap:0px;--row-gap:0px;--column-gap:0px;--display:block;display:block;
  --container-max-width:none;--content-width:none;
  /* Elementor containers default to a column flex; the kit lays these out itself. */
  --flex-direction:row;--flex-wrap:wrap;--justify-content:normal;--align-items:normal}
.hclv-el>.e-con-inner{padding:0;max-width:none;width:100%;display:block}
.hclv-el .elementor-widget:not(:last-child){margin-block-end:0}

/* A widget marked .hclv-flat hands its children straight to the parent's layout. */
.hclv-flat{display:contents!important}
.elementor-widget-text-editor>.elementor-widget-container,
.elementor-widget-html>.elementor-widget-container{display:contents}

/* --- Zeroing padding above also removed the kit's own spacing. Restate it. --- */
.hclv-el.container{width:min(1220px,calc(100% - 96px));margin-inline:auto}
.hclv-el.section{padding-top:99px;padding-bottom:99px}
.hclv-el.breadcrumbs{padding-top:26px}
.hclv-el.kitchen-hero{padding-top:35px;padding-bottom:50px}
.hclv-el.extras-section{padding:80px 0}
.hclv-el.kitchen-quote-band{padding:50px 0}
.hclv-el.kitchen-form-section{padding:85px 0}
.hclv-el.related-services{padding-top:40px;padding-bottom:75px}
/* Listing / content pages */
.hclv-el.page-breadcrumb{padding-top:25px}
.hclv-el.page-hero{padding-top:38px;padding-bottom:65px}
.hclv-el.soft-section{padding:75px 0}
.hclv-el.page-banner{padding:52px 0}
.hclv-el.service-card{padding:28px 26px}

@media(max-width:1100px){.hclv-el.container{width:calc(100% - 60px)}
  .hclv-el.service-card{padding:23px 21px}}
@media(max-width:900px){.hclv-el.section{padding-top:70px;padding-bottom:70px}}
@media(max-width:850px){.hclv-el.kitchen-form-section{padding:65px 0}}
@media(max-width:640px){.hclv-el.container{width:calc(100% - 40px)}
  .hclv-el.kitchen-hero{padding-top:27px;padding-bottom:35px}
  .hclv-el.extras-section{padding:58px 0}
  .hclv-el.page-hero{padding-top:30px;padding-bottom:42px}
  .hclv-el.soft-section{padding:55px 0}
  .hclv-el.page-banner{padding:43px 0}
  .hclv-el.service-card{padding:24px}}

/* Home page sections. */
.hclv-el.hero{display:grid;padding-top:50px;padding-bottom:46px}
.hclv-el.difference{padding:82px 0}
.hclv-el.difference-grid{display:grid}
.hclv-el.areas{padding:80px 0}
.hclv-el.quote-section{display:grid;padding-top:110px;padding-bottom:100px}
.hclv-el.faq-section{padding-bottom:110px}
.hclv-el.kitchen-faq{padding-bottom:65px}
@media(min-width:1500px){.hclv-el.hero{padding-top:60px;padding-bottom:55px}}
@media(max-width:850px){.hclv-el.difference{padding:65px 0}.hclv-el.areas{padding:65px 0}}
@media(max-width:640px){.hclv-el.hero{padding-top:35px;padding-bottom:34px}
  .hclv-el.difference{padding:60px 0}.hclv-el.areas{padding:58px 0}
  .hclv-el.faq-section{padding-bottom:65px}}

/* --- The kit styles these as flex/grid; restate it so the container default
       (display:block, set above) cannot win on source order. --- */
.hclv-el.kitchen-hero,.hclv-el.inclusion-grid,.hclv-el.related-services,
.hclv-el.kitchen-locations,.hclv-el.kitchen-form-layout,.hclv-el.faq-section,
.hclv-el.kitchen-area-list,
.hclv-el.page-hero,.hclv-el.service-grid,.hclv-el.detail-links{display:grid}
.hclv-el.service-card{display:flex;flex-direction:column}
/* Elementor writes --flex-direction:column per element, so set the property
   itself rather than the variable. */
.hclv-el.section-heading,.hclv-el.hero-actions,
.hclv-el.breadcrumbs,.service-subnav>.container.hclv-el,
.hclv-el.page-breadcrumb,
.page-banner>.container.hclv-el{display:flex;flex-direction:row}
/* Only these two spread their children; the rest pack to the start. */
.hclv-el.section-heading{justify-content:space-between}
.page-banner>.container.hclv-el{align-items:center;justify-content:space-between}
.hclv-el.section-heading{align-items:flex-end}
.hclv-el.breadcrumbs,.hclv-el.page-breadcrumb{flex-wrap:wrap}
.hclv-el.page-photo{display:block;position:relative}

/* The bridge's own selectors are more specific than the kit's, so they would
   otherwise beat the kit's responsive overrides. Restate those. */
@media(max-width:850px){
  .hclv-el.hero-actions{align-items:flex-start;flex-direction:column;gap:12px}
  .page-banner>.container.hclv-el{flex-direction:column;align-items:flex-start;gap:25px}
}
@media(max-width:640px){
  .hclv-el.section-heading{display:block}
  .hclv-el.hero-actions{flex-direction:row;align-items:center;gap:15px 22px}
}

/* Child-combinator kit rules cannot see through display:contents, so mirror
   the handful the page depends on, stepping through the flattened widget. */
.hclv-el.section-heading>.hclv-flat p{max-width:345px;font-size:16px;line-height:1.75}
.hclv-el.process .section-heading>.hclv-flat p{max-width:280px}
.hclv-el.process>.hclv-flat p.eyebrow{margin-bottom:15px}
.hclv-el.process>.hclv-flat .steps{margin-top:40px}
.hclv-el.kitchen-form-layout>.e-con>.hclv-flat h2{font-size:64px;letter-spacing:-3px}
.hclv-el.kitchen-form-layout>.e-con>.hclv-flat p:not(.eyebrow){font-size:18px;margin-top:23px;max-width:370px}
@media(max-width:1100px){.hclv-el.kitchen-form-layout>.e-con>.hclv-flat h2{font-size:56px}}
@media(max-width:850px){.hclv-el.section-heading>.hclv-flat p{max-width:260px}
  .hclv-el.kitchen-form-layout>.e-con>.hclv-flat h2{font-size:48px}}
@media(max-width:640px){.hclv-el.section-heading>.hclv-flat p{max-width:none;margin-top:20px}
  .hclv-el.kitchen-form-layout>.e-con>.hclv-flat h2{font-size:51px}
  .hclv-el.kitchen-form-layout>.e-con>.hclv-flat p:not(.eyebrow){font-size:17px}}

/* --- Widgets wearing the kit's components --- */

/* Headings: the kit's own h1/h2/h3 rules size them; only the colour, which
   Elementor's kit sets on the title element, has to be handed back. */
.hclv-el .elementor-widget-heading .elementor-heading-title{color:inherit}

/* Elementor's button widget, wearing the kit's .button. */
.hclv-el .elementor-button{background:var(--blue);border:1px solid var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:17px 24px;
  border-radius:8px;font-weight:600;font-size:15px;line-height:1.4;min-height:56px;
  text-decoration:none;transition:background .2s,transform .2s}
.hclv-el .elementor-button:hover{background:#103bd2;border-color:#103bd2;color:#fff;transform:translateY(-2px)}
.hclv-el .elementor-button-content-wrapper,.hclv-el .elementor-button-text{display:contents}
/* The kit's buttons carry an arrow; reproduce it without the SVG sprite. */
.hclv-el .elementor-button::after{content:"";width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:var(--hclv-arrow) center/contain no-repeat;mask:var(--hclv-arrow) center/contain no-repeat}
.hclv-el{--hclv-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E")}
.hclv-el.kitchen-quote-band .elementor-button,.hclv-el.page-banner .elementor-button{
  background:#fff;color:var(--navy);border-color:#fff;flex:none;gap:15px}
.hclv-el.kitchen-quote-band .elementor-button:hover,.hclv-el.page-banner .elementor-button:hover{
  background:#eef2ff;border-color:#eef2ff;color:var(--navy)}
@media(max-width:640px){.hclv-el .elementor-button{gap:15px;padding:15px 19px;font-size:14px}}

/* Nested accordion, wearing the kit's FAQ list. */
.faq-list .e-n-accordion,.faq-list .e-n-accordion-item-title-header{display:block}
.faq-list .e-n-accordion-item{border-bottom:1px solid var(--line)}
.faq-list .e-n-accordion-item-title{display:flex;align-items:center;justify-content:space-between;
  gap:25px;list-style:none;cursor:pointer;font-size:15px;font-weight:600;padding:22px 0;
  line-height:1.5;background:none;border:0;color:inherit}
/* The kit puts the question first and the toggle last, at 18px in blue.
   Colour and size go through Elementor's own accordion variables. */
.faq-list{--n-accordion-icon-normal-color:var(--blue);--n-accordion-icon-active-color:var(--blue);
  --n-accordion-icon-hover-color:var(--blue);--n-accordion-icon-size:18px}
.faq-list .e-n-accordion-item-title-icon{order:1;color:var(--blue);flex:none;
  display:flex;align-items:center}
.faq-list .e-n-accordion-item-title-icon span{display:flex;align-items:center}
.faq-list .e-n-accordion-item-title-icon svg{width:18px;height:18px}
.faq-list .e-n-accordion-item-title-header{order:0;flex:1 1 auto;min-width:0}
.faq-list .e-n-accordion-item-title-text{font-size:15px;font-weight:600;line-height:1.5;margin:0}
.faq-list .e-n-accordion-item>.e-con{display:block;padding:0;border:0;border-radius:0;background:none}
.faq-list .e-n-accordion-item p{font-size:16px;padding:0 28px 23px 0;line-height:1.8;color:var(--muted)}

/* The hero panel used where a service has no photograph of its own. */
.service-hero-card,.bathroom-hero-card{display:flex;flex-direction:column;gap:20px;
  justify-content:center;min-width:0;background:#f3f6ff;border:1px solid #e3e9ff;
  border-radius:20px 70px 20px 20px;padding:42px 40px}
.service-hero-card .icon,.bathroom-hero-card>.icon{width:36px;height:36px;color:var(--blue)}
.service-hero-card strong,.bathroom-hero-card strong{font-size:21px;line-height:1.35;
  letter-spacing:-.6px;color:var(--ink)}
.service-hero-card .check-list,.bathroom-hero-card .check-list{font-size:15px}
.bathroom-hero-note{padding-top:18px;border-top:1px solid #dfe6ff;font-size:12.5px;
  line-height:1.6;color:var(--muted)}
@media(max-width:850px){.service-hero-card,.bathroom-hero-card{padding:32px 28px;
  border-radius:18px 46px 18px 18px}
  .service-hero-card strong,.bathroom-hero-card strong{font-size:19px}}
@media(max-width:640px){.service-hero-card,.bathroom-hero-card{padding:26px 22px;border-radius:16px}}