/* Shared components: buttons, header, carousel, cards, accordion, CTA banner, footer */

/* ---------- Icons ---------- */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 15px 31px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn .icon { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.btn:hover .icon--arrow,
.btn:focus-visible .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--teal); color: var(--white); }
.btn--primary:hover { background: #197590; }

.btn--white { background: var(--white); color: var(--teal); border-color: var(--border-cool); }
.btn--white:hover { background: var(--teal-50); border-color: var(--teal); }
.btn--white .icon--phone { width: 20px; height: 20px; }

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

.btn--sm { min-height: 42px; padding: 12px 20px; font-size: 0.875rem; line-height: 18px; letter-spacing: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Button hover animation (js/btn-fx.js adds .has-fx + the layers) ----------
   A block led by two skewed squares wipes across the button (pattern from helloaria.eu),
   the label recolours mid-wipe and the arrow swaps. --fx is the wipe colour, --fx-text
   the label colour on hover. The button's own background never changes. */
.btn.has-fx {
  --fx-sq: 52px;            /* square size = button height */
  --fx-gap: 6px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 250ms var(--ease) 0ms, border-color 250ms var(--ease) 0ms;
}
.btn--sm.has-fx { --fx-sq: 42px; }
.btn--primary.has-fx { --fx: var(--navy); --fx-text: var(--white); }
.btn--white.has-fx   { --fx: var(--teal); --fx-text: var(--white); }
.btn--dark.has-fx    { --fx: var(--teal); --fx-text: var(--white); }
/* On dark sections a navy wipe would vanish into the background, so teal buttons wipe to white */
:is(.hero, .page-hero, .section--dark) .btn--primary.has-fx { --fx: var(--white); --fx-text: var(--navy); }

/* Keep the base colour on hover: the wipe provides the new colour */
.btn--primary.has-fx:hover { background: var(--teal); }
.btn--white.has-fx:hover   { background: var(--white); }
.btn--dark.has-fx:hover    { background: var(--navy); }

.btn__fx {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: calc(100% + 2px);
  z-index: -1;
  pointer-events: none;
  transform: translateX(calc(-100% - 2 * var(--fx-sq) - 3 * var(--fx-gap)));
  transition: transform 550ms cubic-bezier(0.65, 0, 0.35, 1);
}
.btn__fx > span { position: absolute; top: 0; bottom: 0; background: var(--fx); }
.btn__fx-block { left: 0; width: 100%; }
.btn__fx-sq { width: var(--fx-sq); }
.btn__fx-sq--1 { left: calc(100% + var(--fx-gap)); clip-path: polygon(15% 11%, 100% 0, 82% 90%, 0 100%); }
.btn__fx-sq--2 { left: calc(100% + var(--fx-sq) + 2 * var(--fx-gap)); clip-path: polygon(15% 14%, 100% 0, 81% 85%, 0 100%); }

.btn.has-fx:is(:hover, :focus-visible) { color: var(--fx-text); border-color: var(--fx); transition-delay: 180ms, 180ms; }
.btn.has-fx:is(:hover, :focus-visible) .btn__fx { transform: translateX(0); transition-duration: 650ms; }

/* Arrow: the original slides out to the right, its copy slides in from the left */
.btn__arrow { position: relative; display: inline-flex; overflow: hidden; }
.btn.has-fx .btn__arrow .icon { transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms var(--ease); }
.btn.has-fx .btn__arrow-in { position: absolute; inset: 0; transform: translateX(-150%); opacity: 0; }
.btn.has-fx:is(:hover, :focus-visible) .btn__arrow .icon { transform: translateX(150%); opacity: 0; transition-delay: 120ms; }
.btn.has-fx:is(:hover, :focus-visible) .btn__arrow .btn__arrow-in { transform: none; opacity: 1; transition-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .btn__fx { transform: none; opacity: 0; transition: opacity 200ms linear; }
  .btn.has-fx:is(:hover, :focus-visible) .btn__fx { opacity: 1; }
  .btn.has-fx .btn__arrow-in { display: none; }
  .btn.has-fx:is(:hover, :focus-visible) .btn__arrow .icon { transform: none; opacity: 1; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--teal);
}
.link-arrow .icon { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
a.link-arrow:hover .icon { transform: translateX(4px); }
a.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: clamp(12px, 2vw, 32px) 0 auto;
  z-index: 50;
}
.site-header__bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 19px 24px;
}
/* Glass pill is a pseudo-element so backdrop-filter does not create a
   containing block for the fixed mobile menu. */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--white);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.8));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.site-header.is-stuck .site-header__bar::before {
  box-shadow: 0 10px 32px rgba(12, 20, 29, 0.14);
  border-color: rgba(255, 255, 255, 0.9);
}

.logo { display: block; flex: none; }
.logo img { width: 230px; height: auto; }

.site-nav__list { display: flex; align-items: center; gap: 24px; }
.site-nav__item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  transition: color var(--t-fast) var(--ease);
}
.nav-link .icon { width: 16px; height: 16px; stroke-width: 2; }
a.nav-link:hover { color: var(--teal); }
/* Current page: bold text only (no underline marker) */
.nav-link[aria-current="page"] { font-weight: 600; }
.is-pending { cursor: default; }

.site-header__actions { display: flex; align-items: center; gap: 24px; flex: none; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.header-phone .icon { width: 20px; height: 20px; }
.header-phone:hover { color: var(--teal); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-sm);
  background: var(--white);
  align-items: center;
  justify-content: center;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav__mobile-extras { display: none; }

/* ---------- Services mega menu ("Header - Services Menu - Open") ---------- */
.mega-toggle { border: 0; background: none; padding-inline: 0; }
.mega-toggle .icon { transition: transform var(--t-fast) var(--ease); }
.mega-toggle:hover { color: var(--teal); }
.mega-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

@media (min-width: 1360px) {
  /* Panel is positioned against the header bar, not the nav item. */
  .site-nav__item.has-mega { position: static; }
  .mega {
    position: absolute;
    top: calc(100% - 12px);
    left: clamp(24px, 50% - 421px, 100% - 972px);
    z-index: 5;
    width: min(948px, 100% - 48px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.985);
    transform-origin: 30% 0;
    transition: opacity 260ms var(--ease), transform 360ms var(--ease), visibility 0s linear 360ms;
  }
  /* Hover bridge across the gap between the link and the panel */
  .mega::before { content: ""; position: absolute; inset: -20px 0 100%; }
  .has-mega.is-open .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .mega__panel {
    display: flex;
    gap: 32px;
    padding: 32px;
    border: 1px solid var(--white);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 5px 20px rgba(0, 0, 0, 0.05), 0 24px 48px -24px rgba(12, 20, 29, 0.28);
  }
  .mega__list { display: grid; align-content: start; gap: 16px; }
  .mega__list:first-child { flex: 0 1 259px; }
  .mega__list:nth-child(2) { flex: 0 1 300px; }
  .mega__list > li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  }
  .has-mega.is-open .mega__list > li {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms + var(--i, 0) * 35ms);
  }
  .mega__list > li:nth-child(2) { --i: 1; }
  .mega__list > li:nth-child(3) { --i: 2; }
  .mega__list > li:nth-child(4) { --i: 3; }
  .mega__list > li:nth-child(5) { --i: 4; }
  .mega__list:nth-child(2) > li { --i: 1; }
  .mega__list:nth-child(2) > li:nth-child(2) { --i: 2; }
  .mega__list:nth-child(2) > li:nth-child(3) { --i: 3; }
  .mega__list:nth-child(2) > li:nth-child(4) { --i: 4; }

  .mega__link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: -0.03em;
    color: var(--navy);
    transition: color var(--t-fast) var(--ease);
  }
  .mega__link span {
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 0 1px no-repeat;
    transition: background-size 320ms var(--ease);
  }
  .mega__link .icon {
    width: 0;
    height: 16px;
    margin-right: 0;
    opacity: 0;
    stroke-width: 2;
    transform: translateX(-6px);
    transition: width 260ms var(--ease), margin-right 260ms var(--ease), opacity 200ms var(--ease), transform 260ms var(--ease);
  }
  .mega__link.is-active { color: var(--teal); font-weight: 600; }
  .mega__link.is-active span { background-size: 100% 1px; }
  .mega__link.is-active .icon { width: 16px; margin-right: 8px; opacity: 1; transform: none; }

  /* Image stack: the active image wipes in over the previous one while settling from a zoom. */
  .mega__media {
    position: relative;
    flex: 0 0 276px;
    align-self: start;
    aspect-ratio: 3 / 2;
    margin-left: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .mega__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(100% 0 0 0);
    transform: scale(1.22);
    filter: brightness(1.15) saturate(0.85);
  }
  .mega__media[data-dir="up"] .mega__img:not(.is-active):not(.is-prev) { clip-path: inset(0 0 100% 0); }
  .mega__media .mega__img.is-prev { z-index: 1; clip-path: inset(0); transform: scale(1); filter: none; }
  .mega__media .mega__img.is-active {
    z-index: 2;
    clip-path: inset(0);
    transform: scale(1);
    filter: none;
    transition: clip-path 720ms cubic-bezier(0.76, 0, 0.24, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms var(--ease);
  }
  /* Teal light-sweep that rides the wipe edge */
  .mega__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0 40%, rgba(31, 142, 173, 0.45) 50%, transparent 60% 100%) 0 0 / 100% 250% no-repeat;
    background-position: 0 100%;
    opacity: 0;
  }
  .mega__media.is-sweeping::after { animation: mega-sweep 720ms cubic-bezier(0.76, 0, 0.24, 1); }
  .mega__media[data-dir="up"].is-sweeping::after { animation-name: mega-sweep-up; }
}
/* Area we serve ("Header - Area We Serve Menu - Open"): same panel, four fixed-width
   columns, 60px apart, no image. Fixed widths keep columns still when the hovered
   link grows by its arrow (it runs into the gap, as in the design). */
@media (min-width: 1360px) {
  .mega--areas {
    left: clamp(24px, 50% - 94px, 100% - 733px);
    width: auto;
  }
  .mega--areas .mega__panel { gap: 60px; }
  .mega--areas .mega__list,
  .mega--areas .mega__list:first-child,
  .mega--areas .mega__list:nth-child(2) { flex: 0 0 auto; }
  .mega--areas .mega__list:nth-child(1) { width: 93px; }
  .mega--areas .mega__list:nth-child(2) { width: 103px; }
  .mega--areas .mega__list:nth-child(3) { width: 125px; }
  .mega--areas .mega__list:nth-child(4) { width: 142px; }
  .mega--areas .mega__list:nth-child(n + 3) > li:nth-child(2) { --i: 2; }
  .mega--areas .mega__list:nth-child(n + 3) > li:nth-child(3) { --i: 3; }
  .mega--areas .mega__list:nth-child(n + 3) > li:nth-child(4) { --i: 4; }
  .mega--areas .mega__list:nth-child(n + 3) > li:nth-child(5) { --i: 5; }
  .mega--areas .mega__link { white-space: nowrap; }
}

@keyframes mega-sweep {
  0% { opacity: 1; background-position: 0 0; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: 0 100%; }
}
@keyframes mega-sweep-up {
  0% { opacity: 1; background-position: 0 100%; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0; }
}

@media (max-width: 1599px) {
  .header-phone { display: none; }
  .site-nav__list { gap: 16px; }
  .site-header__bar { gap: 20px; }
}

@media (max-width: 1359px) {
  .nav-toggle { display: inline-flex; }
  .site-header__actions .btn { display: none; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding: 96px var(--gutter) 40px;
    overflow-y: auto;
    background: var(--navy);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  .nav-link {
    width: 100%;
    padding-block: 20px;
    font-size: 1.125rem;
    color: var(--white);
  }
  a.nav-link:hover { color: var(--teal-200); }
  .site-nav__mobile-extras { display: grid; gap: 16px; margin-top: 32px; }
  .site-nav__mobile-extras .btn { width: 100%; }
  /* keep toggle above the open menu */
  .site-header__bar { z-index: 70; }
  .site-nav { z-index: 65; }
  .site-header__actions { position: relative; z-index: 70; }
  html.nav-open .nav-toggle { background: var(--white); }

  /* Services becomes an accordion inside the drawer; no images on small screens. */
  .mega-toggle { justify-content: space-between; color: var(--white); text-align: left; }
  .mega-toggle .icon { width: 20px; height: 20px; }
  .mega-toggle:hover,
  .mega-toggle[aria-expanded="true"] { color: var(--teal-200); }
  .mega {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .has-mega.is-open .mega { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .mega__panel { min-height: 0; overflow: hidden; }
  .mega__list { display: grid; gap: 4px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
  .mega__list:first-child { margin-top: 4px; }
  .mega__list:nth-child(2) { margin-top: 4px; margin-bottom: 20px; }
  .mega__link {
    display: block;
    padding-block: 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.85);
  }
  .mega__link:hover { color: var(--teal-200); }
  .mega__link .icon,
  .mega__media { display: none; }
  /* 20 areas: two columns in the drawer */
  .mega--areas .mega__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .mega--areas .mega__list:nth-child(n) { margin: 0; }
  .mega--areas .mega__list:nth-child(-n + 2) { margin-top: 4px; }
  .mega--areas .mega__list:nth-child(n + 3) { margin-bottom: 20px; }
}

@media (max-width: 480px) {
  .site-header__bar { padding: 14px 16px; min-height: 68px; }
  .logo img { width: 184px; height: auto; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 46vw, 882px);
  padding: 150px 0 clamp(48px, 5.2vw, 100px);
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.hero__media,
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 20, 29, 0.8), rgba(0, 0, 0, 0.1));
}
.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}
.hero__title { display: grid; gap: 16px; max-width: 750px; }
.hero__aside { display: grid; gap: 32px; max-width: 621px; flex: 0 1 621px; }
.hero__aside p { font-size: var(--fs-lead); line-height: 1.4; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.hero [data-hero-step] { animation: rise 800ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 100ms); }

@media (max-width: 899px) {
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__aside { flex-basis: auto; }
}

/* ---------- Carousel (native scroll-snap) ---------- */
.carousel__track {
  --edge: max(var(--gutter), (100% - var(--container-max)) / 2);
  display: flex;
  gap: 24px;
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: none; scroll-snap-align: start; }
.carousel__track:focus-visible { outline-offset: -3px; }

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 621px);
}
.carousel__progress {
  flex: 1;
  height: 2px;
  background: var(--border);
  overflow: hidden;
}
.carousel__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--navy);
  transform-origin: left;
  transform: scaleX(var(--progress, 1));
  transition: transform var(--t-med) var(--ease);
}
.carousel__buttons { display: flex; gap: 16px; }
.carousel__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
/* 32px visual, 44px touch target */
.carousel__btn::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.carousel__btn .icon { width: 14px; height: 14px; stroke-width: 2; }
.carousel__btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: var(--white); }
.carousel__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.on-dark .carousel__progress { background: rgba(255, 255, 255, 0.2); }
.on-dark .carousel__progress-bar { background: var(--white); }
.on-dark .carousel__btn { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2); color: var(--white); }
.on-dark .carousel__btn:hover:not(:disabled) { background: var(--white); border-color: var(--white); color: var(--navy); }
/* ---------- Media card (image + title + copy) ---------- */
.media {
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 526 / 320;
  background: var(--surface);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.card:hover .media img,
.card:focus-within .media img,
.project:hover .media img { transform: scale(1.05); }

.card { display: grid; gap: 32px; align-content: start; }
/* Whole service card is one link (title link stretched over the card) */
.card:has(.card__link) { position: relative; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--teal); outline-offset: 6px; border-radius: var(--radius-md); }
.card__body { display: grid; gap: 16px; }
.card__title { font-size: var(--fs-h3); }
.card__text { font-size: var(--fs-body); line-height: 1.55; }

/* ---------- Review card ---------- */
.review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 33px 25px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.review__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.review__stars { display: flex; gap: 2px; color: var(--star); }
.review__stars .icon { width: 20px; height: 20px; }
.review__source { width: 72px; height: 24px; }
.review__text { font-size: var(--fs-body); line-height: 1.55; color: var(--text-muted); }
.review__author { display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.review__name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; text-transform: uppercase; }

/* ---------- Project card (overlay variant) ---------- */
.project { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--navy); }
.project .media { aspect-ratio: 720 / 435; border-radius: 0; }
.project__panel {
  position: absolute;
  left: clamp(12px, 1.7vw, 32px);
  right: clamp(12px, 1.7vw, 32px);
  bottom: clamp(12px, 1.25vw, 24px);
  display: grid;
  gap: 24px;
  padding: clamp(16px, 1.25vw, 24px);
  border-radius: var(--radius-sm);
  isolation: isolate;
  background: rgba(12, 20, 29, 0.7);   /* Figma: #0C141D @ 70% + progressive background blur 0 -> 20 (top to bottom) */
  color: var(--white);
}
/* Progressive blur: 4 stacked backdrop layers, each ramping in over a band of the panel (~0px at top, ~20px at bottom) */
.project__blur { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.project__blur i { position: absolute; inset: 0; }
.project__blur i:nth-child(1) { -webkit-backdrop-filter: blur(8px);    backdrop-filter: blur(8px);    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);   mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); }
.project__blur i:nth-child(2) { -webkit-backdrop-filter: blur(9px);    backdrop-filter: blur(9px);    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 60%);  mask-image: linear-gradient(to bottom, transparent 40%, #000 60%); }
.project__blur i:nth-child(3) { -webkit-backdrop-filter: blur(10.5px); backdrop-filter: blur(10.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 80%);  mask-image: linear-gradient(to bottom, transparent 60%, #000 80%); }
.project__blur i:nth-child(4) { -webkit-backdrop-filter: blur(12px);   backdrop-filter: blur(12px);   -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); }
.project__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); line-height: 24px; }
.project__meta-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.2); }
.project__name {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  margin-top: 12px;
}
.project__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.project__place { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.project__place .icon { width: 24px; height: 24px; }
.project .link-arrow { color: var(--white); }
.project:hover .link-arrow,
.project:focus-within .link-arrow { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.project .link-arrow::after { content: ""; position: absolute; inset: 0; }   /* whole card is the hit area */
.project a:focus-visible { outline-color: var(--white); }

/* ---------- Accordion ---------- */
.accordion { max-width: 1008px; margin-inline: auto; }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item:first-child .accordion__trigger { padding-top: 0; }
.accordion__heading { margin: 0; font: inherit; text-transform: none; }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.33;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.accordion__trigger:hover { color: var(--teal); }
.accordion__icon { position: relative; width: 24px; height: 24px; flex: none; }
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.accordion__icon::before { transform: translate(-50%, -50%); }
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel-inner { overflow: hidden; min-height: 0; }
.accordion__content { padding: 0 64px 24px 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-muted); }
.accordion__content[data-placeholder] { font-style: italic; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 24.9vw, 380px);
  padding: clamp(32px, 3.75vw, 72px) clamp(24px, 4.17vw, 80px);
  border-radius: var(--radius-lg);   /* 16px */
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.cta-banner__media,
.cta-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 20, 29, 0.8), rgba(0, 0, 0, 0.1));
}
.cta-banner__inner { position: relative; display: grid; gap: 40px; justify-items: start; max-width: 797px; }
.cta-banner .btn--white { border-color: var(--white); }
.cta-banner .btn--white:hover { background: var(--teal-50); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: calc(-1 * clamp(110px, 8.65vw, 166px));
  padding-top: calc(clamp(110px, 8.65vw, 166px) + clamp(48px, 5.2vw, 100px));
  background: var(--navy);
  color: var(--white);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 48px);
}
.footer__brand { display: grid; gap: 24px; align-content: start; }
.footer__brand .logo img { width: min(100%, 315px); }
.footer__contact { display: grid; gap: 16px; font-weight: 500; font-size: 1rem; line-height: 20px; color: var(--text-on-dark-muted); }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
/* Filled teal icons (location / call / mail) from the design, 20px box */
.footer__contact .icon { width: 20px; height: 20px; color: var(--teal); }
.footer__contact span { line-height: 24px; margin-top: -2px; } /* two-line address: 48px tall, first line aligned with the icon */
.footer__contact a { overflow-wrap: anywhere; }
/* Social links: 28px white discs, 16px apart, 32px below the contact rows */
.footer__social { display: flex; gap: 16px; margin-top: 8px; }
.footer__social a { display: block; border-radius: 50%; color: var(--white); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.footer__social .icon { width: 28px; height: 28px; }
.footer__social a:hover { color: var(--teal); transform: translateY(-2px); }
.footer__contact a:hover { color: var(--white); }
.footer__col h2 {
  font-size: 1rem;
  line-height: 26px;
  font-weight: 500;
  margin-bottom: 32px;
}
.footer__links { display: grid; gap: 12px; color: var(--text-on-dark-muted); font-size: 1rem; line-height: 26px; }
.footer__links a { transition: color var(--t-fast); }
.footer__links a:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 4vw, 80px);
  padding-block: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  line-height: 26px;
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; }
.footer__legal li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 20px;
  margin-right: 12px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__col h2 { margin-bottom: 16px; }
}

/* ---------- Reviews section (home + about) ---------- */
.reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: var(--space-heading);
}
.reviews__head .carousel__controls { flex: 0 1 621px; }
.reviews .carousel__track { align-items: stretch; }
.reviews .carousel__track > * { width: calc((var(--container-w) - 48px) / 3); }
@media (max-width: 1099px) {
  .reviews .carousel__track > * { width: clamp(290px, 62vw, 492px); }
  .reviews__head { flex-direction: column; align-items: stretch; }
  .reviews__head .carousel__controls { flex-basis: auto; width: 100%; }
}
@media (max-width: 639px) {
  .reviews .carousel__track > * { width: min(86vw, 420px); }
}

/* ---------- Award badge (home trust + about journey) ---------- */
.badge {
  --badge: clamp(104px, 8.4vw, 160px);
  position: absolute;
  left: 0;
  top: calc(var(--badge) * 0.308);   /* Figma: box top 49px of 160 below the image top */
  width: var(--badge);
  transform: translateX(-55.4%) rotate(15deg);   /* Figma: tilted +15deg, centre 9px outside the image's left edge */
  filter: drop-shadow(0 6px 16px rgba(12, 20, 29, 0.18));
}

/* Phones: keep the tilted badge fully inside the viewport (image sits ~44px from the screen edge) */
@media (max-width: 639px) {
  .trust__media .badge { --badge: 92px; transform: translateX(-45%) rotate(15deg); }
}

/* Size slides from the carousel's own width (excludes the scrollbar, unlike 100vw). */
[data-carousel] {
  container-type: inline-size;
  --container-w: min(100cqw - 2 * var(--gutter), var(--container-max));
}


/* Buttons stay on one line when there is room, and wrap instead of overflowing on very narrow screens */
@media (min-width: 480px) { .btn { white-space: nowrap; } }
@media (max-width: 479px) { .btn { padding-inline: 20px; } .btn-row .btn { flex: 1 1 100%; } }

/* ---------- Page hero (About + Projects) ---------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;   /* Figma: content sits 100px above the image bottom on every hero */
  min-height: clamp(460px, 36.5vw, 700px);
  padding: 140px 0 clamp(48px, 5.2vw, 100px);
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.page-hero--short { min-height: clamp(380px, 26vw, 500px); }
.page-hero__media,
.page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 20, 29, 0.8), rgba(0, 0, 0, 0.1));
}
.page-hero__inner { position: relative; display: grid; gap: 40px; max-width: 1008px; }
.page-hero__title { display: grid; gap: 16px; }
/* Content must be positioned to paint above the absolutely positioned media + gradient */
.page-hero > .container { position: relative; }

/* Multi-paragraph copy: Figma uses 8px paragraph spacing (12px on the homepage spaces intro) */
.para-stack { display: grid; gap: var(--para-gap, 8px); }

/* ---------- CTA banner spacing ---------- */
.cta-wrap { padding-top: var(--section-space); }

/* ---------- Animated title underline (card titles) ----------
   Same technique as augment.org/blog: an inline span with a currentColor gradient
   background, size 0 -> 100% x 2px, anchored bottom-left, 150ms cubic-bezier(.4,0,.2,1).
   Sits directly at the bottom of the text box (no offset) and follows wrapped lines. */
.u-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
  transition: background-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
:is(.card, .project, .portfolio-card):is(:hover, :focus-within) .u-line { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) { .u-line { transition: none; } }