@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;600;700;800&display=swap');

:root {
  --ns-navy: #1C3157;
  --ns-navy-dark: #142440;
  --ns-gold: #D4900A;
  --ns-gold-border: #C0A060;
  --ns-red: #8B1F1F;
  --ns-off-white: #F5F5F0;
  --ns-body: #2C2C2A;
  --ns-muted: #6B6B68;
  --ns-border: #E0DED8;
  --ns-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --ns-space-1:  8px;
  --ns-space-2:  16px;
  --ns-space-3:  24px;
  --ns-space-4:  32px;
  --ns-space-6:  48px;
  --ns-space-8:  64px;
  --ns-space-12: 96px;
}

body { font-family: var(--ns-font); color: var(--ns-body); }

/* Nav overrides */
.ccm-header-top-nav, nav.navbar { background: var(--ns-navy) !important; }

/* Make sure the navbar itself has enough height but logo can exceed it */
nav.navbar {
  min-height: 60px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 100 !important;
}

.ccm-block-top-navigation-bar,
nav.navbar,
.container-fluid {
  overflow: visible !important;
}

.ns-logo-brand {
  overflow: visible !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.ns-logo-img,
.navbar-brand img,
.ns-logo-brand img {
  height: 90px !important;
  width: auto !important;
  position: relative !important;
  margin-top: -15px !important;
  margin-bottom: -15px !important;
  z-index: 500 !important;
  display: block !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)) !important;
  transform: none !important;
  top: 0 !important;
}

/* Info bar must sit BELOW the logo bleed */
.ns-info-bar {
  position: relative !important;
  z-index: 99 !important;
}
nav.navbar .nav-link { color: #fff !important; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; }
nav.navbar .nav-link:hover { color: var(--ns-gold) !important; }
nav.navbar .navbar-brand { color: #fff !important; font-weight: 700; }

/* Info bar */
.ns-info-bar { background: var(--ns-navy-dark); padding: 8px 20px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.85); }
.ns-info-bar a { color: var(--ns-gold); font-weight: 600; text-decoration: none; }

/* Buttons */
.btn-primary { background: var(--ns-gold) !important; border-color: var(--ns-gold) !important; color: #fff !important; font-weight: 700; }
.btn-primary:hover { background: #b87d08 !important; }
.btn-secondary { background: transparent !important; color: var(--ns-navy) !important; border-color: var(--ns-navy) !important; font-weight: 600; }

.btn-ns-primary, a.btn-ns-primary, button.btn-ns-primary {
  background: #D4900A !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
  display: inline-block !important;
  letter-spacing: 0.02em !important;
}
.btn-ns-primary:hover { background: #b87d08 !important; color: #fff !important; }

.btn-ns-explore {
  background: #D4900A !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
}
.btn-ns-explore:hover { background: #b87d08 !important; color: #fff !important; }

/* Section colors */
.ns-section-dark { background: var(--ns-navy); color: #fff; }
.ns-section-dark h1, .ns-section-dark h2, .ns-section-dark h3 { color: #fff !important; }
.ns-section-gray { background: var(--ns-off-white); }

/* Headings — Playfair Display */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700; color: #1C3157; }

/* ===== Section padding ===== */
.ns-section { padding: 80px 0; }
@media (max-width: 767px) { .ns-section { padding: 56px 0; } }

/* ===== Accent phrase ===== */
.ns-accent-phrase { font-style: italic; text-decoration: underline; text-decoration-color: var(--ns-gold); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ===== Section intro text ===== */
.ns-section-intro { color: var(--ns-muted); font-size: 16px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ===== Gold button override (Bootstrap .btn variant) ===== */
.ns-btn-gold { background: var(--ns-gold) !important; border-color: var(--ns-gold) !important; color: #fff !important; }
.ns-btn-gold:hover { background: #b87d08 !important; border-color: #b87d08 !important; color: #fff !important; }

/* ===== Red button ===== */
.btn-ns-red, .ns-btn-red, .ns-btn-process-cta {
  background: #8B1F1F !important;
  color: #fff !important;
  border: none !important;
  padding: 13px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.btn-ns-red:hover, .ns-btn-red:hover, .ns-btn-process-cta:hover { background: #731a1a !important; color: #fff !important; }

/* ===== Phone link ===== */
.ns-phone-link { color: var(--ns-gold); font-weight: 600; text-decoration: none; }
.ns-phone-link:hover { color: var(--ns-gold); text-decoration: underline; }

/* ===== Hero ===== */
.ns-hero { background: var(--ns-navy); min-height: 400px; }
.ns-hero__row { min-height: 400px; }
.ns-hero__content { background: var(--ns-navy); padding: 80px 64px; }
.ns-hero__h1 { color: #fff !important; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 24px; }
.ns-hero__subhead { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.65; max-width: 480px; margin-bottom: 32px; }
.ns-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.ns-hero__phone { font-size: 14px; color: rgba(255,255,255,0.65); }
.ns-hero__photo { min-height: 400px; background: var(--ns-navy-dark); }
@media (max-width: 991px) {
  .ns-hero__content { padding: 56px 24px; }
  .ns-hero__photo { min-height: 260px; }
}

/* ===== Image placeholder ===== */
.ns-img-placeholder { background: var(--ns-navy-dark); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; width: 100%; }

/* ===== Category cards ===== */
.ns-cat-card { background: var(--ns-navy); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.ns-cat-card__img { aspect-ratio: 4/3; width: 100%; min-height: 200px; flex-shrink: 0; }
.ns-cat-card__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ns-cat-card__title { color: #fff; font-size: 17px; font-weight: 700; margin: 0; }

/* ===== Process steps ===== */
.ns-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ns-steps li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--ns-body); line-height: 1.55; }
.ns-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--ns-navy); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ns-process__img { min-height: 380px; border-radius: 8px; }

/* ===== Testimonials ===== */
.ns-testimonial { background: var(--ns-off-white); border-left: 4px solid var(--ns-gold); border-radius: 0 8px 8px 0; padding: 20px 24px; height: 100%; }
.ns-testimonial__quote { font-size: 14px; font-style: italic; color: var(--ns-body); line-height: 1.7; margin-bottom: 12px; }
.ns-testimonial__attr { font-size: 13px; font-weight: 600; color: var(--ns-navy); margin: 0; }

/* ===== CTA band body text ===== */
.ns-cta-body { color: rgba(255,255,255,0.82); font-size: 16px; max-width: 600px; }

/* ===== Final CTA ===== */
.ns-final-cta { max-width: 680px; }

/* ===== Footer ===== */
.ns-footer { background: var(--ns-navy); color: rgba(255,255,255,0.75); padding: 64px 0 32px; }
.ns-footer h4 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.ns-footer a { color: rgba(255,255,255,0.75); text-decoration: none; }
.ns-footer a:hover { color: var(--ns-gold); }
.ns-footer ul li { margin-bottom: 6px; }
.ns-footer__phone { color: var(--ns-gold) !important; font-weight: 700; font-size: 18px; }
.ns-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 48px; padding-top: 24px; font-size: 12px; color: rgba(255,255,255,0.4); text-align: center; }

/* ===== Heading font override — wins over Atomik skin CSS ===== */
html body h1,
html body h2,
html body h3,
html body h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
}

/* =====================================================================
   HOW IT WORKS PAGE
   ===================================================================== */

/* ---- Hero subhead ---- */
.ns-hero-subhead {
  color: rgba(255,255,255,0.82);
  font-size: 17px;
  line-height: 1.65;
  max-width: 560px;
}

/* ---- Jeff's Story section ---- */
.ns-hiw-jeff .ns-jeff-blockquote {
  border-left: 4px solid var(--ns-gold);
  padding-left: 24px;
  margin: 0;
}
.ns-hiw-jeff .ns-jeff-blockquote p {
  font-style: italic;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ns-body);
  margin-bottom: 16px;
}
.ns-hiw-jeff .ns-jeff-blockquote p:last-of-type {
  margin-bottom: 20px;
}
.ns-jeff-attr {
  font-size: 14px;
  font-weight: 700;
  color: var(--ns-navy);
  font-style: normal;
  display: block;
  margin-top: 4px;
}
/* Image block inside Jeff section — 75% of column width, centered */
.ns-hiw-jeff .ns-jeff-img-wrap {
  width: 75%;
  margin: 0 auto;
}
.ns-hiw-jeff img,
.ns-hiw-jeff .ccm-image-block img {
  width: 75%;
  height: auto;
  border-radius: var(--ns-radius-lg, 10px);
  display: block;
  margin: 0 auto;
}

/* ---- Steps section ---- */
.ns-hiw-steps { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 992px) {
  .ns-hiw-steps { padding-top: 96px; padding-bottom: 96px; }
}

.ns-step-wrap { padding: 24px 0; }
.ns-step-wrap:first-child { padding-top: 0; }
.ns-step-wrap:last-child { padding-bottom: 0; }

.ns-step-divider {
  border: none;
  border-top: 1px solid var(--ns-border);
  margin: 0;
}

/* Step card — inside Content blocks */
.ns-step-block { padding: 0; }
.ns-step-num-large {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 80px;
  font-weight: 800;
  color: var(--ns-navy);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.ns-step-heading {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--ns-navy) !important;
  margin-bottom: 14px !important;
  line-height: 1.25 !important;
}
.ns-step-block p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ns-body);
  margin-bottom: 14px;
}
.ns-step-difference {
  display: block;
  font-style: italic;
  color: var(--ns-gold);
  font-weight: 600;
  font-size: 15px;
  margin-top: 18px;
  line-height: 1.5;
}

/* Step images — 75% of column width, centered, rounded corners */
.ns-hiw-steps img,
.ns-hiw-steps .ccm-image-block img {
  width: 75%;
  height: auto;
  border-radius: var(--ns-radius-lg, 10px);
  display: block;
  margin: 0 auto;
}

/* ---- CTA band ---- */
.ns-hiw-cta h2 { color: #fff !important; margin-bottom: 16px; }
.ns-hiw-cta p { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.65; margin-bottom: 28px; }
.ns-hiw-cta .ns-phone-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ns-gold);
  text-decoration: none;
}
.ns-hiw-cta .ns-phone-link:hover { text-decoration: underline; }

/* ---- Breadcrumb (shared interior pages) ---- */
.ns-breadcrumb { font-size: 13px; }
.ns-breadcrumb .breadcrumb-item,
.ns-breadcrumb .breadcrumb-item a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.ns-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,0.6); }
.ns-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }
.ns-breadcrumb .breadcrumb-item a:hover { color: var(--ns-gold); }

/* ---- ConcreteCMS area wrapper resets inside grid columns ---- */
/* Prevent area edit wrappers from collapsing or breaking grid */
.ccm-area-block-container { display: block; }
.ns-hiw-jeff .col-12 > .ccm-area,
.ns-hiw-steps .col-12 > .ccm-area,
.ns-hiw-cta .col-12 > .ccm-area {
  width: 100%;
}

/* =====================================================================
   PAGE HEADER — full-bleed image with navy overlay
   Replaces the flat navy hero band on all interior pages.
   Structure: .ns-page-header > __bg (image area) + __overlay + __content
   ===================================================================== */
.ns-page-header {
  position: relative;
  background: var(--ns-navy);   /* fallback while image loads or area is empty */
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 992px) {
  .ns-page-header { min-height: 380px; }
}

/* ---- Background image layer ---- */
.ns-page-header__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* CMS edit handles must sit above the overlay so editors can click them */
.ns-page-header__bg .ccm-area,
.ns-page-header__bg .ccm-area-block-container,
.ns-page-header__bg .ccm-block-type-image {
  position: relative;
  z-index: 3;
  height: 100%;
}
/* Image block fills the header completely */
.ns-page-header__bg .ccm-image-block,
.ns-page-header__bg .ccm-image-block figure {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
}
.ns-page-header__bg img,
.ns-page-header__bg .ccm-image-block img,
.ns-page-header__bg figure img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* ---- Overlay — light neutral tint so photo colours show through ---- */
.ns-page-header__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1;
  pointer-events: none;
}

/* ---- Text content layer ---- */
.ns-page-header__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 64px 0 48px;
}
.ns-page-header .ns-page-header__content h1 {
  color: #fff !important;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.75) !important;
}
.ns-page-header .ns-page-header__content .container h1 { text-shadow: 0 2px 6px rgba(0,0,0,0.75) !important; }
/* Subheading paragraph in the Header Content area */
.ns-page-header__subhead,
.ns-page-header__content .ccm-block-type-content p {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
  font-size: 16px;
  line-height: 1.65;
  max-width: 560px;
  margin-top: 8px;
  margin-bottom: 0;
}
/* Breadcrumb colours inside page header */
.ns-page-header .ns-breadcrumb { margin-bottom: 12px; }
.ns-page-header .ns-breadcrumb .breadcrumb-item,
.ns-page-header .ns-breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.65); text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.ns-page-header .ns-breadcrumb .breadcrumb-item.active { color: rgba(255, 255, 255, 0.5); }
.ns-page-header .ns-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.4); }
.ns-page-header .ns-breadcrumb .breadcrumb-item a:hover { color: var(--ns-gold); }
.ns-page-header .ccm-block-content p { color: #fff !important; text-shadow: 3px 4px 12px rgba(0,0,0,1), -1px -1px 8px rgba(0,0,0,0.8) !important; }
/* Any heading inside the Header Content block */
.ns-page-header__content .ccm-block-type-content h1,
.ns-page-header__content .ccm-block-type-content h2 { color: #fff !important; }

/* =====================================================================
   DESIGN & QUOTE PAGE — intro section + configurator
   ===================================================================== */

/* Intro text: own white section, constrained to 760px, space-6 vertical */
.ns-configurator-intro-section {
  background: var(--ns-white);
  padding: var(--ns-space-6) var(--ns-space-3);
}
.ns-configurator-intro-col {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
p.ns-configurator-intro {
  font-size: 16px;
  color: var(--ns-body);
  line-height: 1.65;
  margin: 0;
}

/* Configurator: horizontal breathing room via space-4 padding each side */
.ns-configurator-section {
  background: var(--ns-white);
  padding-top: 0;
  padding-bottom: var(--ns-space-6);
}
.ns-configurator-section .ns-configurator-wrap {
  padding-left: var(--ns-space-4) !important;
  padding-right: var(--ns-space-4) !important;
}
/* Prevent iframe from triggering scroll-into-view on load */
.ns-configurator-wrap iframe { scroll-margin-top: 0; }

/* Gallery block image grid */
.ns-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}
.ns-gallery-item {
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.ns-gallery-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.ns-gallery-item:hover .ns-gallery-img {
  transform: scale(1.03);
}
@media (max-width: 768px) {
  .ns-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ns-gallery-grid { grid-template-columns: 1fr; }
}


/* Search results title colours */
.ccm-search-results-page-title a { color: var(--ns-navy) !important; }
.ccm-search-results-page-title a:hover { color: var(--ns-gold) !important; }

/* Minimal page header — search results page (no hero image, compact navy band) */
.ns-page-header--minimal {
  background: var(--ns-navy);
  padding: var(--ns-space-2) 0;
}
.ns-page-header--minimal h1 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--ns-space-2);
}
.ns-page-header--minimal .ns-breadcrumb .breadcrumb-item,
.ns-page-header--minimal .ns-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.65); }
.ns-page-header--minimal .ns-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,0.5); }
.ns-page-header--minimal .ns-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }
.ns-page-header--minimal .ns-breadcrumb .breadcrumb-item a:hover { color: var(--ns-gold); }

/* Search page — breadcrumb clear of sticky nav */
.page-template-search .ns-page-header--minimal {
  padding-top: var(--ns-space-6);
}

/* Search results — spacing between header and results */
.ns-search-results { padding-top: var(--ns-space-3); }

/* =====================================================================
   MOBILE OVERLAY CONTRAST FIXES
   Override inline gradient overlays in default.php for small screens.
   !important required — inline styles take precedence otherwise.
   ===================================================================== */
@media (max-width: 991px) {
  /* Hero: replace directional gradient with solid navy tint */
  .ns-hero-overlay {
    background: rgba(28, 49, 87, 0.72) !important;
  }

  /* All Uses: near-white overlay so navy body text reads clearly over the photo */
  .ns-alluses-overlay {
    background: rgba(255, 255, 255, 0.85) !important;
  }
}

/* =====================================================================
   MOBILE NAV TOGGLE
   Bootstrap .navbar-toggler + .icon-bar override to match design system.
   box-shadow removed on focus per design rules.
   ===================================================================== */
.navbar-toggler {
  background: var(--ns-gold) !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.navbar-toggler:focus {
  outline: 2px solid var(--ns-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.navbar-toggler .icon-bar {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 1px !important;
}
@media (min-width: 992px) {
  .navbar-toggler { display: none !important; }
}

/* =====================================================================
   MOBILE NAV — hide search form inside hamburger menu
   Desktop (≥992px) is unaffected; Bootstrap keeps .navbar-collapse
   always visible there so the form remains in the nav bar.
   ===================================================================== */
@media (max-width: 991px) {
  .ccm-block-top-navigation-bar .navbar-collapse form {
    display: none !important;
  }
}

/* ── Social icons ──────────────────────────────────────── */
.ns-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
  text-decoration: none;
}
.ns-social-icon:hover { color: var(--ns-gold); }

.ns-contact-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1C3157;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  margin-right: 20px;
  transition: color 0.2s;
}
.ns-contact-social:hover { color: var(--ns-gold); }