/* ==========================================================================
   Pro Contractors KC LLC - shared stylesheet
   Extracted from the original single-file mockup so every page shares it.
   Page-specific blocks live at the bottom under clearly marked sections.
   ========================================================================== */

:root {
  --blue: #0b65dd;
  --blue-dark: #0853bd;
  --navy: #071c36;
  --navy2: #082b51;
  --ink: #07182f;
  --body: #4f5f73;
  --line: #dbe4ef;
  --soft: #f5f9fe;
  --soft-blue: #edf6ff;
  --white: #fff;
  --shadow: 0 14px 40px rgba(7, 28, 54, 0.1);
  --radius: 18px;
  --max: 1180px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.menu-open {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.container {
  width: min(var(--max), calc(100% - 46px));
  margin: 0 auto;
}
.kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--blue);
}
.section-title {
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 6px 0 10px;
}
.muted {
  color: var(--body);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 850;
  border: 1px solid transparent;
  transition: 0.18s ease;
  white-space: nowrap;
}
.btn svg {
  width: 18px;
  height: 18px;
}
.btn.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 9px 22px rgba(11, 101, 221, 0.22);
}
.btn.primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}
.btn.secondary {
  background: #fff;
  color: var(--navy);
  border-color: #86b6ef;
}
.btn.secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(7, 28, 54, 0.08);
}
.nav {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  width: 245px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.brand img {
  width: 100%;
  height: 84px;
  object-fit: contain;
  object-position: left center;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 29px;
  font-size: 16px;
  font-weight: 750;
}
.nav-links > a:not(.btn) {
  position: relative;
  padding: 34px 0;
}
.nav-links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transition: 0.18s;
}
.nav-links > a:not(.btn):hover::after,
.nav-links > a.active::after {
  transform: scaleX(1);
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  color: var(--navy);
  font-size: 23px;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #fff 0%, #fff 53%, #eef6ff 100%);
  padding: 44px 0 14px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  min-height: 455px;
}
.hero-copy {
  padding: 10px 28px 38px 0;
  position: relative;
  z-index: 3;
}
.hero h1 {
  font-size: clamp(48px, 5.15vw, 72px);
  line-height: 1;
  letter-spacing: -0.055em;
  margin: 9px 0 20px;
  max-width: 600px;
}
.hero .lead {
  font-size: 16px;
  line-height: 1.58;
  color: #425169;
  max-width: 585px;
  margin: 0 0 22px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.micro {
  margin-top: 13px;
  font-size: 12px;
  color: #566579;
}
.micro strong {
  color: var(--blue);
}
.hero-media {
  height: 450px;
  position: relative;
  align-self: end;
  margin-right: -36px;
}
.hero-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -95px;
  top: 0;
  bottom: 0;
  width: 175px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255, 255, 255, 0.94) 36%,
    rgba(255, 255, 255, 0.45) 72%,
    transparent 100%
  );
  pointer-events: none;
}
.hero-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -48px;
  bottom: -1px;
  width: 175px;
  height: 95px;
  background: #fff;
  border-radius: 0 95px 0 0;
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 0 0 84px;
}

.trust-wrap {
  position: relative;
  z-index: 4;
  margin-top: -4px;
}
.trustbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 11px 32px rgba(7, 28, 54, 0.08);
  overflow: hidden;
}
.trust-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 17px 22px;
  border-right: 1px solid var(--line);
  min-height: 88px;
}
.trust-item:last-child {
  border-right: 0;
}
.circle-icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  flex: 0 0 auto;
}
.circle-icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}
.trust-item span {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: #69778a;
  margin-top: 4px;
}

/* Sections */
section {
  padding: 64px 0;
}
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
}
.section-head p {
  font-size: 14px;
  color: var(--body);
  margin: 0;
}

/* Services */
#services {
  padding-top: 46px;
  padding-bottom: 24px;
}
/* Was six across in a single row. With eight services that would leave an
   orphan pair, and at 1240px six cards were only ~195px wide each - cramped
   for a heading plus a sentence. Four across in two clean rows gives each
   card ~295px and reads considerably better. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.service-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px 12px 17px;
  text-align: center;
  min-height: 215px;
  transition: 0.18s;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: #b8d4f3;
}
.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #084b9f, #0b65dd);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
}
.service-icon svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card h3 {
  font-size: 15px;
  line-height: 1.12;
  margin: 0 0 8px;
}
.service-card p {
  font-size: 11px;
  line-height: 1.48;
  color: #606f82;
  margin: 0;
}
.service-card button {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  border-radius: 14px;
  font-size: 0;
}
.reno-strip {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  background: #fff;
}
.reno-strip .tiny {
  width: 33px;
  height: 33px;
  border-radius: 8px;
  background: #e9f3ff;
  color: var(--blue);
  display: grid;
  place-items: center;
}
.reno-strip .tiny svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.reno-strip strong {
  font-size: 14px;
}
.reno-strip span {
  font-size: 12px;
  color: #607084;
  margin-left: 8px;
}
.reno-strip a {
  margin-left: auto;
  color: var(--blue);
  font-size: 24px;
  font-weight: 900;
}

/* Project */
#projects {
  padding-top: 16px;
  padding-bottom: 18px;
}
.project-shell {
  position: relative;
  background: linear-gradient(112deg, #061a32, #082f5a);
  border-radius: 17px;
  padding: 12px;
  display: grid;
  grid-template-columns: 210px 1fr 1fr;
  gap: 8px;
  box-shadow: var(--shadow);
}
.project-copy {
  color: #fff;
  padding: 25px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-copy .kicker {
  color: #39a2ff;
}
.project-copy h2 {
  font-size: 33px;
  line-height: 1.04;
  margin: 8px 0 10px;
  letter-spacing: -0.025em;
}
.project-copy p {
  font-size: 12.5px;
  color: #cbd9e8;
  margin: 0 0 18px;
}
/* The two-line "View Before & After Pictures" button in the home page
   teaser. These were inline style attributes on the markup; same values,
   just kept with the rest of the styling so the button can be restyled
   from one place. */
.teaser-cta {
  height: 60px;
}
/* Was an <h4>, which put "View Before & After Pictures" into the page's
   heading outline between an h2 and the next h2 - a heading that skipped a
   level and described a button rather than a section. It is a link label,
   so it is a span now; these values reproduce what the h4 rendered at. */
.teaser-cta .cta-label {
  display: block;
  text-align: center;
  padding: 12px;
  margin: 21.28px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

/* A link sitting inside a run of body copy, styled to stand out from it.
   Was an inline style attribute on the one link that needed it. */
.text-link {
  color: var(--blue);
  font-weight: 800;
}

/* A phone number broken across two lines reads as two wrong numbers, and
   it is the sort of thing that only shows up at one awkward width on one
   device. Matched on the href rather than a class because most of the
   phone links in this site carry no class at all, and the top-bar one is
   built at runtime by site.js - an attribute selector covers every one of
   them, including any added later. */
a[href^="tel:"] {
  white-space: nowrap;
}

/* Small inline SVG inside a button, sized to sit beside the label. Same
   values the projects.html view-toggle icon carried inline. */
.btn-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.project-media {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  background: #dbe4ef;
}
.project-media.before {
  border-radius: 11px 0 0 11px;
}
.project-media.after {
  border-radius: 0 11px 11px 0;
}
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-label {
  position: absolute;
  top: 9px;
  padding: 5px 11px;
  background: #0a5cca;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
}
.project-media.before .project-label {
  left: 9px;
}
.project-media.after .project-label {
  right: 9px;
}
.project-switch {
  position: absolute;
  left: calc(210px + (100% - 210px) / 2);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid #1182ff;
  background: #071d36;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}
.project-switch span {
  font-size: 20px;
  letter-spacing: 2px;
  transform: translateX(1px);
}

/* Investor */
#about {
  padding-top: 4px;
  padding-bottom: 26px;
}
.investor-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(105deg, #fff 0%, #fff 50%, #f4f9ff 100%);
  padding: 22px 28px;
}
.investor-left {
  display: flex;
  gap: 18px;
  align-items: center;
}
.big-icon {
  width: 70px;
  height: 70px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  flex: 0 0 auto;
}
.big-icon svg {
  width: 38px;
  height: 38px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.investor-left h2 {
  font-size: 29px;
  line-height: 1.06;
  margin: 4px 0 6px;
}
.investor-left p {
  font-size: 12px;
  color: var(--body);
  margin: 0;
  max-width: 440px;
}
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 16px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #48576a;
}
.check b {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
}

/* Team */
#meet {
  padding-top: 22px;
  padding-bottom: 18px;
}
.meet-kicker {
  text-align: center;
  margin-bottom: 12px;
}
.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}
.person {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  background: #fff;
  min-height: 128px;
  transition: 0.18s;
}
.person:hover {
  box-shadow: 0 10px 28px rgba(7, 28, 54, 0.08);
  transform: translateY(-2px);
}
.avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid #bfd4ec;
  background: #eef5fc;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person h3 {
  font-size: 17px;
  margin: 0 0 3px;
}
.person .phone {
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
}
.person p {
  font-size: 11px;
  line-height: 1.42;
  color: #637185;
  margin: 7px 0 0;
}
.bio-btn {
  font-size: 11px;
  font-weight: 850;
  color: var(--blue);
  border: 0;
  background: transparent;
  padding: 6px 0 0;
  text-align: left;
}
.bio-extra {
  display: none;
  font-size: 11px !important;
  color: #536277 !important;
  margin-top: 6px !important;
}
.person.open .bio-extra {
  display: block;
}

/* Info strip */
.info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(108deg, #061b34, #08315e);
  border-radius: 13px;
  overflow: hidden;
  color: #fff;
  margin-top: 17px;
}
.info-cell {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  min-height: 82px;
}
.info-cell:last-child {
  border-right: 0;
}
.info-cell .mini-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0b65dd;
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.info-cell .mini-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.info-cell strong {
  display: block;
  font-size: 12px;
}
.info-cell span {
  display: block;
  color: #cad8e7;
  font-size: 10.3px;
  line-height: 1.35;
  margin-top: 3px;
}
.placeholder {
  color: #8fc7ff !important;
  font-weight: 800;
}

/* Bottom */
#service-areas {
  padding-top: 17px;
  padding-bottom: 0;
}
.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 19px;
}
.local-card,
.quote-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  padding: 23px;
  min-height: 330px;
}
.quote-card {
  background: linear-gradient(135deg, #f8fbff, #eaf5ff);
}
.local-card h2,
.quote-card h2 {
  font-size: 25px;
  line-height: 1.08;
  margin: 4px 0 6px;
  letter-spacing: -0.02em;
}
.local-card p,
.quote-card p {
  font-size: 11.5px;
  color: var(--body);
  margin: 0 0 14px;
}
.areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  font-size: 11.5px;
  color: #425269;
  margin-bottom: 16px;
}
.areas div::before {
  content: "•";
  color: var(--blue);
  font-weight: 900;
  margin-right: 8px;
}
#kc-map {
  height: 172px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d3e1ef;
  background: #edf4fb;
  position: relative;
}
.map-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #edf4fb;
}
.map-fallback svg {
  width: 100%;
  height: 100%;
}
#kc-map .leaflet-container {
  font-family: inherit;
}
.leaflet-control-attribution {
  font-size: 8px !important;
}
.leaflet-container {
  background: #edf4fb;
}
.leaflet-popup-content {
  font-size: 12px;
  margin: 9px 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
/* Honeypot field for send-quote.php's spam check: moved off-screen rather
   than display:none / hidden, since some bots specifically skip fields
   with those. Real visitors never see or reach it (also aria-hidden and
   tabindex="-1" in the markup, so assistive tech and keyboard nav skip it
   the same way). */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #cbd9e8;
  border-radius: 6px;
  background: #fff;
  color: #27364a;
  outline: none;
  font-size: 11px;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 101, 221, 0.1);
}
.form-grid textarea {
  grid-column: 1/-1;
  min-height: 72px;
  resize: vertical;
}
.form-grid button {
  grid-column: 1/-1;
  border: 0;
  height: 38px;
}
.form-status {
  font-size: 10px !important;
  min-height: 15px;
  margin: 7px 0 0 !important;
  color: #47739f !important;
}

/* Footer */
footer {
  margin-top: 20px;
  background: linear-gradient(110deg, #061a32, #082f59);
  color: #fff;
  padding: 25px 0 18px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 0.75fr 1fr 1fr;
  gap: 25px;
  align-items: start;
}
.footer-brand img {
  width: 165px;
  max-height: 92px;
  object-fit: contain;
  object-position: left center;
  opacity: 0.98;
}
.footer-brand p {
  font-size: 10px;
  color: #cbd8e7;
  line-height: 1.5;
  margin: 6px 0 0;
}
footer h2 {
  font-size: 11px;
  margin: 0 0 7px;
}
footer a,
footer p {
  display: block;
  font-size: 9.8px;
  line-height: 1.75;
  color: #cad7e6;
  margin: 0;
}
.footer-tag {
  font-size: 16px !important;
  font-weight: 900;
  color: #fff !important;
  line-height: 1.25 !important;
}
.socials {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}
.socials a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0b65dd;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
}
.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 20px;
  padding-top: 14px;
  text-align: center;
  font-size: 9.5px;
  color: #aebdd0;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 22, 43, 0.72);
  display: none;
  place-items: center;
  padding: 24px;
}
.modal.open {
  display: grid;
}
.modal-card {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}
.modal-card h3 {
  font-size: 27px;
  margin: 0 0 7px;
}
.modal-card p {
  color: var(--body);
  font-size: 13px;
}
.modal-card .btn {
  margin-top: 8px;
}

@media (max-width: 1040px) {
  .brand {
    width: 210px;
  }
  .nav-links {
    gap: 17px;
  }
  .nav-links > a:not(.btn) {
    font-size: 12px;
  }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Eight cards at three across leaves 3+3+2. Two even rows of four, then
     straight to two-up, keeps every row full at every width. */
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-shell {
    grid-template-columns: 1fr 1fr;
  }
  .project-copy {
    grid-column: 1/-1;
    padding: 18px;
  }
  .project-copy h2 {
    font-size: 28px;
  }
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .footer-grid > div:nth-child(4),
  .footer-grid > div:nth-child(5) {
    grid-column: auto;
  }
}
@media (max-width: 820px) {
  .container {
    width: min(var(--max), calc(100% - 28px));
  }
  .nav {
    height: 74px;
  }
  .brand {
    width: 176px;
  }
  .brand img {
    height: 62px;
  }
  .nav-links {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 82px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .menu-open .nav-links {
    display: flex;
  }
  .nav-links > a:not(.btn) {
    padding: 12px 8px;
  }
  .nav-links > a:not(.btn)::after {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .hero {
    padding-top: 24px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding-right: 0;
  }
  .hero h1 {
    font-size: 50px;
  }
  .hero-media {
    height: 340px;
    margin: 0 -14px 0;
  }
  .hero-media::before,
  .hero-media::after {
    display: none;
  }
  .hero-media img {
    border-radius: 26px;
  }
  .trust-wrap {
    margin-top: 14px;
  }
  .trustbar {
    grid-template-columns: 1fr 1fr;
  }
  .trust-item:nth-child(2) {
    border-right: 0;
  }
  .trust-item {
    border-bottom: 1px solid var(--line);
  }
  .service-grid {
    grid-template-columns: 1fr 1fr;
  }
  .project-shell {
    grid-template-columns: 1fr;
  }
  .project-media.before,
  .project-media.after {
    border-radius: 11px;
  }
  .project-switch {
    display: none;
  }
  .investor-card {
    grid-template-columns: 1fr;
  }
  .checks {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 18px 0 0;
  }
  .people {
    grid-template-columns: 1fr;
  }
  .info-strip {
    grid-template-columns: 1fr 1fr;
  }
  .info-cell:nth-child(2) {
    border-right: 0;
  }
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .hero h1 {
    font-size: 41px;
  }
  .hero .lead {
    font-size: 14px;
  }
  .btn {
    width: 100%;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .trustbar,
  .service-grid,
  .checks,
  .info-strip,
  .areas,
  .form-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .trust-item,
  .info-cell {
    border-right: 0;
  }
  .form-grid textarea,
  .form-grid button {
    grid-column: auto;
  }
  .reno-strip span {
    display: none;
  }
  .investor-left {
    align-items: flex-start;
  }
  .big-icon {
    width: 58px;
    height: 58px;
  }
  .project-copy h2 {
    font-size: 31px;
  }
}

/* --- Revision: hero image, spacing, contractor portrait alignment --- */
/* Remove the white semicircle cutout so the bathroom photo occupies that curved corner. */
.hero-media::after {
  content: none !important;
  display: none !important;
}

/* Preserve the soft blend at the left edge but let the image itself fill the bottom-left curve. */
.hero-media img {
  border-radius: 0 0 0 84px !important;
}

/* Give the trust bar a little breathing room before Our Services. */
.hero {
  padding-bottom: 30px !important;
}
#services {
  padding-top: 68px !important;
}

/* Keep all Meet the Contractors portrait bubbles exactly aligned and filled consistently. */
.people {
  align-items: stretch !important;
}
.person {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 132px !important;
  padding: 18px 22px !important;
}
.avatar {
  width: 86px !important;
  height: 86px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
  align-self: center !important;
  justify-self: start !important;
  border: 1px solid #bfd4ec !important;
  background: #eef5fc !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}
.avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  border-radius: 50% !important;
}
.person > div:last-child {
  align-self: center !important;
  min-width: 0 !important;
}

@media (max-width: 820px) {
  .hero {
    padding-bottom: 18px !important;
  }
  #services {
    padding-top: 54px !important;
  }
  .person {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
  .avatar {
    width: 82px !important;
    height: 82px !important;
  }
}

/* --- Revision v6: requested visual refinements --- */

/* Bathroom image: bottom-left now matches the bottom-right radius instead
   of the old dramatic 84px "signature" sweep - both bottom corners are the
   same soft curve now. */
.hero-media img {
  border-radius: 0 24px 24px 24px !important;
}

/* Add clear breathing room between the bathroom image / copy and the trust bar. */
.trust-wrap {
  margin-top: 34px !important;
}

/* On wide desktop screens, align the trust bar's right edge with the extended hero image. */
@media (min-width: 1227px) {
  .trust-wrap {
    width: calc(var(--max) + 36px) !important;
    margin-left: calc((100% - var(--max)) / 2) !important;
    margin-right: 0 !important;
  }
}

/* Contractor cards: keep all three image circles identical and perfectly aligned. */
.people {
  align-items: stretch !important;
}
.person {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 132px !important;
  padding: 18px 22px !important;
}
.avatar {
  width: 120px !important;
  height: 120px !important;
  flex: 0 0 120px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
  align-self: center !important;
  justify-self: start !important;
  border: 2px solid #bfd4ec !important;
  background: #e7eef6 !important;
  box-shadow: none !important;
}
.avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  border-radius: 0 !important;
  max-width: none !important;
}
.avatar-text { 
  padding-left: 34px !important;
}

.person > div:last-child {
  align-self: center !important;
  min-width: 0 !important;
}

/* Keep the standard container behavior below large desktop sizes. */
@media (max-width: 1226px) {
  .trust-wrap {
    width: min(var(--max), calc(100% - 46px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 820px) {
  .hero-media img {
    border-radius: 24px !important;
  }
  .trust-wrap {
    margin-top: 22px !important;
  }
  .person {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
  .avatar {
    width: 82px !important;
    height: 82px !important;
    flex-basis: 82px !important;
  }
}


/* --- Revision v7: header contractor license under Contact --- */
.nav-contact-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
}

.nav-contact-wrap .btn {
  margin: 0;
}

.header-license {
  color: #536277;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

@media (max-width: 820px) {
  .nav-contact-wrap {
    width: 100%;
    align-items: stretch;
    gap: 7px;
    padding-top: 8px;
  }

  .nav-contact-wrap .btn {
    width: 100%;
  }

  .header-license {
    text-align: center;
    font-size: 11px;
    padding-bottom: 2px;
  }
}

/* ==========================================================================
   v8 - Multi-page structure
   Everything below was added when the single-file mockup was split into
   index / projects / about / testimonials.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Carried over from the mockup's inline styles
   The original had these as style="" attributes on the elements themselves,
   which meant they also won on mobile and blocked the responsive rules.
   -------------------------------------------------------------------------- */
/* The logo is 2:1, so the width has to keep up or object-fit caps the height
   and the tagline under the wordmark stops being legible. */
.brand {
  width: 276px;
}
.brand img {
  height: 122px;
}
.hero h1 {
  /* was a hard-coded 50px inline; now holds 50px on desktop and scales down */
  font-size: clamp(41px, 4.4vw, 50px);
}
@media (max-width: 1040px) {
  .brand {
    width: 240px;
  }
  .brand img {
    height: 106px;
  }
}
@media (max-width: 820px) {
  .brand {
    width: 200px;
  }
  .brand img {
    height: 68px;
  }
}
@media (max-width: 400px) {
  .brand {
    width: 172px;
  }
  .brand img {
    height: 60px;
  }
}

/* --------------------------------------------------------------------------
   Social bar (top of every page, above the sticky header)
   -------------------------------------------------------------------------- */
.topbar {
  background: linear-gradient(100deg, #061a32, #0a3566);
  color: #cfe0f3;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* WHY min-height IS SET HERE AND AT EVERY MOBILE BREAKPOINT
     site.js fills [data-topbar-contact] and [data-socials] after the page
     paints, so both start empty. On desktop the bar is already 40px tall
     and the injected content fits inside it - no movement. On a phone the
     social buttons are larger relative to the bar, so filling them grew it
     by 4-6px and shoved the entire page down: that single reflow was the
     whole of the mobile CLS score (0.111 vs 0.000 on desktop, same page).
     Each breakpoint reserves the height that breakpoint actually ends up
     at - measured, not guessed - so the content lands in space that was
     already there. Re-measure if the social button size changes. */
  min-height: 40px;
  padding: 5px 0;
}
.topbar-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #b9d2ec;
}
.topbar-tag strong {
  color: #fff;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  font-weight: 750;
}
.topbar-contact a {
  color: #dbe8f7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.16s;
}
.topbar-contact a:hover {
  color: #fff;
}
.topbar-contact svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-bar {
  display: flex;
  align-items: center;
  gap: 7px;
}
.social-bar a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  transition: 0.18s ease;
}
.social-bar a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.social-bar svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
/* Footer reuses the same icon buttons */
.socials a svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.socials a {
  transition: 0.18s ease;
}
.socials a:hover {
  transform: translateY(-2px);
  background: #1a7ef0;
}

@media (max-width: 820px) {
  .topbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 9px 0;
  }
  .topbar-tag {
    text-align: center;
  }
  .topbar-right {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}
@media (max-width: 520px) {
  .topbar-contact {
    flex-direction: column;
    gap: 5px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Sub-page banner
   -------------------------------------------------------------------------- */
.page-hero {
  background: linear-gradient(112deg, #061a32 0%, #082f5a 55%, #0a4a90 100%);
  color: #fff;
  padding: 52px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(58, 160, 255, 0.28),
    transparent 68%
  );
  pointer-events: none;
}
.page-hero .kicker {
  color: #4fb0ff;
}
.page-hero h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 8px 0 12px;
  max-width: 760px;
}
.page-hero p {
  font-size: 15px;
  line-height: 1.6;
  color: #c6daef;
  max-width: 640px;
  margin: 0;
}
.crumbs {
  font-size: 11.5px;
  color: #8fb6dd;
  margin-top: 18px;
}
.crumbs a:hover {
  color: #fff;
}
.crumbs span {
  margin: 0 7px;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Before / After carousel (projects.html)
   -------------------------------------------------------------------------- */
#gallery {
  padding: 46px 0 64px;
}
.carousel {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Project type filter
   A custom listbox rather than a native <select>, so it can carry the same
   dark-glass treatment as the carousel stage. Built by projects.js from the
   "Project Type:" line in each description file.
   -------------------------------------------------------------------------- */
.gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.type-filter {
  position: relative;
  flex: 0 0 auto;
}

.filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 268px;
  height: 56px;
  padding: 0 16px 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(90, 164, 246, 0.34);
  background:
    linear-gradient(150deg, rgba(18, 58, 105, 0.96), rgba(7, 26, 49, 0.98));
  color: #fff;
  text-align: left;
  box-shadow:
    0 14px 34px rgba(7, 28, 54, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: 0.2s ease;
}
.filter-trigger:hover {
  border-color: rgba(90, 164, 246, 0.7);
  box-shadow:
    0 16px 40px rgba(11, 101, 221, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.filter-trigger:focus-visible {
  outline: none;
  border-color: #4fb0ff;
  box-shadow:
    0 0 0 3px rgba(79, 176, 255, 0.35),
    0 16px 40px rgba(11, 101, 221, 0.3);
}

.filter-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #0b65dd, #084b9f);
  box-shadow: 0 4px 12px rgba(11, 101, 221, 0.45);
}
.filter-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.filter-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.filter-kicker {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6fb4f5;
  line-height: 1;
}
.filter-value {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-caret {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-left: 4px;
  border-right: 2px solid #8cc4f7;
  border-bottom: 2px solid #8cc4f7;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.22s ease;
}
.type-filter.open .filter-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- Panel --- */
.filter-panel {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 70;
  min-width: 100%;
  margin: 0;
  padding: 7px;
  list-style: none;
  border-radius: 15px;
  border: 1px solid rgba(90, 164, 246, 0.3);
  background: linear-gradient(160deg, #10365f 0%, #071c34 100%);
  box-shadow:
    0 26px 60px rgba(4, 16, 32, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  max-height: 60vh;
  overflow-y: auto;
}
.type-filter.open .filter-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.filter-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 10px;
  border-radius: 10px;
  color: #cfe2f6;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  transition: 0.14s ease;
}
.filter-option:hover,
.filter-option:focus-visible {
  outline: none;
  background: rgba(90, 164, 246, 0.16);
  color: #fff;
}
.filter-option[aria-selected="true"] {
  background: linear-gradient(
    100deg,
    rgba(11, 101, 221, 0.9),
    rgba(11, 101, 221, 0.45)
  );
  color: #fff;
}

.filter-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 5px;
  border: 1.5px solid rgba(140, 196, 247, 0.5);
  position: relative;
  transition: 0.14s ease;
}
.filter-option[aria-selected="true"] .filter-check {
  background: #fff;
  border-color: #fff;
}
.filter-option[aria-selected="true"] .filter-check::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #0b65dd;
  border-bottom: 2px solid #0b65dd;
  transform: rotate(42deg);
}

.filter-name {
  flex: 1 1 auto;
  white-space: nowrap;
}
.filter-count {
  flex: 0 0 auto;
  min-width: 24px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #dceafa;
}
.filter-option[aria-selected="true"] .filter-count {
  background: rgba(255, 255, 255, 0.9);
  color: #0b4da8;
}

.filter-summary {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  /* 4.5:1 on white - WCAG AA for small text. Was #6b7d93 (4.22). */
  color: #66788e;
}

@media (max-width: 520px) {
  .gallery-toolbar {
    gap: 10px;
  }
  .type-filter {
    width: 100%;
  }
  .filter-trigger {
    width: 100%;
    min-width: 0;
  }
}

/* --- Stage: the draggable comparison viewer --- */
.stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0a1c33;
  border: 1px solid #d3e1ef;
  box-shadow: var(--shadow);
  /* Size from the column width only. Without align-self:start the grid row
     stretches the height, and aspect-ratio then blows the width back out. */
  align-self: start;
  width: 100%;
  /* The shape the stage holds until projects.js applies the real one for
     the slide being shown. This should match the FIRST slide in the
     carousel, because that is what a visitor sees at first paint - any
     difference is a visible jump as the page settles.

     3/2 (1.5) used to be here and was wrong for every photo in the library:
     they run 0.78-1.41, so the stage always grew taller a moment after
     load. That single reflow was the largest layout shift on this page.

     tools\build-projects.ps1 prints the first slide's ratio each time it
     runs and flags it when it stops matching the value below - if it says
     they differ, update this number. */
  aspect-ratio: 1.41;
  min-height: 340px;
  /* Stops a tall portrait photo turning the stage into a skyscraper. */
  max-height: min(640px, 72vh);
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* "contain", not "cover": real project photos arrive in every shape from
     square to tall portrait, and cropping a bathroom shot to a 3:2 letterbox
     cuts the shower head off the top. projects.js sets the stage's
     aspect-ratio from each photo, so there is rarely a visible letterbox. */
  object-fit: contain;
  -webkit-user-drag: none;
}
/* The "after" layer is clipped by the wipe position. */
.stage .after-layer {
  clip-path: inset(0 0 0 var(--wipe, 50%));
}
.stage.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #0a1c33;
  opacity: 0.55;
}

/* Wipe handle */
.wipe-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--wipe, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
  z-index: 6;
  pointer-events: none;
}
.wipe-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* Invisible range input laid over the stage keeps the wipe keyboard-accessible. */
.wipe-input {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.wipe-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 100%;
  cursor: ew-resize;
}
.wipe-input::-moz-range-thumb {
  width: 46px;
  height: 340px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.wipe-input:focus-visible ~ .wipe-line {
  background: #4fb0ff;
  box-shadow: 0 0 0 3px rgba(79, 176, 255, 0.5);
}

/* Corner tags */
.stage-tag {
  position: absolute;
  top: 12px;
  z-index: 5;
  padding: 6px 13px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  color: #fff;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.16s ease;
}
.stage-tag.before {
  left: 12px;
  background: rgba(20, 32, 48, 0.82);
}
.stage-tag.after {
  right: 12px;
  background: rgba(10, 92, 202, 0.9);
}
/* Set by projects.js once the divider sweeps across a badge - at that point it
   would be labelling the opposite photo. */
.stage-tag.is-hidden {
  opacity: 0;
}

/* Side-by-side alternative view */
.stage.split .after-layer {
  clip-path: none;
  left: 50%;
  width: 50%;
}
.stage.split .before-layer {
  width: 50%;
}
.stage.split .wipe-line {
  left: 50%;
}
.stage.split .wipe-input,
.stage.split .wipe-grip {
  display: none;
}

/* Slide transition */
.stage .layer {
  transition: opacity 0.32s ease;
}
.stage.swapping .layer {
  opacity: 0;
}

/* --- Info panel --- */
.slide-info {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(150deg, #fff 0%, #f6faff 100%);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}
.slide-count {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
}
.slide-info h2 {
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 7px 0 12px;
}
.slide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.slide-meta span {
  font-size: 10.5px;
  font-weight: 800;
  color: #2b5e9e;
  background: #e7f2ff;
  border: 1px solid #cfe4fb;
  border-radius: 999px;
  padding: 4px 11px;
}
.slide-body {
  font-size: 13px;
  line-height: 1.62;
  color: var(--body);
  margin: 0;
  flex: 1 1 auto;
}
.slide-body p {
  margin: 0 0 10px;
}
.slide-body p:last-child {
  margin-bottom: 0;
}

/* --- Controls --- */
.stage-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.round-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #b9d4f1;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
  transition: 0.16s;
  flex: 0 0 auto;
}
.round-btn:hover:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}
.round-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.view-toggle {
  margin-left: auto;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid #b9d4f1;
  background: #fff;
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.16s;
}
.view-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.view-toggle[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.hint {
  font-size: 10.5px;
  color: #74839a;
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hint b {
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   Thumbnail rail
   The browser's default scrollbar looked like a spreadsheet bolted onto the
   carousel. This replaces it with a masked, snap-scrolling rail: glass arrow
   buttons, edges that fade instead of cutting off, and a slim progress line
   that tracks position.
   -------------------------------------------------------------------------- */
.thumb-rail {
  position: relative;
  margin-top: 22px;
  /* Side gutters give the arrow buttons somewhere to live that isn't on top
     of the first and last thumbnail. */
  padding: 0 48px 20px;
}

.thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 4px 14px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* Native scrollbar is replaced by .rail-track below. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade the rail out at both ends rather than slicing a thumbnail in half. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 14px,
    #000 calc(100% - 14px),
    transparent 100%
  );
}
.thumbs::-webkit-scrollbar {
  display: none;
}

.thumb {
  flex: 0 0 auto;
  width: 132px;
  scroll-snap-align: start;
  border: 0;
  border-radius: 13px;
  overflow: hidden;
  background: #0a1c33;
  padding: 0;
  position: relative;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(11, 101, 221, 0.14),
    0 8px 18px rgba(7, 28, 54, 0.12);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    box-shadow 0.22s ease;
}
.thumb img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  display: block;
  transition:
    transform 0.35s ease,
    filter 0.25s ease;
  filter: saturate(0.82) brightness(0.88);
}
/* Gradient scrim so the caption stays readable over any photo. */
.thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  height: 50px;
  background: linear-gradient(180deg, transparent, rgba(6, 20, 38, 0.92));
  pointer-events: none;
}
.thumb em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 850;
  color: #fff;
  padding: 7px 9px 8px;
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.thumb:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(11, 101, 221, 0.4),
    0 14px 26px rgba(7, 28, 54, 0.22);
}
.thumb:hover img {
  transform: scale(1.06);
  filter: saturate(1) brightness(1);
}
.thumb:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--blue);
}

.thumb[aria-current="true"] {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 2px var(--blue),
    0 12px 26px rgba(11, 101, 221, 0.4);
}
.thumb[aria-current="true"] img {
  filter: saturate(1.04) brightness(1);
}
/* Accent bar marks the active project. */
.thumb[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 0;
  height: 3px;
  z-index: 3;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #4fb0ff, #0b65dd);
  box-shadow: 0 0 10px rgba(79, 176, 255, 0.9);
}

/* --- Arrow buttons --- */
.rail-nav {
  position: absolute;
  top: 44px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(90, 164, 246, 0.4);
  background: linear-gradient(
    150deg,
    rgba(18, 58, 105, 0.95),
    rgba(7, 26, 49, 0.97)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(4, 18, 36, 0.35);
  transition: 0.18s ease;
}
.rail-nav.prev {
  left: 2px;
}
.rail-nav.next {
  right: 2px;
}
.rail-nav span {
  width: 8px;
  height: 8px;
  border-top: 2px solid #bcd9f7;
  border-right: 2px solid #bcd9f7;
  transition: border-color 0.18s ease;
}
.rail-nav.prev span {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.rail-nav.next span {
  transform: rotate(45deg) translate(-1px, -1px);
}
.rail-nav:hover:not(:disabled) {
  border-color: #4fb0ff;
  box-shadow: 0 10px 26px rgba(11, 101, 221, 0.45);
  transform: scale(1.06);
}
.rail-nav:hover:not(:disabled) span {
  border-color: #fff;
}
.rail-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

/* --- Progress line --- */
.rail-track {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 4px;
  height: 3px;
  border-radius: 3px;
  background: rgba(11, 101, 221, 0.14);
  overflow: hidden;
}
.rail-thumbline {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0b65dd, #4fb0ff);
  box-shadow: 0 0 10px rgba(79, 176, 255, 0.8);
  transform: translateX(0);
  transition: transform 0.12s linear;
}
/* Nothing to scroll - hide the chrome entirely. */
.thumb-rail.no-scroll .rail-track,
.thumb-rail.no-scroll .rail-nav {
  display: none;
}
.thumb-rail.no-scroll .thumbs {
  -webkit-mask-image: none;
  mask-image: none;
  justify-content: center;
}

@media (max-width: 640px) {
  .rail-nav {
    display: none; /* swipe is the natural gesture on touch */
  }
  .thumb-rail {
    padding: 0 0 18px; /* no arrows, so reclaim the gutters */
  }
  .rail-track {
    left: 4px;
    right: 4px;
  }
  .thumbs {
    gap: 10px;
  }
  .thumb {
    width: 118px;
  }
}

/* --- Empty / error state --- */
.data-note {
  border: 1px solid #f0d9a8;
  background: #fffaf0;
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 18px;
}
.data-note h3 {
  font-size: 16px;
  margin: 0 0 8px;
  color: #7a5510;
}
.data-note p {
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b5527;
  margin: 0 0 8px;
}
.data-note code {
  background: #f3e6cb;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11.5px;
}
.data-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .carousel {
    grid-template-columns: 1fr;
  }
  .stage {
    min-height: 280px;
  }
}
@media (max-width: 520px) {
  .slide-info {
    padding: 20px 18px 18px;
  }
  .slide-info h2 {
    font-size: 23px;
  }
  .view-toggle {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.story {
  padding: 58px 0 30px;
}
.story-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: start;
}
.story-copy h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 6px 0 14px;
}
.story-copy p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--body);
  margin: 0 0 15px;
}
.story-copy p:last-child {
  margin-bottom: 0;
}
.pull-quote {
  border-left: 4px solid var(--blue);
  background: var(--soft-blue);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 22px 0;
}
.pull-quote p {
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 750;
  color: var(--navy) !important;
  margin: 0 !important;
}
.pull-quote cite {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--blue);
  margin-top: 9px;
}
.story-aside {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, #f4f9ff);
  padding: 24px;
  position: sticky;
  top: 120px;
}
.story-aside h3 {
  font-size: 15px;
  margin: 0 0 14px;
}
.stat-row {
  display: grid;
  gap: 14px;
}
.stat {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.stat b {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #e7f2ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.stat b svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat strong {
  display: block;
  font-size: 13px;
}
.stat span {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: #66768b;
  margin-top: 2px;
}

/* Timeline */
.timeline {
  padding: 20px 0 56px;
}
.timeline-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.tl-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px 18px;
  transition: 0.18s;
}
.tl-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: #b8d4f3;
}
.tl-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--blue);
}
.tl-item .tl-step {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.tl-item h3 {
  font-size: 15px;
  margin: 8px 0 7px;
  line-height: 1.2;
}
.tl-item p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

/* Values band */
.values {
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 54px 0;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.value-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
}
.value-card .circle-icon {
  margin-bottom: 14px;
}
.value-card h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.value-card p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

@media (max-width: 980px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .story-aside {
    position: static;
  }
  .timeline-track {
    grid-template-columns: 1fr 1fr;
  }
  .value-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .timeline-track {
    grid-template-columns: 1fr;
  }
}

/* Crew cards on the About page - stacked variant of the home page .person.
   The base rules use !important (legacy mockup revisions), so these do too. */
#crew {
  padding: 56px 0 60px;
}
.people[data-team] .person {
  display: block !important;
  min-height: 0 !important;
  padding: 26px 24px 24px !important;
}
.people[data-team] .avatar {
  width: 92px !important;
  height: 92px !important;
  margin-bottom: 16px;
}
.people[data-team] .person h3 {
  font-size: 20px;
  margin: 0 0 3px;
}
.person-role {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}
.person-contact {
  display: grid;
  /* minmax(0,1fr) is required: a grid item's default min-width:auto lets the
     nowrap email push the card wider than its container instead of
     ellipsizing. */
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 12px 0 4px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
.person-contact a {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-contact a:hover {
  color: var(--blue);
}
.people[data-team] .person p {
  font-size: 12.5px !important;
  line-height: 1.6;
  color: var(--body) !important;
  margin-top: 12px !important;
}

/* --------------------------------------------------------------------------
   Testimonials page
   -------------------------------------------------------------------------- */
#reviews {
  padding: 46px 0 64px;
}
.review-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  /* Empty in the HTML until testimonials.js has the XML. However few chips
     end up here, there is always at least one 34px row of them, so reserving
     that costs nothing and leaves a wide desktop - where they all fit on one
     line - with nothing to shift. Narrower viewports get an exact
     reservation from the 980px block, where the row stops wrapping. */
  min-height: 34px;
}
.chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.chip {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid #cbdcee;
  background: #fff;
  color: #3d4f66;
  font-size: 11.5px;
  font-weight: 800;
  transition: 0.16s;
}
/* .chip started as a filter <button> (testimonials.html), which is
   inline-block by default so height/padding "just work." The Site
   Reliability page reuses the same look for an <a> in-page-nav strip -
   an anchor defaults to plain inline, where a set height is ignored, so
   this is what actually centers the label inside the pill. */
a.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.chip[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.review-count {
  margin-left: auto;
  font-size: 11.5px;
  /* 4.5:1 on white - WCAG AA for small text. Was #6c7c91 (4.26). */
  color: #68788d;
  font-weight: 700;
}

.review-grid {
  columns: 3;
  column-gap: 18px;
  /* This grid is empty in the HTML - testimonials.js fetches the XML and
     builds the cards after the page has painted. Without a reserved height
     it starts at 0px, so everything below it (the "Ready to talk?" CTA
     band, which IS on screen at first paint on a phone) sat near the top
     of the page and then got shoved ~3500px down the moment the reviews
     rendered. That one reflow was most of a 0.4 CLS score.

     A viewport height rather than a pixel count on purpose: the real
     height depends on how many reviews are in the XML and how they
     column-wrap, so any fixed number would be wrong the next time a review
     is added. 100vh is enough to push the CTA band below the fold, which
     is all that's needed - the grid growing past this point happens
     off-screen and costs nothing. */
  min-height: 100vh;
}
.review {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  padding: 22px;
  margin-bottom: 18px;
  transition: 0.18s;
}
.review:hover {
  box-shadow: 0 12px 30px rgba(7, 28, 54, 0.09);
  transform: translateY(-2px);
  border-color: #c3dcf6;
}
.stars {
  display: flex;
  gap: 2px;
  margin-bottom: 11px;
}
.stars svg {
  width: 15px;
  height: 15px;
  fill: #f3a825;
}
.stars svg.off {
  fill: #dde5ee;
}
.review blockquote {
  margin: 0 0 15px;
  font-size: 13.5px;
  line-height: 1.66;
  color: #3d4d63;
}
/* Hangs the opening quote on the first paragraph. Putting it on the
   blockquote itself drops it onto its own line, since the children
   are block-level <p> elements. */
.review blockquote p:first-child::before {
  content: "\201C";
  color: #a9cdf3;
  font-size: 40px;
  line-height: 0;
  vertical-align: -14px;
  margin-right: 3px;
  font-family: Georgia, serif;
}
.review-photo {
  width: 100%;
  border-radius: 11px;
  margin-bottom: 14px;
  display: block;
  border: 1px solid var(--line);
  background: #eef4fb;
}
.review-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid #cfe1f5;
  background: linear-gradient(145deg, #084b9f, #0b65dd);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
}
.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-who strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}
.review-who span {
  display: block;
  font-size: 11px;
  /* 4.5:1 on white - WCAG AA for small text. Was #6d7d92 (4.20). */
  color: #68788d;
  margin-top: 2px;
}
.ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #14713f;
  background: #e4f7ec;
  border: 1px solid #b9e6cd;
  border-radius: 999px;
  padding: 4px 9px;
}
/* "via Google" on a review republished from another platform. Same pill
   shape as .ref-badge but deliberately neutral in colour - it is an
   attribution, not an endorsement, and it should not compete with the
   green Reference badge that means something quite different.
   margin-left is 0 because .ref-badge already claims the auto margin;
   when both appear they sit together at the right of the row. */
.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a5b6d;
  background: #f1f5f9;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  padding: 4px 9px;
}
/* Only the first badge in the row gets pushed right; a second one follows
   it instead of fighting for the same auto margin. */
.review-foot .src-badge:first-of-type:not(:first-child) {
  margin-left: 6px;
}
.review-foot .src-badge:first-child {
  margin-left: auto;
}

.ref-contact {
  margin-top: 13px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  display: grid;
  gap: 5px;
}
.ref-contact a,
.ref-contact span {
  font-size: 11.5px;
  color: #41648d;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.ref-contact a:hover {
  color: var(--blue);
}
.ref-contact svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.review-skeleton {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(100deg, #f4f8fd 30%, #eaf2fb 50%, #f4f8fd 70%);
  background-size: 300% 100%;
  animation: shimmer 1.3s linear infinite;
  height: 190px;
  margin-bottom: 18px;
}
@keyframes shimmer {
  to {
    background-position: -300% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .review-skeleton {
    animation: none;
  }
  .stage .layer {
    transition: none;
  }
}

@media (max-width: 980px) {
  .review-grid {
    columns: 2;
  }

  /* One scrolling row of chips instead of the three-to-five wrapped rows
     this became below ~1000px. Two reasons: it reclaims up to ~180px of
     screen before the first review, and it makes the toolbar a FIXED
     height, which is what lets the reservation below actually hold. While
     the chips wrapped, the height depended on how many services were in the
     XML (220px at 390px wide, 120px at 640px, 78px at 980px), so no
     reserved value could stay correct as reviews were added. */
  .review-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    /* One 34px chip row + 8px gap + the count line. Fixed, because the row
       no longer wraps - adding services makes the strip longer, not taller.
       This is what testimonials.js fills in after the XML loads, so it has
       to be reserved up front or everything below it jumps. */
    min-height: 68px;
  }
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Chips cut off mid-shape at the edge are the scroll affordance; a
       scrollbar under them just looks like a rendering fault on a phone.
       Same three-property set .thumbs uses - the standard property plus the
       WebKit and old-Edge equivalents, because no single one covers every
       engine. Editors flag scrollbar-width as unsupported in Safari; the
       ::-webkit-scrollbar rule below is what covers Safari. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Lets the last chip clear the right edge instead of butting against it. */
    padding-right: 2px;
  }
  .chip-row::-webkit-scrollbar {
    display: none;
  }
  .review-count {
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  .review-grid {
    columns: 1;
  }
  .review-count {
    margin-left: 0;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Shared CTA band (bottom of sub-pages)
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(110deg, #061a32, #0a4a90);
  color: #fff;
  padding: 46px 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.cta-inner h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 7px;
}
.cta-inner p {
  font-size: 13px;
  color: #bed4ea;
  margin: 0;
  max-width: 520px;
}
.cta-actions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
}
.cta-actions .btn.secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.cta-actions .btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* ==========================================================================
   v9 - RESPONSIVE LAYER
   --------------------------------------------------------------------------
   The mockup was drawn for a desktop canvas: lots of 10-12px type and a nav
   that only collapsed at 820px. Roughly half this site's traffic is phones,
   so everything below re-tunes type scale, tap targets and layout for small
   screens without disturbing the approved desktop design.

   Blocks are ordered WIDEST FIRST. Several of them override earlier
   !important rules left over from the mockup's v6/v7 revisions, so ordering
   is what makes the narrow overrides win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global safety: nothing should ever cause a sideways scroll.
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
}
img,
svg,
video {
  max-width: 100%;
}
/* Long unbroken strings (emails, URLs) must wrap rather than push the page. */
footer a,
.ref-contact a,
.slide-meta span,
.data-note code,
.review-who span {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   <= 1040px  Small desktop / landscape tablet
   ========================================================================== */
@media (max-width: 1040px) {
  /* Four trust items across gets too tight here - go 2x2 early. */
  .trustbar {
    grid-template-columns: 1fr 1fr;
  }
  .trust-item:nth-child(2n) {
    border-right: 0;
  }
  .trust-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .trust-item {
    padding: 15px 18px;
  }

  /* Crew and value cards: three across is cramped below this width. */
  .people[data-team],
  .value-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   <= 940px  Collapse the navigation
   Seven links plus a button no longer fit comfortably, so the hamburger
   starts here rather than at 820px.
   ========================================================================== */
@media (max-width: 940px) {
  html {
    scroll-padding-top: 104px;
  }
  .nav {
    height: 92px;
  }
  .brand img {
    height: 80px;
  }
  .nav-links {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 100px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .menu-open .nav-links {
    display: flex;
  }
  .nav-links > a:not(.btn) {
    padding: 14px 10px;
    font-size: 15px;
    border-radius: 9px;
  }
  .nav-links > a:not(.btn):hover {
    background: var(--soft-blue);
  }
  .nav-links > a:not(.btn)::after {
    display: none;
  }
  .nav-links > a.active {
    color: var(--blue);
    background: var(--soft-blue);
  }
  .menu-toggle {
    display: block;
    width: 46px;
    height: 46px;
    font-size: 24px;
  }
  .nav-contact-wrap {
    width: 100%;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
  }
  .nav-contact-wrap .btn {
    width: 100%;
    height: 48px;
  }
  .header-license {
    text-align: center;
    font-size: 12px;
  }

  /* Form fields: 16px stops iOS Safari zooming the page on focus. */
  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    font-size: 16px;
    padding: 13px 14px;
    border-radius: 8px;
  }
  .form-grid textarea {
    min-height: 108px;
  }
  .form-grid button {
    height: 50px;
  }
}

/* ==========================================================================
   <= 820px  Tablet portrait and below - the mockup's own breakpoint.
   Mostly type-scale repair: the desktop sizes are unreadable on a phone.
   ========================================================================== */
@media (max-width: 820px) {
  .brand img {
    height: 68px;
  }
  .nav {
    height: 86px;
  }
  .nav-links {
    top: 94px;
  }

  /* Top bar back onto a single row - the stacked version burned ~100px of
     the most valuable space on the page. */
  .topbar-tag {
    display: none;
  }
  .topbar-inner {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 7px 0;
    /* Reserves the height the bar ends up at once site.js fills in the
       phone/email links and social buttons - see the note on the base
       .topbar-inner rule for why this is per-breakpoint. */
    min-height: 42px;
  }
  .topbar-right {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .topbar-contact {
    flex-direction: row;
    gap: 14px;
    font-size: 13px;
  }

  /* Hero */
  .hero h1 {
    font-size: clamp(34px, 8.4vw, 46px);
  }
  .hero .lead {
    font-size: 15px;
    line-height: 1.62;
  }
  .micro {
    font-size: 13px;
  }
  .hero-media {
    height: 320px;
  }

  /* Section headings */
  .section-head p {
    font-size: 14.5px;
  }

  /* Trust bar */
  .trust-item strong {
    font-size: 14.5px;
  }
  .trust-item span {
    font-size: 12.5px;
    margin-top: 3px;
  }

  /* Services */
  .service-card h3 {
    font-size: 16px;
  }
  .service-card p {
    font-size: 12.5px;
  }
  .reno-strip strong {
    font-size: 15px;
  }
  .reno-strip span {
    font-size: 13px;
  }

  /* Projects teaser */
  .project-copy h2 {
    font-size: 30px;
  }
  .project-copy p {
    font-size: 14px;
  }

  /* Investor card */
  .investor-left h2 {
    font-size: 26px;
  }
  .investor-left p {
    font-size: 14px;
  }
  .check {
    font-size: 14px;
  }
  .check b {
    width: 23px;
    height: 23px;
    font-size: 12px;
  }

  /* Crew */
  .person .phone {
    font-size: 13.5px;
  }
  .person p {
    font-size: 13px;
    line-height: 1.5;
  }
  .bio-btn {
    font-size: 13px;
    padding: 10px 0 4px;
  }
  .bio-extra {
    font-size: 13px !important;
    line-height: 1.55;
  }
  .people[data-team] .person p {
    font-size: 13.5px !important;
  }
  /* Undo the two-across crew grid set in the 1040px block above. */
  .people,
  .people[data-team] {
    grid-template-columns: 1fr;
  }

  /* Info strip */
  .info-cell strong {
    font-size: 14px;
  }
  .info-cell span {
    font-size: 12.5px;
    margin-top: 3px;
  }

  /* Service areas + quote */
  .local-card h2,
  .quote-card h2 {
    font-size: 24px;
  }
  .local-card p,
  .quote-card p {
    font-size: 14px;
  }
  .areas {
    font-size: 14px;
    gap: 9px 20px;
  }
  #kc-map {
    height: 220px;
  }
  .form-status {
    font-size: 12px !important;
  }

  /* Sub-page banner */
  .page-hero {
    padding: 38px 0 40px;
  }
  .page-hero p {
    font-size: 14.5px;
  }
  .crumbs {
    font-size: 13px;
    margin-top: 14px;
  }

  /* About page */
  .story {
    padding: 42px 0 24px;
  }
  .story-copy p {
    font-size: 15px;
  }
  .pull-quote p {
    font-size: 16px !important;
  }
  .timeline {
    padding: 16px 0 42px;
  }
  .tl-item p {
    font-size: 13px;
  }
  .values {
    padding: 42px 0;
  }
  .value-card p {
    font-size: 13.5px;
  }
  .stat span {
    font-size: 12.5px;
  }
  #crew {
    padding: 42px 0 46px;
  }

  /* Carousel */
  .slide-info h2 {
    font-size: 24px;
  }
  .slide-body {
    font-size: 14px;
  }
  .slide-meta span {
    font-size: 11.5px;
  }
  .hint {
    font-size: 12px;
  }

  /* Testimonials */
  .review blockquote {
    font-size: 14px;
  }
  .chip {
    height: 40px;
    font-size: 13px;
    padding: 0 16px;
  }
  .review-count {
    font-size: 13px;
  }
  .review-who strong {
    font-size: 14px;
  }
  .review-who span {
    font-size: 12.5px;
  }
  .ref-contact a,
  .ref-contact span {
    font-size: 13px;
  }

  /* CTA band */
  .cta-band {
    padding: 36px 0;
  }
  .cta-inner p {
    font-size: 14px;
  }

  /* Footer - 9.8px links were the worst offender on the whole site. */
  footer {
    padding: 34px 0 20px;
  }
  .footer-grid {
    gap: 26px 22px;
  }
  footer h2 {
    font-size: 14px;
    margin-bottom: 2px;
  }
  footer a,
  footer p {
    font-size: 13.5px;
    line-height: 1.5;
  }
  footer a {
    display: block;
    padding: 8px 0; /* gives each link a real tap target */
  }
  .footer-brand p {
    font-size: 13px;
    margin-top: 8px;
  }
  .footer-brand img {
    width: 185px;
  }
  .footer-tag {
    font-size: 17px !important;
  }
  .copyright {
    font-size: 12px;
    padding-top: 16px;
  }
}

/* ==========================================================================
   <= 640px  Phones
   ========================================================================== */
@media (max-width: 640px) {
  /* Below 640 the email address no longer fits beside everything else -
     keep the envelope icon, drop the text. */
  .tb-mail span {
    display: none;
  }
  .topbar-inner {
    gap: 10px 14px;
    /* .social-bar a grows to 32px here, so the filled bar is taller. */
    min-height: 46px;
  }
  .topbar-right,
  .topbar-contact {
    gap: 12px;
  }
  .social-bar a {
    width: 32px;
    height: 32px;
  }
  .social-bar svg {
    width: 15px;
    height: 15px;
  }

  /* --- Services: six 215px-tall stacked cards was ~1500px of scrolling.
         A compact icon-beside-text row reads far better on a phone. --- */
  .service-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .service-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    text-align: left;
    min-height: 0;
    padding: 14px 16px;
  }
  .service-icon {
    width: 46px;
    height: 46px;
    margin: 0;
    /* The icon must span both rows, otherwise auto-placement drops the
       description into the 46px icon column and it wraps one word per line. */
    grid-row: span 2;
    align-self: center;
  }
  .service-icon svg {
    width: 25px;
    height: 25px;
  }
  .service-card h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
    line-height: 1.2;
  }
  .service-card h3 br {
    display: none; /* the desktop line breaks fight the narrow column */
  }
  .service-card p {
    font-size: 12.5px;
    line-height: 1.45;
    margin: 0;
  }
  #services {
    padding-top: 40px !important;
    padding-bottom: 18px;
  }

  /* Renovation strip: bring the description back, stacked. */
  .reno-strip {
    flex-wrap: wrap;
    padding: 13px 15px;
    row-gap: 4px;
  }
  .reno-strip strong {
    flex: 1; /* keeps the arrow on the title row at 320px */
  }
  .reno-strip span {
    display: block;
    flex: 1 0 100%;
    margin-left: 0;
    order: 3;
  }
  .reno-strip a {
    font-size: 26px;
    padding: 0 4px;
  }

  /* Value cards: two across is too narrow to read on a phone. */
  .value-grid {
    grid-template-columns: 1fr;
  }

  /* Sections tighten up */
  section {
    padding: 42px 0;
  }
  .section-title {
    font-size: clamp(25px, 7vw, 32px);
  }
  .page-hero h1 {
    font-size: clamp(28px, 7.6vw, 38px);
  }
  .page-hero {
    padding: 30px 0 34px;
  }

  /* Carousel */
  #gallery {
    padding: 30px 0 44px;
  }
  .stage {
    min-height: 220px;
  }
  .slide-info {
    padding: 20px 17px 18px;
  }
  .thumbs {
    padding: 16px 2px 6px;
  }

  /* Testimonials */
  #reviews {
    padding: 30px 0 44px;
  }
  .review {
    padding: 19px 17px;
  }

  /* About */
  .story-copy h2 {
    font-size: 23px;
  }
  .story-aside {
    padding: 20px 18px;
  }

  /* Footer socials get full-size tap targets. */
  .socials a {
    width: 40px;
    height: 40px;
  }
  .socials svg {
    width: 17px;
    height: 17px;
  }
}

/* ==========================================================================
   <= 480px  Small phones
   ========================================================================== */
@media (max-width: 480px) {
  .container {
    width: min(var(--max), calc(100% - 24px));
  }
  .hero {
    padding-top: 18px;
  }
  .hero-media {
    height: 260px;
    margin: 0 -12px;
  }
  .trustbar {
    grid-template-columns: 1fr;
  }
  .trust-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    min-height: 0;
    padding: 13px 16px;
  }
  .trust-item:last-child {
    border-bottom: 0;
  }
  .info-strip {
    grid-template-columns: 1fr;
  }
  .info-cell {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    min-height: 0;
    padding: 14px 16px;
  }
  .info-cell:last-child {
    border-bottom: 0;
  }
  .project-shell {
    padding: 10px;
  }
  .project-media {
    min-height: 210px;
  }
  .investor-card {
    padding: 20px 18px;
  }
  .local-card,
  .quote-card {
    padding: 20px 18px;
    min-height: 0;
  }
  .slide-info h2 {
    font-size: 22px;
  }
  .stage-controls {
    gap: 8px;
  }
  .view-toggle {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    height: 42px;
  }
  .cta-actions {
    width: 100%;
  }
  .cta-actions .btn {
    width: 100%;
  }
  .thumb {
    width: 104px;
  }
}

/* ==========================================================================
   <= 400px  Narrow phones (iPhone SE and similar)
   ========================================================================== */
@media (max-width: 400px) {
  .tb-mail {
    display: none; /* phone + socials only; email lives in the footer */
  }
  .topbar-contact {
    font-size: 12.5px;
  }
  .social-bar {
    gap: 6px;
  }
  .social-bar a {
    width: 30px;
    height: 30px;
  }
  .topbar-inner {
    /* Social buttons drop to 30px on the narrowest phones. */
    min-height: 44px;
  }
  .hero h1 {
    font-size: 32px;
    letter-spacing: -0.04em;
  }
  .section-title {
    font-size: 24px;
  }
  .page-hero h1 {
    font-size: 27px;
  }
  .service-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 13px;
  }
  .service-icon {
    width: 40px;
    height: 40px;
  }
  .service-icon svg {
    width: 22px;
    height: 22px;
  }
  .person {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 15px 16px !important;
  }
  .avatar {
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
  }
  .people[data-team] .person {
    padding: 20px 16px 18px !important;
  }
  .people[data-team] .avatar {
    width: 78px !important;
    height: 78px !important;
  }
  .slide-info h2 {
    font-size: 20px;
  }
  .stage {
    min-height: 190px;
  }
  .footer-brand img {
    width: 160px;
  }
}

/* --------------------------------------------------------------------------
   Mobile footer
   One long single column pushed the contact details miles down the page and
   left the brand block and a lone social button stranded. Below 620px the
   two short link lists sit side by side and the wide blocks span full width.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
    align-items: start;
  }

  /* Brand, contact and strapline are full width; the two link lists pair up. */
  .footer-grid > div:nth-child(1),
  .footer-grid > div:nth-child(4),
  .footer-grid > div:nth-child(5) {
    grid-column: 1 / -1;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .footer-brand img {
    width: 170px;
  }
  .footer-brand p {
    margin-top: 10px;
  }
  .socials {
    justify-content: center;
    margin-top: 12px;
  }

  footer h2 {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8fc0f0;
    margin-bottom: 6px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  footer a,
  footer p {
    font-size: 13px;
  }
  footer a {
    padding: 7px 0;
  }

  /* Contact block: give the phone numbers and email room to breathe. */
  .footer-grid > div:nth-child(4) {
    padding-top: 4px;
  }
  .footer-grid > div:nth-child(4) a {
    padding: 9px 0;
  }
  .footer-grid > div:nth-child(4) p {
    margin-top: 8px;
    color: #9fb3c9;
  }

  .footer-tag {
    text-align: center;
    font-size: 15px !important;
    line-height: 1.45 !important;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .copyright {
    margin-top: 14px;
  }
}

/* Very narrow: stacking beats cramming two columns into 300px. */
@media (max-width: 340px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Touch devices - make sure everything is comfortably tappable.
   Applies regardless of width, so it also covers touch laptops and tablets.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .btn {
    height: 50px;
  }
  .round-btn {
    width: 48px;
    height: 48px;
  }
  .menu-toggle {
    width: 48px;
    height: 48px;
  }
  .chip {
    height: 42px;
  }
  .socials a {
    width: 40px;
    height: 40px;
  }
  .bio-btn {
    min-height: 40px;
  }
  .person .phone,
  .person-contact a {
    display: inline-block;
    padding: 5px 0;
  }
  .thumb img {
    height: 82px;
  }
  /* The wipe grip is the primary control on the projects page. */
  .wipe-grip {
    width: 54px;
    height: 54px;
  }
  /* Hover lifts are meaningless on touch and cause sticky :hover states. */
  .service-card:hover,
  .person:hover,
  .tl-item:hover,
  .review:hover {
    transform: none;
  }
}

/* ==========================================================================
   Short landscape viewports (phone held sideways)
   ========================================================================== */
@media (max-height: 540px) and (orientation: landscape) {
  .hero-media {
    height: 240px;
  }
  .page-hero {
    padding: 24px 0 26px;
  }
  .nav-links {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .stage {
    min-height: 200px;
  }
  section {
    padding: 32px 0;
  }
}

/* ==========================================================================
   Very wide screens - keep the measure comfortable but let the shell breathe.
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --max: 1280px;
  }
  .hero-grid {
    min-height: 500px;
  }
  .hero-media {
    height: 500px;
  }
}

/* ==========================================================================
   Careers page
   --------------------------------------------------------------------------
   The application form is long on purpose - the brief wants it to take real
   effort, because that is what filters out people who are not seriously
   interested. Long forms are where people give up, so the styling does the
   opposite work: clear sections with headings, generous spacing, visible
   progress on the two written answers, and an obvious required/optional
   distinction. Effort should feel purposeful, not punishing.
   ========================================================================== */
.container.narrow {
  width: min(820px, calc(100% - 40px));
}
.section.alt {
  background: linear-gradient(180deg, #f6f9fe, #fff);
}

/* "What happens after you apply" */
.careers-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.careers-steps li {
  counter-increment: step;
  position: relative;
  padding: 18px 22px 18px 66px;
  background: #fff;
  border: 1px solid var(--line, #dbe4ef);
  border-radius: 14px;
}
.careers-steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 18px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue, #0b65dd);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
}
.careers-steps b {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}
.careers-steps span {
  font-size: 13.5px;
  color: #4f5f73;
  line-height: 1.6;
}

/* The form itself */
.careers-form {
  margin-top: 26px;
}
.form-block {
  border: 1px solid var(--line, #dbe4ef);
  border-radius: 16px;
  padding: 22px 24px 24px;
  margin: 0 0 18px;
  background: #fff;
  /* <fieldset> has an intrinsic minimum width of its own content and will
     refuse to shrink below it - a long-standing quirk that ordinary block
     elements do not share. On a 320px phone that pushes the form wider
     than the page and puts a horizontal scrollbar on the whole thing.
     min-width: 0 opts the fieldset into normal flex/block sizing. */
  min-width: 0;
}
.form-block legend {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-dark, #0853bd);
  padding: 0 10px;
  margin-left: -10px;
}
.block-hint {
  font-size: 13px;
  color: #5b6b80;
  line-height: 1.6;
  margin: 2px 0 18px;
}
.careers-form .form-row {
  display: grid;
  gap: 0 16px;
}
.careers-form .form-row.two {
  grid-template-columns: 1fr 1fr;
}
.careers-form .field {
  margin-bottom: 16px;
  min-width: 0;
}
.careers-form label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #26374d;
}
.careers-form .req {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a6100;
  background: #fff4d8;
  border-radius: 99px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}
.field-hint {
  font-size: 12.5px;
  color: #67788d;
  line-height: 1.55;
  margin: -2px 0 8px;
}
.careers-form input[type="text"],
.careers-form input[type="tel"],
.careers-form input[type="email"],
.careers-form input[type="number"],
.careers-form textarea {
  width: 100%;
  border: 1px solid #cbd9e8;
  border-radius: 10px;
  background: #fff;
  color: #203047;
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.careers-form textarea {
  line-height: 1.6;
  resize: vertical;
  min-height: 130px;
}
.careers-form input:focus,
.careers-form textarea:focus {
  border-color: var(--blue, #0b65dd);
  box-shadow: 0 0 0 3px rgba(11, 101, 221, 0.12);
}

/* Live character count on the two written answers. Turns "at least 120
   characters" from a rule you discover by being rejected into progress you
   can watch, which is the difference between effort and frustration. */
.counter {
  font-size: 11.5px;
  font-weight: 800;
  color: #6a7788;
  margin-top: 6px;
}
.counter.ok {
  color: #146848;
}

/* Photo picker */
.file-help {
  font-size: 12px;
  color: #67788d;
  margin-top: 7px;
}
.file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.file-list li {
  font-size: 12.5px;
  color: #26374d;
  background: #f4f8fd;
  border: 1px solid #e2ecf7;
  border-radius: 8px;
  padding: 8px 12px;
  overflow-wrap: break-word;
}
.careers-form input[type="file"] {
  width: 100%;
  font-size: 13px;
  padding: 12px;
  border: 1px dashed #9ebfe0;
  border-radius: 10px;
  background: #f8fbff;
}

/* Reference rows */
.ref-row {
  border: 1px solid #e6eef8;
  border-radius: 12px;
  padding: 16px 18px 4px;
  margin-bottom: 12px;
  background: #fbfdff;
}
.ref-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ref-row-head b {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 4.5:1 against the #fbfdff .ref-row panel this sits on - not white,
     which is why it needs to be a shade darker than the other hints. */
  color: #66778b;
}
.ref-remove {
  border: 0;
  background: none;
  color: #a3302f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.ref-remove:hover {
  background: #fff0f0;
}

/* Submit + result */
.careers-form .submit {
  width: 100%;
  justify-content: center;
  font-size: 16px;
  padding: 16px 22px;
}
.careers-form .form-status {
  font-size: 13.5px !important;
  margin: 0 0 14px !important;
  padding: 12px 14px;
  border-radius: 10px;
  min-height: 0;
}
.careers-form .form-status.bad {
  color: #a3302f !important;
  background: #fff0f0;
  border: 1px solid #f0c9c8;
}
.form-foot {
  font-size: 12.5px;
  color: #67788d;
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.6;
}
.apply-done {
  text-align: center;
  padding: 30px 20px;
}
.apply-tick {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: #e6f6ee;
  color: #146848;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 900;
}
.apply-done h3 {
  font-size: 22px;
  margin: 0 0 10px;
}
.apply-done p {
  font-size: 14.5px;
  color: #4f5f73;
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 20px;
}

@media (max-width: 640px) {
  .careers-form .form-row.two {
    grid-template-columns: 1fr;
  }
  .form-block {
    padding: 18px 16px 20px;
  }
  .careers-steps li {
    padding: 16px 18px 16px 60px;
  }
}

/* ==========================================================================
   FAQ (homepage)
   --------------------------------------------------------------------------
   <details>/<summary> rather than a JS accordion: it works before scripts
   load, it is keyboard accessible for free, and - the part that matters for
   search - the answer text is in the DOM whether or not the item is open, so
   it is fully crawlable and findable with the browser's own find-in-page.
   ========================================================================== */
.faq-list {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 22px;
  position: relative;
  transition: background 0.15s;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  background: #f7fafd;
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
/* The heading stays a real <h3> for document structure, but must not carry
   the block-level margins it would elsewhere or the row grows a gap. */
.faq-item summary h3 {
  display: inline;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.faq-item[open] summary {
  background: #f7fafd;
}
.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #4f5f73;
}
.faq-item p a {
  color: var(--blue);
  font-weight: 700;
}
@media (max-width: 640px) {
  .faq-item summary {
    padding: 16px 44px 16px 16px;
  }
  .faq-item summary h3 {
    font-size: 15px;
  }
  .faq-item p {
    padding: 0 16px 18px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item summary,
  .faq-item summary::after {
    transition: none;
  }
}