/* =========================================================================
   EPHOLOGY LIMITED — SITE STYLESHEET
   -------------------------------------------------------------------------
   This file is organised into clearly labelled sections so it is easy to
   find and edit specific parts of the site. Use your editor's "search"
   (Ctrl/Cmd+F) for the section markers below, e.g. search "SECTION: HEADER".

   Contents:
     1. CSS VARIABLES (colours, fonts, spacing) — edit brand colours here
     2. RESET & BASE STYLES
     3. TYPOGRAPHY
     4. LAYOUT HELPERS (container, sections, grid)
     5. BUTTONS
     6. HEADER / NAVIGATION
     7. HERO SECTIONS
     8. FOOTER
     9. HOME PAGE SECTIONS
    10. SERVICES PAGE (accordion)
    11. PORTFOLIO PAGE (gallery grid + lightbox)
    12. ABOUT / AGENCIES PAGES
    13. CONTACT PAGE (form)
    14. "LET'S CHAT" CTA BLOCK (reused on Home / Services / Portfolio)
    15. RESPONSIVE / MOBILE MENU
   ========================================================================= */


/* =========================================================================
   1. CSS VARIABLES — EDIT BRAND COLOURS & FONTS HERE
   ========================================================================= */
:root {
  /* Brand colours — taken from the live Ephology site's Astra/Elementor
     global colour palette. Change these four values to re-theme the
     entire site. */
  --c-navy: #18232d;        /* header, dark sections, body copy */
  --c-orange: #ff9518;      /* the ONE brand orange — every orange background,
                                heading, link-hover, icon and button on the
                                site uses this single value, nothing else */
  --c-blue: #1882ff;        /* tertiary accent, used sparingly */

  --c-white: #ffffff;
  --c-black: #000000;
  --c-light: #eeeeee;
  --c-border: #e3c9a3;      /* soft border tint used on outlined cards */

  /* Fonts — both are free Google Fonts, loaded in <head> of every page */
  --font-heading: 'Expletus Sans', 'Segoe UI', sans-serif;
  --font-body: 'Quicksand', 'Segoe UI', sans-serif;

  /* Layout */
  --container-width: 1200px;
  --container-padding: 1.5rem;
  --radius-sm: 2px;
  --radius-md: 10px;
  --radius-lg: 24px;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
}

/* =========================================================================
   2. RESET & BASE STYLES
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Skip link for keyboard / screen-reader users (accessibility + SEO best practice) */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--c-orange);
  color: var(--c-black);
  padding: 0.75rem 1.25rem;
  z-index: 10000;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw + 1rem, 2.625rem); }
h3 { font-size: clamp(1.2rem, 1.5vw + 1rem, 1.5rem); }

p {
  margin: 0 0 1.25rem;
}

em, i.accent {
  font-style: italic;
}

/* Hand-drawn "scribble" underline under key words — matches the live
   site's technique exactly: a positioned ::after with a scribble SVG as
   its background-image. Default is orange (for use on light backgrounds);
   add the --white modifier on dark/orange backgrounds for contrast. */
.underline-word {
  position: relative;
  display: inline-block;
  line-height: 1.22;
}
.underline-word::after {
  content: "";
  position: absolute;
  bottom: -0.24em;
  left: 0;
  width: 100%;
  height: 0.18em;
  background-image: url('../assets/images/scribble-orange.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 5px;
  z-index: 1;
}
.underline-word--white::after {
  background-image: url('../assets/images/scribble-white.svg');
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-orange);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.text-center { text-align: center; }

/* =========================================================================
   4. LAYOUT HELPERS
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-xl);
}
.section--sm { padding-block: var(--space-lg); }

/* Two .section blocks stacked back-to-back would otherwise add their
   bottom + top padding together, doubling the visual gap between them.
   Collapse it down to a single, consistent gap (the top section's own
   bottom padding is enough). */
.section + .section {
  padding-top: 0;
}

/* ...EXCEPT a section that reads as its own self-contained "box" — a
   coloured background (dark/orange/light) or a boxed CTA card. Those
   need equal top/bottom padding on every page so their content sits
   centred inside them, never shoved up against the section above. */
.section + .section.section--dark,
.section + .section.section--orange,
.section + .section.section--light,
.section + .section:has(.chat-cta) {
  padding-top: var(--space-xl);
}
.section--sm.section--dark,
.section--sm.section--orange,
.section--sm.section--light,
.section--sm:has(.chat-cta) {
  padding-top: var(--space-lg);
}

.section--dark {
  background: var(--c-navy);
  color: var(--c-white);
}
.section--dark h1, .section--dark h2, .section--dark h3 {
  color: var(--c-white);
}
.section--orange {
  background: var(--c-orange);
  color: var(--c-black);
}
.section--light {
  background: var(--c-light);
}

.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

/* =========================================================================
   4a. UTILITY CLASSES
   -------------------------------------------------------------------------
   A small, deliberately short set of reusable classes that replace the
   one-off inline style="" attributes that used to appear on individual
   pages. Keeping styling in the stylesheet (not in inline attributes)
   means the site works under a strict Content-Security-Policy that
   disallows inline styles — see the _headers file at the site root.
   ========================================================================= */
.lead { font-size: 1.2rem; }
.measure-sm { max-width: 700px; }
.measure-md { max-width: 820px; }
.mt-0   { margin-top: 0; }
.mt-1   { margin-top: 1rem; }
.mt-1-5 { margin-top: 1.5rem; }
.mt-2   { margin-top: 2rem; }
.mt-2-5 { margin-top: 2.5rem; }

/* Reusable "icon + heading" layout (SVG icon inline with heading text) */
.icon-heading {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.icon-heading svg {
  color: var(--c-orange);
  flex-shrink: 0;
}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-black);
  background: var(--c-white);
  color: var(--c-black);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: var(--c-black);
  color: var(--c-white);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--c-navy);
  color: var(--c-white);
  border-color: var(--c-navy);
}
.btn--dark:hover {
  background: var(--c-white);
  color: var(--c-navy);
}

.btn--outline {
  background: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}
.btn--outline:hover {
  background: var(--c-white);
  color: var(--c-black);
}

.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--c-orange);
  color: var(--c-orange);
  font-size: 1.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.arrow-btn:hover {
  background: var(--c-orange);
  color: var(--c-white);
}

/* =========================================================================
   6. HEADER / NAVIGATION
   ========================================================================= */
.site-header {
  background: var(--c-navy);
  position: sticky;
  top: 0;
  z-index: 500;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
}

.site-logo img {
  height: 40px;
  width: auto;
}

.main-nav {
  display: flex;
}
.main-nav ul {
  display: flex;
  gap: 0.5rem;
}
.main-nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--c-white);
  border-radius: var(--radius-sm);
  transition: color 0.2s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--c-orange);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--c-white);
  font-size: 1.75rem;
  padding: 0.25rem 0.5rem;
}

/* =========================================================================
   7. HERO SECTIONS
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--c-black);
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
}
.hero__card {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.88);
  padding: var(--space-md) var(--space-md) calc(var(--space-md) + 0.75rem);
  border-radius: var(--radius-md);
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.hero__card h1 {
  margin: 0;
}

.hero--orange {
  background-color: var(--c-orange);
  /* 23 Aug 2026: responsive width tiers, see the .hero--home etc. note
     above for why this needs media queries instead of srcset. */
  background-image: url('../assets/images/portfolio-hero-woman-640.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 50%;
}
@media (min-width: 641px) {
  .hero--orange { background-image: url('../assets/images/portfolio-hero-woman-1200.webp'); }
}
@media (min-width: 1300px) {
  .hero--orange { background-image: url('../assets/images/portfolio-hero-woman.webp'); }
}
.hero--orange .hero__card {
  background: rgba(255,255,255,0.92);
}
.hero__portrait {
  position: absolute;
  right: 4%;
  bottom: 0;
  max-height: 100%;
  z-index: 1;
  display: none;
}

.hero--simple {
  min-height: 320px;
  background: var(--c-navy);
  color: var(--c-white);
}
.hero--simple h1 { color: var(--c-white); }

/* Per-page hero photo backgrounds (used with .hero--photo above) — kept
   here instead of inline style="" attributes on each page.

   23 Aug 2026: made responsive. These are full-viewport-height CSS
   background-images (background-size: cover), so a phone was downloading
   the exact same 165-305KB file as a 4K desktop monitor — background-image
   has no HTML srcset/sizes equivalent, so the fix is width-tiered files
   swapped by viewport width via media queries (mobile gets the smallest
   file by default; wider viewports get progressively larger ones). Mobile
   now downloads 35-74KB instead of 165-305KB for these, since it's almost
   always the narrower dimension that matters for a background-size:cover
   crop at this aspect ratio. */
.hero--home { background-image: url('../assets/images/hero-home-640.webp'); }
.hero--services { background-image: url('../assets/images/hero-services-640.webp'); }
.hero--about { background-image: url('../assets/images/hero-about-640.webp'); }
.hero--agencies { background-image: url('../assets/images/hero-agencies-640.webp'); }

@media (min-width: 641px) {
  .hero--home { background-image: url('../assets/images/hero-home-1200.webp'); }
  .hero--services { background-image: url('../assets/images/hero-services-1200.webp'); }
  .hero--about { background-image: url('../assets/images/hero-about-1200.webp'); }
  /* hero-agencies' source photo is only 1024px wide natively, so there's
     no separate 1200w tier for it — the original file IS the "large" tier. */
  .hero--agencies { background-image: url('../assets/images/hero-agencies.webp'); }
}
@media (min-width: 1300px) {
  .hero--home { background-image: url('../assets/images/hero-home.webp'); }
  .hero--services { background-image: url('../assets/images/hero-services.webp'); }
  .hero--about { background-image: url('../assets/images/hero-about.webp'); }
}

/* =========================================================================
   8. FOOTER
   ========================================================================= */
.site-footer {
  background: var(--c-white);
  padding-block: var(--space-lg) var(--space-md);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-md);
}
.footer-logo img {
  height: 44px;
  margin-bottom: var(--space-sm);
}
.footer-tagline {
  color: #444;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--space-sm);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--c-orange);
  color: var(--c-white);
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.footer-social a:hover {
  background: var(--c-navy);
}
.footer-heading {
  color: var(--c-orange);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
}
.footer-links li {
  margin-bottom: 0.6rem;
}
.footer-links a:hover { color: var(--c-orange); }
.footer-contact p {
  margin-bottom: 0.6rem;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}
.footer-contact a:hover { color: var(--c-orange); }
.footer-contact .icon {
  color: var(--c-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.footer-bottom {
  background: var(--c-orange);
  color: var(--c-black);
  text-align: center;
  padding: 1rem;
  margin-top: var(--space-lg);
  font-size: 0.95rem;
}

/* =========================================================================
   9. HOME PAGE SECTIONS
   ========================================================================= */
.intro-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.intro-block__icon img {
  max-width: 260px;
  margin-inline: auto;
}

.capability-list {
  background: var(--c-orange);
  padding: var(--space-md);
}
.capability-list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  max-width: var(--container-width);
  margin-inline: auto;
}
.capability-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--c-white);
  text-transform: uppercase;
  font-size: 0.95rem;
}
.icon-list {
  margin: 1.75rem 0;
}
.icon-list__label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
  color: var(--c-orange);
  margin-bottom: 0.85rem;
}
.icon-list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 2rem;
}
.icon-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.icon-list li .check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.capability-list li .check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* Client logo carousel — the live site scrolls its client logos in a
   continuous auto-playing strip (an Elementor/Swiper image carousel).
   This replicates that with a dependency-free CSS animation: the logo
   list is duplicated once in the HTML and the track scrolls -50% for a
   seamless, infinite loop. It just scrolls, continuously, with no
   pause-on-hover/click/tap and no hover colour effect — deliberately
   simple, by request (21 Aug 2026: an earlier pause-on-hover/button
   version was tried and removed).
   -------------------------------------------------------------------
   MOBILE FIX (kept from 21 Aug 2026): `loading="lazy"` was removed
   from the logo <img> tags in index.html/agencies.html — with it on,
   the images loaded in staggered over time on slower connections,
   changing the track's total width mid-animation and causing visible
   jumps. Loading them eagerly (they're small) keeps the scroll smooth
   from the first frame. Still respects prefers-reduced-motion, which
   is a system-level accessibility setting, not a hover/click control. */
.logo-carousel {
  overflow: hidden;
  margin-top: 2.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logo-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  animation: logo-scroll 32s linear infinite;
}
.logo-carousel img {
  height: 44px;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-carousel__track { animation: none; }
}

/* Tighten spacing/size slightly on narrow screens so more than one
   full logo is visible at a time instead of one giant logo filling
   most of the viewport. */
@media (max-width: 600px) {
  .logo-carousel__track { gap: var(--space-md); }
  .logo-carousel img { height: 34px; }
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  margin-block: var(--space-lg);
}
.stage-item {
  text-align: center;
}
.stage-item__icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  font-size: 2rem;
}
.stage-item:nth-child(odd) .stage-item__icon {
  background: var(--c-orange);
  color: var(--c-white);
}
.stage-item:nth-child(even) .stage-item__icon {
  background: var(--c-white);
  color: var(--c-orange);
}
.stage-item h3 {
  color: var(--c-white);
  font-size: 1.1rem;
  margin: 0;
}

.agency-banner {
  background: var(--c-navy);
  color: var(--c-white);
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}
.agency-banner h2 {
  color: var(--c-white);
  max-width: 900px;
  margin-inline: auto;
}

/* =========================================================================
   10. SERVICES PAGE — ACCORDION
   ========================================================================= */
.accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.accordion-item {
  border: 1px solid var(--c-orange);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.accordion-item__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--c-orange);
  text-align: left;
}
.accordion-item__icon {
  font-size: 1.4rem;
  width: 1em;
}
.accordion-item__panel {
  display: none;
  padding: 0 1.5rem 1.5rem 3.25rem;
}
.accordion-item.is-open .accordion-item__panel {
  display: block;
}
.accordion-item__panel ul {
  list-style: disc;
  padding-left: 1.2rem;
}
.accordion-item__panel li {
  margin-bottom: 0.85rem;
}
/* In-copy links inside an accordion answer (used on the FAQ page to link
   out to Services/About/Portfolio/Contact, and reusable anywhere else an
   accordion panel needs a link) — brand orange, underlined so the link is
   never colour-only, brand navy on hover/focus as the "ephology grey". */
.accordion-item__panel a {
  color: var(--c-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.accordion-item__panel a:hover,
.accordion-item__panel a:focus-visible {
  color: var(--c-navy);
}

/* =========================================================================
   11. PORTFOLIO PAGE — GALLERY GRID + LIGHTBOX
   ========================================================================= */
/* Uniform 3-column grid, matching the live site's Elementor gallery
   widget exactly: every cell is the same 3:2 aspect-ratio box with the
   photo cropped to fill it (object-fit: cover), so photos line up in
   neat, evenly-aligned rows instead of a Pinterest-style masonry. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-grid figure {
  margin: 0;
}
.gallery-grid a {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.gallery-grid a:hover img {
  transform: scale(1.03);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 4px;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--c-white);
  font-size: 1.75rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: var(--c-orange);
}

/* =========================================================================
   12. ABOUT / AGENCIES PAGES
   ========================================================================= */
.prose {
  max-width: 820px;
}
.prose p { font-size: 1.1rem; }
.prose .lede {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--c-orange);
  font-style: italic;
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  text-align: center;
}
.fit-grid__item {
  padding: var(--space-md);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

/* =========================================================================
   13. CONTACT PAGE — FORM
   ========================================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-lg);
}
.contact-info h3 {
  color: var(--c-orange);
  text-transform: uppercase;
  font-size: 1.1rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
}
.contact-info h3 svg {
  color: var(--c-navy);
  flex-shrink: 0;
}
.contact-info a.contact-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}
.contact-info a.contact-link:hover { color: var(--c-orange); }
.contact-info .icon {
  color: var(--c-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.contact-form {
  border: 1px solid var(--c-orange);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.form-row { margin-bottom: 1.25rem; }
.form-row label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.form-row .required { color: var(--c-orange); }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-orange);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--c-white);
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-hint {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.3rem;
}

.contact-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact-choice label {
  border: 1px solid var(--c-orange);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 1.25rem 0.5rem;
  cursor: pointer;
  display: block;
  font-weight: 700;
}
.contact-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-choice .choice-icon {
  display: block;
  font-size: 1.6rem;
  color: var(--c-orange);
  margin-bottom: 0.5rem;
}
.contact-choice label:has(input:checked) {
  background: var(--c-orange);
  color: var(--c-white);
}
.contact-choice label:has(input:checked) .choice-icon {
  color: var(--c-white);
}

.form-submit {
  text-align: center;
  margin-top: var(--space-sm);
}
.form-submit .btn {
  width: 100%;
  border-color: var(--c-orange);
}
.form-submit .btn:hover {
  background: var(--c-orange);
  color: var(--c-white);
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  display: none;
  font-weight: 600;
}
.form-status.is-success {
  display: block;
  background: #e6f7ed;
  color: #146c3a;
}
.form-status.is-error {
  display: block;
  background: #fde8e8;
  color: #a3221e;
}

/* honeypot field — hidden from real visitors, catches simple bots */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* =========================================================================
   14. "LET'S CHAT" CTA BLOCK
   ========================================================================= */
.chat-cta {
  background: var(--c-orange);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-md);
  align-items: center;
}
.chat-cta__photo img {
  border-radius: var(--radius-md);
  width: 100%;
}
.chat-cta__photo figcaption {
  text-align: center;
  margin-top: 0.5rem;
  color: var(--c-white);
  font-weight: 600;
}
.chat-cta__body h2,
.chat-cta__body p {
  color: var(--c-black);
}
.chat-cta__body h2 { margin-bottom: 1.25rem; }

/* White-on-dark variant — used on the About page, where the CTA sits on
   the navy section background instead of the usual orange. */
.chat-cta--white { background: var(--c-white); }
.chat-cta--white .chat-cta__photo figcaption { color: var(--c-black); }

/* =========================================================================
   15. RESPONSIVE / MOBILE MENU
   ========================================================================= */
@media (max-width: 900px) {
  .two-col,
  .intro-block,
  .contact-layout,
  .accordion,
  .chat-cta {
    grid-template-columns: 1fr;
  }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .fit-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-list ul { grid-template-columns: 1fr; }
  .icon-list ul { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }

  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-navy);
    flex-direction: column;
    display: none;
    padding: 1rem;
  }
  .main-nav.is-open { display: flex; }
  .main-nav ul {
    flex-direction: column;
    width: 100%;
  }
  .main-nav a { display: block; padding: 0.85rem 1rem; }

  .hero__card { padding: var(--space-sm); }

  .grid--3, .grid--4, .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .contact-choice { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fit-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   COOKIE CONSENT BANNER
   -------------------------------------------------------------------------
   Injected by js/analytics.js only when the visitor hasn't already
   accepted/declined analytics cookies (see that file). Fixed to the
   bottom of the viewport, above everything except the mobile nav
   overlay. Uses the site's existing .btn / .btn--dark / .btn--outline
   button styles so it matches the rest of the UI with no new button
   variants.
   ========================================================================= */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--container-padding);
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-white);
}
.cookie-banner__actions {
  display: flex;
  gap: var(--space-xs);
  flex: 0 0 auto;
}
.cookie-banner__actions .btn {
  padding: 10px 22px;
  font-size: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-banner__actions { justify-content: center; }
}

/* =========================================================================
   16. COOKIE BANNER / PRIVACY POLICY — SUPPLEMENTARY STYLES
   -------------------------------------------------------------------------
   23 Aug 2026: added alongside the cookie-banner UK GDPR/PECR update in
   js/analytics.js (see that file). Three elements introduced by that
   change had no styling yet:
     - .cookie-banner__link   the "Cookie & Privacy Policy" link inside
                               the banner text (was invisible: base `a`
                               is `color: inherit; text-decoration: none`,
                               so on the navy banner it was plain white
                               text with no indication it's a link)
     - .footer-cookie-btn     the "Cookie Preferences" re-open control in
                               the footer bar (was unstyled — rendered as
                               a default browser <button> instead of
                               matching the plain-text footer links)
     - .cookie-table          the cookies-used table on privacy-policy.html
                               (was an unstyled default HTML table)
   ========================================================================= */
.cookie-banner__link {
  color: var(--c-orange);
  text-decoration: underline;
}
.cookie-banner__link:hover {
  color: var(--c-white);
}

.footer-cookie-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.footer-cookie-btn:hover {
  color: var(--c-navy);
}

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-sm) 0;
  font-size: 0.95rem;
}
.cookie-table th,
.cookie-table td {
  text-align: left;
  padding: var(--space-xs);
  border: 1px solid var(--c-border);
  vertical-align: top;
}
.cookie-table th {
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-weight: normal;
}
.cookie-table tbody tr:nth-child(even) {
  background: var(--c-light);
}
@media (max-width: 600px) {
  .cookie-table { font-size: 0.85rem; }
  .cookie-table th, .cookie-table td { padding: 0.4rem; }
}