/* ============================================================
   STF WEBSITE — PREMIUM VISUAL PASS v1.0
   Controlled, sharper, less "document", more designed.
   ============================================================ */

:root {
  --orange: #E8650A;
  --orange-deep: #C84F00;
  --ink: #2C2F35;
  --ink-2: #3A3F47;
  --muted: #69717D;
  --paper: #FBFAF7;
  --warm: #F3EFE8;
  --card: #FFFFFF;
  --line: rgba(44,47,53,0.12);
  --line-strong: rgba(44,47,53,0.20);
  --shadow-sm: 0 10px 25px rgba(44,47,53,0.06);
  --shadow-md: 0 22px 55px rgba(44,47,53,0.10);
  --radius: 18px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 10%, rgba(232,101,10,0.08), transparent 28%),
    radial-gradient(circle at 96% 4%, rgba(44,47,53,0.08), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper) 34%, #FFFFFF 100%);
}

/* Header: make the brand feel owned, not stamped */
.topbar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #23262B !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 7px 32px !important;
  letter-spacing: 0.035em !important;
}
.topbar span + span {
  color: rgba(255,255,255,0.45);
  position: relative;
  padding-left: 18px;
}
.topbar span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--orange);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.nav {
  height: 84px !important;
  padding: 0 48px !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(44,47,53,0.10) !important;
}
.nav-logo-lockup,
.footer-logo-lockup {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.brand-mark-wrap {
  width: 62px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #333842;
  box-shadow: 0 14px 28px rgba(44,47,53,0.15);
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark {
  width: 60px;
  height: 46px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: -0.025em;
}
.brand-wordmark span {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.brand-wordmark strong {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--orange);
}
.nav-links {
  gap: 8px !important;
  align-items: center;
}
.nav-links a {
  padding: 10px 13px;
  border-radius: 999px;
  color: rgba(44,47,53,0.72) !important;
  font-weight: 600 !important;
  transition: background 0.16s ease, color 0.16s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--ink) !important;
  background: rgba(232,101,10,0.10);
}
.nav-cta,
.btn-p {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(44,47,53,0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.nav-cta:hover,
.btn-p:hover {
  background: var(--orange) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(232,101,10,0.22);
}
.btn-s {
  border-radius: 999px !important;
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(44,47,53,0.18) !important;
  font-weight: 600;
}

/* Content rhythm: designed canvas, not full-width document rows */
.sec,
.page-header,
.cards-sec,
.svc-detail,
.contact-body,
.not-suited,
.start-hero,
.start-services,
.start-how,
.start-fit,
.start-cta,
.reg-sec,
.cta-strip,
.cta-sec,
.hero {
  padding-left: max(32px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(32px, calc((100vw - 1180px) / 2)) !important;
  border-bottom: 1px solid rgba(44,47,53,0.10) !important;
}
.sec,
.svc-detail,
.contact-body,
.reg-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
.sec-alt,
.cards-sec,
.svc-detail.alt,
.not-suited,
.start-services,
.start-fit,
.reg-sec {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(243,239,232,0.92)) !important;
}

.eyebrow,
.sec-label,
.svc-tag,
.intro-tag,
.start-svc-tag,
.svc-left-tag,
.diff-num {
  color: var(--orange) !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
}
.page-header {
  position: relative;
  padding-top: 72px !important;
  padding-bottom: 58px !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F7F2EA 100%);
  overflow: hidden;
}
.page-header::after {
  content: "";
  position: absolute;
  right: max(32px, calc((100vw - 1180px) / 2));
  top: 44px;
  width: 170px;
  height: 170px;
  border-radius: 36px;
  border: 1px solid rgba(232,101,10,0.14);
  background: linear-gradient(135deg, rgba(232,101,10,0.10), rgba(44,47,53,0.04));
  transform: rotate(8deg);
}
.page-header h1,
.hero h1 {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
}
.page-header h1 {
  font-size: clamp(40px, 5vw, 68px) !important;
  max-width: 760px !important;
  line-height: 0.98 !important;
  margin-bottom: 20px !important;
  position: relative;
  z-index: 1;
}
.page-header p {
  font-size: 18px !important;
  max-width: 630px !important;
  color: var(--muted) !important;
  line-height: 1.65 !important;
  position: relative;
  z-index: 1;
}
.sec h2,
.cta-strip h2,
.cta-sec h2,
.start-services h2,
.start-how h2,
.start-fit h2,
.start-cta h2,
.form-section h2,
.next-section h2,
.reg-sec h2 {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}
.sec h2 { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.05 !important; margin-bottom: 18px !important; }
.sec-intro { font-size: 17px !important; max-width: 680px !important; color: var(--muted) !important; }

/* Homepage hero */
.hero-premium {
  padding-top: 74px !important;
  padding-bottom: 74px !important;
  background:
    radial-gradient(circle at 80% 18%, rgba(232,101,10,0.22), transparent 34%),
    linear-gradient(135deg, #2C2F35 0%, #1F2227 100%) !important;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.hero-premium::before {
  content: "";
  position: absolute;
  inset: auto -80px -130px auto;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 430px;
  gap: 56px;
  align-items: center;
}
.hero-premium .eyebrow { color: #FF8A2B !important; }
.hero-premium h1 {
  color: #fff !important;
  max-width: 720px !important;
  font-size: clamp(52px, 7vw, 88px) !important;
  line-height: 0.92 !important;
  margin-bottom: 24px !important;
}
.hero-premium .hero-sub {
  color: rgba(255,255,255,0.74) !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  margin-bottom: 30px !important;
}
.hero-premium .btn-p { background: var(--orange) !important; box-shadow: 0 18px 38px rgba(232,101,10,0.28); }
.hero-premium .btn-p:hover { background: #FF7A1A !important; }
.hero-premium .btn-s { color: #fff !important; background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.22) !important; }
.hero-premium .badge {
  color: rgba(255,255,255,0.72) !important;
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
}
.hero-premium .badge-o {
  color: #fff !important;
  border-color: rgba(232,101,10,0.45) !important;
  background: rgba(232,101,10,0.20) !important;
}
.hero-panel {
  border-radius: 28px;
  padding: 28px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 30px 80px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px);
}
.panel-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FF9A3D;
  font-weight: 800;
  margin-bottom: 14px;
}
.panel-title {
  font-size: 28px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
  color: #fff;
}
.panel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.13);
}
.panel-row span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,101,10,0.22);
  color: #FFB06B;
  font-size: 12px;
  font-weight: 800;
}
.panel-row strong { font-size: 15px; color: rgba(255,255,255,0.86); }

/* Cards: make components feel like designed objects */
.ethos-grid,
.who-grid,
.svc-grid,
.report-grid,
.diff-grid,
.intro-grid,
.start-svc-grid,
.suited-grid {
  gap: 18px !important;
}
.ethos-grid {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.ethos-item,
.who-card,
.svc-card,
.diff-card,
.intro-card,
.start-svc-card,
.contact-details,
.svc-detail-note,
.wpforms-placeholder {
  border: 1px solid rgba(44,47,53,0.10) !important;
  border-radius: var(--radius) !important;
  background: rgba(255,255,255,0.86) !important;
  box-shadow: var(--shadow-sm);
}
.ethos-item,
.who-card,
.svc-card,
.diff-card { padding: 28px !important; }
.ethos-word,
.who-title,
.svc-title,
.report-title,
.diff-title,
.intro-title,
.start-svc-title,
.principle-title,
.next-title,
.start-step-title {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
}
.ethos-line { width: 36px !important; height: 3px !important; border-radius: 999px; }
.who-text,
.svc-text,
.report-text,
.diff-text,
.intro-text,
.start-svc-text,
.principle-text,
.next-text,
.start-step-text,
.prose,
.reg-note,
.svc-left-summary,
.svc-boundary,
.form-intro {
  color: var(--muted) !important;
}
.svc-card,
.diff-card,
.who-card,
.intro-card,
.start-svc-card {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.svc-card:hover,
.diff-card:hover,
.who-card:hover,
.intro-card:hover,
.start-svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(232,101,10,0.26) !important;
}
.svc-note,
.svc-boundary {
  border-radius: 14px !important;
  background: rgba(232,101,10,0.07) !important;
  border-color: rgba(232,101,10,0.18) !important;
}
.report-item {
  border-left: 0 !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm);
  padding: 26px !important;
  position: relative;
  overflow: hidden;
}
.report-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--orange);
}

/* Service details: stronger editorial layout */
.svc-detail-inner,
.two-col,
.reg-grid,
.contact-grid {
  gap: 70px !important;
}
.svc-left h2 { font-size: clamp(32px, 3vw, 46px) !important; line-height: 1.02 !important; }
.svc-right {
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(44,47,53,0.09);
  box-shadow: var(--shadow-sm);
}
.svc-includes li {
  padding: 12px 0 !important;
  font-size: 14px !important;
}
.svc-check,
.start-fit-mark,
.suited-mark {
  background: rgba(232,101,10,0.14) !important;
}
.step-num,
.next-num,
.start-step-num,
.how-mini-num,
.cta-step-num {
  background: var(--ink) !important;
  box-shadow: 0 10px 22px rgba(44,47,53,0.12);
}
.steps,
.start-steps,
.next-steps {
  max-width: 760px !important;
}
.step,
.start-step,
.next-step,
.principle {
  border-color: rgba(44,47,53,0.10) !important;
}

/* Software row: keep final, just polish the container */
.sw-row { gap: 14px !important; }
.sw-logo {
  border-radius: 18px !important;
  border-color: rgba(44,47,53,0.10) !important;
  box-shadow: var(--shadow-sm);
  padding: 16px 18px !important;
}

/* Contact / forms */
.contact-body { background: #fff !important; }
.form-section {
  padding: 34px;
  border-radius: 26px;
  background: var(--paper);
  border: 1px solid rgba(44,47,53,0.10);
  box-shadow: var(--shadow-md);
}
body .wpforms-container input[type=text],
body .wpforms-container input[type=email],
body .wpforms-container input[type=tel],
body .wpforms-container textarea,
body .wpforms-container select {
  border-radius: 14px !important;
  border: 1px solid rgba(44,47,53,0.16) !important;
  background: #fff !important;
  min-height: 48px !important;
}
body .wpforms-container button[type=submit] {
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 800 !important;
  padding: 13px 24px !important;
}
body .wpforms-container button[type=submit]:hover { background: var(--orange) !important; }
.contact-details { padding: 24px !important; }

/* Start page: make QR landing feel decisive */
.start-hero {
  padding-top: 76px !important;
  padding-bottom: 68px !important;
  background: linear-gradient(135deg, #2C2F35 0%, #202329 100%) !important;
  color: #fff;
}
.start-hero h1 {
  color: #fff !important;
  font-size: clamp(44px, 5vw, 72px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.96 !important;
  max-width: 760px !important;
}
.start-hero p { color: rgba(255,255,255,0.72) !important; font-size: 18px !important; max-width: 620px !important; }
.start-hero .btn-p { background: var(--orange) !important; }
.start-services h2,
.start-how h2,
.start-fit h2,
.start-cta h2 { font-size: clamp(26px, 3vw, 38px) !important; }

/* Footer */
.footer {
  background: #23262B !important;
  color: rgba(255,255,255,0.78);
  padding-left: max(32px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(32px, calc((100vw - 1180px) / 2)) !important;
  border-top: 0 !important;
}
.footer .brand-wordmark span { color: #fff; }
.footer .brand-mark-wrap { box-shadow: none; border: 1px solid rgba(255,255,255,0.08); }
.footer-addr,
.footer-col a,
.footer-legal { color: rgba(255,255,255,0.62) !important; }
.footer-col h4 { color: rgba(255,255,255,0.36) !important; }
.footer-col a:hover { color: #FF8A2B !important; }
.footer-bottom { border-top-color: rgba(255,255,255,0.10) !important; }
.footer-tagline { color: #fff !important; }

/* Legal pages: keep content untouched, improve readability */
.doc-body,
.legal-page,
.privacy-page,
.complaints-page {
  background: #fff;
}
.doc-main,
.legal-content,
.privacy-content,
.complaints-content {
  max-width: 820px;
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero-panel { max-width: 620px; }
  .nav { padding: 0 24px !important; }
  .brand-wordmark span { font-size: 21px; }
  .brand-mark-wrap { width: 56px; height: 46px; }
}
@media (max-width: 768px) {
  .topbar { display: block !important; text-align: center; padding: 7px 16px !important; }
  .topbar span + span { display: none; }
  .nav { height: 66px !important; }
  .brand-mark-wrap { width: 46px; height: 38px; border-radius: 12px; }
  .brand-mark { width: 48px; height: 36px; }
  .brand-wordmark span { font-size: 18px; }
  .brand-wordmark strong { font-size: 10px; letter-spacing: 0.18em; }
  .hero-premium { padding-top: 54px !important; padding-bottom: 54px !important; }
  .hero-premium h1 { font-size: clamp(42px, 13vw, 58px) !important; }
  .hero-panel { padding: 22px; border-radius: 22px; }
  .panel-title { font-size: 23px; }
  .sec,
  .svc-detail,
  .contact-body,
  .reg-sec,
  .cards-sec,
  .not-suited,
  .start-services,
  .start-how,
  .start-fit,
  .start-cta,
  .page-header,
  .cta-strip,
  .cta-sec,
  .hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .sec,
  .svc-detail,
  .contact-body,
  .reg-sec { padding-top: 42px !important; padding-bottom: 42px !important; }
  .page-header::after { display: none; }
  .form-section { padding: 22px; border-radius: 22px; }
  .footer { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================================
   STF WEBSITE — v14 PREMIUM RESCUE OVERRIDES
   Rules locked from feedback:
   - Logo asset is not altered or re-created. Exact SouthTech logo only.
   - Copy is not rewritten. Visual layer only.
   ============================================================ */

:root {
  --charcoal: #23262B;
  --charcoal-2: #2C2F35;
  --warm-paper: #F6F1EA;
  --warm-panel: #EFE7DC;
  --quiet-panel: #F9F6F1;
  --orange-glow: rgba(232,101,10,0.20);
}

/* HEADER — exact logo, bigger presence, no recreated brand lockup */
.nav {
  height: 116px !important;
  padding: 0 64px !important;
  background: rgba(255,255,255,0.96) !important;
}
.nav-logo-full {
  width: 98px;
  height: 98px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.site-logo-full-header {
  width: 96px !important;
  height: 96px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 38px rgba(44,47,53,0.18);
}
.nav-links { gap: 12px !important; }
.nav-links a { font-size: 14px !important; padding: 11px 16px !important; }
.nav-cta { font-size: 14px !important; padding: 13px 24px !important; margin-left: 28px !important; }

/* HERO — keep the liked premium treatment, restore original wording */
.hero-premium {
  min-height: calc(100vh - 152px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 78% 18%, rgba(232,101,10,0.24), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.055), transparent 30%),
    linear-gradient(135deg, #2C2F35 0%, #202329 100%) !important;
}
.hero-premium .hero-inner { width: 100%; }
.hero-premium h1 {
  max-width: 820px !important;
  font-size: clamp(56px, 7.4vw, 104px) !important;
  line-height: 0.91 !important;
  letter-spacing: -0.07em !important;
}
.hero-premium .hero-sub { max-width: 700px !important; }
.hero-panel {
  background: linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.065)) !important;
}

/* GLOBAL SECTION FEEL — stop the white reset after the hero */
.page-home .sec,
.page-home .cta-sec,
.page-services .cards-sec,
.page-services .svc-detail,
.page-services .cta-strip,
.page-about .sec,
.page-contact .contact-body,
.page-start .start-services,
.page-start .start-how,
.page-start .start-fit,
.page-start .start-cta {
  background:
    radial-gradient(circle at 100% 0%, rgba(232,101,10,0.055), transparent 28%),
    linear-gradient(135deg, var(--quiet-panel) 0%, var(--warm-paper) 100%) !important;
}

.page-home .sec:nth-of-type(even),
.page-services .svc-detail.alt,
.page-about .sec-alt,
.page-start .start-fit {
  background:
    radial-gradient(circle at 0% 0%, rgba(44,47,53,0.08), transparent 30%),
    linear-gradient(135deg, #EEE6DB 0%, #FAF7F2 100%) !important;
}

/* Use a controlled dark band later in the page so the premium feel continues */
.page-home #how,
.page-start .start-hero,
.cta-sec,
.cta-strip {
  background:
    radial-gradient(circle at 88% 12%, rgba(232,101,10,0.18), transparent 32%),
    linear-gradient(135deg, #2C2F35 0%, #202329 100%) !important;
  color: #fff !important;
}
.page-home #how h2,
.page-home #how .step-title,
.page-start .start-hero h1,
.cta-sec h2,
.cta-strip h2 { color: #fff !important; }
.page-home #how .sec-intro,
.page-home #how .step-text,
.cta-sec p,
.cta-strip p { color: rgba(255,255,255,0.72) !important; }
.page-home #how .step { border-bottom-color: rgba(255,255,255,0.13) !important; }
.page-home #how .step-num,
.cta-sec .cta-step-num,
.cta-strip .cta-step-num { background: var(--orange) !important; }
.page-home #how .sec-label,
.page-start .start-hero .eyebrow,
.cta-sec .sec-label,
.cta-strip .sec-label { color: #FF8A2B !important; }
.cta-sec .cta-step-text { color: rgba(255,255,255,0.78) !important; }
.cta-sec .cta-arrow { color: rgba(255,255,255,0.55) !important; }
.cta-sec .btn-s,
.cta-strip .btn-s { color: #fff !important; background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.20) !important; }

/* CARDS — replace square white-box feel with premium panel components */
.ethos-item,
.who-card,
.svc-card,
.report-item,
.intro-card,
.diff-card,
.start-svc-card,
.suited-card,
.contact-details,
.svc-detail-note,
.svc-right,
.form-section,
.wpforms-placeholder,
.sw-logo {
  border-radius: 26px !important;
  border: 1px solid rgba(44,47,53,0.10) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,255,255,0.58)) !important;
  box-shadow: 0 20px 55px rgba(44,47,53,0.08) !important;
  backdrop-filter: blur(10px);
}

/* Dark-section cards should not turn into white slabs */
.page-home #how .step,
.page-home #how .steps {
  background: transparent !important;
}

/* Services detail panels: make them feel more like a controlled system, less like boxes */
.svc-detail-inner {
  align-items: stretch !important;
}
.svc-left {
  position: sticky;
  top: 140px;
}
.svc-right {
  padding: 34px !important;
}
.svc-includes li {
  border-bottom-color: rgba(44,47,53,0.09) !important;
}
.svc-boundary,
.svc-note {
  background: rgba(232,101,10,0.08) !important;
  border: 1px solid rgba(232,101,10,0.16) !important;
  border-radius: 18px !important;
}

/* Approach grid: stronger, premium blocks */
.ethos-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ethos-item {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ethos-word { font-size: 18px !important; }
.ethos-text { font-size: 14px !important; }

/* Page headers: premium service brand, but keep legal pages readable and plain */
body:not(.page-privacy):not(.page-complaints) .page-header {
  background:
    radial-gradient(circle at 88% 12%, rgba(232,101,10,0.20), transparent 32%),
    linear-gradient(135deg, #2C2F35 0%, #202329 100%) !important;
  color: #fff !important;
}
body:not(.page-privacy):not(.page-complaints) .page-header h1 { color: #fff !important; }
body:not(.page-privacy):not(.page-complaints) .page-header p { color: rgba(255,255,255,0.72) !important; }
body:not(.page-privacy):not(.page-complaints) .page-header::after {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Software section stays intact, just sits in the same premium visual world */
.sw-row { align-items: stretch !important; }
.sw-logo { min-height: 84px; }

/* FOOTER — exact logo, not recreated */
.footer-logo-full {
  width: 116px;
  height: 116px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.site-logo-full-footer {
  width: 110px !important;
  height: 110px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  .nav { height: 96px !important; padding: 0 28px !important; }
  .nav-logo-full { width: 78px; height: 78px; }
  .site-logo-full-header { width: 76px !important; height: 76px !important; border-radius: 15px !important; }
  .hero-premium { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr !important; }
  .svc-left { position: static; }
}

@media (max-width: 768px) {
  .nav { height: 76px !important; padding: 0 20px !important; }
  .nav-logo-full { width: 58px; height: 58px; }
  .site-logo-full-header { width: 56px !important; height: 56px !important; border-radius: 12px !important; }
  .hero-premium h1 { font-size: clamp(42px, 13vw, 64px) !important; }
  .hero-panel { display: none; }
  .ethos-grid { grid-template-columns: 1fr !important; }
  .footer-logo-full { width: 90px; height: 90px; }
  .site-logo-full-footer { width: 86px !important; height: 86px !important; }
}

/* ============================================================
   STF WEBSITE — v15 HOME PAGE LOCKDOWN
   Implemented from section-by-section review.
   Rules: hero/logo/copy protected; visual refinements only.
   ============================================================ */

/* 1) HERO — locked. No visual changes. */

/* 2) OUR APPROACH — clean grid, zero wobble */
.page-home .ethos-grid {
  gap: 20px !important;
  align-items: stretch !important;
}
.page-home .ethos-item {
  min-height: 170px !important;
  padding: 28px 26px !important;
  display: grid !important;
  grid-template-rows: 32px 28px 1fr !important;
  align-items: start !important;
  justify-content: stretch !important;
}
.page-home .ethos-word {
  margin: 0 !important;
  line-height: 1.15 !important;
  align-self: start !important;
}
.page-home .ethos-line {
  width: 36px !important;
  height: 3px !important;
  margin: 14px 0 0 0 !important;
  align-self: start !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
}
.page-home .ethos-text {
  margin: 0 !important;
  line-height: 1.55 !important;
  align-self: end !important;
}

/* 3) WHO WE WORK WITH — icons removed, system styling matched */
.page-home .who-icon {
  display: none !important;
}
.page-home .who-card {
  padding: 30px 28px !important;
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.page-home .who-title {
  margin-bottom: 8px !important;
  font-size: 16px !important;
}
.page-home .who-text {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* 4) WHAT WE PROVIDE — remove heavy boxes and orange bubble feel */
.page-home .svc-grid {
  gap: 36px !important;
  align-items: stretch !important;
}
.page-home .svc-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 22px !important;
  border-left: 3px solid rgba(232,101,10,0.85) !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.page-home .svc-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(232,101,10,0.85) !important;
}
.page-home .svc-tag {
  display: none !important;
}
.page-home .svc-title {
  font-size: 18px !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}
.page-home .svc-text {
  font-size: 15px !important;
  line-height: 1.62 !important;
  margin-bottom: 12px !important;
}
.page-home .svc-note {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: rgba(44,47,53,0.55) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-style: italic !important;
}

/* 5) MONTHLY REPORTING — keep, refine alignment */
.page-home .report-grid {
  gap: 20px !important;
  margin-top: 8px !important;
  margin-bottom: 20px !important;
}
.page-home .report-item {
  padding: 26px 28px 26px 30px !important;
  min-height: 132px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.page-home .report-item::before {
  width: 5px !important;
  height: 72px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 0 999px 999px 0 !important;
}
.page-home .report-title {
  font-size: 16px !important;
  margin-bottom: 6px !important;
}
.page-home .report-text {
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.page-home .report-close {
  margin-top: 6px !important;
  font-size: 15px !important;
}

/* 6) HOW WE WORK — keep dark, improve composition */
.page-home #how {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.page-home #how .sec-intro,
.page-home #how .steps {
  max-width: 820px !important;
}
.page-home #how .steps {
  margin-top: 30px !important;
}
.page-home #how .step {
  padding: 22px 0 !important;
  max-width: 820px !important;
}
.page-home #how .step-num {
  background: var(--orange) !important;
  box-shadow: 0 14px 30px rgba(232,101,10,0.22) !important;
}
.page-home #how .step-title {
  font-size: 16px !important;
  margin-bottom: 5px !important;
}
.page-home #how .step-text {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* 7) SOFTWARE — less button-like, stronger logo presence */
.page-home .sw-row {
  gap: 18px !important;
  margin-top: 14px !important;
}
.page-home .sw-logo {
  min-height: 74px !important;
  padding: 15px 22px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.54) !important;
  box-shadow: 0 14px 34px rgba(44,47,53,0.055) !important;
  border-color: rgba(44,47,53,0.08) !important;
  backdrop-filter: none !important;
}
.page-home .sw-logo img {
  max-height: 34px !important;
  width: auto !important;
}
.page-home .sw-logo-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* 8) CTA — readable, decisive, not washed out */
.page-home .cta-sec {
  background:
    radial-gradient(circle at 82% 20%, rgba(232,101,10,0.10), transparent 34%),
    linear-gradient(135deg, #F7F2EA 0%, #FFFFFF 100%) !important;
  color: var(--ink) !important;
  text-align: center !important;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}
.page-home .cta-sec h2 {
  color: var(--ink) !important;
  opacity: 1 !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  line-height: 1.04 !important;
  margin-bottom: 16px !important;
}
.page-home .cta-sec p {
  color: var(--muted) !important;
  opacity: 1 !important;
  max-width: 620px !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  margin: 0 auto 28px !important;
}
.page-home .cta-sec .cta-steps {
  margin-bottom: 30px !important;
}
.page-home .cta-sec .cta-step-text {
  color: rgba(44,47,53,0.76) !important;
  font-weight: 650 !important;
}
.page-home .cta-sec .cta-arrow {
  color: rgba(44,47,53,0.35) !important;
  opacity: 1 !important;
}
.page-home .cta-sec .cta-step-num {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(232,101,10,0.20) !important;
}
.page-home .cta-sec .btn-p {
  background: var(--ink) !important;
  color: #fff !important;
}
.page-home .cta-sec .btn-s {
  color: var(--ink) !important;
  background: rgba(255,255,255,0.68) !important;
  border-color: rgba(44,47,53,0.14) !important;
}

/* 9) FOOTER — slight contrast lift */
.footer-col h4 {
  color: rgba(255,255,255,0.52) !important;
  font-weight: 800 !important;
}
.footer-col a,
.footer-addr,
.footer-legal {
  color: rgba(255,255,255,0.68) !important;
}
.footer-bottom {
  padding-top: 22px !important;
}

@media (max-width: 1024px) {
  .page-home .svc-grid,
  .page-home .report-grid,
  .page-home .who-grid {
    grid-template-columns: 1fr !important;
  }
  .page-home .svc-card {
    padding-left: 18px !important;
  }
}

@media (max-width: 768px) {
  .page-home .ethos-item {
    min-height: 140px !important;
    grid-template-rows: auto 24px auto !important;
  }
  .page-home .cta-sec .cta-steps {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .page-home .cta-sec .cta-arrow {
    display: none !important;
  }
}

/* ============================================================
   STF WEBSITE — v16 FULL SITE UNIFICATION
   Purpose: carry the approved Home page design system across
   Services, About, Contact and Start without changing copy or
   legal content.
   ============================================================ */

/* Page headers should feel like the Home hero family, not separate brochure pages */
body.page-services .page-header,
body.page-about .page-header,
body.page-contact .page-header {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 78px !important;
  padding-bottom: 78px !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(232,101,10,0.22), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.055), transparent 30%),
    linear-gradient(135deg, #2C2F35 0%, #202329 100%) !important;
}
body.page-services .page-header h1,
body.page-about .page-header h1,
body.page-contact .page-header h1 {
  font-size: clamp(48px, 6.2vw, 86px) !important;
  line-height: 0.94 !important;
  max-width: 880px !important;
}
body.page-services .page-header p,
body.page-about .page-header p,
body.page-contact .page-header p {
  max-width: 720px !important;
  font-size: 18px !important;
}

/* Shared rhythm for non-Home pages */
body.page-services .cards-sec,
body.page-services .svc-detail,
body.page-services .cta-strip,
body.page-about .sec,
body.page-about .reg-sec,
body.page-about .cta-strip,
body.page-contact .contact-body,
body.page-contact .not-suited,
body.page-start .start-services,
body.page-start .start-how,
body.page-start .start-fit,
body.page-start .start-cta {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

body.page-services .cards-sec,
body.page-about .sec-alt,
body.page-about .reg-sec,
body.page-contact .not-suited,
body.page-start .start-services,
body.page-start .start-fit {
  background:
    radial-gradient(circle at 100% 0%, rgba(232,101,10,0.055), transparent 28%),
    linear-gradient(135deg, #F9F6F1 0%, #F1E8DD 100%) !important;
}
body.page-services .svc-detail,
body.page-about .sec:not(.sec-alt),
body.page-contact .contact-body,
body.page-start .start-how,
body.page-start .start-cta {
  background:
    radial-gradient(circle at 0% 0%, rgba(44,47,53,0.055), transparent 30%),
    linear-gradient(135deg, #FBFAF7 0%, #FFFFFF 100%) !important;
}

/* SERVICES PAGE — top intro cards: match Home system, no weak template tiles */
body.page-services .intro-grid {
  gap: 20px !important;
  align-items: stretch !important;
}
body.page-services .intro-card {
  min-height: 156px !important;
  padding: 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62)) !important;
  box-shadow: 0 20px 55px rgba(44,47,53,0.08) !important;
}
body.page-services .intro-tag {
  display: none !important;
}
body.page-services .intro-title {
  font-size: 18px !important;
  margin-bottom: 10px !important;
}
body.page-services .intro-text {
  font-size: 15px !important;
  line-height: 1.58 !important;
}

/* SERVICES PAGE — service sections: editorial, premium, not square boxes */
body.page-services .svc-detail-inner {
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.55fr) !important;
  gap: 74px !important;
}
body.page-services .svc-detail:nth-of-type(even) {
  background:
    radial-gradient(circle at 100% 0%, rgba(232,101,10,0.065), transparent 30%),
    linear-gradient(135deg, #F9F6F1 0%, #EFE6DA 100%) !important;
}
body.page-services .svc-left h2 {
  font-size: clamp(34px, 3.7vw, 56px) !important;
  line-height: 0.98 !important;
  margin-bottom: 18px !important;
}
body.page-services .svc-num {
  color: rgba(44,47,53,0.36) !important;
  font-weight: 800 !important;
}
body.page-services .svc-left-summary {
  font-size: 16px !important;
  line-height: 1.68 !important;
}
body.page-services .svc-boundary {
  margin-top: 20px !important;
  padding: 18px 20px !important;
  border-left: 4px solid var(--orange) !important;
  border-radius: 18px !important;
}
body.page-services .svc-right {
  position: relative;
  padding: 34px 36px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90), rgba(255,255,255,0.68)) !important;
}
body.page-services .svc-right h3 {
  color: var(--orange) !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
}
body.page-services .svc-includes li {
  font-size: 15px !important;
  line-height: 1.55 !important;
  padding: 14px 0 !important;
}
body.page-services .svc-detail-note {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-left: 3px solid rgba(232,101,10,0.75) !important;
  border-radius: 0 !important;
  padding: 0 0 0 18px !important;
  backdrop-filter: none !important;
}
body.page-services .svc-detail-note p {
  font-size: 14px !important;
  color: rgba(44,47,53,0.62) !important;
  font-style: italic !important;
}

/* SERVICES PAGE — how mini section / CTA should be a decision band */
body.page-services .cta-strip,
body.page-about .cta-strip {
  background:
    radial-gradient(circle at 86% 12%, rgba(232,101,10,0.18), transparent 32%),
    linear-gradient(135deg, #2C2F35 0%, #202329 100%) !important;
  color: #fff !important;
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}
body.page-services .cta-strip h2,
body.page-about .cta-strip h2 { color: #fff !important; }
body.page-services .cta-strip p,
body.page-about .cta-strip p { color: rgba(255,255,255,0.72) !important; }
body.page-services .how-mini-step {
  border-color: rgba(255,255,255,0.13) !important;
}
body.page-services .how-mini-num {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(232,101,10,0.22) !important;
}
body.page-services .how-mini-title { color: #fff !important; }
body.page-services .how-mini-text { color: rgba(255,255,255,0.72) !important; }

/* ABOUT PAGE — make it feel like the same firm, not a text page */
body.page-about .two-col {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr) !important;
  gap: 70px !important;
  align-items: start !important;
}
body.page-about .prose {
  font-size: 17px !important;
  line-height: 1.75 !important;
  max-width: 720px !important;
}
body.page-about .principles {
  padding: 30px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90), rgba(255,255,255,0.66)) !important;
  border: 1px solid rgba(44,47,53,0.10) !important;
  box-shadow: 0 20px 55px rgba(44,47,53,0.08) !important;
}
body.page-about .principle {
  padding: 18px 0 !important;
}
body.page-about .principle:first-child { padding-top: 0 !important; }
body.page-about .principle:last-child { padding-bottom: 0 !important; }
body.page-about .principle-mark {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(232,101,10,0.18) !important;
}
body.page-about .principle-title {
  font-size: 16px !important;
}
body.page-about .principle-text {
  font-size: 15px !important;
  line-height: 1.58 !important;
}
body.page-about .diff-grid {
  gap: 20px !important;
}
body.page-about .diff-card {
  min-height: 176px !important;
  padding: 28px !important;
  display: grid !important;
  grid-template-rows: 30px auto 1fr !important;
  align-items: start !important;
}
body.page-about .diff-num {
  font-size: 11px !important;
  margin: 0 !important;
}
body.page-about .diff-title {
  font-size: 18px !important;
  margin: 12px 0 8px !important;
}
body.page-about .diff-text {
  font-size: 15px !important;
  line-height: 1.58 !important;
}
body.page-about .reg-grid {
  gap: 70px !important;
  align-items: start !important;
}
body.page-about .reg-table {
  border-radius: 28px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.86) !important;
  box-shadow: 0 20px 55px rgba(44,47,53,0.08) !important;
}
body.page-about .reg-table td {
  padding: 16px 18px !important;
}
body.page-about .reg-note {
  margin-top: 22px !important;
  padding-left: 18px !important;
  border-left: 3px solid rgba(232,101,10,0.75) !important;
  font-size: 14px !important;
}

/* CONTACT PAGE — make contact feel like a proper conversion page */
body.page-contact .contact-body {
  background:
    radial-gradient(circle at 100% 0%, rgba(232,101,10,0.055), transparent 28%),
    linear-gradient(135deg, #FBFAF7 0%, #FFFFFF 100%) !important;
}
body.page-contact .contact-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr) !important;
  gap: 44px !important;
  align-items: start !important;
}
body.page-contact .form-section {
  padding: 38px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70)) !important;
}
body.page-contact .form-section h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.05 !important;
}
body.page-contact .form-intro {
  font-size: 16px !important;
  margin-bottom: 24px !important;
}
body.page-contact .next-section,
body.page-contact .contact-details {
  border-radius: 28px !important;
  border: 1px solid rgba(44,47,53,0.10) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62)) !important;
  box-shadow: 0 20px 55px rgba(44,47,53,0.08) !important;
  padding: 30px !important;
}
body.page-contact .next-section h2,
body.page-contact .contact-details h3 {
  font-size: 24px !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
}
body.page-contact .next-step {
  padding: 17px 0 !important;
}
body.page-contact .next-num {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(232,101,10,0.18) !important;
}
body.page-contact .next-title { font-size: 15px !important; }
body.page-contact .next-text { font-size: 14px !important; line-height: 1.58 !important; }
body.page-contact .contact-details { margin-top: 22px !important; }
body.page-contact .contact-item {
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(44,47,53,0.10) !important;
}
body.page-contact .contact-item:last-child { border-bottom: 0 !important; }
body.page-contact .contact-label {
  color: var(--orange) !important;
  font-weight: 850 !important;
  letter-spacing: 0.10em !important;
}
body.page-contact .not-suited h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.05 !important;
}
body.page-contact .suited-grid {
  gap: 18px !important;
  margin-top: 22px !important;
}
body.page-contact .suited-item {
  border-radius: 24px !important;
  border: 1px solid rgba(44,47,53,0.10) !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: 0 14px 34px rgba(44,47,53,0.055) !important;
  padding: 20px !important;
}
body.page-contact .suited-mark {
  background: var(--orange) !important;
}
body.page-contact .suited-mark svg { stroke: #fff !important; }
body.page-contact .suited-text { font-size: 15px !important; line-height: 1.55 !important; }

/* START PAGE — match the Home/Contact tone; useful for QR/CTA landings */
body.page-start .start-hero {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 82% 16%, rgba(232,101,10,0.22), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.055), transparent 30%),
    linear-gradient(135deg, #2C2F35 0%, #202329 100%) !important;
}
body.page-start .start-hero h1 {
  font-size: clamp(48px, 6.2vw, 86px) !important;
  max-width: 880px !important;
}
body.page-start .start-hero p {
  max-width: 720px !important;
}
body.page-start .start-services h2,
body.page-start .start-how h2,
body.page-start .start-fit h2,
body.page-start .start-cta h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.05 !important;
}
body.page-start .start-svc-grid {
  gap: 36px !important;
}
body.page-start .start-svc-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 22px !important;
  border-left: 3px solid rgba(232,101,10,0.85) !important;
  backdrop-filter: none !important;
}
body.page-start .start-svc-tag { display: none !important; }
body.page-start .start-svc-title {
  font-size: 18px !important;
  margin-bottom: 10px !important;
}
body.page-start .start-svc-text {
  font-size: 15px !important;
  line-height: 1.62 !important;
}
body.page-start .start-steps {
  max-width: 820px !important;
  margin-top: 22px !important;
}
body.page-start .start-step {
  padding: 22px 0 !important;
}
body.page-start .start-step-num,
body.page-start .start-fit-mark {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(232,101,10,0.18) !important;
}
body.page-start .start-fit-mark svg { stroke: #fff !important; }
body.page-start .start-step-title { font-size: 16px !important; }
body.page-start .start-step-text,
body.page-start .start-fit-text {
  font-size: 15px !important;
  line-height: 1.62 !important;
}
body.page-start .start-fit-list {
  max-width: 820px !important;
  gap: 14px !important;
}
body.page-start .start-fit-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(44,47,53,0.10) !important;
}
body.page-start .start-fit-item:last-child { border-bottom: 0 !important; }
body.page-start .start-cta {
  background:
    radial-gradient(circle at 82% 20%, rgba(232,101,10,0.10), transparent 34%),
    linear-gradient(135deg, #F7F2EA 0%, #FFFFFF 100%) !important;
  text-align: center !important;
}
body.page-start .start-cta p {
  font-size: 17px !important;
  max-width: 620px !important;
  margin-bottom: 28px !important;
}

/* Responsive consistency */
@media (max-width: 1024px) {
  body.page-services .intro-grid,
  body.page-services .svc-detail-inner,
  body.page-about .two-col,
  body.page-about .reg-grid,
  body.page-contact .contact-grid,
  body.page-start .start-svc-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body.page-services .svc-left {
    position: static !important;
  }
}
@media (max-width: 768px) {
  body.page-services .page-header,
  body.page-about .page-header,
  body.page-contact .page-header,
  body.page-start .start-hero {
    min-height: auto;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
  body.page-services .page-header h1,
  body.page-about .page-header h1,
  body.page-contact .page-header h1,
  body.page-start .start-hero h1 {
    font-size: clamp(40px, 13vw, 62px) !important;
  }
  body.page-services .cards-sec,
  body.page-services .svc-detail,
  body.page-services .cta-strip,
  body.page-about .sec,
  body.page-about .reg-sec,
  body.page-about .cta-strip,
  body.page-contact .contact-body,
  body.page-contact .not-suited,
  body.page-start .start-services,
  body.page-start .start-how,
  body.page-start .start-fit,
  body.page-start .start-cta {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
}

/* v17 — Services page final CTA readability fix
   Keep the section as the closing decision point, but stop the white-on-light washout. */
body.page-services .cta-strip {
  background:
    radial-gradient(circle at 82% 18%, rgba(232,101,10,0.10), transparent 34%),
    linear-gradient(135deg, #F7F2EA 0%, #FFFFFF 100%) !important;
  color: #2C2F35 !important;
  text-align: center !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

body.page-services .cta-strip h2 {
  color: #2C2F35 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body.page-services .cta-strip p {
  color: #667085 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-services .cta-strip .btn-p {
  background: #2C2F35 !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 42px rgba(44,47,53,0.18) !important;
}

body.page-services .cta-strip .btn-s {
  background: rgba(44,47,53,0.04) !important;
  color: #2C2F35 !important;
  border-color: rgba(44,47,53,0.10) !important;
}

body.page-services .cta-strip .btn-s:hover {
  background: rgba(44,47,53,0.08) !important;
  color: #2C2F35 !important;
}

/* v23 — surgical visual cleanup after removing Services rogue process blocks
   Scope: Services detail panel height + Contact 'Who we work with' empty-space fix only. */

/* Services: after removing the rogue numbered process lists, the right-hand white panel must shrink to its content. */
body.page-services .svc-detail-inner {
  align-items: start !important;
}

body.page-services .svc-right {
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Contact: make the final 'Who we work with' section use the full width so it does not look unfinished. */
body.page-contact .not-suited {
  padding-bottom: 80px !important;
}

body.page-contact .suited-grid {
  max-width: none !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.page-contact .suited-item {
  min-height: 118px !important;
  align-items: flex-start !important;
}

@media (max-width: 1024px) {
  body.page-contact .suited-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.page-contact .suited-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   v24 — Deb contained layout test
   Scope: desktop/larger-screen containment only.
   Keeps header/footer full width and preserves existing section colours.
   This is a visual comparison version against locked v23.
   ============================================================ */
@media (min-width: 1200px) {
  body:not(.page-privacy):not(.page-complaints) .sec,
  body:not(.page-privacy):not(.page-complaints) .page-header,
  body:not(.page-privacy):not(.page-complaints) .cards-sec,
  body:not(.page-privacy):not(.page-complaints) .svc-detail,
  body:not(.page-privacy):not(.page-complaints) .contact-body,
  body:not(.page-privacy):not(.page-complaints) .not-suited,
  body:not(.page-privacy):not(.page-complaints) .start-hero,
  body:not(.page-privacy):not(.page-complaints) .start-services,
  body:not(.page-privacy):not(.page-complaints) .start-how,
  body:not(.page-privacy):not(.page-complaints) .start-fit,
  body:not(.page-privacy):not(.page-complaints) .start-cta,
  body:not(.page-privacy):not(.page-complaints) .reg-sec,
  body:not(.page-privacy):not(.page-complaints) .cta-strip,
  body:not(.page-privacy):not(.page-complaints) .cta-sec,
  body:not(.page-privacy):not(.page-complaints) .hero {
    padding-left: max(52px, calc((100vw - 1080px) / 2)) !important;
    padding-right: max(52px, calc((100vw - 1080px) / 2)) !important;
  }

  body:not(.page-privacy):not(.page-complaints) .hero-inner,
  body:not(.page-privacy):not(.page-complaints) .svc-detail-inner,
  body:not(.page-privacy):not(.page-complaints) .contact-grid,
  body:not(.page-privacy):not(.page-complaints) .footer-grid,
  body:not(.page-privacy):not(.page-complaints) .footer-bottom {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.page-privacy):not(.page-complaints) .ethos-grid,
  body:not(.page-privacy):not(.page-complaints) .who-grid,
  body:not(.page-privacy):not(.page-complaints) .svc-grid,
  body:not(.page-privacy):not(.page-complaints) .report-grid,
  body:not(.page-privacy):not(.page-complaints) .systems-row,
  body:not(.page-privacy):not(.page-complaints) .suited-grid,
  body:not(.page-privacy):not(.page-complaints) .cards-grid {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   v26 — Cookie banner + Cookie Policy support
   Scope: cookie consent UI only.
   ============================================================ */
.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  pointer-events: none;
}

.cookie-banner-inner {
  max-width: 1080px;
  margin: 0 auto;
  background: #2C2F35;
  color: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.28);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  pointer-events: auto;
}

.cookie-banner-copy strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.cookie-banner-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.70);
  max-width: 650px;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-banner-link {
  color: #FF8A2B;
  font-size: 13px;
  text-decoration: none;
  margin-right: 4px;
}

.cookie-banner-link:hover {
  text-decoration: underline;
}

.cookie-btn,
.cookie-inline-settings {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 16px;
  line-height: 1;
}

.cookie-btn-primary {
  background: var(--orange);
  color: #fff;
}

.cookie-btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}

.cookie-btn-primary:hover {
  background: #FF7A1A;
}

.cookie-btn-secondary:hover {
  background: rgba(255,255,255,0.13);
}

.cookie-inline-settings {
  background: #2C2F35;
  color: #fff;
  margin-top: 4px;
}

.cookie-inline-settings:hover {
  background: #1F2329;
}

@media (max-width: 768px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .cookie-banner-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
  }

  .cookie-banner-actions {
    justify-content: flex-start;
  }

  .cookie-btn {
    flex: 1 1 auto;
  }
}