/* =============================================================================
   AREAS BLOCKS — styles for the "Areas: …" ACF blocks
   (template-parts/blocks/areas_*). Loaded by inc/areas.php only on pages that
   contain at least one of these blocks.

   Isolation rules (so nothing here can leak into the theme):
   - design tokens live on .ar-section (root of every block), not :root
   - every class is prefixed with `ar-`
   - resets are scoped to .ar-section (our blocks only). The theme's own blocks
     (awards_block, form_bottom_block, …) sit outside .ar-section and keep the
     theme's styling untouched.
   Section blocks are delimited by START/END markers so they can be split into
   per-block block.css files later without edits.
   ============================================================================= */


/* =============================================================================
   1. TOKENS
   ============================================================================= */
.ar-section {
  /* Colors */
  --ar-brand: #f15f62;
  --ar-primary: #fda26b;
  --ar-ebon-black: #1e1e1e;
  --ar-title: #0c0c0c;
  --ar-text: #2a2a2a;
  --ar-text-default: #343434;
  --ar-text-additional: #5c5c5c;
  --ar-text-muted: #707070;
  --ar-white: #ffffff;
  --ar-black: #000000;
  --ar-bg-default: #f8f7f5;
  --ar-border-dark: #c4b8ab;

  /* Inputs */
  --ar-input-bg: #f1f0ed;
  --ar-input-border: #e5e1da;
  --ar-input-text: #707070;

  /* Buttons */
  --ar-btn-tertiary-text: #e47e37;

  /* Gradients */
  --ar-gradient: linear-gradient(90deg, #f15f62 0%, #fda26b 100%);

  /* Spacing scale (Figma 1rem = 8px) */
  --ar-sp-05: 4px;
  --ar-sp-1: 8px;
  --ar-sp-15: 12px;
  --ar-sp-2: 16px;
  --ar-sp-3: 24px;
  --ar-sp-4: 32px;
  --ar-sp-8: 64px;
  --ar-sp-12: 96px;

  /* Typography — same families the theme ships in /fonts */
  --ar-font-titles: "Unbounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --ar-font-defaults: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout — horizontal gutter follows the theme (1rem mobile / 2.5rem desktop) */
  --ar-gutter: var(--bs-gutter-x, 1rem);
  --ar-container: 1380px;
  --ar-radius-sm: 3px;

  --ar-ease: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================================
   2. SCOPED RESET (only inside our sections)
   ============================================================================= */
.ar-section,
.ar-section *,
.ar-section *::before,
.ar-section *::after {
  box-sizing: border-box;
}

.ar-section {
  position: relative;
  width: 100%;
  margin: 0;
  font-family: var(--ar-font-defaults);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ar-ebon-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ar-section h1,
.ar-section h2,
.ar-section h3,
.ar-section h4,
.ar-section h5,
.ar-section h6,
.ar-section p,
.ar-section figure {
  margin: 0;
}

.ar-section ul,
.ar-section ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-section a {
  color: inherit;
  text-decoration: none;
}

.ar-section img,
.ar-section svg,
.ar-section picture,
.ar-section video {
  display: block;
  max-width: 100%;
  height: auto;
}

.ar-section button,
.ar-section input,
.ar-section textarea,
.ar-section select {
  font: inherit;
  color: inherit;
  margin: 0;
}

.ar-section button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* Container — same width/gutter as the theme's [class*=__container] */
.ar-section__container {
  width: 100%;
  max-width: var(--ar-container);
  margin-inline: auto;
  padding-inline: var(--ar-gutter);
}

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


/* =============================================================================
   3. TYPOGRAPHY (Figma text styles)
   ============================================================================= */
.ar-t-h1 {
  font-family: var(--ar-font-titles);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: normal;
  text-transform: uppercase;
  color: var(--ar-ebon-black);
}

.ar-t-h2 {
  font-family: var(--ar-font-titles);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: normal;
  text-transform: uppercase;
  color: var(--ar-ebon-black);
}

.ar-t-h3 {
  font-family: var(--ar-font-titles);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.25;
  color: var(--ar-ebon-black);
}

.ar-t-hero-subtitle {
  font-family: var(--ar-font-defaults);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
}

.ar-t-h6 {
  font-family: var(--ar-font-titles);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ar-title);
}

.ar-t-subtitle {
  font-family: var(--ar-font-defaults);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
}

/* Gradient-filled text */
.ar-t-gradient {
  background-image: var(--ar-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Common section heading (subtitle + title, centered) */
.ar-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ar-sp-1);
  width: 100%;
  text-align: center;
}

.ar-head__subtitle,
.ar-head__title {
  width: 100%;
}

.ar-head__desc {
  width: 100%;
  font-family: var(--ar-font-defaults);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--ar-text);
}

@media (max-width: 1024px) {
  .ar-head__desc {
    font-size: 16px;
    line-height: 24px;
  }
}


/* =============================================================================
   4. BUTTONS
   ============================================================================= */
.ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ar-brand);
  border-radius: 0;
  font-family: var(--ar-font-defaults);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ar-ease), color var(--ar-ease), opacity var(--ar-ease);
}

/* Outline: gradient text on transparent bg; hover fills with the gradient */
.ar-btn--outline {
  position: relative;
  isolation: isolate;
  padding: 12px 40px;
  font-weight: 500;
  font-size: 20px;
  background: var(--ar-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ar-btn--outline::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  background-image: var(--ar-gradient);
  opacity: 0;
  transition: opacity var(--ar-ease);
}

.ar-btn--outline:hover,
.ar-btn--outline:focus-visible {
  -webkit-text-fill-color: var(--ar-white);
  color: var(--ar-white);
}

.ar-btn--outline:hover::before,
.ar-btn--outline:focus-visible::before {
  opacity: 1;
}

/* Filled: gradient bg, white text */
.ar-btn--gradient {
  position: relative;
  isolation: isolate;
  border: 0;
  padding: 11px 43px;
  font-weight: 700;
  font-size: 24px;
  color: var(--ar-white);
  background: transparent;
}

.ar-btn--gradient::before,
.ar-btn--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ar-btn--gradient::before {
  background-image: var(--ar-gradient);
}

.ar-btn--gradient::after {
  background: var(--ar-brand);
  opacity: 0;
  transition: opacity var(--ar-ease);
}

.ar-btn--gradient:hover::after,
.ar-btn--gradient:focus-visible::after {
  opacity: 0.5;
}

.ar-btn:focus-visible {
  outline: 2px solid var(--ar-brand);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .ar-btn--outline {
    padding: 10px 24px;
    font-size: 16px;
  }
}


/* =============================================================================
   SECTION: HERO — START
   Full-bleed background under the theme's fixed header.
   The theme header is position:fixed (top:24px desktop / 12px mobile, ~83px /
   ~56px tall), so the hero reserves that space with padding-top. The top bar,
   when enabled, is in normal flow and shifts the header and the hero by the
   same 55px — no extra offset needed for it.
   Header → breadcrumbs gap per design: 96px desktop (32 + 64), 48px mobile
   (16 + 32) — set on .ar-hero__content.
   ============================================================================= */
.ar-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding-top: 107px; /* 24px header offset + 83px header height */
  padding-bottom: var(--ar-sp-8);
  background: var(--ar-white);
}

.ar-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ar-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ar-hero__overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 50.14%, rgb(255, 255, 255) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%);
}

.ar-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--ar-sp-8);
  padding-block: var(--ar-sp-12) 0;
}

.ar-hero__left {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-8);
  min-width: 0;
  word-break: break-word;
}

/* Breadcrumbs — the theme's shared component (.hero__breadcrumb + Yoast /
   Rank Math output). Typography/colours are global in css/style.css; here we
   only undo the theme's hero-specific layout (margins, absolute on mobile)
   because in our hero the crumbs sit in a flex column with gap. */
.ar-hero .hero__breadcrumb {
  position: static;
  margin: 0;
  font-size: 14px;
  font-family: var(--ar-font-defaults);
}

/* Fallback markup (no SEO plugin active) */
.ar-hero__breadcrumbs-fallback {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ar-sp-1);
}

.ar-hero__breadcrumbs-fallback a {
  color: var(--ar-text);
  text-decoration: none;
  transition: color var(--ar-ease);
}

.ar-hero__breadcrumbs-fallback a:hover {
  color: var(--ar-brand);
}

.ar-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-3);
  width: 100%;
}

.ar-hero__headings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-15);
  width: 100%;
}

.ar-hero__subtitle,
.ar-hero__title {
  width: 100%;
}

.ar-hero__description {
  width: 100%;
  font-family: var(--ar-font-defaults);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--ar-black);
}

.ar-hero__form {
  flex-shrink: 0;
  width: 488px;
  max-width: 100%;
}

@media (max-width: 1200px) {
  .ar-hero__content { flex-direction: column; gap: var(--ar-sp-8); }
  .ar-hero__left { width: 100%; flex: none; }
  .ar-hero__form { width: 100%; max-width: 488px; }
}

@media (max-width: 1024px) {
  .ar-hero__content { padding-block: var(--ar-sp-8) 0; }
}

@media (max-width: 767px) {
  .ar-hero { padding-top: 68px; } /* 12px header offset + 56px header height */
  .ar-hero__content { padding-block: 48px 0; }
}

@media (max-width: 640px) {
  .ar-hero__text { gap: var(--ar-sp-2); }
  .ar-hero__headings { gap: var(--ar-sp-2); }
  .ar-hero__form { max-width: none; }
}
/* =============================================================================
   SECTION: HERO — END
   ============================================================================= */


/* =============================================================================
   COMPONENT: FORM CARD — START
   White card that wraps a Contact Form 7 form. CF7 markup on this site is
   .contact__form > .col > .contact__form-line > input (see form id 586), so
   the rules below restyle exactly that structure to the Figma card.
   ============================================================================= */
.ar-form-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--ar-sp-1);
  background: var(--ar-white);
  overflow: hidden;
}

.ar-form-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ar-sp-1);
  width: 100%;
  padding: var(--ar-sp-3);
}

.ar-form-card__title {
  width: 100%;
  word-break: break-word;
}

.ar-form-card__body {
  width: 100%;
  padding: var(--ar-sp-3);
}

/* --- CF7 structure ---------------------------------------------------------- */
.ar-form-card .wpcf7 {
  width: 100%;
}

.ar-form-card .wpcf7-form br {
  display: none;
}

.ar-form-card .wpcf7-form .contact__form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-1); /* 8px between inputs (design) */
  width: 100%;
  margin: 0;
}

/* 16px (8 + 8) before the acceptance row (design); the submit button gets
   the same extra 8px in its own rule below */
.ar-form-card .contact__form .col:has(.wpcf7-acceptance) {
  margin-top: var(--ar-sp-1);
}

.ar-form-card .contact__form .col {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--ar-sp-1);
  width: 100%;
  margin: 0;
  padding: 0;
}

/* First .col = Name + Last name in one row */
.ar-form-card .contact__form .col:first-child {
  flex-direction: row;
  flex-wrap: nowrap;
}

.ar-form-card .contact__form-line {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  width: 100%;
}

.ar-form-card .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* --- Inputs ------------------------------------------------------------------ */
.ar-form-card .contact__form input[type="text"],
.ar-form-card .contact__form input[type="email"],
.ar-form-card .contact__form input[type="tel"],
.ar-form-card .contact__form input[type="url"],
.ar-form-card .contact__form input[type="number"],
.ar-form-card .contact__form textarea,
.ar-form-card .contact__form select {
  display: block;
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: calc(var(--ar-sp-05) + var(--ar-sp-1)) calc(var(--ar-sp-05) + var(--ar-sp-15));
  font-family: var(--ar-font-defaults);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ar-ebon-black);
  background: var(--ar-input-bg);
  border: 1px solid var(--ar-input-border);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  transition: border-color var(--ar-ease), background-color var(--ar-ease);
  -webkit-appearance: none;
  appearance: none;
}

.ar-form-card .contact__form input::placeholder,
.ar-form-card .contact__form textarea::placeholder {
  color: var(--ar-input-text);
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  opacity: 1;
}

.ar-form-card .contact__form input:focus,
.ar-form-card .contact__form textarea:focus {
  border-color: var(--ar-brand);
  background: var(--ar-white);
}

.ar-form-card .contact__form textarea {
  min-height: 96px;
  height: 96px; /* design: 96px incl. border; CF7 rows attr would make it 98px */
  resize: vertical;
}

.ar-form-card .contact__form .wpcf7-not-valid {
  border-color: var(--ar-brand);
}

/* --- Acceptance checkbox ---------------------------------------------------- */
.ar-form-card .wpcf7-acceptance {
  margin: 0;
}

.ar-form-card .wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
}

.ar-form-card .wpcf7-acceptance label {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  text-transform: none;
}

.ar-form-card .wpcf7-acceptance .wpcf7-list-item-label {
  display: flex;
  align-items: center;
  gap: var(--ar-sp-1);
  padding: var(--ar-sp-1) 0;
  font-family: var(--ar-font-defaults);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.125;
  text-transform: none;
  color: var(--ar-text-muted);
}

.ar-form-card .wpcf7-acceptance input[type="checkbox"] + .wpcf7-list-item-label::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 3px var(--ar-sp-1) 3px 3px;
  border: 2px solid var(--ar-btn-tertiary-text);
  border-radius: var(--ar-radius-sm);
  background-color: transparent;
  transition: background-color var(--ar-ease);
}

.ar-form-card .wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  border-color: var(--ar-btn-tertiary-text);
  background-color: rgba(228, 126, 55, 0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16602 9.99967L8.33268 14.1663L16.666 5.83301' stroke='%23e47e37' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

.ar-form-card .wpcf7-acceptance input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid var(--ar-brand);
  outline-offset: 2px;
}

/* --- Submit --------------------------------------------------------------- */
.ar-form-card .wpcf7-form input[type="submit"],
.ar-form-card .wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: 0;
  margin: var(--ar-sp-1) 0 0; /* 8px + form gap 8px = 16px above the button */
  padding: 11px 43px;
  border: 0;
  border-radius: 0;
  font-family: var(--ar-font-defaults);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ar-white);
  background: var(--ar-gradient);
  cursor: pointer;
  transition: opacity var(--ar-ease), box-shadow var(--ar-ease);
}

.ar-form-card .wpcf7-form input[type="submit"]:hover,
.ar-form-card .wpcf7-form input[type="submit"]:focus-visible {
  color: var(--ar-white);
  background: var(--ar-gradient);
  box-shadow: inset 0 0 0 100vmax rgba(241, 95, 98, 0.5);
}

/* --- Validation / response messages ----------------------------------------- */
.ar-form-card .contact__form .wpcf7-not-valid-tip {
  position: static;
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ar-brand);
  white-space: normal;
}

.ar-form-card .wpcf7-form .wpcf7-response-output {
  width: 100%;
  margin: var(--ar-sp-2) 0 0;
  padding: var(--ar-sp-1) var(--ar-sp-15);
  border: 1px solid var(--ar-brand);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ar-ebon-black);
}

.ar-form-card .wpcf7-form.sent .wpcf7-response-output {
  border-color: #2e9e5b;
}

.ar-form-card .wpcf7-form .wpcf7-spinner {
  position: static;
  margin: 0 0 0 var(--ar-sp-1);
}

@media (max-width: 640px) {
  .ar-form-card__body { padding: var(--ar-sp-3) var(--ar-sp-1); }
}
/* =============================================================================
   COMPONENT: FORM CARD — END
   ============================================================================= */


/* =============================================================================
   SECTION: STATS — START  (gradient bar with animated counters)
   ============================================================================= */
.ar-stats {
  padding: 40px 0;
  background-image: var(--ar-gradient);
}

.ar-stats__list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--ar-white);
}

.ar-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 324px;
  padding-inline: 52px;
  text-align: center;
}

.ar-stats__item + .ar-stats__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 103px;
  background: var(--ar-white);
}

.ar-stats__number {
  font-family: var(--ar-font-titles);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: normal;
  white-space: nowrap;
  color: var(--ar-white);
}

.ar-stats__label {
  font-family: var(--ar-font-defaults);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--ar-white);
}

@media (max-width: 1024px) {
  .ar-stats { padding: 40px 0; }

  .ar-stats__list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
    max-width: 480px;
    margin-inline: auto;
  }

  .ar-stats__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--ar-white);
  }

  .ar-stats__item { width: auto; padding-inline: 12px; }
  .ar-stats__item + .ar-stats__item::before { height: 64px; }
  .ar-stats__item:nth-child(odd)::before { display: none; }
}

@media (max-width: 640px) {
  .ar-stats__label { font-size: 12px; line-height: normal; }
}
/* =============================================================================
   SECTION: STATS — END
   ============================================================================= */


/* =============================================================================
   SECTION: SERVICES — START  (heading + 3 icon cards)
   ============================================================================= */
.ar-services {
  padding: 128px 0 var(--ar-sp-8);
  background: var(--ar-white);
}

.ar-services__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ar-sp-8);
}

/* Mobile-only intro paragraph (present in the 360 mockup only) */
.ar-services__desc {
  display: none;
  margin-top: var(--ar-sp-2);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}

.ar-services__cards {
  display: flex;
  align-items: flex-start;
  gap: var(--ar-sp-8);
  width: 100%;
}

.ar-service-card {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-4);
  min-width: 0;
}

.ar-service-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.ar-service-card__icon img {
  width: 100%;
  height: 100%;
}

.ar-service-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-2);
  width: 100%;
  word-break: break-word;
}

.ar-service-card__title { width: 100%; }

.ar-service-card__text {
  width: 100%;
  font-family: var(--ar-font-defaults);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ar-text-default);
}

@media (max-width: 1024px) {
  .ar-services__cards { flex-direction: column; gap: var(--ar-sp-4); }
  .ar-service-card { flex: none; width: 100%; }
}

@media (max-width: 640px) {
  .ar-services { padding: var(--ar-sp-8) 0 var(--ar-sp-4); }
  .ar-services__inner { gap: var(--ar-sp-4); }
  .ar-services__desc { display: block; }
  .ar-service-card { gap: var(--ar-sp-2); }
}
/* =============================================================================
   SECTION: SERVICES — END
   ============================================================================= */


/* =============================================================================
   SECTION: WHY LOONA — START  (heading + badge | glow divider | 2×2 cards)
   ============================================================================= */
.ar-why {
  padding: var(--ar-sp-8) 0;
  background: var(--ar-white);
}

.ar-why__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ar-sp-8);
}

.ar-why__grid {
  display: flex;
  align-items: center;
  gap: var(--ar-sp-8);
  width: 100%;
}

.ar-why__media {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ar-why__media img {
  height: 100%;
  max-height: 480px;
  width: auto;
}

.ar-why__divider {
  position: relative;
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background: var(--ar-bg-default);
}

.ar-why__divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 1;
  opacity: 0.25;
  background: radial-gradient(circle at 100% 50%, rgb(253, 162, 107) 0%, rgba(241, 95, 98, 0) 65%);
  pointer-events: none;
}

.ar-why__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ar-sp-8);
  flex: 1 0 0;
  min-width: 0;
}

.ar-why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-2);
  word-break: break-word;
}

.ar-why-card__title { width: 100%; }

.ar-why-card__text {
  width: 100%;
  font-family: var(--ar-font-defaults);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ar-text-default);
}

@media (max-width: 1200px) {
  .ar-why__grid { gap: var(--ar-sp-4); }
  .ar-why__cards { gap: var(--ar-sp-4); }
  .ar-why__media img { max-height: 380px; }
}

@media (max-width: 1024px) {
  .ar-why { padding: var(--ar-sp-4) 0; }
  .ar-why__inner { gap: var(--ar-sp-4); }
  .ar-why__grid { flex-direction: column; gap: var(--ar-sp-4); }

  .ar-why__media {
    align-self: center;
    width: 100%;
    max-width: 480px;
  }

  .ar-why__media img { width: 100%; height: auto; max-height: none; }

  .ar-why__divider { align-self: auto; width: 100%; height: 1px; }

  .ar-why__divider::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    aspect-ratio: auto;
    background: radial-gradient(ellipse 50% 100% at 50% 100%, rgb(253, 162, 107) 0%, rgba(241, 95, 98, 0) 70%);
  }

  .ar-why__cards {
    display: flex;
    flex-direction: column;
    gap: var(--ar-sp-4);
    width: 100%;
  }

  .ar-why-card { gap: var(--ar-sp-1); }
}
/* =============================================================================
   SECTION: WHY LOONA — END
   ============================================================================= */


/* =============================================================================
   SECTION: MARKETS (Local SEO) — START
   Desktop: 3-column grid. Mobile: scroll-snap slider with next-card peek.
   ============================================================================= */
.ar-markets {
  padding: var(--ar-sp-8) 0;
  background: var(--ar-white);
}

.ar-markets__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ar-sp-8);
}

.ar-markets__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ar-sp-1);
  align-items: stretch; /* cards in a row share the same height */
  width: 100%;
}

.ar-market-card {
  display: flex;
  flex-direction: column;
  gap: var(--ar-sp-1);
  height: 100%;
  padding: var(--ar-sp-1);
  border: 1px solid var(--ar-border-dark);
  background: var(--ar-white);
  overflow: hidden;
}

.ar-market-card__photo {
  width: 100%;
  height: 324px;
}

.ar-market-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ar-market-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-2);
  width: 100%;
  padding: var(--ar-sp-3);
  word-break: break-word;
}

.ar-market-card__title { width: 100%; }

.ar-market-card__text {
  width: 100%;
  font-family: var(--ar-font-defaults);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ar-text-default);
}

.ar-market-card__links {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ar-market-card__link {
  display: flex;
  align-items: center;
  gap: var(--ar-sp-1);
  width: 100%;
  padding: var(--ar-sp-15) 0;
  font-family: var(--ar-font-defaults);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-transform: capitalize;
  color: var(--ar-title);
  transition: color var(--ar-ease);
}

.ar-market-card__link img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--ar-ease);
}

.ar-market-card__link:hover,
.ar-market-card__link:focus-visible {
  color: var(--ar-brand);
}

.ar-market-card__link:hover img,
.ar-market-card__link:focus-visible img {
  transform: translateX(4px);
}

@media (max-width: 1200px) {
  .ar-market-card__photo { height: 260px; }
}

@media (max-width: 1024px) {
  .ar-markets { padding: var(--ar-sp-4) 0; }
  .ar-markets__inner { gap: var(--ar-sp-4); }

  .ar-markets__cards {
    display: flex;
    gap: var(--ar-sp-1);
    width: calc(100% + 2 * var(--ar-gutter));
    margin-inline: calc(-1 * var(--ar-gutter));
    padding-inline: var(--ar-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ar-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ar-markets__cards::-webkit-scrollbar { display: none; }

  .ar-market-card {
    flex: 0 0 85%;
    max-width: 420px;
    scroll-snap-align: start;
  }

  .ar-market-card__photo { height: 240px; }
}

@media (max-width: 640px) {
  .ar-market-card__body { padding: var(--ar-sp-2); }
}
/* =============================================================================
   SECTION: MARKETS — END
   ============================================================================= */


/* =============================================================================
   SECTION: TEAM — START
   Desktop: 4-column grid. Mobile: scroll-snap slider + "Show more" button.
   ============================================================================= */
.ar-team {
  padding: var(--ar-sp-8) 0;
  background: var(--ar-white);
}

.ar-team__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ar-sp-8);
}

.ar-team__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ar-sp-8) var(--ar-sp-1);
  align-items: start;
  width: 100%;
}

.ar-person-card {
  display: flex;
  flex-direction: column;
  background: var(--ar-bg-default);
  overflow: hidden;
}

.ar-person-card__photo {
  width: 100%;
  aspect-ratio: 300 / 400;
}

.ar-person-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ar-person-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ar-sp-05);
  width: 100%;
  padding: var(--ar-sp-3);
}

.ar-person-card__name {
  width: 100%;
  font-family: var(--ar-font-titles);
  font-weight: 700;
  font-size: clamp(28px, 2.1vw, 40px);
  line-height: normal;
  text-transform: uppercase;
  color: var(--ar-title);
  word-break: break-word;
}

.ar-person-card__meta {
  display: flex;
  align-items: center;
  width: 100%;
}

.ar-person-card__role {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--ar-font-defaults);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ar-text-additional);
  word-break: break-word;
}

.ar-person-card__btn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--ar-sp-15);
  border: 1px solid var(--ar-btn-tertiary-text);
  transition: background-color var(--ar-ease);
}

.ar-person-card__btn img {
  width: 24px;
  height: 24px;
  transition: transform var(--ar-ease);
}

.ar-person-card__btn:hover,
.ar-person-card__btn:focus-visible {
  background: rgba(228, 126, 55, 0.1);
}

.ar-person-card__btn:hover img,
.ar-person-card__btn:focus-visible img {
  transform: translateX(3px);
}

.ar-team__more {
  display: none;
  align-self: center;
}

@media (max-width: 1024px) {
  .ar-team { padding: var(--ar-sp-4) 0; }
  .ar-team__inner { gap: var(--ar-sp-4); }

  .ar-team__list {
    display: flex;
    gap: var(--ar-sp-1);
    width: calc(100% + 2 * var(--ar-gutter));
    margin-inline: calc(-1 * var(--ar-gutter));
    padding-inline: var(--ar-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ar-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ar-team__list::-webkit-scrollbar { display: none; }

  /* Design (360): card = container width minus 8px, so the next card peeks
     by the right gutter (16px) — the card sits centred with small gutters. */
  .ar-person-card {
    flex: 0 0 calc(100% - var(--ar-sp-1));
    max-width: 400px;
    scroll-snap-align: start;
  }

  .ar-person-card__name { font-size: 40px; }
  .ar-team__more { display: inline-flex; }
}
/* =============================================================================
   SECTION: TEAM — END
   ============================================================================= */


/* =============================================================================
   SECTION: FAQ — START  (two-column accordion, CSS grid-rows animation)
   ============================================================================= */
.ar-faq {
  padding: var(--ar-sp-8) 0;
  background: var(--ar-white);
}

.ar-faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ar-sp-8);
}

.ar-faq__cols {
  display: flex;
  align-items: flex-start;
  gap: var(--ar-sp-1);
  width: 100%;
}

.ar-faq__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--ar-sp-05);
  min-width: 0;
}

.ar-faq-item {
  width: 100%;
  padding: var(--ar-sp-3);
  background: var(--ar-bg-default);
}

.ar-faq-item__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--ar-sp-2);
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
}

.ar-faq-item__question {
  flex: 1 0 0;
  min-width: 0;
  align-self: center;
  font-family: var(--ar-font-titles);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ar-ebon-black);
  word-break: break-word;
}

.ar-faq-item__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  transition: transform var(--ar-ease);
}

.ar-faq-item.is-open .ar-faq-item__icon {
  transform: rotate(180deg);
}

.ar-faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ar-ease);
}

.ar-faq-item.is-open .ar-faq-item__panel {
  grid-template-rows: 1fr;
}

.ar-faq-item__panel-inner {
  overflow: hidden;
}

.ar-faq-item__divider {
  width: 100%;
  height: 1px;
  margin-top: var(--ar-sp-2);
  background: var(--ar-border-dark);
}

.ar-faq-item__answer {
  padding-top: var(--ar-sp-2);
  font-family: var(--ar-font-defaults);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ar-text);
  word-break: break-word;
}

.ar-faq-item__answer p {
  margin: 0 0 var(--ar-sp-1);
}

.ar-faq-item__answer p:last-child {
  margin-bottom: 0;
}

.ar-faq-item__answer a {
  background-image: var(--ar-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--ar-brand);
  text-underline-position: from-font;
}

@media (max-width: 1024px) {
  .ar-faq { padding: var(--ar-sp-4) 0; }
  .ar-faq__inner { gap: var(--ar-sp-4); }
  .ar-faq__cols { flex-direction: column; gap: var(--ar-sp-05); }
  .ar-faq__col { flex: none; width: 100%; }
}

@media (max-width: 640px) {
  .ar-faq-item { padding: var(--ar-sp-2); }
}
/* =============================================================================
   SECTION: FAQ — END
   ============================================================================= */