/* ============================================================
   FEDES Design System / Utilities
   Single stylesheet version
   ============================================================ */

/* Fonts are loaded via <link> in the layout <head> (faster than @import). */

:root {
  --color-primary: #0E5895;
  --color-link-hover: var(--color-primary);
  --color-accent: #E26900;
  --color-accent-hover: #C45D00;
  --color-accent-soft: #FCEAE5;
  --color-dark: #000000;
  --color-dark-soft: #111111;
  --color-white: #FFFFFF;
  --color-dark-rgb: 0 0 0;
  --color-dark-soft-rgb: 17 17 17;
  --color-white-rgb: 255 255 255;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #C9C9C9;
  --color-gray-400: #8D8D8D;
  --color-gray-500: #6B6B6B;
  --color-gray-600: #444444;
  --color-border: #C9C9C9;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 23px;
  --text-3xl: 25px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-6xl: 50px;

  --h1-size: 50px;
  --h2-size: 50px;
  --h3-size: 25px;
  --h4-size: 20px;
  --h5-size: 16px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 120%;
  --lh-snug: 130%;
  --lh-normal: 150%;
  --lh-relaxed: 180%;

  --ls-tight: -0.5px;
  --ls-normal: 0px;

  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  --container-max: 1440px;
  --container-padding: 90px;
  --container-padding-mobile: 20px;
  --section-space: 50px;
  --section-frame-radius: 20px;

  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-2xl: 30px;
  --radius-pill: 9999px;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .14);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, .16);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* clip (not hidden) so position:sticky keeps working */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  /* Horizontal overflow is clipped on <html> only. Clipping it here too breaks
     position:sticky for descendants on mobile Safari/WebKit. */
}
.rich-text a, p a{
    text-decoration: underline;
    color: var(--color-primary);
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Smooth fade-in for lazy images that load on scroll (no abrupt "pop").
   The .img-fade class is added by JS only to images that aren't loaded yet,
   so already-loaded / above-the-fold images never flicker, and images are
   never left hidden if JS doesn't run. */
.img-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.img-fade.is-loaded {
  opacity: 1;
}

/* Editor / rich-text content — preserve paragraph spacing from the editor while
   inheriting the surrounding container's typography (use on any element that
   outputs admin editor HTML, e.g. <div class="... rich-text">{!! ... !!}</div>). */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }

.rich-text p {
  font: inherit;
  color: inherit;
  margin: 0 0 1em;
}

.rich-text p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-dark);
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--lh-snug);
}

h4 {
  font-size: var(--h4-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h5 {
  font-size: var(--h5-size);
  line-height: var(--lh-normal);
}

h6 {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-600);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.primary {
  color: var(--color-primary);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section-frame1 {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--section-frame-radius);
  padding: 70px 45px;
}

.section-frame2 {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--section-frame-radius);
  padding: 30px 45px;
}

.section-mb {
  margin-bottom: var(--section-space);
}

.section-my {
  margin-top: var(--section-space);
  margin-bottom: var(--section-space);
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--color-accent);
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: end;
}

.section-header__title {
  max-width: 800px;
  margin-top: var(--space-3);
}

.section-header__cta {
  align-self: center;
  justify-self: start;
}

.section-header--center {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  grid-template-columns: 1fr;
}

.section-header--center .section-header__title {
  max-width: none;
  margin-top: var(--space-2);
}

.section-badge::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  flex: 0 0 20px;
  background: currentColor;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-8 {
  gap: var(--space-8);
}

.grid {
  display: grid;
}

.mt-38 {
  margin-top: 38px;
}

.py-26 {
  padding-top: 26px;
  padding-bottom: 26px;
}

.border-y {
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
}

.inline-flex {
  display: inline-flex;
}

.w-full {
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  padding: 15px var(--space-8);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid rgba(26, 60, 110, 0.28);
  outline-offset: 3px;
}

.btn-light {
  background: var(--color-white);
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.btn-light:hover,
.btn-light:focus-visible {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn-dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.btn-arrow::after {
  content: '\f061';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  font-family: 'Font Awesome 6 Free';
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-4px);
  transition:
    width var(--transition-base),
    opacity var(--transition-base),
    margin-left var(--transition-base),
    transform var(--transition-base);
}

.btn-arrow:hover::after,
.btn-arrow:focus-visible::after {
  width: 16px;
  opacity: 1;
  margin-left: var(--space-2);
  transform: translateX(0);
}

.btn-sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
}

.btn-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background: transparent;
  transition: all var(--transition-fast);
}

.btn-tag:hover,
.btn-tag.active {
  background: var(--color-white);
  color: var(--color-primary);
}

@media (max-width: 1240px) {
  :root {
    --h1-size: 28px;
    --h2-size: 28px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }

  :root {
    --section-space: 60px;
    --h1-size: 23px;
    --h2-size: 23px;
    --h3-size: 17px;
    --h4-size: 16px;
    --h5-size: 16px;
  }

  .section-badge {
    font-size: 13px;
  }

  h6 {
    font-size: 14px;
  }

  .btn {
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-6);
  }

  .hide-mobile {
    display: none !important;
  }

  .mobile-gap-5 {
    gap: var(--space-5) !important;
  }

  .mobile-mt-10 {
    margin-top: var(--space-10) !important;
  }

  .mobile-mt-22 {
    margin-top: 22px !important;
  }

  .mobile-mb-0 {
    margin-bottom: 0 !important;
  }

  .mobile-mb-60 {
    margin-bottom: 60px !important;
  }

  .mobile-py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-border-0 {
    border: 0 !important;
  }

  .mobile-bg-light {
    background: var(--color-gray-100) !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-padding: 40px;
  }
}

/* ============================================================
   FEDES Header / Footer / Hero Preview
   ============================================================ */

.site-header {
  position: relative;
  z-index: 30;
  padding-top: 36px;
  padding-bottom: var(--space-10);
  /* ── Opened-menu position (desktop) ──
     Both the simple dropdown and the mega menu open from the header's bottom
     line. To move BOTH up/down together, change --header-flyout-gap (gap below
     the header line). --header-dropdown-lift is the fixed distance from a nav
     item's bottom down to that line — only fine-tune it if the dropdown sits a
     little higher/lower than the mega. */
  --header-flyout-gap: 14px;
  --header-dropdown-lift: 33px;
}

.site-header__shell {
  position: relative;
}

.site-header__bar {
  justify-content: flex-start;
}

.site-header__brand img {
  width: 136px;
  height: auto;
}

.site-header__nav {
  margin-left: auto;
}

.site-header__nav-list {
  gap: var(--space-2);
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 28px;
  color: var(--color-dark-soft);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast);
}

.site-header__nav-link:hover,
.site-header__nav-link.active,
.site-header__nav-link[aria-expanded='true'] {
  color: var(--color-link-hover);
}

.site-header__nav-link--toggle {
  padding-right: 10px;
}

.site-header__chevron {
  font-size: 11px;
  line-height: 1;
  transition: transform var(--transition-base);
}

.site-header__nav-link[aria-expanded='true'] .site-header__chevron {
  transform: rotate(180deg);
}

.site-header__actions {
  gap: 20px !important;
  margin-left: 20px;
}

.site-header__mobile-toggle,
.mobile-menu__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.site-header__mobile-toggle img {
  width: 28px;
  height: auto;
}

.mobile-menu__icon-button i {
  font-size: 28px;
  line-height: 1;
  color: var(--color-dark-soft);
}

.site-header__mega {
  position: absolute;
  top: calc(100% + var(--header-flyout-gap));
  left: 0;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--section-frame-radius);
  padding: var(--space-7) var(--space-9) var(--space-8);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.site-header__mega.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.site-header__mega-inner {
  display: grid;
  gap: var(--space-6);
}

.site-header__mega-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.site-header__mega-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.site-header__mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 48px;
}

.site-header__mega-title {
  padding-bottom: 16px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--color-gray-400);
  border-bottom: 1px solid var(--color-gray-200);
}

.site-header__mega-title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.site-header__mega-title a:hover,
.site-header__mega-title a.active {
  color: var(--color-link-hover);
}

.site-header__mega-links {
  display: grid;
  gap: 14px;
}

.site-header__mega-link {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-dark-soft);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-header__mega-link:hover {
  color: var(--color-link-hover);
  transform: translateX(4px);
}

.site-header__mega-link.active {
  color: var(--color-link-hover);
  font-weight: var(--fw-semibold);
}

.site-header__mega-link--featured {
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
}

.site-header__mega-link--featured:hover {
  transform: none;
  border-color: var(--color-primary);
}

.site-header__mega-link-summary {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--color-gray-400);
}

/* ── Desktop simple dropdown (non-mega children) ── */
.site-header__dropdown {
  position: absolute;
  top: calc(100% + var(--header-dropdown-lift) + var(--header-flyout-gap));
  left: 0;
  min-width: 290px;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 50;
}

/* Invisible bridge spanning the gap between the nav item and the dropdown so
   moving the mouse down doesn't drop the :hover and close the menu. */
.site-header__dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--header-dropdown-lift) + var(--header-flyout-gap)));
  height: calc(var(--header-dropdown-lift) + var(--header-flyout-gap));
}

/* 2nd-level flyout submenu (a dropdown child that has its own children) */
.site-header__dropdown-item {
  position: relative;
}

.site-header__dropdown-caret {
  font-size: 11px;
  line-height: 1;
  color: var(--color-gray-400);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-header__dropdown-item.has-children:hover > .site-header__dropdown-link .site-header__dropdown-caret,
.site-header__dropdown-item.has-children:focus-within > .site-header__dropdown-link .site-header__dropdown-caret {
  color: var(--color-link-hover);
  transform: translateX(2px);
}

.site-header__submenu {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 100%;
  min-width: 270px;
  padding: var(--space-3);
  margin-left: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 60;
}

.site-header__dropdown-item.has-children:hover > .site-header__submenu,
.site-header__dropdown-item.has-children:focus-within > .site-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.site-header__nav-item--dropdown:hover .site-header__dropdown,
.site-header__nav-item--dropdown:focus-within .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-dark-soft);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link.active {
  background: var(--color-gray-100);
  color: var(--color-link-hover);
}

.site-header__overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: rgb(var(--color-dark-soft-rgb) / 18%);
  backdrop-filter: blur(3px);
  transition: opacity var(--transition-base);
  z-index: 48;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(100vw, 390px);
  height: 100vh;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 49;
  overflow: hidden;
}

.mobile-menu__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.mobile-menu__panel {
  width: 100%;
  height: 100%;
  padding: var(--space-8) var(--space-8) var(--space-9);
  overflow-y: auto;
}

/* Sub-panels stack above root and slide in from the right */
.mobile-menu__panel--sub {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 2;
}

.mobile-menu__panel--sub.is-active {
  transform: translateX(0);
}

.mobile-menu__top {
  min-height: 47px;
  margin-bottom: 34px;
}

.mobile-menu__list {
  border-top: 1px solid var(--color-gray-200);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-6) 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--color-dark-soft);
  border-bottom: 1px solid var(--color-gray-200);
}

.mobile-menu__link--button {
  text-align: left;
}

.mobile-menu__link:hover,
.mobile-menu__link.active {
  color: var(--color-link-hover);
}

.mobile-menu__arrow {
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}

.mobile-menu__footer {
  padding-top: 28px;
}

.mobile-menu__subheader {
  padding-bottom: 20px;
  margin-bottom: 12px;
}

.mobile-menu__text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  color: var(--color-dark-soft);
}

.mobile-menu__text-button i {
  font-size: 20px;
  line-height: 1;
}

.mobile-menu__panel-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-dark-soft);
}

.mobile-menu__services {
  display: grid;
  gap: 22px;
}

.mobile-menu__service-title {
  padding-bottom: 14px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-gray-400);
  border-bottom: 1px solid var(--color-gray-200);
}

.mobile-menu__service-links {
  display: grid;
  gap: 14px;
}

.mobile-menu__service-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-dark-soft);
  transition: color var(--transition-fast);
}

.mobile-menu__service-link:hover,
.mobile-menu__service-link.active {
  color: var(--color-link-hover);
}

/* Nested (grandchild) links under a mobile dropdown child */
.mobile-menu__service-sublinks {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--color-gray-200);
}

.mobile-menu__service-link--sub {
  font-size: 14px;
  color: var(--color-gray-500);
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .site-header__overlay {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .mobile-menu {
  transform: translateX(0);
}

/* (legacy 2-panel slide removed — sub-panels now slide individually) */

.hero-preview {
  position: relative;
}

.hero-preview__shell {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 500px);
  gap: clamp(28px, 6vw, 95px);
  align-items: start;
}

.hero-preview__content {
  max-width: 550px;
}

.hero-preview__content h1 {
  max-width: 550px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.hero-preview__content p {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.01em;
  color: var(--color-dark);
}

.hero-preview__cta {
  margin-top: var(--space-5);
}

.hero-preview__quote {
  justify-self: end;
  width: 100%;
  max-width: 500px;
  /* overflow: visible — lets phone dropdown appear below field */
  overflow: visible;
  border: none;
  border-radius: var(--radius-lg);
  background:
    var(--color-primary) url('../img/banner-form-bg.png') center bottom / cover no-repeat;
  box-shadow: none;
}

.appointment-card {
  position: relative;
  height: 100%;
  min-height: 452px;
  padding: 37px 63px;
  color: var(--color-white);
  /* Match parent border-radius so corners stay visually clean */
  border-radius: var(--radius-lg);
}

.appointment-card>* {
  position: relative;
  z-index: 1;
}

/* Fields container sits above submit button so dropdown overlays it correctly */
.appointment-card__fields {
  position: relative;
  z-index: 3;
}

/* Phone field elevates within its stacking context */
.appointment-card__field:has(.appointment-card__phone) {
  z-index: 4;
}

.appointment-card__header {
  margin-bottom: 24px;
}

.appointment-card__header .heading {
  font-size: 25px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.appointment-card__header .text {
  margin-top: var(--space-1);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 24.3px;
  color: var(--color-white);
}

.appointment-card__fields {
  display: grid;
  gap: 13px;
}

.appointment-card__field {
  display: grid;
  gap: 0;
}

.appointment-card__field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}

/* Home hero form: narrower Business Name, wider Upload field */
#hero-quote-form .appointment-card__field-row {
  grid-template-columns: repeat(2, 1fr);
}

.appointment-card__field-row .appointment-card__field {
  min-width: 0;
  width: 100%;
}

.appointment-card .form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: rgb(var(--color-white-rgb) / 92%);
}

.appointment-card .form-input {
  display: block;
  width: 100%;
  min-height: 49px;
  padding: 12px var(--space-4);
  font-size: 13px;
  border-color: transparent;
  border-radius: 5px;
  outline: none !important;
  box-shadow: none !important;
}

.appointment-card .form-input:focus,
.appointment-card .form-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.appointment-card__upload {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 49px;
  padding: 12px var(--space-4);
  font-size: 13px;
  background: var(--color-white);
  border-radius: 5px;
  color: var(--color-primary);
  cursor: pointer;
}

.appointment-card__upload-text {
  min-width: 0;
  overflow: hidden;
  color: var(--color-gray-400);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-card__upload i {
  flex: 0 0 auto;
  font-size: 16px;
}

/* ── Phone wrapper ── */
.appointment-card__phone {
  display: block;
  position: relative;
  /* iti positions dropdown relative to this */
  min-height: 49px;
  background: var(--color-white);
  border-radius: 5px;
  overflow: visible;
}

.appointment-card__phone .iti {
  display: block;
  width: 100%;
  position: relative;
}

.appointment-card__phone .iti input,
.appointment-card__phone .form-input {
  width: 100%;
  min-height: 49px;
  border: 0 !important;
  border-radius: 5px !important;
  font-size: 13px;
  color: var(--color-dark-soft);
  background: transparent;
}

/* allow-dropdown default is a fixed 52px — use % so it adjusts with width */
.appointment-card__phone .iti--allow-dropdown input[type="tel"] {
  padding-left: 2% !important;
}

/* separateDialCode=true — iti adds its own padding for flag+code */
.appointment-card__phone .iti--separate-dial-code input {
  padding-left: 94px !important;
}

.appointment-card__phone .iti__selected-flag {
  background: transparent !important;
}

.appointment-card__phone .iti__selected-dial-code {
  font-size: 12px;
  color: var(--color-gray-500);
}

/*
  Phone dropdown positioning trick:
  - .iti__flag-container default is position:relative → dropdown is as narrow as the flag
  - Setting it to position:static means the dropdown finds .iti as its positioned ancestor
  - .iti is position:relative + full width → dropdown gets full input width
*/
.appointment-card__phone .iti {
  position: relative;
  display: flex;
  width: 100%;
  z-index: 5;
}

#hero-quote-form-phone {
  padding-left: 10px !important;
}

.appointment-card__phone .iti__flag-container {
  position: static !important;
}

/* Dropdown list — positioned relative to .iti (full width) */
.appointment-card__phone .iti__country-list {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-size: 13px !important;
  padding: 4px 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

.appointment-card__phone .iti__country-list.iti__hide {
  display: none !important;
}

/* List items */
.appointment-card__phone .iti__country {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: background .12s;
  white-space: nowrap;
}

.appointment-card__phone .iti__country:hover,
.appointment-card__phone .iti__country.iti__highlight {
  background: var(--color-gray-100) !important;
}

.appointment-card__phone .iti__flag-box {
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

.appointment-card__phone .iti__country-name {
  font-size: 13px !important;
  color: var(--color-dark-soft) !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appointment-card__phone .iti__dial-code {
  font-size: 12px !important;
  color: var(--color-gray-400) !important;
  margin-left: auto !important;
}

.appointment-card__phone .iti__divider {
  border-color: var(--color-gray-200) !important;
  margin: 4px 0 !important;
}

/* ── Field errors ── */
.field-error {
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.35;
  /* Reserve space even when empty to avoid layout shifts. */
  /* min-height: 18px; */
}

/* Only style as a chip when there is an actual message — keeps it readable on
   ANY background (blue hero card or white contact page) without an empty bar. */
.field-error:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 600;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #fecdca;
  border-radius: 6px;
}

.field-error:not(:empty)::before {
  content: "\f071";
  /* triangle-exclamation */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
}

.form-input.is-invalid {
  outline: 2px solid #f04438;
  outline-offset: 1px;
}

/* ── Form status message (success / error) ── */
.form-messages {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-messages::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
  line-height: 1.4;
  flex-shrink: 0;
}

.form-messages.msg-success {
  color: #027a48;
  background: #ecfdf3;
  border-color: #a6f4c5;
}

.form-messages.msg-success::before {
  content: "\f058";
  /* circle-check */
}

.form-messages.msg-error {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}

.form-messages.msg-error::before {
  content: "\f06a";
  /* circle-exclamation */
}

/* ── Submit button ── */
.appointment-card__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 49px;
  margin-top: var(--space-5);
  font-size: 15px;
  font-weight: 600;
  border-color: transparent;
  position: relative;
  z-index: 1;
  /* explicitly lower than fields (z-index:3) and dropdown (z-index:9999) */
}

.appointment-card__submit:hover,
.appointment-card__submit:focus-visible {
  border-color: transparent;
}


/* ============================================================
   FEDES Home - Who We Are Section
   ============================================================ */
.home-who-section__shell {
  display: grid;
  grid-template-columns: minmax(280px, 480px) minmax(300px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.home-who-section__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 40px;
}

.home-who-section__content .section-badge {
  display: inline-flex;
}

.home-who-section__content h2 {
  margin-top: var(--space-3);
}

.home-who-section__content>p {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.home-who-section__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.home-who-section__point {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.home-who-section__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  background: var(--color-primary);
  border-radius: 50%;
  color: var(--color-white);
  font-size: 10px;
  line-height: 1;
}

.home-who-section__cta {
  display: inline-flex;
  margin-top: var(--space-6);
}

/* ============================================================
   FEDES About Section
   ============================================================ */

.about-section__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 8vw, 83px);
  margin-top: var(--space-8);
}

.about-section__body p {
  color: var(--color-dark);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
}

.about-section__mobile-cta {
  margin-top: var(--space-6);
}

/* ============================================================
   FEDES Services Strip
   ============================================================ */

.services-strip__shell {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  /* No fixed aspect-ratio — grow to fit content */
  min-height: 260px;
  padding: 52px 48px 60px;
  /* overflow: visible lets the mobile dropdown escape the box */
  overflow: visible;
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  /* border-radius clips the CSS background automatically */
  background: var(--color-primary) url('../img/Frame 1686557020.png') center / cover no-repeat;
}

.services-strip__shell h2 {
  margin-top: var(--space-2);
  font-size: var(--h2-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-white);
}

.services-strip__badge {
  color: var(--color-white);
}

.services-strip__badge::before {
  background: var(--color-accent);
}

.services-strip__tabs {
  gap: 12px;
  width: 100%;
  max-width: 1000px;
  margin-top: var(--space-7);
}

.services-strip__tabs .btn-tag {
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 10px var(--space-6);
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  /* allow wrapping for long names */
}

/* ── Services strip slider (2 rows per slide + numbered pagination) ── */
.services-strip__slider {
  margin-top: var(--space-7);
}

/* Each slide MUST be exactly 100% of the track so translateX(-100%) lands on
   the next slide. (A max-width here shrinks the slide and makes the next
   slide bleed in on the right.) Pills sit in a single centred row. */
.services-strip__slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.services-strip__slide .btn-tag {
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 10px var(--space-6);
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
}

/* Pagination numbers sit on the blue background → white when inactive. */
.services-strip__pagination .trades-slider__dot {
  color: var(--color-white);
}

.services-strip__pagination .trades-slider__dot.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Sample page filter tabs (white background) ── */
.sample-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-10);
}

.sample-filter__tab {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-gray-600);
  background: var(--color-white);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.sample-filter__tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sample-filter__tab.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.services-strip__mobile {
  position: relative;
  width: min(100%, 240px);
  margin-top: var(--space-5);
}

.services-strip__select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-white);
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-pill);
}

.services-strip__select i {
  font-size: 14px;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.services-strip__select[aria-expanded='true'] i {
  transform: rotate(180deg);
}

.services-strip__options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 999;
  display: grid;
  width: 100%;
  min-width: 220px;
  gap: 2px;
  padding: var(--space-2);
  background: rgb(14 88 149 / 96%);
  border: 1px solid rgb(var(--color-white-rgb) / 50%);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(4px);
}

.services-strip__options[hidden] {
  display: none !important;
}

.services-strip__option {
  display: block;
  padding: 9px var(--space-4);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-white);
  text-align: left;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.services-strip__option:hover,
.services-strip__option.active {
  color: var(--color-primary);
  background: var(--color-white);
}

/* ============================================================
   FEDES Trades Slider
   ============================================================ */

.trades-slider {
  width: 100%;
  margin-top: var(--space-12);
  overflow: hidden;
}

.trades-slider__track {
  display: flex;
  transition: transform var(--transition-slow);
}

/* Drag-to-swipe cursor feedback (all sliders) */
.trades-slider__track,
.reviews-slider__track,
.blog-slider__track {
  cursor: grab;
}

.trades-slider__track.is-grabbing,
.reviews-slider__track.is-grabbing,
.blog-slider__track.is-grabbing {
  cursor: grabbing;
  user-select: none;
}

.trades-slider__slide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 0 0 100%;
  gap: var(--space-5);
  /* Pack rows at the top so a slide with fewer cards doesn't stretch them to
     the (taller) track height. */
  align-content: start;
  /* Inset each slide so adjacent slides have a visible gap between them while
     sliding (box-sizing keeps the slide exactly 100% so translateX stays correct). */
  padding-inline: calc(var(--space-5) / 2);
}

.trades-card {
  display: flex;
  flex-direction: column;
  min-height: 268px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-dark);
  border-radius: var(--section-frame-radius);
}

.trades-card__icon {
  width: 48px;
  min-height: 48px;
  margin-bottom: var(--space-4);
  font-size: 44px;
  line-height: 1;
  color: var(--color-primary);
}

.trades-card h3 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  color: var(--color-dark);
  font-size: var(--h5-size);
}

.trades-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.trades-card__title-link:hover,
.trades-card__title-link:focus-visible {
  color: var(--color-primary);
}

.trades-card p {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.trades-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.trades-card__link::before {
  content: '';
  height: 3px;
  flex: 1 1 auto;
  background: var(--color-accent);
}

.trades-card__link:hover,
.trades-card__link:focus-visible {
  color: var(--color-accent-hover);
}

.trades-slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.trades-slider__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-dark);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.trades-slider__dot.active {
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
}

.service-included .section-frame1 {
  padding-top: 74px;
  padding-bottom: 74px;
}

.service-included .section-header {
  align-items: center;
}

.service-included .section-header__title {
  max-width: 610px;
}

.service-included__controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.service-included__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* enabled = active (primary), can navigate this direction */
  color: var(--color-primary);
  background: var(--color-white);
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 13px;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.service-included__arrow:not(:disabled):hover,
.service-included__arrow:not(:disabled):focus-visible {
  color: var(--color-accent);
}

/* disabled = no slide that way → gray + faded (like the reviews arrows) */
.service-included__arrow:disabled {
  color: var(--color-gray-400);
  opacity: 0.4;
  cursor: default;
}

.service-included .trades-slider {
  margin-top: 34px;
}

.service-included .trades-slider__slide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-included .trades-slider__slide .trades-card:nth-child(n+4) {
  display: none;
}

/* Tablet / small-desktop (above the mobile accordion breakpoint): drop the
   service-page card grids from 3 to 2 columns so the cards don't get squeezed
   narrow and very tall. A lone card left in the last row spans the full width
   instead of sitting half-width. Mobile (<=768px) keeps its own accordion. */
@media (min-width: 769px) and (max-width: 1180px) {
  /* Parent section class is included on purpose: it raises specificity above the
     base 3-column rules (which live LATER in this file) so the 2-column layout
     actually wins in this range. */
  .service-features .service-features__cards,
  .service-audience .service-audience__cards,
  .service-included .trades-slider__slide {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-features .service-features__cards > .service-feature-card:last-child:nth-child(odd),
  .service-audience .service-audience__cards > .service-audience-card:last-child:nth-child(odd),
  .service-included .trades-slider__slide > .trades-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Editor-added inline links inside the dynamic service-page copy stay visible
   and clickable (they used to be stripped as plain text). */
.service-feature-card p a,
.service-included .trades-card p a,
.service-audience__header p a,
.service-audience-card p a,
.process-section__content p a,
.process-step__copy p a,
.reviews-card p a,
.faq-item__panel p a {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: var(--fw-semibold, 600);
}

.service-feature-card p a:hover,
.service-included .trades-card p a:hover,
.service-audience__header p a:hover,
.service-audience-card p a:hover,
.process-section__content p a:hover,
.process-step__copy p a:hover,
.reviews-card p a:hover,
.faq-item__panel p a:hover {
  text-decoration: none;
}

.service-included .trades-slider__pagination {
  margin-top: 38px;
}

.service-included .trades-slider__dot {
  min-width: 26px;
  height: 26px;
  font-size: 14px;
}

/* ============================================================
   FEDES Plans CTA
   ============================================================ */

.plans-cta__shell {
  display: grid;
  justify-items: center;
  min-height: 270px;
  padding: 82px 45px 48px;
  overflow: hidden;
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  background:
    var(--color-primary) url('../img/Frame 1686557019.png') left bottom / cover no-repeat;
}

.plans-cta__shell h2 {
  color: var(--color-white);
}

.plans-cta__shell p {
  max-width: 820px;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.plans-cta__button {
  min-width: 146px;
  min-height: 46px;
  margin-top: var(--space-5);
}

/* ============================================================
   FEDES Process Section
   ============================================================ */

.process-section__shell {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(430px, 470px);
  gap: clamp(48px, 8vw, 20px);
  align-items: center;
}

.process-section__content h2 {
  margin-top: var(--space-4);
}

.process-section__content p {
  max-width: 460px;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.process-section__cta,
.process-section__mobile-cta {
  margin-top: var(--space-5);
}

.process-steps {
  display: grid;
  gap: var(--space-5);
}

.process-step {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  min-height: 112px;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
  background: var(--color-white);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  opacity: 1;
  transform: translateY(0);
  transition: ease-in-out 0.1s;
}

.process-step.is-active,
.process-step:hover {
  border-width: 3px;
}

.process-step__icon {
  max-width: 55px;
  height: auto;
  line-height: 1;
  justify-self: start;
}

.process-step__copy {
  width: 100%;
  min-width: 0;
  align-self: center;
}

.process-step__copy h5 {
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  color: var(--color-dark);
  font-size: var(--h5-size);
}

.process-step__copy p {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.process-step__number {
  font-family: var(--font-body);
  font-size: 60px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgb(14 88 149 / 25%);
}

.process-step.is-active .process-step__number,
.process-step:hover .process-step__number {
  color: var(--color-primary);
}

/* ============================================================
   FEDES Reviews Slider
   ============================================================ */

.reviews-slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
}

.reviews-slider--no-arrows {
  grid-template-columns: minmax(0, 1fr);
}

.reviews-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--color-dark);
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-pill);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.reviews-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.reviews-slider__arrow[hidden] {
  display: none !important;
}

.reviews-slider__viewport {
  overflow: hidden;
  min-width: 0;
}

.reviews-slider__track {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  transition: transform var(--transition-slow);
}

.reviews-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--space-4) * 2)) / 3);
  min-width: 0;
  min-height: 182px;
  padding: 24px 20px 18px;
  background: #fafafa;
  border-radius: var(--section-frame-radius);
}

.reviews-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.reviews-card__brand img {
  display: block;
  width: 115px;
  height: auto;
}

.reviews-card__brand img.reviews-card__favicon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.reviews-card p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.reviews-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-6);
}

.reviews-card__name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-dark);
}

.reviews-card__rating {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 2px;
  margin-left: auto;
  padding: 6px 10px;
  background: #00b67a;
  border-radius: var(--radius-md);
}

.reviews-card__rating img {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.reviews-slider__dots {
  /* Visibility driven by JS (the [hidden] attr) based on slide count —
     shown whenever the arrows can't cover all slides. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-5);
}

.reviews-slider__dots[hidden] {
  display: none !important;
}

.reviews-slider__dot {
  width: 8px;
  height: 8px;
  background: #f5c9a9;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.reviews-slider__dot.active {
  background: var(--color-accent);
  transform: scale(1.1);
}

/* ============================================================
   FEDES Expert Contact
   ============================================================ */

.expert-contact__layout {
  display: grid;
  grid-template-columns: minmax(280px, 362px) minmax(320px, 1fr);
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 760px;
  margin: 36px auto 0;
}

.expert-contact__photo-wrap {
  position: relative;
}

.expert-contact__photo-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #f2f4fb;
}

.expert-contact__photo-card img {
  width: 100%;
  height: auto;
}

.expert-contact__role {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 15px 23px;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.expert-contact__info-card {
  min-height: 169px;
  padding: 30px 28px;
  margin-left: -70px;
  background: var(--color-white);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
}

.expert-contact__info-card h3 {
  font-size: 32px;
  line-height: var(--lh-snug);
}

.expert-contact__info-card p {
  max-width: 420px;
  margin-top: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: 1.9;
  color: rgb(var(--color-dark-rgb) / 80%);
}

.expert-contact__socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-5);
}

.expert-contact__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.expert-contact__social:hover {
  color: var(--color-white);
  background: var(--color-accent);
  transform: translateY(-2px);
}

/* ============================================================
   FEDES Blog Section
   ============================================================ */

.blog-slider {
  margin-top: var(--space-8);
}

.blog-slider__viewport {
  overflow: hidden;
  min-width: 0;
}

.blog-slider__track {
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
  transition: transform var(--transition-slow);
}

.blog-card {
  display: flex;
  flex: 0 0 calc((100% - (var(--space-5) * 2)) / 3);
  flex-direction: column;
  min-width: 0;
}

.blog-card__media {
  overflow: hidden;
  /* border: 1px solid var(--color-dark); */
  border-radius: 20px;
  background: var(--color-white);
}

.blog-card__media img {
  width: 100%;
  border-radius: 20px;
  height: auto;
}

.blog-card__content {
  padding-top: var(--space-3);
}

.blog-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: rgb(var(--color-dark-rgb) / 70%);
  background: #EAEAEA;
  border-radius: 40px;
}

.blog-card__content h3 {
  margin-top: var(--space-4);
  font-size: 16px;
  font-family: var(--font-body);
  line-height: 1.8;
  letter-spacing: -0.47px;
}

.blog-card__content h3 a {
  transition: color var(--transition-fast);
}

.blog-card__content h3 a:hover {
  color: var(--color-primary);
}

.blog-card__content p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  letter-spacing: -0.09px;
  color: rgb(var(--color-dark-rgb) / 70%);
}

.blog-card__button {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  padding: 16px 24px;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.blog-card__button:hover {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.blog-slider__dots {
  /* Visibility is driven by JS (the [hidden] attr) based on slide count,
     not by breakpoints — show whenever there is more than one page. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-5);
}

.blog-slider__dots[hidden] {
  display: none !important;
}

.blog-slider__dot {
  width: 8px;
  height: 8px;
  background: #f5c9a9;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.blog-slider__dot.active {
  background: var(--color-accent);
  transform: scale(1.1);
}

/* ============================================================
   FEDES FAQ Section
   ============================================================ */

.faq-list {
  display: grid;
  gap: var(--space-4);
  max-width: 835px;
  margin: var(--space-8) auto 0;
}

.faq-item {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}

.faq-item__toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: 24px 28px;
  text-align: left;
}

.faq-item__question {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--color-dark);
}

.faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.faq-item__icon i {
  font-size: 12px;
  line-height: 1;
}

.faq-item__panel {
  padding: 0 28px 24px;
}

.faq-item__panel p {
  max-width: 690px;
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: 1.95;
  color: rgb(var(--color-dark-rgb) / 85%);
}

.faq-item__panel a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-item__panel a:hover {
  color: var(--color-accent);
}

.faq-item.is-open .faq-item__icon {
  color: var(--color-white);
  background: var(--color-accent);
}

.faq-item.is-open .faq-item__icon i {
  transform: rotate(180deg);
}

/* ============================================================
   FEDES Page Hero (Inner Pages)
   ============================================================ */

.page-hero__shell {
  text-align: center;
}

.page-hero__inner {
  max-width: 830px;
  margin-inline: auto;
}

.page-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-dark);
}

.page-hero__breadcrumb-sep {
  font-size: 14px;
  color: var(--color-gray-400);
}

.page-hero__breadcrumb-active {
  color: var(--color-accent);
}

.page-hero__heading {
  margin-top: 25px;
}

.page-hero__text {
  margin: 20px auto 0;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--color-dark);
}

.page-hero__cta {
  margin-top: 25px;
}

.page-hero__date {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-gray-500);
}

/* ============================================================
   FEDES Legal Content (Privacy Policy / Terms & Conditions)
   ============================================================ */

.legal-content {
  margin: 0 auto;
  padding: 0 45px;
}

.legal-content__intro {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-dark);
  text-align: justify;
}

.legal-content__intro+.legal-content__intro {
  margin-top: 16px;
}

.legal-section__heading {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.legal-section__text {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-dark);
  text-align: justify;
  margin-bottom: 20px;
}

.legal-section__list {
  display: grid;
  gap: 14px;
}

.legal-section__list li {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-dark);
}

.legal-section__list li::before {
  content: '\00B7';
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1.35;
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .legal-content {
    padding: 0;
  }

  .legal-section__heading {
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -0.47px;
  }

  .legal-content__intro,
  .legal-section__text,
  .legal-section__list li {
    font-size: var(--text-sm);
  }

  .legal-section__list li::before {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .page-hero__breadcrumb {
    font-size: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-hero__heading {
    margin-top: 16px;
  }

  .page-hero__text {
    margin-top: 14px;
    font-size: var(--text-sm);
  }

  .page-hero__cta {
    margin-top: 16px;
  }
}

/* ============================================================
   FEDES Service Detail Page
   ============================================================ */

/* Hero */
.service-hero__shell {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  min-width: 0;
}

.service-hero__content {
  min-width: 0;
}

.service-hero__heading {
  margin-top: 20px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  max-width: 768px;
}

.service-hero__text {
  max-width: 768px;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: var(--color-dark);
}

.service-hero__cta {
  margin-top: var(--space-6);
}

.service-hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
}

.service-hero__media img {
  width: 100%;
  max-height: 480px;
  display: block;
  border-radius: var(--radius-lg);
}

.service-hero__media picture {
  display: block;
}

.service-hero__media img.service-hero__icon-badge {
  position: absolute;
  bottom: 0;
  left: -45px;
  width: 85px;
  height: 85px;
  border-radius: 20px;
  /* hang half-out below the image bottom-left corner */
  transform: translateY(50%);
}


/* Feature Cards */
.service-features__cards,
.service-features__accordion {
  margin-top: var(--space-12);
}

.service-features__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.service-feature-card {
  display: flex;
  flex-direction: column;
  min-height: 268px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-dark);
  border-radius: var(--section-frame-radius);
}

.service-feature-card__icon {
  display: block;
  width: 48px;
  min-height: 48px;
  font-size: 44px;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.service-feature-card h3 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--h5-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-dark);
}

.service-feature-card p {
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

/* Tools */
.service-tools__shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-top: var(--space-8);
}

.service-tools__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-10);
  list-style: none;
  margin-top: var(--space-6);
}

.service-tools__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.service-tools__list li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

.service-tools__logos {
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
}

.service-tools__logos img {
  width: 100%;
  display: block;
}

/* Audience */
.service-audience__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
}

.service-audience__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  /* gap: var(--space-8); */
  grid-column: 1 / -1;
}

.service-audience__header .section-badge,
.service-audience__header h2,
.service-audience__header p {
  grid-column: 1;
}

.service-audience__header h2 {
  margin-top: var(--space-3);
}

.service-audience__header p {
  max-width: 560px;
  margin-top: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: var(--color-dark);
}

.service-audience__header .btn {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: end;
  margin-top: 0;
  display: inline-flex;
}

.service-audience__cards {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.service-audience-card {
  display: flex;
  flex-direction: column;
  min-height: 128px;
  padding: 20px 18px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-dark);
  border-radius: var(--section-frame-radius);
  transition: ease-in-out .3s;
}

.service-audience-card:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.service-audience-card:hover h3,
.service-audience-card:hover p {
  color: var(--color-white);
}

/* Last card flows naturally into the grid (no forced full-width). */

.service-audience-card h3 {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-dark);
}

.service-audience-card p {
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.65;
  color: var(--color-dark);
}

.service-audience-card.is-featured h5,
.service-audience-card.is-featured p {
  color: var(--color-white);
}

@media (max-width: 768px) {
  main {
    display: flex;
    flex-direction: column;
  }

  .service-hero {
    order: 1;
  }

  .service-features {
    order: 2;
  }

  .trades-section {
    order: 3;
  }

  .service-tools {
    order: 4;
  }

  .service-audience {
    order: 5;
  }

  .process-section {
    order: 6;
  }

  .faq-section {
    order: 7;
  }

  .reviews-section {
    order: 8;
  }

  .service-hero__shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .service-hero__heading {
    max-width: 100%;
    margin-top: var(--space-4);
    font-size: 23px;
    line-height: 1.18;
  }

  .service-hero__text {
    max-width: 100%;
    font-size: var(--text-base);
    line-height: 1.8;
  }

  .service-hero__cta {
    margin-top: var(--space-5);
  }

  .service-hero__cta .btn {
    min-width: 133px;
    min-height: 46px;
  }

  .service-hero__media {
    width: 100%;
    max-width: 430px;
    margin-top: var(--space-8);
    margin: var(--space-8) auto 0;
  }

  .service-hero__media img.service-hero__icon-badge {
    bottom: 20px;
    left: 20px;
    transform: none;
  }

  .service-features__accordion,
  .service-included__accordion,
  .service-audience__accordion {
    margin-top: var(--space-5);
  }

  .service-features__accordion .faq-item,
  .service-included__accordion .faq-item,
  .service-audience__accordion .faq-item {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .service-features__accordion .faq-item__toggle,
  .service-included__accordion .faq-item__toggle,
  .service-audience__accordion .faq-item__toggle {
    padding: 14px 0;
  }

  .service-features__accordion .faq-item__question,
  .service-included__accordion .faq-item__question,
  .service-audience__accordion .faq-item__question {
    font-size: var(--text-base);
    line-height: var(--lh-normal);
  }

  .service-features__accordion .faq-item.is-open .faq-item__question,
  .service-included__accordion .faq-item.is-open .faq-item__question,
  .service-audience__accordion .faq-item.is-open .faq-item__question {
    color: var(--color-primary);
  }

  .service-features__accordion .faq-item__icon,
  .service-included__accordion .faq-item__icon,
  .service-audience__accordion .faq-item__icon {
    width: 18px;
    height: 18px;
    color: var(--color-dark);
    background: transparent;
  }

  .service-features__accordion .faq-item.is-open .faq-item__icon,
  .service-included__accordion .faq-item.is-open .faq-item__icon,
  .service-audience__accordion .faq-item.is-open .faq-item__icon {
    color: var(--color-dark);
    background: transparent;
  }

  .service-features__accordion .faq-item__panel,
  .service-included__accordion .faq-item__panel,
  .service-audience__accordion .faq-item__panel {
    padding: 0 0 var(--space-4);
  }

  .service-features__accordion .faq-item__panel p,
  .service-included__accordion .faq-item__panel p,
  .service-audience__accordion .faq-item__panel p {
    max-width: none;
    font-size: var(--text-sm);
    line-height: 1.8;
  }

  .service-included__accordion .faq-item__toggle {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .service-audience__layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .service-audience__header h2 {
    font-size: 23px;
  }

  .service-audience__header p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.8;
  }

  .service-audience__header .btn {
    display: none;
  }

  .service-tools__shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: 0;
  }

  .service-tools__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-5);
  }

  .service-tools__list li {
    align-items: flex-start;
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .service-tools__list li::before {
    width: 5px;
    height: 5px;
    margin-top: 6px;
  }

  .service-tools__logos {
    max-width: 230px;
  }
}

/* ============================================================
   FEDES About Page
   ============================================================ */

/* About Hero */
.about-hero__shell {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  min-width: 0;
}

.about-hero__content .page-hero__breadcrumb {
  font-size: var(--text-md);
}

.about-hero__heading {
  margin-top: 20px;
  max-width: 668px;
  /* font-size: 40px; */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.about-hero__text {
  max-width: 668px;
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.85;
  color: var(--color-dark);
}

.about-hero__cta {
  margin-top: var(--space-6);
}

.about-hero__media {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: visible;
}

.about-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-2xl);
}

.about-hero__media picture {
  display: block;
}

.about-hero__media img.about-hero__icon-badge {
  position: absolute;
  bottom: 0;
  left: -45px;
  width: 85px;
  height: 85px;
  border-radius: 20px;
  /* hang half-out below the image bottom-left corner */
  transform: translateY(50%);
}


/* Contribution Section */
.contribution-section__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 60px);
  margin-top: var(--space-8);
}

.contribution-section__body p {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.85;
  color: var(--color-dark);
}

.contribution-section__mobile-cta {
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .contribution-section__mobile-cta {
    display: table;
    margin: var(--space-6) auto 0;
  }
}

/* About Counters */
.about-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  /* border-top: 1px solid var(--color-gray-200); */
}

.about-counter {
  text-align: center;
}

.about-counter__number {
  display: block;
  font-family: var(--font-body);
  font-size: 55px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-dark);
  transition: none;
}

.about-counter__number--large {
  font-size: 85px;
}

.about-counter__label {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-500);
  letter-spacing: 0;
}

/* Who We Are Section */
.who-we-are-section__shell {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 480px);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.who-we-are-section__content .section-badge {
  display: inline-flex;
}

.who-we-are-section__content h2 {
  margin-top: var(--space-3);
}

.who-we-are-section__content p {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.85;
  color: var(--color-dark);
}

.who-we-are-section__content p+p {
  margin-top: var(--space-4);
}

.who-we-are-section__media {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.who-we-are-section__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Values Section */
.values-section__heading {
  margin-top: var(--space-3);
  max-width: none;
}

.values-section__body {
  display: block;
  margin-top: var(--space-8);
}

.values-section__body p {
  max-width: none;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.85;
  color: var(--color-dark);
}

/* About CTA */
.about-cta__shell {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: 50px 45px;
  border-radius: var(--radius-2xl);
  background:
    var(--color-primary) url('../img/Frame 1686557019.png') right center / cover no-repeat;
}

.about-cta__side {
  /* flex: 1 1 500px; */
  max-width: 500px;
  min-width: 0;
}

.about-cta__side p {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.75;
  color: rgb(var(--color-white-rgb) / 80%);
}

.about-cta__btn {
  display: inline-flex;
  margin-top: var(--space-5);
  white-space: nowrap;
}

.about-cta__heading {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-white);
}

/* About Page Responsive */
@media (max-width: 768px) {
  .about-hero__shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-hero__heading {
    margin-top: 14px;
    max-width: 100%;
    /* font-size: 28px; */
  }

  .about-hero__media img.about-hero__icon-badge {
    bottom: 20px;
    transform: none;
  }

  .about-hero__text {
    font-size: var(--text-sm);
    margin-top: var(--space-3);
  }

  .about-hero__cta {
    margin-top: var(--space-5);
    min-height: 32px;
    padding: 10px var(--space-5);
    font-size: var(--text-xs);
  }

  .about-hero__media {
    order: 1;
  }

  .about-hero__content {
    order: 0;
  }

  .contribution-section__body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }

  .contribution-section__body p {
    font-size: var(--text-sm);
  }

  .about-counters {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    text-align: center;
  }

  .about-counter {
    text-align: center;
  }



  .about-counter__number--large {
    font-size: 55px;
  }

  .who-we-are-section__shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .who-we-are-section__content p {
    font-size: var(--text-sm);
    margin-top: var(--space-4);
  }

  .values-section__heading {
    max-width: none;
  }

  .values-section__body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }

  .values-section__body p {
    font-size: var(--text-sm);
  }

  .about-cta__shell {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-5);
    padding: 32px var(--space-5);
    border-radius: var(--section-frame-radius);
  }

  .about-cta__side {
    flex: initial;
    max-width: none;
  }

  .about-cta__heading {
    flex: initial;
    font-size: 19px;
    line-height: var(--lh-snug);
  }

  .about-cta__side p {
    font-size: var(--text-sm);
  }

  .about-cta__btn {
    min-height: 36px;
    padding: 10px var(--space-5);
    font-size: var(--text-xs);
    margin-top: var(--space-4);
  }
}

/* ============================================================
   FEDES Blog Listing Page
   ============================================================ */

.blog-listing__heading {
  font-size: clamp(28px, 3.5vw, var(--h2-size));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-dark);
}

/* Desktop Filters */
.blog-filters {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.blog-filters__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  white-space: nowrap;
}

.blog-filters__tags {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.blog-filter-tag {
  display: inline-flex;
  align-items: center;
  padding: 17px 35px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-gray-600);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.blog-filter-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.blog-filter-tag.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Mobile Filter Dropdown */
.blog-filter-mobile {
  position: relative;
  margin-top: var(--space-5);
}

.blog-filter-mobile__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
  background: var(--color-white);
  cursor: pointer;
}

.blog-filter-mobile__select i {
  transition: transform var(--transition-fast);
}

.blog-filter-mobile__select[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.blog-filter-mobile__options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  z-index: 50;
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-filter-mobile__option {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.blog-filter-mobile__option:hover {
  background: var(--color-gray-100);
}

.blog-filter-mobile__option.active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* Blog Layout (main + sidebar) */
.blog-listing__layout {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: clamp(24px, 4vw, 30px);
  margin-top: var(--space-8);
  align-items: start;
}

.blog-listing__main {
  min-width: 0;
}

/* Blog Card Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
}

.blog-card--hidden {
  display: none !important;
}

/* Sidebar */
.blog-listing__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: 100px;
}

.sidebar-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* y: 60px, x: 18px */
  padding: 60px 18px;
  /* Same blueprint background as the home-page quote form */
  background: var(--color-primary) url('../img/banner-form-bg.png') center bottom / cover no-repeat;
  border-radius: var(--section-frame-radius);
  gap: 0;
}

.sidebar-cta__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
  /* logo → title */
}

.sidebar-cta__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.sidebar-cta__heading {
  font-family: var(--font-heading);
  text-transform: capitalize;
  font-size: 30px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-white);
  margin: 0 0 14px;
  /* title → text */
}

.sidebar-cta p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.75;
  color: rgb(var(--color-white-rgb) / 90%);
  margin: 0 0 14px;
  /* text → button */
}

.sidebar-cta .btn {
  margin: 0;
}

/* Blog Listing Responsive */
@media (max-width: 1024px) {
  .sidebar-cta__heading {
    font-size: 23px;
    margin: 0;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-listing__layout {
    grid-template-columns: 1fr 40%;
  }
}

@media (max-width: 768px) {
  .blog-listing__layout {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FEDES Pagination
   ============================================================ */
.fedes-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.fedes-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fedes-pagination__item {
  display: flex;
}

.fedes-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-dark);
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.fedes-pagination__link:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.fedes-pagination__link.is-active {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 6px 16px rgb(226 105 0 / 25%);
  cursor: default;
}

.fedes-pagination__link--nav {
  font-weight: var(--fw-semibold);
}

.fedes-pagination__link--nav i {
  font-size: 13px;
}

.fedes-pagination__link.is-disabled {
  color: var(--color-gray-300);
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
  cursor: not-allowed;
  pointer-events: none;
}

.fedes-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 42px;
  color: var(--color-gray-400);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
}

.fedes-pagination__summary {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
}

.fedes-pagination__summary strong {
  color: var(--color-dark);
  font-weight: var(--fw-semibold);
}

@media (max-width: 575px) {
  .fedes-pagination__list {
    gap: 6px;
  }

  .fedes-pagination__link {
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    font-size: var(--text-sm);
  }

  /* Hide the Prev/Next word labels on small screens — keep just the arrows */
  .fedes-pagination__label {
    display: none;
  }

  .fedes-pagination__link--nav {
    padding: 0;
    min-width: 38px;
  }

  .fedes-pagination__dots {
    min-width: 22px;
    height: 38px;
  }
}

/* ============================================================
   FEDES Blog Detail (Individual Post)
   ============================================================ */

/* Hero */
.blog-hero__shell {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 55px var(--space-6);
  background: var(--color-primary) url('../img/single-blog-banner.png') center / cover no-repeat;
  border-radius: var(--section-frame-radius);
}

.blog-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 830px;
  margin-inline: auto;
}

.blog-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: rgb(var(--color-white-rgb) / 85%);
}

.blog-hero__breadcrumb a {
  color: rgb(var(--color-white-rgb) / 85%);
  transition: color var(--transition-fast);
}

.blog-hero__breadcrumb a:hover {
  color: var(--color-white);
}

.blog-hero__breadcrumb-sep {
  opacity: 0.6;
}

.blog-hero__breadcrumb-active {
  color: var(--color-accent);
}

.blog-hero__title {
  margin-top: var(--space-5);
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.4vw, var(--h2-size));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.blog-hero__cta {
  margin-top: var(--space-6);
}

/* Detail layout — sidebar on the LEFT, wide 180px column gap */
.blog-detail .blog-listing__layout {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  column-gap: 180px;
}

/* Layout sidebar (detail variant — sticky, placed in the left column) */
.blog-detail__sidebar {
  order: -1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 100px;
}

/* Mid-size screens: keep both columns but tighten the gap so it fits */
@media (max-width: 1200px) {
  .blog-detail .blog-listing__layout {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 90px);
  }
}

/* Mobile: single column (sidebar is hidden, tabs take over) */
@media (max-width: 768px) {
  .blog-detail .blog-listing__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* Featured media + lead */
.blog-detail__media {
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.blog-detail__media img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-detail__lead {
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--color-dark);
}

/* Table of contents (sidebar) */
.blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-toc__link {
  display: block;
  padding: 9px 0 9px var(--space-5);
  border-left: 2px solid var(--color-gray-200);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-gray-500);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.blog-toc__link:hover {
  color: var(--color-dark);
}

.blog-toc__link.is-active {
  color: var(--color-dark);
  font-weight: var(--fw-semibold);
  border-color: var(--color-accent);
}

/* Table of contents (mobile tabs) — sticks to the top while reading */
.blog-toc__tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding-top: var(--space-3);
  padding-bottom: 0;
  background: var(--color-white);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-gray-200);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.blog-toc__tabs::-webkit-scrollbar {
  display: none;
}

.blog-toc__tab {
  flex: 0 0 auto;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-gray-500);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.blog-toc__tab.is-active {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  border-color: var(--color-accent);
}

/* Share article */
.blog-share {
  margin-top: var(--space-8);
}

.blog-share__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

.blog-share__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.blog-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  background: var(--color-white);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-share__btn:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.blog-share__btn--brand {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}

.blog-share__btn--brand:hover {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Article prose */
.blog-article>*:first-child {
  margin-top: 0;
}

.blog-article p,
.blog-article li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--color-dark);
}

.blog-article p {
  margin-top: var(--space-4);
}

.blog-article h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--color-dark);
  scroll-margin-top: 110px;
}

.blog-article h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-dark);
  scroll-margin-top: 110px;
}

.blog-article ul,
.blog-article ol {
  margin-top: var(--space-4);
  padding-left: 1.4em;
}

.blog-article li {
  margin-top: var(--space-2);
}

.blog-article a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.blog-article blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-style: normal;
  color: var(--color-dark);
}

.blog-article table {
  width: 100%;
  margin-top: var(--space-5);
  border-collapse: collapse;
}

.blog-article th,
.blog-article td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: left;
}

/* Post-article CTA box */
.blog-cta-box {
  margin-top: var(--space-8);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.blog-article--bottom {
  margin-top: var(--space-8);
}

.blog-cta-box__title {
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--color-dark);
}

.blog-cta-box__btn {
  margin-top: var(--space-6);
}

/* Author card */
.blog-author {
  margin-top: var(--space-8);
  padding: clamp(24px, 3.2vw, 36px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.blog-author__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.blog-author__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.blog-author__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.blog-author__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-dark);
}

.blog-author__role {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
}

.blog-author__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: var(--space-2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-white);
  background: var(--color-accent);
}

.blog-author__bio {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .blog-hero__breadcrumb {
    font-size: var(--text-base);
  }

  .blog-detail__lead {
    font-size: var(--text-md);
  }

  .blog-article h2 {
    font-size: var(--text-2xl);
    scroll-margin-top: 88px;
  }

  .blog-article h3 {
    font-size: var(--text-lg);
    scroll-margin-top: 88px;
  }

  .blog-cta-box__title {
    font-size: var(--text-lg);
  }
}

/* ============================================================
   FEDES Contact Section
   ============================================================ */

.contact-section__layout {
  display: grid;
  /* flexible columns — image column flexes instead of being a fixed width */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8);
  align-items: stretch;
}

.contact-section .appointment-card {
  color: var(--color-dark);
  min-height: auto;
  /* centre the fields vertically inside the stretched card → equal top/bottom space */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-section__image {
  /* figma image ratio drives the height; form stretches to match */
  aspect-ratio: 511 / 581;
}

/* ── Light form variant (white bordered card — contact page) ── */
.appointment-card--light {
  color: var(--color-dark);
  background: var(--color-white);
}

.appointment-card--light .form-label {
  color: var(--color-dark);
}

.appointment-card--light .form-input,
.appointment-card--light .appointment-card__upload,
.appointment-card--light .appointment-card__phone {
  border: 1px solid var(--color-border) !important;
  background: var(--color-white);
}

.appointment-card--light .appointment-card__upload-text {
  color: var(--color-gray-400);
}

/* Compact left-aligned accent button (not full width) */
.appointment-card--light .appointment-card__submit {
  display: inline-flex;
  width: auto;
  min-width: 160px;
  align-self: flex-start;
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

.contact-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 30px;
}

/* At 991px the form takes the full width and the image is hidden
   (instead of stacking below the form) */
@media (max-width: 991px) {
  .contact-section__layout {
    grid-template-columns: 1fr;
  }

  .contact-section__image {
    display: none;
  }

  .about-counter__number {
    font-size: 55px;
  }
}

/* ============================================================
   FEDES Footer
   ============================================================ */

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(130px, 0.7fr) minmax(160px, 0.85fr) minmax(250px, 1.15fr);
  column-gap: var(--space-16);
  align-items: start;
}

.site-footer__brand {
  display: inline-flex;
  width: 136px;
  margin-bottom: var(--space-3);
}

.site-footer__brand img {
  width: 136px;
  height: auto;
}

.site-footer__about {
  max-width: 600px;
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: rgb(var(--color-dark-rgb) / 80%);
}

.site-footer__column {
  min-width: 0;
  overflow: hidden;
}

.site-footer__title {
  margin-bottom: 21px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--color-dark);
}

.site-footer__links {
  display: grid;
  gap: 15px;
}

.site-footer__link {
  display: block;
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 28px;
  color: var(--color-dark);
  border-bottom: 1px solid transparent;
  white-space: normal;
  word-break: break-word;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.site-footer__link:hover,
.site-footer__link.active {
  background: var(--color-accent-soft);
  border-bottom-color: var(--color-accent);
}

.site-footer__contact-row {
  grid-template-columns: minmax(210px, 1fr) minmax(250px, 1fr) minmax(360px, 1.45fr);
}

.site-footer__contact-item {
  min-width: 0;
  font-family: var(--font-body);
  font-size: 16.8px;
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 24.3px;
  color: var(--color-dark);
}

.site-footer__contact-item i {
  width: 18px;
  flex: 0 0 18px;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-dark);
  text-align: center;
}

.site-footer__contact-item span {
  min-width: 0;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-top: var(--space-9);
}

.site-footer__copyright {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--color-dark);
}

.site-footer__socials {
  display: flex;
  align-items: center;
  gap: 15px;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.site-footer__social i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
}

.site-footer__social:hover,
.site-footer__social.active {
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
  box-shadow: 0 0 0 5px var(--color-accent-soft);
}

@media (max-width: 1180px) {
  .site-header__bar {
    gap: 16px;
  }

  .site-header__nav-list {
    gap: 2px;
  }

  .site-header__nav-link {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-header__actions {
    margin-left: 0;
  }
 .site-header__actions a.btn.hide-mobile {
    padding: 15px 17px; 
    font-size: 11px;
    min-height: 25px;
  }
  .site-header__brand img {
    width: 90px;
  }

  .hero-preview__shell {
    grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 360px);
    gap: clamp(24px, 4vw, 52px);
  }

  .hero-preview__content p {
    font-size: 15px;
    line-height: 1.7;
  }

  .hero-preview__quote {
    max-width: 360px;
  }

  .appointment-card {
    min-height: 400px;
    padding: 30px 45px;
  }

  .appointment-card__header .heading {
    font-size: 23px;
  }

  .appointment-card .form-input,
  .appointment-card__upload,
  .appointment-card__phone,
  .appointment-card__phone .form-input {
    min-height: 45px;
  }

  .site-footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
  }

  .site-footer__brand-block {
    grid-column: 1 / -1;
  }

  .site-footer__contact-row {
    grid-template-columns: 1fr;
  }

  .trades-slider__slide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-section__shell {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
    justify-self: center;
  }

  .reviews-card {
    flex-basis: calc((100% - var(--space-4)) / 2);
  }

  .reviews-slider__arrow {
    display: none !important;
  }

  .expert-contact__layout {
    grid-template-columns: minmax(260px, 300px) minmax(300px, 1fr);
  }

  .blog-card {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }

  .blog-slider__dots {
    display: flex;
  }
}

@media (max-width: 1024px) {
   .site-header__brand img {
    width: 136px;
  }
}

@media (max-width: 992px) {

 
  .site-header__nav.hide-mobile,
  .site-header__actions .btn.hide-mobile {
    display: none !important;
  }

  .site-header__mobile-toggle.hide-desktop {
    display: inline-flex !important;
  }

  .site-header__overlay.hide-desktop,
  .mobile-menu.hide-desktop {
    display: block !important;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .site-header__mega,
  .site-header__dropdown {
    display: none !important;
  }

  .hero-preview__shell {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .hero-preview__content {
    max-width: 720px;
  }

  .hero-preview__content h1 {
    max-width: 720px;
  }


  .hero-preview__quote {
    justify-self: stretch;
    max-width: none;
  }

  .appointment-card {
    min-height: 452px;
    padding: 37px 63px;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 768px) {
  .site-header {
    padding-top: var(--space-4);
    padding-bottom: 46px;
  }

  .section-frame1,
  .section-frame2 {
    padding: 30px 20px;
  }

  .site-header__bar {
    min-height: 72px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-header__brand img {
    width: 136px;
  }

  .site-header__actions {
    gap: 0 !important;
  }

  .hero-preview {
    padding-top: 0;
  }

  .hero-preview__shell {
    gap: 20px;
  }

  .hero-preview__content {
    padding: 0;
  }

  .hero-preview__content h1 {
    max-width: none;
    font-size: var(--h1-size);
    line-height: 1.2;
  }

  .hero-preview__content p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
  }

  .about-section__body p {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
  }

  .hero-preview__cta,
  .appointment-card__submit {
    min-height: 32px;
    padding: 10px var(--space-5);
    font-size: var(--text-xs);
  }

  .hero-preview__quote {
    border-radius: var(--radius-lg);
    justify-self: stretch;
  }

  .appointment-card {
    min-height: 395px;
    padding: 50px 30px;
  }

  .appointment-card__header {
    margin-bottom: var(--space-5);
  }

  .appointment-card__header .heading {
    font-size: 17px;
    line-height: var(--lh-snug);
  }

  .appointment-card__header .text,
  .appointment-card .form-label {
    font-size: 13px;
    line-height: 24.3px;
  }

  .appointment-card__fields {
    gap: var(--space-3);
  }

  .appointment-card__field-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .appointment-card .form-input,
  .appointment-card__upload,
  .appointment-card__phone,
  .appointment-card__phone .form-input {
    min-height: 38px;
  }

  .appointment-card .form-input,
  .appointment-card__upload {
    font-size: var(--text-sm);
  }

  .appointment-card__flag {
    width: 45px;
    flex-basis: 45px;
    font-size: 17px;
  }

  .appointment-card__submit {
    min-width: 115px;
    margin-top: var(--space-5);
  }

  .section-header {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .section-header__title {
    max-width: none;
  }

  .home-who-section__shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .home-who-section__point {
    font-size: var(--text-sm);
  }

  .about-section__body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .about-section__mobile-cta {
    min-height: 32px;
    padding: 10px var(--space-5);
    font-size: var(--text-xs);
  }

  .services-strip__shell {
    width: 100%;
    min-height: 200px;
    margin: 0 auto;
    padding: 32px var(--space-5) 40px;
    overflow: visible;
    /* allow dropdown to appear below box */
  }

  .services-strip__shell h2 {
    margin-top: var(--space-2);
    font-size: 17px;
    line-height: var(--lh-snug);
  }

  .services-strip__badge {
    font-size: 13px;
  }

  .services-strip__mobile {
    width: min(100%, 280px);
    position: relative;
    /* ensure dropdown is positioned relative to this */
  }

  /* dropdown stays absolutely positioned — don't override to static */
  .services-strip__options {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max(100%, 260px);
    z-index: 999;
  }

  .trades-slider {
    margin-top: var(--space-6);
  }

  .trades-card {
    min-height: auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .trades-card__icon {
    width: 38px;
    min-height: 38px;
    margin-bottom: var(--space-3);
    font-size: 34px;
  }

  .trades-card p {
    font-size: var(--text-sm);
  }

  .trades-card__link {
    font-size: var(--text-sm);
  }

  .trades-slider__pagination {
    margin-top: var(--space-6);
  }

  .plans-cta__shell {
    min-height: 217px;
    padding: 28px var(--space-5) 25px;
    background-position: center bottom;
  }

  .plans-cta__shell h2 {
    font-size: 17px;
    line-height: var(--lh-snug);
  }

  .plans-cta__shell p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
  }

  .plans-cta__button {
    min-width: 115px;
    min-height: 36px;
    margin-top: var(--space-3);
    padding: 10px var(--space-5);
    font-size: var(--text-xs);
    background: var(--color-accent);
    border-color: var(--color-accent);
  }

  .process-section__shell {
    gap: 20px;
  }

  .process-section__content h2 {
    margin-top: var(--space-3);
  }

  .process-section__content p {
    max-width: none;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
  }

  .process-section__mobile-cta {
    justify-self: start;
    min-height: 32px;
    margin-top: var(--space-5);
    padding: 10px var(--space-5);
    font-size: var(--text-xs);
  }

  .process-steps {
    gap: var(--space-5);
    max-width: none;
  }

  .process-step {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 128px;
    padding: var(--space-8) var(--space-7) var(--space-5);
    gap: var(--space-2) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .process-step__icon {
    order: 1;
    flex: 0 0 auto;
    font-size: 44px;
  }

  .process-step__copy {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
  }

  .process-step__copy h5 {
    font-size: 13px;
    line-height: var(--lh-normal);
  }

  .process-step__copy p {
    font-size: var(--text-sm);
    width: 100%;
  }

  .process-step__number {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: start;
    font-size: 50px;
  }

  .reviews-slider {
    display: block;
    margin-top: var(--space-5);
  }

  .reviews-slider__track {
    gap: 0;
  }

  .reviews-card {
    flex-basis: 100%;
    min-height: 210px;
    padding: 22px 18px 18px;
  }

  .reviews-card__brand img {
    width: 115px;
  }

  .reviews-card p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
  }

  .reviews-card__name {
    font-size: var(--text-lg);
  }

  .reviews-card__rating {
    padding: 6px 10px;
  }

  .section-header--center {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .section-header--center .section-header__title {
    max-width: 300px;
    margin-top: var(--space-3);
  }

  .expert-contact__layout {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: none;
    margin-top: var(--space-5);
  }

  .expert-contact__photo-wrap {
    width: min(100%, 320px);
    margin: 0 auto;
  }

  .expert-contact__role {
    bottom: -18px;
    min-height: 40px;
    padding: 0 20px;
  }

  .expert-contact__info-card {
    min-height: 0;
    padding: 26px 20px 24px;
    margin-left: 0;
  }

  .expert-contact__info-card h3 {
    font-size: 20px;
  }

  .expert-contact__info-card p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
    max-width: 100%;
  }

  .expert-contact__socials {
    margin-top: var(--space-5);
    gap: var(--space-3);
  }

  .expert-contact__social {
    width: 34px;
    height: 34px;
  }

  .blog-slider {
    margin-top: var(--space-5);
  }

  .blog-slider__track {
    gap: var(--space-5);
  }

  .blog-card {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }

  .blog-card__content {
    padding-top: var(--space-4);
  }

  .blog-card__content h3 {
    font-size: 16px;
    line-height: 1.6;
  }

  .blog-card__content p {
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .blog-card__button {
    margin-top: var(--space-5);
    font-size: var(--text-xs);
    padding: 12px 20px;
  }

  .blog-slider__dots {
    display: flex;
  }

  .faq-list {
    margin-top: var(--space-5);
    gap: 14px;
  }

  .faq-item__toggle {
    padding: 22px 18px;
  }

  .faq-item__question {
    font-size: 16px;
  }

  .faq-item__panel {
    padding: 0 18px 22px;
  }

  .faq-item__panel p {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
  }

  .site-footer__shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .site-footer__top,
  .site-footer__bottom {
    display: contents;
  }

  .site-footer__brand-block {
    grid-column: 1 / -1;
    order: 1;
  }

  .site-footer__brand {
    margin-bottom: var(--space-2);
  }

  .site-footer__about {
    font-size: var(--text-md);
    line-height: 30px;
  }

  .site-footer__contact-row {
    grid-column: 1 / -1;
    order: 2;
    grid-template-columns: 1fr;
  }

  .site-footer__contact-item {
    font-size: var(--text-base);
    line-height: 24.3px;
  }

  .site-footer__contact-item i {
    display: none;
  }

  .site-footer__column--quick {
    grid-column: 1;
    order: 3;
  }

  .site-footer__column--services {
    grid-column: 2;
    order: 4;
  }

  .site-footer__column--trades {
    grid-column: 1;
    order: 5;
    margin-top: 44px;
  }

  .site-footer__title {
    margin-bottom: var(--space-4);
    font-size: 15px;
    line-height: 1.2;
  }

  .site-footer__links {
    gap: 15px;
  }

  .site-footer__link {
    padding: 0 var(--space-2);
    margin-left: calc(var(--space-2) * -1);
    font-size: var(--text-sm);
    line-height: 28px;
    white-space: normal;
    word-break: break-word;
  }

  .site-footer__socials {
    grid-column: 2;
    order: 6;
    align-self: start;
    justify-self: start;
    flex-direction: column;
    gap: 15px;
    margin-top: 44px;
  }

  .site-footer__social {
    width: 43.36px;
    height: 43.36px;
  }

  .site-footer__social i {
    width: 15px;
    height: 15px;
    font-size: 15px;
  }

  .site-footer__social:hover,
  .site-footer__social.active {
    box-shadow: 0 0 0 4px var(--color-accent-soft);
  }

  .site-footer__copyright {
    grid-column: 1 / -1;
    order: 7;
    justify-self: center;
    margin-bottom: 20px;
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    text-align: center;
    text-transform: uppercase;
  }
}

@media (max-width: 575px) {

  .section-frame1,
  .section-frame2 {
    padding: 0;
    border: none;
  }

  .site-header {
    padding-top: 10px;
  }

  .trades-slider__slide {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .site-footer__socials {
    justify-self: center;
  }

  .blog-slider__track {
    gap: 0;
  }

  .blog-card {
    flex-basis: 100%;
  }
}

@media (min-width: 993px) {

  .site-header__mobile-toggle.hide-desktop,
  .site-header__overlay.hide-desktop,
  .mobile-menu.hide-desktop {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .process-section__shell {
    gap: var(--space-5);
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  /* .process-steps {
    gap: var(--space-4);
  }

  .process-step {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-height: 88px;
    padding: 16px 18px;
    gap: var(--space-3);
    border-radius: var(--radius-md);
  }

  .process-step__icon {
    order: 0;
    font-size: 34px;
  }

  .process-step__copy {
    order: 0;
    flex: initial;
  } */


  .process-section__mobile-cta {
    margin-top: 0;
  }
}

/* ============================================================
   Promotion Popup (dashboard-controlled)
   Managed from Filament → Settings → Promotion Popup.
   Opens via initPromoPopup() in main.js.
   ============================================================ */

.fedes-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fedes-modal[hidden] {
  display: none;
}

/* Page scroll is locked while the popup is open */
body.fedes-modal-open {
  overflow: hidden;
}

.fedes-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(var(--color-dark-rgb) / 55%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fedes-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  max-height: min(92vh, 780px);
  overflow: hidden;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  outline: none;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fedes-modal.is-open .fedes-modal__overlay {
  opacity: 1;
}

.fedes-modal.is-open .fedes-modal__dialog {
  opacity: 1;
  transform: none;
}

/* ── Close button ── */
.fedes-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--color-white-rgb) / 16%);
  color: var(--color-white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-base);
}

.fedes-modal__close:hover,
.fedes-modal__close:focus-visible {
  background: rgb(var(--color-white-rgb) / 30%);
  transform: rotate(90deg);
}

/* ── Blue hero band ── */
.fedes-modal__hero {
  position: relative;
  padding: 36px 36px 28px;
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
  background:
    radial-gradient(ellipse at top left, rgb(255 255 255 / 10%), transparent 55%),
    radial-gradient(ellipse at bottom right, rgb(0 0 0 / 20%), transparent 60%),
    linear-gradient(135deg, #10639f 0%, var(--color-primary) 45%, #073e6b 100%);
}

/* Decorative rings — subtle depth, matching the brand blue */
.fedes-modal__hero::before {
  content: "";
  position: absolute;
  top: -70px;
  left: -55px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 24px solid rgb(255 255 255 / 7%);
}

.fedes-modal__hero::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -55px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgb(255 255 255 / 6%);
}

.fedes-modal__hero > * {
  position: relative;
  z-index: 1;
}

.fedes-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgb(226 105 0 / 40%);
}

.fedes-modal__badge i {
  font-size: 11px;
}

.fedes-modal__heading {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-white);
}

.fedes-modal__sub {
  max-width: 380px;
  margin: 8px auto 0;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: rgb(var(--color-white-rgb) / 85%);
}

/* ── White body ── */
.fedes-modal__body {
  padding: 22px 36px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Price line: "Starts at  ~~$99~~  Now  $49" ── */
.fedes-modal__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 18px;
  font-family: var(--font-heading);
  line-height: 1;
}

.fedes-modal__price-label {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-gray-500);
}

.fedes-modal__price-was {
  font-size: 21px;
  font-weight: var(--fw-bold);
  color: var(--color-gray-400);
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
}

.fedes-modal__price-now {
  font-size: 36px;
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
}

/* ── Popup form variant (borderless white layout) ── */
.appointment-card--fedes-modal {
  min-height: 0;
  height: auto;
  padding: 0;
  color: var(--color-dark);
  border-radius: 0;
}

.appointment-card--fedes-modal .form-label {
  color: var(--color-dark-soft);
}

.appointment-card--fedes-modal .form-input,
.appointment-card--fedes-modal .appointment-card__upload,
.appointment-card--fedes-modal .appointment-card__phone {
  border: 1px solid var(--color-gray-200) !important;
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Base card rule forces transparent borders on focus — override for popup */
.appointment-card--fedes-modal .form-input:focus,
.appointment-card--fedes-modal .form-input:focus-visible {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(14 88 149 / 12%) !important;
}

.appointment-card--fedes-modal .appointment-card__phone:focus-within,
.appointment-card--fedes-modal .appointment-card__upload:hover,
.appointment-card--fedes-modal .appointment-card__upload:focus-visible {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(14 88 149 / 12%);
}

.appointment-card--fedes-modal .appointment-card__upload-text {
  color: var(--color-gray-400);
}

.appointment-card--fedes-modal .appointment-card__submit {
  width: 100%;
  margin-top: var(--space-4);
  box-shadow: 0 10px 24px rgb(226 105 0 / 28%);
}

.appointment-card--fedes-modal .appointment-card__submit:hover,
.appointment-card--fedes-modal .appointment-card__submit:focus-visible {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ── Footer note ── */
.fedes-modal__note {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  line-height: var(--lh-normal);
  color: var(--color-gray-500);
}

.fedes-modal__note a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 600px) {
  .fedes-modal {
    padding: 0;
    align-items: flex-end;
  }

  .fedes-modal__dialog {
    max-width: none;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }

  .fedes-modal.is-open .fedes-modal__dialog {
    transform: none;
  }

  .fedes-modal__hero {
    padding: 30px 22px 22px;
  }

  .fedes-modal__heading {
    font-size: 27px;
  }

  .fedes-modal__sub {
    font-size: 13px;
  }

  .fedes-modal__body {
    padding: 18px 20px 24px;
  }

  .fedes-modal__price-now {
    font-size: 31px;
  }

  /* Email + Upload stack into one column inside the popup */
  .appointment-card--fedes-modal .appointment-card__field-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fedes-modal__overlay,
  .fedes-modal__dialog,
  .fedes-modal__close {
    transition: none;
  }
}

/* ============================================================
   Promotion Bar + Countdown Timers (dashboard-controlled)
   Managed from Filament → Settings → Promotion Popup.
   ============================================================ */

.fedes-bar {
  position: relative;
  z-index: 900;
  color: var(--color-white);
  background:
    radial-gradient(ellipse at top left, rgb(255 255 255 / 8%), transparent 55%),
    linear-gradient(90deg, #073e6b 0%, var(--color-primary) 50%, #073e6b 100%);
}

.fedes-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 9px 20px;
}

.fedes-bar__text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-white); /* global p color would otherwise win over inheritance */
}

.fedes-bar__text i {
  color: #FFB84D;
  font-size: 13px;
  flex: 0 0 auto;
}

/* ── Countdown (bar) ── */
.fedes-bar__timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fedes-bar__timer-label {
  margin-right: 4px;
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(var(--color-white-rgb) / 75%);
}

.fedes-bar__timer-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  padding: 3px 5px 2px;
  background: rgb(var(--color-white-rgb) / 12%);
  border: 1px solid rgb(var(--color-white-rgb) / 18%);
  border-radius: 6px;
  line-height: 1;
}

.fedes-bar__timer-box b {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.fedes-bar__timer-box small {
  margin-top: 2px;
  font-size: 8px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgb(var(--color-white-rgb) / 70%);
}

.fedes-bar__timer-sep {
  font-weight: var(--fw-bold);
  color: rgb(var(--color-white-rgb) / 55%);
}

/* ── CTA button ── */
.fedes-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: var(--color-accent);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgb(226 105 0 / 35%);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.fedes-bar__cta:hover,
.fedes-bar__cta:focus-visible {
  color: var(--color-white);
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.fedes-bar__cta i {
  font-size: 11px;
}

/* ── Countdown (inside popup hero) ── */
.fedes-modal__timer {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  background: rgb(0 0 0 / 20%);
  border: 1px solid rgb(var(--color-white-rgb) / 14%);
  border-radius: 12px;
}

.fedes-modal__timer-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(var(--color-white-rgb) / 80%);
}

.fedes-modal__timer-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 4px 6px 3px;
  background: rgb(var(--color-white-rgb) / 12%);
  border-radius: 7px;
  line-height: 1;
}

.fedes-modal__timer-box b {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

.fedes-modal__timer-box small {
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgb(var(--color-white-rgb) / 70%);
}

/* Countdown reached zero → hidden by JS */
[data-countdown].is-expired {
  display: none;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .fedes-bar__inner {
    padding: 8px 14px;
    gap: 6px 12px;
  }

  .fedes-bar__text {
    font-size: 12.5px;
  }

  .fedes-bar__timer-label {
    display: none;
  }

  .fedes-bar__timer-box {
    min-width: 30px;
  }

  .fedes-bar__timer-box b {
    font-size: 12.5px;
  }

  .fedes-bar__cta {
    padding: 6px 14px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .fedes-modal__timer {
    gap: 5px;
    padding: 7px 10px;
  }

  .fedes-modal__timer-label {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }

  .fedes-modal__timer-box {
    min-width: 34px;
  }

  .fedes-modal__timer-box b {
    font-size: 14px;
  }
}


.trades-slider__slide.sample-grid {
    padding-top: 32px;
}