/* ==========================================================================
   sections.css — per-section layout. Components are never restyled here.
   ========================================================================== */

/* --- Header ---------------------------------------------------------------
   Dark band. Logo pinned left, nav pill centred, CTA pinned right.       */

.site-header {
  position: relative;
  z-index: 20;
  height: var(--h-navband);
  background: var(--c-ink);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--canvas);
  height: calc(var(--h-navpill) + (var(--navpill-top) * 2));
  margin-inline: auto;
  padding-inline: 36px;
}

.brand {
  position: absolute;
  left: 36px;
  top: 15px;
  display: block;
}

.brand__img {
  width: 128px;
  height: 85.33px;
  object-fit: contain;
}

.site-header__cta {
  position: absolute;
  right: 36px;
}

/* --- Hero -----------------------------------------------------------------
   Rounded photo card pulled up under the header band.                    */

.hero {
  position: relative;
  padding-inline: var(--gutter);
  padding-bottom: var(--s-13);
  background: var(--c-ink);
}

.hero__card {
  position: relative;
  width: 100%;
  max-width: var(--card-max);
  min-height: var(--h-hero-card);
  margin-inline: auto;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--grad-hero-scrim);
  z-index: -1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 543px;
  align-items: end;
  gap: var(--s-10);
  min-height: var(--h-hero-card);
  padding: var(--s-13) var(--pad-card) var(--s-9);
}

.hero__content {
  align-self: end;
  max-width: 900px;
}

.hero__title {
  max-width: 818px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--c-white);
}

.hero__sub {
  max-width: 894px;
  margin-top: var(--s-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-white);
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

.hero__proof { margin-top: var(--s-9); }

/* --- Quote card -----------------------------------------------------------
   White panel with a teal sliver showing beneath (Figma stacks two rects,
   the teal one 5.3px taller).                                            */

.quote-card {
  position: relative;
  align-self: center;
  width: 543px;
  max-width: 100%;
  padding: 41px 23px 32px;
  background: var(--c-white);
  border-radius: var(--r-panel);
  box-shadow: 0 5.3px 0 0 var(--c-accent);
}

.quote-card__title {
  margin-bottom: var(--s-8);
  font-size: var(--fs-card-head);
  line-height: var(--lh-card-head);
  font-weight: var(--fw-sem);
  color: var(--c-black);
  text-align: center;
}

.quote-card__fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.quote-card__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--s-8);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1280px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: var(--s-8);
  }
  .quote-card { width: 460px; }
}

@media (max-width: 1024px) {
  .nav,
  .site-header__cta { display: none; }

  .nav-toggle { display: inline-flex; }

  .site-header__inner { justify-content: flex-end; }

  .site-header__inner .nav-toggle {
    position: absolute;
    right: 20px;
  }

  .brand { left: 20px; }

  .brand__img {
    width: 96px;
    height: 64px;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-11) var(--pad-card) var(--s-10);
    gap: var(--s-10);
  }

  .quote-card {
    width: 100%;
    max-width: 543px;
    align-self: start;
  }
}

@media (max-width: 767px) {
  .hero { padding-bottom: var(--s-10); }

  .hero__grid {
    padding: var(--s-9) var(--pad-card) var(--s-9);
    gap: var(--s-9);
  }

  .hero__actions {
    gap: var(--s-3);
    margin-top: var(--s-7);
  }

  .hero__actions .btn { width: 100%; justify-content: space-between; }

  .hero__proof { margin-top: var(--s-7); }

  .rating {
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .rating__avatar {
    width: 46px;
    height: 46px;
  }

  .rating__avatar + .rating__avatar { margin-left: -14px; }

  .rating__star {
    width: 26px;
    height: 26px;
  }

  .quote-card { padding: var(--s-7) var(--s-5) var(--s-6); }
}

/* --- Interior scaffolding --------------------------------------------------
   Minimal styling for templates that exist but have no Figma frame yet.
   These get replaced as each section is built.                            */

.u-container > article,
.archive-services,
.service-hero,
.service-body,
.service-children,
.service-pillars,
.service-process,
.service-faq,
.service-siblings,
.service-cta {
  padding-block: var(--s-11);
}

.service-hero__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.service-hero__sub {
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  max-width: 70ch;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a:hover { color: var(--c-accent-bright); }

.archive-services__grid,
.service-children__grid,
.service-pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-7);
  margin-top: var(--s-9);
}

.card-service {
  display: block;
  padding: var(--s-6);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--s-6);
  transition: transform var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out);
}

.card-service:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
}

.card-service__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--s-4);
  margin-bottom: var(--s-5);
}

.card-service__title {
  font-size: 22px;
  margin-bottom: var(--s-3);
}

.faq {
  padding: var(--s-5) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.faq__q {
  cursor: pointer;
  font-family: var(--ff-head);
  font-weight: var(--fw-sem);
  font-size: 20px;
}

.faq__a { padding-top: var(--s-4); }

/* Form status message */
.quote-card__notice {
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: rgba(0, 250, 203, 0.12);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--s-1);
  color: var(--c-ink);
  font-size: 14px;
}

/* Footer placeholder until the designed footer is built */
.site-footer {
  padding-block: var(--s-9);
  background: var(--c-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__legal {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==================================================================
 * Home sections — built from the Figma desktop frame 1026:2086.
 * Appended after the hero rules; nothing above this line is changed.
 * ================================================================== */

/* --- Shared section furniture ------------------------------------ */

.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0 0 var(--s-4);
	font-family: var(--ff-body);
	font-size: 13px;
	font-weight: var(--fw-med);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink);
}

.eyebrow__rule {
	display: block;
	width: 50px;
	height: 2px;
	border-radius: 2px;
	background: var(--c-ink);
}

.eyebrow--light,
.eyebrow--light .eyebrow__rule { color: var(--c-white); }
.eyebrow--light .eyebrow__rule { background: var(--c-white); }

.sec-title {
	margin: 0;
	font-family: var(--ff-head);
	font-size: clamp(30px, 3.3vw, var(--fs-h2));
	line-height: 1.18;
	font-weight: var(--fw-bold);
	letter-spacing: -0.01em;
	color: var(--c-ink);
	text-wrap: balance;
}

.sec-title--light { color: var(--c-white); }

.sec-title .u-accent,
.u-accent { color: var(--c-kit-primary); }

.sec-title--light .u-accent { color: var(--c-accent-bright); }

.sec-sub {
	margin: var(--s-4) 0 0;
	max-width: 56ch;
	font-family: var(--ff-body);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.6;
	color: #3d4c52;
}

.sec-sub--light { color: rgba(255, 255, 255, 0.78); }

.sec-head { margin-bottom: var(--s-11); }
.sec-head--wide .sec-sub { max-width: 46ch; }

.sec-head--split {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-9);
	flex-wrap: wrap;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-8);
}

.actions--center { justify-content: center; }

.btn--solid { background: var(--c-kit-primary); }
.btn--solid:hover { box-shadow: 0 8px 24px rgba(0, 133, 113, 0.28); }

.btn--light {
	background: var(--c-white);
	color: var(--c-ink);
}

.btn--light .btn__icon { background: var(--c-kit-primary); }
.btn--light .btn__icon img { filter: brightness(0) invert(1); }

.btn--sm {
	padding: 5px 5px 5px 16px;
	font-size: 13px;
	gap: 8px;
}

.btn--sm .btn__icon { width: 24px; height: 24px; }

.btn--on-dark {
	color: var(--c-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--s-5);
	font-family: var(--ff-head);
	font-size: 15px;
	font-weight: var(--fw-sem);
	color: var(--c-kit-primary);
	text-decoration: none;
}

.link-arrow:hover { text-decoration: underline; }

.media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-chip);
	aspect-ratio: var(--media-ratio, 4 / 3);
	background: #e6ecec;
}

.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.media__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 100% at 20% 0%, rgba(8, 200, 182, 0.22), transparent 60%),
		linear-gradient(150deg, #0d3b45 0%, var(--c-ink) 100%);
}

.media__placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	opacity: 0.5;
}

/* --- Trust bar --------------------------------------------------- */

.trust {
	background: var(--c-white);
	padding: var(--s-7) 0;
	border-bottom: 1px solid var(--c-rule);
}

.trust__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 150px;
	padding-right: var(--s-6);
	border-right: 1px solid var(--c-rule);
}

.trust__item:last-child { border-right: 0; padding-right: 0; }

.trust__logo { width: 28px; height: 28px; object-fit: contain; flex: none; }

.trust__text { display: grid; gap: 1px; line-height: 1.25; }

.trust__name {
	font-family: var(--ff-head);
	font-size: 13px;
	font-weight: var(--fw-sem);
	color: var(--c-ink);
}

.trust__stars { font-size: 10px; color: var(--c-star); letter-spacing: 1px; }

.trust__score { font-size: 9px; color: var(--c-muted); }

/* --- About ------------------------------------------------------- */

.about {
	background: var(--c-surface);
	padding: clamp(56px, 7vw, var(--s-13)) 0;
}

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 92px);
	align-items: center;
}

.about__media { position: relative; }

.about__figure { border-radius: var(--r-panel); }

.about__dots {
	position: absolute;
	left: 8%;
	bottom: -34px;
	width: 46%;
	height: 60px;
	background-image: radial-gradient(var(--c-accent) 3px, transparent 3px);
	background-size: 24px 20px;
	opacity: 0.85;
	pointer-events: none;
}

.about__copy { margin-top: var(--s-6); display: grid; gap: var(--s-4); }

.about__copy p {
	margin: 0;
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.65;
	color: #3d4c52;
}

.checklist {
	margin: var(--s-7) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--s-3);
}

.checklist__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ff-head);
	font-size: clamp(13px, 0.95vw, 15px);
	font-weight: var(--fw-sem);
	color: var(--c-ink);
}

.checklist__mark {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--c-kit-primary);
	position: relative;
}

.checklist__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid var(--c-kit-primary);
	border-right: 1.5px solid var(--c-kit-primary);
	transform: rotate(45deg) translate(-1px, 1px);
}

/* --- Services ---------------------------------------------------- */

.services {
	background: var(--c-white);
	padding: clamp(56px, 7vw, var(--s-13)) 0;
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 26px);
}

.svc-card {
	display: flex;
	flex-direction: column;
	background: var(--c-kit-primary);
	border-radius: var(--r-chip);
	padding: 10px;
	color: var(--c-white);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.svc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 83, 67, 0.28);
}

.svc-card__media { border-radius: 14px; }

.svc-card__body {
	padding: var(--s-5) var(--s-4) var(--s-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.svc-card__title {
	margin: 0 0 10px;
	font-family: var(--ff-head);
	font-size: clamp(17px, 1.25vw, 20px);
	line-height: 1.25;
	font-weight: var(--fw-bold);
	color: var(--c-white);
}

.svc-card__text {
	margin: 0 0 var(--s-6);
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	flex: 1;
}

.svc-card .btn { align-self: flex-start; }

/* --- Property types ---------------------------------------------- */

.property {
	background: var(--c-ink);
	padding: clamp(56px, 7vw, var(--s-13)) 0;
}

.property__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 30px);
	align-items: start;
}

.prop-card {
	position: relative;
	background: var(--c-white);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.prop-card--featured { box-shadow: 0 12px 0 -4px var(--c-kit-primary); }

.prop-card__media { border-radius: 0; }

.prop-card__icon {
	position: absolute;
	top: calc(56.25% - 26px);
	left: var(--s-6);
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--c-kit-primary);
	box-shadow: 0 6px 18px rgba(0, 35, 49, 0.25);
}

.prop-card__icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); }

.prop-card__body { padding: var(--s-8) var(--s-6) var(--s-7); }

.prop-card__title {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-head);
	font-size: clamp(17px, 1.3vw, 21px);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.prop-card__body p {
	margin: 0 0 var(--s-3);
	font-size: 13.5px;
	line-height: 1.6;
	color: #3d4c52;
}

/* --- Carousel ---------------------------------------------------- */

.carousel { position: relative; }

.carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--s-6)) / 4);
	gap: var(--s-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--s-3);
	scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

.carousel__track > * { scroll-snap-align: start; }

.carousel__nav {
	display: flex;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-8);
}

.carousel__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--c-rule);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: 17px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.carousel__btn:hover { border-color: var(--c-kit-primary); color: var(--c-kit-primary); }

.carousel__btn--on {
	background: var(--c-kit-primary);
	border-color: var(--c-kit-primary);
	color: var(--c-white);
}

.carousel__btn--on:hover { background: var(--c-kit-primary-dark); color: var(--c-white); }

.carousel__btn[disabled] { opacity: 0.35; cursor: default; }

/* --- Industries -------------------------------------------------- */

.industries {
	background: var(--c-white);
	padding: clamp(56px, 7vw, var(--s-13)) 0;
}

.ind-card {
	position: relative;
	border-radius: var(--r-chip);
	overflow: hidden;
	isolation: isolate;
	min-height: 420px;
	display: flex;
}

.ind-card__media {
	position: absolute;
	inset: 0;
	border-radius: 0;
	aspect-ratio: auto;
}

.ind-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 20, 28, 0.88) 0%, rgba(0, 20, 28, 0.15) 46%, transparent 70%);
}

.ind-card__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: var(--s-6);
	width: 100%;
	color: var(--c-white);
}

.ind-card__title {
	margin: 0;
	font-family: var(--ff-head);
	font-size: clamp(17px, 1.25vw, 20px);
	font-weight: var(--fw-bold);
}

.ind-card__text {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 300ms ease, opacity 260ms ease;
}

.ind-card:hover .ind-card__text,
.ind-card:focus-within .ind-card__text,
.ind-card:first-child .ind-card__text {
	max-height: 140px;
	opacity: 1;
}

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

.cta-van {
	position: relative;
	background: var(--c-ink);
	margin: clamp(40px, 5vw, 90px) 0;
	padding: clamp(48px, 6vw, 104px) 0;
	overflow: hidden;
}

.cta-van::before,
.cta-van::after {
	content: "";
	position: absolute;
	left: -5%;
	width: 110%;
	height: 34px;
	background: var(--c-kit-primary);
	pointer-events: none;
}

.cta-van::before { top: -18px; transform: rotate(-1.6deg); }
.cta-van::after { bottom: -18px; transform: rotate(-1.6deg); }

.cta-van__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
}

.cta-van__figure { background: transparent; }
.cta-van__figure img { object-fit: contain; }

/* --- Service areas ----------------------------------------------- */

.areas {
	background: var(--c-surface);
	padding: clamp(56px, 7vw, var(--s-13)) 0;
}

.areas__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: start;
}

.areas__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5) var(--s-6);
	margin: var(--s-9) 0 0;
	padding: 0;
	list-style: none;
}

.areas__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ff-head);
	font-size: clamp(15px, 1.15vw, 19px);
	font-weight: var(--fw-med);
	color: var(--c-ink);
}

.areas__item a { color: inherit; text-decoration: none; }
.areas__item a:hover { color: var(--c-kit-primary); }

.areas__pin {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--c-kit-primary);
	position: relative;
}

.areas__pin::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-white);
}

.areas__note {
	margin: 0 0 var(--s-7);
	text-align: right;
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.6;
	color: #3d4c52;
}

.areas__map { border-radius: 12px; }

/* --- Expertise --------------------------------------------------- */

.expertise {
	background: var(--c-ink);
	padding: clamp(56px, 6vw, 104px) 0;
}

.expertise__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

.expertise__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.expertise__item {
	display: flex;
	gap: var(--s-4);
	padding: var(--s-6) var(--s-7);
}

.expertise__item:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.18); }
.expertise__item:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

.expertise__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--c-white);
	display: grid;
	place-items: center;
}

.expertise__icon img { width: 22px; height: 22px; }

.expertise__title {
	margin: 0 0 4px;
	font-family: var(--ff-head);
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: var(--fw-bold);
	color: var(--c-white);
}

.expertise__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

/* --- Testimonials ------------------------------------------------ */

.reviews {
	background: var(--c-white);
	padding: clamp(56px, 7vw, var(--s-13)) 0;
}

.google-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 10px;
	border-radius: var(--r-pill);
	background: var(--c-kit-primary);
	color: var(--c-white);
	flex: none;
}

.google-pill__logo {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--c-white);
	padding: 5px;
}

.google-pill__body { display: grid; gap: 1px; }
.google-pill__stars { color: var(--c-star); font-size: 13px; letter-spacing: 2px; }
.google-pill__score { font-size: 10px; color: rgba(255, 255, 255, 0.92); }

.review {
	position: relative;
	margin-top: 26px;
	padding: var(--s-8) var(--s-6) var(--s-6);
	background: var(--c-surface);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
}

.review__mark {
	position: absolute;
	top: -26px;
	left: var(--s-5);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--c-kit-primary);
	color: var(--c-white);
	font-family: var(--ff-head);
	font-size: 40px;
	line-height: 1;
	display: grid;
	place-items: center;
	padding-top: 18px;
}

.review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--s-4);
}

.review__stars { color: var(--c-star); font-size: 13px; letter-spacing: 2px; }
.review__source { width: 18px; height: 18px; }

.review__text {
	margin: 0 0 var(--s-6);
	font-size: 13.5px;
	line-height: 1.62;
	color: #3d4c52;
	flex: 1;
}

.review__by {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-rule);
}

.review__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.review__avatar--empty { background: linear-gradient(150deg, #0d3b45, var(--c-ink)); display: block; }

.review__name {
	display: block;
	font-family: var(--ff-head);
	font-size: 14px;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.review__role { display: block; font-size: 11.5px; color: var(--c-muted); }

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

.faqs {
	background: var(--c-surface);
	padding: clamp(56px, 7vw, var(--s-13)) 0;
}

.faqs__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 4vw, 76px);
	align-items: start;
}

.contact-rows {
	margin: var(--s-8) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--s-4);
}

.contact-rows__item {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	font-size: clamp(14px, 1vw, 16px);
	color: var(--c-ink);
}

.contact-rows__item a { color: inherit; text-decoration: none; }
.contact-rows__item a:hover { color: var(--c-kit-primary); }

.contact-rows__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--c-kit-primary);
	display: grid;
	place-items: center;
}

.contact-rows__icon img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

.contact-rows--light,
.contact-rows--light .contact-rows__item { color: var(--c-white); }

.ask-card {
	margin-top: var(--s-11);
	padding: var(--s-7);
	background: var(--c-white);
	border: 1px solid var(--c-rule);
	border-radius: 14px;
}

.ask-card__title {
	margin: 0 0 10px;
	font-family: var(--ff-head);
	font-size: clamp(16px, 1.2vw, 19px);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.ask-card__text {
	margin: 0 0 var(--s-6);
	font-size: 13.5px;
	line-height: 1.6;
	color: #3d4c52;
}

.faqs__list { display: grid; gap: var(--s-5); }

.faq {
	background: var(--c-white);
	border: 1px solid var(--c-rule);
	border-radius: 12px;
	overflow: hidden;
}

.faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	padding: var(--s-6);
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--ff-head);
	font-size: clamp(15px, 1.15vw, 19px);
	line-height: 1.35;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.faq__toggle {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--c-kit-primary);
	position: relative;
}

.faq__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--c-white);
	border-bottom: 2px solid var(--c-white);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 200ms ease;
}

.faq.is-open .faq__toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq__a { padding: 0 var(--s-6) var(--s-6); }

.faq__a p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: #3d4c52;
}

/* --- Contact ----------------------------------------------------- */

.contact {
	position: relative;
	isolation: isolate;
	padding: clamp(56px, 6vw, 104px) 0;
	overflow: hidden;
}

.contact__bg { position: absolute; inset: 0; z-index: -2; background: var(--c-ink); }

.contact__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contact__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 35, 49, 0.86) 0%, rgba(0, 35, 49, 0.62) 60%, rgba(0, 35, 49, 0.5) 100%);
}

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

.contact__lead {
	margin: var(--s-5) 0 0;
	max-width: 46ch;
	font-family: var(--ff-head);
	font-size: clamp(14px, 1.05vw, 17px);
	font-weight: var(--fw-sem);
	line-height: 1.55;
	color: var(--c-white);
}

/* --- Site footer ------------------------------------------------- */

.site-footer {
	position: relative;
	background: #0a2b33;
	color: var(--c-white);
	border-radius: var(--r-card) var(--r-card) 0 0;
	padding: clamp(40px, 5vw, 76px) 0 var(--s-7);
	overflow: hidden;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
}

.site-footer__logo { width: 118px; height: auto; margin-bottom: var(--s-5); }

.site-footer__blurb {
	margin: 0 0 var(--s-6);
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	max-width: 34ch;
}

.site-footer__social {
	display: flex;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a { display: inline-flex; }

.site-footer__social-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--c-white);
	display: block;
	transition: transform 160ms ease, background 160ms ease;
}

.site-footer__social a:hover .site-footer__social-dot {
	background: var(--c-accent-bright);
	transform: translateY(-2px);
}

.site-footer__heading {
	margin: 0 0 var(--s-5);
	font-family: var(--ff-head);
	font-size: 16px;
	font-weight: var(--fw-bold);
	color: var(--c-white);
}

.site-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 11px;
}

.site-footer__col a,
.site-footer__col span {
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.site-footer__col a:hover { color: var(--c-accent-bright); }

.site-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: var(--s-6);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.site-footer__legal {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

.site-footer__legal-links {
	display: flex;
	gap: var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal-links a {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.site-footer__legal-links a:hover { color: var(--c-accent-bright); }

/* --- Responsive -------------------------------------------------- */

@media (max-width: 1100px) {
	.services__grid,
	.property__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.carousel__track { grid-auto-columns: calc((100% - 2 * var(--s-6)) / 2.4); }

	.about__grid,
	.cta-van__grid,
	.areas__grid,
	.expertise__grid,
	.faqs__grid,
	.contact__grid { grid-template-columns: minmax(0, 1fr); }

	.areas__note { text-align: left; }

	.expertise__item:nth-child(odd) { border-right: 0; }
	.expertise__item { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

	.sec-head--split { flex-direction: column; }

	.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.services__grid,
	.property__grid,
	.areas__list,
	.expertise__list { grid-template-columns: minmax(0, 1fr); }

	.carousel__track { grid-auto-columns: 82%; }

	.trust__list { justify-content: flex-start; }
	.trust__item { border-right: 0; min-width: 44%; padding-right: 0; }

	.sec-head { margin-bottom: var(--s-8); }

	.about__dots { display: none; }

	.expertise__item { padding: var(--s-5) 0; }

	.cta-van__media { order: -1; }

	.faq__q { padding: var(--s-5); font-size: 15px; }
	.faq__a { padding: 0 var(--s-5) var(--s-5); }

	.site-footer { border-radius: 28px 28px 0 0; }
	.site-footer__inner { grid-template-columns: minmax(0, 1fr); }
	.site-footer__bar { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.carousel__track { scroll-behavior: auto; }
	.ind-card__text { transition: none; }
}

/* --- Corrections after first visual pass ------------------------- */

/* The design insets section content further than the hero card. */
.trust > .u-container,
.about > .u-container,
.services > .u-container,
.property > .u-container,
.industries > .u-container,
.cta-van > .u-container,
.areas > .u-container,
.expertise > .u-container,
.reviews > .u-container,
.faqs > .u-container,
.contact > .u-container,
.site-footer > .u-container {
	padding-inline: clamp(20px, 4vw, 60px);
}

/* Inline icons stand in for un-exported icon files. */
.icon { width: 22px; height: 22px; display: block; }

.prop-card__icon .icon,
.contact-rows__icon .icon { color: var(--c-white); }

.expertise__icon .icon { color: var(--c-kit-primary); }

.prop-card__icon .icon { width: 24px; height: 24px; }
.contact-rows__icon .icon { width: 18px; height: 18px; }

/* Accreditation marks that have no logo file yet. */
.trust__logo--text {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--c-ink);
	color: var(--c-white);
	font-family: var(--ff-head);
	font-size: 10px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
}

/* Reveal must never leave content permanently invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --- Second pass ------------------------------------------------- */

/* Outline button inherits white from .btn; on light sections that is invisible. */
.about .btn--outline,
.services .btn--outline,
.areas .btn--outline,
.reviews .btn--outline,
.faqs .btn--outline {
	color: var(--c-ink);
	border-color: rgba(0, 35, 49, 0.28);
}

.about .btn--outline:hover,
.services .btn--outline:hover,
.areas .btn--outline:hover {
	border-color: var(--c-kit-primary);
	color: var(--c-kit-primary);
}

/* Icon badge sits on the seam between photo and body, not a fixed % of the card. */
.prop-card { padding-top: 0; }

.prop-card__media { position: relative; }

.prop-card__icon {
	top: auto;
	bottom: auto;
	margin-top: -26px;
	position: relative;
	left: var(--s-6);
	display: inline-grid;
	z-index: 2;
}

.prop-card__body { padding-top: var(--s-5); }

/* Learn More arrow needs contrast inside the teal circle. */
.svc-card .btn--light .btn__icon { background: var(--c-kit-primary); }
.svc-card .btn--light .btn__icon img { filter: brightness(0) invert(1); opacity: 1; }

/* Arrow glyph collapses to 0 width inside the smaller pill. */
.btn--sm .btn__icon img,
.btn--sm .btn__icon svg {
	width: 13px;
	height: 13px;
	flex: none;
}

.btn--light .btn__icon {
	flex: none;
	display: grid;
	place-items: center;
}

/* --- Header + hero fit (third pass) ------------------------------------
   Header: a three-column grid (logo | nav pill | CTA). The outer columns
   share the leftover space equally, so the pill stays centred and can
   never run under the logo or the button. Replaces the absolute
   positioning above, which let the pill collide with both.
   Hero: the headline column and the form scale with the viewport
   (tokens in variables.css), and the title is capped at 10.5em so it
   always breaks after "&" — two lines, as in the design. */

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--s-4);
  padding-inline: var(--pad-header);
}

.brand,
.site-header__cta,
.site-header__inner .nav-toggle { position: static; }

.brand { grid-column: 1; justify-self: start; }

.nav { grid-column: 2; }

.site-header__cta,
.nav-toggle { grid-column: 3; justify-self: end; }

.hero__grid {
  grid-template-columns: minmax(0, 1fr) var(--w-heroform);
  gap: var(--gap-hero);
}

.hero__title { max-width: 10.5em; }

.quote-card { width: var(--w-heroform); }

/* Tablet: the pill no longer fits, so it becomes a drop-down panel
   opened by the menu button. The quote button stays visible. */
@media (max-width: 1180px) {
  .site-header__inner {
    grid-template-columns: 1fr auto auto;
    column-gap: var(--s-3);
    height: var(--h-navband);
  }

  .site-header__cta { display: inline-flex; grid-column: 2; }

  .nav-toggle,
  .site-header__inner .nav-toggle { display: inline-flex; grid-column: 3; }

  .nav { display: none; }

  .nav.is-open {
    display: block;
    position: absolute;
    grid-column: 1 / -1;
    grid-row: 1;
    top: calc(100% + var(--s-2));
    left: 0;
    right: 0;
    z-index: 30;
    height: auto;
    padding: var(--s-2) var(--s-6);
    border-radius: var(--r-panel);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  }

  .nav.is-open .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav.is-open .nav__item { border-bottom: 1px solid var(--c-rule); }

  .nav.is-open .nav__item:last-child { border-bottom: 0; }

  .nav.is-open .nav__link,
  .nav.is-open .nav__item--active .nav__link {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
    padding: var(--s-4) 0;
  }

  .nav.is-open .nav__item--active .nav__link {
    background: none;
    box-shadow: none;
    color: var(--c-accent);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-11) var(--pad-card) var(--s-10);
    gap: var(--s-10);
  }

  .quote-card {
    width: 100%;
    max-width: 543px;
    align-self: start;
  }
}

/* Phone: logo and menu button only; the hero form carries the quote CTA. */
@media (max-width: 767px) {
  .site-header__inner { grid-template-columns: 1fr auto; }

  .site-header__cta { display: none; }

  .nav-toggle,
  .site-header__inner .nav-toggle { grid-column: 2; }

  .hero__grid {
    padding: var(--s-9) var(--pad-card);
    gap: var(--s-9);
  }
}

/* === MOBILE:BEGIN (Figma 749:486) === */
/* ==========================================================================
   Mobile — Figma frame 749:486 (402px) plus its menu (-12) and quote-form
   (modal) variants. Everything here applies at 767px and below only; the
   tablet and desktop layouts above are untouched. Values are read off the
   402px frame; type sizes were matched by measuring the rendered text.
   ========================================================================== */

/* Phone-only menu extras (header.php) — hidden until the drawer opens. */
.nav__head,
.nav__contact { display: none; }

.nav__contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.3;
  color: var(--c-white);
}

.nav__contact a { color: inherit; }

.nav__contact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 22px;
  border-radius: 6px;
  background: var(--c-white);
  color: var(--c-kit-primary);
}

/* Quote dialog (main.js). Holds the hero form on phones. */
.quote-dialog {
  width: min(372px, calc(100vw - 30px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.quote-dialog::backdrop { background: rgba(0, 18, 26, 0.62); }

.quote-dialog .quote-card {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.quote-dialog__close {
  position: absolute;
  top: 26px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-black);
}

@media (max-width: 767px) {

  /* --- Shared furniture ------------------------------------------------ */

  /* White page behind the inset footer card. */
  body.home,
  body.page { background: var(--c-white); }

  .trust > .u-container,
  .about > .u-container,
  .services > .u-container,
  .property > .u-container,
  .industries > .u-container,
  .cta-van > .u-container,
  .areas > .u-container,
  .expertise > .u-container,
  .reviews > .u-container,
  .faqs > .u-container,
  .contact > .u-container { padding-inline: 15px; }

  .eyebrow {
    gap: 5px;
    margin-bottom: 12px;
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.2;
  }

  .eyebrow__rule { width: 40px; height: 1.5px; }

  .sec-title { line-height: 1.15; }

  .sec-sub {
    margin-top: 8px;
    max-width: none;
    font-size: 12px;
    line-height: 20px;
    color: #222;
  }

  .sec-sub--light { color: rgba(255, 255, 255, 0.9); }

  .sec-head { margin-bottom: 20px; }

  /* Compact buttons (34px) used in every section body */
  main .actions { gap: 9px; margin-top: 28px; flex-wrap: nowrap; }

  main .actions .btn,
  .hero__actions .btn,
  .quote-card__footer .btn {
    height: 34px;
    padding: 4px 4px 4px 14px;
    gap: 10px;
    font-family: var(--ff-body);
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 1;
  }

  main .actions .btn__icon,
  .hero__actions .btn__icon,
  .quote-card__footer .btn__icon {
    width: 26px;
    height: 26px;
    padding: 7px;
  }

  main .actions .btn__icon img,
  .hero__actions .btn__icon img,
  .quote-card__footer .btn__icon img {
    width: 12px;
    height: 12px;
  }

  /* Solid teal on light sections, as drawn */
  .about .actions .btn--grad,
  .services .actions .btn--grad,
  .areas .actions .btn--grad { background: var(--c-kit-primary); }

  /* Dark icon disc on the outline phone button over light backgrounds */
  .about .btn--outline .btn__icon,
  .services .btn--outline .btn__icon { background: var(--c-ink); }

  .about .btn--outline .btn__icon img,
  .services .btn--outline .btn__icon img { filter: brightness(0) invert(1); }

  .about .btn--outline,
  .services .btn--outline { border-width: 1.5px; border-color: var(--c-ink); }

  /* --- Header: logo left, plain white menu icon right -------------------- */

  .site-header__inner { padding-inline: 20px 19px; }

  .brand__text { font-size: 20px; }

  .brand__img { width: auto; height: 40px; }

  .nav-toggle,
  .site-header__inner .nav-toggle {
    position: relative;
    z-index: 70;
    width: 32px;
    height: 32px;
    background: transparent;
    border-radius: 0;
  }

  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    width: 24px;
    border-radius: 2px;
    background: var(--c-white);
  }

  .nav-toggle__bar::before { transform: translateY(-7px); }
  .nav-toggle__bar::after  { transform: translateY(5px); }

  /* Menu: teal drawer from the right (frame -12) */
  .nav.is-open {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(335px, 86vw);
    height: auto;
    padding: 18px 12px 32px;
    overflow-y: auto;
    background: var(--c-kit-primary);
    border-radius: 0;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.25);
    z-index: 60;
  }

  .nav.is-open .nav__head {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 0 0 22px 15px;
  }

  .nav.is-open .nav__list { gap: 0; }

  .nav.is-open .nav__item {
    padding-right: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }

  .nav.is-open .nav__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }

  .nav.is-open .nav__link,
  .nav.is-open .nav__item--active .nav__link {
    flex: 1;
    min-height: 50px;
    padding: 0 0 0 15px;
    display: flex;
    align-items: center;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: var(--fw-reg);
    color: var(--c-white);
  }

  .nav.is-open .nav__item--active .nav__link {
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
    color: var(--c-white);
  }

  .nav.is-open .nav__caret {
    transform: rotate(180deg);
    filter: brightness(0) invert(1);
  }

  .nav.is-open .nav__contact {
    display: grid;
    gap: 12px;
    margin: 24px 0 0 15px;
  }

  body.nav-open { overflow: hidden; }

  /* --- Hero ------------------------------------------------------------- */

  .hero { padding-bottom: 16px; }

  .hero__card { min-height: 668px; }

  .hero__grid {
    min-height: 668px;
    padding: 0 var(--pad-card) 54px;
    gap: 0;
    align-content: end;
  }

  .hero__sub { margin-top: 8px; }

  .hero__actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 14px;
  }

  .hero__actions .btn {
    width: auto;
    height: 29px;
    padding: 3px 3px 3px 12px;
    gap: 8px;
    font-size: 11px;
    justify-content: flex-start;
  }

  .hero__actions .btn--outline { border-width: 1.5px; }

  .hero__actions .btn__icon {
    width: 23px;
    height: 23px;
    padding: 6px;
  }

  .hero__actions .btn__icon img { width: 11px; height: 11px; }

  .hero__proof { margin-top: 16px; }

  .rating { flex-wrap: nowrap; gap: 6px; }

  .rating__avatar { width: 34px; height: 34px; }
  .rating__avatar + .rating__avatar { margin-left: -9px; }

  .rating__star { width: 20px; height: 20px; }

  .rating__score { margin-left: 4px; font-size: 15px; line-height: 1; }

  /* The hero form opens as a dialog on phones (main.js moves it there). */
  .has-quote-dialog .hero .quote-card { display: none; }

  .quote-dialog .quote-card { display: block; }

  /* --- Trust bar: one swipeable row ------------------------------------- */

  .trust { padding: 0; }

  .trust > .u-container { padding-inline: 0; }

  .trust__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    padding: 22px 15px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .trust__list::-webkit-scrollbar { display: none; }

  .trust__item {
    flex: none;
    min-width: 0;
    gap: 8px;
    padding: 6px 16px;
    border-right: 1px solid var(--c-rule);
  }

  .trust__item:first-child { padding-left: 0; }

  .trust__logo,
  .trust__logo--text { width: 24px; height: 24px; }

  .trust__name { font-size: 11px; }
  .trust__stars { font-size: 9px; }
  .trust__score { font-size: 8px; }

  /* --- About: copy first, photo after ----------------------------------- */

  .about { padding: 40px 0 72px; }

  .about__grid { gap: 26px; }

  .about__media { order: 2; margin-right: 19px; }

  .about__figure {
    aspect-ratio: 353 / 315;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }

  .about__dots {
    display: block;
    left: auto;
    right: -19px;
    bottom: -36px;
    width: 196px;
    height: 44px;
    background-image: radial-gradient(circle, var(--c-accent) 2.5px, transparent 3px);
    background-size: 19.5px 19.5px;
    background-position: right bottom;
    opacity: 0.6;
  }

  .about__copy { gap: 10px; margin-top: 10px; }

  .about__copy p {
    font-size: 14px;
    line-height: 18px;
    color: #1f1f1f;
  }

  .checklist { gap: 9px; margin-top: 26px; }

  .checklist__item {
    gap: 9px;
    font-size: 15px;
    font-weight: var(--fw-med);
    line-height: 1.1;
    color: #1a1a1a;
  }

  .checklist__mark { width: 13px; height: 13px; border-width: 1.2px; }

  .checklist__mark::after { width: 4px; height: 4px; border-width: 1.2px; }

  /* --- Services: two columns -------------------------------------------- */

  .services { padding: 44px 0 40px; }

  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
  }

  .svc-card { padding: 6px 8px 12px; border-radius: 8px; }

  .svc-card__media { aspect-ratio: 167 / 111; border-radius: 6px; }

  .svc-card__body { padding: 9px 1px 0; }

  .svc-card__title {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 18px;
    font-weight: var(--fw-sem);
  }

  .svc-card__text {
    margin-bottom: 14px;
    font-size: 10px;
    line-height: 13px;
  }

  .svc-card .btn--sm {
    height: 22px;
    padding: 2px 2px 2px 9px;
    gap: 6px;
    font-size: 9px;
  }

  .svc-card .btn--sm .btn__icon { width: 17px; height: 17px; padding: 4px; }

  .svc-card .btn--sm .btn__icon img { width: 9px; height: 9px; }

  .services .actions { justify-content: center; margin-top: 26px; }

  /* --- Property: swipe row (no mobile frame; matches the reviews row) ---- */

  .property { padding: 44px 0 48px; }

  .property__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -15px;
    padding-inline: 15px;
    scroll-padding-inline: 15px;
  }

  .property__grid::-webkit-scrollbar { display: none; }

  .prop-card { scroll-snap-align: start; border-radius: 14px; }

  .prop-card__body { padding: 16px 16px 20px; }

  .prop-card__title { font-size: 16px; }

  .prop-card__body p { font-size: 12px; line-height: 18px; }

  /* --- CTA band: slanted teal edges, copy left, van right ---------------- */

  .cta-van { margin: 0; padding: 60px 0 64px; }

  .cta-van::before,
  .cta-van::after {
    left: 0;
    width: 100%;
    height: 32px;
    transform: none;
  }

  .cta-van::before {
    top: 0;
    background: linear-gradient(to top left, transparent calc(50% - 8px), var(--c-kit-primary) calc(50% - 8px), var(--c-kit-primary) 50%, var(--c-white) 50%);
  }

  /* The section after the band (service areas) is the light surface. */
  .cta-van::after {
    bottom: 0;
    background: linear-gradient(to top left, var(--c-surface) 50%, var(--c-kit-primary) 50%, var(--c-kit-primary) calc(50% + 8px), transparent calc(50% + 8px));
  }

  .cta-van__grid {
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 8px;
    align-items: start;
  }

  .cta-van__media { order: 0; margin-top: 34px; margin-right: -4px; }

  .cta-van__figure { aspect-ratio: 160 / 63; border-radius: 6px; }

  .cta-van .sec-title { font-size: 21px; line-height: 26px; }

  .cta-van .sec-sub { margin-top: 6px; font-size: 11px; line-height: 13px; }

  .cta-van .actions { gap: 10px; margin-top: 18px; }

  .cta-van .actions .btn {
    height: 22px;
    padding: 2px 2px 2px 9px;
    gap: 6px;
    font-size: 9px;
  }

  .cta-van .actions .btn__icon { width: 18px; height: 18px; padding: 4.5px; }

  .cta-van .actions .btn__icon img { width: 9px; height: 9px; }

  .cta-van .actions .btn--grad { background: var(--c-kit-primary); }

  /* --- Industries: two cards per view ----------------------------------- */

  .industries { padding: 45px 0 50px; }

  .industries .carousel__track {
    grid-auto-columns: calc((100% - 17px) / 2);
    gap: 17px;
    padding-bottom: 0;
  }

  .ind-card { min-height: 272px; border-radius: 10px; }

  .ind-card__body { padding: 13px; }

  .ind-card__title { font-size: 14px; line-height: 18px; }

  .ind-card__text,
  .ind-card:first-child .ind-card__text {
    max-height: none;
    margin-top: 4px;
    font-size: 10px;
    line-height: 12px;
    opacity: 1;
  }

  .carousel__nav { gap: 6px; margin-top: 22px; }

  .carousel__btn { width: 22px; height: 22px; font-size: 11px; }

  .carousel__btn--on { background: var(--c-accent); border-color: var(--c-accent); }

  /* --- Expertise: 2 x 2 with rules -------------------------------------- */

  .expertise { padding: 40px 0 56px; }

  .expertise__grid { gap: 26px; }

  .expertise__body .actions { display: none; }

  .expertise .sec-title { font-size: 20px; line-height: 26px; }

  .expertise .sec-sub { font-size: 12px; line-height: 14px; }

  .expertise__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .expertise__item,
  .expertise__item:nth-child(odd),
  .expertise__item:nth-child(-n + 2) {
    position: relative;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
  }

  .expertise__item:nth-child(odd) { padding-right: 10px; }

  .expertise__item:nth-child(even) { padding-left: 19px; }

  .expertise__item:nth-child(-n + 2) { padding-bottom: 13px; }

  .expertise__item:nth-child(n + 3) { padding-top: 19px; }

  /* Column rule stops short of the row rule, as drawn */
  .expertise__item:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 13px;
    width: 1px;
    background: rgba(255, 255, 255, 0.75);
  }

  .expertise__item:nth-child(n + 3):nth-child(odd)::after { top: 19px; bottom: 0; }

  .expertise__list::after {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: end;
    height: 1px;
    background: rgba(255, 255, 255, 0.75);
  }

  .expertise__icon { width: 34px; height: 34px; border-radius: 5px; }

  .expertise__icon .icon,
  .expertise__icon img { width: 18px; height: 18px; color: var(--c-ink); }

  .expertise__title { margin-bottom: 6px; font-size: 14px; line-height: 16px; }

  .expertise__text { font-size: 11px; line-height: 15.5px; color: rgba(255, 255, 255, 0.9); }

  /* --- Service areas: heading, note, list, map, button ------------------ */

  .areas { padding: 45px 0 36px; }

  .areas__grid { display: flex; flex-direction: column; gap: 0; }

  .areas__body,
  .areas__side { display: contents; }

  .areas__body > header { order: 1; }

  .areas__note {
    order: 2;
    margin: 12px 0 0;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    color: #222;
  }

  .areas__list {
    order: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 43.5px;
    gap: 0;
    margin-top: 10px;
  }

  .areas__item {
    gap: 11px;
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: var(--fw-reg);
    color: #1a1a1a;
  }

  .areas__pin {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    transform: none;
  }

  .areas__pin::after { width: 8px; height: 8px; }

  .areas__map { order: 4; margin-top: 16px; aspect-ratio: 373 / 246; border-radius: 20px; }

  .areas .actions { order: 5; justify-content: center; margin-top: 25px; }

  /* --- Testimonials ------------------------------------------------------ */

  .reviews { padding: 44px 0 26px; }

  .reviews .sec-head--split { gap: 18px; }

  .google-pill { gap: 10px; padding: 6px 18px 6px 6px; }

  .google-pill__logo { width: 31px; height: 31px; padding: 4px; }

  .google-pill__stars { font-size: 14px; letter-spacing: 3px; }

  .google-pill__score { font-size: 9.5px; }

  .reviews .carousel__track {
    grid-auto-columns: 308px;
    gap: 21px;
    padding-top: 31px;
    padding-bottom: 2px;
  }

  .review {
    margin-top: 0;
    padding: 38px 17px 18px 23px;
    background: #efefef;
    border: 1px solid #cbcbcb;
    border-radius: 14px;
  }

  .review__mark {
    top: -31px;
    left: 3px;
    width: 62px;
    height: 62px;
    padding-top: 22px;
    font-size: 58px;
  }

  .review__head { margin-bottom: 10px; }

  .review__stars { font-size: 17px; letter-spacing: 5px; }

  .review__source {
    width: 36px;
    height: 36px;
    padding: 8px;
    background: var(--c-white);
    border-radius: 50%;
  }

  .review__text {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 24px;
    color: #1a1a1a;
  }

  .review__by { gap: 16px; padding-top: 12px; border-top-color: #c4c4c4; }

  .review__avatar { width: 50px; height: 50px; }

  .review__name { font-size: 16px; }

  .review__role { font-size: 13px; color: #1a1a1a; }

  .reviews .carousel__nav { margin-top: 30px; }

  /* --- FAQ: question list only on phones -------------------------------- */

  .faqs { padding: 49px 0 62px; }

  .faqs__grid { gap: 22px; }

  .faqs__side .contact-rows,
  .faqs__side .ask-card { display: none; }

  .faqs__list { gap: 16px; }

  .faq { border-color: #c4c4c4; border-radius: 9px; }

  .faq__q {
    gap: 16px;
    padding: 18px 15px 18px 13px;
    font-size: 16px;
    line-height: 23px;
  }

  .faq__toggle { width: 14px; height: 14px; border-radius: 3px; align-self: start; margin-top: 4px; }

  .faq__toggle::after {
    width: 5px;
    height: 5px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }

  .faq__a { padding: 0 13px 14px; margin-top: -8px; }

  .faq__a p { font-size: 12px; line-height: 18px; color: #1f1f1f; }

  /* --- Contact ----------------------------------------------------------- */

  .contact { padding: 53px 0 68px; }

  .contact__grid { gap: 26px; }

  .contact__body .actions { display: none; }

  .contact__lead {
    margin-top: 8px;
    font-family: var(--ff-body);
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 18px;
  }

  .contact-rows--light { gap: 10px; margin-top: 18px; }

  .contact-rows--light .contact-rows__item { gap: 16px; font-size: 16px; }

  .contact-rows--light .contact-rows__icon {
    width: 37px;
    height: 25px;
    border-radius: 6px;
    background: var(--c-white);
  }

  .contact-rows--light .contact-rows__icon .icon,
  .contact-rows--light .contact-rows__icon img { width: 14px; height: 14px; color: var(--c-kit-primary); filter: none; }

  /* --- Quote form (contact section and the dialog) --------------------- */

  .quote-card { padding: 30px 14px 22px; border-radius: var(--r-panel); }

  .quote-card__title {
    margin-bottom: 14px;
    font-weight: var(--fw-bold);
  }

  .quote-card__fields { gap: 8px; }

  .field__input,
  .field__select,
  .field__textarea { padding: 10px 8px; }

  .field__textarea { min-height: 107px; }

  .field__caret { top: 12px; right: 10px; width: 16px; height: 16px; }

  .quote-card__footer { margin-top: 26px; }

  .quote-card__footer .btn {
    height: 29px;
    padding: 3px 3px 3px 14px;
    gap: 10px;
    font-family: var(--ff-head);
    font-size: 11px;
    font-weight: var(--fw-bold);
  }

  .quote-card__footer .btn__icon { width: 23px; height: 23px; padding: 6px; }

  /* --- Footer: inset rounded card --------------------------------------- */

  .site-footer {
    margin: 16px 15px 21px;
    padding: 28px 0 22px;
    border-radius: 20px;
  }

  .site-footer > .u-container { padding-inline: 24px; }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 12px;
  }

  .site-footer__brand,
  .site-footer__inner > .site-footer__col:nth-of-type(2),
  .site-footer__inner > div.site-footer__col { grid-column: 1 / -1; }

  .site-footer__inner > nav.site-footer__col:nth-of-type(2) { order: 3; }
  .site-footer__inner > nav.site-footer__col:nth-of-type(3) { order: 2; }
  .site-footer__inner > div.site-footer__col { order: 4; }

  .site-footer__text {
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
  }

  .site-footer__blurb {
    max-width: 262px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 24px;
    color: var(--c-white);
  }

  .site-footer__heading { margin-bottom: 10px; font-size: 16.5px; }

  .site-footer__col ul { gap: 11px; }

  .site-footer__col a,
  .site-footer__col span { font-size: 14px; color: var(--c-white); }

  .site-footer__bar {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding-top: 18px;
  }

  .site-footer__legal { font-size: 12px; text-align: center; }

  .site-footer__legal-links { gap: 20px; justify-content: center; }
}
/* Mobile fine-tuning after the first side-by-side check */
@media (max-width: 767px) {
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(0) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-2px) rotate(-45deg); }

  .checklist__item { font-size: 14px; }

  .areas__grid { align-items: stretch; }

  .expertise .sec-title { max-width: 230px; }
  .expertise__list::after { content: none; }
  .expertise__item:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.75); }

  .faq { padding: 0; }

  .site-footer__bar.u-container { width: auto; margin-inline: 24px; padding-inline: 0; }
}
/* === MOBILE:END === */

/* === ABOUT:BEGIN (Figma 52983541) === */
/* ==========================================================================
   About page — page hero, intro, values, team. Service areas, contact and
   footer are the shared home sections. Measured off the 1728px frame and
   scaled with the viewport like the home page.
   ========================================================================== */

.about-intro > .u-container,
.values > .u-container,
.team > .u-container {
  max-width: var(--canvas);
  padding-inline: clamp(20px, 3.3vw, 57px);
}

/* --- Page hero ----------------------------------------------------------- */

.page-hero {
  padding: 15px var(--gutter) 34px;
  background: var(--c-ink);
}

.page-hero__card {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--card-max);
  min-height: clamp(360px, 27.4vw, 474px);
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  background: #f5f5f5;
  border-radius: var(--r-card);
}

.page-hero__body {
  position: relative;
  z-index: 1;
  width: 48%;
  padding: 40px 0 40px clamp(24px, 3.94vw, 68px);
}

.page-hero__title {
  font-size: clamp(34px, 3.24vw, 56px);
  line-height: 1.18;
  color: #1a1a1a;
}

.page-hero__title .u-accent { color: var(--c-kit-primary); }

.page-hero__sub {
  max-width: 640px;
  margin-top: 14px;
  font-size: clamp(15px, 1.16vw, 20px);
  line-height: 1.6;
  color: #1f1f1f;
}

.page-hero__sub strong { font-weight: var(--fw-sem); }

.page-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 53%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

/* --- Intro ------------------------------------------------------------------ */

.about-intro {
  position: relative;
  padding: clamp(56px, 6.4vw, 111px) 0 clamp(56px, 6.9vw, 120px);
  background: var(--c-surface);
}

.about-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(32px, 5.5vw, 95px);
  align-items: center;
}

.about-intro__media {
  position: relative;
  aspect-ratio: 679 / 667;
}

.about-intro__main,
.about-intro__detail {
  position: absolute;
  margin: 0;
  aspect-ratio: auto;
}

.about-intro__main {
  top: 0;
  left: 0;
  width: 71.9%;
  height: 72.4%;
  border-radius: 14px;
}

.about-intro__detail {
  top: 50.7%;
  left: 51%;
  z-index: 1;
  width: 49%;
  height: 49.3%;
  border-radius: 20px 20px 0 20px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.about-intro__dots {
  position: absolute;
  background-image: radial-gradient(circle, var(--c-accent) 4px, transparent 4.6px);
  background-size: 39px 39px;
  opacity: 0.55;
  pointer-events: none;
}

.about-intro__dots--a { top: 34%; left: 74%; width: 23%; height: 12%; }
.about-intro__dots--b { top: 75%; left: 0; width: 49%; height: 7%; }

.about-intro__text {
  margin-top: 20px;
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.68;
  color: #222;
}

.about-intro__text strong { font-weight: var(--fw-sem); color: #1a1a1a; }

.about-intro .checklist { gap: 12px; margin-top: 24px; }

.about-intro .checklist__item { font-size: clamp(15px, 1.16vw, 20px); font-weight: var(--fw-sem); }

.about-intro .actions .btn--grad { background: var(--c-kit-primary); }

.about-intro .btn--outline {
  color: var(--c-ink);
  border-color: var(--c-ink);
}

.about-intro .btn--outline .btn__icon { background: var(--c-ink); }
.about-intro .btn--outline .btn__icon img { filter: brightness(0) invert(1); }

/* --- Values ---------------------------------------------------------------- */

.values {
  padding: clamp(56px, 5.9vw, 102px) 0;
  background: var(--c-ink);
}

.values__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 128px);
  align-items: center;
}

.values__text {
  max-width: 470px;
  margin-top: 22px;
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

.values__text strong { font-weight: var(--fw-sem); color: var(--c-white); }

.values__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 27px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-card {
  position: relative;
  padding: 24px 28px 30px 24px;
  background: var(--c-white);
  border-radius: 19px;
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}

/* Teal marker on the left edge, as drawn */
.value-card::before {
  content: "";
  position: absolute;
  top: 26px;
  left: -4px;
  width: 9px;
  height: 58px;
  border-radius: 6px;
  background: var(--c-kit-primary);
  transition: background-color var(--t-base) var(--e-out);
}

.value-card__icon {
  display: grid;
  place-items: center;
  width: 67px;
  height: 67px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--c-kit-primary);
  color: var(--c-white);
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}

.value-card__icon svg { width: 30px; height: 30px; }

.value-card__title {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.25;
  font-weight: var(--fw-sem);
  color: #1a1a1a;
}

.value-card__text {
  margin: 0;
  font-size: clamp(13px, 0.98vw, 17px);
  line-height: 1.3;
  color: #333;
}

/* Cards stay white; the hovered (or keyboard-focused) card turns teal. */
.value-card:hover,
.value-card:focus-within { background: var(--c-kit-primary); }

.value-card:hover::before,
.value-card:focus-within::before { background: var(--c-white); }

.value-card:hover .value-card__icon,
.value-card:focus-within .value-card__icon { background: var(--c-white); color: var(--c-kit-primary); }

.value-card:hover .value-card__title,
.value-card:focus-within .value-card__title,
.value-card:hover .value-card__text,
.value-card:focus-within .value-card__text { color: var(--c-white); }

/* --- Team ------------------------------------------------------------------- */

.team {
  padding: clamp(56px, 4.6vw, 80px) 0 clamp(56px, 4.1vw, 72px);
  background: var(--c-surface);
}

.team .sec-sub { max-width: 560px; }

.team .sec-sub strong { font-weight: var(--fw-sem); color: #1a1a1a; }

.team .sec-head { margin-bottom: clamp(32px, 3.2vw, 55px); }

.team .carousel__track {
  grid-auto-columns: calc((100% - 3 * 30px) / 4);
  gap: 30px;
}

.team-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 373 / 479;
  border-radius: 10px 10px 0 0;
  background: #d9dcdc;
}

.team-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.team-card__plate {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 24%;
  padding: 14px 16% 12px;
  background: var(--c-kit-primary);
  color: var(--c-white);
  text-align: center;
  clip-path: polygon(12.6% 0, 100% 0, 100% 66%, 87.4% 100%, 0 100%, 0 40.7%);
}

.team-card__name {
  margin: 0;
  font-size: clamp(16px, 1.16vw, 20px);
  line-height: 1.2;
  font-weight: var(--fw-sem);
  color: var(--c-white);
}

.team-card__role {
  margin: 0;
  font-size: clamp(13px, 0.93vw, 16px);
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.95);
}

.team .carousel__nav { margin-top: clamp(28px, 2.8vw, 48px); }

/* --- Tablet ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .about-intro__grid,
  .values__grid { grid-template-columns: minmax(0, 1fr); }

  .about-intro__media { max-width: 620px; }

  .team .carousel__track { grid-auto-columns: calc((100% - 2 * 24px) / 2.4); gap: 24px; }
}

/* --- Phone ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .about-intro > .u-container,
  .values > .u-container,
  .team > .u-container { padding-inline: 15px; }

  .page-hero { padding: 0 var(--gutter) 16px; }

  .page-hero__card { flex-direction: column; align-items: stretch; min-height: 0; }

  .page-hero__body { width: auto; padding: 28px 18px 24px; }

  .page-hero__title { font-size: 30px; }

  .page-hero__sub { font-size: 14px; }

  .page-hero__media {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    clip-path: none;
  }

  .about-intro { padding: 40px 0 48px; }

  .about-intro__grid { gap: 32px; }

  .about-intro__media { order: 2; }

  .about-intro__text { font-size: 14px; line-height: 20px; }

  .about-intro .checklist__item { font-size: 14px; }

  .values { padding: 40px 0 48px; }

  .values__grid { gap: 26px; }

  .values__text { font-size: 13px; }

  .values__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .value-card { padding: 18px 18px 20px; border-radius: 14px; }

  .value-card__icon { width: 48px; height: 48px; margin-bottom: 12px; }

  .value-card__icon svg { width: 22px; height: 22px; }

  .team { padding: 44px 0 40px; }

  .team .carousel__track { grid-auto-columns: 72%; gap: 14px; }

  .team-card__plate { padding: 12px 14% 10px; }
}
/* Two light sections meet here; cover the sub-pixel seam where the dark
   page background shows through between them. */
.team + .areas { box-shadow: 0 -2px 0 var(--c-surface); }
/* === ABOUT:END === */

/* === CONTACT:BEGIN (Figma 1287:2288) === */
/* ==========================================================================
   Contact page — shared page hero, form + contact card, map band.
   Measured off the 1736px frame, scaled with the viewport.
   ========================================================================== */

.contact-page {
  padding: clamp(56px, 5.1vw, 88px) 0 clamp(56px, 5.5vw, 95px);
  background: var(--c-white);
}

.contact-page > .u-container {
  max-width: 1314px;
  padding-inline: 20px;
}

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 652fr) minmax(0, 435fr);
  gap: clamp(40px, 10.8vw, 187px);
  align-items: start;
}

/* Heading runs slightly smaller than the global h2 so it breaks after "Our", as drawn. */
.contact-page .sec-title { font-size: clamp(30px, 2.9vw, 50px); }

.contact-page .sec-sub {
  max-width: 600px;
  margin-top: 16px;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.5;
  color: #222;
}

.contact-page .sec-sub strong { font-weight: var(--fw-sem); color: #1a1a1a; }

/* --- Form ------------------------------------------------------------------- */

.contact-form {
  display: grid;
  gap: 22px;
  margin-top: 34px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-form__field { display: grid; gap: 12px; }

.contact-form__label {
  font-family: var(--ff-head);
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: var(--fw-sem);
  color: #1a1a1a;
}

.contact-form__input {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  background: #f1f1f1;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--e-soft), background-color var(--t-fast) var(--e-soft);
}

.contact-form__input::placeholder { color: #777; }

.contact-form__input:focus {
  outline: none;
  background: var(--c-white);
  border-color: var(--c-kit-primary);
}

.contact-form__textarea {
  height: 127px;
  padding: 14px 18px;
  resize: vertical;
}

.contact-form__submit { justify-self: start; margin-top: 6px; }

.contact-form .quote-card__notice { margin: 0; }

/* --- Contact card -------------------------------------------------------------- */

.contact-card {
  position: relative;
  padding: 30px 22px 34px 37px;
  background: var(--c-kit-primary);
  border-radius: 14px;
  color: var(--c-white);
  /* Top-right corner cut on the diagonal, as drawn */
  clip-path: polygon(0 0, 79.8% 0, 100% 18.8%, 100% 100%, 0 100%);
}

.contact-card__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-card__item {
  display: grid;
  gap: 4px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.contact-card__item:first-child { padding-top: 0; }
.contact-card__item:last-child { padding-bottom: 0; border-bottom: 0; }

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-kit-primary);
}

.contact-card__icon svg { width: 24px; height: 24px; }

.contact-card__label {
  font-family: var(--ff-head);
  font-size: clamp(14px, 0.95vw, 16px);
  font-weight: var(--fw-sem);
}

.contact-card__text {
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: 1.45;
  color: var(--c-white);
}

a.contact-card__text:hover { text-decoration: underline; }

/* The card clips its own corner, so the dot grid sits on the grid instead. */
.contact-page__grid { position: relative; }

.contact-page__grid::after {
  content: "";
  position: absolute;
  right: -100px;
  top: 69%;
  width: 82px;
  height: 150px;
  background-image: radial-gradient(circle, var(--c-accent) 5px, transparent 5.6px);
  background-size: 34px 34px;
  opacity: 0.55;
  pointer-events: none;
}

/* --- Map band ------------------------------------------------------------------- */

.contact-map {
  position: relative;
  height: clamp(360px, 35vw, 608px);
  overflow: hidden;
  background: var(--c-ink);
}

.contact-map__media {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.contact-map__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 35, 49, 0.28);
  pointer-events: none;
}

.contact-map__card {
  position: absolute;
  left: clamp(20px, 4.5vw, 78px);
  bottom: clamp(24px, 4.4vw, 76px);
  width: min(352px, calc(100% - 40px));
  padding: 22px 24px 24px;
  background: var(--c-white);
  clip-path: polygon(0 0, 93.8% 0, 100% 11%, 100% 100%, 5% 100%, 0 89%);
}

.contact-map__city {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--ff-head);
  font-size: clamp(17px, 1.2vw, 21px);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.contact-map__address {
  margin: 0;
  font-size: clamp(13px, 0.93vw, 16px);
  line-height: 1.4;
  color: #222;
}

/* --- Tablet / phone ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .contact-page__grid { grid-template-columns: minmax(0, 1fr); }

  .contact-card { max-width: 520px; }

  .contact-page__grid::after { display: none; }
}

@media (max-width: 767px) {
  .contact-page { padding: 40px 0 48px; }

  .contact-page > .u-container { padding-inline: 15px; }

  .contact-form { gap: 16px; margin-top: 24px; }

  .contact-form__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .contact-form__field { gap: 8px; }

  .contact-form__input { height: 46px; font-size: 14px; }

  .contact-form__textarea { height: 110px; }

  .contact-card { padding: 24px 20px 26px; }

  .contact-card__item { padding: 18px 0; }

  .contact-card__icon { width: 44px; height: 44px; margin-bottom: 10px; }

  .contact-map { height: 420px; }
}
/* === CONTACT:END === */


/* === CITY:BEGIN (Figma 921:3055) === */
/* ==========================================================================
   City (service area) pages. Every section is a shared home section; only
   the section tints and the "About the city" block differ from the home page.
   ========================================================================== */

/* Services sit on the light grey band here, About on white. */
.single-service_area .services { background: var(--c-surface); }

.about--city { background: var(--c-white); }

.about--city .about__figure { border-radius: 20px; }

.about--city .about__copy p strong { font-weight: var(--fw-sem); color: #1a1a1a; }

/* Dot grid: two rows under the photo's right half and a short column up
   its right edge, as drawn. */
.about--city .about__dots {
  left: 48%;
  right: -16px;
  bottom: -72px;
  width: auto;
  height: 62px;
  background-image: radial-gradient(circle, var(--c-accent) 5px, transparent 5.6px);
  background-size: 37px 37px;
  background-position: right top;
  opacity: 0.45;
}

.about--city .about__dots--side {
  left: auto;
  right: -26px;
  bottom: 0;
  width: 22px;
  height: 104px;
  background-position: center bottom;
}

@media (min-width: 1101px) {
  .about--city { padding-block: clamp(72px, 6.4vw, 110px) clamp(96px, 8.4vw, 145px); }

  .about--city .about__grid {
    grid-template-columns: minmax(0, 677fr) minmax(0, 862fr);
    gap: clamp(36px, 3vw, 52px);
  }
}

@media (max-width: 1100px) {
  .about--city .about__media { max-width: 680px; margin-bottom: 72px; }
}

@media (max-width: 767px) {
  .about--city .about__media { margin-bottom: 0; }

  .about--city .about__figure { border-radius: 10px; }

  .about--city .about__dots {
    left: auto;
    right: -19px;
    bottom: -36px;
    width: 196px;
    height: 44px;
    background-image: radial-gradient(circle, var(--c-accent) 2.5px, transparent 3px);
    background-size: 19.5px 19.5px;
    background-position: right bottom;
    opacity: 0.6;
  }

  .about--city .about__dots--side { display: none; }
}
/* === CITY:END === */


/* === SERVICES:BEGIN (Figma 861:5964) === */
/* ==========================================================================
   Service pages, the services overview, and the nav dropdowns. Service and
   city pages share one layout: content inset 76px on the 1728 frame,
   services on the grey band, the split "about" block on white.
   ========================================================================== */

/* --- Nav dropdowns ------------------------------------------------------- */

.nav__item.has-children { position: relative; }

.nav__subtoggle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 -4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
}

.nav__subtoggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.nav__submenu {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  z-index: 60;
  min-width: 250px;
  max-height: min(70vh, 560px);
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  list-style: none;
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 35, 49, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--t-fast) var(--e-soft), transform var(--t-fast) var(--e-soft), visibility var(--t-fast);
}

/* Hover bridge across the gap between the pill and the panel. */
.nav__item.has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 24px;
}

.nav__item.has-children:hover > .nav__submenu,
.nav__item.has-children:focus-within > .nav__submenu,
.nav__item.is-open > .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__item.has-children:hover .nav__caret,
.nav__item.has-children:focus-within .nav__caret { transform: rotate(90deg); }

.nav__sublink {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: var(--fw-med);
  line-height: 1.25;
  color: var(--c-ink);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}

.nav__sublink:hover,
.nav__sublink:focus-visible,
.nav__sublink[aria-current="page"] { background: var(--c-surface); color: var(--c-kit-primary); }

/* --- Shared inner-page layout (service + city) ---------------------------- */

.single-service .services,
.post-type-archive-service .services { background: var(--c-surface); }

.single-service .services .sec-sub,
.single-service_area .services .sec-sub,
.post-type-archive-service .services .sec-sub { max-width: 720px; }

.services .sec-sub strong { font-weight: var(--fw-sem); color: #1a1a1a; }

/* Five cards: three, then two centred, as drawn on the repairs page. */
.services__grid--centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.services__grid--centered > .svc-card { flex: 0 1 calc((100% - 2 * clamp(16px, 1.6vw, 26px)) / 3); }

.about--city .about__copy p {
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.5;
  color: #1f1f1f;
}

/* Solid teal quote button and ink-outlined phone button on light bands. */
.about--city .actions .btn--grad,
.single-service .services .actions .btn--grad,
.single-service_area .services .actions .btn--grad,
.post-type-archive-service .services .actions .btn--grad { background: var(--c-kit-primary); }

.about--city .btn--outline,
.single-service .services .btn--outline,
.single-service_area .services .btn--outline,
.post-type-archive-service .services .btn--outline { color: var(--c-ink); border-color: var(--c-ink); }

.about--city .btn--outline .btn__icon,
.single-service .services .btn--outline .btn__icon,
.single-service_area .services .btn--outline .btn__icon,
.post-type-archive-service .services .btn--outline .btn__icon { background: var(--c-ink); }

.about--city .btn--outline .btn__icon img,
.single-service .services .btn--outline .btn__icon img,
.single-service_area .services .btn--outline .btn__icon img,
.post-type-archive-service .services .btn--outline .btn__icon img { filter: brightness(0) invert(1); }

@media (min-width: 1101px) {
  /* The service and city frames place section content 76px in from the
     1728 edge rather than inside the 1514 hero column. */
  :is(.single-service, .single-service_area, .post-type-archive-service) :is(.trust, .services, .about, .expertise, .industries, .cta-van, .areas, .reviews, .faqs, .contact) > .u-container {
    max-width: var(--canvas);
    padding-inline: clamp(20px, 4.4vw, 76px);
  }
}

@media (max-width: 1180px) {
  /* Drawer: sub-lists open in place under their parent. */
  .nav__item.has-children { flex-wrap: wrap; }

  .nav__item.has-children::after { display: none; }

  .nav__submenu {
    position: static;
    flex-basis: 100%;
    display: none;
    min-width: 0;
    max-height: none;
    margin: 6px 0 4px;
    padding: 4px 0 4px 12px;
    background: transparent;
    border-left: 2px solid rgba(0, 133, 113, 0.25);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav__item.has-children:hover > .nav__submenu,
  .nav__item.has-children:focus-within > .nav__submenu { transform: none; }

  .nav__item.is-open > .nav__submenu { display: block; }

  .nav__item.has-children:hover .nav__caret,
  .nav__item.has-children:focus-within .nav__caret { transform: rotate(-90deg); }

  .nav__item.is-open .nav__caret { transform: rotate(90deg); }

  .nav__sublink { padding: 8px 10px; white-space: normal; }

  .nav__subtoggle { width: 36px; height: 36px; margin-left: auto; }
}

@media (max-width: 1100px) {
  .services__grid--centered > .svc-card { flex-basis: calc((100% - clamp(16px, 1.6vw, 26px)) / 2); }
}

@media (max-width: 767px) {
  .services__grid--centered > .svc-card { flex-basis: calc((100% - 8px) / 2); }
}
/* "Book Now" / "Learn More" arrow: the small button's icon disc had no room
   left for the arrow once its padding was applied. */
@media (min-width: 768px) {
  .svc-card .btn--sm .btn__icon { display: grid; place-items: center; padding: 0; }

  .svc-card .btn--sm .btn__icon img { width: 12px; height: 12px; }
}
@media (max-width: 1180px) {
  .nav__item.is-open > .nav__submenu,
  .nav__item.has-children:hover > .nav__submenu { transform: none; }
}

@media (max-width: 767px) {
  /* Phone drawer is teal: sub-links in white. */
  .nav__submenu { border-left-color: rgba(255, 255, 255, 0.3); }

  .nav__sublink { color: rgba(255, 255, 255, 0.88); font-size: 14px; }

  .nav__sublink:hover,
  .nav__sublink:focus-visible,
  .nav__sublink[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: var(--c-white); }
}
@media (max-width: 1180px) {
  .nav__item.has-children.is-open .nav__caret { transform: rotate(90deg); }
}
/* === SERVICES:END === */


/* === MEDIA+FOOTER:BEGIN === */
/* ==========================================================================
   Uploaded brand images: trust bar logos/badges, and the designed footer —
   an inset rounded card over the house photo (Figma 921:3055 footer).
   ========================================================================== */

/* --- Trust bar ------------------------------------------------------------ */

.trust__item--img { justify-content: center; }

.trust__badge,
.trust__mark {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.trust__item--img .trust__text { gap: 4px; justify-items: start; }

.trust__item--img .trust__score {
  font-size: clamp(9px, 0.64vw, 11px);
  color: #333;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* --- Footer card ------------------------------------------------------------ */

.site-footer {
  --ft-top: 24px;
  --ft-side: clamp(16px, 1.9vw, 32px);
  --ft-bottom: 28px;
  margin: 0;
  padding: calc(clamp(40px, 4.4vw, 76px) + var(--ft-top)) var(--ft-side) calc(var(--s-7) + var(--ft-bottom));
  background: var(--c-white);
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: var(--ft-top) var(--ft-side) var(--ft-bottom);
  z-index: 0;
  border-radius: clamp(20px, 1.9vw, 32px);
  background:
    linear-gradient(0deg, rgba(0, 35, 49, 0.94), rgba(0, 35, 49, 0.84)),
    var(--footer-bg, none) center / cover no-repeat,
    #0a2b33;
}

.site-footer > * { position: relative; z-index: 1; }

.site-footer__social { gap: 14px; }

.site-footer__social-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--c-white);
  transition: color var(--t-fast) var(--e-soft), transform var(--t-fast) var(--e-soft);
}

.site-footer__social a:hover .site-footer__social-icon { color: var(--c-accent-bright); transform: translateY(-2px); }

@media (min-width: 1101px) {
  /* Footer content sits 80px in from the page edge on the 1728 frame. */
  .site-footer > .u-container {
    max-width: none;
    padding-inline: clamp(20px, 2.8vw, 48px);
  }
}

@media (max-width: 767px) {
  .site-footer {
    --ft-top: 16px;
    --ft-side: 15px;
    --ft-bottom: 21px;
    margin: 0;
    padding: 44px 15px 43px;
  }

  .site-footer::before { border-radius: 20px; }
}
/* Hero photo: the card must form its own stacking context, otherwise the
   photo (z-index -2) is painted behind the dark hero band. */
.hero__card { isolation: isolate; }
/* === MEDIA+FOOTER:END === */


/* === MOTION:BEGIN === */
/* ==========================================================================
   Motion: Lenis smooth scroll, button hovers, clickable service cards.
   Hover effects only on devices that can hover; everything is switched
   off for prefers-reduced-motion.
   ========================================================================== */

:root { --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* --- Lenis (from lenis.css) ----------------------------------------------- */

html.lenis,
html.lenis body { height: auto; }

/* Lenis blocks wheel and touch scrolling itself while stopped (menu drawer,
   quote popup). No overflow on <html>: that would stop body's overflow
   reaching the viewport, turn <body> into the scroller and unstick the
   sticky header. */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: visible; }

.lenis [data-lenis-prevent],
.lenis .quote-dialog,
.lenis .nav__submenu { overscroll-behavior: contain; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }

.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --- Buttons ----------------------------------------------------------------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--t-base) var(--e-out),
    box-shadow var(--t-base) var(--e-out),
    background-color var(--t-fast) var(--e-soft),
    border-color var(--t-fast) var(--e-soft),
    color var(--t-fast) var(--e-soft);
}

/* Light sweep across the pill. Sits under the label and the icon. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.42) 50%, transparent 75%);
  transform: translateX(-110%);
  pointer-events: none;
}

.btn__icon {
  overflow: hidden;
  transition: transform var(--t-base) var(--e-spring), background-color var(--t-fast) var(--e-soft);
}

@keyframes sac-arrow-through {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(160%, -160%); }
  46%  { transform: translate(-160%, 160%); }
  100% { transform: translate(0, 0); }
}

@keyframes sac-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-16deg); }
  30% { transform: rotate(14deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-3px); }

  .btn:active { transform: translateY(-1px) scale(0.98); }

  .btn:hover::before,
  .btn:focus-visible::before { transform: translateX(110%); transition: transform 750ms var(--e-out); }

  .btn--grad:hover { box-shadow: 0 12px 28px rgba(0, 186, 158, 0.38); }

  .btn--solid:hover,
  :is(.about, .about-intro, .services, .areas, .cta-van, .contact-page) .actions .btn--grad:hover { box-shadow: 0 12px 28px rgba(0, 133, 113, 0.35); }

  .btn--outline:hover { box-shadow: 0 10px 24px rgba(0, 35, 49, 0.16); }

  .btn:hover .btn__icon { transform: scale(1.1); }

  .btn:hover .btn__icon img:not([src*="icon-call"]) { animation: sac-arrow-through 620ms var(--e-out); }

  .btn:hover .btn__icon img[src*="icon-call"] { animation: sac-ring 700ms ease-in-out; }
}

.btn:focus-visible { outline: 3px solid var(--c-accent-bright); outline-offset: 3px; }

/* --- Service cards: the whole card is the link ----------------------------- */

.svc-card {
  position: relative;
  cursor: pointer;
  transition:
    transform 450ms var(--e-out),
    box-shadow 450ms var(--e-out),
    background-color var(--t-base) var(--e-soft);
}

/* The card's own button carries the link; its ::after stretches over the
   whole card so any click on it follows the link. */
.svc-card .svc-card__link,
.svc-card .svc-card__link:hover,
.svc-card:hover .svc-card__link {
  position: static;
  overflow: visible;
  isolation: auto;
  /* A transform here would make the button the containing block and
     shrink the stretched link back to the button. */
  transform: none;
}

.svc-card .svc-card__link::before { display: none; }

.svc-card .svc-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.svc-card .svc-card__link:focus-visible { outline: 0; }

.svc-card:has(.svc-card__link:focus-visible) {
  outline: 3px solid var(--c-accent-bright);
  outline-offset: 4px;
}

.svc-card__media img { transition: transform 900ms var(--e-out), filter 450ms var(--e-soft); }

.svc-card__title { transition: color var(--t-fast) var(--e-soft); }

@media (hover: hover) and (pointer: fine) {
  .services .svc-card:hover {
    transform: translateY(-8px);
    background-color: var(--c-kit-primary-dark);
    box-shadow: 0 26px 50px rgba(0, 53, 43, 0.32);
  }

  .svc-card:hover .svc-card__media img { transform: scale(1.07); filter: saturate(1.08); }

  .svc-card:hover .svc-card__title { color: var(--c-accent-bright); }

  /* The card's button reacts with the card, not only on its own hover. */
  .svc-card:hover .svc-card__link .btn__icon { background: var(--c-accent-bright); transform: translateX(3px) scale(1.12); }

  .svc-card:hover .svc-card__link .btn__icon img { animation: sac-arrow-through 620ms var(--e-out); filter: none; }
}

/* --- Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn__icon,
  .svc-card,
  .svc-card__media img { transition: none; }

  .btn::before { display: none; }

  .btn:hover,
  .svc-card:hover,
  .svc-card:hover .svc-card__link { transform: none; }

  .btn:hover .btn__icon img,
  .svc-card:hover .btn__icon img { animation: none; }

  .svc-card:hover .svc-card__media img { transform: none; }
}
/* === MOTION:END === */


/* === STICKY+POPUP:BEGIN === */
/* ==========================================================================
   Sticky header and the quote popup.
   The header gets no transform / filter: the phone menu drawer inside it is
   position: fixed and would otherwise be trapped inside the header box.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: box-shadow var(--t-base) var(--e-soft), background-color var(--t-base) var(--e-soft);
}

/* WordPress toolbar (logged-in editors only). */
body.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

@media (max-width: 600px) {
  /* The toolbar scrolls away with the page at this width. */
  body.admin-bar .site-header { top: 0; }
}

.site-header.is-stuck {
  background: var(--c-ink);
  box-shadow: 0 10px 30px rgba(0, 12, 18, 0.35);
}

/* In-page anchors land below the header when scrolled natively. */
[id] { scroll-margin-top: calc(var(--h-navband) + 16px); }

/* --- Quote popup -------------------------------------------------------------- */

.quote-dialog {
  width: min(372px, calc(100vw - 30px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.quote-dialog::backdrop { background: rgba(0, 18, 26, 0.66); }

.quote-dialog[open] { animation: sac-pop-in 420ms var(--e-out); }

.quote-dialog[open]::backdrop { animation: sac-fade-in 300ms var(--e-soft); }

@keyframes sac-pop-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes sac-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.quote-dialog .quote-card {
  display: block;
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.quote-dialog__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--c-white);
  box-shadow: 0 6px 18px rgba(0, 18, 26, 0.3);
  border: 0;
  border-radius: 50%;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft), transform var(--t-base) var(--e-spring);
}

.quote-dialog__close:hover { background: var(--c-kit-primary); color: var(--c-white); transform: rotate(90deg); }

.quote-dialog__close:focus-visible { outline: 3px solid var(--c-accent-bright); outline-offset: 2px; }

@media (min-width: 768px) {
  .quote-dialog { width: min(var(--w-heroform), calc(100vw - 48px)); max-height: calc(100dvh - 48px); }

  .quote-dialog .quote-card { max-height: calc(100dvh - 48px); }

  .quote-dialog__close { top: -16px; right: -16px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-dialog[open],
  .quote-dialog[open]::backdrop { animation: none; }
}
/* === STICKY+POPUP:END === */


/* === HERO-FIT+MARQUEE:BEGIN === */
/* ==========================================================================
   1. The hero card fits the first screen on desktop: header + card never
      exceed the viewport height, so the buttons and rating are visible on
      arrival. The quote form tightens on shorter screens to fit.
   2. Trust bar: logos scroll on a loop, greyscale until hovered.
   ========================================================================== */

@media (min-width: 1181px) {
  .hero__card {
    height: clamp(500px, calc(100svh - var(--h-navband) - 16px - var(--wp-admin--admin-bar--height, 0px)), var(--h-hero-card));
    min-height: 0;
  }

  /* The card now ends inside the first screen; keep only a thin dark
     band under it before the trust bar. */
  .hero { padding-bottom: 16px; }

  .hero__grid {
    height: 100%;
    min-height: 0;
    padding-top: clamp(28px, 4vh, 120px);
    padding-bottom: clamp(28px, 5vh, 48px);
  }
}

/* Laptop-height screens: tighten the form so it fits inside the card. */
@media (min-width: 1181px) and (max-height: 1050px) {
  .hero .quote-card { padding-top: 28px; padding-bottom: 24px; }

  .hero .quote-card__title { margin-bottom: 18px; }

  .hero .quote-card__fields { gap: 12px; }

  .hero .field__textarea { height: 72px; min-height: 72px; }

  .hero .quote-card__footer { margin-top: 18px; }
}

@media (min-width: 1181px) and (max-height: 820px) {
  .hero .quote-card__title { font-size: 26px; line-height: 32px; }

  .hero .field__input,
  .hero .field__select { height: 42px; font-size: 17px; }

  .hero .field__textarea { height: 56px; min-height: 56px; font-size: 17px; }

  .hero__title { font-size: min(var(--fs-h1), 8.6vh); }

  .hero__sub { font-size: min(var(--fs-lead), 2.6vh); }
}

/* Very short laptop screens (e.g. 1366x657 usable). */
@media (min-width: 1181px) and (max-height: 700px) {
  .hero .quote-card { padding-top: 22px; padding-bottom: 18px; }

  .hero .quote-card__title { margin-bottom: 10px; }

  .hero .quote-card__fields { gap: 6px; }

  .hero .field__textarea { height: 44px; min-height: 44px; }

  .hero .quote-card__footer { margin-top: 12px; }

  .hero__actions { margin-top: 24px; }

  .hero__proof { margin-top: 22px; }
}

/* --- Trust bar marquee -------------------------------------------------------- */

.trust { padding: clamp(18px, 1.7vw, 28px) 0; overflow: hidden; }

.trust__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.trust__track {
  display: flex;
  width: max-content;
  animation: sac-marquee 40s linear infinite;
}

.trust__viewport:hover .trust__track,
.trust__viewport:focus-within .trust__track { animation-play-state: paused; }

@keyframes sac-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.trust__viewport .trust__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
}

.trust__viewport .trust__item,
.trust__viewport .trust__item:last-child {
  flex: none;
  min-width: 0;
  padding: 6px clamp(26px, 2.7vw, 48px);
  border-right: 1px solid var(--c-rule);
  filter: grayscale(1);
  opacity: 0.72;
  transition:
    filter var(--t-base) var(--e-soft),
    opacity var(--t-base) var(--e-soft),
    transform var(--t-base) var(--e-out);
}

.trust__viewport .trust__item:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .trust { padding: 16px 0; }

  .trust__track { animation-duration: 28s; }

  .trust__viewport .trust__item,
  .trust__viewport .trust__item:last-child { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }

  .trust__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

  .trust__viewport .trust__list[aria-hidden="true"] { display: none; }
}
/* === HERO-FIT+MARQUEE:END === */


/* === TYPE-MIN:BEGIN === */
/* ==========================================================================
   Readable body copy from tablet up: no paragraph, list or link text under
   16px. Lead paragraphs scale to 19px on wide screens. Phones keep the
   sizes from the mobile design. ":root body" lifts these above the
   section-level rules they replace.
   ========================================================================== */

@media (min-width: 768px) {
  /* Lead paragraphs under section headings */
  :root body .sec-sub,
  :root body .contact__lead,
  :root body .about__copy p,
  :root body .about-intro__text,
  :root body .values__text,
  :root body .areas__note {
    font-size: clamp(16px, 1.1vw, 19px);
    line-height: 1.6;
  }

  /* Card, list and supporting copy */
  :root body .svc-card__text,
  :root body .prop-card__body p,
  :root body .ind-card__text,
  :root body .expertise__text,
  :root body .review__text,
  :root body .faq__a p,
  :root body .ask-card__text,
  :root body .value-card__text,
  :root body .contact-card__text,
  :root body .contact-card__label,
  :root body .contact-map__address,
  :root body .contact-form__label,
  :root body .contact-rows__item a,
  :root body .contact-rows__item span,
  :root body .site-footer__blurb,
  :root body .site-footer__col a,
  :root body .site-footer__col span,
  :root body .link-arrow,
  :root body .review__name,
  :root body .team-card__role {
    font-size: 16px;
  }

  :root body .svc-card__text,
  :root body .prop-card__body p,
  :root body .ind-card__text,
  :root body .expertise__text,
  :root body .review__text,
  :root body .faq__a p,
  :root body .ask-card__text,
  :root body .value-card__text,
  :root body .site-footer__blurb { line-height: 1.55; }

  :root body .checklist__item { font-size: clamp(16px, 1vw, 18px); }

  :root body .about-intro .checklist__item { font-size: clamp(16px, 1.16vw, 20px); }

  /* Small labels: eyebrows, meta and fine print */
  :root body .eyebrow { font-size: 14px; }

  :root body .review__role,
  :root body .site-footer__legal,
  :root body .site-footer__legal-links a { font-size: 14px; }

  :root body .svc-card .btn--sm { font-size: 14px; }

  :root body .trust__score,
  :root body .google-pill__score { font-size: 12px; }
}
/* === TYPE-MIN:END === */


/* === BLOG:BEGIN === */
/* ==========================================================================
   Blog listing and single post.
   Listing: dark rounded hero with the headline left, intro right and the
   category chips; the card grid overlaps the hero's lower edge.
   Single: dark hero with breadcrumb + meta, article with sticky sidebar,
   related posts.
   ========================================================================== */

.bicon { flex: none; }

/* --- Hero (listing + single) -------------------------------------------------- */

.blog-hero,
.post-hero {
  padding: 15px var(--gutter) 0;
  background: var(--c-ink);
}

.blog-hero__card,
.post-hero__card {
  position: relative;
  max-width: var(--card-max);
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(0, 246, 200, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0, 133, 113, 0.22), transparent 70%),
    linear-gradient(165deg, #043b4d 0%, #01293a 55%, #002331 100%);
}

.blog-hero__card { padding: clamp(56px, 6.4vw, 110px) 0 clamp(170px, 14vw, 240px); }

.post-hero__card { padding: clamp(48px, 5.6vw, 96px) 0 clamp(56px, 5.6vw, 96px); border-radius: var(--r-card); }

.post-hero { padding-bottom: 15px; }

/* Faint dot grid, top right */
.blog-hero__dots {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: min(46%, 640px);
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1.6px, transparent 2.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(215deg, #000 10%, transparent 70%);
          mask-image: linear-gradient(215deg, #000 10%, transparent 70%);
  pointer-events: none;
}

.blog-hero__inner,
.post-hero__inner,
.blog-cats,
.blog-list > .u-container,
.post-body > .u-container,
.blog-related > .u-container {
  max-width: var(--canvas);
  padding-inline: clamp(20px, 4.4vw, 76px);
}

.blog-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: end;
}

.blog-hero__title,
.post-hero__title {
  margin-top: 18px;
  font-size: clamp(38px, 3.9vw, 68px);
  line-height: 1.12;
  color: var(--c-white);
}

.blog-hero__sub {
  max-width: 520px;
  justify-self: end;
  font-size: clamp(16px, 1.16vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* Category chips */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 48px);
}

.blog-cats__chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: var(--fw-sem);
  color: rgba(255, 255, 255, 0.86);
  transition: background-color var(--t-fast) var(--e-soft), border-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}

.blog-cats__chip:hover { border-color: var(--c-accent-bright); color: var(--c-white); }

.blog-cats__chip.is-active {
  background: var(--grad-cta);
  border-color: transparent;
  color: var(--c-ink);
}

/* --- Listing grid --------------------------------------------------------------- */

.blog-list {
  padding-bottom: clamp(64px, 7vw, 120px);
  background: linear-gradient(var(--c-ink) 0, var(--c-ink) 1px, var(--c-surface) 1px);
}

.blog-list > .u-container {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(130px, 11vw, 190px));
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.9vw, 32px);
}

/* --- Post card --------------------------------------------------------------------- */

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--c-white);
  border: 1px solid #e3eaea;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 35, 49, 0.06);
  transition: transform 450ms var(--e-out), box-shadow 450ms var(--e-out), border-color var(--t-base) var(--e-soft);
}

.post-card__media { position: relative; }

.post-card__img { border-radius: 16px; }

.post-card__img img { transition: transform 900ms var(--e-out); }

.post-card__cat {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 14px;
  background: var(--c-white);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(0, 35, 49, 0.14);
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: var(--fw-sem);
  color: var(--c-kit-primary);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 14px 14px;
}

.post-card__meta,
.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 14px;
  color: #5b6b71;
}

.post-card__meta span,
.post-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }

.post-card__meta .bicon { width: 16px; height: 16px; color: var(--c-kit-primary); }

.post-card__title {
  margin: 12px 0 10px;
  font-size: clamp(19px, 1.3vw, 22px);
  line-height: 1.3;
  color: var(--c-ink);
  transition: color var(--t-fast) var(--e-soft);
}

/* The title link covers the whole card. */
.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.post-card__link:focus-visible { outline: 0; }

.post-card:has(.post-card__link:focus-visible) { outline: 3px solid var(--c-accent-bright); outline-offset: 3px; }

.post-card__excerpt {
  display: -webkit-box;
  margin-bottom: 18px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.55;
  color: #4a5a60;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-kit-primary);
}

.post-card__more .bicon { transition: transform var(--t-base) var(--e-spring); }

@media (hover: hover) and (pointer: fine) {
  .post-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 26px 50px rgba(0, 35, 49, 0.16);
  }

  .post-card:hover .post-card__img img { transform: scale(1.06); }

  .post-card:hover .post-card__title { color: var(--c-kit-primary); }

  .post-card:hover .post-card__more .bicon { transform: translateX(6px); }
}

/* Load more */
.blog-more { display: flex; justify-content: center; margin-top: clamp(36px, 3.6vw, 60px); }

.blog-more__btn.is-loading { pointer-events: none; opacity: 0.7; }

.blog-more__btn.is-loading .btn__icon img { animation: sac-spin 800ms linear infinite; }

@keyframes sac-spin { to { transform: rotate(360deg); } }

.post-card.is-new { animation: sac-card-in 600ms var(--e-out) both; }

@keyframes sac-card-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.blog-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 24px;
  background: var(--c-white);
  border-radius: 22px;
  text-align: center;
  color: #4a5a60;
  box-shadow: 0 10px 30px rgba(0, 35, 49, 0.06);
}

.blog-empty__title { margin-bottom: 10px; font-size: 28px; color: var(--c-ink); }

.blog-empty .btn { margin-top: 24px; }

/* --- Single post -------------------------------------------------------------------- */

.post-hero__inner { max-width: 1100px; margin-inline: auto; text-align: center; }

.crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

.crumbs a { transition: color var(--t-fast) var(--e-soft); }

.crumbs a:hover,
.crumbs a:last-child { color: var(--c-accent-bright); }

.crumbs .bicon { width: 14px; height: 14px; opacity: 0.6; }

.post-hero__title { margin-inline: auto; max-width: 980px; font-size: clamp(34px, 3.4vw, 58px); }

.post-hero__meta { justify-content: center; margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, 0.8); }

.post-hero__meta .bicon { color: var(--c-accent-bright); }

.post-body {
  padding: clamp(48px, 5vw, 90px) 0 clamp(56px, 6vw, 110px);
  background: var(--c-surface);
  color: var(--c-ink);
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.post-main { margin: 0; padding: 0; }

.post-main__media {
  margin: 0 0 clamp(28px, 3vw, 44px);
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 16 / 9;
  background: #e6ecec;
}

.post-main__media img { width: 100%; height: 100%; object-fit: cover; }

/* Article typography */
.prose {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.8;
  color: #33434a;
}

.prose > * + * { margin-top: 1.1em; }

.prose h2,
.prose h3,
.prose h4 { color: var(--c-ink); line-height: 1.25; }

.prose h2 { margin-top: 1.8em; font-size: clamp(26px, 2vw, 34px); }

.prose h3 { margin-top: 1.6em; font-size: clamp(21px, 1.5vw, 26px); }

.prose h2 + *,
.prose h3 + * { margin-top: 0.6em; }

.prose a { color: var(--c-kit-primary); text-decoration: underline; text-underline-offset: 3px; }

.prose strong { color: var(--c-ink); }

.prose ul,
.prose ol { display: grid; gap: 10px; padding: 0; }

.prose ul li {
  position: relative;
  padding-left: 30px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(8, 200, 182, 0.18);
}

.prose ol { counter-reset: prose; }

.prose ol li { position: relative; padding-left: 38px; counter-increment: prose; }

.prose ol li::before {
  content: counter(prose);
  position: absolute;
  top: 0.15em;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-kit-primary);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.prose blockquote {
  margin-inline: 0;
  padding: 24px 28px;
  background: var(--c-white);
  border-left: 4px solid var(--c-accent);
  border-radius: 0 16px 16px 0;
  box-shadow: 0 10px 30px rgba(0, 35, 49, 0.06);
  font-family: var(--ff-head);
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: var(--fw-sem);
  line-height: 1.55;
  color: var(--c-ink);
}

.prose img,
.prose .wp-block-image img { border-radius: 16px; }

.prose figure { margin-inline: 0; }

.prose figcaption { margin-top: 8px; font-size: 14px; color: #6b7a80; text-align: center; }

/* Tags + share */
.post-main__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(36px, 3.4vw, 56px);
  padding-top: 26px;
  border-top: 1px solid #dfe6e6;
}

.post-tags,
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.post-tags__label,
.post-share__label { font-family: var(--ff-head); font-weight: var(--fw-bold); color: var(--c-ink); }

.post-tags__tag {
  padding: 6px 14px;
  background: var(--c-white);
  border: 1px solid #dfe6e6;
  border-radius: var(--r-pill);
  font-size: 14px;
  transition: border-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}

.post-tags__tag:hover { border-color: var(--c-kit-primary); color: var(--c-kit-primary); }

.post-share__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--c-white);
  border: 1px solid #dfe6e6;
  border-radius: 50%;
  color: var(--c-ink);
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft), transform var(--t-base) var(--e-spring), border-color var(--t-fast);
}

.post-share__btn svg { width: 19px; height: 19px; }

.post-share__btn:hover,
.post-share__btn.is-copied { background: var(--c-kit-primary); border-color: var(--c-kit-primary); color: var(--c-white); transform: translateY(-2px); }

/* Previous / next */
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.post-nav__link {
  display: grid;
  gap: 6px;
  padding: 20px 24px;
  background: var(--c-white);
  border: 1px solid #e3eaea;
  border-radius: 18px;
  transition: border-color var(--t-fast) var(--e-soft), transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}

.post-nav__link--next { grid-column: 2; text-align: right; }

.post-nav__dir { font-size: 14px; font-weight: var(--fw-sem); color: var(--c-kit-primary); text-transform: uppercase; letter-spacing: 0.06em; }

.post-nav__title { font-family: var(--ff-head); font-size: 17px; font-weight: var(--fw-bold); line-height: 1.35; color: var(--c-ink); }

.post-nav__link:hover { border-color: var(--c-kit-primary); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 35, 49, 0.1); }

/* --- Sidebar ---------------------------------------------------------------------------- */

.post-side {
  position: sticky;
  top: calc(var(--h-navband) + 24px + var(--wp-admin--admin-bar--height, 0px));
  display: grid;
  gap: 22px;
}

.side-card {
  padding: 24px;
  background: var(--c-white);
  border: 1px solid #e3eaea;
  border-radius: 20px;
}

.side-card__title {
  position: relative;
  margin-bottom: 18px;
  padding-bottom: 12px;
  font-size: 20px;
  color: var(--c-ink);
}

.side-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-cta);
}

.side-search { position: relative; }

.side-search__input {
  width: 100%;
  height: 52px;
  padding: 0 56px 0 18px;
  background: var(--c-surface);
  border: 1px solid #e3eaea;
  border-radius: var(--r-pill);
  font-size: 16px;
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--e-soft), box-shadow var(--t-fast) var(--e-soft);
}

.side-search__input:focus { outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(8, 200, 182, 0.18); }

.side-search__btn {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--c-kit-primary);
  border: 0;
  border-radius: 50%;
  color: var(--c-white);
}

.side-cats { display: grid; gap: 10px; }

.side-cats__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 10px 0 18px;
  background: var(--c-surface);
  border-radius: 14px;
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: var(--fw-sem);
  color: var(--c-ink);
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}

.side-cats__link > span:first-child { flex: 1; }

.side-cats__count { font-size: 14px; color: #6b7a80; }

.side-cats__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--c-white);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft), transform var(--t-base) var(--e-spring);
}

.side-cats__arrow .bicon { width: 16px; height: 16px; }

.side-cats__link:hover,
.side-cats__link.is-active { background: rgba(0, 133, 113, 0.1); color: var(--c-kit-primary); }

.side-cats__link:hover .side-cats__arrow,
.side-cats__link.is-active .side-cats__arrow { background: var(--c-kit-primary); color: var(--c-white); transform: translateX(3px); }

.side-cats__link:hover .side-cats__count,
.side-cats__link.is-active .side-cats__count { color: var(--c-kit-primary); }

.side-recent { display: grid; gap: 16px; }

.side-recent__link { display: flex; gap: 14px; align-items: center; }

.side-recent__thumb {
  flex: none;
  width: 82px;
  height: 70px;
  overflow: hidden;
  border-radius: 12px;
  background: #e6ecec;
}

.side-recent__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--e-out); }

.side-recent__text { display: grid; gap: 4px; }

.side-recent__title {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--c-ink);
  transition: color var(--t-fast) var(--e-soft);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.side-recent__date { font-size: 14px; color: #6b7a80; }

.side-recent__link:hover .side-recent__title { color: var(--c-kit-primary); }

.side-recent__link:hover .side-recent__thumb img { transform: scale(1.08); }

/* Contact card */
.side-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 32px 26px 28px;
  background: linear-gradient(150deg, #0aa38c 0%, var(--c-kit-primary) 45%, var(--c-kit-primary-dark) 100%);
  border-radius: 22px;
  color: var(--c-white);
  text-align: center;
}

.side-cta__rings {
  position: absolute;
  top: -90px;
  right: -90px;
  z-index: -1;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.06), 0 0 0 60px rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.08);
}

.side-cta__title { font-size: clamp(24px, 1.7vw, 28px); line-height: 1.2; color: var(--c-white); }

.side-cta__text { margin-top: 10px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }

.side-cta__phone {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-family: var(--ff-head);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.side-cta__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  background: var(--c-white);
  border-radius: 50%;
  color: var(--c-kit-primary);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16);
  animation: sac-pulse 2.4s ease-out infinite;
}

.side-cta__icon .bicon { width: 24px; height: 24px; }

@keyframes sac-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.side-cta__btn { margin-top: 22px; }

/* --- Related ---------------------------------------------------------------------------- */

.blog-related {
  padding: clamp(56px, 6vw, 110px) 0;
  background: var(--c-white);
  color: var(--c-ink);
}

.blog-related .sec-head { align-items: end; margin-bottom: clamp(28px, 3vw, 48px); }

.blog-related .btn--outline { color: var(--c-ink); border-color: var(--c-ink); }

.blog-related .btn--outline .btn__icon { background: var(--c-ink); }

.blog-related .btn--outline .btn__icon img { filter: brightness(0) invert(1); }

/* --- Responsive ----------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .post-layout { grid-template-columns: minmax(0, 1fr); }

  .post-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .blog-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .blog-hero__sub { justify-self: start; font-size: 15px; }

  .blog-hero__title,
  .post-hero__title { font-size: 32px; }

  .blog-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }

  .blog-cats::-webkit-scrollbar { display: none; }

  .blog-cats__chip { flex: none; min-height: 38px; font-size: 14px; }

  .blog-grid { grid-template-columns: minmax(0, 1fr); }

  .post-hero__card { border-radius: 20px; }

  .post-hero__meta { gap: 6px 14px; font-size: 14px; }

  .post-side { grid-template-columns: minmax(0, 1fr); }

  .post-nav { grid-template-columns: minmax(0, 1fr); }

  .post-nav__link--next { grid-column: auto; }

  .blog-related .sec-head--split { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-card__img img,
  .side-cta__icon { transition: none; animation: none; }

  .post-card:hover { transform: none; }
}
/* === BLOG:END === */

/* === HEADER-COMPACT:BEGIN === */
/* Shorter header band: smaller pill, logo and quote button, less air
   above and below. The hero height follows --h-navband automatically. */
:root {
  --h-navband: 88px;
  --h-navpill: 58px;
  --navpill-top: 15px;
}

@media (max-width: 1180px) {
  :root { --h-navband: 74px; }
}

@media (max-width: 767px) {
  :root { --h-navband: 60px; }
}

.site-header .brand__img { width: auto; height: 60px; }

.site-header__cta.btn { gap: 10px; padding: 5px 5px 5px 18px; }

.site-header__cta .btn__icon { width: 36px; height: 36px; padding: 10px; }

.site-header__cta .btn__icon img,
.site-header__cta .btn__icon svg { width: 16px; height: 16px; }

.site-header .nav__item--active .nav__link { padding: 8px 16px; }

@media (max-width: 1180px) {
  .site-header .brand__img { height: 50px; }
}

@media (max-width: 767px) {
  .site-header .brand__img { height: 40px; }
}
/* The card is wider than the photo's ratio on most screens, so cover
   crops top and bottom. Anchor to the top so the camera is never cut;
   only the dark foot of the photo is trimmed. */
.hero__bg { object-position: 50% 0%; }
/* === HEADER-COMPACT:END === */

/* === CARD-HOVER:BEGIN === */
/* Property cards: the teal foot appears on hover only, never by default. */
.property .prop-card,
.property .prop-card--featured {
  box-shadow: 0 12px 0 -4px transparent;
  transition: box-shadow var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}

.property .prop-card:hover,
.property .prop-card:focus-within {
  box-shadow: 0 12px 0 -4px var(--c-kit-primary);
  transform: translateY(-6px);
}

/* Industries: every description is hidden until its card is hovered.
   Touch screens have no hover, so they keep the text visible. */
@media (hover: hover) {
  .industries .ind-card .ind-card__text,
  .industries .ind-card:first-child .ind-card__text {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
  }

  .industries .ind-card:is(:hover, :focus-within) .ind-card__text {
    max-height: 160px;
    margin-top: 8px;
    opacity: 1;
  }

  .industries .ind-card__text {
    transition: max-height 380ms var(--e-out), opacity 300ms var(--e-soft), margin-top 380ms var(--e-out);
  }
}
/* === CARD-HOVER:END === */

/* === CTA-SLANT:BEGIN === */
/* CTA band as drawn: a dark parallelogram on white, rising to the right,
   with a teal stripe along its top and bottom edges. The rise is 162px
   over the 1728 frame (9.4vw); the stripes are 28px. Phones keep their
   own layout (max-width 767 rules). */
@media (min-width: 768px) {
  .cta-van {
    --cta-rise: 9.4vw;
    --cta-stripe: clamp(14px, 1.62vw, 28px);
    isolation: isolate;
    margin: 0;
    padding: calc(var(--cta-rise) + var(--cta-stripe) + 48px) 0 calc(var(--cta-rise) + var(--cta-stripe) + 48px);
    background: var(--c-white);
  }

  .cta-van::before,
  .cta-van::after {
    inset: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
    transform: none;
  }

  .cta-van::before {
    top: 0;
    bottom: 0;
    background: var(--c-kit-primary);
    clip-path: polygon(0 var(--cta-rise), 100% 0, 100% calc(100% - var(--cta-rise)), 0 100%);
  }

  .cta-van::after {
    top: 0;
    bottom: 0;
    background: var(--c-ink);
    clip-path: polygon(
      0 calc(var(--cta-rise) + var(--cta-stripe)),
      100% var(--cta-stripe),
      100% calc(100% - var(--cta-rise) - var(--cta-stripe)),
      0 calc(100% - var(--cta-stripe))
    );
  }

  .cta-van__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 40px);
  }

  .cta-van__media { order: 0; }

  .cta-van .sec-title {
    max-width: 14em;
    font-size: clamp(26px, 3.14vw, 56px);
    font-weight: var(--fw-sem);
    line-height: 1.3;
  }

  :root body .cta-van .sec-sub {
    max-width: 27em;
    font-size: clamp(16px, 1.36vw, 24px);
    line-height: 1.4;
  }
}

@media (min-width: 1101px) {
  .cta-van > .u-container {
    max-width: var(--canvas);
    padding-inline: clamp(20px, 4.4vw, 76px);
  }

  .cta-van__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 2vw, 40px);
  }

  .cta-van { padding: clamp(80px, 11.6vw, 200px) 0 clamp(72px, 10.7vw, 185px); }

  .cta-van__media { margin-right: clamp(0px, 1.7vw, 30px); }
}

/* Phones: the van drops below the buttons at full width instead of
   squeezing into a 150px column beside the copy. */
@media (max-width: 767px) {
  .cta-van { padding-bottom: 52px; }

  .cta-van__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cta-van__media {
    order: 0;
    width: calc(100% + 10px);
    max-width: 440px;
    margin: 22px -10px 0 auto;
  }

  .cta-van__figure {
    aspect-ratio: 887 / 443;
    border-radius: 0;
  }
}
/* === CTA-SLANT:END === */

/* === FOOTER-SITEMAP:BEGIN === */
/* Value cards: smooth colour change on hover. */
.value-card,
.value-card::before,
.value-card__icon,
.value-card__title,
.value-card__text {
  transition: background-color var(--t-base) var(--e-soft), color var(--t-base) var(--e-soft);
}

/* Footer contact rows with icons. */
.site-footer__contact .site-footer__ci {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.site-footer__contact .site-footer__cicon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 246, 200, 0.12);
  color: var(--c-accent-bright);
  transition: background-color var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}

.site-footer__contact .site-footer__cicon .bicon { width: 16px; height: 16px; }

.site-footer__contact a.site-footer__ci:hover .site-footer__cicon {
  background: var(--c-accent-bright);
  color: var(--c-ink);
}

/* Blog listing hero: photo behind a dark fade so the copy stays readable. */
.blog-hero__card.has-photo {
  background:
    linear-gradient(100deg, rgba(0, 35, 49, 0.97) 0%, rgba(0, 35, 49, 0.9) 38%, rgba(0, 35, 49, 0.55) 72%, rgba(0, 35, 49, 0.45) 100%),
    var(--blog-hero-img) center / cover no-repeat,
    var(--c-ink);
}

@media (max-width: 767px) {
  .blog-hero__card.has-photo {
    background:
      linear-gradient(180deg, rgba(0, 35, 49, 0.9) 0%, rgba(0, 35, 49, 0.82) 100%),
      var(--blog-hero-img) center / cover no-repeat,
      var(--c-ink);
  }
}

/* Images placed inside articles. */
.prose .wp-block-image { margin: clamp(26px, 2.4vw, 40px) 0; }

.prose .wp-block-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Plain pages (privacy, terms). */
.page-main { max-width: 900px; margin-inline: auto; }

/* HTML sitemap. */
.sitemap {
  columns: 4 260px;
  column-gap: clamp(16px, 1.6vw, 26px);
}

.sitemap__group {
  break-inside: avoid;
  margin-bottom: clamp(16px, 1.6vw, 26px);
  padding: clamp(22px, 2vw, 32px);
  background: var(--c-white);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 35, 49, 0.06);
}

.sitemap__title {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e3eaea;
  font-family: var(--ff-head);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.sitemap__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.sitemap__list a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  font-size: 16px;
  line-height: 1.4;
  color: #33474e;
  transition: color var(--t-fast) var(--e-soft), transform var(--t-fast) var(--e-out);
}

.sitemap__list a .bicon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--c-kit-primary); }

.sitemap__list a:hover { color: var(--c-kit-primary); transform: translateX(4px); }
/* === FOOTER-SITEMAP:END === */

/* === MOBILE-READ:BEGIN === */
@media (max-width: 767px) {
  /* Hero photo: the landscape photo no longer covers the whole tall card
     (which left only a thin slice of it). It fills the top 60%, anchored
     left where the subjects sit, and fades into the dark card under the
     copy. */
  .hero__card { background-color: #01212e; }

  .hero__bg {
    bottom: auto;
    height: 60%;
    object-position: 20% 50%;
    -webkit-mask-image: linear-gradient(#000 62%, transparent);
    mask-image: linear-gradient(#000 62%, transparent);
  }

  /* Readable text on phones: card descriptions 14px, section intros 15px. */
  :root body .svc-card__text,
  :root body .prop-card__body p,
  :root body .ind-card__text,
  :root body .industries .ind-card:first-child .ind-card__text,
  :root body .expertise__text,
  :root body .value-card__text,
  :root body .review__text,
  :root body .ask-card__text,
  :root body .faq__a p,
  :root body .contact-card__text,
  :root body .contact-map__address,
  :root body .post-card__excerpt,
  :root body .team-card__role,
  :root body .review__role {
    font-size: 14px;
    line-height: 1.5;
  }

  :root body .sec-sub,
  :root body .contact__lead,
  :root body .areas__note,
  :root body .values__text,
  :root body .about__copy p,
  :root body .about-intro__text,
  :root body .cta-van .sec-sub {
    font-size: 15px;
    line-height: 1.55;
  }

  :root body .eyebrow { font-size: 12px; }

  :root body .trust__score,
  :root body .google-pill__score { font-size: 11px; }

  :root body .btn { font-size: 12.5px; }

  :root body .site-footer__legal { font-size: 13px; }

  /* CTA band buttons at the normal phone size. */
  .cta-van .actions { gap: 10px; }

  .cta-van .actions .btn { height: auto; padding: 5px 5px 5px 14px; gap: 8px; font-size: 13px; }

  .cta-van .actions .btn__icon { width: 30px; height: 30px; padding: 8px; }

  .cta-van .actions .btn__icon img { width: 14px; height: 14px; }

  /* Room for the longer descriptions. */
  .industries .ind-card { min-height: 300px; }
  .svc-card__body { padding-bottom: 16px; }
}
/* === MOBILE-READ:END === */

/* === THANKS:BEGIN === */
.thanks {
  padding: 15px var(--gutter) 0;
  background: var(--c-ink);
}

.thanks__card {
  position: relative;
  max-width: var(--card-max);
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 7vw, 120px) 0 clamp(64px, 7vw, 120px);
  border-radius: var(--r-card);
  background:
    radial-gradient(ellipse 55% 70% at 50% 0%, rgba(0, 246, 200, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0, 133, 113, 0.22), transparent 70%),
    linear-gradient(165deg, #043b4d 0%, #01293a 55%, #002331 100%);
  text-align: center;
}

.thanks__inner {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thanks__check {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--grad-cta);
  color: var(--c-ink);
  box-shadow: 0 0 0 12px rgba(0, 246, 200, 0.1), 0 18px 40px rgba(0, 246, 200, 0.25);
  animation: sac-thanks-pop 700ms var(--e-out) both;
}

.thanks__tick {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: sac-thanks-tick 520ms 420ms var(--e-out) forwards;
}

@keyframes sac-thanks-pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sac-thanks-tick {
  to { stroke-dashoffset: 0; }
}

.thanks .eyebrow { justify-content: center; }

.thanks__title {
  margin-top: 16px;
  font-size: clamp(34px, 3.9vw, 66px);
  line-height: 1.12;
  color: var(--c-white);
}

.thanks__title .u-accent-bright { display: block; }

.thanks__text {
  max-width: 640px;
  margin-top: 20px;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.thanks__actions { justify-content: center; margin-top: 34px; }

.thanks__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

.thanks__note .bicon { color: var(--c-accent-bright); }

/* Next steps */
.thanks-next {
  padding: clamp(64px, 7vw, 120px) 0 clamp(40px, 4vw, 70px);
  background: var(--c-white);
}

.thanks-next .sec-head--center,
.thanks-next .sec-head { text-align: center; }

.thanks-next .eyebrow { justify-content: center; }

.thanks-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 30px);
  max-width: 1300px;
  margin: clamp(32px, 3vw, 52px) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.thanks-step {
  position: relative;
  padding: clamp(26px, 2.4vw, 40px);
  background: var(--c-surface);
  border-radius: 22px;
  transition: transform var(--t-base) var(--e-out), background-color var(--t-base) var(--e-soft), box-shadow var(--t-base) var(--e-soft);
}

.thanks-step:hover {
  transform: translateY(-6px);
  background: var(--c-white);
  box-shadow: 0 18px 40px rgba(0, 35, 49, 0.1);
}

.thanks-step__num {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--c-kit-primary);
  color: var(--c-white);
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: var(--fw-bold);
}

.thanks-step__title {
  margin: 0 0 10px;
  font-family: var(--ff-head);
  font-size: clamp(19px, 1.4vw, 23px);
  color: var(--c-ink);
}

.thanks-step__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3d4c52;
}

@media (max-width: 900px) {
  .thanks-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .thanks { padding-top: 10px; }
  .thanks__card { border-radius: 20px; padding: 48px 0; }
  .thanks__check { width: 76px; height: 76px; margin-bottom: 20px; }
  .thanks__title { font-size: 30px; }
  .thanks__text { font-size: 15px; }
  .thanks__note { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .thanks__check, .thanks__tick { animation: none; stroke-dashoffset: 0; }
}
/* === THANKS:END === */

/* === LEGAL:BEGIN === */
.page-main .prose .legal-updated {
  display: inline-block;
  margin-bottom: 28px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 133, 113, 0.1);
  font-size: 14px;
  color: var(--c-kit-primary);
}

.page-main .prose .legal-updated strong { color: var(--c-kit-primary); }

.page-main {
  padding: clamp(28px, 3vw, 56px);
  background: var(--c-white);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 35, 49, 0.05);
}

@media (max-width: 767px) {
  .page-main { padding: 22px 18px; border-radius: 18px; }
}
/* === LEGAL:END === */

/* === FLOAT-CALL:BEGIN === */
/* Floating call button, bottom right on every page. */
.float-call {
  position: fixed;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 7px 7px 7px 26px;
  border-radius: 999px;
  background: var(--c-kit-primary);
  box-shadow: 0 14px 34px rgba(0, 35, 49, 0.32);
  color: var(--c-white);
  font-family: var(--ff-body);
  font-size: 19px;
  font-weight: var(--fw-med);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  animation: sac-float-in 600ms 400ms var(--e-out) both;
  transition: transform var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-soft), box-shadow var(--t-fast) var(--e-soft);
}

.float-call:hover,
.float-call:focus-visible {
  transform: translateY(-3px);
  background: var(--c-kit-primary-dark);
  box-shadow: 0 18px 40px rgba(0, 35, 49, 0.4);
  color: var(--c-white);
}

.float-call:focus-visible { outline: 2px solid var(--c-accent-bright); outline-offset: 3px; }

.float-call__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-white);
  color: #1d1d1d;
}

/* Soft pulse behind the phone circle. */
.float-call__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: sac-float-pulse 2.4s var(--e-soft) infinite;
  z-index: -1;
}

.float-call__icon svg { animation: sac-float-ring 2.4s ease-in-out infinite; }

.float-call:hover .float-call__icon svg { animation-duration: 0.9s; }

@keyframes sac-float-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes sac-float-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

@keyframes sac-float-ring {
  0%, 60%, 100% { transform: rotate(0); }
  64% { transform: rotate(-14deg); }
  68% { transform: rotate(12deg); }
  72% { transform: rotate(-10deg); }
  76% { transform: rotate(8deg); }
  80% { transform: rotate(0); }
}

/* Out of the way while the phone menu is open. */
body.nav-open .float-call { opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
  .float-call {
    right: 14px;
    bottom: 14px;
    gap: 10px;
    padding: 5px 5px 5px 16px;
    font-size: 15px;
  }

  .float-call__icon { width: 38px; height: 38px; }

  .float-call__icon svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-call,
  .float-call__icon::before,
  .float-call__icon svg { animation: none; }
}

@media print {
  .float-call { display: none; }
}
/* === FLOAT-CALL:END === */

/* === SERVICE-SEO:BEGIN === */
/* Applications (service pages) */
.apps {
  padding: clamp(64px, 7vw, 120px) 0;
  background: var(--c-surface);
}

.apps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
  margin: clamp(32px, 3vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.2vw, 36px);
  background: var(--c-white);
  border-radius: 22px;
  overflow: hidden;
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-soft);
}

.app-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--grad-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--e-out);
}

.apps .app-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 35, 49, 0.1);
}

.app-card:hover::after { transform: scaleX(1); }

.app-card__num {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: rgba(0, 35, 49, 0.18);
}

.app-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: rgba(0, 133, 113, 0.1);
  color: var(--c-kit-primary);
  transition: background-color var(--t-base) var(--e-soft), color var(--t-base) var(--e-soft);
}

.app-card:hover .app-card__icon { background: var(--c-kit-primary); color: var(--c-white); }

.app-card__title {
  margin: 0 0 10px;
  font-family: var(--ff-head);
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.3;
  color: var(--c-ink);
}

.app-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3d4c52;
}

/* Related services (internal links) */
.related-svc {
  padding: clamp(56px, 6vw, 100px) 0;
  background: var(--c-white);
}

.related-svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  margin: clamp(28px, 2.6vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid #e1e8e8;
  border-radius: 20px;
  background: var(--c-surface);
  text-decoration: none;
  transition: transform var(--t-base) var(--e-out), background-color var(--t-base) var(--e-soft), border-color var(--t-base) var(--e-soft);
}

.related-card__title {
  font-family: var(--ff-head);
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--c-ink);
  transition: color var(--t-base) var(--e-soft);
}

.related-card__text {
  font-size: 15px;
  line-height: 1.55;
  color: #4a5a60;
  transition: color var(--t-base) var(--e-soft);
}

.related-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: var(--fw-sem);
  color: var(--c-kit-primary);
  transition: color var(--t-base) var(--e-soft), gap var(--t-fast) var(--e-out);
}

.related-card:hover {
  transform: translateY(-5px);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.related-card:hover .related-card__title { color: var(--c-white); }
.related-card:hover .related-card__text { color: rgba(255, 255, 255, 0.78); }
.related-card:hover .related-card__more { color: var(--c-accent-bright); gap: 12px; }

@media (max-width: 1100px) {
  .apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .apps__grid { grid-template-columns: minmax(0, 1fr); }
  :root body .app-card__text { font-size: 14px; }
  .related-svc__grid { grid-template-columns: minmax(0, 1fr); }
}
/* === SERVICE-SEO:END === */

/* === HERO-H1:BEGIN === */
/* Desktop hero headline: 60px (scales down a little below 1400px wide so
   it never crowds the quote form). */
@media (min-width: 1181px) {
  :root body .hero__title {
    font-size: min(60px, 4.3vw);
    line-height: 1.15;
  }

  /* Inner pages carry longer headlines than the home page's two lines. */
  :root body:not(.home) .hero__title { max-width: 15em; }
}
/* === HERO-H1:END === */

/* === HERO-ENTER:BEGIN === */
/* Hero entrance: the copy rises in one piece after another, the quote
   form follows, and the photo settles from a slight zoom. CSS only, so
   nothing waits on scripts; the photo never fades (it is the first thing
   the browser paints). Skipped for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title,
  .hero__sub,
  .hero__actions,
  .hero__proof {
    animation: sac-hero-up 800ms var(--e-out) both;
  }

  .hero__title { animation-delay: 120ms; }
  .hero__sub { animation-delay: 260ms; }
  .hero__actions { animation-delay: 400ms; }
  .hero__proof { animation-delay: 540ms; }

  .hero .quote-card { animation: sac-hero-card 900ms var(--e-out) 320ms both; }

  .hero__bg { animation: sac-hero-zoom 1800ms var(--e-out) both; }
}

@keyframes sac-hero-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes sac-hero-card {
  from { opacity: 0; transform: translateY(36px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes sac-hero-zoom {
  from { transform: scale(1.08); }
  to { transform: none; }
}
/* === HERO-ENTER:END === */

/* === APP-ICON-IMG BEGIN: uploaded icons on application cards === */

.app-card__icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  transition: filter var(--t-base) var(--e-soft);
}

/* The tile turns teal on hover, so the icon turns white with it. */
.app-card:hover .app-card__icon img { filter: brightness(0) invert(1); }

/* === APP-ICON-IMG END === */

/* === HEADING-TAGS BEGIN: form and footer titles are text, not headings === */

p.quote-card__title,
p.site-footer__heading {
  font-family: var(--ff-head);
  letter-spacing: -0.01em;
}

/* === HEADING-TAGS END === */

/* === HERO-BADGES BEGIN: licence and membership logos under the hero buttons === */

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  list-style: none;
}

.hero__badges > li { display: flex; }

.hero-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 10px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  color: var(--c-ink);
  text-decoration: none;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-soft);
}

a.hero-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.hero-badge__logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: 180px;
  object-fit: contain;
}

.hero-badge__text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-ink);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hero__badges { gap: 10px; }
  .hero-badge { min-height: 54px; padding: 8px 12px; border-radius: 12px; }
  .hero-badge__logo { height: 28px; max-width: 140px; }
  .hero-badge__text { font-size: 11px; }
}

/* === HERO-BADGES END === */

/* === AREAS-MAP BEGIN: show the whole service-area map, whatever its shape === */

.areas .areas__map {
  aspect-ratio: auto;
  height: auto;
}

.areas .areas__map img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* === AREAS-MAP END === */

/* === AREAS-MAP-SIZE BEGIN: a larger service-area map on desktop === */

@media (min-width: 1101px) {
  .areas .areas__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

/* === AREAS-MAP-SIZE END === */