/* ==========================================================================
   components.css — reusable chrome: header, nav, mobile menu, footer, cursor,
   accordion, carousel, marquee, cards, contact-form.
   ========================================================================== */

/* ============================ HEADER / NAV ============================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--on-dark);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.site-header__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
}
.site-header.is-solid {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -22px rgba(0, 0, 0, 0.4);
}
.site-header.is-solid .site-header__scrim {
  opacity: 0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  position: relative;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.emblem {
  height: 46px;
  width: auto;
}
.site-header__logo {
  color: currentColor;
}

.site-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  list-style: none;
  padding: 0;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 1rem;
  color: currentColor;
  padding-block: 0.5rem;
  white-space: nowrap;
}
.site-nav__chev {
  width: 1em;
  height: 1em;
  transition: transform var(--dur-fast) var(--ease);
}
.site-nav__item.has-menu.is-open .site-nav__chev {
  transform: rotate(180deg);
}

/* anchor the absolutely-positioned dropdown to its own nav item, so
   left:50% + translateX(-50%) centres it under the item rather than
   under .site-header__inner (the previous positioned ancestor) */
.site-nav__item.has-menu {
  position: relative;
}

/* dropdown panel */
.site-nav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 250px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 0.6rem;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: var(--z-menu);
}
.site-nav__item.has-menu:hover .site-nav__menu,
.site-nav__item.has-menu.is-open .site-nav__menu,
.site-nav__item.has-menu:focus-within .site-nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.site-nav__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* row tints the panel to that section's identity colour via :has() */
.site-nav__menu-list li a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 9px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.site-nav__menu-list li a:hover {
  background: #F05A1E;
  color: #fff;
}
.site-nav__menu:has(li:hover) {
  box-shadow: 0 30px 60px -25px var(--tint, rgba(0, 0, 0, 0.45));
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}
.site-header__cta {
  padding: 0.8rem 1.25rem;
}

/* burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
body.menu-open .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .burger span:nth-child(2) {
  opacity: 0;
}
body.menu-open .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* mobile overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--black);
  color: var(--on-dark);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
}
.mobile-menu__list a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: #fff;
}
.mobile-menu__contact {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  color: var(--on-dark-soft);
}

@media (max-width: 860px) {
  .site-nav,
  .site-header__cta {
    display: none;
  }
  .burger {
    display: flex;
  }
}

/* ============================ FOOTER ============================ */
.site-footer {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2.5rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: 2.5rem;
}
.site-footer__logo {
  height: clamp(64px, 8vw, 96px);
  color: #fff;
}
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.site-footer__row {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--on-dark);
}
.site-footer__row .ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.site-footer__row span {
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__row:hover span {
  color: var(--accent);
}
.site-footer__social {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--dur-fast) var(--ease);
}
.site-footer__social svg {
  width: 18px;
  height: 18px;
}
.site-footer__social:hover {
  background: var(--accent);
}
.site-footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.site-footer__links a {
  color: var(--on-dark);
}
.site-footer__base {
  border-top: 1px solid var(--line-dark);
  padding-top: 2rem;
  text-align: center;
  color: var(--on-dark-soft);
  font-size: var(--fs-label);
}

@media (max-width: 760px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    text-align: left;
  }
}

/* ============================ ACCORDION ============================ */
.accordion__item {
  border-bottom: 1px solid var(--line-dark);
}
.accordion__head {
  margin: 0;
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0 0.5rem;
  text-align: left;
  color: inherit;
}
.accordion__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--on-dark);
  letter-spacing: var(--tracking-snug);
}
.accordion__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.accordion__icon svg {
  width: 100%;
  height: 100%;
}
.accordion__item.is-open .accordion__icon {
  transform: rotate(90deg);
}
.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.accordion__item.is-open .accordion__body {
  grid-template-rows: 1fr;
}
.accordion__body-inner {
  overflow: hidden;
}
.accordion__body-inner p {
  color: var(--on-dark-soft);
  max-width: 70ch;
  padding-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-top: 0.4rem;
}
/* no-JS / reduced-motion: show all bodies */
.no-js .accordion__body,
html:not(.js) .accordion__body {
  grid-template-rows: 1fr;
}

/* ============================ MARQUEE ============================ */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-right: clamp(2.5rem, 6vw, 5rem);
  list-style: none;
  margin: 0;
}
.marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.marquee__item img {
  height: clamp(55px, 7vw, 78px);
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.marquee__item img:hover {
  opacity: 1;
  filter: grayscale(0);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* reduced-motion / static: drop the duplicate group and lay one set out evenly
   so it reads like the comp's static logo strip (no scroll). */
.marquee.is-static .marquee__group[aria-hidden],
.marquee.is-static .marquee__group[aria-hidden="true"] {
  display: none;
}
.marquee.is-static .marquee__track {
  animation: none;
  width: 100%;
}
.marquee.is-static .marquee__group {
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: 0;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__group[aria-hidden],
  .marquee__group[aria-hidden="true"] {
    display: none;
  }
  .marquee__track {
    animation: none;
    width: 100%;
  }
  .marquee__group {
    flex: 1;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding-right: 0;
  }
}

/* ============================ CAROUSEL ============================ */
.carousel__viewport {
  overflow: hidden;
}
.carousel--slide .carousel__track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
.carousel--slide .carousel__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * clamp(1.25rem, 2.5vw, 2rem)) / var(--per-view));
}
.carousel--fade .carousel__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.carousel--fade .carousel__slide {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.carousel--fade .carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}
.carousel__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: inherit;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.carousel__btn:hover {
  color: var(--accent);
}
.carousel__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.carousel__btn-ico svg {
  width: 18px;
  height: 18px;
}
.carousel__meta {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  min-width: 5.5em;
  text-align: center;
  color: var(--ink-3);
}
.carousel__progress {
  height: 2px;
  background: var(--line);
  margin: 1rem auto 0;
  max-width: 320px;
  border-radius: 2px;
  overflow: hidden;
}
.carousel__progress span {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.carousel__dot.is-active {
  background: var(--accent);
  transform: scale(1.15);
}

/* ============================ FEATURE CARD ============================ */
.feature-card {
  background: var(--paper-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
}
.feature-card__icon {
  color: var(--accent);
  width: 56px;
  height: 56px;
  margin-bottom: 0.5rem;
}
.feature-card__icon svg,
.feature-card__icon img {
  width: 100%;
  height: 100%;
}
.feature-card__icon img {
  object-fit: contain;
  object-position: left center;
}
.feature-card__body {
  color: var(--ink-2);
  flex: 1 1 auto;
}
.feature-card__link {
  margin-top: 0.5rem;
}

/* ============================ CONTACT FORM ============================ */
.contact-form__heading {
  font-size: var(--fs-h3);
  margin-bottom: 1.5rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field__label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.field__req {
  color: var(--accent);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 110px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field__select {
  position: relative;
}
.field__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}
.field__chev {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  pointer-events: none;
}
.contact-form__foot {
  margin-top: 1.5rem;
}
.contact-form__status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-weight: 600;
}
.contact-form__status.is-ok {
  background: var(--accent-tint);
  color: var(--accent-deep);
}

/* grid layout (Request Availability — 4 columns) */
.contact-form--grid .contact-form__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.contact-form--grid .field--full {
  grid-column: 1 / -1;
}

/* stack layout (Enquire about speaking) */
.contact-form--stack .contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .contact-form--grid .contact-form__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .contact-form--grid .contact-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================ SEO COPY MODULES ============================
 * Layouts used by the "Page Modules" template on SEO/keyword pages. The first
 * module (.seo-intro) is the page-title banner — it needs header clearance
 * because the site-header is fixed and there is no full-bleed hero above it on
 * these pages. It mirrors the home hero: black base + orange radial glow, white
 * title. The intro copy renders in the light .seo-intro-after section below it.
 */
.m-seo-intro {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h, 84px) + var(--section, 5rem));
}
.seo-intro__glow {
  position: absolute;
  inset: 0;
  background: var(--hero-glow);
  pointer-events: none;
}
.m-seo-intro .seo-intro__inner {
  position: relative;
  z-index: 1;
}
.seo-intro__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0;
  color: #fff;
}
.seo-intro-after {
  background: var(--paper);
}
.seo-intro__body {
  color: var(--ink-2);
  font-size: var(--fs-lead);
}
.seo-intro__body p + p {
  margin-top: 1.1rem;
}
.seo-intro__body a,
.seo-section__body a,
.seo-bullets__text a,
.seo-cta__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.seo-intro__body a:hover,
.seo-section__body a:hover,
.seo-bullets__text a:hover,
.seo-cta__body a:hover {
  text-decoration: none;
}
.seo-intro__media {
  margin-top: 2rem;
  border-radius: 18px;
  overflow: hidden;
}
.seo-intro__media img {
  width: 100%;
  height: auto;
  display: block;
}

.seo-section__title {
  font-size: var(--fs-h2);
  margin: 0 0 1rem;
}
.seo-section__body {
  color: var(--ink-2);
}
.seo-section__body p + p,
.seo-bullets__intro p + p,
.seo-cta__body p + p {
  margin-top: 1rem;
}

.seo-bullets__title {
  font-size: var(--fs-h2);
  margin: 0 0 1rem;
}
.seo-bullets__intro {
  color: var(--ink-2);
  margin-bottom: 1.25rem;
}
.seo-bullets__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.seo-bullets__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  color: var(--ink);
  font-size: var(--fs-lead);
}
.seo-bullets__check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.seo-bullets__check svg {
  width: 100%;
  height: 100%;
}

.seo-faq__title {
  font-size: var(--fs-h2);
  margin: 0 0 1.25rem;
  text-align: left;
}
/* Make the FAQ accordion blend with the rest of the SEO sections (the
 * homepage uses .topics on a dark background; ours sits on .paper). */
.m-seo-faq .accordion__item {
  background: transparent;
}
.m-seo-faq .accordion__trigger {
  color: var(--ink);
}

.seo-cta {
  background: var(--paper-soft);
}
.seo-cta__title {
  font-size: var(--fs-h2);
  margin: 0 0 1rem;
}
.seo-cta__body {
  color: var(--ink-2);
  font-size: var(--fs-lead);
}
.seo-cta__actions {
  margin-top: 1.5rem;
}