/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme — Nelson Group Ltd
Template: betheme
Version: 2.0.2
*/

/* ==========================================================================
   NELSON GROUP — DESIGN SYSTEM
   Ported from the approved Claude Design prototype.
   Content lives in Muffin Builder "code" items; all styling lives here so the
   HTML blocks stay readable and safe for the client to edit.
   ========================================================================== */

:root {
  --ng-navy:        #17357d;
  --ng-navy-hero:   #0e1e42;
  --ng-navy-footer: #0b1730;
  --ng-orange:      #f47b20;
  --ng-orange-hi:   #ff8c33;
  --ng-tan:         #f9b878;
  --ng-cream:       #f5f3ee;
  --ng-border:      #e8e3da;
  --ng-placeholder: #eceae4;
  --ng-text:        #16171a;
  --ng-text-2:      #4a4d55;
  --ng-text-3:      #5c5f68;
  --ng-nav:         #3a3d44;
  --ng-max:         1200px;
}

/* ---------- base ---------- */

/* Colour is set on the scope only, never on p/li. A ".ng-scope p" rule would
   out-specify every component class below (.ng-lead, .ng-body, .ng-hero__text)
   and flatten all body copy to one colour. Paragraphs inherit instead. */
.ng-scope { font-family: "Poppins", system-ui, sans-serif; color: var(--ng-text); }

.ng-scope p,
.ng-scope li { font-family: "Poppins", system-ui, sans-serif; }

.ng-scope h1,
.ng-scope h2,
.ng-scope h3 { font-family: "Poppins", system-ui, sans-serif; margin: 0; }

.ng-scope ::selection { background: var(--ng-orange); color: #fff; }

/* No underline on links in any state. Betheme's `underline-links` option is
   already off, but this guarantees it regardless of theme options or updates. */
.ng-scope a,
.ng-scope a:link,
.ng-scope a:visited,
.ng-scope a:hover,
.ng-scope a:focus,
.ng-scope a:active,
.ng-scope a span { text-decoration: none; }

/* Keyboard users still need to see where they are — replace the underline cue
   with a focus ring rather than removing the affordance altogether. */
.ng-scope a:focus-visible {
  outline: 2px solid var(--ng-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.ng-scope img { max-width: 100%; }

/* Neutralise Betheme column spacing so our sections control their own rhythm */
.ng-scope .mcb-column-inner { margin-bottom: 0; }

/* ---------- layout primitives ---------- */

.ng-wrap {
  max-width: var(--ng-max);
  margin: 0 auto;
  padding: 80px 28px;
}
.ng-wrap--tight { padding-top: 56px; padding-bottom: 56px; }
.ng-wrap--flush { padding-top: 0; }

.ng-band-cream { background: var(--ng-cream); }
.ng-band-navy  { background: var(--ng-navy); }

.ng-grid  { display: grid; gap: 22px; }
.ng-grid2 { grid-template-columns: repeat(2, 1fr); }
.ng-grid3 { grid-template-columns: repeat(3, 1fr); }
.ng-grid4 { grid-template-columns: repeat(4, 1fr); }
.ng-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ---------- type ---------- */

.ng-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ng-orange);
  margin-bottom: 10px;
}
.ng-kicker--onDark {
  display: inline-block;
  color: var(--ng-tan);
  border: 1px solid rgba(249, 184, 120, .4);
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 22px;
}

.ng-h1 {
  font-size: clamp(30px, 5.6vw, 54px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 820px;
}
.ng-h2 {
  font-size: clamp(25px, 3.8vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--ng-text);
}
.ng-h3 { font-size: 20px; font-weight: 700; color: var(--ng-text); }

.ng-lead { font-size: 16px; line-height: 1.65; color: var(--ng-text-2); }
.ng-body { font-size: 14.5px; line-height: 1.55; color: var(--ng-text-3); }

.ng-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}

/* ---------- buttons ---------- */

.ng-btn {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.ng-btn--primary { background: var(--ng-navy); color: #fff !important; }
.ng-btn--primary:hover { background: var(--ng-orange); color: #fff !important; }
.ng-btn--orange { background: var(--ng-orange); color: #fff !important; font-size: 15.5px; padding: 15px 30px; border-radius: 11px; }
.ng-btn--orange:hover { background: var(--ng-orange-hi); }
.ng-btn--ghost {
  background: rgba(255,255,255,.1);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35);
  font-size: 15.5px; padding: 15px 30px; border-radius: 11px;
}
.ng-btn--ghost:hover { background: rgba(255,255,255,.2); }
.ng-btn--outline {
  background: none;
  border: 1.5px solid var(--ng-navy);
  color: var(--ng-navy) !important;
  font-size: 14.5px;
  padding: 12px 22px;
  white-space: nowrap;
}
.ng-btn--outline:hover { background: var(--ng-navy); color: #fff !important; }

/* ---------- hero slider ---------- */

.ng-hero {
  position: relative;
  height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ng-navy-hero);
}
.ng-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.ng-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.ng-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ng-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(10,22,52,.92) 0%, rgba(10,22,52,.7) 42%, rgba(10,22,52,.15) 100%);
}
.ng-hero__inner {
  position: relative;
  max-width: var(--ng-max);
  margin: 0 auto;
  padding: 40px 28px 70px;
  width: 100%;
}
.ng-hero__text {
  font-size: clamp(15.5px, 1.8vw, 19px);
  line-height: 1.55;
  color: #fff;
  max-width: 560px;
  margin: 20px 0 0;
}
.ng-hero__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.ng-hero__dots {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; gap: 10px; z-index: 5;
}
.ng-hero__dot {
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,.45);
  transition: all .4s;
}
.ng-hero__dot.is-active { width: 26px; background: var(--ng-orange); }

/* only the active slide's copy is shown */
.ng-hero__copy { display: none; }
.ng-hero__copy.is-active { display: block; }

/* ---------- stats bar ---------- */

.ng-stat { text-align: center; }
.ng-stat__n { font-size: clamp(26px, 4.2vw, 40px); font-weight: 800; color: #fff; }
.ng-stat__l { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: #aebbd7; }

/* ---------- cards ---------- */

.ng-card {
  border: 1px solid var(--ng-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  display: block;
  transition: box-shadow .25s, transform .25s;
}
.ng-card:hover { box-shadow: 0 18px 40px rgba(14,30,66,.14); transform: translateY(-4px); }
.ng-card__media { position: relative; height: 190px; background: var(--ng-placeholder); overflow: hidden; }
.ng-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ng-card__body { padding: 22px; }
.ng-card__more { font-size: 13.5px; font-weight: 700; color: var(--ng-orange); margin-top: 16px; }

.ng-feature-img {
  position: relative;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(14,30,66,.16);
}
.ng-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-frame variant.
   Division pages show the same photograph twice — cropped tight in the banner,
   then whole in the body. Letting the body image keep its own aspect ratio is
   what stops it reading as a repeat: the banner sells the service, this shows
   the complete picture. */
.ng-feature-img--full { height: auto; }
.ng-feature-img--full img { height: auto; object-fit: contain; }

/* ---------- why-us ---------- */

.ng-why {
  border: 1px solid var(--ng-border);
  border-radius: 16px;
  padding: 26px 24px;
  background: #fff;
}
.ng-why__n {
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  color: var(--ng-orange); margin-bottom: 12px;
}

/* ---------- values ---------- */

.ng-values { display: flex; flex-wrap: wrap; gap: 10px; }
.ng-value {
  border: 1px solid var(--ng-border);
  background: #fff;
  border-radius: 30px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ng-navy);
}

/* ---------- page banner ---------- */

.ng-banner {
  position: relative;
  min-height: 440px;   /* per the design; a taller band crops the photo far less */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ng-navy-hero);
}
.ng-banner > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ng-banner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,22,52,.9) 0%, rgba(10,22,52,.62) 55%, rgba(10,22,52,.3) 100%);
}
.ng-banner__inner {
  position: relative;
  max-width: var(--ng-max);
  margin: 0 auto;
  padding: 60px 28px;
  width: 100%;
}
.ng-banner .ng-h1 { font-size: clamp(28px, 4.6vw, 44px); }
.ng-banner__sub { color: #fff; font-size: 17px; line-height: 1.55; max-width: 620px; margin: 14px 0 0; }

/* ---------- gallery ---------- */

.ng-gal { position: relative; border-radius: 14px; overflow: hidden; height: 260px; background: var(--ng-placeholder); }
.ng-gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.ng-gal:hover img { transform: scale(1.05); }
.ng-gal__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 18px 14px;
  background: linear-gradient(to top, rgba(10,22,52,.85), transparent);
  color: #fff; font-size: 14.5px; font-weight: 700;
}

/* ---------- testimonials ---------- */

.ng-quote {
  border: 1px solid var(--ng-border);
  border-radius: 16px;
  padding: 30px 26px;
  background: #fff;
}
.ng-quote__mark { font-size: 44px; line-height: 1; color: var(--ng-orange); font-weight: 800; }
.ng-quote__q { font-size: 15.5px; line-height: 1.65; color: var(--ng-text-2); margin: 8px 0 20px; }
.ng-quote__n { font-weight: 700; font-size: 15px; }
.ng-quote__r { font-size: 13.5px; color: var(--ng-text-3); }

/* ---------- FAQ accordion ---------- */

.ng-faq { border: 1px solid var(--ng-border); border-radius: 14px; overflow: hidden; background: #fff; }
.ng-faq + .ng-faq { margin-top: 12px; }
.ng-faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  background: none; border: none; cursor: pointer;
  font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 700;
  color: var(--ng-text); text-align: left;
}
.ng-faq__q:hover { color: var(--ng-navy); }
.ng-faq__ico { flex: none; font-size: 20px; color: var(--ng-orange); transition: transform .25s; }
.ng-faq.is-open .ng-faq__ico { transform: rotate(45deg); }
.ng-faq__a { display: none; padding: 0 24px 22px; font-size: 15px; line-height: 1.65; color: var(--ng-text-2); }
.ng-faq.is-open .ng-faq__a { display: block; }

/* ---------- news ---------- */

.ng-news__meta { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-orange); }
.ng-news__date { font-size: 13px; color: var(--ng-text-3); }
.ng-article p { font-size: 16.5px; line-height: 1.75; color: var(--ng-text-2); margin: 0 0 20px; }

/* ---------- offers list ---------- */

.ng-offers { list-style: none; margin: 0; padding: 0; }
.ng-offers li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--ng-border);
  font-size: 15.5px;
  color: var(--ng-text-2);
}
.ng-offers li:before {
  content: "";
  position: absolute; left: 4px; top: 19px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ng-orange);
}

/* ---------- contact ---------- */

.ng-field { margin-bottom: 16px; }
.ng-field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; color: var(--ng-text); }
.ng-field input,
.ng-field select,
.ng-field textarea {
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  padding: 13px 15px;
  border: 1px solid var(--ng-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ng-text);
}
.ng-field textarea { min-height: 140px; resize: vertical; }
.ng-field input:focus,
.ng-field select:focus,
.ng-field textarea:focus { outline: 2px solid var(--ng-orange); outline-offset: 1px; }

.ng-contact-item { padding: 16px 0; border-bottom: 1px solid var(--ng-border); }
.ng-contact-item__l { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ng-orange); margin-bottom: 4px; }

/* ---------- CTA band ---------- */

.ng-cta { background: var(--ng-navy); color: #fff; text-align: center; }
.ng-cta .ng-h2 { color: #fff; }
.ng-cta p { color: #c3cee6; font-size: 16.5px; line-height: 1.6; max-width: 620px; margin: 16px auto 28px; }

/* ---------- Betheme chrome adjustments ----------
   Every page opens with a full-bleed hero or banner, so Betheme's default
   30px gap above the content would show as a white strip under the header. */

.ng-scope #Content { padding-top: 0; }

/* Full-bleed sections. Betheme caps .section_wrapper at 1200px, but each of our
   sections already carries its own .ng-wrap container — so the coloured bands
   (hero, stats, banners, cream, CTA) must run edge to edge like the design. */

.ng-scope .ng-full > .section_wrapper {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.ng-scope .ng-full > .section_wrapper > .wrap { padding: 0; }

/* Betheme gives every column a 12px side gutter — that would inset the
   coloured bands by 24px and stop them meeting the viewport edge. */
.ng-scope .ng-full .mcb-column-inner {
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Divisions mega menu ----------
   Betheme auto-builds a 12-column, near-full-width strip for a submenu with 12
   items. The design uses a compact two-column card, so the megamenu grid is
   overridden rather than fought: keep Betheme's float layout, halve the width. */

#Top_bar .menu > li.ng-mega > ul.sub-menu {
  width: 520px !important;
  left: 50% !important;
  transform: translateX(-50%);
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid var(--ng-border);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(14, 30, 66, .18);
}

#Top_bar .menu > li.ng-mega > ul.sub-menu > li {
  width: 50% !important;
  float: left;
  border: none !important;
  padding: 0 !important;
}

#Top_bar .menu > li.ng-mega > ul.sub-menu > li > a {
  padding: 9px 12px !important;
  border-radius: 8px;
  margin: 1px;
  /* Betheme puts a 0.8px rgba(0,0,0,.05) separator on the LINK, not the li —
     clearing it on the li alone leaves the hairlines in place. */
  border: none !important;
}

#Top_bar .menu > li.ng-mega > ul.sub-menu > li > a span {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ng-nav) !important;
  line-height: 1.35;
}

#Top_bar .menu > li.ng-mega > ul.sub-menu > li > a:hover {
  background: var(--ng-cream);
}
#Top_bar .menu > li.ng-mega > ul.sub-menu > li > a:hover span {
  color: var(--ng-navy) !important;
}

/* the little pointer Betheme draws above a submenu would break the card */
#Top_bar .menu > li.ng-mega > ul.sub-menu:before,
#Top_bar .menu > li.ng-mega > ul.sub-menu:after { display: none !important; }

@media (max-width: 1240px) {
  /* below this Betheme swaps to the side-slide drawer — leave it alone */
  #Top_bar .menu > li.ng-mega > ul.sub-menu {
    width: auto !important;
    left: auto !important;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  #Top_bar .menu > li.ng-mega > ul.sub-menu > li { width: 100% !important; }
}

/* ---------- footer widgets (Betheme footer areas) ---------- */

#Footer .ng-foot-logo { height: 42px; width: auto; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 12px; }
#Footer .ng-foot-tagline { font-size: 15px; font-weight: 700; color: var(--ng-tan); letter-spacing: .02em; margin-bottom: 14px; }
#Footer .ng-foot-about { font-size: 14.5px; line-height: 1.6; color: #93a0bd; margin: 0 0 18px; max-width: 320px; }
#Footer .ng-foot-addr  { font-size: 13.5px; color: #93a0bd; margin: 0; }

#Footer .ng-foot-links { list-style: none; margin: 0; padding: 0; }
#Footer .ng-foot-links li { margin-bottom: 11px; font-size: 14.5px; color: #93a0bd; }
#Footer .ng-foot-links a { color: #c6cfe2; }

/* The email address is a single 208px unbreakable token. In the 3-column
   footer around 768px the column is narrower than that, so it overhung the
   viewport. Let long tokens break rather than push past the edge. */
#Footer .ng-foot-links li,
#Footer .ng-foot-links a,
#Footer .ng-foot-addr { overflow-wrap: break-word; }
#Footer .ng-foot-links a:hover { color: var(--ng-orange); }

/* ---------- header "Request a Quote" button ----------
   Design: navy #17357d, white, 13.5px/700, 10px 16px, radius 9px, gold hover.
   Betheme's default is grey at 14px/400 with a 3px radius.

   Only geometry lives here. The colours (including hover) come from the
   `button-action-background` / `button-action-color` theme options, which feed
   Betheme's --mfn-button-action-* variables — so the client can recolour the
   button in Theme Options without this stylesheet overriding them. */

#Top_bar a.button.action_button {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 10px 16px;
  border-radius: 9px;
  border: none;
  box-shadow: none;
  white-space: nowrap;
  text-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}

/* Defensive restatement of Betheme's own `.action_button:hover` at a higher
   specificity, in case a header rule outranks it. It reads the same
   --mfn-button-action-* variables, so the theme option stays the single source
   of truth and this cannot drift from what Theme Options shows. */
#Top_bar a.button.action_button:hover {
  background-color: var(--mfn-button-action-bg-hover);
  color: var(--mfn-button-action-color-hover);
}

/* Social icons. The SVGs use fill="currentColor", so colour and hover are
   driven entirely by the link's own colour — no per-icon styling needed. */
#Footer .ng-foot-social { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
#Footer .ng-foot-social a {
  display: flex;
  align-items: center;
  color: #93a0bd;
  transition: color .2s ease, transform .2s ease;
}
#Footer .ng-foot-social a:hover { color: var(--ng-orange); transform: translateY(-2px); }
#Footer .ng-foot-social svg { display: block; }

/* Credit link in the copyright bar. Inherits the muted note colour so it does
   not compete with the client's own content, but is clearly a link on hover. */
#Footer .copyright .ng-credit {
  color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: color .2s ease, border-color .2s ease;
}
#Footer .copyright .ng-credit:hover {
  color: var(--ng-orange);
  border-bottom-color: var(--ng-orange);
}

/* Touch-size tap targets for these icons live in the 760px block at the end of
   the file, so every breakpoint is declared once, in descending order. */

/* ---------- contact form feedback ---------- */

.ng-notice {
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14.5px;
  margin-bottom: 20px;
}
.ng-notice--ok  { background: #edf7ee; border: 1px solid #bcdcc0; color: #1f5b28; }
.ng-notice--err { background: #fdf0ee; border: 1px solid #f0c4bd; color: #8c2d1d; }

/* ==========================================================================
   RESPONSIVE — mirrors the prototype's 1000px / 760px breakpoints

   Every breakpoint is declared exactly once and in DESCENDING order. Media
   queries carry no specificity of their own, so ties are broken by source
   order — a wider query placed after a narrower one would win inside the
   narrower range, which is backwards. Keep new rules in these blocks rather
   than opening another query further up the file.

   The 1240px query near the top is the exception: it belongs to Betheme's own
   menu/drawer switch, not to this layout scale.
   ========================================================================== */

@media (max-width: 1000px) {
  .ng-grid3, .ng-grid4 { grid-template-columns: repeat(2, 1fr); }
  .ng-split { grid-template-columns: 1fr; gap: 28px; }
  .ng-hero { height: auto; min-height: 520px; }
}

@media (max-width: 760px) {
  .ng-grid2, .ng-grid3, .ng-grid4 { grid-template-columns: 1fr; }

  /* iOS Safari auto-zooms the page when a focused field is under 16px, and
     never zooms back out. 16px on touch widths keeps the form usable. */
  .ng-field input,
  .ng-field select,
  .ng-field textarea { font-size: 16px; }
  .ng-wrap { padding-left: 18px; padding-right: 18px; padding-top: 56px; padding-bottom: 56px; }
  .ng-hero { min-height: 460px; }
  .ng-banner { min-height: 380px; }
  .ng-sec-head { align-items: flex-start; }
  .ng-feature-img { height: 280px; }

  /* Comfortable tap target on the footer social icons, without changing how
     big they look. Negative margin cancels the padding so layout is unmoved. */
  #Footer .ng-foot-social { gap: 20px; }
  #Footer .ng-foot-social a { padding: 6px; margin: -6px; }
}