/* ==========================================================================
   LingoPro | Language Training & Study Abroad
   Design tokens mirror the Visaland reference theme.
   ========================================================================== */

:root {
  /* Sampled from the LingoPro logo artwork. */
  --theme: #c5202c;
  --theme-dark: #9e1823;
  --theme-soft: #fbeaec;
  --dark: #16171a;
  --dark-2: #1c2539;
  --text: #5e5f63;
  --text-muted: #8a8c94;
  --border: #eeeff4;
  --border-2: #d7d7d7;
  --bg: #f5f5f7;
  --bg-2: #f8f8f8;
  --white: #fff;
  --star: #f09815;

  --container: 1300px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
  --shadow-sm: 0 4px 16px rgba(22, 23, 26, 0.06);
  --transition: 0.3s ease;
  --header-h: 96px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 16px;
  color: var(--dark);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(38px, 5.4vw, 76px); }
h2 { font-size: clamp(30px, 3.4vw, 48px); }
h3 { font-size: clamp(22px, 2vw, 30px); }
h4 { font-size: 22px; }
h5 { font-size: 19px; }

p { margin: 0 0 16px; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

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

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

/* Layout ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 110px 0;
}

.section--tight { padding: 80px 0; }
.section--bg { background: var(--bg); }
.section--dark { background: var(--dark); color: rgba(255, 255, 255, 0.72); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--white); }

.grid {
  display: grid;
  gap: 30px;
}

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

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

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

/* Section heading --------------------------------------------------------- */

.sec-head {
  max-width: 780px;
  margin: 0 auto 60px;
}

.sec-head--left {
  margin-left: 0;
  margin-right: 0;
}

/* The small illustration that sits in front of a heading. One flat SVG tile per
   topic, drawn in the brand palette, so it needs no colour handling here and
   reads the same on white, grey and dark bands. */
.head-pic {
  /* inline-block, not block, so the tile inherits whatever text-align its
     container already has. That centres it under .text-center section heads and
     inside the contact form panels, and leaves it flush left in the split
     sections, without needing a modifier class at each call site. The eyebrow
     that follows is display:block, so it still starts its own line. */
  display: inline-block;
  vertical-align: top;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(22, 23, 26, 0.08);
  transition: transform var(--transition);
}

.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--theme);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sec-title em {
  font-style: italic;
  font-weight: 700;
}

.sec-text {
  margin-bottom: 0;
  color: var(--text);
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--theme);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn:hover {
  background: var(--theme-dark);
  transform: translateY(-2px);
}

.btn svg { width: 16px; height: 16px; flex: none; }

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

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

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

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

.btn--dark {
  background: var(--dark);
}

.btn--dark:hover {
  background: var(--theme);
}

/* Pill button with trailing circular arrow (header CTA) */
.btn-quote {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--dark);
  font-weight: 600;
  white-space: nowrap;
}

.btn-quote span.dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  transition: transform var(--transition);
}

.btn-quote span.dot svg { width: 14px; height: 14px; }
.btn-quote:hover { color: var(--theme); }
.btn-quote:hover span.dot { transform: translateX(4px); }

/* Link with red circular arrow (cards) */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--dark);
  font-weight: 600;
}

.read-more i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  transition: transform var(--transition);
}

.read-more i svg { width: 12px; height: 12px; }
.read-more:hover { color: var(--theme); }
.read-more:hover i { transform: translateX(4px); }

/* Top bar ----------------------------------------------------------------- */

.topbar {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.topbar__list {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.topbar__list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__list svg {
  width: 16px;
  height: 16px;
  color: var(--theme);
  flex: none;
}

.topbar a:hover { color: var(--white); }

.socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.socials a {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition);
}

.socials svg { width: 17px; height: 17px; }
/* Brand-coloured topbar socials (Google already ships its multicolour "G";
   Instagram carries its gradient inline in the markup). */
.socials a[aria-label*="Facebook"] { color: #1877f2; }
.socials a[aria-label*="LinkedIn"] { color: #0a66c2; }
.socials a:hover { opacity: 0.72; }

.topbar__right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.topbar__divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.18);
}

/* Header ------------------------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}

.header.is-stuck {
  box-shadow: 0 6px 24px rgba(22, 23, 26, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
}

/* The logo ships in two variants: logo.png reads on light surfaces (header,
   drawer), logo-full.png carries the white type and the tagline for dark ones
   (footer). Height is fixed and width follows the aspect ratio. */
.logo {
  display: flex;
  align-items: center;
  flex: none;
}

.logo img {
  display: block;
  height: 52px;
  width: auto;
}

.logo--footer img { height: 84px; }

.nav { margin-left: 24px; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__list > li { position: relative; }

.nav__list > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 34px 0;
  color: var(--dark);
  font-weight: 600;
}

.nav__list > li > a:hover,
.nav__list > li.is-active > a {
  color: var(--theme);
}

.nav__list > li > a svg { width: 11px; height: 11px; opacity: 0.7; }

.submenu {
  position: absolute;
  top: 100%;
  left: -22px;
  min-width: 230px;
  padding: 12px 0;
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}

.nav__list > li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a {
  display: block;
  padding: 9px 22px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.submenu a:hover {
  color: var(--theme);
  padding-left: 28px;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.header__phone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.header__phone .icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--theme);
  border-radius: 50%;
  color: var(--theme);
  flex: none;
}

.header__phone .icon svg { width: 20px; height: 20px; }
.header__phone small {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.header__phone strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--dark);
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.header__phone-label { cursor: pointer; }

.header__phone-caret {
  width: 11px;
  height: 11px;
  opacity: 0.6;
  transition: transform var(--transition);
}

.header__phone:hover .header__phone-caret,
.header__phone:focus-within .header__phone-caret {
  transform: rotate(180deg);
}

/* Office-hours popover: the header shows a compact "Office hours" trigger and
   reveals the full timings on hover/focus, so the hours never widen the bar. */
.header__hours {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  min-width: 248px;
  padding: 16px 18px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}

.header__hours::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.header__phone:hover .header__hours,
.header__phone:focus-within .header__hours {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__hours b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--dark);
  font-size: 14px;
}

.header__hours b span {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(197, 32, 44, 0.1);
  color: var(--theme);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.header__hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

.header__hours-row + .header__hours-row { margin-top: 6px; }
.header__hours-row i { color: var(--text-muted); font-style: normal; }
.header__hours-row em { color: var(--dark); font-style: normal; font-weight: 600; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  color: var(--dark);
}

.nav-toggle svg { width: 22px; height: 22px; margin: 0 auto; }

/* Mobile drawer ----------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 200;
  width: min(360px, 88vw);
  padding: 26px 24px 40px;
  background: var(--white);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition);
}

.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.drawer__close {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: var(--dark);
}

.drawer__close svg { width: 20px; height: 20px; margin: 0 auto; }

.drawer__list > li { border-bottom: 1px solid var(--border); }

.drawer__list > li > a,
.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: none;
  color: var(--dark);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.drawer__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
}

.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.drawer__sub {
  display: none;
  padding: 0 0 12px 14px;
}

.drawer__sub.is-open { display: block; }

.drawer__sub a {
  display: block;
  padding: 8px 0;
  color: var(--text);
  font-size: 15px;
}

.drawer__sub a:hover { color: var(--theme); }

.drawer__cta { margin-top: 28px; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(22, 23, 26, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.overlay.is-open { opacity: 1; visibility: visible; }

/* Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}

.hero__slide {
  position: relative;
  display: none;
  min-height: 720px;
  padding: 120px 0;
  background-size: cover;
  background-position: center;
}

.hero__slide.is-active {
  display: flex;
  align-items: center;
  animation: heroFade 0.8s ease both;
}

@keyframes heroFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 12, 14, 0.94) 0%,
    rgba(11, 12, 14, 0.82) 42%,
    rgba(11, 12, 14, 0.35) 100%
  );
}

/* diagonal accent bars, top right */
.hero__stripes {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 420px;
  height: 420px;
  pointer-events: none;
}

.hero__stripes span {
  position: absolute;
  height: 34px;
  border-radius: 40px;
  background: var(--theme);
  transform: rotate(45deg);
  transform-origin: right center;
}

.hero__stripes span:nth-child(1) { top: 90px; right: 0; width: 240px; }
.hero__stripes span:nth-child(2) { top: 170px; right: 20px; width: 300px; }
.hero__stripes span:nth-child(3) {
  top: 250px;
  right: 40px;
  width: 260px;
  height: 4px;
  background: rgba(255, 255, 255, 0.85);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  color: var(--white);
}

.hero__badge {
  display: inline-block;
  margin-bottom: 26px;
  padding: 11px 24px;
  border-radius: 4px;
  background: var(--theme);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}

/* Only the first slide carries the page's <h1>. The other slides use <p> so
   the page has a single top-level heading, hence the explicit weight here. */
.hero__title {
  margin-bottom: 22px;
  color: var(--white);
  font-size: clamp(40px, 5.6vw, 78px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero__text {
  max-width: 560px;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__dots {
  position: absolute;
  bottom: 42px;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 14px;
  transform: translateX(-50%);
}

.hero__dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}

.hero__dots button.is-active {
  background: var(--theme);
  box-shadow: 0 0 0 5px rgba(197, 32, 44, 0.35);
}

/* Page banner (inner pages) ----------------------------------------------- */

.page-banner {
  position: relative;
  padding: 120px 0;
  background: var(--dark) center/cover;
  color: var(--white);
  text-align: center;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 14, 0.78);
}

.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: var(--white); margin-bottom: 12px; }

.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.breadcrumb a:hover { color: var(--theme); }
.breadcrumb span[aria-current] { color: var(--theme); }

/* About ------------------------------------------------------------------- */

.about__media {
  position: relative;
  padding: 0 0 70px 60px;
}

.about__img-main {
  border-radius: 4px;
  width: 100%;
  object-fit: cover;
}

/* Red square accent and red vertical bar removed — mascot media stays frame-free. */
.about__frame { display: none; }

.about__img-sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  border: 8px solid var(--white);
  border-radius: 4px;
  z-index: 2;
  object-fit: cover;
}

.rings {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 34px 0;
}

.ring {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ring__circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(
    var(--theme) calc(var(--value) * 1%),
    var(--border) 0
  );
}

.ring__circle::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--white);
}

.ring__circle b {
  position: relative;
  z-index: 1;
  color: var(--dark);
  font-size: 24px;
  font-weight: 700;
}

.ring p {
  margin: 0;
  color: var(--dark);
  font-weight: 700;
  line-height: 1.4;
}

.check-list {
  display: grid;
  gap: 14px;
  margin-bottom: 34px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--dark);
  font-weight: 600;
}

.check-list svg {
  width: 18px;
  height: 18px;
  margin-top: 5px;
  color: var(--theme);
  flex: none;
}

.about__footer {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.person__initials {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .5px;
}

.person b { display: block; color: var(--dark); }
.person small { color: var(--theme); font-weight: 600; }

/* Founder ----------------------------------------------------------------- */

/* The founder band runs on --dark, where .person's near-black name would
   disappear. */
.section--dark .person b { color: var(--white); }

/* Both default to the near-black --dark, which is invisible on this band. */
.section--dark .check-list li { color: var(--white); }

/* Award card in the right-hand column. */
.founder-card {
  padding: 46px 40px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: center;
}

.founder-card__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--theme-soft);
  color: var(--theme);
}

.founder-card__icon svg { width: 40px; height: 40px; }

.founder-card__year {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 16px;
  border-radius: 100px;
  background: var(--theme);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The card sits on a --dark section, which paints h3 white. It has a white
   background of its own, so the heading has to be painted back. */
.founder-card h3 { margin-bottom: 12px; color: var(--dark); font-size: 26px; }
.founder-card p { margin: 0; font-size: 15px; }

.founder-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.founder-card__stats b {
  display: block;
  margin-bottom: 6px;
  color: var(--theme);
  font-size: 34px;
  line-height: 1;
}

.founder-card__stats span { font-size: 14px; }

/* Service cards ----------------------------------------------------------- */

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 30px;
  border-radius: var(--radius);
  overflow: hidden;
  /* White with a hairline rather than the old grey fill: these cards sit on
     both white and .section--bg grey bands, and a grey card on a grey band is
     invisible now that the photo no longer draws its edge. */
  background: var(--white);
  border: 1px solid var(--border);
  transition: border-color var(--transition), transform var(--transition),
    box-shadow var(--transition);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.service-card h3 { font-size: 24px; margin-bottom: 12px; }
.service-card p { margin-bottom: 0; }

.service-card .head-pic { margin-bottom: 18px; }
.service-card:hover .head-pic { transform: rotate(-5deg) scale(1.07); }

/* Currently unused. Each card used to end with a stock photo; now that it opens
   with a topic illustration the second image was redundant filler. Rule kept so
   restoring a real photo per card is markup-only. */
.service-card__img {
  margin-top: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius) var(--radius) 0 0;
  object-fit: cover;
  width: 100%;
}

/* Brand strip ------------------------------------------------------------- */

/* Currently unused — the "trusted by" marquee was pulled from the homepage
   until there are real partner names to put in it. Rules kept so restoring the
   section is markup-only. Countries then goes back to .section--bg, otherwise
   two grey bands end up adjacent. */

.brands__head {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 40px;
  color: var(--dark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brands__head::before,
.brands__head::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border-2);
}

.brands__track {
  display: flex;
  align-items: center;
  gap: 70px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brands__row {
  display: flex;
  align-items: center;
  gap: 70px;
  flex: none;
  animation: marquee 32s linear infinite;
}

.brands__row span {
  color: #9a9ba1;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 70px)); }
}

/* Country cards ----------------------------------------------------------- */

.country-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.country-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.country-card__flag {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  font-size: 30px;
  line-height: 1;
  background: var(--bg);
}

.country-card h4 { margin-bottom: 2px; font-size: 20px; }
.country-card p { margin: 0; font-size: 15px; }

/* Video block ------------------------------------------------------------- */

.video {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 540px;
  background: var(--dark) center/cover;
}

.video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 14, 0.35);
}

.video__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--theme);
  cursor: pointer;
  transition: transform var(--transition);
}

.video__play::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: pulse 2.4s ease-out infinite;
}

.video__play svg { width: 30px; height: 30px; margin-left: 5px; }
.video__play:hover { transform: scale(1.06); }

@keyframes pulse {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Training cards ---------------------------------------------------------- */

.training-card {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.training-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.training-card__img {
  width: 150px;
  height: 150px;
  flex: none;
  margin-left: -68px;
  border: 6px solid var(--white);
  border-radius: 50%;
  /* These hold the exam illustrations, not photographs. "cover" would crop the
     tile's rounded corners against the circular mask and push the artwork past
     the edge, so inset it with "contain" instead and paint the disc in the same
     soft pink the tile already uses, which makes the two read as one shape. */
  object-fit: contain;
  padding: 26px;
  background: var(--theme-soft);
  box-shadow: var(--shadow-sm);
}

.training-card h3 { font-size: 24px; margin-bottom: 8px; }
.training-card p { margin-bottom: 16px; font-size: 15px; }

/* Why choose us ----------------------------------------------------------- */

.feature {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 12px;
  background: var(--theme-soft);
  color: var(--theme);
}

.feature__icon svg { width: 28px; height: 28px; }
.feature h4 { margin-bottom: 6px; font-size: 21px; }
.feature p { margin: 0; font-size: 15px; }

.why__media {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
}

.why__media img { border-radius: var(--radius); width: 100%; object-fit: cover; }
.why__col-a { position: relative; }
.why__col-a img { aspect-ratio: 3 / 4; }

.why__col-b { display: grid; gap: 20px; }
.why__col-b img { aspect-ratio: 4 / 3; }

.why__badge {
  position: absolute;
  left: 12%;
  bottom: -34px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--theme);
  color: var(--white);
  box-shadow: var(--shadow);
}

.why__badge b {
  display: block;
  font-size: 22px;
  line-height: 1.25;
}

/* Stats ------------------------------------------------------------------- */

.stat {
  position: relative;
  padding: 66px 24px 34px;
  margin-top: 48px;
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat__icon {
  position: absolute;
  top: -48px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--white);
  color: var(--theme);
  transform: translateX(-50%);
  box-shadow: var(--shadow-sm);
}

.stat__icon svg { width: 42px; height: 42px; }

.stat b {
  display: block;
  color: var(--dark);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.stat p { margin: 8px 0 0; }

/* Testimonials ------------------------------------------------------------ */

.quote-card {
  height: 100%;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.stars { display: flex; gap: 4px; margin-bottom: 18px; color: var(--star); }
.stars svg { width: 18px; height: 18px; }

.quote-card p { margin-bottom: 26px; }

.quote-card__tag {
  position: relative;
  margin: 0 -32px -34px;
  padding: 18px 32px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--theme);
  color: var(--white);
  font-weight: 600;
}

.quote-card__tag::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 32px;
  border: 9px solid transparent;
  border-bottom-color: var(--theme);
  border-top: 0;
}

.quote-card__tag small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
}

.slider {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.slider::-webkit-scrollbar { display: none; }

.slider > * {
  flex: 0 0 calc((100% - 60px) / 3);
  scroll-snap-align: start;
}

@media (max-width: 992px) {
  .slider > * { flex-basis: calc((100% - 30px) / 2); }
}

@media (max-width: 768px) {
  .slider > * { flex-basis: 100%; }
}

.dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 46px;
  padding: 12px 26px;
  width: fit-content;
  margin-inline: auto;
  border: 1px dashed rgba(197, 32, 44, 0.5);
  border-radius: 40px;
}

.dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--theme);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition);
}

.dots button.is-active { background: var(--theme); }

/* CTA banner -------------------------------------------------------------- */

.cta {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 48px 52px;
  border-radius: var(--radius-lg);
  background: var(--theme);
  color: var(--white);
}

.cta > svg { width: 62px; height: 62px; flex: none; }
.cta h2 { color: var(--white); margin-bottom: 6px; font-size: clamp(26px, 2.8vw, 40px); }
.cta p { margin: 0; color: rgba(255, 255, 255, 0.85); }
.cta__body { flex: 1 1 380px; }

/* Process ----------------------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}

.process::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 12%;
  right: 12%;
  border-top: 2px dashed rgba(197, 32, 44, 0.4);
}

.step { position: relative; text-align: center; }

.step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--white);
  color: var(--theme);
  box-shadow: var(--shadow-sm);
}

.step__icon svg { width: 40px; height: 40px; }

.step__num {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.step h4 { margin-bottom: 8px; font-size: 21px; }
.step p { margin: 0; font-size: 15px; }

/* Contact ----------------------------------------------------------------- */

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.contact-split__form {
  position: relative;
  padding: 90px 0;
  background: var(--dark) center/cover;
  color: var(--white);
}

.contact-split__form::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(197, 32, 44, 0.94) 0%,
    rgba(197, 32, 44, 0.78) 100%
  );
}

.contact-split__inner {
  position: relative;
  z-index: 2;
  max-width: calc(var(--container) / 2);
  margin-left: auto;
  padding: 0 40px 0 24px;
  width: 100%;
}

.contact-split__form .eyebrow { color: rgba(255, 255, 255, 0.85); }
.contact-split__form h2 { color: var(--white); margin-bottom: 30px; }

.contact-split__map { min-height: 100%; }
.contact-split__map iframe { width: 100%; height: 100%; min-height: 620px; border: 0; display: block; }

/* Map removed for now. With a single child the panel spans the full width, so
   the form is centred in a readable column instead of hugging the left edge.
   Restoring the map means deleting the --full class from the section. */
.contact-split--full { grid-template-columns: 1fr; }

.contact-split--full .contact-split__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* Heading, note, status and submit button sit on the centre line. Fields and
   their error messages are pulled back to the left so placeholder text and
   validation messages read normally. */
.contact-split--full .contact-split__inner .field,
.contact-split--full .contact-split__inner .form-error { text-align: left; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-grid .full { grid-column: 1 / -1; }

.field {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--white);
  color: var(--dark);
  font-size: 15px;
}

.field::placeholder { color: var(--text-muted); }
.field:focus { outline: 0; border-color: var(--dark); }
.field[aria-invalid="true"] { border-color: var(--dark); background: #fff5f6; }

textarea.field { min-height: 130px; resize: vertical; }
select.field { appearance: none; cursor: pointer; }

.form-error {
  display: block;
  margin-top: 6px;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  min-height: 0;
}

.form-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* Spam honeypot. Hidden from people, visible to naive bots — anything that
   fills it in is discarded before the lead is sent. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-weight: 600;
}

/* Standalone contact page cards */
.info-card {
  padding: 34px 30px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.info-card__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--theme-soft);
  color: var(--theme);
}

.info-card__icon svg { width: 28px; height: 28px; }
.info-card h4 { margin-bottom: 10px; }
.info-card p { margin: 0; }
.info-card a:hover { color: var(--theme); }

/* Blog -------------------------------------------------------------------- */

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.post-card__media { position: relative; }

.post-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.post-card__date {
  position: absolute;
  top: 0;
  left: 22px;
  width: 62px;
  text-align: center;
  color: var(--white);
  font-weight: 700;
  line-height: 1.15;
}

.post-card__date b {
  display: block;
  padding: 10px 0 6px;
  background: var(--theme);
  font-size: 24px;
}

.post-card__date span {
  display: block;
  padding: 5px 0;
  background: var(--dark);
  font-size: 14px;
}

.post-card__body { padding: 24px 26px 30px; }

.post-card__meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
}

.post-card__meta span { display: flex; align-items: center; gap: 7px; }
.post-card__meta svg { width: 15px; height: 15px; color: var(--theme); }

.post-card h3 { font-size: 21px; margin-bottom: 16px; }
.post-card h3 a:hover { color: var(--theme); }

/* FAQ --------------------------------------------------------------------- */

.faq { display: grid; gap: 16px; }

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: none;
  color: var(--dark);
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq__q svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--theme);
  transition: transform var(--transition);
}

.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }

.faq__a { display: none; padding: 0 26px 24px; }
.faq__a.is-open { display: block; }
.faq__a p { margin: 0; }

/* Table ------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.table th,
.table td {
  padding: 20px 26px;
  border-bottom: 1px solid var(--border);
}

.table thead th {
  background: var(--dark);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg); }
.table td b { color: var(--dark); }

/* Footer ------------------------------------------------------------------ */

.footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.68);
}

.footer__top { padding: 90px 0 70px; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 40px;
}

.footer .logo { color: var(--white); margin-bottom: 22px; }
.footer h4 { color: var(--white); margin-bottom: 24px; font-size: 20px; }

.footer__links li + li { margin-top: 12px; }

.footer__links a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__links svg { width: 13px; height: 13px; color: var(--theme); flex: none; }
.footer__links a:hover { color: var(--white); }

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.footer__socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--transition), color var(--transition);
}

.footer__socials svg { width: 17px; height: 17px; }
.footer__socials a:hover { background: var(--theme); color: var(--white); }

.footer__contact li + li { margin-top: 18px; }
.footer__contact b { display: block; color: var(--white); margin-bottom: 4px; }
.footer__contact a:hover { color: var(--theme); }

.footer__bottom {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 15px;
}

.footer__bottom nav { display: flex; gap: 24px; }
.footer__bottom a:hover { color: var(--white); }

/* Back to top ------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--theme);
  border-radius: 50%;
  background: var(--white);
  color: var(--theme);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--transition), visibility var(--transition),
    transform var(--transition), background var(--transition), color var(--transition);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--theme); color: var(--white); }
.to-top svg { width: 20px; height: 20px; }

/* Reveal on scroll -------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .brands__row { animation: none; }
  .video__play::after { animation: none; }
  .takeoff { display: none; }
  /* The trail still runs, since it reports real progress. Only the bob goes. */
  .flight__plane { animation: none; }
  .head-pic, .service-card:hover .head-pic { transition: none; transform: none; }
}

/* Brand watermark --------------------------------------------------------- */

/* One faint LingoPro mark pinned to the viewport on every page. It is a CSS
   mask rather than a plain <img> because the page scrolls through white, grey,
   near-black and brand-red bands: a fixed-colour PNG would vanish on at least
   one of them. The difference blend below reads whatever is behind and always
   lands a little off it, so the mark stays present everywhere without any JS
   sampling the backdrop. */
.watermark {
  position: fixed;
  right: -30px;
  bottom: 24px;
  z-index: 1;
  width: 380px;
  height: 136px;
  pointer-events: none;
  /* difference shifts the backdrop by the fill value in both directions, so a
     mid-dark grey lands the same distance off white as it does off near-black.
     Opacity then scales that shift down to roughly 15 levels, which is legible
     as a mark but never competes with the text it passes behind. */
  background-color: #2e2e2e;
  mix-blend-mode: difference;
  opacity: 0.33;
  -webkit-mask: url("../img/watermark.png") no-repeat center / contain;
  mask: url("../img/watermark.png") no-repeat center / contain;
}

@media (max-width: 991px) {
  .watermark { width: 220px; height: 79px; bottom: 16px; right: -20px; }
}

@media print {
  .watermark { display: none; }
}

/* Flight progress --------------------------------------------------------- */

/* Shown while the browser is fetching the next page or posting a lead: a red
   trail across the top of the viewport with the logo aircraft at its nose. */
.flight {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  /* Tall enough to hold the aircraft, not just the 3px trail. Sizing this to
     the trail alone puts half the plane above the viewport, where it is cut
     off. The extra room over the plane's own height absorbs the bob and the
     rotated bounding box. */
  height: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.flight.is-flying { opacity: 1; }

.flight__trail {
  height: 3px;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, rgba(197, 32, 44, 0) 0%, var(--theme) 60%);
  /* Width is driven from JS so the trail can ease toward 90% and then snap to
     100% when the page actually commits, rather than lying about progress. */
  transition: width 0.35s ease-out;
}

.flight__plane {
  position: absolute;
  /* The bob lifts this by 3px and the -5deg rotation grows the bounding box by
     roughly 2px more, so anything under 6px here clips the nose against the top
     of the viewport at the peak of the cycle. */
  top: 6px;
  left: 0;
  width: 42px;
  height: auto;
  /* Rides the nose of the trail; JS moves left by the same percentage it sets
     as the trail width. */
  transform: translate(-46%, 0);
  transition: left 0.35s ease-out;
  animation: flight-bob 1.1s ease-in-out infinite;
}

@keyframes flight-bob {
  0%, 100% { transform: translate(-46%, 0) rotate(0deg); }
  50% { transform: translate(-46%, -3px) rotate(-5deg); }
}

/* Take-off on click ------------------------------------------------------- */

/* A single aircraft spawned at the pointer and flown up and to the right. JS
   removes the node on animationend, so nothing accumulates in the DOM. */
.takeoff {
  position: fixed;
  z-index: 250;
  width: 34px;
  height: auto;
  pointer-events: none;
  will-change: transform, opacity;
  animation: takeoff 0.75s cubic-bezier(0.3, 0, 0.5, 1) forwards;
}

@keyframes takeoff {
  0% { transform: translate(-50%, -50%) scale(0.55) rotate(6deg); opacity: 0; }
  18% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + 130px), calc(-50% - 96px)) scale(1) rotate(-14deg);
    opacity: 0;
  }
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1200px) {
  .nav__list { gap: 24px; }
  .header__inner { gap: 20px; }
  .header__phone { display: none; }
  .training-card__img { margin-left: -50px; width: 128px; height: 128px; }
}

@media (max-width: 1080px) {
  :root { --header-h: 82px; }
  .nav,
  .header__right .btn-quote { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .header__right { gap: 16px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .process::before { display: none; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .section { padding: 80px 0; }
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
  .hero__slide { min-height: 620px; padding: 100px 0; }
  .hero__stripes { display: none; }
  .about__media { padding: 0 0 60px 40px; margin-bottom: 46px; }
  .contact-split { grid-template-columns: 1fr; }
  .contact-split__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
  .contact-split__map iframe { min-height: 400px; }
  .topbar__inner { justify-content: center; }
  .topbar__list--left { display: none; }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .sec-head { margin-bottom: 40px; }
  .grid-4 { grid-template-columns: 1fr; }
  .training-card { flex-direction: column; text-align: center; padding: 30px; }
  .training-card__img { margin: -74px 0 0; }
  .why__media { grid-template-columns: 1fr; }
  .why__badge { position: static; margin-top: 20px; }
  .cta { padding: 34px 26px; text-align: center; justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__bottom .container { justify-content: center; text-align: center; }
  .process { grid-template-columns: 1fr; }
  .page-banner { padding: 80px 0; }
  .rings { gap: 26px; }
  .brands__head { flex-direction: column; gap: 14px; white-space: normal; text-align: center; }
  .brands__head::before, .brands__head::after { align-self: stretch; flex: none; }
}

@media (max-width: 520px) {
  .topbar { display: none; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .stat b { font-size: 40px; }
}

/* ===========================================================================
   Lina cut-outs — frame-free transparent mascot art
   ---------------------------------------------------------------------------
   Decorative characters dropped into empty gutters. No borders, boxes or
   circles: the art is a transparent PNG that sits directly on the section.
   Each figure hides on narrower screens so it never crowds the copy.
   ========================================================================= */

/* Hero — figure stands in the empty right half of the dark banner. Sits in
   its own full-bleed layer so it persists across all three slides, anchored
   to the right edge of the content container and to the hero floor. */
.hero__figure {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero__figure .container {
  position: relative;
  height: 100%;
}
.hero__figure img {
  position: absolute;
  right: 10px;
  bottom: 0;
  height: 84%;
  max-height: 560px;
  width: auto;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.45));
}
@media (max-width: 1200px) {
  .hero__figure img { right: 0; height: 72%; opacity: 0.95; }
}
@media (max-width: 991px) {
  .hero__figure { display: none; }
}

/* Left-gutter figure — used beside centred columns (e.g. the contact FAQ).
   Anchored to the container's left edge and the section floor; the copy keeps
   a higher stacking context so nothing is ever obscured. */
.section--figleft { position: relative; overflow: hidden; }
.section--figleft > .container { position: relative; z-index: 2; }
.fig-left {
  position: absolute;
  bottom: 0;
  left: max(12px, calc(50% - 636px));
  height: 74%;
  max-height: 430px;
  width: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 18px 30px rgba(20, 23, 26, 0.16));
}
@media (max-width: 1200px) {
  .fig-left { display: none; }
}

/* Interior page banners — hero-style figure standing in the empty right margin
   of the dark banner, feet clipped to the banner floor. */
.page-banner--fig { overflow: hidden; }
.page-banner__fig {
  position: absolute;
  right: max(12px, calc(50% - 640px));
  bottom: 0;
  height: 90%;
  max-height: 300px;
  width: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.4));
}
@media (max-width: 1200px) {
  .page-banner__fig { display: none; }
}

/* Services detail sections — a single frame-free mascot standing on the
   section background, in place of the old framed photo collages. */
.svc-fig {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 430px;
}
.svc-fig > img {
  width: auto;
  height: auto;
  max-height: 560px;
  max-width: 80%;
  filter: drop-shadow(0 20px 32px rgba(20, 23, 26, 0.18));
}
.svc-fig .why__badge {
  left: 4%;
  bottom: 18px;
}
@media (max-width: 900px) {
  .svc-fig { min-height: 340px; }
  .svc-fig > img { max-height: 440px; }
  .svc-fig .why__badge { position: static; left: auto; bottom: auto; margin-top: 16px; }
}

/* Homepage brand lock-up — wordmark with the tagline set beneath it. */
.logo--tag { flex-direction: column; align-items: flex-start; gap: 5px; }
.logo__tagline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme);
  line-height: 1;
  white-space: nowrap;
}

/* Call / WhatsApp chooser — popover shown when the phone number is tapped.
   Positioned by main.js; see the "choose Call or WhatsApp" block there. */
.callpop {
  position: fixed;
  z-index: 400;
  min-width: 236px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(22, 23, 26, 0.2);
  animation: callpop-in 0.16s ease both;
}
@keyframes callpop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.callpop__opt {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--dark);
  text-decoration: none;
  transition: background var(--transition);
}
.callpop__opt:hover,
.callpop__opt:focus-visible { background: var(--bg); outline: none; }
.callpop__opt > svg {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 11px;
  border-radius: 50%;
  color: var(--white);
  background: var(--theme);
}
.callpop__opt--wa > svg { background: #25d366; padding: 9px; }
.callpop__opt--gmail > svg { background: #ea4335; }
.callpop__opt--outlook > svg { background: #0a66c2; }
.callpop__opt--copy > svg { background: #5b5d66; }
/* The "Copy address" row is a <button>, not a link — strip native chrome so it
   matches the anchor rows above. The shared :hover rule still supplies the
   hover background. */
button.callpop__opt {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.callpop__opt span { display: flex; flex-direction: column; line-height: 1.3; }
.callpop__opt b { font-size: 15px; font-weight: 700; color: var(--dark); }
.callpop__opt em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 420px) {
  .callpop { width: calc(100vw - 24px); min-width: 0; }
}