/* ==========================================================================
   COMPONENTS — reusable across every page of the site.
   Each block below maps 1:1 to a future React component; the mapping is
   listed in README.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON  →  <Button variant="…" />
   -------------------------------------------------------------------------- */
.btn-sysin {
  --btn-bg: var(--c-primary);
  --btn-color: var(--c-white);
  --btn-border: transparent;
  --btn-divider: rgba(255, 255, 255, 0.24);

  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  height: 53px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.52px;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base),
    border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}

.btn-sysin__label {
  padding: 0 1.15rem 0 1.2rem;
}

/* Hairline that separates the label from the arrow (present in Figma). */
.btn-sysin__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 1.2rem 0 1.1rem;
  border-left: 1px solid var(--btn-divider);
}

.btn-sysin__arrow svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-base);
}

.btn-sysin:hover {
  color: var(--btn-color);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 129, 189, 0.25);
}

.btn-sysin:hover .btn-sysin__arrow svg {
  transform: translateX(3px);
}

/* Variants */
.btn-sysin--outline {
  --btn-bg: var(--c-white);
  --btn-color: var(--c-ink-900);
  --btn-border: var(--c-border-strong);
  --btn-divider: rgba(178, 178, 178, 0.5);
}

.btn-sysin--outline:hover {
  --btn-border: var(--c-primary);
  color: var(--c-primary);
  box-shadow: 0 10px 24px rgba(11, 28, 45, 0.1);
}

.btn-sysin--sm {
  height: 44px;
  font-size: var(--fs-body);
}

.btn-sysin--sm .btn-sysin__label {
  padding: 0 0.9rem 0 1.1rem;
}

.btn-sysin--sm .btn-sysin__arrow {
  padding: 0 1rem 0 0.9rem;
}

.btn-sysin--sm .btn-sysin__arrow svg {
  width: 15px;
  height: 15px;
}

/* Square-cornered CTA buttons used inside the dark banner. */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 60px;
  padding-inline: 1.9rem;
  border-radius: var(--r-md);
  font-family: var(--font-alt);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}

.btn-cta svg {
  width: 17px;
  height: 17px;
  transition: transform var(--t-base);
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.btn-cta:hover svg {
  transform: translateX(3px);
}

.btn-cta--solid {
  background: var(--c-primary);
  color: var(--c-white);
}

.btn-cta--solid:hover {
  color: var(--c-white);
  filter: brightness(1.06);
}

.btn-cta--light {
  background: var(--c-white);
  color: var(--c-navy-900);
}

.btn-cta--light:hover {
  color: var(--c-navy-900);
}

/* --------------------------------------------------------------------------
   TEXT LINK WITH ARROW  →  <ArrowLink />
   -------------------------------------------------------------------------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: 0.42px;
  color: var(--c-ink-750);
}

.arrow-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-base);
}

.arrow-link:hover {
  color: var(--c-primary);
}

.arrow-link:hover svg {
  transform: translateX(4px);
}

.arrow-link--lg {
  font-size: var(--fs-h3);
  letter-spacing: 0.6px;
  color: var(--c-ink-900);
}

.arrow-link--lg svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   SERVICE CARD  →  <ServiceCard />
   -------------------------------------------------------------------------- */
/* Icon beside the copy rather than above it. Stacked, the artwork cost a
   118px band across the top of every card before a word was read; alongside,
   the same card is roughly a third shorter and the eye lands on the title
   first. The media cell spans all three text rows, so the icon stays put
   however long the copy runs. */
.service-card {
  height: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 1.15rem;
  align-content: start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: 1.7rem 1.7rem 1.85rem;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

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

.service-card__media {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.service-card__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.service-card__title {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--c-ink-800);
  margin-bottom: 0.55rem;
}

.service-card__text {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin-bottom: 1rem;
}

.service-card__foot {
  grid-column: 2;
  align-self: end;
}

/* --------------------------------------------------------------------------
   FEATURE (icon + title + copy)  →  <FeatureItem />
   Used in the "Our Solutions" panel.
   -------------------------------------------------------------------------- */
.feature {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Filled disc with a white glyph, rather than a loose line drawing: at this
   size a solid badge is what makes three features read as a set, and it
   carries a colour each so they are told apart at a glance. */
.feature__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 8px 18px rgba(11, 28, 45, 0.14);
}

.feature__icon svg {
  width: 25px;
  height: 25px;
}

.feature:nth-child(2) .feature__icon {
  background: #16a394;
}

.feature:nth-child(3) .feature__icon {
  background: #6d4bd6;
}

.feature__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.65;
  color: var(--c-navy-900);
  margin: 0;
}

.feature__text {
  font-family: var(--font-alt);
  font-size: 0.97rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--c-ink-400);
  margin: 0;
}

/* --------------------------------------------------------------------------
   INDUSTRY CARD  →  <IndustryCard tint="…" />
   Tint is driven by a modifier so the palette stays in tokens.css.
   -------------------------------------------------------------------------- */
.industry-card {
  --tint: var(--c-tint-indigo);

  height: 100%;
  min-height: 334px;
  display: flex;
  flex-direction: column;
  background: var(--tint);
  border: 7px solid var(--c-white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-tile);
  padding: 1.6rem 1.6rem 1.9rem;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(11, 28, 45, 0.12);
}

.industry-card--violet {
  --tint: var(--c-tint-violet);
}

.industry-card--cyan {
  --tint: var(--c-tint-cyan);
}

.industry-card__icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1.35rem;
  mix-blend-mode: darken;
}

.industry-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18px;
  color: var(--c-black);
  margin-bottom: 0.75rem;
}

.industry-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.92;
  color: var(--c-navy-800);
  margin: 0;
}

/* --------------------------------------------------------------------------
   TESTIMONIAL CARD  →  <TestimonialCard />
   -------------------------------------------------------------------------- */
.testimonial {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-md);
  padding: 2.3rem 2.1rem 2rem;
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

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

/* Decorative quote glyph, top-right. */
.testimonial__mark {
  position: absolute;
  top: 0.6rem;
  right: 1.3rem;
  width: 66px;
  height: auto;
  color: #f1f1f1;
  pointer-events: none;
}

.testimonial__stars {
  display: flex;
  gap: 0.42rem;
  color: var(--c-star);
  margin-bottom: 1.5rem;
}

.testimonial__stars svg {
  width: 17px;
  height: 17px;
}

.testimonial__quote {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
  margin-bottom: 1.9rem;
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
}

.testimonial__avatar {
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin: 0;
}

.testimonial__role {
  font-family: var(--font-alt);
  font-size: 1.04rem;
  font-weight: var(--fw-medium);
  color: var(--c-ink-400);
  margin: 0;
}

/* --------------------------------------------------------------------------
   STAT CARD  →  <StatCard />
   -------------------------------------------------------------------------- */
.stat-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--c-navy-850);
  border-right: 1px solid var(--c-border-stat);
  padding: 1.5rem 1.5rem 1.4rem;
}

.stat-card:last-child {
  border-right: 0;
}

.stat-card__value {
  font-family: var(--font-body);
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  letter-spacing: -0.96px;
  line-height: 1;
  color: var(--c-white);
  margin-bottom: 0.35rem;
}

.stat-card__label {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   BRIEFING LIST ITEM  →  <BriefingItem />
   -------------------------------------------------------------------------- */
.briefing {
  display: grid;
  grid-template-columns: 46px 1fr 28px;
  align-items: start;
  gap: 0 1.5rem;
  padding: 1.75rem 1.6rem;
  border-bottom: 1px solid var(--c-border-soft);
  transition: background var(--t-base);
}

.briefing:last-child {
  border-bottom: 0;
}

.briefing:hover {
  background: #fafbfd;
}

.briefing__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.69px;
  color: var(--c-slate-600);
  padding-top: 0.15rem;
}

.briefing__tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.69px;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 0.55rem;
}

.briefing__title {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.55px;
  line-height: 1.35;
  color: var(--c-ink-700);
  margin-bottom: 0.7rem;
}

.briefing__meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-slate-600);
}

.briefing__arrow {
  align-self: start;
  padding-top: 0.15rem;
  color: var(--c-slate-600);
}

.briefing__arrow svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t-base);
}

.briefing:hover .briefing__arrow svg {
  transform: translateX(4px);
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   PILL BADGE  →  <Badge />
   -------------------------------------------------------------------------- */
.badge-soft {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.99rem;
  font-weight: var(--fw-light);
  letter-spacing: 0.47px;
  color: var(--c-black);
  background: var(--c-tint-indigo);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.85rem;
}

/* --------------------------------------------------------------------------
   CAROUSEL  →  <Carousel />
   Structural styles for assets/js/carousel.js. Arrows and dots are injected
   by the script; everything here is presentation only.
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
}

.carousel__viewport {
  overflow: hidden;
  /* Horizontal gestures are ours; vertical ones stay with the page. */
  touch-action: pan-y;
  cursor: grab;
}

/* The browser's native image/link drag steals the gesture and trails a ghost
   image, which is the usual reason a slider "won't swipe". Text itself stays
   selectable — selection is blocked in JS only while a drag is underway. */
.carousel__viewport img,
.carousel__viewport a {
  -webkit-user-drag: none;
  user-select: none;
}

.carousel__track {
  display: flex;
  will-change: transform;
  transition: transform 0.62s cubic-bezier(0.4, 0.03, 0.16, 1);
}

.carousel.is-dragging .carousel__viewport {
  cursor: grabbing;
}

.carousel.is-dragging .carousel__track {
  transition: none;
}

/* No text highlighting anywhere inside a carousel that is mid-drag — a blue
   selection smear across the cards is what makes a swipe feel broken. */
.carousel.is-dragging,
.carousel.is-dragging * {
  user-select: none !important;
}

.carousel__slide {
  flex: 0 0 auto;
  min-width: 0;
  /* Cards inside stretch to equal height. */
  display: flex;
  flex-direction: column;
}

.carousel__slide > * {
  flex: 1;
}

/* Arrows ------------------------------------------------------------------ */
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-navy-900);
  border: 1px solid var(--c-border-mid);
  box-shadow: var(--sh-card);
  transition: background var(--t-base), color var(--t-base),
    border-color var(--t-base), opacity var(--t-base);
}

.carousel__arrow svg {
  width: 17px;
  height: 17px;
}

.carousel__arrow:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

.carousel__arrow--prev {
  left: -22px;
}

.carousel__arrow--next {
  right: -22px;
}

.carousel.is-first .carousel__arrow--prev,
.carousel.is-last .carousel__arrow--next {
  opacity: 0.35;
  pointer-events: none;
}

/* Dots -------------------------------------------------------------------- */
.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--c-border-mid);
  transition: width var(--t-base), background var(--t-base);
}

.carousel__dot:hover {
  background: var(--c-slate-400);
}

.carousel__dot.is-active {
  width: 26px;
  background: var(--c-primary);
}

/* Dots sitting on a dark / photographic background */
.carousel--on-dark .carousel__dot {
  background: rgba(11, 28, 45, 0.18);
}

.carousel--on-dark .carousel__dot.is-active {
  background: var(--c-primary);
}

/* --------------------------------------------------------------------------
   TRUST STRIP  →  <TrustStrip />
   Accreditation marks in a quiet band, used directly under a hero.
   -------------------------------------------------------------------------- */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  flex-wrap: wrap;
  padding-block: 1.6rem;
}

.trust-strip__label {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--c-ink-400);
}

.trust-strip__marks {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 2vw, 2.75rem);
  flex-wrap: wrap;
}

.trust-strip__marks img {
  height: clamp(34px, 3.2vw, 46px);
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--t-base), opacity var(--t-base);
}

.trust-strip__marks img:hover {
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   REASON  →  <ReasonCard />
   Numbered and borderless, so a second card section on the same page does
   not read as a repeat of the bordered grids above it.
   -------------------------------------------------------------------------- */
.reason {
  position: relative;
  height: 100%;
  padding-left: 4.25rem;
}

.reason__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}

.reason:hover .reason__num {
  background: var(--c-primary);
  color: var(--c-white);
  transform: translateY(-3px);
}

.reason__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.55rem;
  padding-top: 0.4rem;
}

.reason__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin: 0;
}

/* --------------------------------------------------------------------------
   PROCESS RAIL  →  <ProcessRail />
   Horizontal connected steps. Deliberately unlike .timeline on the services
   page: squared markers, an icon per step, and a dashed connector behind.
   -------------------------------------------------------------------------- */
.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}

.process::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 11%;
  right: 11%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--c-border-mid) 0 8px,
    transparent 8px 16px
  );
}

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

.process__marker {
  position: relative;
  width: 62px;
  height: 62px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  color: var(--c-primary);
  box-shadow: var(--sh-card);
  transition: background var(--t-base), color var(--t-base),
    border-color var(--t-base), transform var(--t-base);
}

.process__step:hover .process__marker {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
  transform: translateY(-4px);
}

.process__marker svg {
  width: 25px;
  height: 25px;
}

.process__num {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-navy-900);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
}

.process__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.45rem;
}

.process__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
  margin: 0;
}

/* --------------------------------------------------------------------------
   FAQ  →  <Faq />

   Bootstrap's accordion supplies only the collapse behaviour here — every
   visual affordance is ours: card-per-question, a mono index, and a +/−
   toggle in place of the stock chevron.
   -------------------------------------------------------------------------- */
.faq {
  /* Strip Bootstrap's chrome back to nothing; the card is drawn on the item. */
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--c-primary);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 0;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
}

.faq .accordion-item {
  position: relative;
  margin-bottom: 0.9rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base),
    transform var(--t-base);
}

.faq .accordion-item:last-child {
  margin-bottom: 0;
}

.faq .accordion-item:hover {
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
}

/* Accent bar down the left edge, revealed when the panel opens. */
.faq .accordion-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base);
}

/* :has() styles the whole card from the button's state. Where it is
   unsupported the button still shows its own open state, so nothing breaks. */
.faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
  background: linear-gradient(180deg, var(--c-tint-indigo) 0%, var(--c-white) 62%);
}

.faq .accordion-item:has(.accordion-button:not(.collapsed))::before {
  transform: scaleY(1);
}

.faq .accordion-button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 1.4rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--c-navy-900);
  text-align: left;
  box-shadow: none;
}

/* Bootstrap's stock chevron — replaced by .faq__toggle below. */
.faq .accordion-button::after {
  display: none;
}

.faq .accordion-button:not(.collapsed) {
  color: var(--c-primary);
}

.faq__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  transition: background var(--t-base), color var(--t-base);
}

.faq .accordion-button:not(.collapsed) .faq__num {
  background: var(--c-primary);
  color: var(--c-white);
}

/* +/− built from two bars: the vertical one collapses when the panel opens. */
.faq__toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-mid);
  background: var(--c-white);
  color: var(--c-primary);
  transition: background var(--t-base), border-color var(--t-base),
    color var(--t-base), transform var(--t-base);
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: var(--r-pill);
  transform: translate(-50%, -50%);
}

.faq__toggle::before {
  width: 13px;
  height: 2px;
}

.faq__toggle::after {
  width: 2px;
  height: 13px;
  transition: transform var(--t-base);
}

.faq .accordion-button:not(.collapsed) .faq__toggle {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

.faq .accordion-button:not(.collapsed) .faq__toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Answer aligns with the question text, not the card edge. */
.faq .accordion-body {
  padding: 0 4rem 1.5rem calc(44px + 1.1rem + 1.5rem);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
}

/* Left column tracks the list while it scrolls, so the two columns stay
   visually tied together however many questions there are. */
.faq-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

/* --------------------------------------------------------------------------
   FAQ SIDE CARD  →  <FaqHelp />
   Sits beside the list: the fallback when the answer is not there.
   -------------------------------------------------------------------------- */
.faq-help {
  position: relative;
  margin-top: 1.75rem;
  padding: 1.75rem 1.6rem;
  background: var(--c-navy-700);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}

.faq-help::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    110% 90% at 85% 0%,
    rgba(82, 171, 255, 0.35) 0%,
    rgba(82, 171, 255, 0) 62%
  );
}

.faq-help__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-white);
  margin-bottom: 1.1rem;
}

.faq-help__icon svg {
  width: 21px;
  height: 21px;
}

.faq-help__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  margin-bottom: 0.5rem;
}

.faq-help__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-mist);
  margin-bottom: 1.35rem;
}

.faq-help__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

.faq-help__link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-base);
}

.faq-help__link:hover {
  color: var(--c-white);
}

.faq-help__link:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   CHALLENGE  →  <ChallengeRow />
   The problem on the left, our response on the right.
   -------------------------------------------------------------------------- */
.challenge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1.15fr);
  align-items: center;
  gap: 0 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-border);
}

.challenge:last-child {
  border-bottom: 0;
}

.challenge__problem {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-ink-800);
}

.challenge__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
}

.challenge__arrow svg {
  width: 16px;
  height: 16px;
}

.challenge__answer {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
}

/* --------------------------------------------------------------------------
   MILESTONE  →  <Milestone />
   Vertical timeline with the rule running through the year markers.
   -------------------------------------------------------------------------- */
.milestones {
  position: relative;
  padding-left: 2.5rem;
}

.milestones::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--c-primary) 0%,
    var(--c-border-mid) 100%
  );
  opacity: 0.55;
}

.milestone {
  position: relative;
  padding-bottom: 2rem;
}

.milestone:last-child {
  padding-bottom: 0;
}

.milestone::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 2px solid var(--c-primary);
  transition: background var(--t-base);
}

.milestone:hover::before {
  background: var(--c-primary);
}

.milestone__year {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.6px;
  color: var(--c-primary);
  background: var(--c-tint-indigo);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.6rem;
}

.milestone__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.4rem;
}

.milestone__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
  margin: 0;
}

/* --------------------------------------------------------------------------
   VALUE CARD  →  <ValueCard />
   -------------------------------------------------------------------------- */
.value-card {
  height: 100%;
  padding: 1.9rem 1.75rem 2rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-card-hover);
}

.value-card__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.7rem;
}

.value-card__title svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--c-primary);
}

.value-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin: 0;
}

/* --------------------------------------------------------------------------
   LOCATION CARD  →  <LocationCard />
   -------------------------------------------------------------------------- */
.location {
  position: relative;
  height: 100%;
  padding: 2rem 1.9rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.location:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-card-hover);
}

.location::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: var(--r-pill);
  background: var(--c-tint-indigo);
  opacity: 0.7;
  z-index: 0;
}

.location > * {
  position: relative;
  z-index: 1;
}

.location__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 0.8rem;
}

.location__flag svg {
  width: 15px;
  height: 15px;
}

.location__city {
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.5rem;
}

.location__role {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin-bottom: 1.3rem;
}

.location__meta {
  display: grid;
  gap: 0.55rem;
}

.location__meta li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink-800);
}

.location__meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   CONTACT PANEL  →  <ContactForm />
   -------------------------------------------------------------------------- */
.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.contact-panel__aside {
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.15rem);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--c-tint-indigo) 0%, rgba(244, 245, 255, 0) 60%),
    var(--c-surface-alt);
  border-right: 1px solid var(--c-border);
}

.contact-panel__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.9rem;
}

.contact-panel__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin-bottom: 1.9rem;
}

.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--c-border);
}

.contact-line__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-primary);
  box-shadow: var(--sh-card);
}

.contact-line__icon svg {
  width: 17px;
  height: 17px;
}

.contact-line__label {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-ink-400);
}

.contact-line__value {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-navy-900);
}

.contact-panel__form {
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.15rem);
}

.field {
  margin-bottom: 1.1rem;
}

.field__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.4px;
  color: var(--c-ink-800);
  margin-bottom: 0.45rem;
}

.field__input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-ink-900);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-sm);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.field__input::placeholder {
  color: var(--c-ink-400);
}

.field__input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

textarea.field__input {
  min-height: 118px;
  resize: vertical;
}

.field__note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: var(--c-ink-400);
  margin-top: 0.9rem;
}

/* --------------------------------------------------------------------------
   CONSULTATION MODAL  →  <ConsultModal />

   Opened by the "Get Consultation" button in the header on every page.
   Built on Bootstrap's own modal so focus trapping, the backdrop, Escape and
   the scrollbar-width compensation all come for free — only the skin is ours.

   The panel is two columns: a dark aside that says what happens after you
   send it, and the form itself. Below 768px the aside collapses to a single
   reassurance line so the form is above the fold on a phone.
   -------------------------------------------------------------------------- */
.consult {
  --bs-modal-width: 940px;
  --bs-modal-border-radius: var(--r-lg);
  --bs-modal-border-width: 0;
  --bs-modal-padding: 0;
  --bs-modal-bg: var(--c-white);
  --bs-backdrop-bg: #06101c;
  --bs-backdrop-opacity: 0.62;
}

.consult .modal-content {
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(6, 16, 28, 0.35);
}

/* Bootstrap's default is a 50px slide; this reads as a lift instead. */
.consult .modal-dialog {
  transform: translateY(18px) scale(0.985);
  transition: transform var(--t-slow), opacity var(--t-slow);
}

.consult.show .modal-dialog {
  transform: none;
}

.consult__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
}

/* ---- aside ---------------------------------------------------------- */
.consult__aside {
  position: relative;
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.15rem);
  color: var(--c-white);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(82, 171, 255, 0.42) 0%, rgba(82, 171, 255, 0) 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(0, 129, 189, 0.45) 0%, rgba(0, 129, 189, 0) 62%),
    var(--c-navy-700);
  overflow: hidden;
}

/* Faint circuit grid — the same motif the hero illustrations use. */
.consult__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

.consult__aside > * {
  position: relative;
}

.consult__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.consult__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: #5be08a;
  box-shadow: 0 0 0 0 rgba(91, 224, 138, 0.7);
  animation: consult-pulse 2.4s var(--ease) infinite;
}

@keyframes consult-pulse {
  70% { box-shadow: 0 0 0 8px rgba(91, 224, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 224, 138, 0); }
}

.consult__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-white);
  margin: 1rem 0 0.6rem;
}

.consult__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.6rem;
}

.consult__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.9rem;
}

.consult__steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.consult__steps b {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

.consult__num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.consult__direct {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 0.45rem;
}

.consult__direct a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

.consult__direct a:hover {
  color: var(--c-accent);
}

.consult__direct svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.75;
}

/* ---- form ----------------------------------------------------------- */
.consult__form {
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.15rem);
}

.consult__form-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin: 0 0 0.35rem;
}

.consult__form-sub {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--c-ink-400);
  margin: 0 0 1.4rem;
}

/* The interest chips are real radios — keyboard and screen readers get a
   proper single-choice group, the visuals are on the label. */
.consult__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.consult__chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.consult__chip span {
  display: inline-block;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink-500);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.consult__chip input:checked + span {
  border-color: var(--c-primary);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
}

.consult__chip input:focus-visible + span {
  outline: 2px solid var(--bs-focus-ring-color);
  outline-offset: 2px;
}

.consult__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  opacity: 0.9;
  box-shadow: var(--sh-card);
}

.consult__close:hover {
  opacity: 1;
}

/* Success state — swapped in by main.js on submit, replacing the form. */
.consult__done {
  display: none;
  text-align: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.34rem) 0;
}

.consult__form.is-done .consult__done {
  display: block;
}

.consult__form.is-done form,
.consult__form.is-done .consult__form-title,
.consult__form.is-done .consult__form-sub {
  display: none;
}

.consult__done-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
}

.consult__done-mark svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 767.98px) {
  .consult__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The three-step explainer is nice on a desktop and in the way on a phone;
     the eyebrow and title carry the same message in two lines. */
  .consult__steps,
  .consult__text {
    display: none;
  }

  .consult__aside {
    padding-block: 1.4rem;
  }

  .consult__title {
    margin-bottom: 1rem;
  }

  .consult__direct {
    padding-top: 1rem;
  }
}

/* --------------------------------------------------------------------------
   FLOATING SUPPORT BUTTON  →  <SupportFab />

   Bottom LEFT on purpose: the back-to-top button already owns the bottom
   right, and a menu that opens upward from the right corner would land on
   top of it the moment the page is scrolled.

   Collapsed it is a single round button. Expanded it stacks three labelled
   actions above itself — call, email, book — which is the whole of what a
   support widget is ever used for.
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  left: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 1020;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  /* The closed menu keeps its layout box (it is hidden with visibility so it
     can animate), which leaves an invisible column of dead clicks above the
     toggle. Only the controls themselves take the pointer. */
  pointer-events: none;
}

.fab__toggle,
.fab__action {
  pointer-events: auto;
}

.fab__toggle {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-navy-700);
  color: var(--c-white);
  box-shadow: 0 10px 26px rgba(0, 42, 85, 0.38);
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}

.fab__toggle:hover {
  background: var(--c-primary);
  transform: translateY(-2px);
}

/* A slow halo so the button is findable without being loud. It is purely
   decorative, so it stops entirely under prefers-reduced-motion (the token
   below resolves the duration to 0s there). */
.fab__toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--c-primary);
  opacity: 0;
  animation: fab-halo 3s var(--ease) infinite;
  pointer-events: none;
}

@keyframes fab-halo {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fab__toggle::before { animation: none; }
}

.fab__icon {
  width: 24px;
  height: 24px;
  grid-area: 1 / 1;
  transition: opacity var(--t-base), transform var(--t-base);
}

.fab__icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
}

.fab.is-open .fab__toggle {
  background: var(--c-navy-900);
}

.fab.is-open .fab__toggle::before {
  animation: none;
}

.fab.is-open .fab__icon--open {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}

.fab.is-open .fab__icon--close {
  opacity: 1;
  transform: none;
}

/* ---- menu ----------------------------------------------------------- */
.fab__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  /* visibility, not display: the actions animate, and a display swap would
     skip the transition entirely. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
}

.fab.is-open .fab__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fab__action {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: none;
  border: 0;
  transform: translateX(-10px);
  opacity: 0;
  transition: transform var(--t-base), opacity var(--t-base);
}

.fab.is-open .fab__action {
  transform: none;
  opacity: 1;
}

/* Staggered so the stack unfolds rather than appearing all at once. */
.fab.is-open .fab__action:nth-child(2) { transition-delay: 0.05s; }
.fab.is-open .fab__action:nth-child(1) { transition-delay: 0.1s; }

.fab__dot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-primary);
  border: 1px solid var(--c-border-mid);
  box-shadow: 0 6px 18px rgba(11, 28, 45, 0.14);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.fab__dot svg {
  width: 19px;
  height: 19px;
}

.fab__action:hover .fab__dot {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

.fab__label {
  padding: 0.38rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--c-navy-900);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(11, 28, 45, 0.2);
}

/* Keep the FAB clear of the fixed footer CTA space on small screens, and
   shrink it so it does not cover a third of the viewport width. */
@media (max-width: 575.98px) {
  .fab__toggle {
    width: 50px;
    height: 50px;
  }

  .fab__dot {
    width: 40px;
    height: 40px;
  }
}

/* When the consultation modal is open Bootstrap fixes the body; the FAB is
   position:fixed and would otherwise float over the backdrop. */
body.modal-open .fab {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   UNLINKED SOCIAL PROFILE  →  <SocialLink disabled />

   Now only the per-person LinkedIn links on the About page team cards: those
   individual profile URLs have not been supplied, and href="#" would scroll
   the page to the top and read as a broken link — so they render as inert
   placeholders instead. Give the <a> a real href and this rule stops matching:
   styling returns to the normal link state with no other change needed.
   (The footer icons now carry the real company profiles.)
   -------------------------------------------------------------------------- */
.is-unlinked {
  cursor: default;
  opacity: 0.45;
}

.is-unlinked:hover {
  opacity: 0.45;
}

/* Sticky column head. Only worth it from lg up, where the heading sits beside
   the content it labels — stacked, it would pin the heading over the column
   below it, so the rule starts at the same breakpoint as the col-lg-4 it is
   used on. */
@media (min-width: 992px) {
  .head_sticky_top {
    position: sticky;
    top: 110px;
  }
}

/* --------------------------------------------------------------------------
   WHY PANEL  →  <WhyPanel />

   The "Why choose SYSIN" block on every solution detail page.

   It used to be a centred heading over two bare tick lists. Seven short
   phrases spread across a 1320px row carried no weight next to the card grid
   above them, and an odd count split 4 / 3 left a visible hole in the bottom
   right of the section.

   It is now one object: a navy rail holding the heading and the ask, and a
   hairline lattice of the reasons beside it — the shape of the sign-off sheet
   an engineer hands over at the end of a deployment. The rail is the only
   dark surface between the banner and the closing CTA, which is what gives
   the middle of these pages something to sit on.
   -------------------------------------------------------------------------- */
.why-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 2fr);
  background: var(--c-white);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-card-hover);
  overflow: hidden;
}

/* ----- Rail ----- */
.why-panel__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  background-color: var(--c-navy-700);
  overflow: hidden;
  isolation: isolate;
}

/* The closing CTA panel's diagonal at a smaller scale, plus one accent glow
   low on the rail so the flat navy has somewhere to fall away to. */
.why-panel__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(92% 62% at 10% 106%, rgba(82, 171, 255, 0.28) 0%, rgba(82, 171, 255, 0) 72%),
    linear-gradient(152deg, rgba(0, 42, 85, 0.97) 0%, rgba(3, 22, 41, 0.97) 100%);
}

/* Mono, spaced and small — the technical register the pill-shaped
   .section-eyebrow cannot carry on a dark surface. It is also the one
   typographic flourish in the block; everything else stays in the body face. */
.why-panel__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}

.why-panel__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.16;
  color: var(--c-white);
  margin: 0 0 0.8rem;
}

.why-panel__lead {
  max-width: 24rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-mist);
  margin: 0;
}

/* Pinned to the foot of the rail so the two columns end together however many
   reasons the page carries. */
.why-panel__rail .arrow-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.9rem;
  color: var(--c-white);
  font-weight: var(--fw-medium);
}

/* Brand blue is too dark to read as a hover state on navy. */
.why-panel__rail .arrow-link:hover,
.why-panel__rail .arrow-link:focus-visible {
  color: var(--c-accent);
}

/* ----- Reasons ----- */
.why-panel__body {
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
}

/* The rules between the reasons are the grid's own gaps showing through: one
   background colour, instead of a border on every cell plus nth-child
   arithmetic to strip the ones on the outside edges. */
.why-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-border-soft);
}

.why-panel__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.95rem 1.15rem 1rem;
  background: var(--c-white);
  transition: background var(--t-base);
}

/* An odd number of reasons would leave the last cell of the grid empty — the
   flaw the old two-column split had. The final reason takes the whole row. */
.why-panel__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.why-panel__item:hover {
  background: var(--c-tint-indigo);
}

/* A rule up the left edge of the hovered cell. The only thing that moves, so
   no neighbour shifts. */
.why-panel__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--c-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base);
}

.why-panel__item:hover::before {
  transform: scaleY(1);
}

.why-panel__mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 0.05rem;
  border-radius: var(--r-pill);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
  transition: background var(--t-base), color var(--t-base);
}

.why-panel__item:hover .why-panel__mark {
  background: var(--c-primary);
  color: var(--c-white);
}

.why-panel__mark svg {
  width: 14px;
  height: 14px;
}

.why-panel__label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--c-navy-900);
}

/* Second line, where the page has one to give — only 3CX does. */
.why-panel__note {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
}

/* The panel takes one [data-reveal]; the reasons tick in under it. Animation
   rather than transition-delay, because a delay on the item would also lag
   its hover state. */
.js .why-panel .why-panel__item {
  opacity: 0;
}

.js .why-panel.is-visible .why-panel__item {
  animation: why-tick 0.45s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 0.055s);
}

.why-panel__item:nth-child(2) { --i: 1; }
.why-panel__item:nth-child(3) { --i: 2; }
.why-panel__item:nth-child(4) { --i: 3; }
.why-panel__item:nth-child(5) { --i: 4; }
.why-panel__item:nth-child(6) { --i: 5; }
.why-panel__item:nth-child(7) { --i: 6; }
.why-panel__item:nth-child(8) { --i: 7; }

@keyframes why-tick {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .why-panel .why-panel__item,
  .js .why-panel.is-visible .why-panel__item {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 1199.98px) {
  .why-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }
}

/* Stacked: the rail becomes a header band across the top of the panel. */
@media (max-width: 991.98px) {
  .why-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .why-panel__lead {
    max-width: none;
  }

  .why-panel__rail .arrow-link {
    padding-top: 1.4rem;
  }
}

@media (max-width: 575.98px) {
  .why-panel__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}