/* ============================================================
   Northern Doors — "Refined" refresh (Nine10, Sept 2026)
   1 of 2: site-wide styling layer.

   Changes FORM only — type rhythm, button geometry, surfaces,
   hero contrast. It deliberately never sets a brand colour:
   every colour stays whatever the Elementor global kit or the
   per-widget setting already says. Disable to revert.
   ============================================================ */

:root{
  --nd-radius:6px;
  --nd-radius-sm:4px;
  --nd-shadow-lg:0 10px 30px rgba(16,24,40,.09);
  --nd-ease:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- Heading rhythm ---------------------------------- */
.elementor-heading-title{letter-spacing:-.02em !important}
h1.elementor-heading-title,
h2.elementor-heading-title{line-height:1.16 !important}
h3.elementor-heading-title,
h4.elementor-heading-title{line-height:1.3 !important;letter-spacing:-.015em !important}
h5.elementor-heading-title,
h6.elementor-heading-title,
p.elementor-heading-title{letter-spacing:-.005em !important}

/* ---------- Body copy --------------------------------------- */
.elementor-widget-text-editor,
.elementor-widget-text-editor p{line-height:1.65}
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* NOTE: icon-list spacing is deliberately left alone. Tightening
   or loosening it changes row height, and at least one panel on
   the site is sized to fit its list exactly. */

/* ---------- Buttons ----------------------------------------- */
.elementor-button{
  border-radius:var(--nd-radius) !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  white-space:nowrap;          /* never break a label mid-word */
  transition:background-color var(--nd-ease),color var(--nd-ease),
             border-color var(--nd-ease),box-shadow var(--nd-ease),
             transform var(--nd-ease) !important;
}
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-default{padding-block:13px !important;padding-inline:26px !important}
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl{padding-block:16px !important;padding-inline:32px !important}
.elementor-button:hover,
.elementor-button:focus-visible{transform:translateY(-1px);box-shadow:0 5px 14px rgba(16,24,40,.18)}
.elementor-button:active{transform:translateY(0)}

/* ---------- Images (no !important: explicit radii win) ------- */
.elementor-widget-image img,
.elementor-image-box-img img{border-radius:var(--nd-radius)}
.elementor-widget-image-carousel img,
.elementor-widget-theme-site-logo img,
.elementor-widget-site-logo img{border-radius:0}

/* ---------- Product / image-box tiles ----------------------- */
.elementor-widget-image-box .elementor-image-box-wrapper{
  border-radius:var(--nd-radius);
  transition:transform var(--nd-ease),box-shadow var(--nd-ease);
}
.elementor-widget-image-box:hover .elementor-image-box-wrapper{transform:translateY(-2px)}
.elementor-image-box-title{letter-spacing:-.015em;line-height:1.3}

/* ---------- Testimonials ------------------------------------ */
.elementor-testimonial-wrapper{border-radius:var(--nd-radius)}
.elementor-testimonial-content{line-height:1.6}

/* ---------- Navigation -------------------------------------- */
@media (min-width:1025px){
  .elementor-nav-menu--main .elementor-item{letter-spacing:.005em;transition:color var(--nd-ease) !important}
  .elementor-widget-nav-menu .elementor-nav-menu ul.sub-menu{
    border-radius:var(--nd-radius);overflow:hidden;box-shadow:var(--nd-shadow-lg);
  }
}

/* ---------- Forms ------------------------------------------- */
.elementor-field-group input:not([type=submit]),
.elementor-field-group textarea,
.elementor-field-group select,
.gform_wrapper input:not([type=submit]),
.gform_wrapper textarea,
.gform_wrapper select{
  border-radius:var(--nd-radius-sm) !important;
  transition:border-color var(--nd-ease),box-shadow var(--nd-ease);
}
.elementor-field-group input:not([type=submit]):focus,
.elementor-field-group textarea:focus,
.gform_wrapper input:not([type=submit]):focus,
.gform_wrapper textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(25,70,152,.14)}

.elementor-search-form__container{border-radius:var(--nd-radius) !important;overflow:hidden}

/* ---------- Accordions (FAQ) -------------------------------- */
.e-n-accordion-item,
.elementor-accordion .elementor-accordion-item{border-radius:var(--nd-radius);overflow:hidden}
.e-n-accordion-item summary{transition:background-color var(--nd-ease)}

/* ============================================================
   Hero banners
   Every banner already carried an Elementor background overlay,
   but it was a black gradient anchored to the BOTTOM, so the
   headline — which sits mid-height — got almost no protection
   and legibility swung with the photo. Now a neutral darkening —
   no colour cast, just enough to hold white text — weighted to
   where the type actually sits. The client asked for the navy
   tint to come off, so keep these greys neutral if they are
   ever retuned. Alphas are baked in, so --overlay-opacity is
   normalised to 1.
   ============================================================ */
.elementor-element-fe6cff7,   /* Services */
.elementor-element-eb31fa5,   /* Residential Garage Door Division */
.elementor-element-7810a59,   /* Commercial Overhead Door Division */
.elementor-element-f80f904,   /* Commercial Steel Man Doors */
.elementor-element-ccb4087,   /* About Us */
.elementor-element-9419d9b,   /* Contact Us */
.elementor-element-77dac0d,   /* FAQ */
.elementor-element-aeffb94,   /* Home — hero slide 1 */
.elementor-element-12f77fa{   /* Home — hero slide 2 */
  --overlay-opacity:1;
}
.elementor-element-fe6cff7::before,
.elementor-element-eb31fa5::before,
.elementor-element-7810a59::before,
.elementor-element-f80f904::before,
.elementor-element-ccb4087::before,
.elementor-element-9419d9b::before,
.elementor-element-77dac0d::before{
  background-image:linear-gradient(180deg,
    rgba(0,0,0,.22) 0%,rgba(0,0,0,.42) 45%,
    rgba(0,0,0,.46) 78%,rgba(0,0,0,.50) 100%) !important;
  background-color:transparent !important;
  opacity:1 !important;
}
/* Home headline is left-aligned — weight the scrim that way */
.elementor-element-aeffb94::before,
.elementor-element-12f77fa::before{
  background-image:linear-gradient(100deg,
    rgba(0,0,0,.62) 0%,rgba(0,0,0,.50) 34%,
    rgba(0,0,0,.24) 70%,rgba(0,0,0,.16) 100%) !important;
  background-color:transparent !important;
  opacity:1 !important;
}

/* Home hero eyebrow — "Northern Doors Ltd" read as a stray line
   of body copy; treated as an eyebrow it gives the hero hierarchy.
   Wording unchanged. */
.elementor-element-2c10866 .elementor-heading-title,
.elementor-element-aeffb94 .elementor-widget-heading:first-of-type .elementor-heading-title,
.elementor-element-12f77fa .elementor-widget-heading:first-of-type .elementor-heading-title{
  text-transform:uppercase;
  letter-spacing:.16em !important;
  font-size:.82rem !important;
  font-weight:700 !important;
  color:#fff !important;
  opacity:.9;
}

/* ---------- Supplier / affiliation logos --------------------
   A mix of colours, weights and eras reads as clutter in a row.
   Desaturating settles them into one band; colour on hover. */
.elementor-widget-image-carousel .swiper-slide img{
  filter:grayscale(1);opacity:.68;
  transition:filter var(--nd-ease),opacity var(--nd-ease);
}
.elementor-widget-image-carousel .swiper-slide img:hover{filter:none;opacity:1}

/* ---------- Carousel arrows ---------------------------------
   NOTE: do not touch `transform` on swiper buttons. Elementor
   positions them with a translate(), so a hover transform
   replaces that offset and the button jumps out from under the
   cursor — which also means mouseup lands elsewhere and the
   click never registers. Colour transitions only. */
.e-n-carousel .elementor-swiper-button,
.elementor-swiper-button{
  transition:background-color var(--nd-ease),border-color var(--nd-ease),fill var(--nd-ease);
}

/* ---------- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .elementor-button:hover,
  .elementor-widget-image-box:hover .elementor-image-box-wrapper{transform:none}
}

/* ============================================================
   Staff cards (About, Services, division pages)
   The person's name and their role were both <h2>, both 700
   weight, both #333, and only 1px apart in size (20px vs 19px),
   separated by the card's flat 20px gap. Read as two competing
   titles — worst on cards with no bio, where the pair sat alone.
   The role is now a quiet uppercase label tucked under the name.
   Scoped to staff loop items so other loop templates are unaffected.
   ============================================================ */
.e-loop-item.type-staff .elementor-widget-heading + .elementor-widget-heading{
  margin-top:-14px;   /* card gap is 20px; leaves ~6px under the name */
}
.e-loop-item.type-staff .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title{
  font-size:.8rem !important;
  font-weight:600 !important;
  line-height:1.45 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase;
  color:var(--e-global-color-primary,#194698) !important;
}
/* A touch more air before the bio, so the name+role read as one unit */
.e-loop-item.type-staff .elementor-widget-heading + .elementor-widget-heading + .elementor-widget-text-editor{
  margin-top:4px;
}

/* ============================================================
   Affiliations band (site-wide footer-adjacent section)
   Was a white strip with a full-size bold heading and logos at
   mixed sizes spilling past the edge. The mockup makes it a
   quiet grey band with a small label and one even row of logos.
   Unlike the supplier logos these stay in full colour — they are
   accreditations, and the colour is the point.
   ============================================================ */
.elementor-element-c353795{
  background-color:#F5F6F8 !important;
}
@media (min-width:768px){
  .elementor-element-c353795 > .e-con-inner{
    flex-direction:column !important;
    align-items:center !important;
    gap:24px !important;
  }
  .elementor-element-c9e6126{width:100% !important}
  .elementor-element-c9e6126 .elementor-heading-title{
    text-align:center !important;
    font-size:.76rem !important;
    font-weight:700 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    color:#6B7280 !important;
  }
  .elementor-element-3f4de50{width:100% !important}
  .elementor-element-3f4de50 .swiper-wrapper{
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:24px 46px;
    transform:none !important;
  }
  .elementor-element-3f4de50 .swiper-slide{
    width:auto !important;
    margin:0 !important;
    flex:0 0 auto;
  }
  .elementor-element-3f4de50 .swiper-slide-duplicate{display:none !important}
  .elementor-element-3f4de50 .elementor-swiper-button,
  .elementor-element-3f4de50 .swiper-pagination{display:none !important}
}
/* Accreditation marks keep their colour and share one height */
.elementor-element-3f4de50 .swiper-slide img{
  filter:none !important;
  opacity:1 !important;
  max-height:58px !important;
  height:58px !important;
  width:auto !important;
  max-width:170px !important;
  object-fit:contain !important;
}

/* ============================================================
   Footer
   The mockup grounds the page on a near-black footer with quiet
   uppercase column headings, rather than a second block of brand
   blue directly under a blue section.
   ============================================================ */
.elementor-element-07bbf17{
  background-color:#0B0E1E !important;
}
.elementor-element-274aeb1{
  background-color:#0B0E1E !important;
  border-top:1px solid rgba(255,255,255,.12);
}
.elementor-element-66cb3ae .elementor-heading-title,
.elementor-element-5ef8b5d .elementor-heading-title,
.elementor-element-59b9935 .elementor-heading-title{
  font-size:.78rem !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:#fff !important;
}
.elementor-element-07bbf17 .elementor-icon-list-text,
.elementor-element-07bbf17 .elementor-widget-text-editor,
.elementor-element-274aeb1 .elementor-widget-text-editor{
  color:rgba(255,255,255,.76) !important;
}
.elementor-element-07bbf17 a,
.elementor-element-274aeb1 a{
  color:rgba(255,255,255,.76) !important;
}
.elementor-element-07bbf17 a:hover,
.elementor-element-274aeb1 a:hover{
  color:#fff !important;
}

/* Accreditation marks: one height, and a tighter cap on the wide
   ones (CFIB) so no single logo dominates the row. */
.elementor-element-3f4de50 .swiper-slide img{
  max-height:46px !important;
  height:46px !important;
  max-width:140px !important;
}

/* White-background logo files (the GPCA JPGs) were rendering as
   pale boxes on the grey band. Multiply blends their white away
   without touching the transparent PNGs beside them. */
.elementor-element-3f4de50 .swiper-slide img,
.elementor-element-b769f39 .swiper-slide img{
  mix-blend-mode:multiply;
}

/* Two affiliation slides render as pale panels because the slide
   and figure carry a white background of their own, which the
   image blend cannot reach. */
.elementor-element-3f4de50 .swiper-slide,
.elementor-element-3f4de50 figure,
.elementor-element-3f4de50 .elementor-carousel-image{
  background-color:transparent !important;
  box-shadow:none !important;
}

/* The pale panels either side of the affiliation logos are two
   leftover icon widgets that acted as marquee arrows. The row is
   static now, so they have nothing to do. Same for the brands row. */
.elementor-element-e4c92f5,
.elementor-element-e53cec7,
.elementor-element-ab9ae31{
  display:none !important;
}