/* ==========================================================================
   Site Work Estimator Inc. — main stylesheet
   Palette derived from the company logo: blue #2569BC, gold #DB9E1D,
   olive #86871F.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand (sampled from logo) */
  --swei-blue:      #2569BC;
  --swei-blue-700:  #1B4E8E;
  --swei-blue-900:  #123566;
  --swei-blue-50:   #EDF3FB;
  --swei-gold:      #DB9E1D;
  --swei-gold-600:  #B67F11;
  --swei-gold-50:   #FDF4E1;
  --swei-olive:     #86871F;

  /* Neutrals */
  --ink:        #0F1E33;
  --ink-2:      #15304F;
  --slate:      #56687F;
  --slate-2:    #7C8CA1;
  --line:       #DEE5EE;
  --line-soft:  #EDF1F6;
  --paper:      #FFFFFF;
  --paper-2:    #F5F8FC;

  /* Type */
  --font-display: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-body:    "Inter", "Segoe UI", Arial, sans-serif;

  /* Structure */
  --radius:     14px;
  --radius-sm:  9px;
  --radius-lg:  22px;
  --shadow-sm:  0 1px 2px rgba(15, 30, 51, .05), 0 6px 18px rgba(15, 30, 51, .05);
  --shadow-md:  0 10px 28px rgba(15, 30, 51, .09);
  --shadow-lg:  0 24px 60px rgba(15, 30, 51, .16);
  --section-y:  clamp(64px, 7vw, 112px);
  --nav-h:      86px;
  --nav-h-sm:   68px;

  /* Blueprint grid used across hero, CTA and dark panels */
  --grid-fine:  rgba(37, 105, 188, .09);
  --grid-bold:  rgba(37, 105, 188, .16);
}

/* 2. Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .display-font {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}

h1 { font-size: clamp(2.15rem, 4.6vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }

p { color: var(--slate); margin-bottom: 1rem; }
.lead-text { font-size: clamp(1rem, 1.25vw, 1.11rem); color: var(--slate); max-width: 62ch; }

a { color: var(--swei-blue); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--swei-blue-700); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--swei-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* 3. Shared section furniture --------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section-tint { background: var(--paper-2); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255, 255, 255, .72); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--swei-blue);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--swei-gold); display: block;
}
.eyebrow-light { color: var(--swei-gold); }
.section-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 58px); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .eyebrow { justify-content: center; }

.rule-gold { width: 62px; height: 3px; background: var(--swei-gold); border-radius: 2px; }

/* 4. Buttons --------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 10px;
  padding: 14px 26px;
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  border: 2px solid transparent;
  letter-spacing: .005em;
}
.btn:active { transform: translateY(1px); }

.btn-swei {
  background: var(--swei-gold);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(219, 158, 29, .32);
}
.btn-swei:hover, .btn-swei:focus {
  background: var(--swei-gold-600); color: #fff;
  box-shadow: 0 12px 26px rgba(182, 127, 17, .38);
}

.btn-swei-blue { background: var(--swei-blue); color: #fff; box-shadow: 0 8px 20px rgba(37, 105, 188, .28); }
.btn-swei-blue:hover, .btn-swei-blue:focus { background: var(--swei-blue-700); color: #fff; }

.btn-outline-swei { border-color: var(--swei-blue); color: var(--swei-blue); background: transparent; }
.btn-outline-swei:hover, .btn-outline-swei:focus { background: var(--swei-blue); color: #fff; }

.btn-outline-light { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.btn-outline-light:hover, .btn-outline-light:focus { background: #fff; color: var(--ink); border-color: #fff; }

.btn-lg-swei { padding: 16px 32px; font-size: 1.02rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--swei-blue);
}
.link-arrow svg { transition: transform .22s ease; }
.link-arrow:hover svg { transform: translateX(5px); }

/* 5. Header / navigation --------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .8);
  font-size: .86rem;
  padding: 9px 0;
}
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: var(--swei-gold); }
.topbar .dot { color: var(--swei-gold); }

.site-nav {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
  transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.site-nav.is-stuck {
  padding: 7px 0;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 6px 24px rgba(15, 30, 51, .09);
}

.brand-lockup img { width: 190px; height: auto; transition: width .25s ease; }
.site-nav.is-stuck .brand-lockup img { width: 190px; }
.brand-name {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: 1.06rem; line-height: 1.05; letter-spacing: -.01em;
}
.brand-sub {
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .3em; color: var(--swei-blue); text-transform: uppercase;
}

.navbar-nav .nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-2);
  padding: 8px 14px;
  position: relative;
}
.navbar-nav .nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--swei-gold);
  transform: scaleX(0); transform-origin: left; transition: transform .24s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--swei-blue); }
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: scaleX(1); }

.navbar-toggler {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
}
.navbar-toggler:focus { box-shadow: none; }
.toggler-bars { display: block; width: 22px; height: 15px; position: relative; }
.toggler-bars span {
  position: absolute; left: 0; height: 2px; width: 100%; background: var(--ink);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.toggler-bars span:nth-child(1) { top: 0; }
.toggler-bars span:nth-child(2) { top: 6.5px; }
.toggler-bars span:nth-child(3) { top: 13px; }
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }

/* 6. Hero carousel --------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 65% 40%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 65% 40%, #000 10%, transparent 78%);
  pointer-events: none;
}
.hero-slide { padding-block: clamp(10px, 2vw, 40px); }
.hero-eyebrow {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--swei-blue);
  display: inline-block; padding: 7px 14px; border-radius: 99px;
  background: var(--swei-blue-50); border: 1px solid rgba(37, 105, 188, .16);
  margin-bottom: 22px;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 .accent-underline {
  background-image: linear-gradient(transparent 62%, rgba(219, 158, 29, .38) 62%);
}
.hero-copy { max-width: 56ch; font-size: 1.06rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-trust {
  display: flex; align-items: center; gap: 14px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
.hero-trust .badge-25 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  color: var(--swei-blue); line-height: 1;
}
.hero-trust span { color: var(--slate); font-size: .95rem; }

/* Carousel chrome */
#heroCarousel .carousel-indicators {
  justify-content: flex-start; margin: 0 0 34px; left: auto; right: auto;
  position: static; padding-left: 2px;
}
#heroCarousel .carousel-indicators [data-bs-target] {
  width: 34px; height: 4px; border-radius: 3px; background: var(--line);
  border: 0; opacity: 1; margin-right: 8px; transition: background-color .3s ease, width .3s ease;
}
#heroCarousel .carousel-indicators .active { background: var(--swei-gold); width: 52px; }
.hero-controls { display: flex; gap: 10px; margin-top: 6px; }
.hero-ctrl {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: grid; place-items: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hero-ctrl:hover { background: var(--swei-blue); color: #fff; border-color: var(--swei-blue); }

/* Hero visual — blueprint / site-plan composition */
.hero-visual { position: relative; }
.plan-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(18, 53, 102, .93), rgba(37, 105, 188, .85)),
    var(--swei-blue-900);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.2;
}
/* Drop a real site photo at assets/img/hero-site.jpg and it layers in here. */
.plan-frame.has-photo {
  background:
    linear-gradient(150deg, rgba(18, 53, 102, .88), rgba(37, 105, 188, .74)),
    url("../img/hero-site.jpg") center/cover no-repeat,
    var(--swei-blue-900);
}
.plan-frame svg,
.plan-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.plan-tag {
  position: absolute; left: 22px; top: 22px;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 7px 13px; border-radius: 7px;
  backdrop-filter: blur(6px);
}

.estimate-card {
  position: absolute; right: -16px; bottom: -30px; width: min(272px, 72%);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px 20px;
}
.estimate-card h4 {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--swei-blue); margin-bottom: 14px;
}
.estimate-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--line-soft);
  font-size: .9rem; color: var(--ink-2); font-weight: 500;
}
.estimate-row:first-of-type { border-top: 0; }
.estimate-row i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 9px;
}
.estimate-row .bar {
  height: 5px; border-radius: 3px; background: var(--line-soft); width: 74px; overflow: hidden;
}
.estimate-row .bar b { display: block; height: 100%; border-radius: 3px; }

/* 7. Stats bar ------------------------------------------------------------- */
.stats-bar { background: var(--ink); }
.stat-cell { padding: 34px 18px; position: relative; text-align: center; }
.stat-cell + .stat-cell::before {
  content: ""; position: absolute; left: 0; top: 26%; bottom: 26%;
  width: 1px; background: rgba(255, 255, 255, .13);
}
.stat-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.85rem); color: var(--swei-gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-label {
  color: rgba(255, 255, 255, .74); font-size: .92rem; margin-top: 10px;
  margin-bottom: 0;
}

/* 8. About ----------------------------------------------------------------- */
.about-visual { position: relative; }
.blueprint-card {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
  box-shadow: var(--shadow-md);
}
.blueprint-card svg,
.blueprint-card img { display: block; width: 100%; height: auto; }
.badge-strip {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); border-radius: 99px;
  padding: 11px 20px; font-family: var(--font-display); font-weight: 600;
  font-size: .88rem; color: var(--ink);
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -22px;
  white-space: nowrap;
}
.badge-strip em { color: var(--swei-gold); font-style: normal; }

.check-list { list-style: none; padding: 0; margin: 26px 0 0; }
.check-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; color: var(--ink-2); font-size: .98rem;
}
.check-list svg { flex: 0 0 auto; margin-top: 3px; }

/* 9. Services -------------------------------------------------------------- */
.service-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px 26px;
  height: 100%; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--swei-blue), var(--swei-gold));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #CDD9E8; }
.service-card:hover::after { transform: scaleX(1); }
.service-icon {
  width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center;
  background: var(--swei-blue-50); color: var(--swei-blue); margin-bottom: 20px;
  transition: background-color .25s ease, color .25s ease;
}
.service-card:hover .service-icon { background: var(--swei-blue); color: #fff; }
.service-no {
  position: absolute; right: 24px; top: 22px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--line); line-height: 1;
}
.service-card h3 { margin-bottom: 10px; }
.service-card p { font-size: .96rem; margin-bottom: 18px; }

.services-note {
  margin-top: 42px; padding: 26px 30px; border-radius: var(--radius);
  background: var(--swei-blue-50); border: 1px solid rgba(37, 105, 188, .16);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.services-note p { margin: 0; color: var(--ink-2); font-weight: 500; }

/* 10. Process -------------------------------------------------------------- */
.process-track { position: relative; }
.process-track::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--swei-blue) 0 12px, transparent 12px 22px);
  opacity: .4;
}
.process-step { text-align: center; padding: 0 12px; position: relative; }
.step-node {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 20px;
  background: #fff; border: 2px solid var(--swei-blue);
  display: grid; place-items: center; position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--swei-blue); box-shadow: 0 0 0 8px var(--paper-2);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.process-step:hover .step-node { background: var(--swei-blue); color: #fff; transform: translateY(-4px); }
.process-step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.process-step p { font-size: .94rem; max-width: 30ch; margin-inline: auto; }

/* 11. Sample estimates ----------------------------------------------------- */
.sample-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden; height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sample-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.sample-preview {
  position: relative; background: var(--paper-2); border-bottom: 1px solid var(--line);
  overflow: hidden; aspect-ratio: 4 / 3;
}
.sample-preview svg,
.sample-preview img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.sample-card:hover .sample-preview svg,
.sample-card:hover .sample-preview img { transform: scale(1.07); }
.sample-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(15, 30, 51, .55); opacity: 0; transition: opacity .28s ease;
}
.sample-card:hover .sample-overlay, .sample-card:focus-within .sample-overlay { opacity: 1; }
.sample-body { padding: 20px 22px 24px; }
.sample-body h3 { font-size: 1.06rem; margin-bottom: 6px; }
.sample-body p { font-size: .9rem; margin: 0; }
.sample-kind {
  display: inline-block; font-family: var(--font-display); font-size: .68rem;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--swei-olive); margin-bottom: 9px;
}

/* 12. Why choose us -------------------------------------------------------- */
.section-dark { position: relative; overflow: hidden; }
.section-dark::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 20% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 20% 0%, #000, transparent 72%);
}
.section-dark > .container { position: relative; z-index: 1; }

.benefit-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius); padding: 28px 26px; height: 100%;
  transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}
.benefit-card:hover {
  background: rgba(255, 255, 255, .09); transform: translateY(-5px);
  border-color: rgba(219, 158, 29, .5);
}
.benefit-icon {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(219, 158, 29, .16); color: var(--swei-gold); margin-bottom: 18px;
}
.benefit-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.benefit-card p { font-size: .94rem; margin: 0; }

.pull-quote {
  margin-top: clamp(40px, 5vw, 66px); padding: 34px 36px;
  border-left: 4px solid var(--swei-gold);
  background: rgba(255, 255, 255, .04); border-radius: 0 var(--radius) var(--radius) 0;
}
.pull-quote p {
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 1.72rem); line-height: 1.35; margin: 0;
}
.pull-quote cite {
  display: block; margin-top: 14px; font-style: normal;
  color: rgba(255, 255, 255, .6); font-size: .9rem;
}

/* 13. Deliverables / dashboard mockup -------------------------------------- */
.deliverable-panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-md); overflow: hidden;
}
.panel-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.panel-topbar .dotlight { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.panel-topbar .filename {
  margin-left: 10px; font-family: var(--font-display); font-size: .84rem;
  font-weight: 600; color: var(--slate);
}
.panel-tabs { display: flex; gap: 4px; padding: 12px 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-tab {
  border: 0; background: transparent; border-radius: 8px 8px 0 0;
  font-family: var(--font-display); font-weight: 600; font-size: .87rem;
  color: var(--slate); padding: 9px 15px; position: relative;
  transition: color .2s ease, background-color .2s ease;
}
.panel-tab:hover { color: var(--swei-blue); background: var(--swei-blue-50); }
.panel-tab.active { color: var(--swei-blue); }
.panel-tab.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: var(--swei-blue);
}
.panel-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.panel-table th {
  text-align: left; font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2);
  font-weight: 700; padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: #fff;
}
.panel-table td { padding: 13px 20px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.panel-table tbody tr:hover { background: var(--paper-2); }
.panel-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.panel-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 15px 20px; background: var(--paper-2); font-size: .87rem; color: var(--slate);
}

.side-panel {
  background: var(--swei-blue-900); color: #fff; border-radius: var(--radius);
  padding: 30px 28px; height: 100%;
}
.side-panel h3 { color: #fff; font-size: 1.22rem; margin-bottom: 12px; }
.side-panel p { color: rgba(255, 255, 255, .74); font-size: .95rem; }
.side-panel ul { list-style: none; padding: 0; margin: 20px 0 0; }
.side-panel li {
  display: flex; gap: 11px; align-items: flex-start;
  color: rgba(255, 255, 255, .88); font-size: .94rem; padding: 7px 0;
}
.side-panel li svg { flex: 0 0 auto; margin-top: 3px; color: var(--swei-gold); }

/* 14. Industries ----------------------------------------------------------- */
.industry-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; padding: 22px 20px; height: 100%;
  display: flex; align-items: center; gap: 14px;
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.industry-card:hover { border-color: var(--swei-blue); background: var(--swei-blue-50); transform: translateY(-3px); }
.industry-card span {
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink);
}
.industry-card svg { color: var(--swei-blue); flex: 0 0 auto; }

/* 15. Trust strip ---------------------------------------------------------- */
.trust-pill {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 99px;
  padding: 13px 22px; font-family: var(--font-display); font-weight: 600;
  font-size: .93rem; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.trust-pill svg { color: var(--swei-gold); flex: 0 0 auto; }

/* 16. FAQ ------------------------------------------------------------------ */
.accordion-swei .accordion-item {
  border: 1px solid var(--line); border-radius: var(--radius) !important;
  margin-bottom: 14px; overflow: hidden; background: #fff;
}
.accordion-swei .accordion-button {
  font-family: var(--font-display); font-weight: 600; font-size: 1.04rem;
  color: var(--ink); padding: 20px 24px; background: #fff;
}
.accordion-swei .accordion-button:not(.collapsed) {
  color: var(--swei-blue); background: var(--swei-blue-50); box-shadow: none;
}
.accordion-swei .accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-swei .accordion-button::after {
  background-image: none; content: "+"; font-size: 1.5rem; font-weight: 400;
  line-height: 1; width: auto; height: auto; color: var(--swei-gold);
  transition: transform .25s ease;
}
.accordion-swei .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.accordion-swei .accordion-body { padding: 4px 24px 22px; color: var(--slate); }

/* 17. CTA band ------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--swei-blue-900) 0%, var(--ink) 60%, #0B1727 100%);
  color: #fff; padding-block: clamp(58px, 6vw, 92px);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    linear-gradient(rgba(219, 158, 29, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219, 158, 29, .12) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(255, 255, 255, .78); max-width: 52ch; }

/* 18. Contact -------------------------------------------------------------- */
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info-item:last-child { border-bottom: 0; }
.contact-ico {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
  background: var(--swei-blue-50); color: var(--swei-blue); display: grid; place-items: center;
}
.contact-info-item h4 {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate-2); margin-bottom: 4px;
}
.contact-info-item a, .contact-info-item p {
  font-family: var(--font-display); font-weight: 600; font-size: 1.04rem;
  color: var(--ink); margin: 0;
}
.contact-info-item a:hover { color: var(--swei-blue); }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-md);
}
.form-label {
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  color: var(--ink-2); margin-bottom: 7px;
}
.form-control, .form-select {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px;
  font-size: .96rem; color: var(--ink); background-color: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--swei-blue); box-shadow: 0 0 0 4px rgba(37, 105, 188, .12);
}
.form-control::placeholder { color: var(--slate-2); }
.was-validated .form-control:invalid, .form-control.is-invalid,
.was-validated .form-select:invalid, .form-select.is-invalid { border-color: #C0392B; }
.was-validated .form-control:valid, .form-control.is-valid,
.was-validated .form-select:valid, .form-select.is-valid { border-color: var(--swei-olive); }
.invalid-feedback { font-size: .84rem; }
.form-note {
  font-size: .86rem; color: var(--slate); margin: 14px 0 0;
  display: flex; gap: 9px; align-items: flex-start;
}
.form-alert { display: none; border-radius: 10px; padding: 14px 16px; font-size: .93rem; margin-top: 18px; }
.form-alert.ok { display: block; background: #EAF6EC; border: 1px solid #BEE0C6; color: #1F5B32; }
.form-alert.err { display: block; background: #FDECEA; border: 1px solid #F4C3BD; color: #8C2A1D; }

/* 19. Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .7); padding-top: clamp(52px, 6vw, 80px); }
.site-footer h4 {
  color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px;
}
.site-footer a { color: rgba(255, 255, 255, .7); font-size: .95rem; }
.site-footer a:hover { color: var(--swei-gold); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-brand img { width: 190px; margin-bottom: 18px; }
.footer-brand p { font-size: .95rem; color: rgba(255, 255, 255, .66); max-width: 42ch; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 46px; padding: 22px 0;
  font-size: .88rem;
}
.footer-bottom p { color: rgba(255, 255, 255, .55); margin: 0; }

/* Footer contact list with icons. Icons come from Font Awesome 6, loaded
   from the CDN in each page's <head>. Only layout and colour are set here. */
.footer-links li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 11px;
}
/* Fixed-width column so the labels line up whatever the glyph. */
.footer-links li i {
  flex: 0 0 16px;
  width: 16px;
  margin-top: 4px;               /* optically aligns with the first line */
  font-size: .88rem;
  line-height: 1;
  text-align: center;
  color: var(--swei-gold);
}
/* Let a long email wrap instead of overflowing the column. */
.footer-links li a { overflow-wrap: anywhere; }
/* Address line: match the muted tone of the links around it. */
.footer-links li span { font-size: .95rem; color: rgba(255, 255, 255, .7); }

/* 20. Floating helpers ----------------------------------------------------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 1030;
  width: 46px; height: 46px; border-radius: 12px; border: 0;
  background: var(--swei-blue); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden;
  transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--swei-blue-700); }

.mobile-cta-bar { display: none; }

/* 21. Reveal on scroll ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* 22. Responsive ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .navbar-nav .nav-link { padding: 8px 10px; font-size: .9rem; }
  .estimate-card { right: 0; }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    margin-top: 14px; padding: 14px; box-shadow: var(--shadow-md);
  }
  .navbar-nav .nav-link { padding: 12px 8px; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
  .navbar-nav .nav-item:last-child .nav-link { border-bottom: 0; }
  .navbar-nav .nav-link::after { display: none; }
  .nav-cta-wrap { padding-top: 14px; }
  .nav-cta-wrap .btn { width: 100%; }

  .hero-visual { margin-top: 52px; }
  .process-track::before { display: none; }
  .process-step { text-align: left; display: flex; gap: 20px; padding: 0; margin-bottom: 30px; }
  .step-node { margin: 0; flex: 0 0 auto; width: 58px; height: 58px; font-size: 1.1rem; }
  .process-step p { margin-inline: 0; max-width: 46ch; }
  .stat-cell + .stat-cell::before { display: none; }
  .stat-cell { padding: 24px 12px; }
  .section-head { margin-bottom: 34px; }
}

@media (max-width: 767.98px) {
  :root { --section-y: 58px; }
  /* g-5 rows use a 3rem gutter; trim it on phones so nothing sits outside the container */
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
  h1 { font-size: clamp(1.95rem, 8.2vw, 2.4rem); }
  .hero-eyebrow { font-size: .7rem; padding: 6px 12px; letter-spacing: .1em; }

  body { font-size: .98rem; }
  .topbar { font-size: .8rem; }
  .hero-actions .btn { width: 100%; }
  .hero-copy { font-size: 1rem; }
  .estimate-card {
    position: static; width: 100%; margin-top: 18px; box-shadow: var(--shadow-md);
  }
  .plan-frame { aspect-ratio: 4 / 3.6; }
  .badge-strip { position: static; transform: none; margin-top: 18px; display: flex; justify-content: center; }
  .about-visual { margin-bottom: 34px; }
  .services-note { flex-direction: column; align-items: flex-start; }
  .services-note .btn { width: 100%; }
  .pull-quote { padding: 24px 22px; }
  .panel-table th:nth-child(3), .panel-table td:nth-child(3) { display: none; }
  .footer-bottom { text-align: center; }

  /* Persistent contact access on phones */
  .mobile-cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    padding: 10px 12px; box-shadow: 0 -6px 20px rgba(15, 30, 51, .1);
  }
  .mobile-cta-bar .btn { padding: 13px 10px; font-size: .95rem; }
  body { padding-bottom: 74px; }
  .to-top { bottom: 84px; right: 14px; }
}

@media (max-width: 575.98px) {
  .brand-name { font-size: .84rem; letter-spacing: -.005em; }
  .brand-sub { font-size: .6rem; letter-spacing: .24em; }
  .brand-lockup { gap: 9px; }
  .brand-lockup img { width: 160px; }

  .hero-eyebrow { font-size: .68rem; letter-spacing: .1em; }
  .service-card { padding: 26px 22px 22px; }
}

/* 23. Motion & print preferences ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-nav, .topbar, .to-top, .mobile-cta-bar, .hero-controls, #heroCarousel .carousel-indicators { display: none !important; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   24. Inner-page components
   ========================================================================== */

/* Page hero (inner pages) */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(115deg, var(--swei-blue-900) 0%, var(--ink) 62%, #0B1727 100%);
  padding-block: clamp(52px, 6vw, 86px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .6;
  background-image:
    linear-gradient(rgba(219, 158, 29, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219, 158, 29, .13) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 130px 130px, 130px 130px, 26px 26px, 26px 26px;
  mask-image: linear-gradient(100deg, #000 20%, transparent 85%);
  -webkit-mask-image: linear-gradient(100deg, #000 20%, transparent 85%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 12px; }
.page-hero p { color: rgba(255, 255, 255, .78); max-width: 58ch; margin-bottom: 0; }
.page-hero .eyebrow { color: var(--swei-gold); }

.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 22px 0 0; font-size: .88rem; }
.crumbs li { color: rgba(255, 255, 255, .6); }
.crumbs li + li::before { content: "/"; margin-right: 9px; color: rgba(255, 255, 255, .35); }
.crumbs a { color: rgba(255, 255, 255, .85); }
.crumbs a:hover { color: var(--swei-gold); }
.crumbs [aria-current] { color: var(--swei-gold); }

/* Service detail layout */
.service-aside {
  position: sticky; top: calc(var(--nav-h) + 16px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 10px; box-shadow: var(--shadow-sm);
}
.service-aside h2 {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-2); padding: 14px 16px 10px; margin: 0;
}
.aside-nav { list-style: none; margin: 0; padding: 0; }
.aside-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--ink-2); padding: 13px 16px; border-radius: 9px;
  transition: background-color .2s ease, color .2s ease;
}
.aside-nav a:hover { background: var(--swei-blue-50); color: var(--swei-blue); }
.aside-nav a[aria-current="page"] { background: var(--swei-blue); color: #fff; }
.aside-nav a[aria-current="page"] svg { color: #fff; }
.aside-nav svg { color: var(--swei-gold); flex: 0 0 auto; }

.aside-cta {
  margin-top: 20px; border-radius: var(--radius); padding: 26px 24px;
  background: var(--swei-blue-900); color: #fff;
}
.aside-cta h3 { color: #fff; font-size: 1.12rem; margin-bottom: 8px; }
.aside-cta p { color: rgba(255, 255, 255, .74); font-size: .93rem; }
.aside-cta .btn { width: 100%; margin-top: 8px; }

.prose h2 { margin-top: 6px; margin-bottom: 14px; }
.prose h3 { margin-top: 34px; margin-bottom: 12px; font-size: 1.24rem; }
.prose h4 {
  margin-top: 28px; margin-bottom: 10px; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--swei-blue);
}
.prose p { max-width: 72ch; }
.prose > *:first-child { margin-top: 0; }

.spec-list { list-style: none; padding: 0; margin: 0 0 18px; }
.spec-list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 9px 0;
  color: var(--ink-2); font-size: .98rem; border-bottom: 1px solid var(--line-soft);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--swei-olive); }

.note-box {
  border-left: 4px solid var(--swei-gold); background: var(--swei-gold-50);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px; margin-top: 30px;
}
.note-box h4 { margin-top: 0; color: var(--swei-gold-600); }
.note-box p:last-child { margin-bottom: 0; }

.figure-frame {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: var(--paper-2); margin-bottom: 30px;
}
.figure-frame svg,
.figure-frame img { display: block; width: 100%; height: auto; }
.figure-frame figcaption {
  padding: 12px 18px; font-size: .86rem; color: var(--slate);
  border-top: 1px solid var(--line); background: #fff;
}

/* Numbered capability blocks (services overview) */
.capability {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 30px 28px; height: 100%; position: relative;
}
.capability .cap-no {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  color: var(--swei-gold); display: block; margin-bottom: 10px;
}
.capability h3 { font-size: 1.14rem; margin-bottom: 12px; }
.capability p, .capability li { font-size: .95rem; }
.capability ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.capability li { color: var(--slate); padding: 5px 0; break-inside: avoid; }
.capability li::before { content: "—"; color: var(--swei-blue); margin-right: 8px; }
.capability.cap-single ul { columns: 1; }

/* Gallery (sample estimates page) */
.gallery-item {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; height: 100%; transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gallery-media { position: relative; background: var(--paper-2); aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-media svg, .gallery-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery-item:hover .gallery-media svg, .gallery-item:hover .gallery-media img { transform: scale(1.06); }
.gallery-body { padding: 18px 20px 22px; }
.gallery-body h3 { font-size: 1.02rem; margin-bottom: 5px; }
.gallery-body p { font-size: .89rem; margin: 0; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.filter-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 99px;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: var(--ink-2); padding: 10px 20px; transition: all .2s ease;
}
.filter-btn:hover { border-color: var(--swei-blue); color: var(--swei-blue); }
.filter-btn.active { background: var(--swei-blue); border-color: var(--swei-blue); color: #fff; }
.filter-btn.active:hover { background: var(--swei-blue-700); border-color: var(--swei-blue-700); }

/* Contact map + hours */
.map-frame {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  height: 380px; background: var(--paper-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 404 */
.error-code {
  font-family: var(--font-display); font-weight: 800; line-height: .9;
  font-size: clamp(5rem, 18vw, 11rem); color: var(--swei-blue-50);
  letter-spacing: -.04em;
}

/* Coverage / states strip */
.coverage-band {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 26px 30px; display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.coverage-band h3 { font-size: 1.1rem; margin: 0 0 4px; }
.coverage-band p { margin: 0; font-size: .94rem; }

@media (max-width: 991.98px) {
  .service-aside { position: static; margin-bottom: 30px; }
  .capability ul { columns: 1; }
}

/* 25. Estimate popup + thank-you popup ------------------------------------- */
.estimate-modal .modal-dialog { max-width: 500px; }
.estimate-modal .modal-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.estimate-modal .modal-header {
  position: relative;
  align-items: flex-start;
  gap: 130px;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .93)),
    linear-gradient(var(--grid-fine) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--swei-blue-50);
}
.estimate-modal .modal-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--swei-blue), var(--swei-gold));
}
.estimate-modal-eyebrow {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--swei-blue); margin-bottom: 6px;
}
.estimate-modal .modal-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; }
.estimate-modal-heading p {
  margin: 8px 0 0; font-size: .93rem; color: var(--slate); max-width: 48ch;
}
.estimate-modal .modal-body { padding: clamp(20px, 3vw, 34px); }
.estimate-modal .btn-close { flex: 0 0 auto; }

.estimate-form .req { color: #C0392B; }
.estimate-form textarea.form-control { min-height: 96px; resize: vertical; }
.estimate-form input[type="file"].form-control { padding: 10px 14px; }
.estimate-form input[type="file"]::file-selector-button {
  border: 0; border-radius: 7px; padding: 7px 14px; margin-right: 12px;
  background: var(--swei-blue-50); color: var(--swei-blue-700);
  font-family: var(--font-display); font-weight: 600; font-size: .84rem; cursor: pointer;
}
.estimate-form input[type="file"]::file-selector-button:hover { background: #DDE9F8; }

.estimate-modal-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 6px; border-top: 1px solid var(--line-soft); margin-top: 4px;
}
.estimate-modal-actions .btn { flex: 0 0 auto; }
.estimate-modal-actions .form-note { flex: 1 1 240px; margin: 0; }

/* Thank-you popup */
.thanks-modal .modal-dialog { max-width: 470px; }
.thanks-modal .modal-content {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  overflow: hidden;
}
.thanks-modal .modal-content::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--swei-blue), var(--swei-gold));
}
.thanks-modal .btn-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.thanks-modal .modal-body { padding: clamp(32px, 5vw, 46px) clamp(24px, 4vw, 40px); }
.thanks-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: #EAF6EC; color: #2E7D46;
  border: 3px solid #C6E4CE; margin-bottom: 20px;
}
.thanks-modal .modal-title { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 12px; }
.thanks-lead { color: var(--ink-2); font-weight: 500; margin-bottom: 8px; }
.thanks-sub { font-size: .93rem; color: var(--slate); margin-bottom: 26px; }
.thanks-sub code {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; font-size: .86em; color: var(--ink-2);
}
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .thanks-modal.show .thanks-check { animation: thanksPop .45s cubic-bezier(.2, .9, .3, 1.35) both; }
}
@keyframes thanksPop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Close button — kill Bootstrap's blue focus ring and give it a real
   tap target. Keyboard users still get the site's gold :focus-visible
   outline from the global rule near the top of this file. */
.estimate-modal .btn-close,
.thanks-modal .btn-close {
  --bs-btn-close-focus-shadow: none;
  box-sizing: content-box;
  width: 15px;
  height: 15px;
  padding: 11px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  opacity: .5;
  transition: opacity .2s ease, background-color .2s ease;
}
.estimate-modal .btn-close:hover,
.thanks-modal .btn-close:hover {
  opacity: 1;
  background-color: rgba(15, 30, 51, .07);
}
.estimate-modal .btn-close:focus,
.thanks-modal .btn-close:focus {
  box-shadow: none;
  opacity: 1;
}
.estimate-modal .btn-close:active,
.thanks-modal .btn-close:active {
  background-color: rgba(15, 30, 51, .12);
}

/* Small screens — let both popups use the full width comfortably */
@media (max-width: 575.98px) {
  .estimate-modal .modal-dialog,
  .thanks-modal .modal-dialog { margin: 10px; }
  .estimate-modal .modal-header { flex-direction: row; padding: 18px 18px 16px; }
  .estimate-modal .modal-body { padding: 18px; }
  .estimate-modal-heading p { font-size: .88rem; }
  .estimate-modal-actions { flex-direction: column; align-items: stretch; }
  .estimate-modal-actions .btn { width: 100%; }
  .estimate-modal-actions .form-note { flex: 1 1 auto; }
  .thanks-actions .btn { width: 100%; }
}

/* Keep the popup usable in landscape on short viewports */
@media (max-height: 640px) {
  .estimate-modal .modal-dialog { margin-top: 12px; margin-bottom: 12px; }
}

/* 26. Custom file upload --------------------------------------------------- */
.custom-file-upload {
  position: relative;
  width: 100%;
  min-height: 52px;
  border: 2px dashed var(--swei-blue);
  border-radius: 8px;
  background: #ecf5ff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-file-upload:hover,
.custom-file-upload.dragover {
  background: #f2efff;
  border-color: #4939a3;
}

.custom-file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-content {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 5px 7px 5px 14px;
  gap: 10px;
  pointer-events: none;
}

.folder-icon {
  font-size: 18px;
  line-height: 1;
}

.drop-text {
  color: var(--swei-blue);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.file-types {
  color: #9292a3;
  font-size: 13px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browse-btn {
  pointer-events: auto;
  border: 0;
  background: var(--swei-blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.browse-btn:hover {
  background: #49328c;
}

.file-hint {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 12px;
  color: #777;
}

.file-list {
  margin-top: 10px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 5px;
  background: #f7f7f9;
  border-radius: 6px;
  font-size: 13px;
}

.file-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-file {
  border: 0;
  background: transparent;
  color: #dc3545;
  cursor: pointer;
  font-size: 16px;
}

.topbar i.fa-solid {
  font-size: .85em;
  vertical-align: -.03em;
  opacity: .85;
}
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* ==========================================================================
   27. Services dropdown — hover on desktop, tap to expand on mobile
   --------------------------------------------------------------------------
   The parent keeps href="services.html". Above 992px the submenu opens on
   hover so the click is free to navigate (see nav.js). Below 992px
   Bootstrap's JS handles the tap and the submenu expands inline.

   Must stay LAST in the file — the mobile rules tie with section 22 on
   specificity, so source order decides.
   ========================================================================== */
.navbar-nav .dropdown-menu {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 8px; margin-top: 10px; min-width: 250px;
}
.navbar-nav .dropdown-item {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: var(--ink-2); border-radius: 8px; padding: 10px 14px;
}
.navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item:focus {
  background: var(--swei-blue-50); color: var(--swei-blue);
}
.navbar-nav .dropdown-item.active { background: var(--swei-blue); color: #fff; }

/* Bootstrap's caret is hidden — the Font Awesome chevron is the indicator */
.navbar-nav .nav-link.dropdown-toggle::after { display: none; }
.navbar-nav .dropdown > .dropdown-toggle .fa-chevron-down {
  font-size: .7em; margin-left: 6px; vertical-align: .08em;
  transition: transform .22s ease;
}
.navbar-nav .dropdown > .dropdown-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* --- Desktop: open on hover, click goes to services.html ----------------- */
@media (min-width: 992px) {
  .navbar-nav .dropdown:hover > .dropdown-menu,
  .navbar-nav .dropdown:focus-within > .dropdown-menu {
    display: block;
    animation: dropdownIn .18s ease both;
  }

  /* Transparent bridge across the 10px gap so the menu stays open while
     the cursor travels down from the link to the list. */
  .navbar-nav .dropdown-menu::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: -12px; height: 12px;
  }

  .navbar-nav .dropdown:hover > .dropdown-toggle .fa-chevron-down,
  .navbar-nav .dropdown:focus-within > .dropdown-toggle .fa-chevron-down {
    transform: rotate(180deg);
  }

  .navbar-nav .dropdown:hover > .nav-link,
  .navbar-nav .dropdown:focus-within > .nav-link { color: var(--swei-blue); }
  .navbar-nav .dropdown:hover > .nav-link::after,
  .navbar-nav .dropdown:focus-within > .nav-link::after { transform: scaleX(1); }
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Mobile / tablet: tap "Services" to expand the submenu inline -------- */
@media (max-width: 991.98px) {
  .navbar-nav .dropdown-menu {
    width: auto;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 2px 0 10px 14px;
  }
  .navbar-nav .dropdown-menu.show { border-bottom: 1px solid var(--line-soft); }

  /* No hover bridge here — it would sit over the link above it */
  .navbar-nav .dropdown-menu::before { content: none; }

  /* Section 22 borders every .nav-link; without this the Services link and
     the open submenu below it would draw two lines. */
  .navbar-nav .dropdown > .nav-link { border-bottom: 0; }

  .navbar-nav .dropdown-item {
    padding: 10px 12px;
    font-size: .95rem;
    border-left: 2px solid var(--line-soft);
    border-radius: 0 8px 8px 0;
  }
  .navbar-nav .dropdown-item.active {
    background: transparent;
    color: var(--swei-blue);
    border-left-color: var(--swei-blue);
  }
}