/*
Theme Name: KC Handyman & Property Services
Theme URI: https://kchandymanservices.co.za
Author: KC Handyman & Property Services
Author URI: https://kchandymanservices.co.za
Description: Custom theme for KC Handyman & Property Services (Benoni, Gauteng). Owner-managed handyman, maintenance, renovation, roofing, waterproofing, aluminium and property services. Built from the original static design with editable brand, hero, services, gallery, reviews and contact content via the Customizer and native custom post types.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kc-handyman
Tags: business, custom-logo, custom-menu, featured-images, two-columns, full-width-template
*/

:root {
  --black: #070707;
  --black-soft: #111111;
  --charcoal: #202020;
  --white: #ffffff;
  --off-white: #f7f7f4;
  --line: #dedbd3;
  --gold: #c7972d;
  --gold-light: #f4d476;
  --text: #181818;
  --muted: #65625d;
  --green: #334237;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

.icon-sprite {
  display: none;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

section {
  scroll-margin-top: 88px;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 96px;
  padding: 12px 28px;
  color: var(--white);
  background: #000;
  border-bottom: 1px solid rgba(199, 151, 45, 0.36);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 7px 12px;
  background: #000;
  border: 1px solid rgba(199, 151, 45, 0.22);
  border-radius: 8px;
}

.brand img {
  width: 108px;
  height: 63px;
  object-fit: contain;
  background: #000;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 10px 13px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 650;
  border-radius: 6px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.site-nav .nav-cta {
  margin-left: 6px;
  color: var(--black);
  background: var(--gold);
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color: var(--black);
  background: var(--gold-light);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  cursor: pointer;
}

.menu-toggle span {
  width: 20px;
  height: 2px;
  background: var(--white);
}

.hero {
  position: relative;
  min-height: 78svh;
  display: grid;
  align-items: center;
  color: var(--white);
  background: var(--black) url("assets/img/hero-team-benoni.jpg") center / cover no-repeat;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.68) 43%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.48));
}

.hero-frame {
  position: absolute;
  inset: 34px;
  z-index: 1;
  border: 1px solid rgba(244, 212, 118, 0.18);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 42px;
  align-items: center;
  padding: 96px 0 92px;
}

.hero-copy-block {
  max-width: 780px;
}

.eyebrow,
.section-kicker,
.card-kicker {
  margin: 0 0 12px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 750;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 740px;
  margin: 0;
  font-size: 4.55rem;
  line-height: 1.02;
  font-weight: 850;
}

.hero-copy {
  max-width: 650px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.18rem;
}

.hero-actions,
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.btn-gold {
  color: var(--black);
  background: var(--gold);
  border-color: var(--gold);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.btn-ghost {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero-proof {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
  margin: 8px 0 0;
}

.hero-proof div {
  position: relative;
  padding: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.hero-proof-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  color: var(--gold-light);
}

.hero-proof dt {
  color: var(--gold-light);
  font-size: 1.42rem;
  font-weight: 900;
}

.hero-proof dd {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}

.hero-service-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 430px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(7, 7, 7, 0.12), rgba(7, 7, 7, 0.88)),
    url("assets/projects/extracted/roof-repair-restoration-after.jpg") center / cover no-repeat;
  border: 1px solid rgba(244, 212, 118, 0.28);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.hero-service-card span {
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-service-card h2 {
  margin-top: 12px;
  font-size: 1.54rem;
}

.hero-service-card p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.76);
}

.hero-service-card a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 11px 14px;
  color: var(--black);
  background: var(--gold);
  border-radius: 6px;
  font-weight: 800;
}

.hero-slider-ui {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.hero-slider-ui button {
  min-height: 38px;
  padding: 8px 14px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.hero-slider-ui div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-slider-ui span {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}

.hero-slider-ui .is-active {
  width: 28px;
  background: var(--gold-light);
  border-radius: 999px;
}

.service-strip {
  position: relative;
  z-index: 3;
  margin-top: -42px;
}

.service-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
}

.service-strip-grid a {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-right: 1px solid var(--line);
  font-weight: 800;
}

.service-strip-grid a:last-child {
  border-right: 0;
}

.service-strip-grid .icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  color: var(--black);
  background: var(--gold);
  border-radius: 8px;
}

.marquee-band {
  overflow: hidden;
  padding: 54px 0 0;
  background: var(--off-white);
}

.marquee-band div {
  display: flex;
  gap: 18px;
  width: max-content;
  min-width: 100%;
  padding: 14px 0;
  color: var(--black);
  background: var(--gold);
  transform: rotate(-1deg);
}

.marquee-band span {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.marquee-band span::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--black);
  border-radius: 50%;
}

.section,
.section-light,
.section-dark {
  padding: 88px 0;
}

.section-light {
  background: var(--off-white);
}

.section-dark {
  color: var(--white);
  background: var(--black);
}

.intro-grid,
.owner-grid,
.quote-grid,
.contact-grid,
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.section-kicker {
  color: var(--gold);
}

.section-dark .section-kicker {
  color: var(--gold-light);
}

h2 {
  margin: 0;
  font-size: 2.42rem;
  line-height: 1.14;
  font-weight: 800;
}

h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.32;
  font-weight: 750;
}

p {
  margin: 0;
}

.intro-copy p + p,
.owner-panel p + p {
  margin-top: 16px;
}

.intro-copy,
.section-heading p,
.owner-panel p,
.why p,
.quote p {
  color: var(--muted);
  font-size: 1.02rem;
}

.section-dark .why p,
.section-dark .quote p {
  color: rgba(255, 255, 255, 0.72);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

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

.section-heading p:last-child {
  margin-top: 14px;
}

.page-cta {
  padding-top: 0;
}

.page-cta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.page-cta-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  color: var(--white);
  background: var(--black);
  border: 1px solid rgba(199, 151, 45, 0.26);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.page-cta-card:hover,
.page-cta-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(244, 212, 118, 0.7);
  background: #12110f;
  outline: none;
}

.page-cta-card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 800;
}

.page-cta-card span .icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  color: var(--black);
  background: var(--gold);
  border-radius: 8px;
}

.page-cta-card h2 {
  margin-top: 22px;
  font-size: 1.32rem;
}

.page-cta-card p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.94rem;
  line-height: 1.45;
}

.service-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.service-feature {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}

.service-feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-feature div {
  padding: 22px;
}

.card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 0.76rem;
}

.card-kicker .icon {
  width: 17px;
  height: 17px;
}

.service-feature p:last-child {
  margin-top: 10px;
  color: var(--muted);
}

.service-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.service-list {
  padding: 24px;
  color: var(--white);
  background: var(--black-soft);
  border: 1px solid rgba(199, 151, 45, 0.24);
  border-radius: 8px;
}

.service-list h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
}

.service-list h3 .icon {
  width: 26px;
  height: 26px;
  padding: 5px;
  color: var(--black);
  background: var(--gold);
  border-radius: 7px;
}

.service-list ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.service-list li {
  position: relative;
  padding-left: 17px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.67em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

.process {
  background:
    linear-gradient(180deg, #ffffff, var(--off-white));
}

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.process-card {
  position: relative;
  min-height: 260px;
  padding: 26px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.08);
}

.process-card::after {
  content: "";
  position: absolute;
  top: 26px;
  right: -28px;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(199, 151, 45, 0.28);
  transform: rotate(45deg);
}

.process-card > span {
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(7, 7, 7, 0.1);
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 900;
}

.process-card .icon {
  width: 42px;
  height: 42px;
  padding: 9px;
  color: var(--black);
  background: var(--gold);
  border-radius: 8px;
}

.process-card h3 {
  margin-top: 28px;
  font-size: 1.12rem;
}

.process-card p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

.why {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #070707 0%, #10100f 52%, #171511 100%);
}

.why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(199, 151, 45, 0.12), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, 100% 54px;
}

.why-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: stretch;
}

.why-copy {
  align-self: center;
  padding: 12px 0;
}

.why-copy h2 {
  max-width: 620px;
}

.why-copy > p {
  max-width: 600px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.72);
}

.why-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.why-metrics div {
  min-height: 118px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.why-metrics strong,
.why-metrics span {
  display: block;
}

.why-metrics strong {
  color: var(--gold-light);
  font-size: 1.46rem;
  line-height: 1.05;
  font-weight: 800;
}

.why-metrics span {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  line-height: 1.35;
}

.why-showcase {
  position: relative;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 212, 118, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.why-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-showcase img[src*="service-aluminium"] {
  object-position: 58% center;
}

.why-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.82));
}

.why-showcase figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  padding: 18px;
  background: rgba(7, 7, 7, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.why-showcase figcaption strong,
.why-showcase figcaption span {
  display: block;
}

.why-showcase figcaption strong {
  color: var(--white);
  font-size: 1.02rem;
}

.why-showcase figcaption span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.45;
}

.why-list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.why-list article {
  padding: 22px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.why-card-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  color: var(--gold-light);
}

.why-list span {
  display: block;
  margin-bottom: 12px;
  color: var(--gold-light);
  font-size: 0.86rem;
  font-weight: 800;
}

.why-list p {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.94rem;
  line-height: 1.45;
}

.owner-panel {
  padding: 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.owner-stats {
  display: grid;
  gap: 16px;
}

.owner-stats div {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  color: var(--white);
  background: var(--black);
  border-radius: 8px;
}

.owner-stats strong {
  color: var(--gold-light);
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 800;
}

.owner-stats span {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.75);
}

.portfolio {
  background: var(--white);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.filter-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  color: var(--text);
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.filter-btn .icon {
  width: 17px;
  height: 17px;
}

.filter-btn:hover,
.filter-btn:focus-visible,
.filter-btn.is-active {
  color: var(--black);
  background: var(--gold);
  border-color: var(--gold);
  outline: none;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.project-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.project-card.is-hidden {
  display: none;
}

.project-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--black);
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}

.project-media figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}

.project-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-media figcaption {
  position: absolute;
  top: 10px;
  left: 10px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  color: var(--black);
  background: rgba(244, 212, 118, 0.94);
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.project-info {
  padding: 17px 18px 18px;
}

.project-info p {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.project-info h3 {
  color: var(--text);
  font-size: 1.02rem;
}

.project-info span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.45;
}

.reviews {
  background:
    linear-gradient(180deg, var(--off-white), #ffffff);
}

.reviews-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 26px;
}

.reviews-head p:last-child {
  color: var(--muted);
}

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

.review-card {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  overflow: hidden;
  color: var(--white);
  background: var(--black);
  border: 1px solid rgba(199, 151, 45, 0.28);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12);
}

.review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(244, 212, 118, 0.12), transparent 46%);
}

.review-stars {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 5px;
  color: var(--gold-light);
}

.review-stars .icon {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: currentColor;
}

.review-card > p {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.04rem;
  line-height: 1.6;
}

.review-card footer {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.review-card strong,
.review-card span {
  display: block;
}

.review-card strong {
  color: var(--white);
  font-size: 0.98rem;
}

.review-card span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
}

.quote {
  background:
    linear-gradient(rgba(7, 7, 7, 0.9), rgba(7, 7, 7, 0.94)),
    url("assets/img/service-aluminium.jpg") center / cover no-repeat;
}

.quote-form {
  padding: 28px;
  color: var(--text);
  background: var(--white);
  border: 1px solid rgba(199, 151, 45, 0.44);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.form-row {
  margin-bottom: 16px;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--charcoal);
  font-size: 0.9rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  color: var(--text);
  background: #fbfbfa;
  border: 1px solid #cfcac0;
  border-radius: 6px;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  outline: 3px solid rgba(199, 151, 45, 0.22);
}

input[type="file"] {
  padding: 10px;
}

.form-note,
.form-status {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.88rem;
}

.form-submit {
  width: 100%;
}

.contact-grid {
  align-items: stretch;
}

.contact-methods {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.contact-methods a {
  position: relative;
  display: block;
  min-height: 86px;
  padding: 20px 20px 20px 64px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.contact-icon {
  position: absolute;
  left: 20px;
  top: 24px;
  width: 26px;
  height: 26px;
  color: var(--gold);
}

.contact-methods a:hover,
.contact-methods a:focus-visible {
  border-color: var(--gold);
  outline: none;
}

.contact-methods span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-methods strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 1.08rem;
}

.map-wrap {
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--black);
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

.site-footer {
  padding: 28px 0;
  color: rgba(255, 255, 255, 0.78);
  background: var(--black);
  border-top: 1px solid rgba(199, 151, 45, 0.28);
}

.footer-grid {
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
}

.site-footer strong {
  color: var(--white);
}

.site-footer p {
  margin-top: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 700;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--gold-light);
  outline: none;
}

.footer-grid > div:last-child a {
  display: block;
  text-align: right;
}

.footer-grid > div:last-child a + a {
  margin-top: 6px;
}

@media (max-width: 1040px) {
  .hero-content {
    grid-template-columns: 1fr;
  }

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

  .hero-service-card {
    min-height: 320px;
  }

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

  .service-strip-grid a:nth-child(2) {
    border-right: 0;
  }

  .service-strip-grid a:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .service-list-grid,
  .page-cta-grid,
  .reviews-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-feature-grid {
    grid-template-columns: 1fr;
  }

  .why-shell {
    grid-template-columns: 1fr;
  }

  .why-showcase {
    min-height: 360px;
  }

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

  .service-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .service-feature img {
    height: 100%;
  }
}

@media (max-width: 820px) {
  .container {
    width: min(100% - 28px, 680px);
  }

  .site-header {
    min-height: 86px;
    padding: 10px 14px;
  }

  .brand img {
    width: 87px;
    height: 51px;
  }

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

  .site-nav {
    position: fixed;
    inset: 86px 14px auto 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    background: rgba(7, 7, 7, 0.98);
    border: 1px solid rgba(199, 151, 45, 0.34);
    border-radius: 8px;
    box-shadow: var(--shadow);
  }

  body.nav-open .site-nav {
    display: flex;
  }

  .site-nav a,
  .site-nav .nav-cta {
    width: 100%;
    margin: 0;
    justify-content: center;
  }

  .hero {
    min-height: 76svh;
    background-position: 63% center;
  }

  .hero-frame {
    inset: 18px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    padding: 70px 0 58px;
  }

  .hero h1 {
    font-size: 2.78rem;
    line-height: 1.02;
  }

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

  .hero-proof,
  .intro-grid,
  .reviews-head,
  .owner-grid,
  .quote-grid,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-proof {
    max-width: 100%;
  }

  .hero-service-card {
    min-height: 280px;
  }

  .service-strip {
    margin-top: 0;
  }

  .service-strip-grid {
    border-radius: 0;
  }

  .marquee-band {
    padding-top: 34px;
  }

  .section,
  .section-light,
  .section-dark {
    padding: 64px 0;
  }

  h2 {
    font-size: 2rem;
  }

  .intro-grid,
  .owner-grid,
  .quote-grid,
  .contact-grid,
  .footer-grid {
    gap: 28px;
  }

  .service-feature {
    display: block;
  }

  .why-metrics {
    grid-template-columns: 1fr;
  }

  .why-showcase {
    min-height: 300px;
  }

  .service-list-grid,
  .page-cta-grid,
  .service-strip-grid,
  .process-grid,
  .reviews-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .service-strip-grid a {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-strip-grid a:last-child {
    border-bottom: 0;
  }

  .form-row.two-col {
    grid-template-columns: 1fr;
  }

  .footer-grid > div:last-child a {
    text-align: left;
  }
}

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

  .hero-content {
    padding: 58px 0 46px;
  }

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

  .hero-service-card,
  .hero-slider-ui {
    display: none;
  }

  .hero-actions,
  .quick-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }

  .owner-panel,
  .quote-form,
  .service-list {
    padding: 20px;
  }

  .why-list {
    grid-template-columns: 1fr;
  }

  .why-showcase figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px;
  }

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

  .filter-btn {
    width: 100%;
  }
}

/* Reference-inspired editorial refresh */
:root {
  --ink: #071317;
  --ink-2: #102128;
  --ink-3: #172a2f;
  --paper: #f7f2e8;
  --paper-deep: #ece2d2;
  --amber: #d1a447;
  --amber-light: #f2d27a;
  --serif: Georgia, Cambria, "Times New Roman", serif;
  --radius: 2px;
}

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

#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--amber-light));
  pointer-events: none;
}

.site-header {
  min-height: 96px;
  padding: 12px 34px;
  background: #000;
  border-bottom: 1px solid rgba(242, 210, 122, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

.brand {
  padding: 8px 14px;
  background: #000;
  border-color: rgba(242, 210, 122, 0.24);
  border-radius: var(--radius);
}

.brand img {
  width: 108px;
  height: 63px;
}

.site-nav a,
.btn,
.filter-btn,
.hero-slider-ui button,
.hero-service-card a,
.planner-result a {
  border-radius: var(--radius);
}

.site-nav a,
.eyebrow,
.section-kicker,
.card-kicker,
.service-strip-grid a,
.marquee-band span,
.hero-service-card span,
.planner-result span,
.trust-strip p,
.trust-strip span,
.project-info p,
label {
  letter-spacing: 0;
}

h1,
h2,
.hero-tagline,
.hero-service-card h2,
.planner-result strong,
.hero-stat strong,
.quote-metric strong {
  font-family: var(--serif);
  font-weight: 500;
}

h2 {
  font-size: 2.72rem;
  line-height: 1.08;
}

.hero {
  min-height: 100svh;
  max-height: 980px;
  background-color: var(--ink);
  background-position: 58% center;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7, 19, 23, 0.96) 0%, rgba(7, 19, 23, 0.78) 46%, rgba(7, 19, 23, 0.18) 78%),
    linear-gradient(0deg, rgba(7, 19, 23, 0.58), rgba(7, 19, 23, 0.08) 48%);
}

.hero-frame {
  inset: 48px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 0;
}

.hero-content {
  grid-template-columns: minmax(0, 1fr);
  min-height: 780px;
  padding: 138px 0 104px;
}

.hero-copy-block {
  max-width: 820px;
}

.eyebrow {
  color: var(--amber-light);
  font-size: 0.9rem;
  text-transform: none;
}

.hero h1 {
  max-width: 800px;
  font-size: 5.15rem;
  line-height: 0.98;
  font-weight: 500;
}

.hero-tagline {
  max-width: 760px;
  margin: 20px 0 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1.12;
}

.hero-copy {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.04rem;
}

.btn {
  min-height: 50px;
  padding: 13px 20px;
  font-weight: 800;
}

.btn-gold {
  background: var(--amber);
  border-color: var(--amber);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: var(--amber-light);
  border-color: var(--amber-light);
}

.hero-service-card {
  min-height: 455px;
  padding: 30px;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.35);
}

.hero-service-card h2 {
  font-size: 1.85rem;
  line-height: 1.08;
}

.hero-service-card a {
  background: var(--amber);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.hero-proof div {
  min-width: 190px;
  padding: 16px 18px;
  background: rgba(16, 33, 40, 0.62);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
}

.hero-proof dt {
  color: var(--amber-light);
}

.hero-stat {
  position: absolute;
  right: 0;
  bottom: 36px;
  width: 218px;
  padding: 23px 25px;
  color: #fff;
  background: rgba(16, 33, 40, 0.74);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.hero-stat span,
.hero-stat p {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.82rem;
}

.hero-stat span {
  color: var(--amber-light);
  font-weight: 800;
  text-transform: uppercase;
}

.hero-stat strong {
  display: block;
  margin: 7px 0 4px;
  color: #fff;
  font-size: 3rem;
  line-height: 0.95;
}

.hero-stat sup {
  color: var(--amber-light);
  font-size: 1.2rem;
}

.service-strip {
  margin-top: 0;
  background: #fff;
  border-bottom: 1px solid rgba(16, 33, 40, 0.1);
}

.service-strip-grid {
  width: min(1180px, calc(100% - 40px));
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.service-strip-grid a {
  min-height: 108px;
  padding: 24px 22px;
  color: var(--ink);
  font-weight: 800;
}

.service-strip-grid .icon {
  color: var(--ink);
  background: var(--amber);
  border-radius: var(--radius);
}

.trust-strip {
  padding: 24px 0;
  color: #5d6768;
  background: #fff;
  border-bottom: 1px solid rgba(16, 33, 40, 0.1);
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.trust-strip p {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.trust-strip span {
  color: #687375;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.marquee-band {
  padding: 42px 0 0;
  background: var(--paper);
}

.marquee-band div {
  background: var(--amber);
}

.section,
.section-light,
.section-dark {
  padding: 110px 0;
}

.section-light {
  background: var(--paper);
}

.services,
.portfolio {
  background: #fff;
}

.quote-planner {
  padding-top: 98px;
}

.planner-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(250px, 0.62fr);
  align-items: stretch;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 33, 40, 0.14);
}

.planner-copy {
  padding: 42px;
  border-right: 1px solid rgba(16, 33, 40, 0.1);
}

.planner-copy p:not(.section-kicker) {
  margin-top: 18px;
  color: var(--muted);
}

.text-link {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  color: var(--ink);
  font-weight: 850;
  border-bottom: 2px solid var(--amber);
}

.planner-steps {
  display: grid;
}

.planner-steps article {
  position: relative;
  padding: 32px 34px;
  border-bottom: 1px solid rgba(16, 33, 40, 0.1);
}

.planner-steps article:last-child {
  border-bottom: 0;
}

.planner-steps span {
  display: block;
  margin-bottom: 10px;
  color: var(--amber);
  font-weight: 900;
}

.planner-steps p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.94rem;
}

.planner-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(209, 164, 71, 0.12), transparent 46%),
    var(--ink-2);
}

.planner-result strong {
  display: block;
  margin-top: 12px;
  font-size: 2.05rem;
  line-height: 1.05;
}

.planner-result p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.72);
}

.planner-result a {
  display: inline-flex;
  justify-content: center;
  margin-top: 24px;
  padding: 12px 16px;
  color: var(--ink);
  background: var(--amber);
  font-weight: 900;
}

.intro-grid,
.owner-grid,
.quote-grid,
.contact-grid,
.footer-grid {
  gap: 70px;
}

.page-cta-card,
.service-feature,
.service-list,
.process-card,
.why-list article,
.why-showcase,
.why-showcase figcaption,
.owner-panel,
.owner-stats div,
.project-card,
.review-card,
.quote-form,
.contact-methods a,
.map-wrap {
  border-radius: var(--radius);
}

.page-cta-card,
.service-list,
.review-card {
  background: var(--ink);
}

.service-feature {
  box-shadow: 0 16px 42px rgba(16, 33, 40, 0.1);
}

.service-feature img {
  aspect-ratio: 1.16 / 1;
}

.service-list {
  background: var(--ink-2);
  border-color: rgba(209, 164, 71, 0.24);
}

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

.process .section-heading p:last-child {
  color: rgba(255, 255, 255, 0.66);
}

.process-card {
  min-height: 335px;
  padding: 40px 36px;
  color: #fff;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: none;
  transition: transform 180ms ease, background 180ms ease;
}

.process-card:hover {
  background: var(--ink-3);
  transform: translateY(-6px);
}

.process-card::after {
  display: none;
}

.process-card > span {
  color: rgba(255, 255, 255, 0.16);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
}

.process-card .icon {
  color: var(--ink);
  background: var(--amber);
  border-radius: var(--radius);
}

.process-card p {
  color: rgba(255, 255, 255, 0.68);
}

.why {
  background:
    linear-gradient(135deg, rgba(209, 164, 71, 0.08), transparent 42%),
    var(--ink-2);
}

.owner-panel {
  box-shadow: 0 18px 48px rgba(16, 33, 40, 0.1);
}

.owner-stats div {
  background: var(--ink);
}

.project-card,
.review-card {
  box-shadow: 0 18px 42px rgba(16, 33, 40, 0.12);
}

.quote {
  background:
    linear-gradient(90deg, rgba(7, 19, 23, 0.96), rgba(7, 19, 23, 0.84)),
    url("assets/img/service-aluminium.jpg") center / cover no-repeat;
}

.quote-form {
  background: var(--paper);
  border-color: rgba(209, 164, 71, 0.38);
}

input,
select,
textarea {
  background: #fffdfa;
  border-radius: var(--radius);
}

.contact {
  background: #fff;
}

.site-footer {
  background: var(--ink);
}

@media (max-width: 1040px) {
  .hero {
    min-height: auto;
    max-height: none;
  }

  .hero-content {
    grid-template-columns: 1fr;
    min-height: 720px;
  }

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

  .hero-stat {
    display: none;
  }

  .planner-card {
    grid-template-columns: 1fr;
  }

  .planner-copy,
  .planner-steps article {
    border-right: 0;
    border-bottom: 1px solid rgba(16, 33, 40, 0.1);
  }

  .trust-strip-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .site-header {
    min-height: 86px;
    padding: 10px 14px;
  }

  .brand img {
    width: 87px;
    height: 51px;
  }

  .hero {
    min-height: auto;
    background-position: 64% center;
  }

  .hero-frame {
    inset: 18px;
  }

  .hero-content {
    min-height: 690px;
    padding: 98px 0 64px;
  }

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

  .hero-tagline {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 2.12rem;
  }

  .section,
  .section-light,
  .section-dark {
    padding: 72px 0;
  }

  .quote-planner {
    padding-top: 72px;
  }

  .planner-copy,
  .planner-steps article,
  .planner-result {
    padding: 28px;
  }

  .service-strip-grid {
    width: min(100% - 28px, 680px);
  }
}

@media (max-width: 520px) {
  .hero-content {
    min-height: auto;
    padding: 74px 0 50px;
  }

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

  .hero-tagline {
    font-size: 1.26rem;
  }

  .hero-frame {
    display: none;
  }

  .trust-strip-inner {
    gap: 12px 16px;
  }

  .trust-strip p {
    width: 100%;
  }

  .planner-copy,
  .planner-steps article,
  .planner-result {
    padding: 22px;
  }
}

/* Google-style review cards */
.reviews {
  background: var(--paper);
}

.reviews-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.reviews-summary {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 225px;
  padding: 16px 18px;
  color: #202124;
  background: #fff;
  border: 1px solid #e3e5e8;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(16, 33, 40, 0.08);
}

.reviews-summary strong,
.reviews-summary span {
  display: block;
}

.reviews-summary strong {
  color: #202124;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
}

.reviews-summary span:not(.google-mark) {
  margin-top: 4px;
  color: #5f6368;
  font-size: 0.88rem;
}

.google-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: transparent;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 42%, #fbbc04 0 62%, #ea4335 0 78%, #4285f4 0);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
}

.review-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px;
  color: #202124;
  background: #fff;
  border: 1px solid #e3e5e8;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(16, 33, 40, 0.09);
}

.review-card::before {
  display: none;
}

.review-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.review-top img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #dadce0;
}

.review-top strong,
.review-top span {
  display: block;
}

.review-top strong {
  color: #202124;
  font-size: 1rem;
  font-weight: 800;
}

.review-top span:not(.google-mark) {
  margin-top: 2px;
  color: #5f6368;
  font-size: 0.88rem;
}

.review-top .google-mark {
  align-self: start;
  width: 28px;
  height: 28px;
  font-size: 1.24rem;
}

.review-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
}

.review-stars {
  color: #fbbc04;
}

.review-stars .icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: currentColor;
}

.review-meta > span {
  color: #5f6368;
  font-size: 0.9rem;
  font-weight: 700;
}

.review-card > p {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  color: #3c4043;
  font-size: 0.98rem;
  line-height: 1.6;
}

.review-card footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #eef0f2;
}

.review-card footer span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  color: #5f6368;
  background: #f8fafd;
  border: 1px solid #eef0f2;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 750;
}

@media (max-width: 820px) {
  .reviews-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .reviews-summary {
    justify-self: start;
    width: 100%;
    max-width: 360px;
  }
}

/* Premium typography cleanup */
:root {
  --font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: Georgia, Cambria, "Times New Roman", serif;
}

* {
  letter-spacing: 0;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
}

h1,
h2,
h3,
.hero-tagline,
.planner-result strong,
.hero-stat strong,
.quote-metric strong {
  font-family: var(--font-heading);
  font-weight: 500;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h2 {
  max-width: 820px;
  font-size: 2.86rem;
  line-height: 1.08;
}

h3 {
  font-size: 1.24rem;
  line-height: 1.22;
}

.hero h1 {
  max-width: 860px;
  font-size: 5rem;
  line-height: 0.98;
}

.hero-tagline {
  max-width: 760px;
  margin-top: 18px;
  font-size: 1.82rem;
  line-height: 1.18;
}

.hero-copy,
.intro-copy,
.section-heading p,
.owner-panel p,
.why p,
.quote p,
.planner-copy p:not(.section-kicker),
.planner-steps p,
.project-info span,
.review-card > p,
.contact-methods strong {
  font-size: 1rem;
  line-height: 1.68;
}

.eyebrow,
.section-kicker,
.card-kicker,
.project-info p,
.trust-strip p,
.hero-stat span,
.service-list h3,
label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow {
  text-transform: none;
}

.site-nav a {
  font-size: 0.9rem;
  font-weight: 650;
}

.btn,
.nav-cta,
.hero-slider-ui button,
.filter-btn,
.text-link,
.planner-result a,
.hero-proof dt,
.why-metrics strong,
.owner-stats strong,
.reviews-summary strong,
.review-top strong {
  font-family: var(--font-body);
  font-weight: 750;
}

.btn {
  font-size: 0.95rem;
}

.hero-proof dt {
  font-size: 1.28rem;
  line-height: 1.05;
}

.hero-proof dd,
.why-metrics span,
.trust-strip span,
.service-list li,
.review-top span:not(.google-mark),
.review-meta > span,
.review-card footer span,
.form-note,
.form-status,
.site-footer,
.footer-links a {
  font-size: 0.9rem;
  line-height: 1.45;
}

.page-cta-card h2,
.service-feature h3,
.process-card h3,
.why-list h3,
.project-info h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.18;
}

.page-cta-card h2 {
  font-size: 1.48rem;
}

.service-feature h3,
.process-card h3,
.why-list h3 {
  font-size: 1.34rem;
}

.project-info h3 {
  font-size: 1.18rem;
}

.service-list h3 {
  color: var(--amber-light);
}

.quote-form,
input,
select,
textarea,
button {
  font-family: var(--font-body);
}

input,
select,
textarea {
  font-size: 0.98rem;
}

.reviews-summary strong {
  font-size: 1.46rem;
}

.google-mark {
  font-family: Arial, sans-serif;
  font-weight: 900;
}

@media (max-width: 1040px) {
  .hero h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 2.44rem;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 15.5px;
  }

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

  .hero-tagline {
    font-size: 1.46rem;
  }

  h2 {
    font-size: 2.12rem;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 15px;
  }

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

  .hero-tagline {
    font-size: 1.24rem;
  }

  h2 {
    font-size: 1.86rem;
  }

  h3,
  .page-cta-card h2,
  .service-feature h3,
  .process-card h3,
  .why-list h3 {
    font-size: 1.18rem;
  }
}

/* Larger supplied logo */
.site-header {
  min-height: 174px;
}

.brand img {
  width: 243px;
  height: 143px;
}

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

  .brand img {
    width: 197px;
    height: 116px;
  }
}

@media (max-width: 520px) {
  .brand {
    padding: 6px 9px;
  }

  .brand img {
    width: 183px;
    height: 108px;
  }
}

/* WhatsApp brand buttons */
.whatsapp-icon {
  fill: currentColor;
  stroke: none;
}

.whatsapp-button,
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: #25d366;
  border-color: #25d366;
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.22);
}

.whatsapp-button:hover,
.whatsapp-button:focus-visible,
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  color: #fff;
  background: #1ebe5d;
  border-color: #1ebe5d;
  outline: none;
}

.planner-result .whatsapp-button {
  margin-top: 24px;
  padding: 12px 16px;
  color: #fff;
  background: #25d366;
  font-weight: 800;
}

.planner-result .whatsapp-button span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.contact-methods a.contact-whatsapp {
  border-color: rgba(37, 211, 102, 0.34);
}

.contact-methods a.contact-whatsapp:hover,
.contact-methods a.contact-whatsapp:focus-visible {
  border-color: #25d366;
}

.contact-whatsapp .contact-icon {
  color: #25d366;
}

/* Premium service directory */
.service-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
  counter-reset: service-directory;
}

.service-list {
  position: relative;
  counter-increment: service-directory;
  overflow: hidden;
  padding: 0;
  color: var(--ink);
  background: #fffdfa;
  border: 1px solid rgba(16, 33, 40, 0.12);
  box-shadow: 0 18px 42px rgba(16, 33, 40, 0.1);
}

.service-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--amber), rgba(209, 164, 71, 0));
}

.service-list::after {
  content: "0" counter(service-directory);
  position: absolute;
  top: 18px;
  right: 24px;
  color: rgba(16, 33, 40, 0.08);
  font-family: var(--font-heading);
  font-size: 3.35rem;
  line-height: 1;
}

.service-list h3 {
  position: relative;
  z-index: 1;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 26px 92px 24px 28px;
  color: var(--ink);
  background: linear-gradient(180deg, #fffdfa, #f6efe3);
  border-bottom: 1px solid rgba(16, 33, 40, 0.1);
  font-family: var(--font-heading);
  font-size: 1.38rem;
  font-weight: 500;
  line-height: 1.14;
  text-transform: none;
}

.service-list h3 .icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  color: var(--ink);
  background: var(--amber);
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(209, 164, 71, 0.22);
}

.service-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  padding: 28px;
  margin: 0;
}

.service-list li {
  position: relative;
  min-height: 28px;
  display: flex;
  align-items: flex-start;
  padding-left: 30px;
  color: #344044;
  font-size: 0.95rem;
  line-height: 1.45;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(135deg, rgba(209, 164, 71, 0.18), rgba(209, 164, 71, 0.38)),
    #fff8e6;
  border: 1px solid rgba(209, 164, 71, 0.5);
  border-radius: 50%;
}

.service-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.48rem;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

@media (max-width: 1040px) {
  .service-list-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .service-list h3 {
    min-height: 0;
    padding: 22px 70px 20px 22px;
    font-size: 1.22rem;
  }

  .service-list h3 .icon {
    width: 38px;
    height: 38px;
  }

  .service-list ul {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

/* Premium portfolio gallery */
.portfolio {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fffdfa 0%, var(--paper) 100%);
}

.portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(209, 164, 71, 0.08), transparent 34%),
    linear-gradient(rgba(16, 33, 40, 0.04) 1px, transparent 1px);
  background-size: auto, 100% 58px;
}

.portfolio > .container {
  position: relative;
  z-index: 1;
}

.portfolio .section-heading {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.portfolio .section-heading h2 {
  margin-right: auto;
  margin-left: auto;
}

.filter-bar {
  justify-content: center;
  gap: 9px;
  margin-bottom: 34px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 33, 40, 0.1);
  border-radius: 999px;
  box-shadow: 0 16px 36px rgba(16, 33, 40, 0.08);
  backdrop-filter: blur(10px);
}

.filter-btn {
  min-height: 42px;
  gap: 9px;
  padding: 10px 16px;
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 750;
}

.filter-btn .icon {
  width: 18px;
  height: 18px;
}

.filter-btn:hover,
.filter-btn:focus-visible,
.filter-btn.is-active {
  color: var(--ink);
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 10px 22px rgba(209, 164, 71, 0.22);
}

.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.project-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16, 33, 40, 0.1);
  border-radius: 10px;
  box-shadow: 0 20px 48px rgba(16, 33, 40, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(209, 164, 71, 0.46);
  box-shadow: 0 26px 60px rgba(16, 33, 40, 0.18);
}

.project-media {
  position: relative;
  gap: 0;
  background: var(--ink);
  border-bottom: 0;
}

.project-media::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.project-media figure {
  background: var(--ink);
}

.project-media img {
  aspect-ratio: 1.42 / 1;
  transition: transform 360ms ease, filter 360ms ease;
}

.project-card:hover .project-media img {
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.03);
}

.project-media figcaption {
  top: 12px;
  left: 12px;
  min-height: 30px;
  padding: 6px 11px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--amber-light), var(--amber));
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  font-size: 0.72rem;
  font-weight: 850;
}

.project-info {
  position: relative;
  min-height: 166px;
  padding: 24px 24px 26px;
}

.project-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 54px;
  height: 3px;
  background: var(--amber);
}

.project-info p {
  margin-bottom: 8px;
  color: #a66f00;
  font-size: 0.76rem;
  font-weight: 800;
}

.project-info h3 {
  color: var(--ink);
  font-size: 1.28rem;
}

.project-info span {
  max-width: 34rem;
  margin-top: 10px;
  color: #526166;
  font-size: 0.98rem;
  line-height: 1.58;
}

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

@media (max-width: 820px) {
  .filter-bar {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 8px;
    border-radius: 10px;
  }

  .filter-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 620px) {
  .portfolio .section-heading {
    text-align: left;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .project-info {
    min-height: 0;
    padding: 22px;
  }
}

/* Unboxed larger logo and clean hero */
.brand {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.brand img {
  width: 243px;
  height: 143px;
}

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

.hero-frame {
  display: none;
}

@media (max-width: 820px) {
  .brand img {
    width: 228px;
    height: 134px;
  }

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

@media (max-width: 520px) {
  .brand img {
    width: 190px;
    height: 112px;
  }

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

/* =========================================================
   WordPress integration styles (additive — does not alter
   the original landing-page design above)
   ========================================================= */

/* Keep the sticky header clear of the WP admin bar */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .site-nav { inset: 132px 14px auto 14px; }
}

/* Generic inner pages / single posts */
.kc-page {
  padding: 64px 0 88px;
  background: var(--off-white);
}
.kc-page .container { max-width: 820px; }
.kc-article-header { margin-bottom: 28px; }
.entry-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
  margin: 0 0 10px;
  color: var(--text);
}
.entry-meta {
  color: var(--muted);
  font-size: 0.9rem;
}
.entry-content { color: var(--text); }
.entry-content > * { margin-top: 0; margin-bottom: 1.1em; }
.entry-content h2 { font-size: 1.7rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.35rem; margin-top: 1.4em; }
.entry-content a { color: var(--gold); text-decoration: underline; }
.entry-content img { border-radius: 10px; height: auto; }
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 14px 22px;
  border-left: 4px solid var(--gold);
  background: #fff;
  border-radius: 0 10px 10px 0;
  color: var(--muted);
}
.entry-content ul,
.entry-content ol { padding-left: 1.25em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content code {
  background: #efece4;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}
.entry-content pre {
  background: var(--black);
  color: var(--off-white);
  padding: 18px;
  border-radius: 10px;
  overflow: auto;
}
.featured-media { margin-bottom: 26px; }
.featured-media img { width: 100%; border-radius: 14px; }

/* WordPress core alignment / caption / accessibility helpers */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { width: min(1180px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption .wp-caption-text,
.wp-caption-text { font-size: 0.85rem; color: var(--muted); margin-top: 6px; text-align: center; }
.sticky, .gallery-caption { display: block; }
.bypostauthor { display: block; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; clip: auto; clip-path: none;
  color: var(--text); display: block; height: auto; width: auto;
  left: 8px; top: 8px; padding: 12px 18px; z-index: 100000;
  border-radius: 6px; box-shadow: var(--shadow);
}

/* Pagination + posts list */
.kc-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.kc-pagination .page-numbers {
  display: inline-flex;
  min-width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 650;
}
.kc-pagination .page-numbers.current,
.kc-pagination .page-numbers:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.kc-post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.kc-post-card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.kc-post-card h2 a:hover { color: var(--gold); }
.kc-readmore {
  display: inline-flex;
  margin-top: 12px;
  color: var(--gold);
  font-weight: 700;
}

/* Comments */
.kc-comments { margin-top: 48px; }
.kc-comments .comment-list { list-style: none; padding: 0; }
.kc-comments .comment-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.kc-comments .comment-author { font-weight: 700; }
.kc-comments .comment-respond input[type="text"],
.kc-comments .comment-respond input[type="email"],
.kc-comments .comment-respond input[type="url"],
.kc-comments .comment-respond textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
}

/* =========================================================
   Enhancements: larger gallery + lightbox, floating WhatsApp,
   mobile action bar, scroll-to-top, footer credit
   ========================================================= */

/* --- Larger before/after gallery + click-to-enlarge --- */
.portfolio-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
@media (min-width: 621px) {
  .project-media img { aspect-ratio: 1.28 / 1; }
}
.project-media {
  cursor: zoom-in;
}
.project-media:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.project-media::after {
  content: "\2922";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(7, 7, 7, 0.74);
  border-radius: 999px;
  font-size: 19px;
  line-height: 1;
  pointer-events: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.project-media:hover::after,
.project-media:focus::after {
  background: var(--gold);
  color: #111;
  transform: scale(1.06);
}
@media (max-width: 1040px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* --- Lightbox --- */
body.kc-lb-open { overflow: hidden; }
.kc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kc-lightbox.is-open { display: flex; }
.kc-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.82);
}
.kc-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.kc-lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(7, 7, 7, 0.72);
  border: 0;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.kc-lightbox-close:hover { background: var(--gold); color: #111; }
.kc-lightbox-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #000;
}
.kc-lightbox-media figure {
  position: relative;
  margin: 0;
}
.kc-lightbox-media img {
  width: 100%;
  max-height: 66vh;
  object-fit: cover;
  display: block;
}
.kc-lightbox-media figcaption {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  color: #111;
  background: rgba(244, 212, 118, 0.95);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.kc-lightbox-info { padding: 20px 24px 26px; }
.kc-lb-eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.kc-lb-title { margin: 0 0 8px; font-size: 1.4rem; color: var(--text); }
.kc-lb-desc { margin: 0; color: var(--muted); }
@media (max-width: 620px) {
  .kc-lightbox { padding: 12px; }
  .kc-lightbox-media { grid-template-columns: 1fr; }
  .kc-lightbox-media img { max-height: 42vh; }
}

/* --- Floating WhatsApp button (desktop / tablet) --- */
.kc-wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 18px;
  color: #fff;
  font-weight: 750;
  font-size: 0.98rem;
  background: #25d366;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  transition: transform 160ms ease, background 160ms ease;
}
.kc-wa-float:hover,
.kc-wa-float:focus-visible {
  background: #1ebe5d;
  transform: translateY(-3px);
  color: #fff;
  outline: none;
}
.kc-wa-float .icon { width: 26px; height: 26px; flex: 0 0 auto; }
.kc-wa-label { white-space: nowrap; }

/* --- Scroll to top --- */
.kc-to-top {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(7, 7, 7, 0.82);
  border: 1px solid rgba(199, 151, 45, 0.5);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease, background 160ms ease;
}
.kc-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.kc-to-top:hover { background: var(--gold); color: #111; border-color: var(--gold); }
.kc-to-top .icon { width: 22px; height: 22px; }

/* --- Mobile sticky action bar --- */
.kc-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(7, 7, 7, 0.96);
  border-top: 1px solid rgba(199, 151, 45, 0.3);
}
.kc-mb-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 750;
  font-size: 0.95rem;
  text-align: center;
}
.kc-mb-btn .icon { width: 18px; height: 18px; }
.kc-mb-quote {
  color: #fff;
  background: #0d1f27;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.kc-mb-quote:hover { background: #14303b; }
.kc-mb-wa { color: #fff; background: #25d366; }
.kc-mb-wa:hover { background: #1ebe5d; }

/* --- Footer credit bar --- */
.site-footer-bottom {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
}
.footer-credit a { color: var(--gold); font-weight: 700; }
.footer-credit a:hover,
.footer-credit a:focus-visible { text-decoration: underline; }

/* --- Mobile: show bar, hide float, lift scroll-top, clear content --- */
@media (max-width: 760px) {
  .kc-mobile-bar { display: grid; }
  .kc-wa-float { display: none; }
  .kc-to-top { bottom: 80px; right: 16px; }
  body { padding-bottom: 70px; }
  .admin-bar .kc-mobile-bar { /* stays at viewport bottom */ }
  .footer-bottom-inner { justify-content: flex-start; }
}

/* --- Inner page title band --- */
.page-hero {
  padding: clamp(46px, 8vw, 92px) 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 60%, rgba(0, 0, 0, 0.55) 100%),
    var(--black) var(--kc-banner, url("assets/img/hero-team-benoni.jpg")) center / cover no-repeat;
  border-bottom: 1px solid rgba(199, 151, 45, 0.32);
}
.page-hero .eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
}
.page-hero-sub {
  margin: 14px 0 0;
  max-width: 54rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

/* =========================================================
   Block editor layout: KC section blocks render full-width
   <section> elements; normal core blocks stay readable-width
   ========================================================= */
.kc-blocks > section { width: 100%; }
.kc-blocks > :not(section):not(.alignfull) {
  width: min(1180px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
.kc-blocks > :not(section) {
  margin-top: 1.1em;
  margin-bottom: 1.1em;
}
.kc-blocks > .alignfull { width: 100%; max-width: none; }
.kc-page-blocks { padding-bottom: 8px; }
/* Give core text content under the title band a little breathing room */
.kc-page-blocks > h2:first-child,
.kc-page-blocks > h3:first-child,
.kc-page-blocks > p:first-child { margin-top: 40px; }

/* Editor preview niceties */
.kc-block-editor-preview { pointer-events: none; }
.editor-styles-wrapper .kc-blocks > :not(section):not(.alignfull) { width: auto; }

/* =========================================================
   Footer uniformity + section-spacing tidy-ups
   ========================================================= */

/* Service strip should only overlap the hero (homepage); on other pages
   it sits as a normal block with breathing room. */
.service-strip { margin-top: 44px; }
.hero + .service-strip { margin-top: -42px; }

/* --- Footer: even 3-column grid, aligned content --- */
.footer-grid {
  grid-template-columns: 1.3fr auto 1fr;
  gap: 44px;
  align-items: center;
}
.footer-brand strong { display: block; color: var(--white); font-size: 1.06rem; }
.footer-brand p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.68); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: center;
}
.footer-links a { color: rgba(255, 255, 255, 0.8); font-weight: 650; }
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--white); }
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-end;
  text-align: right;
}
.footer-contact a { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--gold-light); }

/* --- Footer bottom bar: copyright | legal | credit --- */
.site-footer-bottom { margin-top: 32px; padding-top: 20px; }
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}
.footer-legal a { color: rgba(255, 255, 255, 0.62); }
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--gold-light); text-decoration: underline; }
.footer-copy { order: 1; }
.footer-legal { order: 2; }
.footer-credit { order: 3; }

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }
  .footer-links { justify-content: center; }
  .footer-contact { align-items: center; text-align: center; }
  .footer-bottom-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }
}

/* =========================================================
   Clean prose pages (legal pages and any page made only of
   normal text blocks). Scoped so block-built pages (About,
   Services, etc.) that contain full-width <section> blocks
   are unaffected.
   ========================================================= */
.kc-page-blocks:not(:has(> section)) {
  padding: 60px 0 84px;
  background: var(--off-white);
}
.kc-page-blocks > :not(section):not(.alignfull):not(.alignwide) {
  width: min(740px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
.kc-page-blocks > h2 {
  margin: 2em 0 0.5em;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1.25;
}
.kc-page-blocks > h2:first-child { margin-top: 0; }
.kc-page-blocks > h3 { margin: 1.6em 0 0.5em; font-size: 1.2rem; color: var(--text); }
.kc-page-blocks > p {
  margin: 0 0 1.15em;
  color: #36352f;
  line-height: 1.75;
}
.kc-page-blocks > ul,
.kc-page-blocks > ol {
  margin: 0 auto 1.15em;
  color: #36352f;
  line-height: 1.7;
  padding-left: 1.3em;
}
.kc-page-blocks > ul li,
.kc-page-blocks > ol li { margin-bottom: 0.4em; }
.kc-page-blocks:not(:has(> section)) a { color: #a66f00; text-decoration: underline; }
.kc-page-blocks:not(:has(> section)) a:hover { color: var(--gold); }
/* Buttons inside page sections must never inherit the prose link style. */
.kc-page-blocks .btn { text-decoration: none; }

/* =========================================================
   Quote form: honeypot + submit status messages
   ========================================================= */
.kc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status:empty { display: none; }
.form-status.is-success,
.form-status.is-error {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
}
.form-status.is-success { color: #0b3d2e; background: #c9f0dd; }
.form-status.is-error { color: #5a1620; background: #f7cdd3; }

/* =========================================================
   Footer redesign — multi-column (brand + link columns)
   + quote intro text contrast fix
   ========================================================= */
.site-footer { padding: 62px 0 30px; }

.footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 44px 36px;
  align-items: start;
  text-align: left;
}
.footer-brand strong {
  display: block;
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 750;
}
.footer-brand p {
  margin: 0 0 22px;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.65;
}
.footer-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 22px;
  color: var(--black);
  background: var(--gold);
  border-radius: 8px;
  font-weight: 750;
}
.footer-quote-btn:hover,
.footer-quote-btn:focus-visible { background: var(--gold-light); color: var(--black); }
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-contact-list a,
.footer-address {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}
.footer-contact-list a:hover,
.footer-contact-list a:focus-visible { color: var(--gold-light); }
.footer-contact-list .icon { width: 17px; height: 17px; color: var(--gold); flex: 0 0 auto; }
.footer-address { color: rgba(255, 255, 255, 0.5); }

.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.93rem;
}
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--gold-light); }

.site-footer-bottom { margin-top: 44px; }
.footer-bottom-inner { justify-content: space-between; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 12px; }
}

/* Quote + Why intro paragraphs — clearly readable white on the dark section.
   (The original .section-dark .quote p selector never matched because both
   classes sit on the same <section>, so the muted .quote p rule won.) */
.quote-grid > div > p:not(.section-kicker) { color: rgba(255, 255, 255, 0.92); }
.why-copy > p { color: rgba(255, 255, 255, 0.86); }

/* =========================================================
   Embedded form (WPForms / other) inside the quote card
   ========================================================= */
.quote-form-embed { color: var(--text); }
.quote-form-embed .wpforms-container { max-width: 100%; margin: 0; }
.quote-form-embed .wpforms-form .wpforms-submit,
.quote-form-embed button[type="submit"],
.quote-form-embed input[type="submit"] {
  background: var(--gold) !important;
  color: var(--black) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 750;
  padding: 13px 24px !important;
  cursor: pointer;
}
.quote-form-embed .wpforms-form .wpforms-submit:hover,
.quote-form-embed button[type="submit"]:hover,
.quote-form-embed input[type="submit"]:hover { background: var(--gold-light) !important; }

/* =========================================================
   Mobile hero / banner focal point + readable overlay
   ========================================================= */
@media (max-width: 760px) {
  /* Homepage hero: lift the crop so the team's faces show, and use a
     top-to-bottom overlay that keeps the stacked text readable. */
  .hero { background-position: 64% 18%; }
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(7, 19, 23, 0.48) 0%, rgba(7, 19, 23, 0.6) 46%, rgba(7, 19, 23, 0.9) 100%);
  }

  /* Inner-page banners: better focal point + readable overlay. */
  .page-hero {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%),
      var(--black) var(--kc-banner, url("assets/img/hero-team-benoni.jpg")) center 28% / cover no-repeat;
  }
}

/* =========================================================
   Mobile image layouts — service feature band + stacked gallery
   ========================================================= */
@media (max-width: 600px) {
  /* Service feature card: full-width landscape image band (was stretching
     tall because a tablet rule left height:100% on the image). */
  .service-feature { display: block; }
  .service-feature img {
    height: auto !important;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
  }
}
@media (max-width: 560px) {
  /* Gallery before/after: stack vertically so each photo is full-width and
     clearly visible, instead of two cramped side-by-side thumbnails. */
  .project-media { grid-template-columns: 1fr; }
  .project-media::before { display: none; }
  .project-media img { aspect-ratio: 16 / 10; }
}

/* =========================================================
   Hero proof stats — keep all three on one line on mobile
   ========================================================= */
@media (max-width: 600px) {
  .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .hero-proof div {
    min-width: 0;
    padding: 12px 9px;
  }
  .hero-proof-icon { width: 19px; height: 19px; }
  .hero-proof dt { font-size: 1.05rem; }
  .hero-proof dd { font-size: 0.7rem; line-height: 1.3; }
}

/* =========================================================
   Mobile look & feel — homepage + gallery polish
   ========================================================= */
@media (max-width: 600px) {
  /* Tighter vertical rhythm (was 72px — too airy on phones) */
  .section,
  .section-light,
  .section-dark { padding: 52px 0; }

  /* Service strip: balanced 2x2 cards instead of 4 tall stacked links */
  .service-strip-grid { grid-template-columns: 1fr 1fr; }
  .service-strip-grid a {
    min-height: 96px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 18px 10px;
    text-align: center;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .service-strip-grid a:nth-child(2n) { border-right: 0; }
  .service-strip-grid a:nth-last-child(-n + 2) { border-bottom: 0; }

  /* Gallery: tighter spacing + readable card heading */
  .portfolio-grid { gap: 18px; }
  .filter-bar { justify-content: center; }
  .project-info { padding: 20px; }
  .project-info h3 { font-size: 1.18rem; }
}

/* =========================================================
   Gallery: bordered, separated before/after pics
   ========================================================= */
.project-media { gap: 6px; background: #ffffff; }
.project-media::before { display: none; }
.project-media figure { border: 1px solid rgba(16, 33, 40, 0.18); }

/* =========================================================
   Owner profile (About page) — photo + name + role card
   ========================================================= */
.owner-profile {
  flex-direction: column !important;
  align-items: stretch;
  text-align: center;
  gap: 14px;
  min-height: 0 !important;
  padding: 16px !important;
}
.owner-photo {
  width: 100%;
  height: 330px;
  flex: 0 0 auto;
  border-radius: 14px;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.owner-photo-initials {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gold-light);
  font-size: 3.2rem;
  font-weight: 800;
}
.owner-profile-name strong {
  color: #fff !important;
  font-size: 1.5rem !important;
  line-height: 1.2;
}
.owner-profile-name span {
  display: block;
  margin-top: 4px;
  color: var(--gold-light);
  font-size: 1.05rem;
}
@media (max-width: 600px) {
  .owner-photo { height: 300px; }
}