/* ---- 01-tokens.css ---- */
/* Design tokens. Breakpoints used across the files: 1100px, 900px (mobile nav), 640px (phone). */
:root {
  --navy: #0F2A3D;
  --navy-deep: #0A1D2B;
  --green: #1E6E4B;
  --green-dark: #17583C;
  --gold: #C9A227;
  --gold-dark: #B08C1E;
  --blue: #375EFB;
  --blue-dark: #2448D8;
  --maroon: #8E5A63;
  --white: #FFFFFF;
  --mist: #EFF3F2;
  --sage: #D8E0DE;
  --slate: #B9C7D2;
  --text: #33424D;
  --muted: #5C6A75; /* darkened from #6B7B86: 4.97:1 on --mist, was 3.91:1 */
  --line: #E3E8E7;
  --line-strong: #CBD5D3;
  --danger: #C0392B;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --text-display: clamp(30px, 4.6vw, 52px);
  --text-title: clamp(28px, 3.4vw, 40px);

  --container: 1200px;
  --gutter: 20px;
  --header-h: 100px;
  --section-space: 100px;
  --radius-sm: 2px;
  --radius: 4px;
  --shadow-sm: 0 6px 24px rgba(10, 29, 43, .08);
  --shadow-md: 0 16px 36px rgba(10, 29, 43, .10);
  --shadow-lg: 0 18px 46px rgba(10, 29, 43, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: .25s;
}

@media (max-width: 900px) {
  :root { --header-h: 76px; --section-space: 72px; }
}

/* ---- 02-base.css ---- */
/* Reset, typography and utilities. */
*, ::before, ::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 10px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

::selection { color: var(--navy); background: rgba(201, 162, 39, .35); }

img, svg { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { white-space: normal; -webkit-tap-highlight-color: transparent; }
p { margin: 0 0 1em; }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--navy);
  text-wrap: balance;
}

ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
main:focus { outline: none; } /* focus target of the skip link, not a control */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 900px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 1000;
  padding: 10px 16px;
  color: var(--white);
  background: var(--navy);
}
.skip-link:focus { left: 8px; }

/* Header Footer Elementor emits a second skip link from its own template, after
   wp_body_open and so past the reach of any hook this theme owns. Hiding it takes it out
   of the tab order and the accessibility tree, leaving exactly one functional skip link:
   the one above. */
.hfe-skip-link { display: none; }

.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;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---- 03-buttons.css ---- */
/* Buttons: .btn plus a colour modifier (--primary, --accent, --blue) and optional size/width. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 15px 28px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--white);
  background: var(--btn-bg, var(--green));
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}
@media (hover: hover) {
  .btn:hover {
    background: var(--btn-bg-hover, var(--green-dark));
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(10, 29, 43, .18);
  }
}
/* After :hover so the pressed state wins (same specificity, later rule applies). */
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .65; cursor: progress; transform: none; box-shadow: none; }

.btn--primary { --btn-bg: var(--green); --btn-bg-hover: var(--green-dark); }
/* Navy on gold reads at 6.12:1; white on gold was only 2.42:1. */
.btn--accent { --btn-bg: var(--gold); --btn-bg-hover: var(--gold-dark); color: var(--navy); }
.btn--blue { --btn-bg: var(--blue); --btn-bg-hover: var(--blue-dark); }
/* Outline button: --dark sits on light backgrounds, plain on dark ones. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--white);
  color: var(--white);
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--ghost.btn--dark { --btn-bg-hover: var(--navy); color: var(--navy); }
@media (hover: hover) {
  .btn--ghost:hover { color: var(--navy); background: var(--white); box-shadow: inset 0 0 0 2px var(--white); }
  .btn--ghost.btn--dark:hover { color: var(--white); background: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
}

.btn--lg { padding: 20px 40px; }
.btn--block { width: 100%; }

@media (max-width: 640px) {
  .btn--lg { padding: 18px 28px; }
}

/* ---- 04-components.css ---- */
/* Reusable building blocks: section heads, grids, cards, icon holders, social links, reveal. */

/* ---------- Section head ---------- */
.section-head { margin-bottom: 32px; }
.section-head::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 24px;
  background: var(--gold);
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}

.section-title { font-size: var(--text-title); }
.lead { max-width: 680px; font-size: 17px; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: var(--gap, 20px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Cards ---------- */
.card { background: var(--white); }
.card__title { margin-bottom: 8px; font-size: 18px; }
.card__text { margin: 0; }

.card--trust {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  background: var(--mist);
  border-left: 3px solid var(--green);
}

.card--feature {
  padding: 32px 28px 40px;
  border: 1px solid var(--line);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.card--feature .card__title { margin-bottom: 10px; font-size: 19px; }
@media (hover: hover) {
  .card--feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--green);
  }
}

/* Service card: the whole card is clickable through the title link. */
.card--service {
  position: relative;
  padding: 30px 26px 34px;
  border: 1px solid var(--line);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.card--service .card__title { font-size: 19px; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__more { margin: 16px 0 0; }
@media (hover: hover) {
  .card--service:hover,
  .card--feature:has(.card__link):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--green);
  }
  .card--service:hover .link-more::after { transform: translateX(4px); }
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.link-more::after {
  content: "→";
  transition: transform var(--duration) var(--ease);
}
@media (hover: hover) {
  a.link-more:hover { text-decoration: underline; }
  a.link-more:hover::after { transform: translateX(4px); }
}
.section-more { margin: 32px 0 0; }

/* ---------- Icon holders ---------- */
.icon-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 18px;
  color: var(--green);
  background: var(--white);
  border-radius: 50%;
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  font-size: 24px;
  color: var(--green);
  background: var(--mist);
}

/* ---------- Social links ----------
   Two-class selectors so these win over `.site-footer a` and `.contact-list a`. */
.social { display: flex; gap: 10px; margin-top: 20px; }
.social .social__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  font-size: 19px;
  color: var(--social-fg, var(--white));
  background: var(--social-bg, rgba(255, 255, 255, .08));
  border-radius: 50%;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) {
  .social .social__link:hover {
    color: var(--social-fg-hover, var(--navy));
    background: var(--social-bg-hover, var(--gold));
    text-decoration: none;
    transform: translateY(-2px);
  }
}
.social--light {
  --social-fg: var(--green);
  --social-bg: var(--mist);
  --social-fg-hover: var(--white);
  --social-bg-hover: var(--green);
  margin-top: 0;
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 150;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  color: var(--white);
  background: var(--gold);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    visibility var(--duration),
    background-color var(--duration) var(--ease);
}
.back-to-top .icon { stroke-width: 2.4; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .back-to-top:hover { background: var(--gold-dark); }
}
/* Restated over the Elementor kit's bare-<button> styles; see 05-form.css. */
.back-to-top.back-to-top,
.back-to-top.back-to-top:hover,
.back-to-top.back-to-top:focus { padding: 0; font-size: 20px; background-color: var(--gold); }
@media (hover: hover) {
  .back-to-top.back-to-top:hover { background-color: var(--gold-dark); }
}

/* ---------- Reveal on scroll (only when JS runs) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .back-to-top { left: 16px; bottom: 16px; }
}

/* Outcome line on service cards and service pages. */
.card__outcome {
  margin: 14px 0 0;
  padding-top: 14px;
  font-size: 14.5px;
  color: var(--navy);
  border-top: 1px solid var(--line);
}

/* ---- 05-form.css ---- */
/* Enquiry form. */
.form {
  padding: 36px;
  background: var(--mist);
  border-top: 3px solid var(--gold);
}
.form__heading { margin-bottom: 6px; font-size: 20px; }
.form__note { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.form__group { margin: 0 0 8px; padding: 0; border: 0; }
.form__legend {
  padding: 0;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green);
}
.form__legal { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.form__legal a { color: var(--green); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 18px; }
.form__label { margin-bottom: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--navy); }

.form__control {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__control::placeholder { color: #8A98A2; }
textarea.form__control { resize: vertical; }
.form__control:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 110, 75, .15);
}
.form__control[aria-invalid="true"] { border-color: var(--danger); }
.form__control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .15); }

.form__error { margin: 4px 0 0; font-size: 12.5px; color: var(--danger); }
.form__status { margin: 16px 0 0; font-weight: 500; }
.form__status:empty { display: none; }
.form__status--success { color: var(--green); }
.form__status--error { color: var(--danger); }

/* ---------- Contact Form 7 ----------
   On WordPress the enquiry form is rendered by CF7. The fields themselves already carry
   the classes above, because the form definition in wordpress/cf7-enquiry-form.txt uses
   them; what follows covers only the wrappers and messages CF7 adds of its own accord,
   so a visitor sees the same form either way. */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { margin: 4px 0 0; font-size: 12.5px; color: var(--danger); }
.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.wpcf7 form.sent .wpcf7-response-output { color: var(--green); border-color: var(--green); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { color: var(--danger); border-color: var(--danger); }
.wpcf7-spinner { margin: 0 0 0 12px; }

/* CF7 renders its submit as <input type="submit">, which an Elementor kit styles through
   `.elementor-kit-N input[type="submit"] { background-color: transparent }` -- two
   selectors' worth of weight against .btn's one, leaving white text on a pale panel.
   Matching the element and the attribute as well as the class wins outright, so the
   button keeps the colour its modifier asks for whatever the kit declares. */
input[type="submit"].btn,
button.btn.btn,
button.btn.btn:hover,
button.btn.btn:focus { background: var(--btn-bg, var(--green)); }
@media (hover: hover) {
  input[type="submit"].btn:hover,
  button.btn.btn:hover { background: var(--btn-bg-hover, var(--green-dark)); }
}

/* The same kit styles every bare <button> through `.elementor-kit-N button`: a gradient
   background image, a text shadow, its own font, white text, 3px corners and 100/70/56px of
   vertical padding (desktop/tablet/phone), then a transparent background on :hover and
   :focus. One class cannot outweigh that, so the menu toggle and consent buttons swelled to
   over 100px tall and the assistant's buttons lost their colours.
   The first rule strips what no theme button uses, at one element's weight more than the kit.
   The rest restate only what the kit overrides, with the class doubled so they win outright;
   :hover and :focus are listed with the resting state so a tap on a touch screen, where the
   kit's :hover still applies, keeps the button's own colour. The per-component overrides sit
   with their components: 04-components (back to top), 10-header (menu toggle) and
   30-assistant (launcher, close, chips, send). */
body button:not(.elementor-button),
body button:not(.elementor-button):hover,
body button:not(.elementor-button):focus { background-image: none; text-shadow: none; font-family: inherit; }

button.btn.btn,
button.btn.btn:hover,
button.btn.btn:focus { padding: 15px 28px; font-size: 13px; border-radius: var(--radius-sm); }

@media (max-width: 640px) {
  .form { padding: 24px 18px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form__control { font-size: 16px; } /* 16px stops iOS zooming into the field */
  .form__submit { width: 100%; }
}

/* Spam trap: off-screen but not display:none, so bots still fill it in. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 06-consent.css ---- */
/* Analytics consent bar. Only rendered when an analytics ID is configured. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  color: var(--white);
  background: var(--navy-deep);
  border-top: 3px solid var(--gold);
  box-shadow: 0 -10px 30px rgba(10, 29, 43, .25);
}
.consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 18px var(--gutter);
}
.consent__text { max-width: 720px; margin: 0; font-size: 14.5px; color: var(--slate); }
.consent__text a { color: var(--white); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* The bar is navy, but Decline is marked up as btn--ghost btn--dark (the light-background
   outline), which draws navy on navy. Give it the on-dark outline here. */
.consent .btn--ghost.btn--dark { --btn-bg-hover: var(--white); color: var(--white); }
@media (hover: hover) {
  .consent .btn--ghost.btn--dark:hover { color: var(--navy); box-shadow: inset 0 0 0 2px var(--white); }
}

@media (max-width: 640px) {
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1 1 140px; }
}

/* ---- 10-header.css ---- */
/* Fixed site header and navigation (collapses behind a toggle below 900px when JS runs). */
.site-header-spacer { height: var(--header-h); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--duration) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Hello Elementor ships a .site-header of its own and caps it at 500-1140px across four
   breakpoints via `.site-header:not(.dynamic-header)` (0,3,0). The class name collides
   with ours, so this selector is deliberately one class heavier: it wins outright rather
   than by load order, and the header spans the viewport under any host theme. */
.site-header.site-header:not(.dynamic-header) {
  max-width: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1400px;
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.brand__logo { display: block; width: 64px; height: 64px; object-fit: contain; }
.brand__name { white-space: nowrap; }

.site-nav__list { display: flex; gap: 4px; }
.site-nav__item { position: relative; display: flex; align-items: center; }

/* ---------- Dropdowns ---------- */
/* Scoped to the header so it outscores an Elementor kit's global button styling
   (.elementor-kit-N button), which would otherwise impose its own padding and inflate
   the toggle far beyond its tap size. */
.site-header .site-nav__toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto; /* the nav is a flex row: without this it is squeezed below its tap size */
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 15px;
  color: var(--navy);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.site-header .site-nav__toggle .icon { stroke-width: 2.4; transition: transform var(--duration) var(--ease); }
.site-header .site-nav__item--has-menu[data-open] .site-nav__toggle .icon { transform: rotate(180deg); }

.site-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 280px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.site-nav__item--has-menu[data-open] .site-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.site-menu__link {
  display: block;
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--navy);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) {
  .site-menu__link:hover { color: var(--green); background: var(--mist); border-left-color: var(--green); }
}

.site-nav__link {
  position: relative;
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}
.site-nav__link.is-active { color: var(--green); }
.site-nav__link.is-active::after { transform: scaleX(1); }
@media (hover: hover) {
  .site-nav__link:hover { color: var(--green); }
  .site-nav__link:hover::after { transform: scaleX(1); }
}

.site-nav__cta { display: none; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* Restated over the Elementor kit's bare-<button> padding; see 05-form.css. */
.menu-toggle.menu-toggle { padding: 10px; }
.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform var(--duration) var(--ease), opacity .2s var(--ease);
}
/* Bars are 3px tall with a 5px gap, so the outer bars move 8px to meet in the middle. */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1100px) {
  .site-nav__link { padding: 10px; }
  .site-nav__link::after { left: 10px; right: 10px; }
}

@media (max-width: 900px) {
  .brand__logo { width: 56px; height: 56px; }

  /* Without JS the links simply wrap onto a second row. */
  .site-header__inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-block: 10px; }
  .site-nav { order: 3; width: 100%; }
  .site-nav__list { flex-wrap: wrap; gap: 0; }
  .site-nav__link::after { display: none; }

  /* With JS the nav becomes a dropdown behind the toggle. */
  .js .site-header__inner { flex-wrap: nowrap; height: var(--header-h); padding-block: 0; }
  .js .menu-toggle { display: flex; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-height: 0;
    padding: 0 var(--gutter);
    overflow: hidden;
    visibility: hidden;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(10, 29, 43, .12);
    transition: max-height .3s var(--ease), padding .3s var(--ease), visibility .3s;
  }
  .js .site-nav.is-open {
    max-height: calc(100dvh - var(--header-h));
    padding-block: 8px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: visible;
  }
  .js .site-nav__list { flex-direction: column; }
  .js .site-nav__link { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid #EEF1F0; }
  .js .site-nav__cta { display: flex; margin-top: 18px; }

  /* Mobile stays simple: sub-pages are listed inline, with no dropdown to open. */
  .site-nav__item { display: block; }
  .site-header .site-nav__toggle { display: none; }
  .site-nav__link { display: block; }
  .site-menu {
    position: static;
    min-width: 0;
    padding: 4px 0 8px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    /* inherit, not visible: while the menu panel is collapsed its links must stay
       out of the keyboard tab order. */
    visibility: inherit;
    transform: none;
  }
  .site-menu__link { padding: 10px 6px; font-size: 15px; color: var(--text); }
}

/* Tablets keep the header CTA next to the menu button; phones get it inside the menu. */
@media (max-width: 599px) {
  .site-header__cta { display: none; }
}

@media (max-width: 420px) {
  .brand__logo { width: 46px; height: 46px; }
  .brand { gap: 8px; font-size: 14px; }
}

/* ---- 11-footer.css ---- */
/* Site footer: four link columns, then company and contact details. */
.site-footer { font-size: 14.5px; color: var(--slate); background: var(--navy); }
.site-footer a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
@media (hover: hover) {
  .site-footer a:hover { color: var(--white); }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 40px;
  padding-block: 64px 40px;
}
.site-footer__heading {
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.site-footer__links li { margin-bottom: 10px; }
/* Taller tap targets without changing the line spacing. */
.site-footer__links a,
.site-footer__address a { display: inline-block; padding-block: 4px; margin-block: -4px; }

.site-footer__contact {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 24px 40px;
  align-items: start;
  padding-block: 32px 40px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__name { margin-bottom: 8px; font-size: 17px; font-weight: 600; color: var(--white); }
.site-footer__meta { margin: 0; }
.site-footer__address { margin: 0; font-style: normal; }
.site-footer__contact .social { margin-top: 0; }

.site-footer__bottom {
  padding-block: 32px;
  font-size: 13.5px;
  color: #E4E9EE;
  background: linear-gradient(180deg, var(--navy-deep) 0%, #3A2F3F 55%, var(--maroon) 100%);
}
.site-footer__bottom p { margin: 0 0 10px; }
.site-footer__bottom p:last-child { margin: 0; opacity: .85; }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__contact { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr; padding-block: 48px 24px; }
  .site-footer__bottom { padding-bottom: 84px; } /* clears the floating buttons */
}

/* ---- 12-pages.css ---- */
/* Inner-page furniture: page hero, breadcrumb, article body, lists, tables, FAQ, 404. */

/* ---------- Page hero ---------- */
.page-hero {
  padding-block: 72px 64px;
  color: var(--white);
  background: var(--navy);
}
.page-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.page-hero__title {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: var(--text-title);
  color: var(--white);
}
.page-hero__text { max-width: 760px; margin: 0; font-size: 17px; color: var(--slate); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding-block: 14px; font-size: 13.5px; background: var(--mist); border-bottom: 1px solid var(--line); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--muted); }
.breadcrumb a { color: var(--green); text-decoration: none; }
.breadcrumb [aria-current] { color: var(--muted); }
@media (hover: hover) {
  .breadcrumb a:hover { text-decoration: underline; }
}

/* ---------- Article body ---------- */
.article { max-width: 820px; }
.article--legal { font-size: 15.5px; }
.article__title { margin: 40px 0 14px; font-size: 22px; }
.article__title:first-child { margin-top: 0; }
.article__meta { margin-bottom: 28px; font-size: 13.5px; color: var(--muted); }
.article__note {
  margin: 24px 0 0;
  padding: 16px 18px;
  font-size: 15px;
  background: var(--mist);
  border-left: 3px solid var(--gold);
}
.article a { color: var(--green); }
.nowrap { white-space: nowrap; }

/* ---------- Lists ---------- */
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 30px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 10px;
  height: 10px;
  background: var(--green);
}
.ticks--parties li::before { background: var(--gold); }
.ticks--plain li::before { width: 6px; height: 6px; top: .65em; left: 6px; border-radius: 50%; background: var(--muted); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--navy);
  background: var(--mist);
  border-left: 2px solid var(--green);
}

.related { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.related a {
  display: inline-block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) {
  .related a:hover { color: var(--white); background: var(--green); border-color: var(--green); }
}

.details { margin: 0; }
.details > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 20px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.details dt { font-weight: 600; color: var(--navy); }
.details dd { margin: 0; }
.details a { color: var(--green); }

/* ---------- Responsibility / cookie tables ---------- */
.matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
.matrix th, .matrix td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix thead th {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
}
.matrix tbody th { font-weight: 600; color: var(--navy); }
.matrix .yes { font-weight: 600; color: var(--green); }
.matrix .no { color: var(--muted); }
.matrix .part { color: var(--navy); }

/* ---------- FAQ ---------- */
.faq { margin: 0; }
.faq__item { padding-block: 22px; border-bottom: 1px solid var(--line); }
.faq__item:first-child { padding-top: 0; }
.faq__q { margin-bottom: 8px; font-size: 17px; font-weight: 600; color: var(--navy); }
.faq__a { margin: 0; }

/* ---------- 404 ---------- */
.notfound { text-align: left; }
.notfound .page-hero__title, .notfound .page-hero__text { color: var(--navy); }
.notfound .page-hero__eyebrow { color: var(--green); }
.notfound .page-hero__text { color: var(--text); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

@media (max-width: 640px) {
  .page-hero { padding-block: 48px 40px; }
  .page-hero__text { font-size: 16px; }
  .details > div { grid-template-columns: 1fr; gap: 2px; }
  .matrix { font-size: 14px; }
  .matrix th, .matrix td { padding: 10px 12px; }
  .notfound__actions .btn { width: 100%; }
}

.article__outcome {
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--mist);
  border-left: 3px solid var(--green);
}

/* ---- 20-sections.css ---- */
/* Page sections: hero, trust strip, CTA band, contact details. */
.section { padding-block: var(--section-space); }
.section--mist { background: var(--mist); }
.section--dark { color: var(--slate); background: var(--navy-deep); }
.section--dark .section-title { color: var(--white); }

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 96px 104px;
  color: var(--white);
  background: var(--navy);
}
.hero::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -220px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 110, 75, .28), transparent 65%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }

/* One dominant headline: the tagline above it is a small label. */
.hero__eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__title {
  max-width: 1000px;
  margin-bottom: 28px;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: var(--white);
}
.hero__text { max-width: 760px; margin-bottom: 40px; font-size: 18px; color: var(--slate); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Company / credentials ---------- */
.company { background: var(--sage); }
.company__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.company__title { margin-bottom: 16px; font-size: clamp(22px, 2.4vw, 28px); }
.company__text { margin: 0; max-width: 560px; }
.company__facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* ---------- CTA band ---------- */
.cta { padding-block: 64px; color: var(--white); background: var(--navy); }
.cta__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px 48px;
  align-items: center;
}
.cta__title {
  margin-bottom: 12px;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--white);
}
.cta__text { margin: 0; color: var(--slate); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.contact__heading { margin-bottom: 8px; font-size: 20px; }
.contact-list { margin: 16px 0 0; }
.contact-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.contact-list dt { min-width: 90px; font-weight: 600; color: var(--navy); }
.contact-list dd { margin: 0; }
.contact-list a {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
  color: var(--green);
  text-decoration: none;
}
@media (hover: hover) {
  .contact-list a:hover { text-decoration: underline; }
}

@media (max-width: 900px) {
  .hero { padding-block: 64px 72px; }
  .cta__inner { grid-template-columns: 1fr; }
  .cta__actions { justify-content: flex-start; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .hero__text { font-size: 16px; margin-bottom: 32px; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; }
}

@media (max-width: 900px) {
  .company__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- 21-model.css ---- */
/* Role boundary statement, the two-layer coordination model, and the process steps. */

/* ---------- Role boundary ---------- */
.boundary { padding-block: 64px; color: var(--white); background: var(--navy-deep); }
.boundary__title {
  margin: 0 0 32px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--gold);
}

.boundary__split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}
.boundary__side { padding: 28px; background: rgba(255, 255, 255, .05); }
.boundary__side--us { border-top: 3px solid var(--green); }
.boundary__side--them { border-top: 3px solid var(--gold); }

.boundary__label {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--white);
}
.boundary__side--us .boundary__label { color: #7FD3A8; }
.boundary__side--them .boundary__label { color: var(--gold); }

.boundary__items { margin: 0; padding: 0; list-style: none; }
.boundary__items li {
  position: relative;
  padding: 9px 0 9px 22px;
  font-size: 15.5px;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.boundary__items li:last-child { border-bottom: 0; }
.boundary__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 8px;
  height: 8px;
}
.boundary__side--us .boundary__items li::before { background: var(--green); }
.boundary__side--them .boundary__items li::before { background: var(--gold); }

/* The gap between the two sides is the point: nothing crosses it. */
.boundary__divider {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  color: var(--slate);
  border-left: 1px dashed rgba(255, 255, 255, .35);
  border-right: 1px dashed rgba(255, 255, 255, .35);
}

.boundary__text { max-width: 860px; margin: 28px 0 0; color: var(--slate); }

/* ---------- Two-layer model ---------- */
.model { margin-top: 40px; }
.model__layer { padding: 28px; border: 1px solid var(--line-strong); }
.model__layer--commercial { background: var(--mist); border-top: 3px solid var(--navy); }
.model__layer--coordination { color: var(--white); background: var(--navy); border: 0; border-top: 3px solid var(--gold); }

.model__label {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.model__layer--commercial .model__label { color: var(--navy); }
.model__layer--coordination .model__label { color: var(--gold); }

.model__parties, .model__terms, .model__services {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.model__parties li {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line-strong);
}
.model__terms li {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(201, 162, 39, .18);
  border-left: 3px solid var(--gold);
}
.model__services li { margin: 0; }
.model__services a {
  display: inline-block;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) {
  .model__services a:hover { background: var(--green); border-color: var(--green); }
}

.model__note { margin: 0; font-size: 14.5px; color: var(--muted); }
.model__layer--coordination .model__note { color: var(--slate); }

.model__divider {
  margin: 0;
  padding: 14px 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  color: var(--navy);
  background: var(--sage);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}

/* ---------- Process steps ---------- */
.steps { margin: 40px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.steps__item:last-child { border-bottom: 1px solid var(--line); }
.steps__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-weight: 700;
  color: var(--gold);
  background: var(--navy);
}
.steps__title { margin-bottom: 6px; font-size: 19px; }
.steps__owner {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
  background: var(--mist);
  vertical-align: middle;
}
.steps__text { margin: 0; }
.steps--detail .steps__text { max-width: 760px; }

@media (max-width: 900px) {
  .boundary__split { grid-template-columns: 1fr; }
  .boundary__divider {
    padding: 12px;
    border-left: 0;
    border-right: 0;
    border-top: 1px dashed rgba(255, 255, 255, .35);
    border-bottom: 1px dashed rgba(255, 255, 255, .35);
  }
}

@media (max-width: 640px) {
  .model__layer { padding: 20px 16px; }
  .model__parties li, .model__services a { font-size: 14px; padding: 8px 12px; }
  .steps__item { grid-template-columns: 40px 1fr; gap: 14px; }
  .steps__owner { margin-left: 0; margin-top: 6px; }
  .steps__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; }
}

/* ---- 30-assistant.css ---- */
/* Floating enquiry assistant. */
.assistant-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 29, 43, .25);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
html:not(.js) .assistant-launcher { display: none; }
@media (hover: hover) {
  .assistant-launcher:hover { transform: translateY(-2px); background: var(--navy-deep); }
}
.assistant-launcher__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: assistant-pulse 2s ease infinite;
}

@keyframes assistant-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, .6); }
  50% { box-shadow: 0 0 0 6px rgba(201, 162, 39, 0); }
}
@keyframes assistant-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes assistant-blink {
  0%, 80%, 100% { opacity: .3; }
  40% { opacity: 1; }
}

.assistant {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 201;
  display: flex;
  flex-direction: column;
  width: 356px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100dvh - 110px);
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: assistant-in .22s var(--ease);
}

.assistant__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: var(--white);
  background: var(--navy);
  border-bottom: 2px solid var(--gold);
}
.assistant__title { margin: 0; font-size: 15px; font-weight: 600; }
.assistant__sub { margin: 0; font-size: 12.5px; color: var(--slate); }

.assistant__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  color: var(--slate);
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.assistant__close .icon { stroke-width: 2.4; }
@media (hover: hover) {
  .assistant__close:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
}

.assistant__log {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mist);
}

.assistant__msg {
  max-width: 85%;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: var(--radius);
}
.assistant__msg--bot {
  align-self: flex-start;
  color: var(--navy);
  background: var(--white);
  border: 1px solid #DDE4E2;
}
.assistant__msg--user { align-self: flex-end; color: var(--white); background: var(--green); }
/* Status lines from the assistant service (waking up, rate limit, delivery failure). */
.assistant__msg--note {
  align-self: stretch;
  max-width: none;
  font-size: 13.5px;
  color: #5C4A12;
  background: #FBF6E4;
  border-left: 2px solid var(--gold);
  border-radius: 0 3px 3px 0;
}
.assistant__msg a { font-weight: 600; color: var(--green); }

.assistant__typing { display: inline-flex; gap: 4px; }
.assistant__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate);
  animation: assistant-blink 1.2s ease infinite;
}
.assistant__typing i:nth-child(2) { animation-delay: .2s; }
.assistant__typing i:nth-child(3) { animation-delay: .4s; }

.assistant__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant__chip {
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--green);
  background: var(--white);
  border: 1px solid var(--green);
  border-radius: 14px;
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
@media (hover: hover) {
  .assistant__chip:hover { color: var(--white); background: var(--green); }
}

.assistant__compose {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.assistant__input {
  flex: 1 1 0%;
  min-width: 0;
  max-height: 100px;
  padding: 10px 12px;
  font-size: 14px;
  resize: none;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.assistant__input:focus { outline: none; border-color: var(--green); }

.assistant__send {
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--white);
  background: var(--green);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
.assistant__send[aria-disabled="true"] { opacity: .6; cursor: wait; }
@media (hover: hover) {
  .assistant__send:hover { background: var(--green-dark); }
}

.assistant__foot {
  margin: 0;
  padding: 0 12px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

/* Restated over the Elementor kit's bare-<button> styles; see 05-form.css. */
.assistant-launcher.assistant-launcher,
.assistant-launcher.assistant-launcher:hover,
.assistant-launcher.assistant-launcher:focus { padding: 0 20px; background-color: var(--navy); }

.assistant__close.assistant__close,
.assistant__close.assistant__close:hover,
.assistant__close.assistant__close:focus { padding: 0; font-size: 16px; color: var(--slate); background-color: transparent; }

.assistant__chip.assistant__chip,
.assistant__chip.assistant__chip:hover,
.assistant__chip.assistant__chip:focus {
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--green);
  background-color: var(--white);
  border-radius: 14px;
}

.assistant__send.assistant__send,
.assistant__send.assistant__send:hover,
.assistant__send.assistant__send:focus { padding: 0 16px; font-size: 14.5px; background-color: var(--green); }

@media (hover: hover) {
  .assistant-launcher.assistant-launcher:hover { background-color: var(--navy-deep); }
  .assistant__close.assistant__close:hover { color: var(--white); background-color: rgba(255, 255, 255, .08); }
  .assistant__chip.assistant__chip:hover { color: var(--white); background-color: var(--green); }
  .assistant__send.assistant__send:hover { background-color: var(--green-dark); }
}

@media (max-width: 640px) {
  .assistant { left: 16px; right: 16px; bottom: 72px; width: auto; max-width: none; }
  .assistant-launcher { right: 16px; bottom: 16px; }
  .assistant__input { font-size: 16px; }
}

@media (max-width: 360px) {
  .assistant-launcher { height: 40px; padding: 0 14px; font-size: 14px; }
}

@media (max-height: 500px) {
  .assistant { top: 12px; bottom: 72px; height: auto; max-height: none; }
  .assistant__head { padding-block: 8px; }
  .assistant__foot { display: none; }
}