@charset "UTF-8";
/*!
    Main Stylesheet Manifest

    This file imports all SCSS partials in the correct order.
    DO NOT add styles here — use the appropriate partial instead.

    Compile: sass --watch css:css

    Import order:
        1. Fonts & Variables (design tokens)
        2. Helpers (mixins & utilities)
        3. Utility classes (colors, typography)
        4. Base element styles
        5. Components (reusable patterns)
        6. Sections (ACF flexible content)
        7. Page-specific overrides

    @author development@bronte.co.nz
*/
/*
    Font Face Declarations

    Define custom web fonts here using @font-face.
    Font files should be stored in /assets/fonts/ or loaded from CDN.

    After adding fonts, update $font-family-primary or $font-family-secondary
    in _variables.scss to use them.

    Example:
        @font-face {
            font-family: 'CustomFont';
            src: url('../assets/fonts/custom.woff2') format('woff2'),
                 url('../assets/fonts/custom.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
*/
/*
    Design Tokens (Variables)

    Central source of truth for all design values.
    ALWAYS check here before adding new values elsewhere.

    How to use:
        1. Import in your partial: @use 'variables' as *;
        2. Use variables: color: $color-primary;

    Naming conventions:
        $color-{name}      — colours
        $spacing-{size}    — spacing (xs, sm, md, lg, xl, 2xl, 3xl, 4xl)
        $font-size-{size}  — font sizes
        $font-weight-{name} — font weights
        $screen-{size}     — breakpoints
*/
/*
    Helper Utilities

    Layout, positioning, and display utilities.
    For typography utilities, see _typography.scss.
    For colour utilities, see _colors.scss.

    Usage:
        <div class="pos-relative">
            <img class="bg-image" src="..." alt="...">
            <div class="z-above">Content above image</div>
        </div>
*/
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.z-below {
  z-index: 5;
}

.z-base {
  z-index: 10;
}

.z-above {
  z-index: 15;
}

.mb-0 {
  margin-bottom: 0;
}

.last-child-mb-0 > :last-child {
  margin-bottom: 0;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/*
    Motion — entry animations & background parallax

    Entry animations:
        Elements tagged with .anim-fade-up start hidden and translated down,
        then ease into place when JS adds .is-visible (driven by an
        IntersectionObserver in custom.js). This includes standalone
        section images (text+image, image+text, pdf_document poster) —
        they fade up like any other content block.

        The class is applied at runtime — not in PHP — so users with JS
        disabled never see hidden content.

    Parallax:
        Reserved for full-bleed section background images only — currently
        the hero and .section-cta-block backdrops. They're oversized via
        top/height in their own SCSS so the scroll-translate never reveals
        the section background underneath. Standalone inline images do
        NOT parallax; they use the entry animation above.

    Reduced motion:
        All animations and parallax are disabled when the user has
        prefers-reduced-motion set.
*/
.anim-fade-up {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-parallax=bg] {
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  transition: transform 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-up.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-parallax=bg] {
    --parallax-y: 0px;
    transform: none;
  }
}
/*
    Colour Utility Classes

    Background and text colour utilities generated from $colors map.
    All colours are defined in _variables.scss.

    Usage:
        <div class="bg-primary text-white">Primary background</div>
        <p class="text-muted">Secondary text</p>

    Available classes:
        .bg-{color}   — background colour
        .text-{color} — text colour

    Where {color} is: primary, secondary, lime, dark, light, white, black, muted
*/
.bg-primary {
  background-color: #3f87a4;
}

.text-primary {
  color: #3f87a4;
}

.bg-secondary {
  background-color: #3eab85;
}

.text-secondary {
  color: #3eab85;
}

.bg-lime {
  background-color: #bbd136;
}

.text-lime {
  color: #bbd136;
}

.bg-dark {
  background-color: #242830;
}

.text-dark {
  color: #242830;
}

.bg-light {
  background-color: #f6f9f9;
}

.text-light {
  color: #f6f9f9;
}

.bg-white {
  background-color: #fff;
}

.text-white {
  color: #fff;
}

.bg-black {
  background-color: #000;
}

.text-black {
  color: #000;
}

.bg-muted {
  background-color: #777777;
}

.text-muted {
  color: #777777;
}

/*
    Typography Utility Classes

    Apply these classes directly in HTML to control text appearance.
    All values come from _variables.scss for consistency.

    Usage:
        <p class="text-lg font-bold">Large bold text</p>
        <span class="text-muted text-sm">Small muted caption</span>
*/
.text-left {
  text-align: left;
}

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

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

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-base {
  font-size: 16px;
}

.text-lg {
  font-size: 20px;
}

.text-xl {
  font-size: 28px;
}

.text-2xl {
  font-size: 36px;
}

.text-3xl {
  font-size: 48px;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.leading-tight {
  line-height: 1.2;
}

.leading-base {
  line-height: 1.25;
}

.leading-loose {
  line-height: 1.8;
}

.font-primary {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.font-secondary {
  font-family: Georgia, serif;
}

/*
    Pull Quote — content style applied inside WYSIWYG copy
    Editors switch to the Text tab and wrap a paragraph (or span) with
    class="pullquote" to highlight a sentence in the brand teal-blue.
    Figma: Sommerville Blocks — Text (104:90051).
*/
.pullquote {
  color: #3f87a4;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

/*
    Button Styles

    Base button styles and variants. Applied to .btn class, <button>, and
    submit inputs. Figma buttons are sentence case and rounded — the base
    class reflects that (no uppercase).

    Usage:
        <a href="#" class="btn btn-primary">Primary</a>
        <a href="#" class="btn btn-secondary">Secondary</a>
        <a href="#" class="btn btn-outline">Outline</a>
*/
.btn,
button,
input[type=submit] {
  -webkit-appearance: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  padding: 15px 18px;
  line-height: 1.25;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s all;
  border: 1px solid transparent;
  text-align: center;
}
.btn:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible {
  outline: 2px solid #3f87a4;
  outline-offset: 2px;
}
.btn:focus,
button:focus,
input[type=submit]:focus {
  outline: none;
}

.btn-primary {
  background-color: #3f87a4;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: #356f87;
  color: #fff;
}

.btn-secondary {
  background-color: #3eab85;
  color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  filter: brightness(0.92);
  color: #fff;
}

.btn-on-dark {
  background-color: #fff;
  color: #3f87a4;
}
.btn-on-dark:hover, .btn-on-dark:focus-visible {
  background-color: #f6f9f9;
  color: #356f87;
}

.btn-outline {
  background-color: transparent;
  color: inherit;
  border: 1px solid currentColor;
}
.btn-outline:hover, .btn-outline:focus-visible {
  background-color: #fff;
  color: #242830;
  border-color: #fff;
}

/*
    Navigation Menu Styles

    Covers the three WP nav menu locations:
        .menu-header — primary desktop nav with hover dropdowns
        .menu-mobile — slide-in side panel menu (accordion sub-menus)
        .menu-footer — multi-column footer links grid

    All three are the same base WP_Nav_Menu markup (ul > li > a) —
    the class modifier on the outer <ul> drives the variant styling.
*/
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------
    Sub-Menu Toggle Button

    Injected by the walker_nav_menu_start_el filter (functions/custom.php)
    next to top-level items that have children. Provides an accessible
    hit target for opening dropdowns without hijacking the parent link.
   ------------------------------------------------------------------ */
.sub-menu-toggle {
  background: transparent;
  border: none;
  color: inherit;
  padding: 4px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sub-menu-toggle svg {
  transition: transform 0.2s ease;
}
.sub-menu-toggle[aria-expanded=true] svg {
  transform: rotate(180deg);
}

/* ==================================================================
    Header Menu — horizontal with dropdowns (desktop only)
   ================================================================== */
.menu-header {
  display: flex;
  align-items: center;
  gap: 24px;
}
.menu-header > li {
  position: relative;
}
.menu-header > li > a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  padding: 8px 0;
  display: inline-block;
}
.menu-header > li > a:hover, .menu-header > li > a:focus-visible {
  color: #bbd136;
}
.menu-header > li.menu-item-has-children {
  display: flex;
  align-items: center;
  gap: 4px;
}
.menu-header > li.menu-item-has-children > .sub-menu-toggle {
  color: #fff;
}
.menu-header .sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 6px;
  min-width: 220px;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.menu-header .sub-menu a {
  display: block;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
}
.menu-header .sub-menu a:hover, .menu-header .sub-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #bbd136;
}
.menu-header > li:hover > .sub-menu,
.menu-header > li:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ==================================================================
    Mobile Menu — side panel, accordion sub-menus
   ================================================================== */
.menu-mobile {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}
.menu-mobile > li {
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.menu-mobile > li > a {
  flex: 1;
  padding: 16px 0;
  color: #242830;
  font-size: 20px;
  font-weight: 500;
}
.menu-mobile > li > a:hover, .menu-mobile > li > a:focus-visible {
  color: #3f87a4;
}
.menu-mobile > li > .sub-menu-toggle {
  color: #242830;
  padding: 16px;
  margin-right: -16px;
}
.menu-mobile .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 8px 16px;
  width: 100%;
  display: none;
}
.menu-mobile .sub-menu a {
  display: block;
  padding: 8px 0;
  color: #777777;
  font-size: 16px;
}
.menu-mobile .sub-menu a:hover, .menu-mobile .sub-menu a:focus-visible {
  color: #3f87a4;
}

/* ==================================================================
    Footer Menu — grid of columns, parents are column headings
   ================================================================== */
.menu-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  width: 100%;
}
@media (min-width: 576px) {
  .menu-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .menu-footer {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .menu-footer {
    grid-template-columns: repeat(5, 1fr);
  }
}
.menu-footer > li {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-footer > li > a {
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
.menu-footer > li > a:hover, .menu-footer > li > a:focus-visible {
  color: #bbd136;
  text-decoration: underline;
}
.menu-footer > li:not(.menu-item-has-children) {
  gap: 0;
}
.menu-footer .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-footer .sub-menu a {
  color: #fff;
  font-size: 16px;
  line-height: 20px;
}
.menu-footer .sub-menu a:hover, .menu-footer .sub-menu a:focus-visible {
  color: #bbd136;
}

/*
    Base Element Styles

    Global styles for HTML elements (body, a, img, headings, etc.).
    These apply site-wide without needing classes.

    For utility classes, see:
        _helpers.scss    — layout utilities
        _typography.scss — text utilities
        _colors.scss     — colour utilities
*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--wp-admin--admin-bar--height); /**
* @link https://make.wordpress.org/core/2022/01/07/theme-focused-changes-and-filters-in-wordpress-5-9/#adjusting-for-fixed-header-navigation
*/
  overflow-x: clip;
}

html,
body {
  min-height: 100vh;
}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: #242830;
  display: flex;
  flex-direction: column;
  margin: 0;
}

a {
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

main {
  flex: 1;
}

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

p img {
  display: inline-block;
}

.text > :first-child {
  margin-top: 0;
}
.text > :last-child {
  margin-bottom: 0;
}
.text ol,
.text ul {
  line-height: inherit;
  padding-left: 20px;
}
.text li:last-child {
  margin-bottom: 0;
}

/*
    Headings — sizes and line-heights from Figma style sheet.
    H1 is coloured primary (teal-blue) per the design; H2-H4 inherit body colour.
    Override colour per-section using .text-* utility classes when needed.
*/
h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
}

h1 {
  font-size: 48px;
  color: #3f87a4;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 20px;
}

@media (min-width: 768px) {
  .alignleft,
  img.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
  }
}

@media (min-width: 768px) {
  .alignright,
  img.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
  }
}

.aligncenter,
img.aligncenter {
  margin: 1em auto;
}

/*
    Site Header

    Sticky translucent-dark bar across the top of every page.
    Contains the logo, primary navigation (with dropdowns on desktop),
    search, social icons, and a hamburger toggle for mobile.

    Layout switches at $screen-md (992px):
        Below: logo + utility icons + hamburger. Nav hidden.
        At/above: full horizontal nav with hover dropdowns.

    Figma: Sommerville Blocks — Navigation (104:89602)
*/
.site-header {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 750;
  width: 100%;
}
.site-header .site-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
@media (min-width: 992px) {
  .site-header .site-header-inner {
    min-height: 75px;
    gap: 32px;
  }
}
.site-header .site-header-logo {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.site-header .site-header-logo img {
  height: 32px;
  width: auto;
  display: block;
}
@media (min-width: 992px) {
  .site-header .site-header-logo img {
    height: 40px;
  }
}
.site-header .primary-nav {
  display: none;
}
@media (min-width: 992px) {
  .site-header .primary-nav {
    display: block;
    margin: 0 auto;
  }
}
.site-header .header-utilities {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-header .header-utility {
  background: transparent;
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.site-header .header-utility:hover, .site-header .header-utility:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.site-header .header-search {
  display: none;
}
@media (min-width: 768px) {
  .site-header .header-search {
    display: inline-flex;
  }
}
.site-header .social-links--header {
  display: none;
}
@media (min-width: 992px) {
  .site-header .social-links--header {
    display: flex;
  }
}

/*
    Header Search Panel

    Drops down beneath the sticky header when the magnifier button is
    clicked. Slides + fades in via max-height/opacity to keep the open
    animation cheap (no layout thrash) and stays full-width so the input
    has plenty of room on tablet/desktop.
*/
.header-search-panel {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  pointer-events: none;
}
.header-search-panel.is-open {
  max-height: 200px;
  opacity: 1;
  pointer-events: auto;
}
.header-search-panel .container {
  padding-top: 16px;
  padding-bottom: 16px;
}
.header-search-panel .header-search-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.header-search-panel .header-search-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #242830;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
}
.header-search-panel .header-search-input:focus {
  outline: none;
  border-color: #3f87a4;
}
.header-search-panel .header-search-submit {
  flex: 0 0 auto;
}

/*
    Hamburger / Menu Toggle
    Inherits the original CSS-only hamburger and animates into an X when
    body.opened is set by custom.js.
*/
.menu-opener {
  z-index: 50;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #fff;
  background: transparent;
  padding: 0;
  border-radius: 4px;
}
@media (min-width: 992px) {
  .menu-opener {
    display: none;
  }
}
.menu-opener:before, .menu-opener:after {
  content: "";
  backface-visibility: hidden;
  transition: all 0.4s;
  background: #fff;
  height: 1px;
  left: 9px;
  right: 9px;
  top: 13px;
  position: absolute;
}
.menu-opener:before {
  box-shadow: 0 13px 0 0 #fff;
}
.menu-opener:after {
  top: 19px;
}
.opened .menu-opener:before {
  box-shadow: 0 0 0 0 transparent;
  transform: rotate(225deg);
  top: 19px;
}
.opened .menu-opener:after {
  transform: rotate(315deg);
  top: 19px;
}

/*
    Side Menu — slides in from the right on mobile/tablet.
    Contains the mobile nav and a copy of the social icons.
    Hidden on desktop via d-xl-none equivalent.
*/
.side-menu {
  position: fixed;
  pointer-events: none;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 700;
  width: 100vw;
  transform: translateX(110%);
  transition: transform ease-in-out 0.4s;
}
@media (min-width: 576px) {
  .side-menu {
    width: 410px;
    max-width: 90vw;
  }
}
@media (min-width: 992px) {
  .side-menu {
    display: none;
  }
}
.side-menu .inner {
  background: #fff;
  height: 100vh;
  padding: 84px 24px 32px;
  overflow: auto;
}

.opened {
  overflow: hidden;
}
.opened .side-menu {
  transform: translateX(0);
  pointer-events: all;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3f87a4;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
}
.skip-link:focus {
  top: 0;
}

.visually-hidden, .visually-hidden-focusable {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus, .visually-hidden-focusable:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/*
    Site Footer

    Dark translucent panel with a brand column on the left and the
    footer navigation grid filling the right. A fine border separates
    the top block from the copyright line.

    Figma: Sommerville Blocks — Footer (104:89603)
        Background: #777 (matches $color-muted) with rgba(0,0,0,0.5) overlay
        Column heading colour: $color-lime
        Body colour: $color-white
*/
.site-footer {
  position: relative;
  background-color: #777777;
  background-image: url("../images/footer-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  color: #fff;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.site-footer a {
  color: inherit;
}
.site-footer .site-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 48px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
@media (min-width: 992px) {
  .site-footer .site-footer-top {
    grid-template-columns: minmax(260px, 1fr) 3fr;
    gap: 64px;
    padding: 96px 0 48px;
  }
}
.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-footer .footer-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.site-footer .footer-tagline {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  max-width: 304px;
}
.site-footer .footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .site-footer .footer-nav {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .site-footer .footer-nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}
.site-footer .footer-nav-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer .footer-nav-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: #bbd136;
}
.site-footer .footer-nav-heading a {
  color: inherit;
  text-decoration: none;
}
.site-footer .menu-footer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer .menu-footer a {
  text-decoration: none;
  font-size: 16px;
  line-height: 1.25;
}
.site-footer .menu-footer a:hover, .site-footer .menu-footer a:focus-visible {
  text-decoration: underline;
}
.site-footer .footer-downloads {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer .footer-downloads a {
  text-decoration: none;
  font-size: 16px;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-footer .footer-downloads a::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.site-footer .footer-downloads a:hover, .site-footer .footer-downloads a:focus-visible {
  text-decoration: underline;
}
.site-footer .site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 24px 0;
  text-align: center;
}
.site-footer .site-footer-bottom p {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
}

/**
 * Gravity Forms - Orbital Theme Overrides
 *
 * Styles for GF 2.9+ Orbital theme.
 * Uses CSS custom properties to override Orbital defaults.
 *
 * Structure:
 *   1. CSS Custom Properties (theme-wide overrides)
 *   2. Direct Style Overrides (elements Orbital doesn't fully control)
 *   3. Validation & Error States
 *   4. Honeypot Field (spam protection)
 */
.gform_wrapper.gform-theme--orbital[data-form-index] {
  --gf-color-primary: #3f87a4;
  --gf-color-primary-rgb: 48, 181, 94;
  --gf-ctrl-label-font-family-primary: Roboto, Helvetica, Arial, sans-serif;
  --gf-ctrl-label-font-size-primary: 14px;
  --gf-ctrl-label-font-weight-primary: 600;
  --gf-ctrl-label-color-primary: #242830;
  --gf-ctrl-font-family: Roboto, Helvetica, Arial, sans-serif;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-line-height: 1.25;
  --gf-ctrl-color: #242830;
  --gf-ctrl-color-placeholder: #777777;
  --gf-ctrl-bg-color: #fff;
  --gf-ctrl-border-color: #e0e0e0;
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-border-radius: 4px;
  --gf-ctrl-padding-x: 16px;
  --gf-ctrl-padding-y: 12px;
  --gf-ctrl-border-color-focus: #3f87a4;
  --gf-ctrl-focus-ring-color: rgba(48, 181, 94, 0.2);
  --gf-ctrl-select-color: #242830;
  --gf-ctrl-choice-label-color: #242830;
  --gf-ctrl-btn-font-family: Roboto, Helvetica, Arial, sans-serif;
  --gf-ctrl-btn-font-size: 16px;
  --gf-ctrl-btn-font-weight: 600;
  --gf-ctrl-btn-color: #fff;
  --gf-ctrl-btn-color-hover: #fff;
  --gf-ctrl-btn-bg-color: #3f87a4;
  --gf-ctrl-btn-bg-color-hover: #356f87;
  --gf-ctrl-btn-border-color: #3f87a4;
  --gf-ctrl-btn-border-color-hover: #356f87;
  --gf-ctrl-btn-border-radius: 4px;
  --gf-ctrl-btn-padding-x: 24px;
  --gf-ctrl-btn-padding-y: 12px;
  --gf-field-pg-row-gap: 24px;
  --gf-form-gap-y: 24px;
}

.gform_wrapper.gform-theme--orbital {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.gform_wrapper.gform-theme--orbital .gform_required_legend {
  display: none;
}
.gform_wrapper.gform-theme--orbital .gfield_required {
  color: inherit;
}
.gform_wrapper.gform-theme--orbital textarea {
  min-height: 120px;
  resize: vertical;
}
.gform_wrapper.gform-theme--orbital select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23959a9e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px;
  padding-right: 48px;
}
.gform_wrapper.gform-theme--orbital .gform_footer,
.gform_wrapper.gform-theme--orbital .gform_page_footer {
  margin-top: 24px;
  padding: 0;
}

.gform_wrapper.gform-theme--orbital .gfield_validation_message,
.gform_wrapper.gform-theme--orbital .validation_message {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.25;
  color: #dc3545;
}
.gform_wrapper.gform-theme--orbital .gfield_error input,
.gform_wrapper.gform-theme--orbital .gfield_error select,
.gform_wrapper.gform-theme--orbital .gfield_error textarea {
  border-color: #dc3545;
}
.gform_wrapper.gform-theme--orbital .gform_submission_error {
  margin-bottom: 24px;
  padding: 16px;
  font-size: 14px;
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
}
.gform_wrapper.gform-theme--orbital .gform_confirmation_message {
  padding: 24px;
  font-size: 16px;
  line-height: 1.25;
  color: #28a745;
  background-color: rgba(40, 167, 69, 0.1);
  border-radius: 4px;
}

.gform_wrapper .gform_validation_container {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
}

.hidden_label .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
    Hero — site-wide template part

    Renders above the main flexible content loop on every page.
    Supports a background Vimeo/YouTube video (via iframe, sized to cover)
    or a background image. A semi-transparent content card sits over the
    media containing the title, tagline, and CTA.
*/
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 480px;
  color: #fff;
}
@media (min-width: 768px) {
  .hero {
    min-height: 560px;
  }
}
@media (min-width: 992px) {
  .hero {
    min-height: 640px;
  }
}
@media (min-width: 1200px) {
  .hero {
    min-height: 735px;
  }
}
.hero .media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #242830;
}
.hero .image {
  position: absolute;
  left: 0;
  right: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform;
}
.hero .video {
  position: absolute;
  left: 0;
  right: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.hero .video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  width: 100%;
  height: 100%;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background-color: #000;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero .card {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 32px 24px;
  max-width: 100%;
}
@media (min-width: 768px) {
  .hero .card {
    padding: 48px 64px;
    max-width: 578px;
  }
}
.hero .title {
  margin: 0;
  color: #fff;
  font-size: 36px;
}
@media (min-width: 992px) {
  .hero .title {
    font-size: 48px;
  }
}
.hero .tagline {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.25;
}
.hero .cta {
  margin-top: 32px;
}

/*
    Components Manifest

    Import reusable UI components here (alphabetical order).
    Components are standalone patterns used across multiple sections.

    Examples: blog-card, team-card, testimonial-card, accordion

    Creating a new component:
        1. Create css/components/_my-component.scss
        2. Add @use 'my-component'; below
        3. Use .my-component class in templates

    Component structure:
        .my-component {
            .image { }
            .title { }
            .content { }
        }
*/
/*
    Search Results

    Rendered by /search.php. Lives in components rather than sections
    because it isn't an ACF flexible-content layout — it's a standalone
    archive page that WordPress loads directly from the template
    hierarchy.
*/
.search-results {
  padding: 48px 0 80px;
}
.search-results .search-results-header {
  margin-bottom: 48px;
}
.search-results .title {
  margin-bottom: 16px;
}
.search-results .search-results-meta {
  margin: 0 0 24px;
  color: #777777;
  font-size: 16px;
}
.search-results .search-results-form {
  display: flex;
  gap: 8px;
  max-width: 600px;
}
.search-results .search-results-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #242830;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.search-results .search-results-input:focus {
  outline: none;
  border-color: #3f87a4;
}
.search-results .search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-results .search-result {
  padding: 24px 0;
  border-top: 1px solid #e0e0e0;
}
.search-results .search-result:last-child {
  border-bottom: 1px solid #e0e0e0;
}
.search-results .search-result-link {
  display: block;
  color: #242830;
}
.search-results .search-result-link:hover .search-result-title, .search-results .search-result-link:focus-visible .search-result-title {
  color: #356f87;
}
.search-results .search-result-title {
  margin: 0 0 4px;
  color: #3f87a4;
  font-size: 20px;
}
.search-results .search-result-url {
  display: block;
  margin-bottom: 8px;
  color: #777777;
  font-size: 14px;
  word-break: break-all;
}
.search-results .search-result-excerpt {
  margin: 0;
  color: #242830;
  line-height: 1.25;
}
.search-results .search-results-empty {
  padding: 48px 0;
  font-size: 20px;
  color: #777777;
}
.search-results .search-results-pagination {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.search-results .search-results-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #242830;
  font-size: 14px;
  font-weight: 600;
}
.search-results .search-results-pagination .page-numbers:hover, .search-results .search-results-pagination .page-numbers:focus-visible {
  border-color: #3f87a4;
  color: #3f87a4;
}
.search-results .search-results-pagination .page-numbers.current {
  background: #3f87a4;
  border-color: #3f87a4;
  color: #fff;
}

/*
    Social Links

    Rounded coloured squares containing a white social icon.
    Shared between header + footer via template-parts/social-icons.php.

    Variants:
        .social-links--header  — lime square on dark header
        .social-links--footer  — muted grey square on dark footer
        .social-links--mobile  — matches footer style inside mobile panel
*/
.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #fff;
  background: #bbd136;
  transition: opacity 0.2s ease;
}
.social-links a:hover, .social-links a:focus-visible {
  opacity: 0.85;
  color: #fff;
}
.social-links--footer a, .social-links--mobile a {
  background: #b4b9c9;
}
.social-links--mobile {
  margin-top: 24px;
}

/*
    Sections Manifest

    Import ACF Flexible Content section styles here (alphabetical order).
    Each section corresponds to a layout in the Sections field group.

    Creating a new section:
        1. Create css/sections/_my-section.scss
        2. Add @use 'my-section'; below
        3. PHP template: template-parts/sections/s-my-section.php
*/
/*
    Accordion section

    Single-open accordion on a coloured background. Uses native <details>;
    JS in custom.js closes siblings when one opens.

    Add .is-light to the parent section (set automatically when the editor
    chooses a light/white background) to flip the heading colour to dark.
*/
.section-accordion {
  padding: 80px 0;
  color: #fff;
}
.section-accordion.is-light {
  color: #242830;
}
.section-accordion.is-light .title {
  color: #242830;
}
.section-accordion.is-light .intro {
  color: #777777;
}
.section-accordion .heading {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}
.section-accordion .title {
  margin: 0 0 16px;
  color: #fff;
}
.section-accordion .intro {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}
.section-accordion .items {
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(25, 33, 61, 0.08);
  color: #777777;
}
.section-accordion .item {
  border-bottom: 1px solid #e0e0e0;
}
.section-accordion .item:last-child {
  border-bottom: 0;
}
.section-accordion .item-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #777777;
}
.section-accordion .item-summary::-webkit-details-marker {
  display: none;
}
.section-accordion .item-summary:focus-visible {
  outline: 2px solid #3f87a4;
  outline-offset: 2px;
  border-radius: 4px;
}
.section-accordion .item-question {
  flex: 1;
}
.section-accordion .item-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.section-accordion .item-icon::before, .section-accordion .item-icon::after {
  content: "";
  position: absolute;
  background-color: #777777;
  transition: transform 0.2s ease;
}
.section-accordion .item-icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}
.section-accordion .item-icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}
.section-accordion .item[open] .item-icon::after {
  transform: translateX(-50%) rotate(90deg);
}
.section-accordion .item-body {
  padding: 0 0 24px;
  font-size: 14px;
  line-height: 1.25;
}
.section-accordion .item-body ul, .section-accordion .item-body ol {
  padding-left: 24px;
  margin: 0;
}
.section-accordion .item-body li {
  margin-bottom: 4px;
}

/*
    Contact Block

    Centred page title + horizontal row of quick contact details (email/phone/
    location) above a white card holding a Gravity Form on the left and an
    aside on the right (supporting copy + social links).

    Stacks to a single column below $screen-md. Background colour comes from
    the Design tab — defaults to $color-light to match the Figma design.
*/
.section-contact-block {
  padding: 80px 0;
}
.section-contact-block .title {
  margin-bottom: 48px;
}
.section-contact-block .contact-details {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 24px;
}
@media (min-width: 768px) {
  .section-contact-block .contact-details {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
  }
}
.section-contact-block .contact-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
@media (min-width: 768px) {
  .section-contact-block .contact-detail:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    width: 1px;
    height: 48px;
    background: #e0e0e0;
    transform: translateY(-50%);
  }
}
.section-contact-block .contact-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  color: #777777;
  flex-shrink: 0;
}
.section-contact-block .contact-detail-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.25;
}
.section-contact-block .contact-detail-label {
  font-weight: 700;
  color: #242830;
}
.section-contact-block .contact-detail-value {
  color: #777777;
}
.section-contact-block .contact-detail-value:is(a):hover, .section-contact-block .contact-detail-value:is(a):focus-visible {
  color: #3f87a4;
  text-decoration: underline;
}
.section-contact-block .contact-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(25, 33, 61, 0.08);
  padding: 48px 24px;
  display: grid;
  gap: 48px;
}
@media (min-width: 768px) {
  .section-contact-block .contact-card {
    padding: 48px;
  }
}
@media (min-width: 992px) {
  .section-contact-block .contact-card {
    padding: 64px 48px;
  }
}
@media (min-width: 992px) {
  .section-contact-block .contact-card--with-aside {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 64px;
    padding: 64px;
  }
}
.section-contact-block .contact-card-form {
  min-width: 0;
}
.section-contact-block .contact-card-form .gform_wrapper.gform-theme--orbital {
  --gf-ctrl-border-radius: 6px;
  --gf-ctrl-padding-y: 16px;
}
.section-contact-block .contact-card-form .gform_wrapper.gform-theme--orbital .gfield.gf_left_half,
.section-contact-block .contact-card-form .gform_wrapper.gform-theme--orbital .gfield.gf_right_half {
  grid-column: span 6;
}
.section-contact-block .contact-card-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-contact-block .contact-card-aside .aside-title {
  font-size: 20px;
  color: #242830;
  margin: 0;
}
.section-contact-block .contact-card-aside .aside-text {
  color: #777777;
  margin: 0;
}
.section-contact-block .contact-card-aside .aside-divider {
  border: 0;
  border-top: 1px solid #e0e0e0;
  margin: 16px 0;
  width: 100%;
}
.section-contact-block .contact-card-aside .social-links {
  margin-top: 4px;
}

/*
    Content Cards section

    Responsive grid of cards driven by the `--cols` custom property set
    inline from the ACF "columns" field (clamped to the actual card count
    so a row with fewer cards than columns still fills the full width).
*/
.section-content-cards {
  padding: 80px 0;
  background-color: #fff;
}
.section-content-cards .heading {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}
.section-content-cards .title {
  margin: 0 0 16px;
  color: #3f87a4;
  font-size: 36px;
}
@media (min-width: 992px) {
  .section-content-cards .title {
    font-size: 48px;
  }
}
.section-content-cards .intro {
  margin: 0;
  color: #777777;
}
.section-content-cards .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.section-content-cards .card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(25, 33, 61, 0.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex: 1 1 100%;
}
@media (min-width: 768px) {
  .section-content-cards .card {
    flex: 1 1 calc(50% - 24px / 2);
  }
}
@media (min-width: 992px) {
  .section-content-cards .card {
    flex: 1 1 calc((100% - 24px * (var(--cols, 3) - 1)) / var(--cols, 3));
  }
}
.section-content-cards .card[href]:hover, .section-content-cards .card[href]:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(25, 33, 61, 0.12);
}
.section-content-cards .card[href]:focus-visible {
  outline: 2px solid #3f87a4;
  outline-offset: 4px;
}
.section-content-cards .card-media {
  overflow: hidden;
  aspect-ratio: 353/240;
  background-color: #f6f9f9;
}
.section-content-cards .card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-content-cards .card-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  flex: 1;
}
.section-content-cards .card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: #777777;
}
.section-content-cards .card-copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  color: #777777;
}
.section-content-cards .card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-weight: 600;
  color: #777777;
}
.section-content-cards .card-arrow {
  transition: transform 0.2s ease;
}
.section-content-cards .card[href]:hover .card-arrow,
.section-content-cards .card[href]:focus-visible .card-arrow {
  transform: translateX(4px);
}

/*
    Overlay variant — image fills the card with a dark gradient fading
    up from the bottom, and white text sits on top. Reuses the standard
    .card markup; only the visual layout swaps.
*/
.section-content-cards--overlay .card {
  position: relative;
  min-height: 360px;
  border: 0;
  background-color: #242830;
  justify-content: flex-end;
}
@media (min-width: 992px) {
  .section-content-cards--overlay .card {
    min-height: 420px;
  }
}
.section-content-cards--overlay .card-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  z-index: 0;
}
.section-content-cards--overlay .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(36, 40, 48, 0) 0%, rgba(36, 40, 48, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.section-content-cards--overlay .card-body {
  position: relative;
  z-index: 2;
  gap: 16px;
}
.section-content-cards--overlay .card-title,
.section-content-cards--overlay .card-copy,
.section-content-cards--overlay .card-link {
  color: #fff;
}

/*
    CTA Block section

    Full-width banner with a background image and a semi-transparent content
    card sitting over it. The card's horizontal placement is set on the
    section via .content-{left|center|right} so the same layout can flank
    either side of the image (Figma default is right).

    The card mirrors the hero card pattern (black 30% surface, rounded,
    white type) so brand voice stays consistent between hero and mid-page
    CTA blocks.
*/
.section-cta-block {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  color: #fff;
}
.section-cta-block .media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #242830;
}
.section-cta-block .image {
  position: absolute;
  left: 0;
  right: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform;
}
.section-cta-block .overlay {
  position: absolute;
  inset: 0;
  background-color: #000;
}
.section-cta-block .container {
  position: relative;
  z-index: 2;
  display: flex;
}
.section-cta-block.content-left .container {
  justify-content: flex-start;
}
.section-cta-block.content-center .container {
  justify-content: center;
}
.section-cta-block.content-right .container {
  justify-content: flex-end;
}
.section-cta-block .card {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 32px 24px;
  width: 100%;
}
@media (min-width: 768px) {
  .section-cta-block .card {
    padding: 48px 64px;
    max-width: 578px;
  }
}
.section-cta-block .title {
  margin: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1.15;
}
@media (min-width: 992px) {
  .section-cta-block .title {
    font-size: 48px;
  }
}
.section-cta-block .content {
  margin: 16px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}
.section-cta-block .content p {
  margin: 0 0 8px;
}
.section-cta-block .content p:last-child {
  margin-bottom: 0;
}
.section-cta-block .actions {
  margin-top: 32px;
}
.section-cta-block .btn-arrow {
  display: inline-block;
  margin-left: 4px;
}

/*
    Section: Buttons (Call to Action)

    Outlined buttons on a brand-teal background. Buttons stack on mobile,
    sit in a centred row on tablet+, and on hover fill white with dark
    text plus a sliding arrow.

    Figma: Sommerville Blocks — Call to Action V1 (104:89813)
*/
.section-cta-buttons {
  padding: 80px 0;
  background-color: #3eab85;
  color: #fff;
  text-align: center;
}
.section-cta-buttons .heading {
  max-width: 720px;
  margin: 0 auto 32px;
}
.section-cta-buttons .title {
  color: #fff;
  margin: 0 0 16px;
}
.section-cta-buttons .intro {
  color: #fff;
}
.section-cta-buttons .intro p:last-child {
  margin-bottom: 0;
}
.section-cta-buttons .buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .section-cta-buttons .buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
}
.section-cta-buttons .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  width: 100%;
}
@media (min-width: 768px) {
  .section-cta-buttons .btn-outline {
    width: auto;
  }
}
.section-cta-buttons .btn-outline:hover, .section-cta-buttons .btn-outline:focus-visible {
  background-color: #fff;
  color: #242830;
  border-color: #fff;
}
.section-cta-buttons .btn-arrow {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: 0.2s all;
}
.section-cta-buttons .btn-outline:hover .btn-arrow,
.section-cta-buttons .btn-outline:focus-visible .btn-arrow {
  max-width: 1.5em;
  margin-left: 8px;
  opacity: 1;
  transform: translateX(0);
}

/*
    Full Width Video

    Click-to-play video block. Poster image with a centred play button until
    clicked, at which point JS swaps the poster for an autoplay iframe.

    Width is edge-to-edge on small screens but capped at 1200px on larger
    screens so the video doesn't get oversized. Aspect ratio is locked to 16:9.
*/
.section-full-width-video {
  padding: 80px 0;
}
.section-full-width-video .container {
  max-width: 1200px;
  padding-left: 0;
  padding-right: 0;
}
.section-full-width-video .heading {
  padding: 0 16px;
  margin-bottom: 32px;
  text-align: center;
}
@media (min-width: 992px) {
  .section-full-width-video .heading {
    padding: 0 24px;
  }
}
.section-full-width-video .title {
  margin: 0;
}
.section-full-width-video .intro {
  margin-top: 16px;
}
.section-full-width-video .video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: #242830;
}
@media (min-width: 1200px) {
  .section-full-width-video .video-wrap {
    border-radius: 8px;
  }
}
.section-full-width-video .video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
}
.section-full-width-video .video-player:focus-visible {
  outline: 3px solid #3f87a4;
  outline-offset: -3px;
}
.section-full-width-video .poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-full-width-video .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #3f87a4;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
@media (min-width: 992px) {
  .section-full-width-video .play-icon {
    width: 96px;
    height: 96px;
  }
}
.section-full-width-video .play-icon svg {
  width: 40%;
  height: 40%;
  margin-left: 4px;
}
.section-full-width-video .video-player:hover .play-icon,
.section-full-width-video .video-player:focus-visible .play-icon {
  transform: translate(-50%, -50%) scale(1.05);
  background-color: #fff;
}
.section-full-width-video .video-wrap.is-playing .video-player {
  display: none;
}
.section-full-width-video .video-wrap.is-playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
    Gallery section

    Square-cropped image grid: 2 columns on mobile, 3 columns on desktop.
    Each image opens in a Magnific Popup lightbox on click (see custom.js).
*/
.section-gallery {
  padding: 80px 0;
  background-color: #fff;
  /*
      Grid layout — equal squares.
      2 columns on mobile, 3 columns on desktop.
  */
  /*
      Featured layout — one large image + two stacked squares.
      Mobile: stack as a 2-column grid with the first image spanning full width.
      Desktop: 2fr/1fr columns × 2 rows; first image spans both rows.
      The big tile loses its 1:1 aspect-ratio on desktop so it can fill the
      height of the two stacked squares + gap on its right.
  */
}
.section-gallery .heading {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}
.section-gallery .title {
  margin: 0 0 16px;
  color: #3f87a4;
  font-size: 36px;
}
@media (min-width: 992px) {
  .section-gallery .title {
    font-size: 48px;
  }
}
.section-gallery .intro {
  margin: 0;
  color: #777777;
}
.section-gallery .gallery-grid {
  display: grid;
  gap: 24px;
}
.section-gallery .gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 6px;
  background-color: #f6f9f9;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.section-gallery .gallery-item:hover, .section-gallery .gallery-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(25, 33, 61, 0.12);
}
.section-gallery .gallery-item:focus-visible {
  outline: 2px solid #3f87a4;
  outline-offset: 4px;
}
.section-gallery .gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-gallery--grid .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
  .section-gallery--grid .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.section-gallery--featured .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
}
.section-gallery--featured .gallery-grid .gallery-item:first-child {
  grid-column: 1/-1;
}
@media (min-width: 992px) {
  .section-gallery--featured .gallery-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .section-gallery--featured .gallery-grid .gallery-item:first-child {
    grid-column: 1;
    grid-row: 1/span 2;
    aspect-ratio: auto;
  }
}

/*
    Google Form section

    Embeds a Google Form via iframe. Heading + intro sit above the form
    (both optional), centred and capped to match other narrow sections
    (PDF Document, Full Width Video).
*/
.section-google-form {
  padding: 80px 0;
  background-color: #fff;
}
.section-google-form .intro {
  margin-bottom: 48px;
  text-align: center;
}
.section-google-form .title {
  margin: 0 0 16px;
  color: #242830;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}
.section-google-form .text {
  max-width: 540px;
  margin: 0 auto;
  color: #777777;
  font-size: 16px;
  line-height: 1.25;
}
.section-google-form .text p {
  margin: 0 0 8px;
}
.section-google-form .text p:last-child {
  margin-bottom: 0;
}
.section-google-form .form-wrap iframe {
  display: block;
  width: 100%;
  border: 0;
}

/*
    Image with Text section

    Two-column CTA: copy + button beside an image. Background colour is
    set on the parent section via the .bg-* utility classes; .is-light is
    added by the template for light/white surfaces so we can flip the
    text colour without targeting individual bg- classes.

    Vertical rhythm matches the Figma (24px between title and paragraph,
    32px between paragraph and button).
*/
.section-image-with-text {
  padding: 80px 0;
  color: #fff;
}
.section-image-with-text.is-light {
  color: #242830;
}
.section-image-with-text.is-light .subtitle {
  color: #777777;
}
.section-image-with-text.is-light .title {
  color: #3f87a4;
}
.section-image-with-text.is-light .paragraph {
  color: #777777;
}
.section-image-with-text .text-col {
  margin-bottom: 48px;
}
@media (min-width: 992px) {
  .section-image-with-text .text-col {
    margin-bottom: 0;
  }
}
.section-image-with-text .subtitle {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.section-image-with-text .title {
  margin: 0 0 24px;
  color: #fff;
  font-size: 28px;
  line-height: 1.15;
}
@media (min-width: 992px) {
  .section-image-with-text .title {
    font-size: 28px;
  }
}
.section-image-with-text .paragraph {
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.25;
}
.section-image-with-text .paragraph p {
  margin: 0 0 8px;
}
.section-image-with-text .paragraph p:last-child {
  margin-bottom: 0;
}
.section-image-with-text .actions {
  margin-top: 32px;
}
.section-image-with-text .image-wrap {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 6/5;
}
.section-image-with-text .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
    Section: Intro Text

    Large title (H1-style teal-blue) + muted intro paragraph.
    Sits in a 10/12 column on desktop to keep text line-length readable.

    Figma: Sommerville Blocks — HeroText (104:89906)
        Title: Roboto Bold 48/52, $color-primary
        Body:  16px base — matches body copy across all other sections
*/
.section-intro-text {
  padding: 48px 0;
}
@media (min-width: 992px) {
  .section-intro-text {
    padding: 80px 0;
  }
}
.section-intro-text .title {
  color: #3f87a4;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
  font-size: 36px;
}
@media (min-width: 768px) {
  .section-intro-text .title {
    font-size: 48px;
  }
}
.section-intro-text .body {
  color: #777777;
  font-size: 16px;
  line-height: 1.25;
}
.section-intro-text .body p {
  margin-top: 0;
  margin-bottom: 16px;
}
.section-intro-text .body p:last-child {
  margin-bottom: 0;
}
.section-intro-text .body a {
  color: #3f87a4;
  text-decoration: underline;
}
.section-intro-text .body a:hover {
  color: #356f87;
}

/*
    Section: Intro (Two Column)

    Large brand-teal title spans full width, then two text columns sit
    side-by-side on desktop (subtitle left, body paragraph right) and
    stack on mobile.

    Figma: Sommerville Blocks — Text (104:89786)
        Title:    Roboto Bold 48/52, $color-primary
        Subtitle: Roboto Bold 28/32, $color-dark
        Body:     Roboto Regular 16/24, $color-muted
*/
.section-intro-two-column {
  padding: 48px 0;
}
@media (min-width: 992px) {
  .section-intro-two-column {
    padding: 80px 0;
  }
}
.section-intro-two-column .title {
  color: #3f87a4;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
  font-size: 36px;
}
@media (min-width: 768px) {
  .section-intro-two-column .title {
    font-size: 48px;
  }
}
.section-intro-two-column .subtitle {
  color: #242830;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 24px;
}
@media (min-width: 992px) {
  .section-intro-two-column .subtitle {
    margin-bottom: 0;
  }
}
.section-intro-two-column .body {
  color: #777777;
  font-size: 16px;
  line-height: 1.25;
}
.section-intro-two-column .body p {
  margin-top: 0;
  margin-bottom: 16px;
}
.section-intro-two-column .body p:last-child {
  margin-bottom: 0;
}
.section-intro-two-column .body a {
  color: #3f87a4;
  text-decoration: underline;
}
.section-intro-two-column .body a:hover {
  color: #356f87;
}
.section-intro-two-column .buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .section-intro-two-column .buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}
@media (max-width: 767px) {
  .section-intro-two-column .buttons .btn {
    width: 100%;
  }
}

/*
    Section: Map

    Full-bleed Google Map. Width is unconstrained (no .container) so the
    map runs edge-to-edge to match the Contact page Figma design.
    Height is editor-configurable via the `height` field on the section
    (compact / standard / tall).

    Map instance: initSommervilleMaps() in /js/custom.js, triggered by
    the Google Maps JS API callback on pages that include this section.
*/
.section-map {
  position: relative;
  width: 100%;
}
.section-map .map {
  width: 100%;
  background-color: #f6f9f9;
}
.section-map .map-fallback {
  display: block;
  padding: 32px 16px;
  text-align: center;
  color: #3f87a4;
  text-decoration: underline;
}
.section-map .map-fallback:hover, .section-map .map-fallback:focus-visible {
  color: #356f87;
}

/*
    Height variants — picked by the `height` ACF field. Mobile values are
    a notch shorter so the map doesn't push other content too far down on
    small screens.
*/
.section-map--compact .map {
  height: 240px;
}
@media (min-width: 992px) {
  .section-map--compact .map {
    height: 300px;
  }
}

.section-map--standard .map {
  height: 320px;
}
@media (min-width: 992px) {
  .section-map--standard .map {
    height: 400px;
  }
}

.section-map--tall .map {
  height: 380px;
}
@media (min-width: 992px) {
  .section-map--tall .map {
    height: 500px;
  }
}

/*
    Parent testimonials section

    Card-style testimonial slider — one slide visible at a time over a
    light-blue inner panel inside a bordered white outer card.

    Layout (desktop):
        ┌─────────────────────────┐
        │  Title + intro    ◀  ▶  │   <- arrows top-right
        │                         │
        │  ┌────────────────────┐ │
        │  │   Testimonial      │ │
        │  └────────────────────┘ │
        └─────────────────────────┘

    Mobile: title → card → arrows (centered).

    Slider init: initParentTestimonialsSliders() in /js/custom.js.
*/
.section-parent-testimonials {
  padding: 80px 0;
  background-color: #fff;
  color: #242830;
}
.section-parent-testimonials .layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header-text" "card" "arrows";
  row-gap: 32px;
}
@media (min-width: 992px) {
  .section-parent-testimonials .layout {
    grid-template-columns: 1fr auto;
    grid-template-areas: "header-text arrows" "card        card";
    column-gap: 24px;
    row-gap: 48px;
    align-items: end;
  }
}
.section-parent-testimonials .header-text {
  grid-area: header-text;
  max-width: 520px;
  min-width: 0;
}
.section-parent-testimonials .title {
  margin: 0 0 16px;
  color: #3f87a4;
  font-size: 28px;
}
@media (min-width: 992px) {
  .section-parent-testimonials .title {
    font-size: 36px;
  }
}
.section-parent-testimonials .intro {
  margin: 0;
  color: #777777;
}
.section-parent-testimonials .intro > :last-child {
  margin-bottom: 0;
}
.section-parent-testimonials .arrows {
  grid-area: arrows;
  display: flex;
  gap: 16px;
  justify-content: center;
}
@media (min-width: 992px) {
  .section-parent-testimonials .arrows {
    justify-content: flex-end;
  }
}
.section-parent-testimonials .arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #f6f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #777777;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.section-parent-testimonials .arrow:hover, .section-parent-testimonials .arrow:focus-visible {
  background-color: #3f87a4;
  border-color: #3f87a4;
  color: #fff;
}
.section-parent-testimonials .arrow:focus-visible {
  outline: 2px solid #3f87a4;
  outline-offset: 2px;
}
.section-parent-testimonials .arrow[disabled], .section-parent-testimonials .arrow.tns-arrow-disabled {
  opacity: 0.4;
  cursor: default;
}
.section-parent-testimonials .card {
  grid-area: card;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  min-width: 0;
}
@media (min-width: 992px) {
  .section-parent-testimonials .card {
    padding: 48px;
  }
}
.section-parent-testimonials .slider {
  overflow: hidden;
}
.section-parent-testimonials .tns-outer,
.section-parent-testimonials .tns-ovh,
.section-parent-testimonials .tns-inner {
  max-width: 100%;
}
.section-parent-testimonials .slide-inner {
  background-color: #f6f9f9;
  border-radius: 8px;
  padding: 32px 24px;
  text-align: left;
}
@media (min-width: 992px) {
  .section-parent-testimonials .slide-inner {
    padding: 48px;
  }
}
.section-parent-testimonials .headline {
  margin: 0 0 24px;
  color: #3f87a4;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
}
@media (min-width: 992px) {
  .section-parent-testimonials .headline {
    font-size: 28px;
  }
}
.section-parent-testimonials .quote {
  margin: 0 0 48px;
  color: #777777;
}
.section-parent-testimonials .quote > :last-child {
  margin-bottom: 0;
}
.section-parent-testimonials .attribution {
  margin: 0;
  color: #777777;
  font-weight: 700;
}
.section-parent-testimonials .attribution .separator {
  margin: 0 4px;
  color: #e0e0e0;
  font-weight: 400;
}
.section-parent-testimonials .attribution .role {
  font-weight: 400;
}

/*
    PDF Document section

    Centred title + text + optional CTA above a portrait document preview,
    with an optional download button below. Designed for surfacing PDFs
    (policies, prospectuses) inline on a page.
*/
.section-pdf-document {
  padding: 80px 0;
  background-color: #fff;
  text-align: center;
}
.section-pdf-document .intro {
  margin-bottom: 64px;
}
.section-pdf-document .title {
  margin: 0 0 16px;
  color: #242830;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}
.section-pdf-document .text {
  max-width: 540px;
  margin: 0 auto;
  color: #777777;
  font-size: 16px;
  line-height: 1.25;
}
.section-pdf-document .text p {
  margin: 0 0 8px;
}
.section-pdf-document .text p:last-child {
  margin-bottom: 0;
}
.section-pdf-document .intro .actions {
  margin-top: 32px;
}
.section-pdf-document .document {
  margin: 0 auto;
  max-width: 916px;
  overflow: hidden;
  border-radius: 8px;
}
.section-pdf-document .document .image {
  width: 100%;
  height: auto;
  display: block;
}
.section-pdf-document .document .document-link {
  display: block;
  transition: opacity 0.2s ease-in-out;
}
.section-pdf-document .document .document-link:hover, .section-pdf-document .document .document-link:focus-visible {
  opacity: 0.9;
}
.section-pdf-document .actions-bottom {
  margin-top: 64px;
}

/*
    Section: Team Members

    Grid or carousel of team_member cards. Clicking a card opens a
    Magnific Popup with the member's long bio and contact details.

    Figma: Sommerville Blocks — Team Members V5 (104:89790)
        Card: 369×632 portrait, teal-blue primary accent
        Card text: Roboto Semibold 30/36 name, 16/22 uppercase role
        Arrows: 40×40 bg-primary rounded-lg
*/
.section-team-members {
  padding: 48px 0;
}
@media (min-width: 992px) {
  .section-team-members {
    padding: 80px 0;
  }
}
.section-team-members .team-headings {
  text-align: center;
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .section-team-members .team-headings {
    margin-bottom: 48px;
  }
}
.section-team-members .title {
  color: #242830;
  font-weight: 700;
  line-height: 1.15;
  font-size: 36px;
  margin: 0;
}
.section-team-members .intro {
  color: #777777;
  font-size: 16px;
  line-height: 1.25;
  margin-top: 16px;
}
.section-team-members .intro p:last-child {
  margin-bottom: 0;
}

/*
    Card — shared between grid and carousel layouts.
    The card is the clickable target (role=button). The image fills the
    frame; text sits in the bottom third over a dark-to-transparent
    gradient so white type stays legible against varied photos.
*/
.team-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 369/632;
  overflow: hidden;
  cursor: pointer;
  background-color: #242830;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 992px) {
  .team-card {
    aspect-ratio: auto;
    height: 560px;
  }
}
.team-card:hover, .team-card:focus-visible {
  transform: translateY(-2px);
}
.team-card:focus-visible {
  outline: 2px solid #3f87a4;
  outline-offset: 2px;
}
.team-card .team-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.team-card .team-card-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 70%);
}
.team-card .team-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 24px;
  color: #fff;
}
.team-card .team-card-name {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 8px;
  color: #fff;
}
.team-card .team-card-role {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin-bottom: 16px;
}
.team-card .team-card-bio {
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-card .team-card-email {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 4;
}
.team-card .team-card-email:hover, .team-card .team-card-email:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.team-card .team-card-email-icon {
  flex-shrink: 0;
}

/*
    Grid layout — 1 column mobile, 3 columns tablet and up.
    Row gap added so cards in a second row get vertical spacing.
*/
.section-team-members--grid .team-grid {
  row-gap: 24px;
}
@media (min-width: 768px) {
  .section-team-members--grid .team-grid {
    row-gap: 32px;
  }
}

/*
    Carousel layout — tiny-slider.
    Arrows sit outside the slide area at the sides (desktop) so they
    don't cover the photos. On mobile they drop below the slides so
    there's no cropping against the screen edge.
*/
.section-team-members--carousel .team-carousel-wrap {
  position: relative;
}
.section-team-members--carousel .tns-outer {
  display: flex;
  flex-direction: column;
}
.section-team-members--carousel .tns-outer > .tns-mw {
  order: 1;
}
.section-team-members--carousel .tns-outer > .tns-controls {
  order: 2;
}
.section-team-members--carousel .tns-outer > .tns-nav {
  order: 3;
}
.section-team-members--carousel .team-carousel {
  display: flex;
  gap: 16px;
}
.section-team-members--carousel .team-carousel > .team-card {
  flex: 0 0 calc(100% - 16px);
}
@media (min-width: 768px) {
  .section-team-members--carousel .team-carousel > .team-card {
    flex: 0 0 calc((100% - 16px * 2) / 3);
  }
}
.section-team-members--carousel .tns-slider > .team-card {
  flex: unset;
}
.section-team-members--carousel .tns-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  z-index: 5;
}
.section-team-members--carousel .tns-controls button {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  background-color: #3f87a4;
  color: #fff;
  border: 0;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
}
.section-team-members--carousel .tns-controls button:hover, .section-team-members--carousel .tns-controls button:focus-visible {
  background-color: #356f87;
}
.section-team-members--carousel .tns-controls button::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.section-team-members--carousel .tns-controls button[data-controls=prev]::before {
  transform: translateX(2px) rotate(-135deg);
}
.section-team-members--carousel .tns-controls button[data-controls=next]::before {
  transform: translateX(-2px) rotate(45deg);
}
.section-team-members--carousel .tns-controls button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (min-width: 992px) {
  .section-team-members--carousel .tns-controls {
    position: absolute;
    top: 35%;
    left: -64px;
    right: -64px;
    margin-top: 0;
    gap: 0;
    justify-content: space-between;
    pointer-events: none;
  }
  .section-team-members--carousel .tns-controls button {
    pointer-events: auto;
  }
}
.section-team-members--carousel .tns-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.section-team-members--carousel .tns-nav button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #e0e0e0;
  cursor: pointer;
  font-size: 0;
  transition: all 0.2s ease-in-out;
}
.section-team-members--carousel .tns-nav button:hover, .section-team-members--carousel .tns-nav button:focus-visible {
  background-color: #356f87;
}
.section-team-members--carousel .tns-nav button.tns-nav-active {
  background-color: #3f87a4;
}

/*
    Popup — Magnific Popup inline content. Two columns on desktop
    (image left, content right), stacked on mobile.
*/
.team-popups {
  display: none;
}

.team-popup {
  position: relative;
  max-width: 960px;
  width: 100%;
  margin: 48px auto;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.team-popup .team-popup-inner {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .team-popup .team-popup-inner {
    flex-direction: row;
  }
}
.team-popup .team-popup-image {
  flex: 0 0 auto;
  width: 100%;
  background-color: #242830;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media (min-width: 768px) {
  .team-popup .team-popup-image {
    width: 42%;
  }
}
.team-popup .team-popup-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center top;
}
@media (min-width: 768px) {
  .team-popup .team-popup-image img {
    aspect-ratio: 3/4;
  }
}
.team-popup .team-popup-content {
  flex: 1 1 auto;
  padding: 32px;
}
@media (min-width: 992px) {
  .team-popup .team-popup-content {
    padding: 48px;
  }
}
.team-popup .team-popup-name {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: #242830;
  margin: 0;
}
@media (min-width: 992px) {
  .team-popup .team-popup-name {
    font-size: 36px;
  }
}
.team-popup .team-popup-role {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3f87a4;
  margin-top: 4px;
  margin-bottom: 24px;
}
.team-popup .team-popup-bio {
  color: #242830;
  font-size: 16px;
  line-height: 1.25;
}
.team-popup .team-popup-bio p {
  margin: 0 0 16px;
}
.team-popup .team-popup-bio p:last-child {
  margin-bottom: 0;
}
.team-popup .team-popup-contact {
  list-style: none;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #e0e0e0;
}
.team-popup .team-popup-contact li {
  margin-bottom: 8px;
}
.team-popup .team-popup-contact li:last-child {
  margin-bottom: 0;
}
.team-popup .team-popup-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3f87a4;
  text-decoration: none;
  font-size: 16px;
}
.team-popup .team-popup-contact a:hover, .team-popup .team-popup-contact a:focus-visible {
  color: #356f87;
  text-decoration: underline;
}
.team-popup .team-popup-contact a svg {
  flex-shrink: 0;
}

/*
    Magnific Popup close button — restyle the default to fit the brand.
    Targets the global selector because Magnific renders the close button
    at the root of the overlay, outside the inline content.
*/
.mfp-container .mfp-close {
  color: #fff;
  font-size: 32px;
  opacity: 1;
  padding-right: 8px;
}
.mfp-container .mfp-close:hover, .mfp-container .mfp-close:focus {
  color: #fff;
  opacity: 0.8;
}

/*
    Testimonials section

    Slider of one or more testimonials on a brand-colour background.
    Init happens via tiny-slider in custom.js — arrows are external
    buttons wired in via prevButton / nextButton options.

    When editors pick a light/white background, .is-light flips text
    colours to readable values.
*/
.section-testimonials {
  padding: 80px 0;
  color: #fff;
}
.section-testimonials.is-light {
  color: #242830;
}
.section-testimonials.is-light .title,
.section-testimonials.is-light .intro,
.section-testimonials.is-light .quote,
.section-testimonials.is-light .attribution,
.section-testimonials.is-light .quote-mark {
  color: #242830;
}
.section-testimonials .heading {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 48px;
}
.section-testimonials .title {
  margin: 0 0 16px;
  color: #fff;
}
.section-testimonials .intro {
  margin: 0;
  color: #fff;
}
.section-testimonials .slider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .section-testimonials .slider-wrap {
    gap: 48px;
  }
}
@media (min-width: 992px) {
  .section-testimonials .slider-wrap {
    gap: 96px;
  }
}
.section-testimonials .slider {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.section-testimonials .tns-outer {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.section-testimonials .slide {
  text-align: center;
  padding: 16px;
}
.section-testimonials .quote-mark {
  display: inline-block;
  margin: 0 auto 32px;
  color: #fff;
}
.section-testimonials .quote {
  margin: 0 auto 48px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.25;
}
.section-testimonials .attribution {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
}
.section-testimonials .arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  color: #777777;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.section-testimonials .arrow:hover, .section-testimonials .arrow:focus-visible {
  background-color: #f6f9f9;
}
.section-testimonials .arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.section-testimonials .arrow[disabled], .section-testimonials .arrow.tns-arrow-disabled {
  opacity: 0.4;
  cursor: default;
}

/*
    Text & Image section

    Title spans full width above a two-column image/copy layout.
    The image column is narrower to match the Figma portrait crop.
*/
.section-text-and-image {
  padding: 80px 0;
  background-color: #fff;
}
.section-text-and-image .title {
  margin: 0 0 48px;
  color: #3f87a4;
  font-size: 36px;
  line-height: 1.15;
}
@media (min-width: 992px) {
  .section-text-and-image .title {
    font-size: 48px;
  }
}
.section-text-and-image .image-wrap {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1/1;
}
@media (min-width: 992px) {
  .section-text-and-image .image-wrap {
    max-width: 85%;
  }
}
.section-text-and-image .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-text-and-image .caption {
  margin-top: 32px;
  color: #777777;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}
.section-text-and-image .caption p {
  margin: 0 0 24px;
}
.section-text-and-image .caption p:last-child {
  margin-bottom: 0;
}
.section-text-and-image .content {
  color: #777777;
  font-size: 16px;
  line-height: 1.25;
  margin-top: 32px;
}
@media (min-width: 992px) {
  .section-text-and-image .content {
    margin-top: 0;
  }
}
.section-text-and-image .content p {
  margin: 0 0 8px;
}
.section-text-and-image .content p:last-child {
  margin-bottom: 0;
}

/*
    Section: Values List

    Series of label/value pairs — small grey sub heading above a large
    brand-teal heading. Designed for Vision / Motto / Values style blocks.

    Figma: Sommerville Blocks — Hero Text (104:89885)
        Sub heading: Roboto Bold 28/32, $color-muted
        Heading:     Roboto Bold 48/52, $color-primary
*/
.section-values-list {
  padding: 48px 0;
}
@media (min-width: 992px) {
  .section-values-list {
    padding: 80px 0;
  }
}
.section-values-list .items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.section-values-list .item {
  margin-bottom: 24px;
}
.section-values-list .item:last-child {
  margin-bottom: 0;
}
.section-values-list .subheading {
  color: #777777;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 4px;
  font-size: 20px;
}
@media (min-width: 768px) {
  .section-values-list .subheading {
    font-size: 28px;
  }
}
.section-values-list .heading {
  color: #3f87a4;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  font-size: 28px;
}
@media (min-width: 768px) {
  .section-values-list .heading {
    font-size: 35px;
  }
}

/*
    Homepage-Specific Styles

    Styles that ONLY apply to the homepage.
    Use sparingly — prefer reusable section styles instead.

    Target with body.home class from WordPress.
*/