/* --------------------------------------------------------------------------
   1. Reset css
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (sampled directly from the design) */
  --navy: #1b3f98;
  --navy-deep: #16357f;
  --navy-footer: #12214f;
  --cyan: #01afeb;
  --cyan-dark: #0a97c9;
  --pale-blue: #a7d8f0;
  --hero-blue: #2f5ac9;
  --orange-from: #fa9a36;
  --orange-to: #ffb514;
  --gold: #f5c518;
  --dark-pale-blue: #07c0ca;

  /* Neutrals */
  --white: #ffffff;
  --black: #000000;
  --grey-100: #f7f7f7;
  --grey-200: #f0f0f0;
  --grey-300: #e2e2e2;
  --ink: #000;
  --ink-soft: #3d3d3d;
  --rule: #9ecae8;

  /* Typography
     The comp sets both display and body copy in Montserrat; the sizes below
     were reverse-measured from the artwork (cap/ascender bands plus line
     widths) so text blocks wrap where they do in the original. */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Montserrat", sans-serif;
  --font-hero: "Roboto Condensed", sans-serif;
  --font-ui: "Roboto", sans-serif;
  --font-oswald: "Oswald", sans-serif;
  --font-work-snas: "Work Sans", sans-serif;
  /* Facebook embeds render in the platform UI face, not the brand face */
  --font-embed: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-h1: 4.688rem;        /* 64px  — hero headline            */
  --fs-h2: 2.75rem;     /* 44px  — section headings         */
  --fs-h3: 1.875rem;     /* 30px  — panel / card headings    */
  --fs-h4: 2.063rem;      /* 33px  — sub headings             */
  --fs-body: 1.5rem;    /* 24px  — default copy             */
  --fs-sm: 1.375rem;    /* 22px                             */
  --fs-xs: 1.1875rem;   /* 19px                             */

  /* Layout */
  --container: 87.5rem;        /* 1400px — default content width      */
  --container-wide: 95rem;     /* 1520px — maintenance / social feed  */
  --container-narrow: 73rem;   /* 1168px — award seal grid            */
  --gutter: 2.5rem;

  --header-h: 9rem;            /* 144px */
  --radius-pill: 62.5rem;
  --radius-card: 0.5rem;

  --shadow-card: 0 0.125rem 0.75rem rgba(15, 30, 70, 0.12);
  --shadow-btn: 0 0.125rem 0.375rem rgba(10, 25, 60, 0.18);

  --transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;            /* 16px root — overridden per breakpoint */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;          /* guards against any accidental h-scroll */
}

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

img { height: auto; }

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

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

button { font: inherit; color: inherit; cursor: pointer; }

/* Shared display treatment for the italic headings used across the comp */
.heading-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}

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

.skip-link {
  position: absolute;
  left: 0.5rem; top: -6rem;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container,
.container-wide,
.container-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container        { max-width: calc(var(--container) + var(--gutter) * 2); }
.container-wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1.375rem;
  border: 0;
  border-radius: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.btn:active { transform: translateY(0); }

.btn__icon { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }

.btn--cyan  { background: var(--cyan);  color: var(--white); }
.btn--cyan:hover  { background: var(--cyan-dark); }

.btn--navy  { background: var(--navy);  color: var(--white); border-radius: 2.1rem;}
.btn--navy:hover  { background: var(--navy-deep); }

.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: #eaf4fb; }

.btn--pale  { background: var(--pale-blue); color: var(--navy); }
.btn--pale:hover  { background: #c2e6f8; }

.btn--dark-pale { background: var(--dark-pale-blue); color: var(--white); }
.btn--dark-pale:hover { background: #6fbbbf; }

.btn--block { display: flex; width: 100%; }
.btn--wide  { min-width: 15.5rem; padding: 0.875rem 3rem; }

.btn-primary {
  background: var(--cyan);
  color: var(--white);
  padding: 0.5rem 1.375rem;
  font-size: 1.3125rem;
  letter-spacing: 0.01em;
}
.btn-primary:hover { background: #29bef2; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--navy);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: var(--header-h);
}

/* White plate that holds the logo, with the curved cyan edge from the comp */
.logo-plate {
  flex: none;
  width: 23.48%;
  display: flex;
  align-items: center;
}
.logo-plate__link { display: block; width: 100%; }
.logo-plate img   { width: 100%; height: auto; }

/* Nav sits to the right of the plate and is vertically centred */
.primary-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2.5rem 0 1rem;
  width: 76.52%;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.primary-nav__list > li > a:not(.btn) {
  display: inline-block;
  padding: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.primary-nav__list > li > a:not(.btn):hover {
  border-bottom-color: var(--cyan);
}
.primary-nav .btn-primary{
  font-family: var(--font-ui);
  border-radius: 1.344rem;
}

/* Hamburger — hidden until the tablet breakpoint (see responsive.css) */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  margin-left: auto;
  align-self: center;
  width: 40px;
  height: 20px;
  background: transparent;
  border: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.nav-toggle__bar {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 0;
  background: var(--white);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(17px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(0) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 50, 0.55);
  z-index: 90;
}

/* ----------------------------------------------------------------------
   5a. Submenu
   Desktop (this file): opens on hover / keyboard-focus of the parent <li>.
   Mobile/tablet (responsive.css, from the 1199.98px drawer breakpoint
   down): hover doesn't exist on touch, so the dropdown behaviour is
   swapped for a tap-to-expand accordion driven by the .submenu-toggle
   button and a small amount of JS (see script.js).
   ---------------------------------------------------------------------- */

/* Item that owns a submenu becomes the positioning context for its dropdown
   (desktop) and for the accordion toggle button (mobile) */
.primary-nav__list > li.has-submenu {
  position: relative;
}

/* Small caret after the label, flags that the item opens a submenu.
   Desktop only — hidden on mobile in favour of the .submenu-toggle button. */
.primary-nav__list > li.has-submenu > a:not(.btn) {
  padding-right: 1.125rem;
}
.primary-nav__list > li.has-submenu > a:not(.btn)::after {
  content: "";
  position: absolute;
  right: 0.1rem;
  top: 0.9rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.primary-nav__list > li.has-submenu:hover > a:not(.btn)::after,
.primary-nav__list > li.has-submenu:focus-within > a:not(.btn)::after {
  transform: rotate(225deg);
  top: 1rem;
}

/* Mobile accordion trigger — a real <button> so it's tap/keyboard operable
   without hijacking the parent link. Hidden here; shown from the drawer
   breakpoint down in responsive.css. */
.submenu-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.submenu-toggle::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.submenu-toggle.is-open::after {
  transform: rotate(225deg);
}

/* The dropdown panel itself — hidden until the parent item is hovered/focused
   (desktop). On mobile this same markup becomes a collapsible accordion
   panel instead — see the .submenu overrides in responsive.css. */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 105;
  min-width: 17rem;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  background: var(--navy-deep);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--transition), transform var(--transition),
              visibility 0s linear var(--transition);
}
.primary-nav__list > li.has-submenu:hover > .submenu,
.primary-nav__list > li.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

.submenu li { border: 0; }
.submenu li a {
  display: block;
  padding: 0.625rem 1.25rem;
  color: var(--white);
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 500;
  font-size: 1.0625rem;
  white-space: nowrap;
  border-bottom: 0;
  transition: background-color var(--transition), color var(--transition);
}
.submenu li a:hover,
.submenu li a:focus-visible {
  background: var(--cyan);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 46.875rem;                 /* 750px */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero__scrim {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 37.875rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0 var(--gutter) 5rem;
  text-align: center;
}

.hero__title {
  font-family: var(--font-oswald);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.2;
  color: var(--white);
  text-shadow: 0 0.1875rem 0.75rem rgba(0, 0, 0, 0.55);
  margin-bottom: 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.75rem;
}
.hero__actions.mob {
  display: none;
}

.btn--hero-commercial,
.btn--hero-residential {
  font-family: var(--font-ui);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--white);
  padding: 1rem 1.5rem;
  border-radius: 2.64rem;
}
.btn--hero-commercial  { background: var(--hero-blue); }
.btn--hero-commercial:hover  { background: #2648a8; }
.btn--hero-residential { background: var(--cyan); }
.btn--hero-residential:hover { background: var(--cyan-dark); }

/* --------------------------------------------------------------------------
   7. About / intro
   -------------------------------------------------------------------------- */
.about { 
  padding: 3.875rem 0 4.375rem; 
}

.about__grid {
  display: grid;
  grid-template-columns: 21.25rem 1fr;
  align-items: center;
  gap: 7.5rem;
}

.about__media img {
  width: 100%;
  max-width: 21.25rem;
  margin-inline: auto;
}

.about__title {
  color: var(--navy);
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Body copy runs on a tight 28-29px pitch throughout the comp (~1.2), which
   is a good deal closer than typical web defaults — measured off the artwork. */
.about__body p {
  color: var(--black);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.2;
  max-width: 54rem;                     /* 864px — matches the comp's column */
  margin-bottom: 1.75rem;
}
.about__body .btn-primary {
  font-size: 1.563rem;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 0.938rem 2.25rem;
  border-radius: 2.1rem;
}

/* --------------------------------------------------------------------------
   8. Services — alternating full-bleed rows
   -------------------------------------------------------------------------- */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 25.625rem;                /* 410px */
}

.service-panel {
  display: flex;
  align-items: flex-start;
  color: var(--white);
}
.service-panel--cyan { background: var(--cyan); }
.service-panel--navy { background: var(--navy); }

/* Text block offsets measured off the comp: left panels sit further in */
.service-panel--cyan .service-panel__inner { 
  padding: 3.375rem 5rem; 
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-panel--navy .service-panel__inner { 
  padding: 3.375rem 5rem;
  display: flex;
  flex-direction: column; 
  height: 100%;
}

/* Padding defines the text inset; the copy itself is capped separately so the
   headings can still run the full width of the panel as they do in the comp. */
.service-panel__inner { width: 100%; }

.service-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

.service-panel p {
  font-size: var(--fs-body);
  line-height: 1.2;
  margin-bottom: 1.75rem;
  max-width: 100%;                     /* 608px — navy panels */
}
.service-panel--cyan p { max-width: 41rem; color: var(--black) }   /* 656px — cyan panels sit wider */
.service-panel p:last-of-type { margin-bottom: 2.25rem; }

.service-panel .btn {
  min-width: 17.5rem;
  padding-block: 0.8125rem;
  margin-top: auto;
  max-width: fit-content;
}

.service-media { position: relative; overflow: hidden; }
.service-media img {
  width: 100%;
  height: 100%;
  min-height: 25.625rem;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   9. Section heading with flanking rules
   -------------------------------------------------------------------------- */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--navy);
  text-align: center;
}
.section-heading__rule {
  flex: 0 1 14rem;
  height: 3px;
  background: #01afeb;
}
.section-heading__text { flex: 0 1 auto; }

/* --------------------------------------------------------------------------
   10. Experience that Matters — award seals
   -------------------------------------------------------------------------- */
.experience {
  background: var(--grey-200);
  padding: 4.688rem 0 6.875rem;
}

.experience .section-heading { 
  margin-bottom: 3.25rem; 
  font-size: 2.25rem;
}

.seal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.seal-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem;
  /* 1px separators between cells only */
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.seal-grid__item:nth-child(3n + 1) { border-left: 0; }
.seal-grid__item:nth-last-child(-n + 3) { border-bottom: 0; }

.seal-grid__item img {
  width: 100%;
  max-width: 18.75rem;                  /* 300px */
  height: auto;
}

/* --------------------------------------------------------------------------
   11. Beat the Heat
   -------------------------------------------------------------------------- */
.beat-heat {
  position: relative;
  padding: 4.5rem 0;
  overflow: hidden;
}

/* Photo bleeds off the left edge and blends into the orange field */
.beat-heat__photo.desk {
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.beat-heat__photo.mob {
  display: none;
}

.beat-heat__container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.beat-heat__card {
  width: 100%;
  max-width: 60rem;                     /* 960px */
  background: var(--navy);
  color: var(--white);
  padding: 2.5rem 3.125rem;
}

.beat-heat__title {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1.75rem;
}
.beat-heat__title .emoji { font-style: normal; }

.beat-heat__card p {
  font-size: 1.438rem;
  line-height: 1.27;
  margin-bottom: 2.25rem;
}

.beat-heat__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.75rem;
}
.beat-heat__actions .btn--block { grid-column: 1 / -1; }
.beat-heat__actions .btn { padding-block: 0.75rem; border-radius: 1.688rem;}
.beat-heat__actions .btn.btn--pale{
  padding: 0.625rem 2.5rem;
}
.beat-heat__actions .btn.btn--cyan{
  padding: 0.938rem 2.5rem;
}

/* --------------------------------------------------------------------------
   12. Preventative Maintenance Plan
   -------------------------------------------------------------------------- */
.maintenance {
  background: var(--white);
  padding: 6rem 0;
  text-align: center;
}

/* Notched banner used here and in the "service areas" block */
.ribbon {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.55rem;
  padding: 1.625rem 4.188rem;
  background: var(--navy);
  color: var(--white);
  font-size: 2.25rem;
  line-height: 1.2;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 50%, 100% 100%, 0 100%, 1.5rem 50%);
}
.ribbon--sm { font-size: 1.875rem; padding: 0.9375rem 3.5rem; }

.maintenance__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4375rem;
  margin-bottom: 1.125rem;
}

.maintenance__copy {
  max-width: 79rem;
  margin: 0 auto 1.5rem;
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--ink);
}

.maintenance__subhead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4375rem;
  margin-bottom: 3.5rem;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 3.5rem;
}

.benefit-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.875rem;
  padding: 0.5rem 1.25rem 1rem;
  border-left: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.benefit-grid__item:first-child { border-left: 0; }
.benefit-grid__item img { width: 8.75rem; height: auto; }
.benefit-grid__item:first-of-type img{
  width: 15.625rem;
}
.benefit-grid__item:nth-of-type(2) img{
  width: 11.313rem;
}
.benefit-grid__item:nth-of-type(3) img{
  width: 11.875rem;
}
.benefit-grid__item:nth-of-type(4) img{
  width: 12.688rem;
}
.benefit-grid__item:nth-of-type(5) img{
  width: 11.813rem;
}
.benefit-grid__item span{
  margin-top: auto;
}
.maintenance.second .benefit-grid__item:first-of-type img,
.maintenance.second .benefit-grid__item:nth-of-type(2) img,
.maintenance.second .benefit-grid__item:nth-of-type(3) img,
.maintenance.second .benefit-grid__item:nth-of-type(4) img,
.maintenance.second .benefit-grid__item:nth-of-type(5) img,
.maintenance.second .benefit-grid__item:nth-of-type(6) img{
  width: 8.75rem;
}

/* --------------------------------------------------------------------------
   13. Financing (Wisetack)
   -------------------------------------------------------------------------- */
.financing {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

/* The copy column sets the height; the disc and artwork are deliberately
   larger and get cropped by the section, exactly as they are in the comp. */
.financing__grid {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 8.625rem 0 12.5rem;
}

.financing__body { 
  max-width: 43.438rem; 
  padding: 3.063rem 0;
}

.financing__title {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.financing__body > p {
  font-size: var(--fs-body);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

.financing__list {
  display: grid;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.financing__list li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-body);
}
.check { width: 1.75rem; height: 1.75rem; flex: none; fill: var(--cyan); }

/* Teal disc + illustration on the right */
.financing__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.financing__media.mob{
  display: none;
}
.financing__art {
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   14. Social feed
   -------------------------------------------------------------------------- */
.social {
  background: var(--grey-100);
  padding: 3rem 0 4rem;
}

.social__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.5rem;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 2.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--ink);
}
.social__icons { display: inline-flex; gap: 0.5rem; }
.social__icons .icon { width: 2.125rem; height: 2.125rem; }

.feed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.375rem;
}

.feed-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 1.56rem;
  overflow: hidden;
  font-family: var(--font-ui);
}

.feed-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.25rem 1.813rem;
}
.feed-card__avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}
.feed-card__meta { display: flex; flex-direction: column; line-height: 1.25; }
.feed-card__name { font-size: 1.188rem; font-weight: 300; color: var(--black); }
.feed-card__date { font-size: 1.188rem; font-weight: 300; color: #474747; }
.feed-card__brand { width: 1.75rem; height: 1.75rem; margin-left: auto; flex: none; }

.feed-card__text {
  padding: 0 1.813rem 1.813rem;
  font-size: 1.625rem;
  line-height: 1.4;
  color: var(--black);
  font-weight: 300;
}
.feed-card__text a { display: block; color: #65676b; }
.feed-card__text a:hover { text-decoration: underline; }

.feed-card__photo {
  width: 100%;
  aspect-ratio: 346 / 234;
  object-fit: cover;
}

.feed-card__foot {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.875rem 1.25rem 1rem;
  font-size: 1rem;
  color: #65676b;
}
.feed-card__stat,
.feed-card__share { display: inline-flex; align-items: center; gap: 0.375rem; }
.feed-card__share { margin-left: auto; }
.feed-card__foot svg { width: 1.25rem; height: 1.25rem; }

.social__cta { margin-top: 3.25rem; text-align: center; }
.social__cta .btn { min-width: 16rem; }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.testimonials {
  background: var(--white);
  padding: 3.25rem 0 3rem;
  text-align: center;
}

.testimonials__stars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.375rem;
  margin-bottom: 1.75rem;
}
.testimonials__stars svg { width: 3.25rem; height: 3.25rem; fill: var(--gold); }
.testimonials__stars svg:nth-child(3) { width: 4.25rem; height: 4.25rem; }

.testimonials__stage {
  display: flex;
  gap: 1rem;
}

.slider-arrow {
  flex: none;
  width: 2.25rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--cyan);
  transition: color var(--transition), transform var(--transition);
}
.slider-arrow svg { width: 100%; height: 100%; }
.slider-arrow:hover { color: var(--navy); transform: scale(1.08); }
.slider-arrow.slider-arrow--next{
  transform: rotate(180deg);
}
.slider-arrow.slider-arrow--next:hover{
  transform: rotate(180deg) scale(1.08);
}
.testimonials__viewport { flex: 1 1 auto; overflow: hidden; }

.testimonials__track { position: relative; }

.testimonial {
  display: none;
  max-width: 81.5rem;
  margin-inline: auto;
  cursor: grab;
}
.testimonial.is-active { display: block; animation: fade-in 1s ease; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.testimonial p {
  font-size: 1.563rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.75rem;
  font-family: var(--font-work-snas);
}
.testimonial cite {
  font-family: var(--font-work-snas);
  font-style: normal;
  font-weight: 700;
  font-size: 1.563rem;
  color: var(--ink);
}

.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 0.438rem;
  margin-top: 3rem;
}
.dot {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--black);
  transition: background-color var(--transition), opacity var(--transition);
}
.dot.is-active { background: var(--cyan); opacity: 1; }

.testimonials__mascots { margin-top: 2.5rem; }
.testimonials__mascots img {
  width: 100%;
  max-width: 68.75rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16. Education centre
   -------------------------------------------------------------------------- */
.education {
  position: relative;
  padding: 2.25rem 0 4rem;
}
.education::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15.5%;
  width: 100%;
  height: 100%;
  background: #f0fafc url("../images/education-bg.png") center / cover no-repeat;
}
.education__inner { position: relative; z-index: 2; }

.education .section-heading { margin-bottom: 2.6rem; color: var(--black); }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.063rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  min-height: 25.625rem;                /* 410px */
  padding: 2.75rem 2.063rem;
  background: var(--navy);
  color: var(--white);
}

.article-card__date {
  font-size: var(--fs-body);
  line-height: 1.4;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 1.7rem;
  font-family: var(--font-work-snas);
}

.article-card__title {
  font-family: var(--font-work-snas);
  font-weight: 600;
  font-size: 1.813rem;
  line-height: 1.3;
  margin-bottom: 1.125rem;
  color: var(--white);
}

.article-card__excerpt {
  font-family: var(--font-work-snas);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.33;                    /* 32px pitch, measured off the comp */
  color: var(--white);
  margin-bottom: 1.5rem;
}

.article-card__link {
  margin-top: auto;
  font-family: var(--font-work-snas);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color var(--transition);
  color: var(--white);
}
.article-card__link:hover { color: var(--cyan); }

.education__cta { margin-top: 2.25rem; text-align: center; }
.education__cta .btn--cyan{
  min-width: 15.188rem;
}

/* --------------------------------------------------------------------------
   17. Service areas
   -------------------------------------------------------------------------- */
.areas {
  padding: 2.688rem 0 0;
  text-align: center;
}

.areas__list {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 1.7;
  color: #12214f;
  position: relative;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  color: var(--white);
  margin-top: 5.5rem;
}
.site-footer .wrapper{
  background: #061552;
  position: relative;
  padding-bottom: 1.75rem;
}

/* Oval logo lock-up straddling the top edge of the footer, as in the comp */
.site-footer__badge {
  position: absolute;
  top: -6.563rem;
  left: 50%;
  transform: translateX(-50%);
  width: 29rem;
  height: 16.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/footer-logo-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.site-footer .footer-logo a { 
  width: 18.125rem; 
  height: 5.625rem; 
  display: inline-block;
  margin-top: -3.875rem;
}

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

.site-footer__social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2.063rem 0 2.7rem;
}
.site-footer__social .icon { width: 2.5rem; height: 2.5rem; }
.site-footer__social a { display: block; transition: transform var(--transition); }
.site-footer__social a:hover { transform: translateY(-3px); }

.site-footer__badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4.5rem;
  margin-bottom: 3.25rem;
}

.footer-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 20rem;
}
.footer-badge img { width: 100%; max-width: 15rem; height: auto; }
.footer-badge__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-badge__note { font-size: 0.8125rem; }
.footer-badge__note--strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.site-footer__legal {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.063rem;
  color: var(--white);
}
.site-footer__legal a { text-decoration: underline; }
.site-footer__legal a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Mobile sticky buttons */
.mobile-sticky-btn {
  display: none;
  background: var(--white);
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1rem;
  box-shadow: 0 -7px 10px rgba(0,0,0,0.15);
  z-index: 999;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
.mobile-sticky-btn .btn{
  font-size: 14px;
  border-radius: 2.5rem;
  width: calc(50% - 0.5rem);
}
.mobile-sticky-btn .btn.btn--cyan{
  white-space: normal;
}