/* =====================================================
   ODESA — Commercial Cleaning Company Website
   Shared stylesheet
   ===================================================== */

/* Brand typefaces per the Odesa Visual Identity Toolkit (p.13) are Mackinac
   Book (headlines) and Figtree (body copy). Figtree is the toolkit's
   literal, correct spec and needs no substitute — it was live on this site
   until a deliberate client request to compare it against five named
   alternatives (Montserrat, Avenir Next, Proxima Nova, Gotham, Nunito Sans)
   and swap to the closest match.

   That comparison was done against the actual rendered text in the
   toolkit's own typography page: Figtree has a single-storey "a" and "g"
   (a plain round bowl, no top hook / an open-tail g) and softly rounded
   terminals on letters like "t" — geometric bones, but warm rather than
   architectural. Avenir Next and Proxima Nova were ruled out first since
   both use a double-storey "a" — a structural mismatch, not just a style
   difference. Of the remaining three, Montserrat and Gotham share the
   single-storey a/g but are noticeably colder and more architectural
   (flatter terminals, more rigid signage-inspired proportions); Nunito
   Sans keeps that same soft, rounded warmth alongside the single-storey
   a/g, making it the closest visual match — so it now replaces Figtree as
   --font-sans below, per that request. */

/* Mackinac Book (headlines, per the brand toolkit) is a commercially
   licensed foundry font sold by P22 Type Foundry (see p22.com/fonts/mackinac
   and fonts.com) — it is not free and is NOT bundled here, and it should
   not be sourced from "free font download" sites, which redistribute
   commercial fonts without a licence.

   Headings run on Nunito Sans site-wide (see --font-serif below), per the
   client's explicit request to match the page-design mockup's own bold
   sans headlines rather than the toolkit's later serif spec — with one
   deliberate exception: the homepage hero heading ("London's local
   commercial cleaning company") was asked to go back to a light serif to
   match a specific reference image, so Lora is loaded again just for that
   one heading (see .hero.hero-photo h1 further down). Restoring a serif
   treatment more broadly later (with a real, licensed Mackinac Book, or
   Lora as a stand-in again) just means pointing --font-serif at Lora
   directly instead of aliasing it to --font-sans. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root{
  /* Brand palette — exact values from the Odesa Visual Identity Toolkit */
  --color-dark: #373534;       /* Odesa Dark Grey (primary) */
  --color-dark-2: #2a2827;
  --color-light: #f5f5f5;      /* Odesa Light Grey (secondary) */
  --color-light-2: #e7e7e7;
  --color-offices: #00bdef;    /* Sector colour: Offices */
  --color-communal: #00bc71;   /* Sector colour: Communal */
  --color-retail: #fd5c62;     /* Sector colour: Retail */
  --color-education: #ffa600;  /* Sector colour: Education */
  --color-public: #ff65db;     /* Sector colour: Public */
  /* aliases used by section blocks below (mapped to sector colours,
     used sparingly per the toolkit's "never mix sector colours" rule —
     each full-bleed block below draws from exactly one sector colour) */
  --color-coral: var(--color-retail);
  --color-orange: var(--color-education);
  --color-teal: var(--color-offices);
  --color-green: var(--color-communal);
  --color-pink: var(--color-public);
  --color-white: #ffffff;
  --color-offwhite: #f5f5f5;
  --color-ink: #2a2a28;
  --color-ink-soft: #57564f;
  --color-border: rgba(255,255,255,0.18);
  --color-border-dark: rgba(0,0,0,0.1);

  /* --font-serif is aliased to --font-sans below: the client asked for the
     whole site to run on Nunito Sans, matching the bold sans headlines
     actually used in the page-design mockup (the Lora/Mackinac serif
     pairing came from the brand toolkit's typography spec, a separate,
     later document — see the comment above the @import statements).
     Every heading still uses this variable, so restoring the serif later
     is a one-line change: swap the line below back to
     'Lora', Georgia, 'Times New Roman', serif */
  --font-serif: var(--font-sans);
  --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1200px;
  --radius: 4px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; font-size: 19px; }
body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
  font-family: var(--font-serif);
  font-weight: 700;
  margin: 0 0 0.5em;
  line-height: 1.15;
}
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px){
  .container{ padding: 0 20px; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  background: var(--color-dark);
  color: var(--color-white);
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn:hover{ background: var(--color-dark-2); transform: translateY(-1px); }
.btn-light{ background: var(--color-white); color: var(--color-dark); }
.btn-light:hover{ background: var(--color-offwhite); }
.btn-outline{ background: transparent; border: 1.5px solid currentColor; }
.btn-sm{ padding: 5px 13px; font-size: 0.68rem; gap: 5px; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: relative;
  z-index: 100;
  background: var(--color-dark);
  color: var(--color-white);
}
.site-header.header-transparent{
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 70%, transparent 100%);
}
.header-inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 32px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo-block{ display: flex; flex-direction: column; gap: 6px; }
/* Per the brand toolkit ("the main logo uses the Odesa motif as the 'O' in
   Odesa"), the motif isn't a decorative icon beside the wordmark — it IS
   the O. So the markup is the ring/sparkle motif immediately followed by
   the text "DESA" (no letter, no gap), baseline-aligned like a real
   glyph, with the icon sized in em so it tracks the O-shaped cap-height
   of whatever font-size this is used at (header, nav overlay, footer). */
.logo{
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--color-white);
}
.logo svg{ width: 0.72em; height: 0.72em; flex-shrink: 0; }
.logo-tagline{
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.75);
  max-width: 180px;
}
.menu-toggle{
  background: none;
  border: none;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin: -10px;
}
.menu-toggle span{
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Full-screen nav overlay ---------- */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
}
.nav-overlay.is-open{ transform: translateY(0); }
.nav-overlay-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 32px;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
}
.nav-close{
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.8rem;
  line-height: 1;
  padding: 10px;
  margin: -10px;
}
.nav-links{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 20px 32px 60px;
}
.nav-links > li{
  border-bottom: 1px solid var(--color-border);
}
.nav-links > li > a, .nav-links > li > .nav-parent-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--color-white);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.nav-links a:hover{ color: var(--color-orange); }
.nav-parent-toggle .chev{ transition: transform 0.2s ease; font-size: 1.2rem; font-family: var(--font-sans); }
.nav-item.is-open .nav-parent-toggle .chev{ transform: rotate(180deg); }
.nav-sublist{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.nav-item.is-open .nav-sublist{ max-height: 500px; }
.nav-sublist li a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 10px 20px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: rgba(255,255,255,0.8);
}
.nav-sublist li a:hover{ color: var(--color-orange); }
.nav-sub-badge{
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-white);
}
.nav-overlay-foot{
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 32px 40px;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
}
.nav-overlay-foot a{ color: var(--color-white); }
.nav-overlay-foot .social-row{ display: flex; gap: 12px; margin-top: 14px; }

body.nav-open{ overflow: hidden; }

/* ---------- Hero sections ---------- */
.hero{
  position: relative;
  color: var(--color-white);
}
.hero-photo{
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  padding-bottom: 70px;
}
.hero-photo .container{ position: relative; z-index: 2; padding-top: 220px; }
.hero-photo::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(20,20,20,0.55) 75%);
  z-index: 1;
}
.hero-plain{
  background: var(--color-dark);
  padding: 200px 0 70px;
}
.hero h1{
  font-size: clamp(2.3rem, 5.5vw, 3.7rem);
  font-weight: 700;
  max-width: 780px;
}
.hero h1 em{ font-style: italic; color: var(--color-orange); }
/* Homepage hero only — a client-requested exception to the sitewide Nunito
   Sans headings: this one heading goes back to a light serif, matching a
   reference image (Lora at a light weight, with "local" underlined). This
   is scoped tightly to .hero.hero-photo (the homepage hero only — no other
   page uses that class) so it doesn't affect headings anywhere else. */
.hero.hero-photo h1{
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
.hero-photo h1 .u{ text-decoration: underline; text-underline-offset: 4px; }
.hero p.lede{
  font-size: 1.05rem;
  max-width: 620px;
  color: rgba(255,255,255,0.85);
}
.hero-icon{ margin-bottom: 22px; }
.hero-icon svg{ width: 46px; height: 46px; }
.sector-kicker{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px;
}
.sector-kicker-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Stats block (dark) ---------- */
.stats-block{ background: var(--color-dark); color: var(--color-white); padding: 70px 0; }
.stats-block h2{ font-size: 2.15rem; font-weight: 700; max-width: 560px; margin-bottom: 40px; }
.stats-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 36px 0;
  margin-bottom: 36px;
}
.stat{ display: flex; flex-direction: column; gap: 10px; }
.stat svg{ width: 30px; height: 30px; }
.stat .stat-num{ font-family: var(--font-serif); font-size: 2rem; }
.stat .stat-label{ font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.stats-block .body-copy{ max-width: 640px; color: rgba(255,255,255,0.85); margin-bottom: 28px; }

@media (max-width: 760px){
  .stats-row{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Split / two-column content blocks ---------- */
.split-block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  transition: background-color 0.35s ease;
}
.split-block .split-media{ background-size: cover; background-position: center; min-height: 280px; }
.split-block .split-copy{ padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
/* .split-copy is a column flex container with the default align-items:
   stretch, which is what's needed for the heading/paragraph/list to wrap
   at the column's width — but it also stretches a `.btn` link to that
   same full width, which is never the intended look for a button. Opt
   the button back out to its natural, content-hugging size. */
.split-block .split-copy .btn{ align-self: flex-start; }
.split-block .split-copy h2{ font-size: 2.05rem; font-weight: 700; margin-bottom: 18px; }
.split-block .split-copy ul{ margin: 18px 0; }
.split-block .split-copy ul li{ position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 0.95rem; }
.split-block .split-copy ul li::before{ content: "•"; position: absolute; left: 0; }

.split-block.bg-green{ background: var(--color-green); color: var(--color-dark); grid-template-columns: 0.75fr 1.25fr; }
.split-block.bg-orange{ background: var(--color-orange); color: var(--color-ink); }
.split-block.bg-teal{ background: var(--color-teal); color: var(--color-ink); }

/* ---------- Sector link list (plain, hyperlinked; hovering a sector
   briefly themes the whole split-block in that sector's own colour) ---------- */
.sector-link-list{ margin: 16px 0 22px; }
.sector-link-list li + li{ margin-top: 2px; }
.sll-link{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: inherit;
  transition: color 0.2s ease;
}
.sll-bullet{ width: 14px; height: 14px; flex-shrink: 0; color: inherit; transition: color 0.2s ease; }
.sll-link:hover, .sll-link:focus-visible{ color: var(--color-white); }
/* override the generic .split-copy ul bullet styling — this list uses its
   own sparkle icon as the bullet, not a CSS ::before dot */
.split-block .split-copy .sector-link-list li{ padding-left: 0; }
.split-block .split-copy .sector-link-list li::before{ content: none; }

@media (max-width: 800px){
  .split-block, .split-block.bg-green{ grid-template-columns: 1fr; }
  .split-block .split-media{ order: -1; }
}

/* ---------- All spaces / sector icons block ---------- */
.spaces-block{ background: var(--color-dark); color: var(--color-white); padding: 56px 0; }
.spaces-inner{ display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.spaces-copy{ max-width: 420px; }
.spaces-copy h2{ font-size: 1.85rem; font-weight: 700; margin-bottom: 10px; }
.spaces-copy p{ font-size: 0.92rem; color: rgba(255,255,255,0.75); margin: 0; }
.spaces-icons{ display: flex; gap: 34px; flex-wrap: wrap; }
.space-icon{ display: flex; flex-direction: column; align-items: center; gap: 12px; width: 84px; text-align: center; }
.space-icon .badge{
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.space-icon span.label{ font-size: 0.78rem; color: rgba(255,255,255,0.85); }

/* ---------- Team teaser (Communication is the direct line) ---------- */
.team-teaser{ background: var(--color-white); padding: 0; }
.team-teaser-inner{
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
}
.team-teaser-photo{
  background-size: cover;
  background-position: center top;
  min-height: 320px;
}
.team-teaser-people{
  display: flex;
}
.team-teaser-people > div{
  flex: 1;
  background-size: cover;
  background-position: center top;
  min-height: 320px;
}
.team-teaser-copy{ padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; grid-column: 1 / -1; }
.team-teaser-grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.team-teaser-copy h2{ font-size: 2.05rem; font-weight: 700; max-width: 360px; }
.team-teaser-copy p{ max-width: 420px; color: var(--color-ink-soft); font-size: 0.95rem; }

.team-strip{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.team-strip > div{ min-height: 340px; background-size: cover; background-position: center top; }
.team-strip .copy-cell{
  background: var(--color-white);
  padding: 40px 36px;
  display: flex; flex-direction: column; justify-content: center;
}
.team-strip .copy-cell h2{ font-size: 1.85rem; font-weight: 700; }
.team-strip .copy-cell p{ font-size: 0.92rem; color: var(--color-ink-soft); }

@media (max-width: 900px){
  .team-strip{ grid-template-columns: 1fr 1fr; }
  .team-strip .copy-cell{ grid-column: 1 / -1; order: -1; }
}

/* ---------- People-first equation teaser ---------- */
.equation-block{ padding: 64px 0; text-align: center; }
.equation-block.bg-light{ background: var(--color-light); }
.equation-block.bg-orange{ background: var(--color-orange); }
.equation-block h2{ font-size: 2.05rem; font-weight: 700; margin-bottom: 36px; }
.equation-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.equation-row .eq-item{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.equation-row .eq-item svg{ width: 56px; height: 56px; }
.equation-row .eq-item span{ font-size: 0.85rem; max-width: 120px; }
.equation-row .eq-symbol{ font-size: 2rem; font-family: var(--font-serif); }
.equation-block .body-copy{ max-width: 640px; margin: 0 auto 30px; font-size: 0.95rem; }

/* ---------- CTA banner (coral) ---------- */
.cta-banner{ background: var(--color-coral); color: var(--color-white); padding: 40px 0; }
.cta-inner{
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-left{ display: flex; align-items: center; gap: 18px; flex: 1 1 340px; }
.cta-left svg{ width: 40px; height: 40px; flex-shrink: 0; }
.cta-left h2{ font-size: 1.65rem; font-weight: 700; margin: 0; }
.cta-right{
  flex: 1 1 380px;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,0.4);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.92);
}
@media (max-width: 700px){
  .cta-right{ border-left: none; padding-left: 0; }
}

/* ---------- Benefits / values 3-col ---------- */
.benefits-block{ background: var(--color-white); padding: 70px 0; }
.benefits-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.benefit svg{ width: 34px; height: 34px; margin-bottom: 14px; }
.benefit h3{ font-size: 1.15rem; font-weight: 500; font-family: var(--font-sans); margin-bottom: 10px; }
.benefit p{ font-size: 0.88rem; color: var(--color-ink-soft); }
@media (max-width: 760px){
  .benefits-grid{ grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- Generic content grid (sustainability) ---------- */
.content-grid-block{ background: var(--color-light); padding: 70px 0; }
.content-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
}
.content-card svg{ width: 30px; height: 30px; margin-bottom: 14px; }
.content-card h3{ font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; }
.content-card p{ font-size: 0.88rem; color: var(--color-ink-soft); margin-bottom: 10px; }
.content-card ul{ font-size: 0.85rem; color: var(--color-ink-soft); }
.content-card ul li{ position: relative; padding-left: 16px; margin-bottom: 5px; }
.content-card ul li::before{ content: "•"; position: absolute; left: 0; }
@media (max-width: 900px){
  .content-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .content-grid{ grid-template-columns: 1fr; }
}

/* ---------- Checklist / process section (dark) ---------- */
.checklist-block{ background: var(--color-dark); color: var(--color-white); padding: 70px 0; }
.checklist-block h2{ font-size: 2.05rem; font-weight: 700; max-width: 520px; }
.checklist-block > .container > p{ max-width: 560px; color: rgba(255,255,255,0.8); }
.checklist-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.checklist-grid ul li{ display: flex; gap: 12px; margin-bottom: 18px; font-size: 0.92rem; color: rgba(255,255,255,0.9); }
.checklist-grid ul li svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.checklist-grid .check-item{ margin-bottom: 22px; }
.checklist-grid .check-item h4{ font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; display:flex; gap:10px; align-items:flex-start; }
.checklist-grid .check-item h4 svg{ width: 20px; height:20px; flex-shrink:0; margin-top:2px; }
.checklist-grid .check-item p{ font-size: 0.88rem; color: rgba(255,255,255,0.7); margin-left: 30px; }
@media (max-width: 800px){
  .checklist-grid{ grid-template-columns: 1fr; }
}

/* ---------- Process / benefits split (dark) ---------- */
.process-block{ background: var(--color-dark); color: var(--color-white); padding: 70px 0; }
.process-grid{ display: grid; grid-template-columns: 2fr 1fr; gap: 50px; }
.process-steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-steps h4{ font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; }
.process-steps p{ font-size: 0.85rem; color: rgba(255,255,255,0.75); }
.process-benefits{ border-left: 1px solid var(--color-border); padding-left: 40px; }
.process-benefits ul li{ position: relative; padding-left: 18px; margin-bottom: 10px; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.process-benefits ul li::before{ content: "•"; position: absolute; left: 0; color: var(--accent, var(--color-orange)); }
@media (max-width: 900px){
  .process-grid{ grid-template-columns: 1fr; }
  .process-steps{ grid-template-columns: 1fr 1fr; }
  .process-benefits{ border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: 30px; }
}

/* ---------- Testimonial ---------- */
.testimonial-block{ background: var(--color-orange); padding: 60px 0; }
.testimonial-block blockquote{
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  max-width: 900px;
  margin: 0 0 24px;
}
.testimonial-block .attribution{ font-size: 0.85rem; font-weight: 600; }
.testimonial-block .attribution span{ display: block; font-weight: 400; opacity: 0.75; }

/* ---------- Sector hero split (orange tailored block) ---------- */
.tailored-block{ display: grid; grid-template-columns: 1fr 1fr; }
.tailored-copy{ background: var(--color-orange); padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
.tailored-copy h2{ font-size: 1.95rem; font-weight: 700; margin-bottom: 16px; }
.tailored-copy ul{ margin-top: 16px; }
.tailored-copy ul li{ position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 0.9rem; }
.tailored-copy ul li::before{ content: "•"; position: absolute; left: 0; }
.tailored-media{ background-size: cover; background-position: center; min-height: 320px; }
@media (max-width: 800px){
  .tailored-block{ grid-template-columns: 1fr; }
  .tailored-media{ order: -1; }
}

/* ---------- Feature row (4 icon cards) ---------- */
.feature-row-block{ background: var(--color-white); padding: 70px 0; }
.feature-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.feature-row svg{ width: 32px; height: 32px; margin-bottom: 14px; }
.feature-row h3{ font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.feature-row p{ font-size: 0.86rem; color: var(--color-ink-soft); }
@media (max-width: 900px){ .feature-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .feature-row{ grid-template-columns: 1fr; } }

/* ---------- Bios (Meet your team) ---------- */
.bio-intro{ background: var(--color-light); padding: 70px 0; position: relative; overflow: hidden; }
.bio-intro-grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.bio-intro h2{ font-size: 1.95rem; font-weight: 700; }
.bio-intro p{ color: var(--color-ink-soft); font-size: 0.95rem; }
.bio-decor{ display: flex; justify-content: center; }
.bio-decor svg{ width: 200px; height: 200px; opacity: 0.9; }

.bio-block{ background: var(--color-light-2); }
.bio-block:nth-child(even){ background: var(--color-light); }
.bio-row{ display: grid; grid-template-columns: 260px 1fr; gap: 44px; padding: 48px 0; align-items: start; }
.bio-photo-wrap{ display: flex; flex-direction: column; }
.bio-photo{ width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center top; }
.bio-name-bar{ background: var(--color-dark); color: var(--color-white); padding: 12px 16px; }
.bio-name-bar strong{ display: block; font-size: 0.98rem; }
.bio-name-bar span{ font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.bio-copy{ display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.bio-copy p{ font-size: 0.9rem; color: var(--color-ink-soft); }
.bio-copy h4{ font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; }
.bio-copy ul li{ position: relative; padding-left: 16px; margin-bottom: 8px; font-size: 0.88rem; color: var(--color-ink-soft); }
.bio-copy ul li::before{ content: "•"; position: absolute; left: 0; }
@media (max-width: 800px){
  .bio-intro-grid{ grid-template-columns: 1fr; }
  .bio-row{ grid-template-columns: 1fr; }
  .bio-copy{ grid-template-columns: 1fr; }
  .bio-photo{ max-width: 260px; }
}

/* ---------- Sector cards on hub / dropdown feel ---------- */
.sector-list-block{ background: var(--color-white); padding: 70px 0; }
.sector-cards{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.sector-card{ border: 1px solid var(--color-border-dark); border-radius: var(--radius); padding: 28px 18px; text-align: center; transition: box-shadow .2s ease, transform .2s ease; }
.sector-card:hover{ box-shadow: 0 12px 24px rgba(0,0,0,0.08); transform: translateY(-3px); }
.sector-card .ring{ width: 56px; height: 56px; border-radius: 50%; background: var(--color-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sector-card .ring svg{ width: 26px; height: 26px; }
.sector-card h3{ font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.sector-card p{ font-size: 0.82rem; color: var(--color-ink-soft); margin: 0; }
@media (max-width: 900px){ .sector-cards{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 600px){ .sector-cards{ grid-template-columns: repeat(2,1fr);} }

/* ---------- Contact page ---------- */
.contact-block{ background: var(--color-dark); color: var(--color-white); padding: 90px 0 70px; }
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-copy h1{ font-size: clamp(2.15rem, 4.3vw, 3rem); font-weight: 700; }
.contact-copy .hero-icon svg{ width: 40px; height: 40px; }
.contact-copy p{ max-width: 480px; color: rgba(255,255,255,0.85); }
.form-field{ margin-bottom: 20px; }
.form-field label{ display: block; font-size: 0.85rem; margin-bottom: 6px; color: rgba(255,255,255,0.85); }
.form-field input, .form-field textarea{
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: var(--color-white);
  color: var(--color-ink);
}
.form-field input:focus, .form-field textarea:focus{
  outline: 2px solid var(--color-orange);
}
.form-field textarea{ min-height: 140px; resize: vertical; }
.form-error{ color: #ffb4b4; font-size: 0.78rem; margin-top: 4px; min-height: 1em; }
.form-status{ margin-top: 16px; font-size: 0.9rem; }
.form-status.success{ color: #8be8b0; }
@media (max-width: 800px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-dark); color: rgba(255,255,255,0.85); padding: 56px 0 32px; }
.footer-top{ display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; margin-bottom: 40px; }
.footer-logo{ display: flex; align-items: baseline; gap: 0; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.5px; color: var(--color-white); margin-bottom: 14px; }
.footer-logo svg{ width: 0.72em; height: 0.72em; flex-shrink: 0; }
.footer-col{ font-size: 0.88rem; min-width: 200px; }
.footer-col p{ margin: 0 0 4px; }
.footer-col a{ display: inline-block; }
.footer-col a:hover{ color: var(--color-orange); }
.footer-links{ display: flex; flex-direction: column; gap: 6px; }
.footer-links-sectors a{ display: flex; align-items: center; gap: 10px; }
.footer-social{ display: flex; gap: 10px; margin-top: 8px; }
.footer-social a{
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 16px; height: 16px; }
.footer-bottom{
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}
/* Small credit line for the site's builder, kept deliberately understated —
   a single small line at the very bottom of the footer, not a banner. */
.site-credit{ background: var(--color-dark); padding: 10px 0; }
.site-credit .container{ text-align: center; }
.site-credit span{ font-size: 0.66rem; color: rgba(255,255,255,0.4); letter-spacing: 0.01em; }
.site-credit a{ color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset: 2px; }
.site-credit a:hover{ color: var(--color-white); }
.accreditation-strip{ background: var(--color-offwhite); padding: 26px 0; }
.accreditation-row{ display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.accreditation-row img{ height: 34px; width: auto; }

/* Accreditation badges — placeholder graphics standing in for the real
   BICSc / QMS accreditation logos (see README) until the genuine files
   are supplied. */
.accred-bicsc{ display: flex; align-items: center; gap: 12px; }
.accred-bicsc svg{ width: 38px; height: 38px; color: var(--color-dark); flex-shrink: 0; }
.accred-bicsc strong{ display: block; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; color: var(--color-ink); letter-spacing: 0.01em; }
.accred-bicsc span{ display: block; font-size: 0.68rem; color: var(--color-ink-soft); max-width: 160px; line-height: 1.3; }

.accred-badge{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.14);
  background: var(--color-white);
  text-align: center;
  padding: 6px;
}
.accred-badge-brand{ font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-ink-soft); }
.accred-badge strong{ font-size: 0.82rem; font-weight: 700; line-height: 1.15; margin: 2px 0; color: var(--color-ink); }
.accred-badge-reg{ font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); }
.accred-badge svg{ width: 15px; height: 15px; color: var(--color-teal); margin-top: 3px; }

@media (max-width: 560px){
  .accred-badge{ width: 80px; height: 80px; }
}

/* ---------- Utility ---------- */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }
.section-pad{ padding: 70px 0; }
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-orange);
  color: var(--color-ink);
  padding: 10px 16px;
  z-index: 300;
}
.skip-link:focus{ left: 10px; top: 10px; }