:root {
  --navy: #0A2540;
  --gold: #D4AF37;
  --light-gold: #F5D78E;
  --white: #FFFFFF;
  --ink: #14263a;
  --mist: #f6f7f8;

  --pico-primary: var(--gold);
  --pico-primary-hover: #b99525;
  --pico-primary-focus: rgba(212,175,55,.24);
  --pico-form-element-border-color: #cbd2d9;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--ink);
  background: #fff;
}

body > main.container {
  max-width: none;
  padding: 0;
}


/* HEADER */

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 92px;
  margin: 0;
  padding: .65rem 4vw;

  border-bottom: 1px solid rgba(255,255,255,.18);

  background:
    linear-gradient(
      180deg,
      rgba(34,76,112,.97) 0%,
      rgba(23,58,91,.86) 48%,
      rgba(10,37,64,.50) 100%
    );
}

.site-header ul {
  margin: 0;
  padding: 0;
  align-items: center;
}

.brand-list {
  flex: 0 0 auto;
}

.brand-link {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.brand-logo {
  display: block;
  width: 235px;
  height: auto;
  max-height: 66px;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;

  gap: 1.2rem;
  margin-left: 2rem !important;

  flex-wrap: nowrap;
}

.desktop-nav li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.desktop-nav a {
  margin: 0;
  padding: .4rem 0;

  color: var(--white);
  text-decoration: none;

  font-family: Georgia, "Times New Roman", serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;

  white-space: nowrap;
}

.desktop-nav a:hover {
  color: var(--light-gold);
}

.desktop-nav .header-cta {
  padding: .65rem .9rem;

  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 6px;

  color: var(--navy);
  font-weight: 700;
}


/* HERO */

.hero {
  position: relative;
  min-height: 86vh;
  overflow: hidden;

  display: flex;
  align-items: flex-end;

  margin: 0;
  padding: 0;

  color: var(--white);
  background: var(--navy);
}

.hero-image {
  position: absolute;
  z-index: 0;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(25,63,98,.04) 0%,
      rgba(10,37,64,.10) 28%,
      rgba(4,20,35,.25) 62%,
      rgba(4,20,35,.60) 100%
    ),
    linear-gradient(
      90deg,
      rgba(4,20,35,.74) 0%,
      rgba(4,20,35,.38) 40%,
      rgba(4,20,35,.05) 70%
    );
}

.hero-inner {
  position: relative;
  z-index: 2;

  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 11rem 0 5rem;
}

.eyebrow {
  margin-bottom: 1.2rem;

  color: var(--light-gold);

  font-family: Arial, Helvetica, sans-serif;
  font-size: .76rem;
  font-weight: 700;

  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 840px;
  margin: 0 0 1.2rem;

  color: var(--white);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.8vw, 5.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;

  text-shadow: 0 3px 20px rgba(0,0,0,.28);
}

.hero-copy {
  max-width: 650px;

  color: rgba(255,255,255,.94);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;

  margin-top: 1.5rem;
}

.hero-actions a {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}

.primary-cta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 700;
}

.secondary-cta {
  background: rgba(10,37,64,.22);
  border: 1px solid rgba(255,255,255,.72);
  color: var(--white);
}


/* GENERAL SECTIONS */

.section {
  padding: 5rem 4vw;
}

.section .wrap {
  width: min(1180px, 100%);
  margin: auto;
}

.section h2 {
  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 600;

  letter-spacing: -.025em;
}

.lede {
  max-width: 780px;
  color: #536172;
}


/* PRODUCTS */

.products {
  margin-bottom: 0;
  padding-bottom: 2.75rem;

  background:
    linear-gradient(
      180deg,
      #f8f9fa 0%,
      #f4f6f8 100%
    );
}

.products .wrap > hgroup {
  margin-bottom: 2.4rem;
}

.cards {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.card {
  position: relative;
  overflow: hidden;

  min-height: 275px;
  padding: 1.8rem 1.6rem 1.6rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: #fff;

  border: 1px solid rgba(10,37,64,.10);
  border-radius: 14px;

  box-shadow: 0 10px 28px rgba(10,37,64,.05);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--light-gold)
    );
}

.card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 18px 38px rgba(10,37,64,.10);

  border-color: rgba(212,175,55,.35);
}

.card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin-bottom: 1.2rem;

  border-radius: 50%;

  background: rgba(212,175,55,.10);
  color: var(--gold);

  font-family: Georgia, "Times New Roman", serif;
  font-size: .95rem;
  font-weight: 700;
}

.card h3 {
  margin: 0 0 .75rem;

  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 600;
}

.card p {
  margin: 0;

  color: #5a6773;
  line-height: 1.65;
}

.card a {
  display: inline-flex;

  margin-top: 1.5rem;

  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;

  text-decoration: none;
}

.card a:hover {
  color: #9f7e16;
}


/* TRUST */

.trust {
  position: relative;
  overflow: hidden;

  margin-top: 0;

  background:
    linear-gradient(
      135deg,
      #0A2540 0%,
      #0d3154 58%,
      #0A2540 100%
    );

  color: #fff;
}

.trust::after {
  content: "";

  position: absolute;
  right: -140px;
  top: -140px;

  width: 360px;
  height: 360px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212,175,55,.10),
      rgba(212,175,55,0) 70%
    );

  pointer-events: none;
}

.trust .wrap {
  position: relative;
  z-index: 1;
}

.trust h2 {
  color: #fff;
}

.trust .lede {
  color: #cbd8e4;
}

.trust-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;

  margin-top: 2.5rem;
}

.trust-item {
  position: relative;

  min-height: 235px;
  padding: 1.55rem 1.4rem 1.45rem;

  background: rgba(255,255,255,.035);

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.trust-item::before {
  content: "";

  position: absolute;
  left: 1.4rem;
  top: 0;

  width: 58px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--light-gold)
    );
}

.trust-item:hover {
  transform: translateY(-3px);

  border-color: rgba(212,175,55,.28);

  background: rgba(255,255,255,.05);
}

.trust-item strong {
  display: block;

  margin-bottom: .85rem;

  color: var(--light-gold);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  line-height: 1.25;
  font-weight: 600;
}

.trust-item p {
  margin: 0;

  color: #d7e1ea;
  line-height: 1.65;
}

.owners {
  max-width: 860px;

  margin: 2.25rem 0 0;
  padding: 1.15rem 1.25rem;

  border-left: 3px solid var(--gold);

  background: rgba(255,255,255,.025);

  color: #e2eaf0;
  line-height: 1.7;
}


/* PROCESS */

.process {
  background: #fff;
  padding-top: 4.25rem;
  padding-bottom: 1.5rem;
}

.process .wrap > hgroup {
  margin-bottom: 1.75rem;
}

.steps {
  position: relative;

  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.steps::before {
  content: "";

  position: absolute;

  top: 34px;
  left: 15%;
  right: 15%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(212,175,55,.18),
      rgba(212,175,55,.7),
      rgba(212,175,55,.18)
    );

  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;

  margin: 0;
  min-height: 235px;
  padding: 1.8rem 1.6rem 1.6rem;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fbfcfd
    );

  border: 1px solid rgba(10,37,64,.10);
  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(10,37,64,.06);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.step:hover {
  transform: translateY(-4px);

  box-shadow:
    0 18px 36px rgba(10,37,64,.09);

  border-color: rgba(212,175,55,.30);
}

.step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  margin-bottom: 1.35rem;

  border-radius: 50%;
  border: 3px solid #fff;

  background: var(--navy);
  color: var(--light-gold);

  box-shadow:
    0 0 0 2px rgba(212,175,55,.65),
    0 7px 16px rgba(10,37,64,.13);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.step h3 {
  margin: 0 0 .75rem;

  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
}

.step p {
  margin: 0;

  color: #5b6875;
  line-height: 1.65;
}


/* SERVICE AREA */

.service-area {
  position: relative;
  overflow: hidden;

  padding-top: 3.25rem;

  background:
    linear-gradient(
      135deg,
      #fbf8ef 0%,
      #ffffff 55%,
      #f3f6f8 100%
    );
}

.service-area::before {
  content: "";

  position: absolute;

  left: -110px;
  bottom: -170px;

  width: 360px;
  height: 360px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212,175,55,.12),
      rgba(212,175,55,0) 70%
    );

  pointer-events: none;
}

.service-area .wrap {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(280px,.8fr);

  gap: 3.5rem;
  align-items: center;
}

.service-copy p {
  margin: 1.15rem 0 0;

  color: #536172;
  line-height: 1.75;
}

.service-badge {
  justify-self: end;

  width: 100%;
  max-width: 380px;

  padding: 1.6rem 1.5rem;

  border: 1px solid rgba(10,37,64,.10);
  border-radius: 16px;

  background: rgba(255,255,255,.88);

  box-shadow:
    0 14px 34px rgba(10,37,64,.07);
}

.service-badge .label {
  display: block;

  margin-bottom: .6rem;

  color: var(--gold);

  font-size: .75rem;
  font-weight: 800;

  letter-spacing: .18em;
  text-transform: uppercase;
}

.service-badge strong {
  display: block;

  margin-bottom: .75rem;

  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.25;
}

.service-badge p {
  margin: 0;

  color: #63707d;
  line-height: 1.6;
}




/* SERVICE AREA MAP CARD — 2026-09-03 */

.service-map-card {
  max-width: 430px;
  padding: 1.15rem 1.15rem 1.4rem;
}

.service-map-graphic {
  margin-bottom: 1rem;
  border: 1px solid rgba(10,37,64,.09);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  overflow: hidden;
}

.service-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.15rem;
  align-items: center;
  margin: 0 0 1rem;
}

.service-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--navy);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.service-map-legend i {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}

.service-map-legend .wirral i {
  background: #dfbf58;
}

.service-map-legend .flintshire i {
  background: #cfa62c;
}

@media (max-width: 900px) {
  .service-map-card {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .service-map-card {
    padding: 1rem 1rem 1.25rem;
  }

  .service-map-legend {
    gap: .6rem 1rem;
  }

  .service-map-legend span {
    font-size: .82rem;
  }
}

/* ENQUIRY FORM */

section[aria-label="Subscribe example"] {
  background: var(--navy);
  padding: 3rem 4vw;
}

section[aria-label="Subscribe example"] .container {
  max-width: 1100px;
}

section[aria-label="Subscribe example"] article {
  margin: 0;
  padding: 2.5rem 2.5rem 2.25rem;

  background: #fff;

  border: none;

  box-shadow:
    0 20px 50px rgba(0,0,0,.18);
}

section[aria-label="Subscribe example"] article hgroup {
  margin-bottom: 1.4rem;
}

section[aria-label="Subscribe example"] h2 {
  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.form-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: .85rem 1rem;
}

.form-stack .full {
  grid-column: 1 / -1;
}

.form-stack textarea {
  min-height: 125px;
}

.form-stack input,
.form-stack select,
.form-stack textarea,
.form-stack button {
  margin-bottom: 0;
}

.form-stack button {
  background: var(--gold);
  border-color: var(--gold);

  color: var(--navy);

  font-weight: 900;
}

.required-note {
  margin: .15rem 0 .2rem;

  font-size: .9rem;
  color: #66717d;
}

.field-error {
  color: #b42318;
  font-size: .9rem;
}

.invalid {
  border-color: #b42318 !important;

  box-shadow:
    0 0 0 .15rem rgba(180,35,24,.08);
}


/* FOOTER */

footer.container {
  padding: 2.5rem 4vw;

  display: flex;
  justify-content: space-between;

  gap: 1rem;
  flex-wrap: wrap;
}

footer small {
  color: #6a7783;
}


/* TABLET */

@media (max-width: 1120px) and (min-width: 901px) {

  .site-header {
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .brand-logo {
    width: 205px;
  }

  .desktop-nav {
    gap: .7rem;
    margin-left: 1rem !important;
  }

  .desktop-nav a {
    font-size: .77rem;
  }

  .desktop-nav .header-cta {
    padding: .55rem .65rem;
  }

}


/* MOBILE / SMALL TABLET */

@media (max-width: 900px) {

  .site-header {
    position: relative;

    min-height: 78px;

    background:
      linear-gradient(
        180deg,
        rgba(34,76,112,.98),
        rgba(10,37,64,.92)
      );
  }

  .desktop-nav li:not(:last-child) {
    display: none;
  }

  .desktop-nav {
    margin-left: 1rem !important;
  }

  .brand-logo {
    width: 220px;
    max-height: 60px;
  }

  .hero {
    min-height: 72vh;
  }

  .hero-inner {
    padding: 5rem 0 3rem;
  }

  .cards,
  .trust-grid,
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .steps::before {
    display: none;
  }

  .service-area .wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-badge {
    justify-self: start;
  }

  .form-stack {
    grid-template-columns: 1fr;
  }

  .form-stack .full {
    grid-column: auto;
  }

}


/* PHONE */

@media (max-width: 640px) {

  .site-header {
    padding: .7rem 1rem;
  }

  .brand-logo {
    width: 185px;
  }

  .desktop-nav .header-cta {
    padding: .5rem .6rem;
    font-size: .72rem;
  }

  .hero {
    min-height: 68vh;
  }

  .hero-inner {
    padding: 4rem 0 2.5rem;
  }

  .hero h1 {
    font-size: 2.7rem;
  }

  .hero-copy {
    font-size: 1rem;
  }

  .section {
    padding: 3.5rem 1rem;
  }

  .cards,
  .trust-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .card,
  .trust-item,
  .step {
    min-height: auto;
  }

  section[aria-label="Subscribe example"] {
    padding: 2.25rem 1rem;
  }

  section[aria-label="Subscribe example"] article {
    padding: 1.75rem 1.25rem 1.6rem;
  }

}

/* PRODUCT CARD IMAGERY */

.card {
  padding: 0;
  min-height: 430px;
}

.card::before {
  z-index: 4;
}

.card-media {
  position: relative;
  width: 100%;
  height: 185px;
  overflow: hidden;
  background: #e9edf0;
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

.card:hover .card-media img {
  transform: scale(1.025);
}

.card-media .num {
  position: absolute;
  z-index: 3;
  top: 1rem;
  left: 1rem;
  margin: 0;
  background: rgba(255,255,255,.95);
  box-shadow: 0 5px 15px rgba(10,37,64,.10);
}

.card-body {
  padding: 1.45rem 1.5rem 0;
}

.card > a {
  margin-top: auto;
  padding: 1.2rem 1.5rem 1.5rem;
}

@media (max-width: 640px) {
  .card {
    min-height: auto;
  }

  .card-media {
    height: 220px;
  }
}

/* LOCKED TRUST SECTION — COMBINED OPTION 1 + 2 */

.trust-grid {
  margin-top: 2rem;
}

.trust-item {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(212,175,55,.24);

  box-shadow:
    0 10px 26px rgba(0,0,0,.08);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.trust-item::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--light-gold)
    );
}

.trust-item strong {
  font-size: 1.1rem;
  line-height: 1.28;
}

.trust-item:hover {
  transform: translateY(-4px);

  border-color: rgba(212,175,55,.55);

  background: rgba(255,255,255,.05);

  box-shadow:
    0 16px 36px rgba(0,0,0,.14),
    0 0 0 1px rgba(212,175,55,.10);
}

/* LOCKED TRUST SECTION — PREMIUM ICON VERSION */

.trust .wrap {
  max-width: 1180px;
}

.trust-heading {
  text-align: center;
  margin-bottom: 2.4rem;
}

.trust-heading h2 {
  margin-bottom: .75rem;
}

.trust-heading-line {
  width: 54px;
  height: 3px;
  margin: 0 auto 1rem;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--light-gold)
    );
}

.trust-heading .lede {
  margin-left: auto;
  margin-right: auto;
}

.trust-grid {
  margin-top: 0;
  gap: 1.2rem;
}

.trust-item {
  position: relative;
  overflow: hidden;

  min-height: 0;
  padding: 1.55rem 1.45rem 1.5rem;

  border: 1px solid rgba(212,175,55,.28);
  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 12px 30px rgba(0,0,0,.10);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.trust-item::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--light-gold)
    );
}

.trust-item:hover {
  transform: translateY(-4px);

  border-color: rgba(212,175,55,.60);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 18px 40px rgba(0,0,0,.16),
    0 0 0 1px rgba(212,175,55,.08);
}

.trust-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;

  color: var(--gold);
}

.trust-icon svg,
.commitment-icon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-item strong {
  display: block;

  margin-bottom: .7rem;

  color: var(--light-gold);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.28;
  font-weight: 600;
}

.trust-rule {
  width: 38px;
  height: 2px;

  margin-bottom: 1rem;

  background: rgba(212,175,55,.85);
}

.trust-item p {
  margin: 0;

  color: #d7e1ea;
  line-height: 1.62;
}

.trust-commitment {
  display: flex;
  align-items: center;
  gap: 1.15rem;

  margin-top: 2rem;
  padding: 1.25rem 1.5rem;

  border: 1px solid rgba(212,175,55,.30);
  border-radius: 14px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.018)
    );
}

.commitment-icon {
  flex: 0 0 auto;

  width: 46px;
  height: 46px;

  padding: .55rem;

  border-radius: 50%;

  color: var(--gold);

  background: rgba(212,175,55,.08);

  box-shadow:
    0 8px 20px rgba(0,0,0,.10);
}

.trust-commitment p {
  margin: 0;

  color: #e4ebf1;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.6;
}

@media (max-width: 900px) {

  .trust-heading {
    text-align: left;
  }

  .trust-heading-line {
    margin-left: 0;
  }

  .trust-heading .lede {
    margin-left: 0;
    margin-right: 0;
  }

}

@media (max-width: 640px) {

  .trust-commitment {
    align-items: flex-start;
  }

  .commitment-icon {
    width: 42px;
    height: 42px;
  }

}

/* TRUST SECTION REFINEMENT — 2026-09-03 */
/* Controlled visual change only */

.trust-heading {
  margin-bottom: 2rem;
}

.trust-grid {
  gap: 1.15rem;
}

.trust-item {
  display: flex;
  flex-direction: column;

  min-height: 340px;
  padding: 1.3rem 1.35rem 1.35rem;

  border-color: rgba(212,175,55,.22);

  box-shadow:
    0 10px 26px rgba(0,0,0,.08);
}

.trust-item::before {
  height: 3px;
  opacity: .88;
}

.trust-icon {
  width: 50px;
  height: 50px;

  margin-bottom: .7rem;
}

.trust-item strong {
  min-height: 4.15rem;

  margin-bottom: .45rem;

  font-size: 1.04rem;
  line-height: 1.24;
}

.trust-rule {
  width: 34px;
  height: 2px;

  margin-bottom: .75rem;

  opacity: .9;
}

.trust-item p {
  margin: 0;

  font-size: .94rem;
  line-height: 1.52;
}

.trust-item:hover {
  transform: translateY(-3px);

  border-color: rgba(212,175,55,.48);

  box-shadow:
    0 15px 34px rgba(0,0,0,.13),
    0 0 0 1px rgba(212,175,55,.06);
}


/* Slimmer commitment strip */

.trust-commitment {
  gap: .85rem;

  margin-top: 1.5rem;
  padding: .8rem 1.1rem;

  border-color: rgba(212,175,55,.24);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.026),
      rgba(255,255,255,.012)
    );
}

.commitment-icon {
  width: 38px;
  height: 38px;

  padding: .45rem;

  box-shadow:
    0 6px 14px rgba(0,0,0,.08);
}

.trust-commitment p {
  margin: 0;

  font-family: inherit;
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.5;
}


@media (max-width: 900px) {

  .trust-item {
    min-height: 0;
  }

  .trust-item strong {
    min-height: 0;
  }

}


@media (max-width: 640px) {

  .trust-icon {
    width: 46px;
    height: 46px;
  }

  .trust-commitment {
    padding: .85rem 1rem;
  }

}

/* TRUST ICON + COMMITMENT POLISH — 2026-09-03 */

.trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;
  padding: .65rem;
  margin-bottom: .75rem;

  border: 1px solid rgba(212,175,55,.38);
  border-radius: 50%;

  color: var(--gold);

  background:
    radial-gradient(
      circle,
      rgba(212,175,55,.10),
      rgba(212,175,55,.025)
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 7px 18px rgba(0,0,0,.08);
}

.trust-icon svg {
  width: 100%;
  height: 100%;

  stroke-width: 1.7;
}

.trust-item:hover .trust-icon {
  border-color: rgba(245,215,142,.65);

  background:
    radial-gradient(
      circle,
      rgba(212,175,55,.15),
      rgba(212,175,55,.04)
    );
}

.trust-commitment {
  min-height: 58px;

  gap: .9rem;
  padding: .72rem 1rem;

  border-color: rgba(212,175,55,.26);

  background:
    linear-gradient(
      90deg,
      rgba(212,175,55,.035),
      rgba(255,255,255,.015)
    );
}

.commitment-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 40px;
  height: 40px;
  padding: .5rem;

  border: 1px solid rgba(212,175,55,.38);
  border-radius: 50%;

  color: var(--gold);

  background: rgba(212,175,55,.075);

  box-shadow: none;
}

.commitment-icon svg {
  width: 100%;
  height: 100%;

  stroke-width: 1.8;
}

.trust-commitment p {
  margin: 0;

  color: #dfe7ee;

  font-family: inherit;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.45;
}

/* TRUST ICON FINAL POLISH */

.trust-icon {
  width: 52px;
  height: 52px;
  padding: .5rem;
}

.trust-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.9;
}

.commitment-icon {
  width: 42px;
  height: 42px;
  padding: .4rem;
}

.commitment-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}

.trust-commitment {
  padding: .75rem 1rem;
}

.trust-commitment p {
  font-size: .96rem;
  line-height: 1.45;
}


/* PREMIUM TRUST EMBLEM PRESENTATION — 2026-09-03 */

.trust-icon {
  width: 82px;
  height: 82px;
  margin-bottom: 1.1rem;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  box-shadow: none;
}

.trust-icon svg {
  width: 78px;
  height: 78px;

  fill: none;
  stroke: #D4AF37;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.18))
    drop-shadow(0 0 5px rgba(212,175,55,.08));
}

.trust-item:hover .trust-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.trust-item:hover .trust-icon svg {
  stroke: #F5D78E;

  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.22))
    drop-shadow(0 0 7px rgba(212,175,55,.14));
}


/* TRUST PREMIUM IMAGE ASSETS — 2026-09-03 */

.trust-icon img {
  display: block;
  width: 82px;
  height: 82px;
  object-fit: contain;

  filter:
    drop-shadow(0 5px 8px rgba(0,0,0,.22));
}

.trust-item:hover .trust-icon img {
  filter:
    drop-shadow(0 7px 12px rgba(0,0,0,.28));
}


/* PREMIUM COMMITMENT EMBLEM — 2026-09-03 */

.commitment-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.commitment-icon img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;

  filter:
    drop-shadow(0 4px 7px rgba(0,0,0,.22));
}


/* MOBILE NAVIGATION — 2026-09-03 */

.mobile-menu-toggle,
.mobile-menu {
  display: none;
}

@media (max-width: 900px) {

  .site-header {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 78px;
    padding: .6rem 1rem;
  }

  .brand-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .brand-list li {
    margin: 0;
    padding: 0;
  }

  .desktop-nav {
    display: none !important;
  }

  .mobile-menu-toggle {
    flex: 0 0 46px;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    margin: 0 0 0 .75rem;
    padding: 0;

    border: 1px solid rgba(212,175,55,.45);
    border-radius: 10px;

    background: rgba(10,37,64,.78);
    box-shadow: none;
  }

  .mobile-menu-toggle span {
    display: block;

    width: 22px;
    height: 2px;
    margin: 2.5px 0;

    border-radius: 2px;

    background: var(--light-gold);
  }

  .mobile-menu {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    z-index: 30;

    padding: .75rem 1rem 1rem;

    background:
      linear-gradient(
        180deg,
        rgba(10,37,64,.98),
        rgba(7,29,49,.99)
      );

    border-top: 1px solid rgba(212,175,55,.25);

    box-shadow:
      0 18px 30px rgba(0,0,0,.24);
  }

  .mobile-menu.open {
    display: block;
  }

  .mobile-menu ul {
    display: grid;
    gap: .15rem;

    margin: 0;
    padding: 0;

    list-style: none;
  }

  .mobile-menu li {
    margin: 0;
    padding: 0;
  }

  .mobile-menu a {
    display: block;

    padding: .72rem .8rem;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    text-decoration: none;

    border-radius: 8px;
  }

  .mobile-menu a:hover,
  .mobile-menu a:focus {
    color: var(--light-gold);
    background: rgba(255,255,255,.05);
  }

  .mobile-menu .mobile-menu-cta {
    margin-top: .45rem;
    padding: .8rem 1rem;

    background: var(--gold);
    color: var(--navy);

    text-align: center;
    font-weight: 700;
  }

}

@media (max-width: 640px) {

  .brand-logo {
    width: 190px;
    max-height: 58px;
  }

}

/* MOBILE HEADER / HERO SEPARATION — 2026-09-03 */
@media (max-width: 900px) {
  .site-header {
    position: relative;
  }

  .hero-inner {
    padding-top: 3.25rem;
  }
}

/* MOBILE PRODUCT CARD SPACING — 2026-09-03 */
@media (max-width: 640px) {

  .products .cards {
    row-gap: 1.25rem;
  }

  .products .card {
    margin: 0;
  }

}

/* MOBILE PRODUCTS HEADING — 2026-09-03 */
@media (max-width: 640px) {

  .products h2 {
    font-size: 2rem;
    line-height: 1.08;
  }

}

/* MOBILE TRUST HEADING — 2026-09-03 */
@media (max-width: 640px) {

  .trust-heading h2 {
    font-size: 2.15rem;
    line-height: 1.08;
  }

}

/* MOBILE TRUST CARD CENTRING — 2026-09-03 */
@media (max-width: 640px) {

  .trust-item {
    align-items: center;
    text-align: center;
  }

  .trust-item::before {
    left: 0;
    right: 0;
    width: 100%;
  }

  .trust-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .trust-item strong {
    width: 100%;
    text-align: center;
  }

  .trust-rule {
    margin-left: auto;
    margin-right: auto;
  }

  .trust-item p {
    width: 100%;
    text-align: center;
  }

}

/* MOBILE TRUST HEADING CENTRING — 2026-09-03 */
@media (max-width: 640px) {

  .trust-heading {
    text-align: center;
  }

  .trust-heading h2 {
    text-align: center;
  }

  .trust-heading-line {
    margin-left: auto;
    margin-right: auto;
  }

  .trust-heading .lede {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

}

/* MOBILE SERVICE AREA HEADING — 2026-09-03 */
@media (max-width: 640px) {

  .service-area h2 {
    font-size: 2.15rem;
    line-height: 1.08;
  }

}


/* SERVICE AREA MAP — 2026-09-03 */

.service-map-graphic {
  margin-bottom: 1.15rem;
  padding: .8rem;

  border: 1px solid rgba(10,37,64,.08);
  border-radius: 14px;

  background: linear-gradient(180deg,#fcfbf7,#f3f6f8);
}

.service-map {
  display: block;
  width: 100%;
  height: auto;
}

.service-map .map-land {
  fill: #163a5f;
  stroke: #D4AF37;
  stroke-width: 2;
}

.service-marker circle:first-child {
  fill: rgba(212,175,55,.20);
  stroke: #D4AF37;
  stroke-width: 2;
}

.service-marker circle:last-child {
  fill: #D4AF37;
  stroke: #fff;
  stroke-width: 2;
}

.service-map-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem 1rem;

  margin-top: .5rem;
}

.service-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  color: #0A2540;

  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-map-legend i {
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: #D4AF37;
}

@media (max-width: 640px) {

  .service-map-graphic {
    padding: .7rem;
  }

}


/* REAL SERVICE AREA MAP FINAL — 2026-09-03 */

.service-map-card {
  max-width: 440px;
  padding: 1.1rem 1.1rem 1.35rem;
}

.service-map-graphic {
  margin: 0 0 1rem;
  padding: 0;

  border: 0;
  border-radius: 18px;

  background: transparent;

  overflow: hidden;
}

.service-map-graphic img {
  display: block;
  width: 100%;
  height: auto;
}

.service-map-card .label {
  margin-top: .25rem;
}

.service-map-note {
  margin: .4rem 0 0 !important;

  color: #63707d;
  line-height: 1.6;
}


/* MOBILE SERVICE AREA COMPOSITION */

@media (max-width: 640px) {

  .service-area {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .service-copy {
    text-align: center;
  }

  .service-copy hgroup {
    text-align: center;
  }

  .service-area h2 {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;

    font-size: 2.15rem;
    line-height: 1.08;

    text-align: center;
  }

  .service-area .lede {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
    line-height: 1.55;
  }

  .service-copy > p {
    margin: 1rem auto 0;
    max-width: 600px;

    text-align: center;
    line-height: 1.6;
  }

  .service-area .wrap {
    gap: 1.75rem;
  }

  .service-map-card {
    max-width: 100%;

    padding: .8rem .8rem 1.2rem;

    text-align: center;
  }

  .service-map-graphic {
    margin-bottom: .85rem;
  }

  .service-map-card .label {
    text-align: center;
  }

  .service-map-note {
    max-width: 420px;
    margin: .35rem auto 0 !important;

    text-align: center;
  }

}

/* MOBILE SERVICE TOP SPACING — 2026-09-03 */
@media (max-width: 640px) {
  .service-area {
    padding-top: 1.75rem;
  }
}

/* MOBILE SERVICE SPACING BALANCE — 2026-09-03 */
@media (max-width: 640px) {

  .process {
    padding-bottom: 1.25rem;
  }

  .service-area {
    padding-top: 1.5rem;
  }

  .service-copy hgroup {
    margin-bottom: 1.25rem;
  }

  .service-area h2 {
    margin-bottom: .75rem;
  }

  .service-area .lede {
    margin-top: 0;
  }

}

/* MOBILE SERVICE + ENQUIRY POLISH — 2026-09-03 */
@media (max-width: 640px) {

  /* Tighten the service section ending */
  .service-area {
    padding-bottom: 2rem;
  }

  /* Reduce the card-inside-card effect */
  .service-map-card {
    padding: .7rem .7rem 1rem;
  }

  .service-map-graphic {
    margin-bottom: .55rem;
    border-radius: 12px;
  }

  .service-map-card .label {
    margin-top: .1rem;
    margin-bottom: .35rem;
  }

  .service-map-note {
    margin-top: .2rem !important;
    line-height: 1.5;
  }

  /* Bring the enquiry section closer */
  section[aria-label="Subscribe example"] {
    padding-top: 2rem;
  }

  /* Better mobile enquiry heading scale */
  section[aria-label="Subscribe example"] h2 {
    font-size: 2.1rem;
    line-height: 1.08;
  }

}

/* ENQUIRY FIELD POLISH — 2026-09-03 */

.form-stack input,
.form-stack select,
.form-stack textarea {
  background: #ffffff;
  color: var(--navy);

  border: 1px solid #b7c1cb;

  box-shadow: none;
}

.form-stack input::placeholder,
.form-stack textarea::placeholder {
  color: #7a8793;
  opacity: 1;
}

.form-stack select {
  color: #5f6d79;
}

.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus {
  border-color: var(--gold);

  box-shadow:
    0 0 0 .16rem rgba(212,175,55,.14);
}

@media (max-width: 640px) {

  .form-stack input,
  .form-stack select,
  .form-stack textarea {
    font-size: 1rem;
  }

}

/* MOBILE MAIN → ENQUIRY GAP FIX — 2026-09-03 */
@media (max-width: 640px) {

  body > main.container {
    margin-bottom: 0 !important;
  }

  .service-area {
    margin-bottom: 0 !important;
  }

  section[aria-label="Subscribe example"] {
    margin-top: 0 !important;
  }

}

/* MOBILE MAIN → ENQUIRY GAP FIX — 2026-09-03 */
@media (max-width: 640px) {

  body > main.container {
    margin-bottom: 0 !important;
  }

  .service-area {
    margin-bottom: 0 !important;
  }

  section[aria-label="Subscribe example"] {
    margin-top: 0 !important;
  }

}

/* MOBILE GLOBAL CENTRING + ENQUIRY HEADING GAP — 2026-09-03 */
@media (max-width: 640px) {

  /* General mobile section alignment */
  .section .wrap > hgroup,
  .section .wrap > hgroup h2,
  .section .wrap > hgroup .lede,
  .service-copy,
  .service-copy hgroup,
  .service-copy h2,
  .service-copy .lede,
  .trust-heading,
  .trust-heading h2,
  .trust-heading .lede,
  section[aria-label="Subscribe example"] article hgroup,
  section[aria-label="Subscribe example"] article hgroup h2,
  section[aria-label="Subscribe example"] article hgroup h3 {
    text-align: center;
  }

  .section .wrap > hgroup .lede,
  .service-copy .lede,
  .trust-heading .lede,
  section[aria-label="Subscribe example"] article hgroup h3 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Enquiry heading spacing */
  section[aria-label="Subscribe example"] h2 {
    margin-bottom: 1.1rem !important;
  }

  section[aria-label="Subscribe example"] article hgroup {
    margin-bottom: 1.75rem;
  }

  /* Keep form controls easy to use */
  .form-stack input,
  .form-stack select,
  .form-stack textarea {
    text-align: left;
  }

}

/* FINAL MOBILE CONTENT CENTRING — 2026-09-03 */
@media (max-width: 640px) {

  /* HERO */
  .hero-inner,
  .hero .eyebrow,
  .hero h1,
  .hero-copy {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
    align-items: center;
  }


  /* PRODUCTS */
  .products .wrap > hgroup,
  .products .wrap > hgroup h2,
  .products .wrap > hgroup .lede {
    text-align: center;
  }

  .card-body {
    text-align: center;
  }

  .card-body h3,
  .card-body p {
    text-align: center;
  }

  .card > a {
    text-align: center;
  }


  /* HOW IT WORKS */
  .process .wrap > hgroup,
  .process .wrap > hgroup h2,
  .process .wrap > hgroup .lede {
    text-align: center;
  }

  .step {
    text-align: center;
  }

  .step span {
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }

  .step h3,
  .step p {
    text-align: center;
  }


  /* TRUST */
  .trust-heading,
  .trust-heading h2,
  .trust-heading .lede,
  .trust-item,
  .trust-item strong,
  .trust-item p {
    text-align: center;
  }


  /* SERVICE AREA */
  .service-copy,
  .service-copy h2,
  .service-copy .lede,
  .service-copy > p,
  .service-map-card,
  .service-map-note {
    text-align: center;
  }


  /* ENQUIRY */
  section[aria-label="Subscribe example"] article hgroup,
  section[aria-label="Subscribe example"] h2,
  section[aria-label="Subscribe example"] article hgroup h3 {
    text-align: center;
  }

  /* Keep form entry natural/readable */
  .form-stack input,
  .form-stack select,
  .form-stack textarea {
    text-align: left;
  }


  /* FOOTER */
  footer.container {
    justify-content: center;
    text-align: center;
  }

}

/* MOBILE PROCESS + PRODUCT LINK POLISH — 2026-09-03 */
@media (max-width: 640px) {

  /* Tighten space before How it works */
  .process {
    padding-top: 2.25rem;
  }

  /* Centre product enquiry links cleanly */
  .products .card > a {
    display: block;
    width: 100%;

    margin-top: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    text-align: center;
  }

}


/* MOBILE PRODUCT CLEANUP — 2026-09-03 */
@media (max-width: 640px) {

  .products .card-media .num {
    display: none;
  }

}

/* MOBILE FINAL FORM + FOOTER POLISH — 2026-09-03 */
@media (max-width: 640px) {

  .form-stack select {
    padding-right: 2.75rem;
    background-position: right 1rem center;
  }

  footer.container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    row-gap: .6rem;
  }

  footer.container small {
    width: 100%;
    text-align: center;
  }

}

/* FINAL MOBILE LOCK POLISH — 2026-09-03 */
@media (max-width: 640px) {

  /* Centre the trust commitment strip */
  .trust-commitment {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    text-align: center;
  }

  .trust-commitment .commitment-icon {
    margin: 0 auto;
    flex: 0 0 auto;
  }

  .trust-commitment p {
    margin: 0;
    text-align: center;
  }

  /* Slightly tighten Trust → How it works */
  .trust {
    padding-bottom: 2.25rem;
  }

  .process {
    padding-top: 1.75rem;
  }

  /* Slightly tighten enquiry → footer */
  footer.container {
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
  }

}

/* DESKTOP TRUST → HOW IT WORKS SPACING — 2026-09-03 */
@media (min-width: 901px) {
  .process {
    padding-top: 2.25rem;
  }
}

/* DESKTOP PRODUCTS INTRO → CARDS SPACING — 2026-09-03 */
@media (min-width: 901px) {
  .products .wrap > hgroup {
    margin-bottom: 1.6rem;
  }
}

/* PRODUCT CARD NUMBER BADGES REMOVED — 2026-09-03 */
.card-media .num {
  display: none !important;
}

/* DESKTOP PRODUCTS CENTRING TEST — 2026-09-03 */
@media (min-width: 901px) {

  .products .wrap > hgroup,
  .products .wrap > hgroup h2,
  .products .wrap > hgroup .lede {
    text-align: center;
  }

  .products .wrap > hgroup .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .products .card-body,
  .products .card-body h3,
  .products .card-body p,
  .products .card > a {
    text-align: center;
  }

}

/* DESKTOP HOW IT WORKS CENTRING TEST — 2026-09-03 */
@media (min-width: 901px) {

  .process .wrap > hgroup,
  .process .wrap > hgroup h2,
  .process .wrap > hgroup .lede {
    text-align: center;
  }

  .process .wrap > hgroup .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .step {
    text-align: center;
  }

  .step span {
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }

  .step h3,
  .step p {
    text-align: center;
  }

}

/* DESKTOP SERVICE AREA → ENQUIRY GAP FIX — 2026-09-03 */
@media (min-width: 901px) {

  body > main.container {
    margin-bottom: 0 !important;
  }

  .service-area {
    margin-bottom: 0 !important;
  }

  section[aria-label="Subscribe example"] {
    margin-top: 0 !important;
  }

}

/* DESKTOP FOOTER TIGHTEN — 2026-09-03 */
@media (min-width: 901px) {
  footer.container {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
  }
}

/* PROJECT TYPE MULTI-SELECT CHECKBOXES — 2026-09-04 */

.project-options {
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;

  border: 1px solid #b7c1cb;
  border-radius: 8px;

  background: #fff;
}

.project-options legend {
  padding: 0 .35rem;

  color: #536172;
  font-size: .95rem;
  font-weight: 600;
}

.project-options label {
  display: inline-flex;
  align-items: center;

  margin: .35rem 1.25rem .35rem 0;

  color: var(--navy);
  cursor: pointer;
}

.form-stack .project-options input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  width: 1.1rem !important;
  height: 1.1rem !important;

  margin: 0 .5rem 0 0 !important;
  padding: 0 !important;

  flex: 0 0 auto;

  accent-color: #D4AF37;
  cursor: pointer;
}

@media (max-width: 640px) {
  .project-options label {
    display: flex;
    width: 100%;
    margin: .45rem 0;
  }
}


/* PROJECT CHECKBOX VISIBLE SELECTED STATE — 2026-09-04 */

.form-stack .project-options input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;

  margin: 0 .55rem 0 0 !important;
  padding: 0 !important;

  border: 2px solid #8b98a5 !important;
  border-radius: 4px;

  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: .85rem .85rem !important;

  cursor: pointer;
}

.form-stack .project-options input[type="checkbox"]:checked {
  border-color: #D4AF37 !important;
  background-color: #D4AF37 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230A2540' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4L19 6'/%3E%3C/svg%3E") !important;
}

.project-options label {
  padding: .5rem .65rem;
  border-radius: 7px;
  transition: background-color .15s ease;
}

.project-options label:has(input[type="checkbox"]:checked) {
  background: #fff7d6;
  color: #0A2540;
  font-weight: 700;
}


/* RELIABLE PROJECT SELECTION HIGHLIGHT — 2026-09-04 */
.project-options label.selected {
  background: #fff3bf !important;
  color: #0A2540 !important;
  font-weight: 700;
}

.project-options label.selected input[type="checkbox"] {
  background-color: #D4AF37 !important;
  border-color: #D4AF37 !important;
}


/* MOBILE PROJECT SELECTED LABEL — 2026-09-04 */
@media (max-width: 640px) {
  .project-options label.mobile-selected {
    color: #0A2540 !important;
    background: #fff3bf !important;
    font-weight: 700;
  }

  .project-options label .selected-mark {
    display: none;
    margin-left: auto;
    color: #0A2540;
    font-weight: 800;
  }

  .project-options label.mobile-selected .selected-mark {
    display: inline;
  }
}

/* HEADER BUSINESS PHONE — 2026-09-06 */

.header-phone {
  color: #0A2540;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.header-phone:hover {
  color: #D4AF37;
}

.mobile-phone-link {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #0A2540;
  text-decoration: none;
}


/* GREEN CALL BUTTON — 2026-09-06 */

.header-phone,
.mobile-phone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .72rem 1rem;

  border-radius: 8px;

  background: #2E7D32 !important;
  color: #FFFFFF !important;

  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 6px 16px rgba(46,125,50,.18);
}

.header-phone:hover,
.mobile-phone-link:hover {
  background: #256628 !important;
  color: #FFFFFF !important;
}

@media (max-width: 640px) {
  .mobile-phone-link {
    width: 100%;
    margin-top: .45rem;
  }
}


/* DESKTOP HEADER CTA WRAP + LARGER CALL BUTTON — 2026-09-06 */
@media (min-width: 901px) {

  .header-phone {
    padding: .72rem 1rem;
    font-size: 1rem;
  }

  .header-cta {
    max-width: 150px;
    white-space: normal !important;
    text-align: center;
    line-height: 1.15;
    padding: .62rem .8rem;
  }

}

/* DESKTOP PHONE ICON CTA — 2026-09-06 */
@media (min-width: 901px) {

  .header-phone {
    position: relative;

    width: 44px;
    height: 44px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #2E7D32 !important;
    color: #FFFFFF !important;

    font-size: 1.2rem;
    line-height: 1;

    box-shadow: 0 6px 16px rgba(46,125,50,.18);
  }

  .header-phone::after {
    content: attr(data-phone);

    position: absolute;
    right: calc(100% + .55rem);
    top: 50%;

    transform: translateY(-50%) scale(.96);
    transform-origin: right center;

    padding: .55rem .75rem;

    border-radius: 7px;

    background: #2E7D32;
    color: #FFFFFF;

    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transition:
      opacity .15s ease,
      transform .15s ease,
      visibility .15s ease;

    pointer-events: none;

    box-shadow: 0 6px 16px rgba(46,125,50,.18);
  }

  .header-phone:hover::after,
  .header-phone:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  .header-cta {
    max-width: none;
    white-space: nowrap !important;
    line-height: 1.15;
    padding: .72rem 1rem;
  }

}

/* DESKTOP PHONE ICON CTA — 2026-09-06 */
@media (min-width: 901px) {

  .header-phone {
    position: relative;

    width: 44px;
    height: 44px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #2E7D32 !important;
    color: #FFFFFF !important;

    font-size: 1.2rem;
    line-height: 1;

    box-shadow: 0 6px 16px rgba(46,125,50,.18);
  }

  .header-phone::after {
    content: attr(data-phone);

    position: absolute;
    right: calc(100% + .55rem);
    top: 50%;

    transform: translateY(-50%) scale(.96);
    transform-origin: right center;

    padding: .55rem .75rem;

    border-radius: 7px;

    background: #2E7D32;
    color: #FFFFFF;

    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transition:
      opacity .15s ease,
      transform .15s ease,
      visibility .15s ease;

    pointer-events: none;

    box-shadow: 0 6px 16px rgba(46,125,50,.18);
  }

  .header-phone:hover::after,
  .header-phone:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  .header-cta {
    max-width: none;
    white-space: nowrap !important;
    line-height: 1.15;
    padding: .72rem 1rem;
  }

}

/* PREMIUM NAVY + GOLD PHONE BUTTON — 2026-09-06 */
@media (min-width: 901px) {

  .header-phone {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;

    border: 1.5px solid #D4AF37 !important;
    border-radius: 50% !important;

    background: #0A2540 !important;
    color: #D4AF37 !important;

    font-size: 1.08rem !important;
    font-weight: 700;
    line-height: 1;

    box-shadow:
      0 5px 14px rgba(10,37,64,.22),
      inset 0 0 0 1px rgba(255,255,255,.04);

    transition:
      background-color .18s ease,
      color .18s ease,
      border-color .18s ease,
      transform .18s ease,
      box-shadow .18s ease;
  }

  .header-phone:hover,
  .header-phone:focus-visible {
    background: #12385b !important;
    color: #F5D78E !important;
    border-color: #F5D78E !important;

    transform: translateY(-1px);

    box-shadow:
      0 7px 18px rgba(10,37,64,.28),
      0 0 0 3px rgba(212,175,55,.10);
  }

  .header-phone::after {
    background: #0A2540 !important;
    color: #F5D78E !important;

    border: 1px solid rgba(212,175,55,.65);
    border-radius: 8px;

    padding: .52rem .72rem;

    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .02em;

    box-shadow: 0 8px 20px rgba(10,37,64,.22);
  }

}

/* MOBILE HEADER CALL BUTTON — 2026-09-06 */
.mobile-header-phone {
  display: none;
}

@media (max-width: 900px) {

  .mobile-header-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-left: auto;
    margin-right: .55rem;

    border: 1.5px solid #D4AF37;
    border-radius: 50%;

    background: #0A2540;
    color: #D4AF37;

    font-size: 1.05rem;
    line-height: 1;

    text-decoration: none;

    box-shadow: 0 5px 14px rgba(10,37,64,.2);
  }

  .mobile-menu-toggle {
    margin-left: 0;
  }

}

/* PRIVACY PAGE NAVY BACKGROUND — 2026-09-06 */

body:has(.privacy-shell) {
  background: #0A2540;
}

body:has(.privacy-shell) main.container {
  background: transparent;
}

.privacy-shell {
  padding-bottom: 4.75rem;
}

.privacy-card {
  background: #FFFFFF;
  border: 1px solid rgba(212,175,55,.18);

  box-shadow:
    0 24px 60px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.03);
}


/* PREMIUM PRIVACY DOCUMENT CARD — 2026-09-06 */

body:has(.privacy-shell) main.container {
  max-width: 1180px;
  padding-left: 2rem;
  padding-right: 2rem;
}

.privacy-shell {
  padding-top: 3rem !important;
  padding-bottom: 5rem;
}

.privacy-card {
  position: relative;

  max-width: 900px;
  margin: 0 auto;

  padding: 3.25rem 3.5rem 3.5rem;

  border: 1px solid rgba(212,175,55,.20);
  border-radius: 22px;

  background: #FFFFFF;

  box-shadow:
    0 28px 70px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03);

  overflow: hidden;
}

.privacy-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 5px;

  background: linear-gradient(
    90deg,
    #D4AF37,
    #F5D78E,
    #D4AF37
  );
}

.privacy-kicker {
  display: none;
}

.privacy-card h1 {
  margin-top: 0;
  margin-bottom: .75rem;
}

.privacy-intro {
  margin-bottom: 2.4rem;
}

.privacy-card h2 {
  margin-top: 2.35rem;
  padding-top: .15rem;
}

@media (max-width: 640px) {

  body:has(.privacy-shell) main.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .privacy-shell {
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem;
  }

  .privacy-card {
    padding: 2rem 1.4rem 2.25rem;
    border-radius: 16px;
  }

}

/* FINAL PRIVACY PAGE COMPOSITION — 2026-09-06 */

body:has(.privacy-shell) {
  background: #0A2540 !important;
}

body:has(.privacy-shell) main.container {
  max-width: 1180px;
  padding-left: 2rem;
  padding-right: 2rem;
  background: transparent !important;
}

.privacy-shell {
  padding-top: 4rem !important;
  padding-bottom: 5rem !important;
}

.privacy-card {
  max-width: 900px !important;
  margin: 0 auto !important;

  padding: 3.5rem 3.75rem 3.75rem !important;

  border: 1px solid rgba(212,175,55,.22) !important;
  border-radius: 24px !important;

  background: #fff !important;

  box-shadow:
    0 30px 80px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.03) !important;
}

.privacy-card h1 {
  margin-top: 0 !important;
}

@media (max-width: 640px) {

  body:has(.privacy-shell) main.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .privacy-shell {
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .privacy-card {
    padding: 2rem 1.4rem 2.25rem !important;
    border-radius: 16px !important;
  }

}

/* PRIVACY CARD CLEAR OF HEADER — 2026-09-06 */

.privacy-shell {
  padding-top: 6.5rem !important;
}

@media (max-width: 640px) {
  .privacy-shell {
    padding-top: 2.25rem !important;
  }
}


/* PRIVACY CARD EXTRA HEADER CLEARANCE — 2026-09-06 */
.privacy-shell {
  padding-top: 7.75rem !important;
}

@media (max-width: 640px) {
  .privacy-shell {
    padding-top: 2.75rem !important;
  }
}

/* PRIVACY CONTACT PANEL — PREMIUM FINAL — 2026-09-06 */

.privacy-contact {
  position: relative;
  margin-top: 1.5rem;
  padding: 1.8rem 2rem 2rem;

  border: 0 !important;
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #0A2540 0%,
      #12385b 100%
    ) !important;

  box-shadow:
    0 16px 36px rgba(10,37,64,.18);

  overflow: hidden;
}

.privacy-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 3px;

  background: linear-gradient(
    90deg,
    #D4AF37,
    #F5D78E,
    #D4AF37
  );
}

.privacy-contact-heading {
  display: block;
  margin-bottom: 1.5rem;
}

.privacy-contact-heading strong {
  display: block;

  color: #FFFFFF !important;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 600;
}

.privacy-contact-heading span {
  display: block;
  margin-top: .25rem;

  color: #F5D78E !important;

  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.privacy-contact-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;

  border-top: 1px solid rgba(255,255,255,.14);
}

.privacy-contact-links a {
  display: flex !important;
  flex-direction: column !important;
  gap: .3rem;

  padding: 1.25rem 0 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  text-decoration: none !important;
  box-shadow: none !important;
}

.privacy-contact-links a:first-child {
  padding-right: 1.5rem !important;
}

.privacy-contact-links a:last-child {
  padding-left: 1.5rem !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
}

.privacy-contact-links span {
  color: #F5D78E !important;

  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.privacy-contact-links strong {
  color: #FFFFFF !important;

  font-size: 1rem;
  font-weight: 600;
}

.privacy-contact-links a:hover strong {
  color: #F5D78E !important;
}

.privacy-back {
  margin-top: 2.4rem !important;
}

@media (max-width: 640px) {

  .privacy-contact {
    padding: 1.5rem;
  }

  .privacy-contact-links {
    grid-template-columns: 1fr !important;
  }

  .privacy-contact-links a:first-child {
    padding-right: 0 !important;
    padding-bottom: 1rem !important;
  }

  .privacy-contact-links a:last-child {
    padding-left: 0 !important;
    padding-top: 1rem !important;

    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
  }

}

/* PRIVACY CONTACT LOGO — FINAL */
.privacy-contact-logo {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 0 1rem;
}

@media (max-width: 640px) {
  .privacy-contact-logo {
    width: 120px;
  }
}

/* =========================================
   DOORS NAVIGATION DROPDOWN — 2026-09-22
   ========================================= */

/* ---------- DESKTOP ---------- */

.nav-dropdown{
  position:relative;
}

/* 2026-10-05 DOORS DROPDOWN HOVER BRIDGE
   Keeps the parent :hover active while the pointer travels
   across the intentional gap between Doors and its menu. */
.nav-dropdown::after{
  content:"";

  position:absolute;
  z-index:49;

  top:100%;
  left:50%;

  width:310px;
  height:1rem;

  transform:translateX(-50%);

  background:transparent;
}

.nav-dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:.3rem;

  margin:0;
  padding:.4rem 0;

  border:0;
  background:transparent;
  box-shadow:none;

  color:var(--white);

  font-family:Georgia, "Times New Roman", serif;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.02em;

  cursor:pointer;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus,
.nav-dropdown.open .nav-dropdown-toggle{
  color:var(--light-gold);
}

.nav-dropdown-toggle:focus-visible{
  outline:2px solid var(--light-gold);
  outline-offset:5px;
}

.nav-dropdown-menu{
  position:absolute;
  z-index:50;

  top:calc(100% + .85rem);
  left:50%;

  width:310px;

  padding:.55rem;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:
    translateX(-50%)
    translateY(-8px);

  border:1px solid rgba(212,175,55,.22);
  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(15,48,77,.99),
      rgba(7,29,49,.995)
    );

  box-shadow:
    0 22px 48px rgba(0,0,0,.28);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

.nav-dropdown-menu::before{
  content:"";

  position:absolute;
  top:-8px;
  left:50%;

  width:16px;
  height:16px;

  transform:
    translateX(-50%)
    rotate(45deg);

  background:#0f304d;

  border-left:1px solid rgba(212,175,55,.22);
  border-top:1px solid rgba(212,175,55,.22);
}
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:
    translateX(-50%)
    translateY(0);
}

.desktop-nav .nav-dropdown-menu a,
.nav-dropdown-disabled{
  display:block;

  margin:0;
  padding:.78rem .9rem;

  border-radius:9px;
}

.desktop-nav .nav-dropdown-menu a{
  color:#fff;
}

.desktop-nav .nav-dropdown-menu a:hover,
.desktop-nav .nav-dropdown-menu a:focus{
  color:#fff;
  background:rgba(255,255,255,.07);
}

.nav-dropdown-menu strong,
.nav-dropdown-menu small{
  display:block;
}

.nav-dropdown-menu strong{
  color:#fff;
  font-family:Georgia, "Times New Roman", serif;
  font-size:.92rem;
}

.nav-dropdown-menu small{
  margin-top:.15rem;

  color:rgba(255,255,255,.67);

  font-family:Arial, Helvetica, sans-serif;
  font-size:.7rem;
  line-height:1.35;
}

.nav-dropdown-disabled{
  opacity:.55;
  cursor:default;
}


/* ---------- MOBILE ---------- */

.mobile-nav-dropdown-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;

  width:100%;
  margin:0;
  padding:.72rem .8rem;

  border:0;
  border-radius:8px;

  background:transparent;
  box-shadow:none;

  color:#fff;

  font-family:Georgia, "Times New Roman", serif;
  font-size:1rem;
  text-align:left;
}

.mobile-nav-dropdown-toggle:hover,
.mobile-nav-dropdown-toggle:focus{
  color:var(--light-gold);
  background:rgba(255,255,255,.05);
}

.mobile-nav-submenu{
  display:none !important;

  margin:.15rem 0 .35rem .55rem !important;
  padding:.15rem 0 .15rem .65rem !important;

  border-left:1px solid rgba(212,175,55,.35);
}

.mobile-nav-dropdown.open .mobile-nav-submenu{
  display:grid !important;
}

.mobile-nav-submenu a,
.nav-coming-soon{
  display:block;

  padding:.62rem .75rem;

  border-radius:7px;

  font-size:.9rem;
}

.nav-coming-soon{
  color:rgba(255,255,255,.5);
}

.nav-coming-soon small{
  display:block;

  margin-top:.12rem;

  color:rgba(255,255,255,.38);
  font-family:Arial, Helvetica, sans-serif;
  font-size:.66rem;
}

@media(max-width:900px){
  .nav-dropdown{
    display:none;
  }
}


/* =========================================
   DEDICATED DOORS PAGE — 2026-09-22
   ========================================= */

.doors-page-header{
  position:absolute;
}

.doors-page-main{
  max-width:none;
  padding:0;
}

.doors-hero{
  position:relative;
  min-height:68vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--navy);
}

.doors-hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.doors-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(4,20,35,.82) 0%,
      rgba(4,20,35,.55) 42%,
      rgba(4,20,35,.15) 76%
    ),
    linear-gradient(
      180deg,
      rgba(10,37,64,.05),
      rgba(4,20,35,.55)
    );
}

.doors-hero-inner{
  position:relative;
  z-index:2;
  width:min(1180px,92vw);
  margin:0 auto;
  padding:10rem 0 4.5rem;
  color:#fff;
}

.doors-hero h1{
  max-width:800px;
  margin:0 0 1rem;
  color:#fff;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(3rem,5vw,5rem);
  line-height:1.02;
}

.doors-hero-copy{
  max-width:680px;
  color:rgba(255,255,255,.92);
  font-size:1.12rem;
  line-height:1.6;
}

.doors-page-section{
  width:min(1180px,92vw);
  margin:0 auto;
  padding:5.5rem 0;
}

.doors-section-heading{
  max-width:760px;
  margin-bottom:2.2rem;
}

.doors-kicker{
  margin-bottom:.6rem;
  color:var(--gold);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.18em;
}

.doors-section-heading h2,
.doors-designer-copy h2,
.doors-local-section h2{
  color:var(--navy);
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(2.1rem,3.6vw,3.5rem);
  line-height:1.08;
}

.doors-section-heading p,
.doors-designer-copy p,
.doors-local-section p{
  color:#64727d;
  line-height:1.7;
}

.doors-feature-grid,
.doors-resource-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}

.doors-feature-card,
.doors-resource-card{
  position:relative;
  margin:0;
  padding:1.7rem;
  border:1px solid rgba(10,37,64,.1);
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 34px rgba(10,37,64,.07);
}

.doors-feature-card{
  border-top:3px solid var(--gold);
}

.doors-card-number{
  display:inline-block;
  margin-bottom:1.1rem;
  color:var(--gold);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.12em;
}

.doors-feature-card h3,
.doors-resource-card h3{
  color:var(--navy);
  font-family:Georgia, "Times New Roman", serif;
}

.doors-feature-card p,
.doors-resource-card p{
  color:#697783;
  line-height:1.6;
}

.doors-feature-card a,
.doors-resource-card a{
  color:var(--navy);
  font-weight:800;
  text-decoration:none;
}

.doors-designer-promo{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2.5rem;
  align-items:center;
  padding:5rem max(4vw,calc((100vw - 1180px)/2));
  background:
    linear-gradient(
      135deg,
      #0A2540,
      #123E63
    );
}

.doors-designer-copy h2{
  color:#fff;
}

.doors-designer-copy p{
  color:rgba(255,255,255,.78);
  max-width:680px;
}

.doors-designer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.4rem;
}

.doors-text-link{
  display:inline-flex;
  align-items:center;
  color:#fff;
  font-weight:700;
  text-decoration:none;
}

.doors-designer-visual{
  display:grid;
  place-items:center;
}

.doors-designer-badge{
  width:min(360px,100%);
  padding:2.3rem;
  border:1px solid rgba(212,175,55,.45);
  border-radius:20px;
  background:rgba(255,255,255,.06);
  box-shadow:0 24px 45px rgba(0,0,0,.22);
}

.doors-designer-badge span,
.doors-designer-badge strong,
.doors-designer-badge small{
  display:block;
}

.doors-designer-badge span{
  margin-bottom:.8rem;
  color:var(--gold);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
}

.doors-designer-badge strong{
  color:#fff;
  font-family:Georgia, "Times New Roman", serif;
  font-size:2.25rem;
  line-height:1.08;
}

.doors-designer-badge small{
  margin-top:1rem;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}

.doors-resources{
  padding-bottom:4.5rem;
}

.doors-resource-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:1rem;
  border-radius:50%;
  background:#0A2540;
  color:var(--gold);
  font-size:1.2rem;
}

.doors-resource-status{
  display:inline-block;
  margin-top:.35rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:#eef1f3;
  color:#78838c;
  font-size:.72rem;
  font-weight:700;
}

.doors-local-section{
  width:min(1180px,92vw);
  margin:0 auto 5rem;
  padding:2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  border-radius:20px;
  background:#f4f6f7;
  border:1px solid #e0e5e8;
}

.doors-local-section > div:first-child{
  max-width:700px;
}

.doors-local-actions{
  flex:0 0 auto;
  text-align:center;
}

.doors-phone-link{
  display:block;
  margin-top:.9rem;
  color:var(--navy);
  font-weight:800;
  text-decoration:none;
}

.desktop-nav a[aria-current="page"]{
  color:var(--light-gold);
}

@media(max-width:900px){
  .doors-page-header{
    position:relative;
  }

  .doors-hero{
    min-height:60vh;
  }

  .doors-hero-inner{
    padding:5rem 0 3rem;
  }

  .doors-feature-grid,
  .doors-resource-grid{
    grid-template-columns:1fr;
  }

  .doors-designer-promo{
    grid-template-columns:1fr;
    padding:4rem 5vw;
  }

  .doors-local-section{
    align-items:flex-start;
    flex-direction:column;
  }

  .doors-local-actions{
    text-align:left;
  }
}

@media(max-width:640px){
  .doors-hero{
    min-height:56vh;
  }

  .doors-hero-inner{
    padding:4rem 0 2.5rem;
  }

  .doors-hero h1{
    font-size:2.7rem;
  }

  .doors-page-section{
    padding:3.5rem 0;
  }

  .doors-designer-promo{
    padding:3.5rem 1rem;
  }

  .doors-local-section{
    width:calc(100% - 2rem);
    margin-bottom:2.5rem;
    padding:1.6rem;
  }
}


/* =========================================
   DESKTOP HEADER FIT / OVERFLOW FIX
   2026-09-22
   ========================================= */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

@media (min-width:901px){

  .site-header{
    padding-left:2.5vw;
    padding-right:2.5vw;
    gap:1rem;
  }

  .brand-logo{
    width:205px;
    max-height:58px;
  }

  .desktop-nav{
    gap:.75rem;
    margin-left:1rem !important;
    min-width:0;
  }

  .desktop-nav a,
  .nav-dropdown-toggle{
    font-size:.8rem;
  }

  .desktop-nav .header-cta{
    padding:.58rem .72rem;
    font-size:.77rem;
  }

  .header-phone{
    width:42px;
    height:42px;
  }
}

/*
  On narrower desktop/laptop screens the phone icon is
  sacrificed before the actual navigation or CTA.
*/
@media (max-width:1250px) and (min-width:901px){

  .desktop-nav .header-phone{
    display:none;
  }

  .desktop-nav{
    gap:.6rem;
  }

  .brand-logo{
    width:190px;
  }

  .desktop-nav a,
  .nav-dropdown-toggle{
    font-size:.75rem;
  }

  .desktop-nav .header-cta{
    padding:.55rem .62rem;
    font-size:.72rem;
  }
}


/* =========================================
   HEADER BRAND POLISH — 2026-09-22
   ========================================= */

@media (min-width:1251px){

  .brand-logo{
    width:225px;
    max-height:64px;
  }

}

@media (max-width:1250px) and (min-width:901px){

  .brand-logo{
    width:210px;
    max-height:62px;
  }

}

/* Doors is already clearly interactive; no decorative arrow required. */
.nav-dropdown-toggle{
  gap:0;
}


/* =========================================
   HEADER LOGO SIZE BUMP — 2026-09-22
   ========================================= */

@media (min-width:1251px){

  .brand-logo{
    width:245px;
    max-height:70px;
  }

}

@media (max-width:1250px) and (min-width:901px){

  .brand-logo{
    width:225px;
    max-height:66px;
  }

}


/* =========================================
   DOORS NAV / PRODUCT CARD LINK POLISH
   2026-09-22
   ========================================= */

.nav-dropdown-toggle{
  text-decoration:none;
}

/* Entire Doors product card is clickable */
.clickable-product-card{
  cursor:pointer;
}

.clickable-product-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 40px rgba(10,37,64,.12);
}

.clickable-product-card:focus-within{
  outline:2px solid var(--gold);
  outline-offset:3px;
}


/* =========================================
   DOORS PAGE SECTION SPACING — 2026-09-22
   ========================================= */

.doors-page-section{
  margin-top:0;
  padding-top:3rem;
  padding-bottom:4rem;
}

.doors-intro{
  padding-top:3rem;
}

.doors-section-heading{
  margin-top:0;
}

.doors-section-heading .doors-kicker{
  margin-top:0;
}

@media(max-width:640px){

  .doors-page-section{
    padding-top:2.25rem;
    padding-bottom:3rem;
  }

}

/* =========================================
   DOORS PAGE FLOW TIGHTENING — 2026-09-22
   ========================================= */

.doors-hero{
  min-height:60vh;
}

.doors-hero-inner{
  padding-bottom:3.2rem;
}

.doors-intro{
  padding-top:2rem;
}

.doors-section-heading{
  margin-bottom:1.7rem;
}

@media(max-width:900px){
  .doors-hero{
    min-height:54vh;
  }
}

@media(max-width:640px){
  .doors-hero{
    min-height:50vh;
  }

  .doors-intro{
    padding-top:1.5rem;
  }
}

/* 2026-10-05 SITEWIDE APPROVED BRAND LOCKUP
   =========================================================
   Reference: Door Designer "Choose Your Door" landing page.

   Desktop standard:
   - 250px banner width
   - 84px logo height
   - tagline directly underneath
   - 28px left position
   - 126px header height
   ========================================================= */

.site-header {
  min-height:
    126px;
}

.brand-link {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0;

  width:
    max-content;

  text-decoration:
    none;
}

.site-brand-tagline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    9px;

  width:
    max-content;

  margin:
    -3px 0 0;

  color:
    rgba(255, 255, 255, .82);

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.site-brand-tagline b {
  color:
    #d8b466;

  font-size:
    9px;

  line-height:
    1;
}

@media (min-width: 1001px) {
  .site-header {
    min-height:
      126px;

    height:
      126px;

    padding-left:
      28px;
  }

  .brand-list {
    flex:
      0 0 auto;

    width:
      max-content;
  }

  .brand-logo {
    display:
      block;

    width:
      250px !important;

    height:
      84px !important;

    max-width:
      none !important;

    max-height:
      none !important;

    object-fit:
      contain;

    object-position:
      center center;
  }
}

@media (max-width: 1000px) {
  .site-header {
    min-height:
      92px;
  }

  .brand-logo {
    width:
      min(210px, 48vw) !important;

    height:
      auto !important;

    max-height:
      62px !important;
  }

  .site-brand-tagline {
    gap:
      6px;

    margin-top:
      -2px;

    font-size:
      7px;

    letter-spacing:
      .12em;
  }
}

/* 2026-10-05 PRIVACY APPROVED BRAND LOCKUP */

.privacy-contact-brand {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: max-content;
  max-width: 100%;

  margin: 0 0 1.15rem;
}

.privacy-contact-logo {
  display: block;

  width: 250px;
  height: 84px;

  max-width: 100%;
  max-height: none;

  margin: 0;

  object-fit: contain;
  object-position: center center;

  filter:
    drop-shadow(
      0 3px 7px
      rgba(0, 0, 0, .18)
    );
}

.privacy-contact-tagline {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  width: max-content;
  max-width: 100%;

  margin: -3px 0 0;

  color:
    rgba(255, 255, 255, .82) !important;

  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;

  text-transform: uppercase;
  white-space: nowrap;
}

.privacy-contact-tagline b {
  color: #d8b466;
  font-size: 9px;
  line-height: 1;
}

@media (max-width: 640px) {
  .privacy-contact-logo {
    width: 210px;
    height: auto;
  }

  .privacy-contact-tagline {
    gap: 6px;
    font-size: 7px !important;
    letter-spacing: .12em !important;
  }
}

/* 2026-10-05 PRIVACY STACKED LOGO REFINEMENT */

.privacy-contact-brand {
  display: block;
  margin: 0 0 1rem;
}

.privacy-contact-tagline {
  display: none !important;
}

.privacy-contact-logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0;
}

@media (max-width: 640px) {
  .privacy-contact-logo {
    width: 128px;
  }
}

/* 2026-10-05 PRIVACY STACKED LOGO SIZE */

.privacy-contact-brand .privacy-contact-logo {
  width: 105px !important;
  height: auto !important;
}

@media (max-width: 640px) {
  .privacy-contact-brand .privacy-contact-logo {
    width: 92px !important;
  }
}

/* 2026-10-05 WIDER HEADER NAV SPACING */

@media (min-width: 1251px) {
  .desktop-nav {
    gap: 1.85rem !important;
  }
}

@media (max-width: 1250px) and (min-width: 1001px) {
  .desktop-nav {
    gap: 1.2rem !important;
  }
}

/* 2026-10-06 DOORS HYBRID NAVY STUDIO REDESIGN
   =========================================================
   Dedicated Doors page visual system.

   - dark/navy structural page
   - lighter Navy Studio product cards
   - clean information hierarchy
   - gold reserved for emphasis
   - existing content and links preserved
   ========================================================= */


/* ---------------------------------------------------------
   PAGE SHELL
   --------------------------------------------------------- */

.doors-page-main {
  background:
    #0b1824;

  padding-bottom:
    1px;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.doors-hero {
  min-height:
    64vh;

  border-bottom:
    1px solid
    rgba(216, 180, 102, .38);

  box-shadow:
    0 18px 45px
    rgba(4, 18, 30, .26);
}

.doors-hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(5, 20, 33, .92) 0%,
      rgba(8, 31, 49, .70) 40%,
      rgba(8, 31, 49, .26) 72%,
      rgba(8, 31, 49, .14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 20, 33, .12),
      rgba(5, 20, 33, .68)
    );
}

.doors-hero-inner {
  padding-bottom:
    4rem;
}

.doors-hero .eyebrow {
  color:
    #e0ba62;
}

.doors-hero h1 {
  text-shadow:
    0 5px 22px
    rgba(0, 0, 0, .24);
}


/* ---------------------------------------------------------
   DOOR RANGE PANEL
   --------------------------------------------------------- */

.doors-intro {
  width:
    min(1240px, 94vw);

  margin:
    2.25rem auto;

  padding:
    3.2rem;

  border:
    1px solid
    rgba(122, 166, 196, .28);

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(27, 71, 103, .98),
      rgba(17, 48, 72, .99)
    );

  box-shadow:
    0 22px 52px
    rgba(0, 0, 0, .24);
}

.doors-intro .doors-section-heading {
  max-width:
    760px;
}

.doors-intro .doors-section-heading h2 {
  color:
    #ffffff;
}

.doors-intro .doors-section-heading > p:last-child {
  color:
    rgba(226, 236, 243, .78);
}

.doors-intro .doors-kicker {
  color:
    #e0ba62;
}


/* ---------------------------------------------------------
   DOOR TYPE CARDS
   --------------------------------------------------------- */

.doors-feature-grid {
  gap:
    1.25rem;
}

.doors-feature-card {
  min-height:
    255px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    1.7rem;

  border:
    1px solid
    #cddce6;

  border-top:
    3px solid
    #d8b466;

  border-radius:
    14px;

  background:
    #edf4f8;

  box-shadow:
    0 12px 26px
    rgba(3, 18, 30, .13);

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.doors-feature-card:hover {
  transform:
    translateY(-3px);

  background:
    #f7fafc;

  border-color:
    #a9c2d2;

  border-top-color:
    #d8b466;

  box-shadow:
    0 17px 34px
    rgba(3, 18, 30, .18);
}

.doors-feature-card h3 {
  color:
    #173750;
}

.doors-feature-card p {
  color:
    #607282;

  flex:
    1 1 auto;
}

.doors-feature-card a {
  color:
    #386987;

  margin-top:
    auto;
}

.doors-feature-card a:hover,
.doors-feature-card a:focus {
  color:
    #173750;
}

.doors-card-number {
  color:
    #9a762f;
}


/* ---------------------------------------------------------
   DOOR DESIGNER FEATURE
   --------------------------------------------------------- */

.doors-designer-promo {
  position:
    relative;

  overflow:
    hidden;

  margin:
    2.5rem 0;

  border-top:
    1px solid
    rgba(216, 180, 102, .34);

  border-bottom:
    1px solid
    rgba(216, 180, 102, .34);

  background:
    linear-gradient(
      135deg,
      rgba(17, 38, 58, .98),
      rgba(24, 70, 101, .97)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .04);
}

.doors-designer-promo::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 84% 48%,
      rgba(108, 164, 199, .14),
      transparent 34%
    );
}

.doors-designer-copy,
.doors-designer-visual {
  position:
    relative;

  z-index:
    1;
}

.doors-designer-copy .doors-kicker {
  color:
    #e0ba62;
}

.doors-designer-copy h2 {
  color:
    #ffffff;
}

.doors-designer-copy p {
  color:
    rgba(229, 238, 244, .78);
}

.doors-designer-badge {
  border:
    1px solid
    rgba(216, 180, 102, .46);

  background:
    linear-gradient(
      145deg,
      rgba(66, 111, 143, .42),
      rgba(24, 64, 93, .42)
    );

  box-shadow:
    0 20px 42px
    rgba(0, 0, 0, .22);
}

.doors-text-link {
  color:
    #dbe9f1;
}

.doors-text-link:hover,
.doors-text-link:focus {
  color:
    #ffffff;
}


/* ---------------------------------------------------------
   BROCHURE LIBRARY PANEL
   --------------------------------------------------------- */

.doors-resources {
  width:
    min(1240px, 94vw);

  margin:
    2.25rem auto;

  padding:
    3.2rem;

  border:
    1px solid
    rgba(122, 166, 196, .28);

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(25, 65, 94, .98),
      rgba(16, 45, 67, .99)
    );

  box-shadow:
    0 22px 52px
    rgba(0, 0, 0, .22);
}

.doors-resources .doors-section-heading h2 {
  color:
    #ffffff;
}

.doors-resources .doors-section-heading > p:last-child {
  color:
    rgba(226, 236, 243, .78);
}

.doors-resources .doors-kicker {
  color:
    #e0ba62;
}

.doors-resource-grid {
  gap:
    1.25rem;
}

.doors-resource-card {
  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    1.7rem;

  border:
    1px solid
    #cddce6;

  border-radius:
    14px;

  background:
    #edf4f8;

  box-shadow:
    0 12px 26px
    rgba(3, 18, 30, .13);

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.doors-resource-card:hover {
  transform:
    translateY(-3px);

  background:
    #f7fafc;

  border-color:
    #a9c2d2;

  box-shadow:
    0 17px 34px
    rgba(3, 18, 30, .18);
}

.doors-resource-card h3 {
  color:
    #173750;
}

.doors-resource-card p {
  color:
    #607282;

  flex:
    1 1 auto;
}

.doors-resource-card a {
  color:
    #386987;

  margin-top:
    auto;
}

.doors-resource-icon {
  width:
    42px;

  height:
    42px;

  border:
    1px solid
    #bfd3df;

  background:
    #dceaf2;

  color:
    #876723;
}


/* ---------------------------------------------------------
   LOCAL INSTALLATION CTA
   --------------------------------------------------------- */

.doors-local-section {
  width:
    min(1240px, 94vw);

  margin:
    2.25rem auto 4rem;

  padding:
    2.6rem 3rem;

  border:
    1px solid
    rgba(122, 166, 196, .30);

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      #183f5d,
      #12344d
    );

  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, .20);
}

.doors-local-section h2 {
  color:
    #ffffff;
}

.doors-local-section p {
  color:
    rgba(226, 236, 243, .78);
}

.doors-local-section .doors-kicker {
  color:
    #e0ba62;
}

.doors-phone-link {
  color:
    #dceaf2;
}

.doors-phone-link:hover,
.doors-phone-link:focus {
  color:
    #ffffff;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .doors-intro,
  .doors-resources {
    width:
      calc(100% - 2rem);

    margin:
      1.5rem auto;

    padding:
      2.25rem;
  }

  .doors-local-section {
    width:
      calc(100% - 2rem);

    margin:
      1.5rem auto 3rem;

    padding:
      2.25rem;
  }
}

@media (max-width: 640px) {
  .doors-hero {
    min-height:
      54vh;
  }

  .doors-intro,
  .doors-resources {
    width:
      calc(100% - 1.25rem);

    padding:
      1.6rem;

    border-radius:
      16px;
  }

  .doors-feature-card,
  .doors-resource-card {
    min-height:
      0;
  }

  .doors-designer-promo {
    margin:
      1.5rem 0;

    padding:
      3rem 1rem;
  }

  .doors-local-section {
    width:
      calc(100% - 1.25rem);

    padding:
      1.6rem;

    border-radius:
      16px;
  }
}

/* 2026-10-06 HYBRID NAVY ENQUIRY FORM
   =========================================================
   Bring the homepage enquiry section into the same visual
   language as the Door Designer and brochure viewer.

   Existing form fields, IDs, validation and submission
   behaviour remain unchanged.
   ========================================================= */


/* ---------------------------------------------------------
   SECTION SHELL
   --------------------------------------------------------- */

#contact {
  margin:
    0;

  padding:
    4.5rem 1.25rem;

  border-top:
    1px solid
    rgba(216, 180, 102, .32);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(37, 91, 128, .28),
      transparent 44%
    ),
    #0b1824;
}

#contact > .container {
  width:
    min(1040px, 100%);

  max-width:
    1040px;

  margin:
    0 auto;

  padding:
    0;
}


/* ---------------------------------------------------------
   ENQUIRY PANEL
   --------------------------------------------------------- */

#contact article {
  margin:
    0;

  padding:
    2.4rem;

  border:
    1px solid
    rgba(122, 166, 196, .34);

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(27, 71, 103, .97),
      rgba(17, 48, 72, .98)
    );

  box-shadow:
    0 24px 54px
    rgba(0, 0, 0, .26);
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

#contact article > hgroup {
  max-width:
    720px;

  margin:
    0 auto 2rem;

  text-align:
    center;
}

#contact article > hgroup h2 {
  margin:
    0 0 .55rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem, 3vw, 2.8rem);

  line-height:
    1.05;
}

#contact article > hgroup h3 {
  margin:
    0;

  color:
    rgba(226, 236, 243, .76);

  font-size:
    1rem;

  font-weight:
    400;

  line-height:
    1.6;
}


/* ---------------------------------------------------------
   FORM GRID
   --------------------------------------------------------- */

#contact .form-stack {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    1rem;
}


/* ---------------------------------------------------------
   TEXT FIELDS
   --------------------------------------------------------- */

#contact .form-stack input[type="text"],
#contact .form-stack input[type="tel"],
#contact .form-stack input[type="email"],
#contact .form-stack textarea {
  margin:
    0;

  min-height:
    54px;

  padding:
    .9rem 1rem;

  border:
    1px solid
    #b8ccd9;

  border-radius:
    10px;

  background:
    rgba(247, 250, 252, .98);

  color:
    #173750;

  box-shadow:
    none;

  font-size:
    .96rem;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

#contact .form-stack textarea {
  min-height:
    120px;

  resize:
    vertical;
}

#contact .form-stack input::placeholder,
#contact .form-stack textarea::placeholder {
  color:
    #718493;

  opacity:
    1;
}

#contact .form-stack input:focus,
#contact .form-stack textarea:focus {
  border-color:
    #d8b466;

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(216, 180, 102, .16);

  outline:
    none;
}


/* ---------------------------------------------------------
   PROJECT TYPE PANEL
   --------------------------------------------------------- */

#contact .project-options {
  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap:
    .7rem;

  margin:
    0;

  padding:
    1rem;

  border:
    1px solid
    rgba(188, 214, 231, .30);

  border-radius:
    12px;

  background:
    rgba(10, 35, 54, .28);
}

#contact .project-options legend {
  padding:
    0 .45rem;

  color:
    #e6edf2;

  font-size:
    .82rem;

  font-weight:
    700;

  letter-spacing:
    .02em;
}

#contact .project-options label {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .55rem;

  min-height:
    46px;

  margin:
    0;

  padding:
    .65rem .75rem;

  border:
    1px solid
    rgba(188, 214, 231, .28);

  border-radius:
    9px;

  background:
    rgba(69, 103, 126, .56);

  color:
    #ffffff;

  font-size:
    .9rem;

  font-weight:
    650;

  cursor:
    pointer;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

#contact .project-options label:hover {
  border-color:
    rgba(216, 180, 102, .68);

  background:
    rgba(80, 117, 142, .72);

  transform:
    translateY(-1px);
}

#contact .project-options input[type="checkbox"] {
  width:
    17px;

  height:
    17px;

  margin:
    0;

  accent-color:
    #d8b466;
}


/* ---------------------------------------------------------
   NOTES / VALIDATION
   --------------------------------------------------------- */

#contact .required-note {
  margin:
    -.1rem 0 0;

  color:
    rgba(226, 236, 243, .66);

  font-size:
    .8rem;
}

#contact .field-error {
  color:
    #ffd2d2;
}


/* ---------------------------------------------------------
   SUBMIT ACTION
   --------------------------------------------------------- */

#contact .form-stack button[type="submit"] {
  min-height:
    52px;

  margin:
    .15rem 0 0;

  border:
    1px solid
    #e3bb48;

  border-radius:
    10px;

  background:
    linear-gradient(
      180deg,
      #e6bf48,
      #d7aa2c
    );

  color:
    #173750;

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, .18);

  font-weight:
    800;

  letter-spacing:
    .01em;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

#contact .form-stack button[type="submit"]:hover,
#contact .form-stack button[type="submit"]:focus {
  background:
    linear-gradient(
      180deg,
      #edca5d,
      #ddb238
    );

  color:
    #173750;

  box-shadow:
    0 11px 26px
    rgba(0, 0, 0, .22);

  transform:
    translateY(-1px);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
  #contact {
    padding:
      3.5rem 1rem;
  }

  #contact article {
    padding:
      2rem;
  }

  #contact .project-options {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #contact {
    padding:
      2.75rem .625rem;
  }

  #contact article {
    padding:
      1.4rem;

    border-radius:
      16px;
  }

  #contact article > hgroup {
    margin-bottom:
      1.5rem;
  }

  #contact .form-stack {
    grid-template-columns:
      1fr;
  }

  #contact .form-stack .full {
    grid-column:
      1;
  }

  #contact .project-options {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    padding:
      .8rem;
  }

  #contact .project-options label:last-of-type {
    grid-column:
      1 / -1;
  }
}

/* 2026-10-06 ENQUIRY PROJECT TILE CONTRAST */

#contact .project-options label,
#contact .project-options label span {
  color:
    #ffffff !important;
}

#contact .project-options label:has(
  input[type="checkbox"]:checked
) {
  color:
    #ffffff !important;

  border-color:
    #d8b466;

  background:
    #45677e;

  box-shadow:
    inset 0 0 0 1px
    rgba(216, 180, 102, .32);
}

#contact .project-options label:has(
  input[type="checkbox"]:checked
):hover {
  background:
    #50758e;
}

#contact .project-options input[type="checkbox"]:checked {
  accent-color:
    #d8b466;
}

/* 2026-10-06 PRECISION UI ENQUIRY
   =========================================================
   Establish the cleaner, more technical Chester Windows
   interface direction.

   Tighter geometry.
   Dark glass controls.
   Fine borders.
   Restrained gold interaction states.
   ========================================================= */


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

#contact article {
  padding:
    2.2rem 2.4rem;

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(25, 68, 98, .96),
      rgba(15, 46, 69, .98)
    );

  box-shadow:
    0 20px 46px
    rgba(0, 0, 0, .22);
}


/* ---------------------------------------------------------
   TEXT ENTRY CONTROLS
   --------------------------------------------------------- */

#contact .form-stack input[type="text"],
#contact .form-stack input[type="tel"],
#contact .form-stack input[type="email"],
#contact .form-stack textarea {
  min-height:
    48px;

  padding:
    .78rem .9rem;

  border:
    1px solid
    rgba(139, 181, 207, .42);

  border-radius:
    6px;

  background:
    rgba(8, 31, 48, .64);

  color:
    #ffffff;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .025);

  font-size:
    .92rem;

  font-weight:
    450;
}

#contact .form-stack textarea {
  min-height:
    96px;
}

#contact .form-stack input::placeholder,
#contact .form-stack textarea::placeholder {
  color:
    #a9becd;

  opacity:
    1;
}

#contact .form-stack input:hover,
#contact .form-stack textarea:hover {
  border-color:
    rgba(155, 199, 226, .62);

  background:
    rgba(10, 37, 57, .78);
}

#contact .form-stack input:focus,
#contact .form-stack textarea:focus {
  border-color:
    #d8b466;

  background:
    rgba(9, 34, 52, .92);

  box-shadow:
    0 0 0 2px
    rgba(216, 180, 102, .12);

  outline:
    none;
}


/* ---------------------------------------------------------
   PROJECT SELECTOR
   --------------------------------------------------------- */

#contact .project-options {
  gap:
    .55rem;

  padding:
    .85rem;

  border:
    1px solid
    rgba(139, 181, 207, .34);

  border-radius:
    7px;

  background:
    rgba(7, 28, 44, .30);
}

#contact .project-options legend {
  color:
    #e8f0f5;

  font-size:
    .78rem;

  letter-spacing:
    .035em;
}

#contact .project-options label {
  min-height:
    42px;

  padding:
    .55rem .65rem;

  border:
    1px solid
    rgba(139, 181, 207, .30);

  border-radius:
    5px;

  background:
    rgba(29, 71, 99, .58);

  color:
    #e9f1f6 !important;

  font-size:
    .86rem;

  font-weight:
    600;
}

#contact .project-options label:hover {
  border-color:
    rgba(216, 180, 102, .62);

  background:
    rgba(45, 88, 117, .72);
}

#contact .project-options label:has(
  input[type="checkbox"]:checked
) {
  border-color:
    #d8b466;

  background:
    rgba(60, 105, 135, .82);

  color:
    #ffffff !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(216, 180, 102, .18);
}

#contact .project-options input[type="checkbox"] {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    #d8b466;
}


/* ---------------------------------------------------------
   SUBMIT — PRIMARY BUT NOT A GIANT GOLD BAR
   --------------------------------------------------------- */

#contact .form-stack button[type="submit"] {
  justify-self:
    center;

  width:
    min(320px, 100%);

  min-height:
    46px;

  margin-top:
    .35rem;

  border-radius:
    6px;

  font-size:
    .9rem;

  letter-spacing:
    .025em;
}


/* ---------------------------------------------------------
   FORM RHYTHM
   --------------------------------------------------------- */

#contact .form-stack {
  gap:
    .8rem 1rem;
}

#contact .required-note {
  margin-top:
    0;

  color:
    #9eb5c5;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {
  #contact article {
    padding:
      1.35rem;

    border-radius:
      9px;
  }

  #contact .form-stack input[type="text"],
  #contact .form-stack input[type="tel"],
  #contact .form-stack input[type="email"] {
    min-height:
      46px;
  }

  #contact .project-options {
    border-radius:
      6px;
  }
}

/* 2026-10-06 COMPACT ENQUIRY REFINEMENT */

#contact .container {
  max-width: 1120px;
}

#contact article {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.55rem 1.7rem 1.45rem;
}

#contact hgroup {
  margin-bottom: 1.1rem;
}

#contact hgroup h2 {
  margin-bottom: .35rem;
  font-size: clamp(2.45rem, 4vw, 3.35rem);
  line-height: 1.04;
}

#contact hgroup h3 {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.45;
}

#contact .form-stack {
  gap: .75rem .9rem;
}

#contact .form-stack input[type="text"],
#contact .form-stack input[type="tel"],
#contact .form-stack input[type="email"] {
  min-height: 44px;
  padding: .62rem .82rem;
  font-size: .9rem;
}

#contact .form-stack textarea {
  min-height: 78px;
  padding: .75rem .82rem;
  font-size: .9rem;
}

#contact .project-options {
  padding: .7rem;
  gap: .45rem;
}

#contact .project-options legend {
  font-size: .76rem;
}

#contact .project-options label {
  min-height: 38px;
  padding: .45rem .58rem;
  font-size: .83rem;
}

#contact .required-note {
  font-size: .8rem;
}

#contact .form-stack button[type="submit"] {
  width: min(280px, 100%);
  min-height: 42px;
  margin-top: .15rem;
  font-size: .88rem;
}

@media (max-width: 640px) {
  #contact article {
    padding: 1.15rem;
  }

  #contact hgroup h2 {
    font-size: 2.1rem;
  }

  #contact hgroup h3 {
    font-size: .95rem;
  }

  #contact .form-stack {
    gap: .68rem;
  }

  #contact .form-stack input[type="text"],
  #contact .form-stack input[type="tel"],
  #contact .form-stack input[type="email"] {
    min-height: 42px;
  }

  #contact .form-stack textarea {
    min-height: 72px;
  }
}

/* 2026-10-06 COMPACT PRECISION INPUT HEIGHTS */

#contact .form-stack input[type="text"],
#contact .form-stack input[type="tel"],
#contact .form-stack input[type="email"] {
  min-height: 38px !important;
  height: 38px;
  padding: .42rem .72rem !important;
  font-size: .86rem !important;
  line-height: 1.2;
}

#contact .form-stack textarea {
  min-height: 72px !important;
  padding: .6rem .72rem !important;
  font-size: .86rem !important;
}

@media (max-width: 640px) {
  #contact .form-stack input[type="text"],
  #contact .form-stack input[type="tel"],
  #contact .form-stack input[type="email"] {
    min-height: 40px !important;
    height: 40px;
  }
}

/* 2026-10-06 PRECISION ENQUIRY CTA */

#contact .form-stack button[type="submit"] {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .7rem;

  width:
    250px;

  min-height:
    42px;

  padding:
    .62rem 1.25rem;

  border:
    1px solid
    #d8b466;

  border-radius:
    5px;

  background:
    linear-gradient(
      180deg,
      #163d59,
      #102e46
    );

  color:
    #ffffff;

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, .18),
    inset 0 1px 0
    rgba(255, 255, 255, .04);

  font-size:
    .88rem;

  font-weight:
    750;

  letter-spacing:
    .035em;

  text-transform:
    none;
}

#contact .form-stack button[type="submit"]::after {
  content:
    "→";

  color:
    #d8b466;

  font-size:
    1rem;

  line-height:
    1;

  transition:
    transform .16s ease;
}

#contact .form-stack button[type="submit"]:hover,
#contact .form-stack button[type="submit"]:focus {
  border-color:
    #e5c474;

  background:
    linear-gradient(
      180deg,
      #1d4b6b,
      #143a56
    );

  color:
    #ffffff;

  box-shadow:
    0 10px 24px
    rgba(0, 0, 0, .22),
    0 0 0 2px
    rgba(216, 180, 102, .10);

  transform:
    translateY(-1px);
}

#contact .form-stack button[type="submit"]:hover::after,
#contact .form-stack button[type="submit"]:focus::after {
  transform:
    translateX(3px);
}

/* 2026-10-06 PREMIUM ENQUIRY CTA REFINEMENT */

#contact .form-stack button[type="submit"] {
  width: 238px;
  min-height: 42px;

  padding: .62rem 1.35rem;

  border:
    1px solid
    rgba(216, 180, 102, .82);

  border-radius:
    5px;

  background:
    linear-gradient(
      180deg,
      rgba(25, 67, 96, .98),
      rgba(13, 39, 58, .98)
    );

  color:
    #ffffff;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .07),
    inset 0 -1px 0
    rgba(0, 0, 0, .18),
    0 7px 18px
    rgba(0, 0, 0, .18);

  font-size:
    .86rem;

  font-weight:
    750;

  letter-spacing:
    .055em;

  transform:
    none;
}

#contact .form-stack button[type="submit"]::after {
  content:
    none;
}

#contact .form-stack button[type="submit"]:hover,
#contact .form-stack button[type="submit"]:focus {
  border-color:
    #e5c474;

  background:
    linear-gradient(
      180deg,
      rgba(31, 79, 111, .98),
      rgba(17, 50, 74, .98)
    );

  color:
    #ffffff;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .09),
    0 0 0 1px
    rgba(216, 180, 102, .10),
    0 0 18px
    rgba(216, 180, 102, .10),
    0 9px 22px
    rgba(0, 0, 0, .20);

  transform:
    none;
}

/* 2026-10-06 PRECISION HEADER AND HERO CONTROLS
   =========================================================
   Chester Windows approved interface standard:
   restrained navy surfaces, fine gold accents,
   tight geometry and clean sans-serif control typography.
   ========================================================= */


/* ---------------------------------------------------------
   HEADER PRIMARY CTA
   --------------------------------------------------------- */

.desktop-nav .header-cta,
.desktop-nav .header-cta:link,
.desktop-nav .header-cta:visited {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    40px;

  padding:
    .58rem 1rem !important;

  border:
    1px solid
    rgba(216, 180, 102, .86);

  border-radius:
    5px;

  background:
    linear-gradient(
      180deg,
      rgba(27, 70, 100, .98),
      rgba(13, 40, 60, .98)
    );

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .06),
    0 6px 16px
    rgba(0, 0, 0, .16);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .8rem !important;

  font-weight:
    750;

  letter-spacing:
    .025em;

  white-space:
    nowrap !important;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}

.desktop-nav .header-cta:hover,
.desktop-nav .header-cta:focus-visible {
  border-color:
    #e5c474;

  background:
    linear-gradient(
      180deg,
      rgba(34, 83, 116, .98),
      rgba(18, 51, 75, .98)
    );

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .08),
    0 0 0 1px
    rgba(216, 180, 102, .08),
    0 0 16px
    rgba(216, 180, 102, .08);

  transform:
    none;
}


/* ---------------------------------------------------------
   HEADER PHONE CONTROL
   --------------------------------------------------------- */

@media (min-width: 901px) {

  .desktop-nav .header-phone {
    width:
      40px !important;

    height:
      40px !important;

    padding:
      0 !important;

    border:
      1px solid
      rgba(216, 180, 102, .82) !important;

    border-radius:
      50% !important;

    background:
      linear-gradient(
        180deg,
        rgba(25, 67, 96, .98),
        rgba(13, 39, 58, .98)
      ) !important;

    color:
      #d8b466 !important;

    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, .06),
      0 6px 16px
      rgba(0, 0, 0, .15);

    transform:
      none !important;
  }

  .desktop-nav .header-phone:hover,
  .desktop-nav .header-phone:focus-visible {
    border-color:
      #e5c474 !important;

    background:
      linear-gradient(
        180deg,
        rgba(34, 83, 116, .98),
        rgba(18, 51, 75, .98)
      ) !important;

    color:
      #f0cd79 !important;

    box-shadow:
      0 0 0 1px
      rgba(216, 180, 102, .08),
      0 0 15px
      rgba(216, 180, 102, .08);

    transform:
      none !important;
  }

  .desktop-nav .header-phone::after {
    padding:
      .45rem .65rem !important;

    border:
      1px solid
      rgba(216, 180, 102, .48) !important;

    border-radius:
      5px !important;

    background:
      rgba(13, 39, 58, .98) !important;

    color:
      #ffffff !important;

    box-shadow:
      0 8px 18px
      rgba(0, 0, 0, .18) !important;

    font-family:
      Arial,
      Helvetica,
      sans-serif;

    font-size:
      .78rem !important;

    font-weight:
      650 !important;
  }
}


/* ---------------------------------------------------------
   HERO CONTROLS
   --------------------------------------------------------- */

.hero-actions {
  gap:
    .65rem;
}

.hero-actions a {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    44px;

  padding:
    .68rem 1.15rem;

  border-radius:
    5px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .88rem;

  font-weight:
    750;

  line-height:
    1.15;

  letter-spacing:
    .025em;

  text-decoration:
    none;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .055),
    0 7px 18px
    rgba(0, 0, 0, .18);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}


/* Primary hero action */

.hero-actions .primary-cta {
  border:
    1px solid
    rgba(216, 180, 102, .88);

  background:
    linear-gradient(
      180deg,
      rgba(25, 67, 96, .98),
      rgba(13, 39, 58, .98)
    );

  color:
    #ffffff;
}

.hero-actions .primary-cta:hover,
.hero-actions .primary-cta:focus-visible {
  border-color:
    #e5c474;

  background:
    linear-gradient(
      180deg,
      rgba(34, 83, 116, .98),
      rgba(18, 51, 75, .98)
    );

  color:
    #ffffff;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .075),
    0 0 0 1px
    rgba(216, 180, 102, .08),
    0 0 18px
    rgba(216, 180, 102, .08);

  transform:
    none;
}


/* Secondary hero action */

.hero-actions .secondary-cta {
  border:
    1px solid
    rgba(151, 190, 215, .52);

  background:
    rgba(8, 31, 48, .58);

  color:
    #e8f1f6;
}

.hero-actions .secondary-cta:hover,
.hero-actions .secondary-cta:focus-visible {
  border-color:
    rgba(216, 180, 102, .68);

  background:
    rgba(20, 59, 86, .82);

  color:
    #ffffff;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .06),
    0 0 14px
    rgba(216, 180, 102, .06);

  transform:
    none;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

  .hero-actions a {
    min-height:
      42px;

    padding:
      .62rem .95rem;

    font-size:
      .84rem;
  }

}

/* 2026-10-06 PRECISION HOMEPAGE PRODUCT MATRIX
   =========================================================
   Chester Windows approved visual system:
   dark structural section, precise blue product modules,
   fine borders, compact geometry and restrained gold.
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.products {
  padding:
    4.25rem 4vw;

  border-top:
    1px solid
    rgba(137, 177, 202, .14);

  border-bottom:
    1px solid
    rgba(137, 177, 202, .14);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(36, 88, 122, .18),
      transparent 42%
    ),
    #0b1824;
}

.products .wrap {
  width:
    min(1240px, 100%);
}

.products .wrap > hgroup {
  max-width:
    820px;

  margin:
    0 auto 2.2rem;

  text-align:
    center;
}

.products .wrap > hgroup h2 {
  margin:
    0 0 .55rem;

  color:
    #ffffff;
}

.products .wrap > hgroup .lede {
  margin:
    0 auto;

  color:
    #aebfcb;

  font-size:
    1rem;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.products .cards {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    1rem;
}


/* ---------------------------------------------------------
   PRODUCT MODULE
   --------------------------------------------------------- */

.products .card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    0;

  padding:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.products .card::before {
  display:
    none;
}

.products .card:hover,
.products .clickable-product-card:hover {
  transform:
    none;

  border-color:
    rgba(216, 180, 102, .64);

  background:
    linear-gradient(
      180deg,
      #194663,
      #143a55
    );

  box-shadow:
    0 14px 32px
    rgba(0, 0, 0, .22),
    0 0 0 1px
    rgba(216, 180, 102, .05);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
   --------------------------------------------------------- */

.products .card-media {
  position:
    relative;

  overflow:
    hidden;

  aspect-ratio:
    16 / 10;

  background:
    #10283c;
}

.products .card-media img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .28s ease,
    filter .28s ease;
}

.products .card:hover .card-media img {
  transform:
    scale(1.025);

  filter:
    brightness(1.04);
}


/* ---------------------------------------------------------
   PRODUCT NUMBER
   --------------------------------------------------------- */

.products .card .num {
  position:
    absolute;

  top:
    10px;

  right:
    10px;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    auto;

  height:
    25px;

  min-width:
    34px;

  margin:
    0;

  padding:
    0 .5rem;

  border:
    1px solid
    rgba(216, 180, 102, .78);

  border-radius:
    4px;

  background:
    rgba(10, 32, 49, .88);

  color:
    #e0ba62;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .68rem;

  font-weight:
    750;

  letter-spacing:
    .08em;

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.products .card-body {
  flex:
    1 1 auto;

  padding:
    1.15rem 1.2rem .45rem;
}

.products .card h3 {
  margin:
    0 0 .45rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.42rem;

  font-weight:
    600;

  line-height:
    1.1;
}

.products .card p {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .9rem;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   ACTION
   --------------------------------------------------------- */

.products .card > a {
  display:
    flex;

  align-items:
    center;

  min-height:
    43px;

  margin:
    .55rem 1.2rem 1.15rem;

  padding:
    .55rem .75rem;

  border:
    1px solid
    rgba(132, 175, 201, .36);

  border-radius:
    5px;

  background:
    rgba(8, 31, 48, .44);

  color:
    #e8f1f6;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .8rem;

  font-weight:
    700;

  letter-spacing:
    .025em;

  text-decoration:
    none;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.products .card > a:hover,
.products .card > a:focus-visible {
  border-color:
    rgba(216, 180, 102, .70);

  background:
    rgba(28, 72, 101, .82);

  color:
    #ffffff;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

.products .clickable-product-card:focus-within {
  outline:
    1px solid
    #d8b466;

  outline-offset:
    3px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1050px) {
  .products .cards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .products {
    padding:
      3rem 1rem;
  }

  .products .wrap > hgroup {
    margin-bottom:
      1.6rem;
  }

  .products .cards {
    grid-template-columns:
      1fr;

    gap:
      .8rem;
  }

  .products .card-media {
    aspect-ratio:
      16 / 8.5;
  }
}

/* 2026-10-06 PRECISION HOMEPAGE PRODUCT MATRIX
   =========================================================
   Chester Windows approved visual system:
   dark structural section, precise blue product modules,
   fine borders, compact geometry and restrained gold.
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.products {
  padding:
    4.25rem 4vw;

  border-top:
    1px solid
    rgba(137, 177, 202, .14);

  border-bottom:
    1px solid
    rgba(137, 177, 202, .14);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(36, 88, 122, .18),
      transparent 42%
    ),
    #0b1824;
}

.products .wrap {
  width:
    min(1240px, 100%);
}

.products .wrap > hgroup {
  max-width:
    820px;

  margin:
    0 auto 2.2rem;

  text-align:
    center;
}

.products .wrap > hgroup h2 {
  margin:
    0 0 .55rem;

  color:
    #ffffff;
}

.products .wrap > hgroup .lede {
  margin:
    0 auto;

  color:
    #aebfcb;

  font-size:
    1rem;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.products .cards {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    1rem;
}


/* ---------------------------------------------------------
   PRODUCT MODULE
   --------------------------------------------------------- */

.products .card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    0;

  padding:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.products .card::before {
  display:
    none;
}

.products .card:hover,
.products .clickable-product-card:hover {
  transform:
    none;

  border-color:
    rgba(216, 180, 102, .64);

  background:
    linear-gradient(
      180deg,
      #194663,
      #143a55
    );

  box-shadow:
    0 14px 32px
    rgba(0, 0, 0, .22),
    0 0 0 1px
    rgba(216, 180, 102, .05);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
   --------------------------------------------------------- */

.products .card-media {
  position:
    relative;

  overflow:
    hidden;

  aspect-ratio:
    16 / 10;

  background:
    #10283c;
}

.products .card-media img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .28s ease,
    filter .28s ease;
}

.products .card:hover .card-media img {
  transform:
    scale(1.025);

  filter:
    brightness(1.04);
}


/* ---------------------------------------------------------
   PRODUCT NUMBER
   --------------------------------------------------------- */

.products .card .num {
  position:
    absolute;

  top:
    10px;

  right:
    10px;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    auto;

  height:
    25px;

  min-width:
    34px;

  margin:
    0;

  padding:
    0 .5rem;

  border:
    1px solid
    rgba(216, 180, 102, .78);

  border-radius:
    4px;

  background:
    rgba(10, 32, 49, .88);

  color:
    #e0ba62;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .68rem;

  font-weight:
    750;

  letter-spacing:
    .08em;

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.products .card-body {
  flex:
    1 1 auto;

  padding:
    1.15rem 1.2rem .45rem;
}

.products .card h3 {
  margin:
    0 0 .45rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.42rem;

  font-weight:
    600;

  line-height:
    1.1;
}

.products .card p {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .9rem;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   ACTION
   --------------------------------------------------------- */

.products .card > a {
  display:
    flex;

  align-items:
    center;

  min-height:
    43px;

  margin:
    .55rem 1.2rem 1.15rem;

  padding:
    .55rem .75rem;

  border:
    1px solid
    rgba(132, 175, 201, .36);

  border-radius:
    5px;

  background:
    rgba(8, 31, 48, .44);

  color:
    #e8f1f6;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .8rem;

  font-weight:
    700;

  letter-spacing:
    .025em;

  text-decoration:
    none;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.products .card > a:hover,
.products .card > a:focus-visible {
  border-color:
    rgba(216, 180, 102, .70);

  background:
    rgba(28, 72, 101, .82);

  color:
    #ffffff;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

.products .clickable-product-card:focus-within {
  outline:
    1px solid
    #d8b466;

  outline-offset:
    3px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1050px) {
  .products .cards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .products {
    padding:
      3rem 1rem;
  }

  .products .wrap > hgroup {
    margin-bottom:
      1.6rem;
  }

  .products .cards {
    grid-template-columns:
      1fr;

    gap:
      .8rem;
  }

  .products .card-media {
    aspect-ratio:
      16 / 8.5;
  }
}

/* 2026-10-06 PRECISION TRUST SECTION
   =========================================================
   Chester Windows approved interface standard:
   precise navy modules, fine blue-grey borders,
   restrained gold accents and clean typography.
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.trust {
  padding:
    4.25rem 4vw;

  border-top:
    1px solid
    rgba(137, 177, 202, .14);

  border-bottom:
    1px solid
    rgba(137, 177, 202, .14);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(39, 91, 125, .18),
      transparent 44%
    ),
    #0b1824;
}

.trust .wrap {
  width:
    min(1240px, 100%);
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.trust-heading {
  max-width:
    860px;

  margin:
    0 auto 1.9rem;

  text-align:
    center;
}

.trust-heading h2 {
  margin:
    0;

  color:
    #ffffff;
}

.trust-heading .lede {
  max-width:
    760px;

  margin:
    .75rem auto 0;

  color:
    #aebfcb;

  font-size:
    1rem;

  line-height:
    1.55;
}

.trust-heading-line {
  width:
    44px;

  height:
    1px;

  margin:
    .85rem auto 0;

  background:
    rgba(216, 180, 102, .78);
}


/* ---------------------------------------------------------
   TRUST GRID
   --------------------------------------------------------- */

.trust-grid {
  gap:
    1rem;

  margin-top:
    1.8rem;
}


/* ---------------------------------------------------------
   TRUST MODULES
   --------------------------------------------------------- */

.trust-item {
  min-height:
    0;

  padding:
    1.25rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .17);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.trust-item::before {
  display:
    none;
}

.trust-item:hover {
  transform:
    none;

  border-color:
    rgba(216, 180, 102, .58);

  background:
    linear-gradient(
      180deg,
      #194663,
      #143a55
    );

  box-shadow:
    0 14px 30px
    rgba(0, 0, 0, .20);
}


/* ---------------------------------------------------------
   EMBLEM
   --------------------------------------------------------- */

.trust-icon {
  display:
    grid;

  place-items:
    center;

  width:
    64px;

  height:
    64px;

  margin:
    0 0 .9rem;
}

.trust-icon img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}


/* ---------------------------------------------------------
   MODULE TYPOGRAPHY
   --------------------------------------------------------- */

.trust-item strong {
  display:
    block;

  margin:
    0 0 .65rem;

  color:
    #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    1rem;

  font-weight:
    750;

  line-height:
    1.3;

  letter-spacing:
    .01em;
}

.trust-rule {
  width:
    30px;

  height:
    1px;

  margin:
    0 0 .75rem;

  background:
    rgba(216, 180, 102, .78);
}

.trust-item p {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .9rem;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   COMMITMENT STRIP
   --------------------------------------------------------- */

.trust-commitment {
  display:
    flex;

  align-items:
    center;

  gap:
    .9rem;

  margin:
    1rem 0 0;

  padding:
    .85rem 1rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    rgba(18, 52, 77, .72);

  box-shadow:
    none;
}

.commitment-icon {
  flex:
    0 0 42px;

  width:
    42px;

  height:
    42px;
}

.commitment-icon img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}

.trust-commitment p {
  margin:
    0;

  color:
    #c5d3dd;

  font-size:
    .9rem;

  line-height:
    1.5;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 950px) {
  .trust-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .trust {
    padding:
      3rem 1rem;
  }

  .trust-grid {
    grid-template-columns:
      1fr;

    gap:
      .8rem;
  }

  .trust-item {
    padding:
      1.1rem;
  }

  .trust-commitment {
    align-items:
      flex-start;
  }
}

/* 2026-10-06 TRUST HEADING REFINEMENT */

.trust-heading {
  max-width: 1100px;
  margin-bottom: 1.55rem;
}

@media (min-width: 901px) {
  .trust-heading h2 {
    white-space: nowrap;
    font-size: clamp(2.8rem, 4.2vw, 4rem);
  }
}

.trust-heading .lede {
  margin-top: .65rem;
}

.trust-grid {
  margin-top: 1.45rem;
}

/* 2026-10-06 PRECISION PROCESS SECTION
   =========================================================
   Chester Windows approved design standard:
   compact technical process flow with precise geometry,
   restrained gold and clean interface typography.
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.process {
  padding:
    4.25rem 4vw;

  border-top:
    1px solid
    rgba(137, 177, 202, .14);

  border-bottom:
    1px solid
    rgba(137, 177, 202, .14);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(37, 88, 121, .16),
      transparent 42%
    ),
    #0d1d2a;
}

.process .wrap {
  width:
    min(1160px, 100%);
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.process .wrap > hgroup {
  max-width:
    820px;

  margin:
    0 auto 2rem;

  text-align:
    center;
}

.process .wrap > hgroup h2 {
  margin:
    0 0 .55rem;

  color:
    #ffffff;
}

.process .wrap > hgroup .lede {
  margin:
    0;

  color:
    #aebfcb;

  font-size:
    1rem;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   PROCESS FLOW
   --------------------------------------------------------- */

.steps {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;
}

.steps::before {
  content:
    "";

  position:
    absolute;

  top:
    31px;

  left:
    16%;

  right:
    16%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(216, 180, 102, .08),
      rgba(216, 180, 102, .48),
      rgba(216, 180, 102, .08)
    );

  z-index:
    0;
}


/* ---------------------------------------------------------
   STEP MODULE
   --------------------------------------------------------- */

.step {
  position:
    relative;

  z-index:
    1;

  min-height:
    220px;

  margin:
    0;

  padding:
    1.25rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .17);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.step:hover {
  transform:
    none;

  border-color:
    rgba(216, 180, 102, .58);

  background:
    linear-gradient(
      180deg,
      #194663,
      #143a55
    );

  box-shadow:
    0 14px 30px
    rgba(0, 0, 0, .20);
}


/* ---------------------------------------------------------
   STEP NUMBER
   --------------------------------------------------------- */

.step span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    48px;

  height:
    30px;

  margin:
    0 0 1rem;

  border:
    1px solid
    rgba(216, 180, 102, .82);

  border-radius:
    4px;

  background:
    rgba(8, 31, 48, .78);

  color:
    #e0ba62;

  box-shadow:
    none;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .78rem;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


/* ---------------------------------------------------------
   STEP COPY
   --------------------------------------------------------- */

.step h3 {
  margin:
    0 0 .6rem;

  color:
    #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    1rem;

  font-weight:
    750;

  line-height:
    1.35;
}

.step p {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .9rem;

  line-height:
    1.55;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 800px) {
  .steps {
    grid-template-columns:
      1fr;
  }

  .steps::before {
    display:
      none;
  }

  .step {
    min-height:
      0;
  }
}

@media (max-width: 640px) {
  .process {
    padding:
      3rem 1rem;
  }

  .process .wrap > hgroup {
    margin-bottom:
      1.5rem;
  }

  .step {
    padding:
      1.1rem;
  }
}

/* 2026-10-06 TRUST TO PROCESS GAP FIX */

.trust {
  margin-bottom: 0 !important;
}

.process {
  margin-top: 0 !important;
}

/* 2026-10-06 PRECISION SERVICE AREA
   =========================================================
   Chester Windows approved design standard:
   dark structural section, precise local-area module,
   restrained gold and clean technical presentation.
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.service-area {
  position: relative;

  overflow: hidden;

  margin: 0;

  padding:
    4.25rem 4vw;

  border-top:
    1px solid
    rgba(137, 177, 202, .14);

  border-bottom:
    1px solid
    rgba(137, 177, 202, .14);

  background:
    radial-gradient(
      circle at 15% 100%,
      rgba(37, 88, 121, .16),
      transparent 38%
    ),
    #0b1824;
}

.service-area::before {
  display:
    none;
}

.service-area .wrap {
  width:
    min(1160px, 100%);

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, .8fr);

  gap:
    3rem;

  align-items:
    center;
}


/* ---------------------------------------------------------
   COPY
   --------------------------------------------------------- */

.service-copy hgroup {
  margin:
    0;
}

.service-copy h2 {
  margin:
    0 0 .75rem;

  color:
    #ffffff;
}

.service-copy .lede {
  max-width:
    680px;

  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    1rem;

  line-height:
    1.6;
}

.service-copy > p {
  max-width:
    680px;

  margin:
    1rem 0 0;

  color:
    #9fb4c3;

  font-size:
    .92rem;

  line-height:
    1.6;
}


/* ---------------------------------------------------------
   LOCAL AREA MODULE
   --------------------------------------------------------- */

.service-badge,
.service-map-card {
  justify-self:
    end;

  width:
    100%;

  max-width:
    430px;

  padding:
    1rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}


/* ---------------------------------------------------------
   MAP
   --------------------------------------------------------- */

.service-map-graphic {
  overflow:
    hidden;

  margin:
    0 0 .9rem;

  border:
    1px solid
    rgba(125, 166, 192, .26);

  border-radius:
    5px;

  background:
    #eef3f6;

  box-shadow:
    none;
}

.service-map-graphic img {
  display:
    block;

  width:
    100%;

  height:
    auto;
}


/* ---------------------------------------------------------
   MODULE LABEL / NOTE
   --------------------------------------------------------- */

.service-badge .label {
  display:
    block;

  margin:
    0 0 .45rem;

  color:
    #e0ba62;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .7rem;

  font-weight:
    800;

  letter-spacing:
    .16em;

  text-transform:
    uppercase;
}

.service-map-note,
.service-badge p {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .88rem;

  line-height:
    1.5;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .service-area .wrap {
    grid-template-columns:
      1fr;

    gap:
      2rem;
  }

  .service-badge,
  .service-map-card {
    justify-self:
      stretch;

    max-width:
      none;
  }
}

@media (max-width: 640px) {
  .service-area {
    padding:
      3rem 1rem;
  }

  .service-badge,
  .service-map-card {
    padding:
      .85rem;
  }
}

/* 2026-10-06 PROCESS TO SERVICE GAP FIX */

.process {
  margin-bottom: 0 !important;
}

.service-area {
  margin-top: 0 !important;
}

/* 2026-10-06 SERVICE HEADING REFINEMENT */

.service-copy h2 {
  max-width: 650px;
  font-size: clamp(2.65rem, 4vw, 3.65rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

/* 2026-10-06 PRECISION SITE FOOTER
   =========================================================
   Compact Chester Windows site footer using the approved
   dark precision design language.
   ========================================================= */

footer.container {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  padding:
    1rem 4vw;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    1rem;

  box-sizing:
    border-box;

  border-top:
    1px solid
    rgba(137, 177, 202, .18);

  background:
    #08141f;
}

footer.container small {
  margin:
    0;

  color:
    #93aabb;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .78rem;

  font-weight:
    500;

  letter-spacing:
    .015em;
}

footer.container a,
footer.container a:visited {
  color:
    #d7e4ec;

  text-decoration:
    none;

  transition:
    color .16s ease;
}

footer.container a:hover,
footer.container a:focus-visible {
  color:
    #e0ba62;
}

@media (max-width: 640px) {
  footer.container {
    justify-content:
      center;

    padding:
      1rem;

    row-gap:
      .45rem;

    text-align:
      center;
  }

  footer.container small {
    width:
      100%;

    font-size:
      .74rem;
  }
}

/* 2026-10-06 ENQUIRY TO FOOTER SPACING */

#contact {
  padding-bottom: 2rem;
}

@media (max-width: 640px) {
  #contact {
    padding-bottom: 1.5rem;
  }
}

/* 2026-10-06 PRECISION HEADER NAVIGATION
   =========================================================
   Updates navigation typography and the Doors dropdown
   to the approved Chester Windows precision UI standard.

   Header sizing, logo, phone control, CTA and hover bridge
   remain structurally unchanged.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP NAV TYPOGRAPHY
   --------------------------------------------------------- */

.desktop-nav > li > a:not(.header-cta):not(.header-phone),
.desktop-nav .nav-dropdown-toggle {
  position: relative;

  color:
    #f2f6f8;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .8rem;

  font-weight:
    650;

  letter-spacing:
    .025em;

  transition:
    color .16s ease;
}

.desktop-nav > li > a:not(.header-cta):not(.header-phone)::after,
.desktop-nav .nav-dropdown-toggle::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    .12rem;

  width:
    0;

  height:
    1px;

  background:
    #d8b466;

  transform:
    translateX(-50%);

  transition:
    width .16s ease;
}

.desktop-nav > li > a:not(.header-cta):not(.header-phone):hover,
.desktop-nav > li > a:not(.header-cta):not(.header-phone):focus-visible,
.desktop-nav .nav-dropdown:hover .nav-dropdown-toggle,
.desktop-nav .nav-dropdown:focus-within .nav-dropdown-toggle {
  color:
    #ffffff;
}

.desktop-nav > li > a:not(.header-cta):not(.header-phone):hover::after,
.desktop-nav > li > a:not(.header-cta):not(.header-phone):focus-visible::after,
.desktop-nav .nav-dropdown:hover .nav-dropdown-toggle::after,
.desktop-nav .nav-dropdown:focus-within .nav-dropdown-toggle::after {
  width:
    22px;
}


/* ---------------------------------------------------------
   DOORS DROPDOWN SHELL
   --------------------------------------------------------- */

.nav-dropdown-menu {
  width:
    320px;

  padding:
    .4rem;

  border:
    1px solid
    rgba(125, 166, 192, .34);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      rgba(18, 55, 81, .985),
      rgba(9, 30, 46, .995)
    );

  box-shadow:
    0 18px 38px
    rgba(0, 0, 0, .28);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* Old decorative pointer no longer matches precision UI. */

.nav-dropdown-menu::before {
  display:
    none;
}


/* ---------------------------------------------------------
   DROPDOWN ROWS
   --------------------------------------------------------- */

.desktop-nav .nav-dropdown-menu a,
.nav-dropdown-disabled {
  position:
    relative;

  display:
    block;

  margin:
    0;

  padding:
    .72rem .78rem;

  border:
    1px solid
    transparent;

  border-radius:
    5px;

  background:
    transparent;
}

.desktop-nav .nav-dropdown-menu a + a,
.nav-dropdown-disabled,
.nav-dropdown-disabled + a {
  margin-top:
    .18rem;
}

.desktop-nav .nav-dropdown-menu a {
  color:
    #ffffff;
}

.desktop-nav .nav-dropdown-menu a:hover,
.desktop-nav .nav-dropdown-menu a:focus-visible {
  border-color:
    rgba(216, 180, 102, .36);

  background:
    rgba(35, 80, 109, .56);

  color:
    #ffffff;

  outline:
    none;
}


/* ---------------------------------------------------------
   DROPDOWN COPY
   --------------------------------------------------------- */

.nav-dropdown-menu strong {
  display:
    block;

  color:
    #f5f8fa;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .82rem;

  font-weight:
    700;

  line-height:
    1.25;

  letter-spacing:
    .015em;
}

.nav-dropdown-menu small {
  display:
    block;

  margin-top:
    .18rem;

  color:
    #9fb4c3;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .68rem;

  font-weight:
    450;

  line-height:
    1.35;
}


/* ---------------------------------------------------------
   DISABLED / COMING SOON
   --------------------------------------------------------- */

.nav-dropdown-disabled {
  opacity:
    1;

  border-color:
    rgba(125, 166, 192, .12);

  background:
    rgba(7, 27, 42, .22);

  cursor:
    default;
}

.nav-dropdown-disabled strong {
  color:
    #879ba9;
}

.nav-dropdown-disabled small {
  color:
    #657b8b;
}


/* ---------------------------------------------------------
   MOBILE NAVIGATION
   --------------------------------------------------------- */

.mobile-menu a,
.mobile-nav-dropdown-toggle {
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

.mobile-nav-dropdown-toggle {
  border-radius:
    5px;

  font-size:
    .92rem;

  font-weight:
    650;

  letter-spacing:
    .02em;
}

.mobile-nav-dropdown-toggle:hover,
.mobile-nav-dropdown-toggle:focus {
  background:
    rgba(31, 76, 105, .54);

  color:
    #ffffff;
}

.mobile-nav-submenu {
  border-left-color:
    rgba(216, 180, 102, .48);
}

.mobile-nav-submenu a,
.nav-coming-soon {
  border-radius:
    5px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .84rem;
}


/* ---------------------------------------------------------
   NARROW DESKTOP
   --------------------------------------------------------- */

@media (max-width: 1250px) and (min-width: 901px) {
  .desktop-nav > li > a:not(.header-cta):not(.header-phone),
  .desktop-nav .nav-dropdown-toggle {
    font-size:
      .75rem;
  }
}

/* 2026-10-06 COMPACT PREMIUM NAV REFINEMENT
   =========================================================
   Refines the main navigation and Doors dropdown after
   visual review.

   Keeps the approved header layout, logo, phone control,
   CTA and hover bridge intact.
   ========================================================= */


/* ---------------------------------------------------------
   MAIN DESKTOP NAV
   --------------------------------------------------------- */

.desktop-nav > li > a:not(.header-cta):not(.header-phone),
.desktop-nav .nav-dropdown-toggle {
  padding:
    .42rem .12rem;

  color:
    #dce7ee;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .78rem;

  font-weight:
    600;

  letter-spacing:
    .035em;

  text-shadow:
    none;

  transition:
    color .15s ease;
}


/* Remove previous underline treatment completely. */

.desktop-nav > li > a:not(.header-cta):not(.header-phone)::after,
.desktop-nav .nav-dropdown-toggle::after {
  display:
    none;
}


/* Clean text-state interaction only. */

.desktop-nav > li > a:not(.header-cta):not(.header-phone):hover,
.desktop-nav > li > a:not(.header-cta):not(.header-phone):focus-visible,
.desktop-nav .nav-dropdown:hover .nav-dropdown-toggle,
.desktop-nav .nav-dropdown:focus-within .nav-dropdown-toggle,
.desktop-nav .nav-dropdown.open .nav-dropdown-toggle {
  color:
    #e0ba62;
}


/* ---------------------------------------------------------
   COMPACT DOORS DROPDOWN
   --------------------------------------------------------- */

.nav-dropdown-menu {
  top:
    calc(100% + .72rem);

  width:
    270px;

  padding:
    .32rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    5px;

  background:
    linear-gradient(
      180deg,
      rgba(19, 56, 82, .99),
      rgba(8, 29, 44, .995)
    );

  box-shadow:
    0 14px 30px
    rgba(0, 0, 0, .24);
}


/* No decorative pointer. */

.nav-dropdown-menu::before {
  display:
    none;
}


/* ---------------------------------------------------------
   DROPDOWN ITEMS
   --------------------------------------------------------- */

.desktop-nav .nav-dropdown-menu a,
.nav-dropdown-disabled {
  padding:
    .52rem .62rem;

  border:
    1px solid
    transparent;

  border-radius:
    4px;

  background:
    transparent;
}

.desktop-nav .nav-dropdown-menu a + a,
.nav-dropdown-disabled,
.nav-dropdown-disabled + a {
  margin-top:
    .08rem;
}

.desktop-nav .nav-dropdown-menu a:hover,
.desktop-nav .nav-dropdown-menu a:focus-visible {
  border-color:
    rgba(216, 180, 102, .28);

  background:
    rgba(34, 77, 105, .48);

  outline:
    none;
}


/* ---------------------------------------------------------
   DROPDOWN TYPOGRAPHY
   --------------------------------------------------------- */

.nav-dropdown-menu strong {
  color:
    #f3f7f9;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .76rem;

  font-weight:
    650;

  line-height:
    1.22;

  letter-spacing:
    .01em;
}

.nav-dropdown-menu small {
  margin-top:
    .1rem;

  color:
    #96acbb;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .62rem;

  font-weight:
    450;

  line-height:
    1.28;
}


/* ---------------------------------------------------------
   DISABLED ITEM
   --------------------------------------------------------- */

.nav-dropdown-disabled {
  border-color:
    rgba(125, 166, 192, .10);

  background:
    rgba(5, 24, 37, .22);
}

.nav-dropdown-disabled strong {
  color:
    #7e94a3;
}

.nav-dropdown-disabled small {
  color:
    #617786;
}


/* ---------------------------------------------------------
   NARROWER DESKTOP
   --------------------------------------------------------- */

@media (max-width: 1250px) and (min-width: 901px) {
  .desktop-nav > li > a:not(.header-cta):not(.header-phone),
  .desktop-nav .nav-dropdown-toggle {
    font-size:
      .74rem;
  }

  .nav-dropdown-menu {
    width:
      255px;
  }
}

/* 2026-10-06 FINAL PRECISION NAV REFINEMENT */


/* ---------------------------------------------------------
   MAIN NAV — QUIETER / MORE PREMIUM
   --------------------------------------------------------- */

.desktop-nav > li > a:not(.header-cta):not(.header-phone),
.desktop-nav .nav-dropdown-toggle {
  color:
    #d6e2e9;

  font-size:
    .75rem;

  font-weight:
    550;

  letter-spacing:
    .045em;
}

.desktop-nav > li > a:not(.header-cta):not(.header-phone):hover,
.desktop-nav > li > a:not(.header-cta):not(.header-phone):focus-visible {
  color:
    #ffffff;
}

.desktop-nav .nav-dropdown:hover .nav-dropdown-toggle,
.desktop-nav .nav-dropdown:focus-within .nav-dropdown-toggle,
.desktop-nav .nav-dropdown.open .nav-dropdown-toggle {
  color:
    #e0ba62;
}


/* ---------------------------------------------------------
   DROPDOWN SHELL — TIGHTER
   --------------------------------------------------------- */

.nav-dropdown-menu {
  width:
    250px;

  padding:
    .24rem;

  border-radius:
    5px;

  box-shadow:
    0 12px 26px
    rgba(0, 0, 0, .23);
}


/* ---------------------------------------------------------
   DROPDOWN ROWS
   --------------------------------------------------------- */

.desktop-nav .nav-dropdown-menu a,
.nav-dropdown-disabled {
  padding:
    .43rem .5rem;

  border:
    0;

  border-left:
    2px solid
    transparent;

  border-radius:
    3px;
}

.desktop-nav .nav-dropdown-menu a + a,
.nav-dropdown-disabled,
.nav-dropdown-disabled + a {
  margin-top:
    .04rem;
}

.desktop-nav .nav-dropdown-menu a:hover,
.desktop-nav .nav-dropdown-menu a:focus-visible {
  border-left-color:
    #d8b466;

  background:
    rgba(42, 84, 111, .34);

  box-shadow:
    none;
}


/* ---------------------------------------------------------
   DROPDOWN COPY
   --------------------------------------------------------- */

.nav-dropdown-menu strong {
  font-size:
    .71rem;

  font-weight:
    650;

  line-height:
    1.18;
}

.nav-dropdown-menu small {
  margin-top:
    .08rem;

  color:
    #91a7b6;

  font-size:
    .58rem;

  line-height:
    1.24;
}


/* ---------------------------------------------------------
   DISABLED ROW
   --------------------------------------------------------- */

.nav-dropdown-disabled {
  border-left-color:
    transparent;

  background:
    rgba(5, 24, 37, .18);
}

.nav-dropdown-disabled strong {
  color:
    #778e9e;
}

.nav-dropdown-disabled small {
  color:
    #5f7584;
}


/* ---------------------------------------------------------
   NARROW DESKTOP
   --------------------------------------------------------- */

@media (max-width: 1250px) and (min-width: 901px) {
  .desktop-nav > li > a:not(.header-cta):not(.header-phone),
  .desktop-nav .nav-dropdown-toggle {
    font-size:
      .72rem;
  }

  .nav-dropdown-menu {
    width:
      240px;
  }
}

/* 2026-10-06 PRODUCT INTRO FINAL BALANCE */

.products .wrap > hgroup {
  max-width: 1180px;
  margin-bottom: 1.45rem;
}

@media (min-width: 1100px) {
  .products .wrap > hgroup h2 {
    white-space: nowrap;
    font-size: clamp(2.8rem, 3.7vw, 3.8rem);
  }
}

.products .cards {
  margin-top: 0;
}

/* 2026-10-06 FINAL MOBILE PRECISION NAV */

@media (max-width: 900px) {

  /* Stronger menu surface so page content does not compete
     visually with navigation. */
  .mobile-menu {
    background:
      rgba(7, 27, 43, .985);

    backdrop-filter:
      blur(16px);

    -webkit-backdrop-filter:
      blur(16px);

    border-top:
      1px solid
      rgba(216, 180, 102, .20);
  }


  /* Main navigation rows */
  .mobile-menu > ul > li > a:not(.mobile-menu-cta),
  .mobile-nav-dropdown-toggle {
    padding:
      .72rem .8rem;

    border:
      1px solid
      transparent;

    border-radius:
      5px;

    color:
      #e6eef3;

    background:
      transparent;

    font-family:
      Arial,
      Helvetica,
      sans-serif;

    font-size:
      1rem;

    font-weight:
      550;

    letter-spacing:
      .015em;
  }


  /* Expanded Doors row */
  .mobile-nav-dropdown.open >
  .mobile-nav-dropdown-toggle {
    border-color:
      rgba(125, 166, 192, .28);

    background:
      rgba(35, 80, 109, .46);

    color:
      #ffffff;
  }


  /* Compact submenu */
  .mobile-nav-submenu {
    margin:
      .15rem 0 .35rem .65rem !important;

    padding:
      .08rem 0 .08rem .65rem !important;

    border-left:
      1px solid
      rgba(216, 180, 102, .55);
  }

  .mobile-nav-submenu a,
  .nav-coming-soon {
    padding:
      .48rem .55rem;

    border-radius:
      4px;

    font-family:
      Arial,
      Helvetica,
      sans-serif;

    font-size:
      .88rem;

    font-weight:
      500;
  }

  .mobile-nav-submenu a:hover,
  .mobile-nav-submenu a:focus-visible {
    background:
      rgba(35, 80, 109, .38);

    color:
      #ffffff;
  }


  /* Coming soon remains clearly unavailable */
  .nav-coming-soon {
    color:
      #758b9a;
  }

  .nav-coming-soon small {
    margin-top:
      .08rem;

    color:
      #5e7483;

    font-size:
      .65rem;
  }


  /* Replace old solid-gold CTA with the approved
     precision-button treatment. */
  .mobile-menu .mobile-menu-cta {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      100%;

    margin:
      .7rem 0 0;

    padding:
      .85rem 1rem;

    border:
      1px solid
      rgba(216, 180, 102, .82);

    border-radius:
      5px;

    background:
      linear-gradient(
        180deg,
        #173f5c,
        #12344d
      );

    color:
      #ffffff !important;

    box-shadow:
      none;

    font-family:
      Arial,
      Helvetica,
      sans-serif;

    font-size:
      .95rem;

    font-weight:
      700;

    letter-spacing:
      .015em;

    text-align:
      center;
  }

  .mobile-menu .mobile-menu-cta:hover,
  .mobile-menu .mobile-menu-cta:focus-visible {
    border-color:
      #e0ba62;

    background:
      #194663;

    color:
      #ffffff !important;
  }
}

/* 2026-10-06 MOBILE HERO SCALE REFINEMENT
   Mobile-only. Approved desktop hero remains untouched. */

@media (max-width: 640px) {

  .hero {
    min-height: clamp(610px, 72svh, 680px);
  }

  .hero-inner {
    padding:
      2.4rem 1.15rem
      2.35rem;

    text-align:
      center;
  }

  .hero .eyebrow {
    margin-bottom:
      1.2rem;

    font-size:
      .72rem;

    line-height:
      1.45;

    letter-spacing:
      .17em;
  }

  .hero h1 {
    max-width:
      390px;

    margin:
      0 auto 1.25rem;

    font-size:
      clamp(3rem, 13.5vw, 3.65rem);

    line-height:
      .96;

    letter-spacing:
      -.035em;
  }

  .hero-copy {
    max-width:
      350px;

    margin:
      0 auto;

    font-size:
      1.05rem;

    line-height:
      1.5;
  }

  .hero-actions {
    margin-top:
      1.45rem;

    gap:
      .65rem;
  }

  .hero-actions a {
    width:
      min(100%, 300px);

    min-height:
      40px;

    padding:
      .58rem .85rem;

    font-size:
      .8rem;
  }
}

/* 2026-10-06 MOBILE HERO FINAL COMPACTION
   Mobile only — approved desktop hero unchanged. */

@media (max-width: 640px) {

  .hero {
    min-height: 0 !important;
    height: auto;
  }

  .hero-inner {
    min-height: 0 !important;

    padding:
      3rem 1.1rem
      2.4rem;

    justify-content:
      flex-start;
  }

  .hero .eyebrow {
    max-width:
      350px;

    margin:
      0 auto 1rem;

    font-size:
      .68rem;

    line-height:
      1.4;

    letter-spacing:
      .16em;
  }

  .hero h1 {
    max-width:
      350px;

    margin:
      0 auto 1rem;

    font-size:
      clamp(2.65rem, 11.5vw, 3.15rem);

    line-height:
      .95;
  }

  .hero-copy {
    max-width:
      330px;

    font-size:
      .95rem;

    line-height:
      1.45;
  }

  .hero-actions {
    margin-top:
      1.2rem;

    gap:
      .55rem;
  }

  .hero-actions a {
    width:
      min(100%, 285px);

    min-height:
      38px;

    padding:
      .55rem .8rem;

    font-size:
      .78rem;
  }
}

/* 2026-10-06 MOBILE PRODUCT MATRIX COMPACTION
   Mobile-only. Approved desktop product matrix,
   mobile header and mobile hero remain unchanged. */

@media (max-width: 640px) {

  /* Section */
  .products {
    padding:
      2.4rem 1rem;
  }

  .products .wrap > hgroup {
    max-width:
      350px;

    margin:
      0 auto 1.35rem;
  }

  .products .wrap > hgroup h2 {
    margin-bottom:
      .45rem;

    font-size:
      clamp(2rem, 9vw, 2.5rem);

    line-height:
      1.02;
  }

  .products .wrap > hgroup .lede {
    font-size:
      .88rem;

    line-height:
      1.45;
  }


  /* Card stack */
  .products .cards {
    gap:
      .65rem;
  }

  .products .card {
    border-radius:
      5px;
  }


  /* Shallower image crop */
  .products .card-media {
    aspect-ratio:
      16 / 7;
  }


  /* Compact card copy */
  .products .card-body {
    padding:
      .85rem 1rem .3rem;
  }

  .products .card h3 {
    margin-bottom:
      .32rem;

    font-size:
      1.22rem;

    line-height:
      1.08;
  }

  .products .card p {
    font-size:
      .82rem;

    line-height:
      1.42;
  }


  /* Compact precision action */
  .products .card > a {
    min-height:
      38px;

    margin:
      .4rem 1rem .85rem;

    padding:
      .48rem .65rem;

    font-size:
      .75rem;

    line-height:
      1.2;
  }
}

/* 2026-10-06 MOBILE PRODUCT BUTTON FIX */

@media (max-width: 640px) {

  .products .card > a {
    width:
      auto !important;

    margin:
      .4rem 1rem .85rem !important;

    display:
      flex !important;

    align-items:
      center;

    justify-content:
      center;

    box-sizing:
      border-box;

    text-align:
      center;
  }
}

/* 2026-10-06 MOBILE TRUST COMPACTION
   Mobile-only. All previously approved desktop and
   mobile homepage areas remain unchanged. */

@media (max-width: 640px) {

  /* -------------------------------------------------------
     SECTION / HEADING
     ------------------------------------------------------- */

  .trust {
    padding:
      2.4rem 1rem;
  }

  .trust-heading {
    max-width:
      350px;

    margin:
      0 auto 1.25rem;
  }

  .trust-heading h2 {
    font-size:
      clamp(2rem, 9.5vw, 2.5rem);

    line-height:
      1.02;

    letter-spacing:
      -.025em;
  }

  .trust-heading-line {
    width:
      36px;

    margin-top:
      .65rem;
  }

  .trust-heading .lede {
    margin-top:
      .6rem;

    font-size:
      .88rem;

    line-height:
      1.45;
  }


  /* -------------------------------------------------------
     GRID
     ------------------------------------------------------- */

  .trust-grid {
    grid-template-columns:
      1fr;

    gap:
      .65rem;

    margin-top:
      1.15rem;
  }


  /* -------------------------------------------------------
     TRUST MODULES
     ------------------------------------------------------- */

  .trust-item {
    padding:
      .9rem 1rem 1rem;

    border-radius:
      5px;

    text-align:
      center;
  }


  /* -------------------------------------------------------
     EMBLEM
     ------------------------------------------------------- */

  .trust-icon {
    width:
      48px;

    height:
      48px;

    margin:
      0 auto .55rem;
  }


  /* -------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------- */

  .trust-item strong {
    margin:
      0 auto .42rem;

    font-size:
      .88rem;

    line-height:
      1.25;
  }

  .trust-rule {
    width:
      24px;

    margin:
      0 auto .52rem;
  }

  .trust-item p {
    max-width:
      330px;

    margin:
      0 auto;

    font-size:
      .8rem;

    line-height:
      1.45;
  }


  /* -------------------------------------------------------
     COMMITMENT STRIP
     ------------------------------------------------------- */

  .trust-commitment {
    align-items:
      center;

    justify-content:
      center;

    gap:
      .6rem;

    margin-top:
      .65rem;

    padding:
      .75rem .85rem;

    border-radius:
      5px;

    text-align:
      left;
  }

  .commitment-icon {
    flex:
      0 0 34px;

    width:
      34px;

    height:
      34px;
  }

  .trust-commitment p {
    font-size:
      .78rem;

    line-height:
      1.4;
  }
}

/* 2026-10-06 MOBILE HEADER BRAND CENTRING
   Mobile-only. Desktop header remains unchanged. */

@media (max-width: 900px) {

  .site-header {
    position:
      relative;

    min-height:
      88px;

    padding:
      0 10px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;
  }


  /* -------------------------------------------------------
     CENTRED BRAND LOCKUP
     ------------------------------------------------------- */

  .site-header .brand-list {
    position:
      absolute;

    z-index:
      2;

    left:
      50%;

    top:
      50%;

    margin:
      0 !important;

    padding:
      0;

    transform:
      translate(-50%, -50%);
  }

  .site-header .brand-link {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    width:
      max-content;

    margin:
      0;
  }

  .site-header .brand-logo {
    width:
      min(185px, 52vw) !important;

    height:
      auto !important;

    max-height:
      55px !important;
  }

  .site-header .site-brand-tagline {
    justify-content:
      center;

    margin-top:
      -2px;

    gap:
      5px;

    font-size:
      6.5px;

    letter-spacing:
      .11em;

    text-align:
      center;
  }


  /* -------------------------------------------------------
     LEFT PHONE UTILITY
     ------------------------------------------------------- */

  .site-header .mobile-header-phone {
    position:
      absolute;

    z-index:
      3;

    left:
      9px;

    top:
      50%;

    width:
      34px;

    height:
      34px;

    margin:
      0;

    padding:
      0;

    border-width:
      1px;

    font-size:
      .88rem;

    transform:
      translateY(-50%);

    box-shadow:
      none;
  }


  /* -------------------------------------------------------
     RIGHT MENU UTILITY
     ------------------------------------------------------- */

  .site-header .mobile-menu-toggle {
    position:
      absolute;

    z-index:
      3;

    right:
      9px;

    top:
      50%;

    width:
      34px;

    height:
      34px;

    margin:
      0;

    padding:
      7px;

    transform:
      translateY(-50%);
  }

  .site-header .mobile-menu-toggle span {
    width:
      18px;

    height:
      2px;

    margin:
      2px auto;
  }
}


@media (max-width: 390px) {

  .site-header .brand-logo {
    width:
      min(172px, 50vw) !important;
  }

  .site-header .site-brand-tagline {
    gap:
      4px;

    font-size:
      6px;

    letter-spacing:
      .09em;
  }

  .site-header .mobile-header-phone {
    left:
      7px;
  }

  .site-header .mobile-menu-toggle {
    right:
      7px;
  }
}

/* 2026-10-06 MOBILE BRAND SCALE FINAL
   Preserve approved mobile header positioning and controls. */

@media (max-width: 900px) {

  .site-header .brand-logo {
    width:
      min(205px, 56vw) !important;

    max-height:
      59px !important;
  }

  .site-header .site-brand-tagline {
    gap:
      4px;

    font-size:
      5.8px;

    letter-spacing:
      .085em;
  }

  .site-header .site-brand-tagline b {
    font-size:
      6px;
  }
}


@media (max-width: 390px) {

  .site-header .brand-logo {
    width:
      min(190px, 54vw) !important;
  }

  .site-header .site-brand-tagline {
    font-size:
      5.5px;

    letter-spacing:
      .075em;
  }

  .site-header .site-brand-tagline b {
    font-size:
      5.7px;
  }
}

/* 2026-10-06 MOBILE CALL ACTION IN MENU
   Phone utility moved out of the mobile header and into
   the navigation panel. Desktop phone remains unchanged. */

@media (max-width: 900px) {

  /* Safety fallback: no standalone phone in mobile header. */
  .mobile-header-phone {
    display:
      none !important;
  }

  .mobile-menu-call-item {
    margin-top:
      .4rem;
  }

  .mobile-menu .mobile-menu-call {
    display:
      flex;

    align-items:
      center;

    gap:
      .7rem;

    min-height:
      48px;

    padding:
      .6rem .7rem;

    border:
      1px solid
      rgba(216, 180, 102, .32);

    border-radius:
      5px;

    background:
      rgba(15, 46, 68, .72);

    color:
      #ffffff;

    text-decoration:
      none;
  }

  .mobile-menu .mobile-menu-call:hover,
  .mobile-menu .mobile-menu-call:focus-visible {
    border-color:
      rgba(216, 180, 102, .68);

    background:
      rgba(24, 66, 93, .86);
  }

  .mobile-menu-call-icon {
    flex:
      0 0 30px;

    display:
      grid;

    place-items:
      center;

    width:
      30px;

    height:
      30px;

    border:
      1px solid
      rgba(216, 180, 102, .72);

    border-radius:
      50%;

    color:
      #e0ba62;

    font-size:
      .78rem;

    line-height:
      1;
  }

  .mobile-menu-call-copy {
    display:
      flex;

    flex-direction:
      column;

    gap:
      .08rem;

    min-width:
      0;
  }

  .mobile-menu-call-copy strong {
    color:
      #ffffff;

    font-size:
      .78rem;

    font-weight:
      700;

    line-height:
      1.2;
  }

  .mobile-menu-call-copy small {
    color:
      #aebfcb;

    font-size:
      .69rem;

    line-height:
      1.2;

    letter-spacing:
      .025em;
  }
}

/* 2026-10-06 MOBILE LOGO MAX COMFORTABLE SCALE
   Logo only. Current tagline and header positioning remain untouched. */

@media (max-width: 900px) {

  .site-header .brand-logo {
    width:
      min(238px, 64vw) !important;

    max-height:
      68px !important;
  }
}


@media (max-width: 390px) {

  .site-header .brand-logo {
    width:
      min(220px, 62vw) !important;

    max-height:
      63px !important;
  }
}

/* 2026-10-06 MOBILE LOGO MAX COMFORTABLE SCALE
   Logo only. Current tagline and header positioning remain untouched. */

@media (max-width: 900px) {

  .site-header .brand-logo {
    width:
      min(238px, 64vw) !important;

    max-height:
      68px !important;
  }
}


@media (max-width: 390px) {

  .site-header .brand-logo {
    width:
      min(220px, 62vw) !important;

    max-height:
      63px !important;
  }
}

/* 2026-10-06 MOBILE MENU FINAL DENSITY
   Keeps approved branding and call placement.
   Refines only mobile navigation density/alignment. */

@media (max-width: 900px) {

  .mobile-menu {
    padding:
      .55rem .8rem .8rem;
  }

  .mobile-menu > ul {
    margin:
      0;

    padding:
      0;
  }

  .mobile-menu > ul > li {
    margin:
      0;

    padding:
      0;
  }

  .mobile-menu > ul > li > a,
  .mobile-menu .mobile-nav-dropdown-toggle {
    min-height:
      0;

    padding:
      .58rem .45rem;

    font-size:
      .92rem;

    line-height:
      1.2;
  }

  .mobile-menu .mobile-nav-dropdown-toggle {
    width:
      100%;

    margin:
      0;

    justify-content:
      flex-start;

    text-align:
      left;
  }

  .mobile-nav-submenu {
    margin:
      .15rem 0 .25rem;

    padding:
      0 0 0 .45rem;
  }

  .mobile-nav-submenu li a,
  .mobile-nav-submenu .nav-coming-soon {
    padding:
      .48rem .55rem;
  }


  /* Call utility */

  .mobile-menu-call-item {
    margin-top:
      .25rem;
  }

  .mobile-menu .mobile-menu-call {
    min-height:
      44px;

    padding:
      .5rem .55rem;
  }


  /* Primary mobile CTA */

  .mobile-menu .mobile-menu-cta {
    min-height:
      44px;

    margin-top:
      .4rem;

    padding:
      .55rem .8rem;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    font-size:
      .86rem;

    line-height:
      1.2;
  }
}

/* 2026-10-06 MOBILE DOORS ALIGNMENT FIX
   Align Doors precisely with the other top-level mobile nav labels. */

@media (max-width: 900px) {

  .mobile-menu .mobile-nav-dropdown-toggle {
    padding-left:
      .15rem !important;
  }
}

/* 2026-10-06 MOBILE DOORS ALIGNMENT FINAL */

@media (max-width: 900px) {

  .mobile-menu .mobile-nav-dropdown-toggle {
    padding-left:
      .30rem !important;
  }
}

/* 2026-10-06 MOBILE TRUST FINAL DENSITY
   Preserve approved heading. Compact cards and closing strip only. */

@media (max-width: 640px) {

  .trust {
    padding:
      2.4rem 1rem 1.6rem;
  }

  .trust-grid {
    gap:
      .55rem;
  }

  .trust-item {
    padding:
      .72rem .85rem .8rem;
  }

  .trust-icon {
    width:
      42px;

    height:
      42px;

    margin:
      0 auto .42rem;
  }

  .trust-item strong {
    margin-bottom:
      .32rem;

    font-size:
      .84rem;

    line-height:
      1.22;
  }

  .trust-rule {
    width:
      22px;

    margin-bottom:
      .4rem;
  }

  .trust-item p {
    max-width:
      320px;

    font-size:
      .76rem;

    line-height:
      1.4;
  }


  /* Closing commitment becomes a compact strip rather than
     another full-size trust card. */

  .trust-commitment {
    flex-direction:
      row !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;

    gap:
      .65rem;

    margin-top:
      .55rem;

    padding:
      .65rem .8rem;

    text-align:
      left !important;
  }

  .commitment-icon {
    flex:
      0 0 30px;

    width:
      30px;

    height:
      30px;

    margin:
      0;
  }

  .trust-commitment p {
    margin:
      0;

    font-size:
      .76rem;

    line-height:
      1.38;
  }
}

/* 2026-10-06 MOBILE PROCESS COMPACTION
   Mobile-only. Matches the approved Trust-section density. */

@media (max-width: 640px) {

  /* Section / heading */

  .process {
    padding:
      2.4rem 1rem;
  }

  .process .wrap > hgroup {
    max-width:
      350px;

    margin:
      0 auto 1.25rem;
  }

  .process .wrap > hgroup h2 {
    margin-bottom:
      .5rem;

    font-size:
      clamp(2rem, 9.5vw, 2.5rem);

    line-height:
      1.02;

    letter-spacing:
      -.025em;
  }

  .process .wrap > hgroup .lede {
    max-width:
      340px;

    margin:
      0 auto;

    font-size:
      .88rem;

    line-height:
      1.45;
  }


  /* Step stack */

  .steps {
    gap:
      .55rem;
  }

  .step {
    min-height:
      0;

    padding:
      .8rem .9rem .9rem;

    border-radius:
      5px;

    text-align:
      center;
  }


  /* Number */

  .step span {
    width:
      44px;

    height:
      26px;

    margin:
      0 auto .55rem;

    font-size:
      .7rem;
  }


  /* Copy */

  .step h3 {
    margin:
      0 auto .38rem;

    font-size:
      .86rem;

    line-height:
      1.25;
  }

  .step p {
    max-width:
      330px;

    margin:
      0 auto;

    font-size:
      .78rem;

    line-height:
      1.42;
  }
}

/* 2026-10-06 MOBILE SERVICE AREA COMPACTION
   Mobile-only. Also tightens the Process-to-Service transition
   without modifying the approved Process section itself. */

@media (max-width: 640px) {

  /* Section / transition */

  .service-area {
    padding:
      1.8rem 1rem 2.4rem;
  }

  .service-area .wrap {
    gap:
      1.25rem;
  }


  /* Copy */

  .service-copy {
    text-align:
      center;
  }

  .service-copy h2 {
    max-width:
      355px;

    margin:
      0 auto .55rem;

    font-size:
      clamp(2rem, 9.5vw, 2.5rem);

    line-height:
      1.03;

    letter-spacing:
      -.025em;
  }

  .service-copy .lede {
    max-width:
      340px;

    margin:
      0 auto;

    font-size:
      .88rem;

    line-height:
      1.45;
  }

  .service-copy > p {
    max-width:
      340px;

    margin:
      .7rem auto 0;

    font-size:
      .8rem;

    line-height:
      1.45;
  }


  /* Map module */

  .service-badge,
  .service-map-card {
    padding:
      .7rem;

    border-radius:
      5px;
  }

  .service-map-graphic {
    margin-bottom:
      .6rem;

    border-radius:
      4px;
  }

  .service-badge .label {
    margin-bottom:
      .32rem;

    font-size:
      .64rem;

    letter-spacing:
      .13em;
  }

  .service-map-note,
  .service-badge p {
    font-size:
      .78rem;

    line-height:
      1.4;
  }
}

/* 2026-10-06 MOBILE SERVICE HEADING FINAL
   Heading scale only. Service copy and map remain unchanged. */

@media (max-width: 640px) {

  .service-copy h2 {
    max-width:
      340px;

    font-size:
      clamp(1.9rem, 8.5vw, 2.2rem);

    line-height:
      1.04;
  }
}

/* 2026-10-06 MOBILE SERVICE TRANSITION FINAL
   Reduce only the empty space above the approved Service Area. */

@media (max-width: 640px) {

  .service-area {
    padding-top:
      .75rem;
  }
}

/* 2026-10-06 MOBILE ENQUIRY FINAL COMPACTION
   Mobile-only. Preserve desktop form and existing behaviour. */

@media (max-width: 640px) {

  #contact {
    padding:
      1.6rem 1rem 1.35rem;
  }

  #contact article {
    padding:
      .9rem;

    border-radius:
      6px;
  }


  /* -------------------------------------------------------
     HEADING
     ------------------------------------------------------- */

  #contact hgroup {
    margin-bottom:
      .85rem;
  }

  #contact hgroup h2 {
    max-width:
      340px;

    margin:
      0 auto .4rem;

    font-size:
      clamp(1.9rem, 8.7vw, 2.25rem);

    line-height:
      1.03;

    letter-spacing:
      -.025em;
  }

  #contact hgroup h3 {
    max-width:
      335px;

    margin:
      0 auto;

    font-size:
      .84rem;

    line-height:
      1.42;
  }


  /* -------------------------------------------------------
     FORM RHYTHM
     ------------------------------------------------------- */

  #contact .form-stack {
    gap:
      .55rem;
  }


  /* -------------------------------------------------------
     TEXT FIELDS
     ------------------------------------------------------- */

  #contact .form-stack input[type="text"],
  #contact .form-stack input[type="tel"],
  #contact .form-stack input[type="email"] {
    min-height:
      44px !important;

    height:
      44px !important;

    padding:
      .5rem .65rem !important;

    font-size:
      .82rem !important;
  }

  #contact .form-stack textarea {
    min-height:
      82px !important;

    padding:
      .55rem .65rem !important;

    font-size:
      .82rem !important;

    line-height:
      1.4;
  }


  /* -------------------------------------------------------
     PROJECT TYPE
     ------------------------------------------------------- */

  #contact .project-options {
    padding:
      .55rem;

    gap:
      .38rem;

    border-radius:
      5px;
  }

  #contact .project-options legend {
    padding:
      0 .35rem;

    font-size:
      .7rem;

    line-height:
      1.2;
  }

  #contact .project-options label {
    min-height:
      44px;

    padding:
      .4rem .45rem;

    font-size:
      .76rem;

    line-height:
      1.2;
  }

  #contact .project-options input[type="checkbox"] {
    width:
      15px;

    height:
      15px;
  }


  /* -------------------------------------------------------
     FOOTNOTE / SUBMIT
     ------------------------------------------------------- */

  #contact .required-note {
    font-size:
      .72rem;

    line-height:
      1.35;
  }

  #contact .form-stack button[type="submit"] {
    width:
      min(220px, 100%);

    min-height:
      44px;

    padding:
      .5rem .8rem;

    font-size:
      .8rem;
  }
}

/* 2026-10-06 TABLET PRODUCT CARD MARGIN FIX
   Product cards become two rows below 1050px.
   Remove inherited article margins in that range so the
   explicit product-grid gap controls row spacing. */

@media (min-width: 641px) and (max-width: 1050px) {

  .products .card {
    margin:
      0;
  }
}

/* 2026-10-06 EXACT HOMEPAGE THEME — DOORS PAGE
   =========================================================
   SINGLE SOURCE OF TRUTH: APPROVED HOMEPAGE

   Exact homepage visual language:
   - section: radial blue glow over #0b1824
   - cards: #173f5c -> #12344d
   - card border: rgba(125,166,192,.30)
   - card radius: 6px
   - action radius: 5px
   - card shadow: 0 12px 28px rgba(0,0,0,.18)
   - headings: Georgia / white
   - copy: #b8c8d3
   - gold: #D4AF37
   - footer: #08141f

   Homepage itself is not modified by these selectors.
   ========================================================= */


/* PAGE */

.doors-page-main {
  max-width: none;
  padding: 0;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(36, 88, 122, .18),
      transparent 42%
    ),
    #0b1824;
}


/* HERO — HOMEPAGE HERO TYPOGRAPHY */

.doors-hero {
  border-bottom:
    1px solid
    rgba(137, 177, 202, .14);
}

.doors-hero h1 {
  max-width: 840px;
  margin: 0 0 1.2rem;

  color: #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3rem, 5.8vw, 5.15rem);

  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;

  text-shadow:
    0 3px 20px
    rgba(0, 0, 0, .28);
}

.doors-hero-copy {
  max-width: 650px;

  color:
    rgba(255, 255, 255, .94);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.1rem;
  line-height: 1.55;
}


/* ALL MARKETING SECTIONS — SAME HOMEPAGE SECTION SHELL */

.doors-intro,
.doors-designer-promo,
.doors-resources,
.doors-local-section {
  box-sizing: border-box;

  width:
    min(1240px, 100%);

  max-width:
    1240px;

  margin:
    0 auto;

  padding:
    4.25rem 4vw;

  border:
    0;

  border-bottom:
    1px solid
    rgba(137, 177, 202, .14);

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;
}


/* SECTION HEADINGS — HOMEPAGE PRODUCT HEADING SYSTEM */

.doors-section-heading {
  max-width:
    1180px;

  margin:
    0 auto 1.45rem;

  text-align:
    center;
}

.doors-kicker,
.doors-designer-copy .doors-kicker,
.doors-local-section .doors-kicker {
  margin:
    0 0 .55rem;

  color:
    #D4AF37;

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}

.doors-section-heading h2,
.doors-designer-copy h2,
.doors-local-section h2 {
  margin:
    0 0 .55rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.8rem, 3.7vw, 3.8rem);

  font-weight:
    600;

  line-height:
    1.02;

  letter-spacing:
    -.025em;
}

.doors-section-heading > p:last-child,
.doors-designer-copy p,
.doors-local-section p {
  color:
    #b8c8d3;

  font-size:
    .9rem;

  line-height:
    1.55;
}


/* DOOR + BROCHURE GRIDS — HOMEPAGE PRODUCT GRID */

.doors-feature-grid,
.doors-resource-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    1rem;
}


/* DOOR + BROCHURE CARDS — EXACT HOMEPAGE PRODUCT CARD */

.doors-feature-card,
.doors-resource-card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    0;

  margin:
    0;

  padding:
    1.15rem 1.2rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    ) !important;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);

  color:
    #ffffff;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.doors-feature-card:hover,
.doors-feature-card:focus-within,
.doors-resource-card:hover,
.doors-resource-card:focus-within {
  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    ) !important;

  border-color:
    rgba(212, 175, 55, .62);
}

.doors-feature-card h3,
.doors-resource-card h3 {
  margin:
    0 0 .45rem;

  color:
    #ffffff !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.42rem;

  font-weight:
    600;

  line-height:
    1.1;
}

.doors-feature-card p,
.doors-resource-card p {
  margin:
    0 0 .8rem;

  color:
    #b8c8d3 !important;

  font-size:
    .9rem;

  line-height:
    1.55;
}

.doors-card-number {
  margin-bottom:
    .75rem;

  color:
    #D4AF37;

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .16em;
}

.doors-resource-icon {
  width:
    38px;

  height:
    38px;

  margin-bottom:
    .75rem;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(132, 175, 201, .36);

  border-radius:
    5px;

  background:
    rgba(8, 31, 48, .44);

  color:
    #D4AF37;
}


/* CARD ACTION — EXACT HOMEPAGE PRODUCT ACTION */

.doors-feature-card > a,
.doors-resource-card > a {
  display:
    flex;

  align-items:
    center;

  min-height:
    43px;

  margin-top:
    auto;

  padding:
    .55rem .75rem;

  border:
    1px solid
    rgba(132, 175, 201, .36);

  border-radius:
    5px;

  background:
    rgba(8, 31, 48, .44);

  color:
    #e8f1f6 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    .8rem;

  font-weight:
    700;

  letter-spacing:
    .025em;

  text-decoration:
    none;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.doors-feature-card > a:hover,
.doors-feature-card > a:focus,
.doors-resource-card > a:hover,
.doors-resource-card > a:focus {
  border-color:
    rgba(216, 180, 102, .68);

  background:
    rgba(20, 59, 86, .82);

  color:
    #ffffff !important;
}


/* DESIGNER PROMO — SAME THEME, FUNCTION-SPECIFIC LAYOUT */

.doors-designer-promo {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, .85fr);

  gap:
    2rem;

  align-items:
    center;
}

.doors-designer-copy {
  max-width:
    680px;
}

.doors-designer-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    .65rem;

  margin-top:
    1.5rem;
}


/* HOMEPAGE PRIMARY CTA — EXACT COLOURS */

.doors-designer-actions .primary-cta,
.doors-local-actions .primary-cta {
  background:
    #D4AF37;

  border-color:
    #D4AF37;

  color:
    #0A2540;

  font-weight:
    700;
}


/* HOMEPAGE SECONDARY CTA — EXACT COLOURS */

.doors-text-link {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    43px;

  padding:
    .55rem .75rem;

  border:
    1px solid
    rgba(255, 255, 255, .72);

  border-radius:
    5px;

  background:
    rgba(10, 37, 64, .22);

  color:
    #ffffff;

  font-size:
    .8rem;

  font-weight:
    700;

  text-decoration:
    none;
}

.doors-text-link:hover,
.doors-text-link:focus {
  border-color:
    rgba(216, 180, 102, .68);

  background:
    rgba(20, 59, 86, .82);

  color:
    #ffffff;
}


/* DESIGNER VISUAL — HOMEPAGE PRODUCT CARD FRAME */

.doors-designer-visual {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    320px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    #10283c;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}

.doors-designer-badge {
  position:
    relative;

  z-index:
    1;

  width:
    min(310px, calc(100% - 2rem));

  padding:
    1.15rem 1.2rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}

.doors-designer-badge span {
  color:
    #D4AF37;
}

.doors-designer-badge strong {
  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    600;
}

.doors-designer-badge small {
  color:
    #b8c8d3;
}


/* LOCAL INSTALLATION — SAME PAGE SYSTEM, NOT A SEPARATE PANEL */

.doors-local-section {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap:
    2rem;

  align-items:
    center;
}

.doors-local-section > div:first-child {
  max-width:
    760px;
}

.doors-local-actions {
  min-width:
    260px;

  text-align:
    center;
}

.doors-phone-link {
  display:
    block;

  margin-top:
    .75rem;

  color:
    #e8f1f6;

  font-size:
    .8rem;

  font-weight:
    700;

  text-decoration:
    none;
}

.doors-phone-link:hover,
.doors-phone-link:focus {
  color:
    #D4AF37;
}


/* FOOTER — HOMEPAGE FOOTER ALREADY GLOBAL; REMOVE LEGACY GAP */

.doors-page-main + footer.container {
  margin:
    0;

  border-top:
    1px solid
    rgba(137, 177, 202, .18);

  background:
    #08141f;
}


/* RESPONSIVE — HOMEPAGE BREAKPOINT LOGIC */

@media (max-width: 1050px) {
  .doors-feature-grid,
  .doors-resource-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .doors-designer-promo,
  .doors-local-section {
    grid-template-columns:
      1fr;
  }

  .doors-local-actions {
    min-width:
      0;

    text-align:
      left;
  }
}

@media (max-width: 640px) {

  .doors-hero h1 {
    max-width:
      350px;

    margin:
      0 auto 1rem;

    font-size:
      clamp(2.65rem, 11.5vw, 3.15rem);

    line-height:
      .95;

    text-align:
      center;
  }

  .doors-hero-copy {
    max-width:
      330px;

    margin:
      0 auto;

    font-size:
      .95rem;

    line-height:
      1.45;

    text-align:
      center;
  }

  .doors-intro,
  .doors-designer-promo,
  .doors-resources,
  .doors-local-section {
    padding:
      2.4rem 1rem;
  }

  .doors-section-heading {
    max-width:
      350px;

    margin:
      0 auto 1.35rem;
  }

  .doors-section-heading h2,
  .doors-designer-copy h2,
  .doors-local-section h2 {
    font-size:
      clamp(2rem, 9vw, 2.5rem);

    line-height:
      1.02;
  }

  .doors-feature-grid,
  .doors-resource-grid {
    grid-template-columns:
      1fr;

    gap:
      .65rem;
  }

  .doors-feature-card,
  .doors-resource-card {
    border-radius:
      5px;

    padding:
      .85rem 1rem;
  }

  .doors-feature-card h3,
  .doors-resource-card h3 {
    font-size:
      1.22rem;

    line-height:
      1.08;
  }

  .doors-feature-card p,
  .doors-resource-card p {
    font-size:
      .82rem;

    line-height:
      1.42;
  }

  .doors-feature-card > a,
  .doors-resource-card > a {
    min-height:
      38px;

    padding:
      .48rem .65rem;

    font-size:
      .75rem;
  }

  .doors-designer-actions {
    justify-content:
      center;
  }

  .doors-designer-visual {
    min-height:
      250px;
  }

  .doors-local-actions {
    width:
      100%;
  }
}

/* 2026-10-06 EXACT HOMEPAGE PRECISION CTA LOCK
   =========================================================
   Remove legacy solid-gold CTA fills from the Doors page.
   Uses the exact final homepage enquiry-button treatment:
   dark precision-blue gradient, restrained gold border,
   white text, 5px geometry.
   ========================================================= */

.doors-designer-actions .primary-cta,
.doors-local-actions .primary-cta {
  min-height:
    42px;

  padding:
    .62rem 1.35rem;

  border:
    1px solid
    rgba(216, 180, 102, .82) !important;

  border-radius:
    5px !important;

  background:
    linear-gradient(
      180deg,
      rgba(25, 67, 96, .98),
      rgba(13, 39, 58, .98)
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .07),
    inset 0 -1px 0
    rgba(0, 0, 0, .18),
    0 7px 18px
    rgba(0, 0, 0, .18);

  font-size:
    .86rem;

  font-weight:
    750;

  letter-spacing:
    .055em;

  transform:
    none;
}

.doors-designer-actions .primary-cta:hover,
.doors-designer-actions .primary-cta:focus,
.doors-local-actions .primary-cta:hover,
.doors-local-actions .primary-cta:focus {
  border-color:
    rgba(216, 180, 102, .68) !important;

  background:
    rgba(20, 59, 86, .82) !important;

  color:
    #ffffff !important;
}

/* 2026-10-06 DESIGNER VISUAL HOMEPAGE MEDIA TREATMENT
   ---------------------------------------------------------
   Replace the nested-card appearance with the same visual
   language as the approved homepage product cards:
   strong photography + precision navy information panel.
   --------------------------------------------------------- */

.doors-designer-visual {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    320px;

  padding:
    1rem;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-start;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      rgba(8, 31, 48, .04) 0%,
      rgba(8, 31, 48, .22) 48%,
      rgba(8, 31, 48, .72) 100%
    ),
    url("assets/product-doors.webp")
    center / cover
    no-repeat;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}

.doors-designer-visual::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      rgba(8, 31, 48, .08),
      transparent 62%
    );
}

.doors-designer-badge {
  position:
    relative;

  z-index:
    1;

  width:
    min(300px, 88%);

  margin:
    0;

  padding:
    1rem 1.1rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      rgba(23, 63, 92, .97),
      rgba(18, 52, 77, .97)
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}

.doors-designer-badge span {
  margin:
    0 0 .45rem;

  color:
    #D4AF37;

  font-size:
    .7rem;

  font-weight:
    800;

  letter-spacing:
    .17em;
}

.doors-designer-badge strong {
  margin:
    0;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.65rem, 2vw, 2rem);

  font-weight:
    600;

  line-height:
    1.05;
}

.doors-designer-badge small {
  margin:
    .6rem 0 0;

  color:
    #b8c8d3;

  font-size:
    .82rem;

  line-height:
    1.4;
}

@media (max-width: 640px) {
  .doors-designer-visual {
    min-height:
      240px;

    padding:
      .75rem;
  }

  .doors-designer-badge {
    width:
      min(270px, 92%);

    padding:
      .9rem 1rem;
  }
}

/* 2026-10-06 DESIGNER VISUAL HOMEPAGE MEDIA TREATMENT
   ---------------------------------------------------------
   Replace the nested-card appearance with the same visual
   language as the approved homepage product cards:
   strong photography + precision navy information panel.
   --------------------------------------------------------- */

.doors-designer-visual {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    320px;

  padding:
    1rem;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-start;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      rgba(8, 31, 48, .04) 0%,
      rgba(8, 31, 48, .22) 48%,
      rgba(8, 31, 48, .72) 100%
    ),
    url("assets/product-doors.webp")
    center / cover
    no-repeat;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}

.doors-designer-visual::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      rgba(8, 31, 48, .08),
      transparent 62%
    );
}

.doors-designer-badge {
  position:
    relative;

  z-index:
    1;

  width:
    min(300px, 88%);

  margin:
    0;

  padding:
    1rem 1.1rem;

  border:
    1px solid
    rgba(125, 166, 192, .30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      rgba(23, 63, 92, .97),
      rgba(18, 52, 77, .97)
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .18);
}

.doors-designer-badge span {
  margin:
    0 0 .45rem;

  color:
    #D4AF37;

  font-size:
    .7rem;

  font-weight:
    800;

  letter-spacing:
    .17em;
}

.doors-designer-badge strong {
  margin:
    0;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.65rem, 2vw, 2rem);

  font-weight:
    600;

  line-height:
    1.05;
}

.doors-designer-badge small {
  margin:
    .6rem 0 0;

  color:
    #b8c8d3;

  font-size:
    .82rem;

  line-height:
    1.4;
}

@media (max-width: 640px) {
  .doors-designer-visual {
    min-height:
      240px;

    padding:
      .75rem;
  }

  .doors-designer-badge {
    width:
      min(270px, 92%);

    padding:
      .9rem 1rem;
  }
}

/* 2026-10-06 BROCHURE CARDS HOMEPAGE MEDIA LAYOUT
   =========================================================
   Uses the approved homepage product-card structure:
   visual media area -> compact copy -> precision action.
   Genuine brochure covers are used as the media.
   ========================================================= */

.doors-resource-card {
  overflow:
    hidden;

  padding:
    0;
}

.doors-resource-media {
  position:
    relative;

  overflow:
    hidden;

  height:
    215px;

  display:
    grid;

  place-items:
    center;

  border-bottom:
    1px solid
    rgba(125, 166, 192, .22);

  background:
    #10283c;
}

.doors-resource-media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  box-shadow:
    inset 0 -28px 36px
    rgba(8, 31, 48, .18);
}

.doors-resource-media img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center top;

  transition:
    transform .22s ease;
}

.doors-resource-card:hover
.doors-resource-media img {
  transform:
    scale(1.018);
}


/* Copy spacing now mirrors homepage cards */

.doors-resource-card h3 {
  margin:
    1rem 1.2rem .45rem;
}

.doors-resource-card p {
  margin:
    0 1.2rem .45rem;

  flex:
    1 1 auto;
}

.doors-resource-card > a {
  margin:
    .55rem 1.2rem 1.15rem;
}


/* Keep all three cards visually consistent */

.doors-resource-grid {
  align-items:
    stretch;
}

.doors-resource-card {
  height:
    100%;
}


/* Desktop: slightly broader media crop because these are
   landscape card slots displaying portrait brochure covers. */

@media (min-width: 901px) {
  .doors-resource-media {
    height:
      230px;
  }
}


/* Homepage mobile density */

@media (max-width: 640px) {

  .doors-resource-media {
    height:
      175px;
  }

  .doors-resource-card h3 {
    margin:
      .85rem 1rem .32rem;

    font-size:
      1.22rem;
  }

  .doors-resource-card p {
    margin:
      0 1rem .3rem;

    font-size:
      .82rem;

    line-height:
      1.42;
  }

  .doors-resource-card > a {
    margin:
      .4rem 1rem .85rem;
  }
}

/* 2026-10-06 DESIGNER VISUAL TRANSLUCENT PANEL */

.doors-designer-badge {
  background:
    rgba(10, 37, 64, .58) !important;

  border-color:
    rgba(125, 166, 192, .38) !important;

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);

  box-shadow:
    0 10px 24px
    rgba(0, 0, 0, .20) !important;
}



/* 2026-10-06 DESIGNER BADGE REFINEMENT */
.doors-designer-badge {
  background: rgba(10, 37, 64, .46) !important;
  border-color: rgba(125, 166, 192, .34) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  width: min(100%, 31rem) !important;
  max-width: 31rem !important;
}

.doors-designer-badge p:last-of-type {
  font-size: 2rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .doors-designer-badge {
    width: min(100%, 100%) !important;
    max-width: none !important;
  }

  .doors-designer-badge p:last-of-type {
    font-size: 1.65rem !important;
    white-space: normal !important;
  }
}

/* 2026-10-06 DOORS FULL SECURITY SECTION
   ---------------------------------------------------------
   Full security proposition for the Doors sales page.
   Uses the approved homepage navy / gold visual system.
   --------------------------------------------------------- */

.doors-security-section {
  margin:
    0;

  padding:
    4.5rem 4vw;

  border-top:
    1px solid
    rgba(137,177,202,.18);

  border-bottom:
    1px solid
    rgba(137,177,202,.18);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(36,88,122,.18),
      transparent 42%
    ),
    #0b1824;

  color:
    #ffffff;
}


.doors-security-intro {
  max-width:
    760px;

  margin:
    0 auto 2rem;

  text-align:
    center;
}


.doors-security-intro h2 {
  margin:
    .3rem 0 .8rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem,4vw,3.35rem);

  font-weight:
    600;

  line-height:
    1.04;
}


.doors-security-intro > p:last-child {
  max-width:
    650px;

  margin:
    0 auto;

  color:
    #b8c8d3;

  font-size:
    .94rem;

  line-height:
    1.65;
}


.doors-security-section
.doors-kicker {
  color:
    #f5d78e;
}


.doors-security-credentials {
  width:
    min(1180px,100%);

  margin:
    0 auto 1rem;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    .7rem;
}


.doors-security-credential {
  min-width:
    0;

  padding:
    1.3rem;

  border:
    1px solid
    rgba(125,166,192,.30);

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      #173f5c,
      #12344d
    );

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.18);
}


.doors-security-credential-featured {
  border-color:
    rgba(216,180,102,.82);
}


.doors-security-code {
  display:
    block;

  margin-bottom:
    .7rem;

  color:
    #f5d78e;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.35rem;

  font-weight:
    700;

  line-height:
    1;
}


.doors-security-credential h3 {
  margin:
    0 0 .5rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.15rem;

  line-height:
    1.12;
}


.doors-security-credential p {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .79rem;

  line-height:
    1.5;
}


.doors-security-credential p strong {
  color:
    #ffffff;
}


.doors-security-system {
  width:
    min(1180px,100%);

  margin:
    .8rem auto 0;

  padding:
    1.5rem;

  display:
    grid;

  grid-template-columns:
    minmax(0,.8fr)
    minmax(0,1.5fr);

  gap:
    2rem;

  border:
    1px solid
    rgba(125,166,192,.26);

  border-radius:
    6px;

  background:
    rgba(8,31,48,.44);
}


.doors-security-system-kicker {
  margin:
    0 0 .55rem;

  color:
    #f5d78e;

  font-size:
    .7rem;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.doors-security-system-copy h3 {
  margin:
    0 0 .75rem;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.55rem,2.5vw,2.15rem);

  line-height:
    1.08;
}


.doors-security-system-copy
> p:last-child {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .84rem;

  line-height:
    1.55;
}


.doors-security-spec-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    .55rem;
}


.doors-security-spec {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    32px minmax(0,1fr);

  gap:
    .7rem;

  padding:
    .85rem;

  border:
    1px solid
    rgba(132,175,201,.24);

  border-radius:
    5px;

  background:
    rgba(8,31,48,.40);
}


.doors-security-spec > span {
  color:
    #D4AF37;

  font-size:
    .68rem;

  font-weight:
    800;

  letter-spacing:
    .05em;
}


.doors-security-spec strong {
  display:
    block;

  margin-bottom:
    .25rem;

  color:
    #ffffff;

  font-size:
    .8rem;

  line-height:
    1.2;
}


.doors-security-spec p {
  margin:
    0;

  color:
    #b8c8d3;

  font-size:
    .71rem;

  line-height:
    1.4;
}


.doors-security-actions {
  width:
    min(1180px,100%);

  margin:
    .8rem auto 0;

  padding:
    1rem 1.15rem;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    1rem;

  border:
    1px solid
    rgba(216,180,102,.38);

  border-radius:
    5px;

  background:
    linear-gradient(
      180deg,
      rgba(25,67,96,.70),
      rgba(13,39,58,.70)
    );
}


.doors-security-actions strong {
  display:
    block;

  color:
    #ffffff;

  font-size:
    .86rem;
}


.doors-security-actions span {
  display:
    block;

  margin-top:
    .15rem;

  color:
    #b8c8d3;

  font-size:
    .72rem;
}


.doors-security-actions
.primary-cta {
  flex:
    0 0 auto;

  width:
    auto;

  min-width:
    180px;

  margin:
    0;
}


/* TABLET */

@media (max-width: 900px) {

  .doors-security-section {
    padding:
      3.4rem 1.25rem;
  }

  .doors-security-credentials {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .doors-security-system {
    grid-template-columns:
      minmax(0,1fr);
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .doors-security-section {
    padding:
      2.7rem 1rem;
  }

  .doors-security-credentials,
  .doors-security-spec-grid {
    grid-template-columns:
      minmax(0,1fr);
  }

  .doors-security-system {
    padding:
      1rem;
  }

  .doors-security-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .doors-security-actions
  .primary-cta {
    width:
      100%;
  }

}