/* Design variables */
:root {
  /* Brand */
  --color-primary: #088395;
  /* Darker than primary — solid contrast with white label text on hover */
  --color-primary-hover: #023a42;

  --color-secondary: #7AB2B2;
  --color-secondary-hover: #5a8686;


  --color-accent: #EBF4F6;
  --color-accent-hover: #b5bdbe;

  /* Surfaces */
  --color-bg: #faf8f5;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e0;

  /* Text */
  --color-text: #333333;
  --color-text-muted: #4a5568;
  --color-text-subtle: #718096;
  --color-text-on-primary: #ffffff;
  --color-text-on-dark: #f7fafc;

  /* Semantic */
  --color-success: #276749;
  --color-warning: #b7791f;
  --color-error: #c53030;
  --color-info: #2b6cb0;

  /* Links (default to primary; override in nav if needed) */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);

  /* Typography */
  --font-family-sans: "Poppins", sans-serif;
  --font-family-heading: "Raleway", serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --content-max-width: 90rem;
  --header-height: auto;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(26, 32, 44, 0.06);
  --shadow-md: 0 4px 6px rgba(26, 32, 44, 0.07);
  --transition-fast: 150ms ease;
}

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

/* Instant wheel scroll (avoids jank with AOS); scroll-padding helps in-page anchors behind sticky header. */
html {
  scroll-behavior: auto;
  scroll-padding-top: 5.75rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.75rem;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  left: 0.75rem;
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
  /* Align Bootstrap primary with brand (hover stays dark for readability) */
  --bs-primary: #088395;
  --bs-primary-rgb: 8, 131, 149;
}

/* Primary buttons: dark hover, white label stays readable */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--color-text-on-primary);
}

body.quote-modal-open {
  overflow: hidden;
  touch-action: none;
}

/* Match Bootstrap .container to site content width */
.container {
  max-width: var(--content-max-width);
}

.h1{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}
.h2{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-4);  
}
.h3{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.h4{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}


.h5{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.h6{
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.two__btn_wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.05rem;
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 700;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
  }
  
  .two__btn_wrap.btn--primary{
    color: var(--color-text-on-primary);
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
  }
  
  .two__btn_wrap.btn--primary:hover{
    color: var(--color-text-on-primary);
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  
  .two__btn_wrap .btn--ghost{
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(8, 131, 149, 0.25);
  }
  
  .two__btn_wrap .btn--ghost:hover {
    color: var(--color-primary-hover);
    border-color: rgba(8, 131, 149, 0.35);
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
  }
  
  .two__btn_wrap .btn:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
  }

  .shapes{position: absolute;}
  .hero-banner__quote{position: relative;}


#services,
#portfolio,
#process,
#pricing,
#contact,
#consultation {
  scroll-margin-top: 5.5rem;
}

.feature-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.feature-list__icon {
  color: var(--color-primary);
  margin-top: 0.2em;
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

/* ---------- Site footer (#05606e theme) ---------- */
.site-footer {
  --footer-theme: #05606e;
  --footer-theme-deep: #034854;
  --footer-theme-soft: #067887;
  --footer-text: #f0fafb;
  --footer-muted: rgba(240, 250, 251, 0.82);
  --footer-line: rgba(255, 255, 255, 0.14);
  --footer-accent: #b8eef5;
  color: var(--footer-muted);
  font-size: var(--font-size-sm);
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(255, 255, 255, 0.08), transparent 52%),
    radial-gradient(700px 360px at 100% 100%, rgba(0, 0, 0, 0.12), transparent 48%),
    linear-gradient(165deg, var(--footer-theme-deep) 0%, var(--footer-theme) 42%, #045a63 100%);
  border-top: 1px solid var(--footer-line);
}

a.site-footer__brand img {
  max-width: 200px;
}

.site-footer__main {
  padding:40px 0;
}

.site-footer__grid {
  --bs-gutter-x: 1.75rem;
  --bs-gutter-y: 1.75rem;
}

/* Footer illustration — gentle float + light pulse */
.site-footer__art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  animation: site-footer-art-breathe 5.5s ease-in-out infinite;
}

@keyframes site-footer-art-breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22)) brightness(1);
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.03);
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.3)) brightness(1.06);
  }
}

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

.site-footer__brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  text-decoration: none;
  color: var(--footer-text);
  transition: opacity var(--transition-fast);
}

.site-footer__brand:hover {
  opacity: 0.92;
  color: var(--footer-text);
}

.site-footer__brand-mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  flex-shrink: 0;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--footer-accent);
  font-size: 1.15rem;
}

.site-footer__brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
}

.site-footer__brand-text {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.site-footer__brand-accent {
  color: var(--footer-accent);
}

.site-footer__brand-tag {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--footer-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-footer__about {
  margin: 0 0 var(--space-4);
  max-width: 22rem;
  line-height: var(--line-height-relaxed);
  color: var(--footer-muted);
}

.site-footer__heading {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  display: inline-block;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-accent);
}

.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__nav a {
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-footer__nav a:hover {
  color: #fff;
}

.site-footer__nav a:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.site-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.site-footer__contact-icon {
  flex-shrink: 0;
  width: 1.35rem;
  text-align: center;
  color: var(--footer-accent);
  margin-top: 0.15rem;
}

.site-footer__contact-text {
  color: var(--footer-muted);
  line-height: var(--line-height-relaxed);
}

.site-footer__contact-link {
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

.site-footer__contact-link:hover {
  color: var(--footer-accent);
}

.site-footer__contact-link:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.site-footer__cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  padding-top: 0.15rem;
}

.site-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.site-footer__btn--primary {
  color: #023a42;
  background: linear-gradient(180deg, #f0fafb 0%, #d5f0f3 100%);
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.site-footer__btn--primary:hover {
  color: #022a31;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.site-footer__btn--ghost {
  color: var(--footer-text);
  background: rgba(0, 0, 0, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.45);
}

.site-footer__btn--ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.1);
}

.site-footer__btn:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 3px;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.site-footer__social-link {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: var(--footer-muted);
  font-size: var(--font-size-base);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--footer-line);
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.site-footer__social-link:hover {
  color: var(--footer-accent);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.site-footer__social-link:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
}

.site-footer__bottom {
  border-top: 1px solid var(--footer-line);
  padding: var(--space-4) 0 var(--space-4);
  background: rgba(0, 0, 0, 0.14);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer__copyright {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-xs);
  color: var(--footer-muted);
}

.site-footer__copyright-icon {
  font-size: 0.7rem;
  opacity: 0.85;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: var(--font-size-xs);
}

.site-footer__legal a {
  color: var(--footer-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__legal a:hover {
  color: var(--footer-accent);
}

.site-footer__legal a:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.site-footer__legal-sep {
  color: rgba(148, 163, 184, 0.45);
  user-select: none;
}

@media (max-width: 991.98px) {
  .site-footer__main {
    padding: 40px 0;
  }

  .site-footer__cta-actions {
    max-width: 22rem;
  }
}

@media (max-width: 575.98px) {
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
  }
  .site-footer__about{max-width: 100%;}
}

/* Sticky site header — brand + email/phone only (nav lives in footer) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
  contain: layout;
}

.site-header.site-header--scrolled {
  box-shadow: var(--shadow-md);
}

.site-header__container {
  padding-block: var(--space-3);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-header__inner img {
  max-width: 180px;
  width:100%;
}

.site-header__brand {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex-shrink: 0;
  min-width: 0;
}

.site-header__logo {
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.8vw, var(--font-size-3xl));
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.site-header__logo-accent {
  color: var(--color-secondary);
}

.site-header__tagline {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-header__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
}

.site-header__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  max-width: 100%;
}

.site-header__pill:hover {
  background: var(--color-primary-hover);
  color: #ffffff;
}

.site-header__pill:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.site-header__brand-icon {
  margin-right: var(--space-2);
  color: var(--color-secondary);
  font-size: 0.85em;
  vertical-align: -0.05em;
}

.site-header__tagline-icon {
  margin-right: var(--space-2);
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  vertical-align: 0.05em;
}

.site-header__icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  width: 1.125rem;
  text-align: center;
}

.site-header__pill-text {
  word-break: break-all;
}

.site-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.site-header__menu-toggle:hover {
  background: var(--color-primary-hover);
  color: #ffffff;
  border-color: transparent;
}

.site-header__menu-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.site-header__menu-icon {
  display: inline-flex;
  line-height: 1;
  font-size: 1.25rem;
}

.site-header__menu-icon--close {
  display: none;
}

.site-header.site-header--menu-open .site-header__menu-icon--bars {
  display: none;
}

.site-header.site-header--menu-open .site-header__menu-icon--close {
  display: inline-flex;
}

@media (min-width: 640px) {
  .site-header__pill-text {
    word-break: normal;
  }
}

@media (min-width: 992px) {
  .site-header__menu-toggle {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .site-header__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .site-header__brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-header__menu-toggle {
    display: inline-flex;
  }

  .site-header__contact {
    display: none;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border);
  }

  .site-header.site-header--menu-open .site-header__contact {
    display: flex;
  }

  .site-header__pill {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .site-header__pill {
    flex: 1 1 auto;
    min-width: 0;
  }
}


/* Inner Bannner */
.inner-banner {
  position: relative;
  isolation: isolate;
  background-color: var(--hero-theme-deep);
  background-image:
    radial-gradient(ellipse 1100px 720px at 12% 18%, rgba(184, 238, 245, 0.18), transparent 55%),
    radial-gradient(ellipse 1000px 800px at 92% 82%, rgba(6, 120, 135, 0.55), transparent 55%),
    radial-gradient(ellipse 820px 620px at 78% 10%, rgba(255, 200, 130, 0.18), transparent 52%),
    radial-gradient(ellipse 720px 540px at 22% 92%, rgba(0, 0, 0, 0.35), transparent 52%),
    linear-gradient(165deg, #05606e 0%, #7AB2B2 45%, #045a63 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -120px 160px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  min-height: 350px;
  height: 30vh;
  display: flex;
  align-items: center;
  text-align: center;
}

.inner-banner-content h1{
  font-size: 45px;
  color:#fff;
  font-weight: 600;
}

.inner-section {
  margin-bottom: 30px;
}

.inner-page-Wrap {
  padding: 60px 0;
}

.inner-page-Wrap h2{
  font-size: 25px;
}
.inner-page-Wrap p{}

/* Thank you page (after form submit) */
.thankyou-card {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}

.thankyou-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  font-size: 2rem;
  color: var(--color-text-on-primary);
  background: linear-gradient(145deg, var(--color-primary) 0%, #0a7d8f 100%);
  box-shadow: 0 10px 30px rgba(8, 131, 149, 0.25);
}

.thankyou-card__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}

.thankyou-card__lead {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.thankyou-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.thankyou-card__actions .btn {
  min-width: 10rem;
}

/* ---------- Hero banner (default: light theme) ---------- */
.hero-banner {
  --hero-theme-transition: 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition:
    background-color var(--hero-theme-transition),
    box-shadow var(--hero-theme-transition);
  --hero-theme-deep: #e8f4f6;
  --hero-theme: #f5fbfb;
  --hero-theme-soft: #ebf4f6;
  --hero-text: #1a2e35;
  --hero-text-muted: #3d5a66;
  --hero-accent: #088395;
  --hero-accent-warm: #c17f24;
  /* Spine entrance: after headline / CTAs / quote form AOS (~0.7–1s) + small buffer */
  --hero-books-enter-after: 1.2s;
  --hero-book-stagger: 0.18s;
  --hero-book-slide-duration: 0.58s;
  position: relative;
  isolation: isolate;
  background-color: #faf8f5;
  background-image:
    radial-gradient(ellipse 900px 600px at 8% 22%, rgba(8, 131, 149, 0.14), transparent 58%),
    radial-gradient(ellipse 820px 640px at 94% 78%, rgba(122, 178, 178, 0.22), transparent 55%),
    radial-gradient(ellipse 700px 520px at 82% 8%, rgba(255, 196, 120, 0.18), transparent 52%),
    radial-gradient(ellipse 640px 480px at 18% 88%, rgba(8, 131, 149, 0.08), transparent 50%),
    radial-gradient(ellipse 480px 360px at 50% -5%, rgba(235, 244, 246, 0.9), transparent 62%),
    linear-gradient(168deg, #ffffff 0%, var(--hero-theme) 42%, #f0f7f8 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(8, 131, 149, 0.06);
  /* Never clip tall content: fixed 91vh + overflow:hidden cut off form/books on short viewports */
  overflow-x: clip;
  overflow-y: visible;
  min-height: max(32rem, 88vh);
  padding-bottom: calc(clamp(1.75rem, 4vh, 3.5rem) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
}

.hero-banner::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--hero-theme-transition), background var(--hero-theme-transition);
  background:
    radial-gradient(circle at 18% 28%, rgba(8, 131, 149, 0.16) 0%, transparent 24%),
    radial-gradient(circle at 82% 62%, rgba(255, 196, 120, 0.2) 0%, transparent 26%),
    radial-gradient(circle at 60% 82%, rgba(122, 178, 178, 0.18) 0%, transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(255, 210, 147, 0.14) 0%, transparent 24%),
    radial-gradient(circle at 30% 78%, rgba(8, 131, 149, 0.1) 0%, transparent 26%),
    radial-gradient(circle at 48% 48%, rgba(235, 244, 246, 0.5) 0%, transparent 38%);
  filter: blur(78px);
  animation: hero-mesh-drift 26s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  opacity: 0.85;
  mix-blend-mode: multiply;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Subtle base texture (light, low contrast) */
.hero-banner__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/hero-texture.svg");
  background-size: 200px 200px;
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.28;
  mix-blend-mode: multiply;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity var(--hero-theme-transition), visibility var(--hero-theme-transition);
}

.hero-banner__texture::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 22%, transparent 100%);
}

/* Flowing swoosh lines — top-right blank area (reference style) */
.hero-banner__swoosh {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(62vw, 34rem);
  height: min(48vh, 22rem);
  max-width: 100%;
  pointer-events: none;
  background: url("../images/hero-swoosh-tr.svg") no-repeat right top;
  background-size: contain;
  opacity: 0.92;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity var(--hero-theme-transition), visibility var(--hero-theme-transition);
  mask-image: linear-gradient(135deg, #000 0%, #000 55%, transparent 88%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 55%, transparent 88%);
}

@media (min-width: 992px) {
  .hero-banner__swoosh {
    width: min(54vw, 38rem);
    height: min(52vh, 26rem);
    top: clamp(0.5rem, 2vh, 1.5rem);
    right: clamp(0rem, 1vw, 1rem);
  }
}

@media (max-width: 991.98px) {
  .hero-banner__swoosh {
    width: min(72vw, 20rem);
    height: min(36vh, 14rem);
    opacity: 0.55;
    mask-image: linear-gradient(160deg, #000 0%, transparent 75%);
    -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 75%);
  }
}

/* Soft moving highlight wash (light theme) */
.hero-banner__glow-sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--hero-theme-transition), background var(--hero-theme-transition);
  background:
    radial-gradient(ellipse 90% 70% at 15% 35%, rgba(8, 131, 149, 0.08), transparent 55%),
    radial-gradient(ellipse 70% 55% at 88% 65%, rgba(122, 178, 178, 0.12), transparent 50%),
    linear-gradient(
      118deg,
      transparent 0%,
      transparent 26%,
      rgba(255, 255, 255, 0.65) 50%,
      transparent 74%,
      transparent 100%
    );
  background-size:
    120% 120%,
    130% 130%,
    260% 260%;
  background-repeat: no-repeat;
  animation: hero-glow-sweep 22s cubic-bezier(0.42, 0, 0.58, 1) infinite,
    hero-glow-wash 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  mix-blend-mode: normal;
  opacity: 0.9;
  filter: saturate(1.04);
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes hero-glow-sweep {
  0% {
    background-position: 0% 30%, 100% 70%, 0% 40%;
  }
  50% {
    background-position: 100% 60%, 0% 40%, 100% 55%;
  }
  100% {
    background-position: 0% 30%, 100% 70%, 0% 40%;
  }
}

@keyframes hero-glow-wash {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 0.95;
  }
}

/* Accent line scan along top edge */
.hero-banner__top-accent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(8, 131, 149, 0.15) 22%,
    rgba(8, 131, 149, 0.75) 48%,
    rgba(193, 127, 36, 0.55) 55%,
    rgba(8, 131, 149, 0.15) 78%,
    transparent 100%
  );
  background-size: 55% 100%;
  background-repeat: no-repeat;
  animation: hero-top-scan 6.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  box-shadow: 0 1px 8px rgba(8, 131, 149, 0.12);
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes hero-top-scan {
  0% {
    background-position: -40% 0;
  }
  100% {
    background-position: 140% 0;
  }
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--hero-theme-transition), background var(--hero-theme-transition);
  opacity: 1;
  background:
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(8, 131, 149, 0.06), transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(255, 255, 255, 0.5), transparent 50%),
    radial-gradient(ellipse 60% 45% at 100% 20%, rgba(235, 244, 246, 0.65), transparent 48%);
  mix-blend-mode: normal;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes hero-mesh-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(-3%, 3%, 0) scale(1.06) rotate(1.5deg);
  }
  100% {
    transform: translate3d(3%, -2.5%, 0) scale(1.04) rotate(-1deg);
  }
}

@keyframes hero-pattern-drift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200px 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner::before,
  .hero-banner::after,
  .hero-banner__texture,
  .hero-banner__glow-sweep,
  .hero-banner__top-accent {
    animation: none;
  }

  .hero-banner__glow-sweep {
    opacity: 0.88;
    filter: none;
  }
}

.hero-banner > .container {
  position: relative;
  z-index: 1;
}

.hero-banner__inner {
  padding-block: var(--space-12);
}

@media (min-width: 992px) {
  .hero-banner {
    min-height: max(38rem, 88vh);
    padding-bottom: calc(clamp(2rem, 5vh, 4rem) + env(safe-area-inset-bottom, 0px));
  }

  .hero-banner__inner {
    padding-block: calc(var(--space-16) * 1.25);
  }
}

.hero-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

@media (min-width: 992px) {
  .hero-banner__content {
    text-align: left;
  }
}

/* Tighter vertical rhythm when trust bullets are present */
.hero-banner__content--with-bullets {
  gap: var(--space-2);
}

.hero-banner__eyebrow,
.hero-banner__title,
.hero-banner__title-accent,
.hero-banner__bullet-text,
.hero-banner__bullet-icon,
.hero-banner__lead,
.hero-banner__btn--secondary {
  transition:
    color var(--hero-theme-transition),
    background var(--hero-theme-transition),
    border-color var(--hero-theme-transition),
    text-shadow var(--hero-theme-transition),
    box-shadow var(--hero-theme-transition);
}

.hero-banner__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  align-self: flex-start;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-accent, #088395);
  background: rgba(8, 131, 149, 0.08);
  border: 1px solid rgba(8, 131, 149, 0.22);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

@media (max-width: 991.98px) {
  .hero-banner__eyebrow {
    align-self: center;
  }
}

@media (min-width: 992px) {
  .hero-banner__eyebrow {
    justify-content: flex-start;
    align-self: flex-start;
  }
}

.hero-banner__title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw + 1rem, 3rem);
  line-height: 1.1;
  margin: 0;
  color: var(--hero-text, #1a2e35);
  text-shadow: none;
  text-align: left;
}

.hero-banner__title-accent {
  color: var(--hero-accent-warm, #c17f24);
  font-style: italic;
  text-shadow: none;
}

/* 2×2 trust bullets — flat; wraps safely on narrow / split columns */
.hero-banner__bullets {
  list-style: none;
  margin: 0.35rem 0 0.2rem;
  padding: 0;
  width: 100%;
  max-width: min(36rem, 100%);
  margin-inline: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 0;
  align-items: start;
  text-align: left;
}

@media (min-width: 480px) {
  .hero-banner__bullets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(0.4rem, 2.5vw, 0.85rem);
    row-gap: 0.2rem;
  }
}

.hero-banner__bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  padding: 0.1rem 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

@media (min-width: 992px) {
  .hero-banner__bullets {
    margin-inline: 0;
    max-width: none;
    column-gap: clamp(0.5rem, 1.25vw, 1rem);
  }
}

.hero-banner__bullet-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.12em;
  font-size: clamp(0.75rem, 2.2vw, 0.85rem);
  color: var(--color-primary);
  filter: none;
}

.hero-banner__bullet-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-heading);
  font-size: clamp(0.68rem, 0.22rem + 2.8vw, 0.88rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--hero-text-muted, #3d5a66);
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-shadow: none;
}

.hero-banner__bullets + .hero-banner__actions {
  margin-top: 0;
}

.hero-banner__lead {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--hero-text-muted, #3d5a66);
  max-width: 38rem;
  margin-inline: auto;
}

@media (min-width: 992px) {
  .hero-banner__lead {
    margin-inline: 0;
  }
}

.hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-start;
  margin-top: var(--space-2);
}

@media (min-width: 992px) {
  .hero-banner__actions {
    justify-content: flex-start;
  }
}

.hero-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: var(--font-size-base);
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.hero-banner__btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.hero-banner__btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hero-banner__btn--secondary {
  background: var(--color-surface);
  color: var(--hero-accent, #088395);
  border-color: rgba(8, 131, 149, 0.45);
  box-shadow: var(--shadow-sm);
}

.hero-banner__btn--secondary:hover {
  background: rgba(8, 131, 149, 0.08);
  color: var(--color-primary-hover);
  border-color: var(--hero-accent, #088395);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hero-banner__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.bannerimgwrap {
  position: absolute;
  left: -160px;
  bottom: 0;
}
.bannerimgwrap img {
  width: 70%;
}


.hero-banner__visual {
  width: 100%;
  max-width: 30rem;
  margin-left: auto;
  position: relative;
}

.hero-banner__shelf {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3%;
  padding: 0 var(--space-2) var(--space-3);
  border-bottom: 6px solid rgba(26, 46, 53, 0.2);
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

.hero-banner__book-float {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  align-self: flex-end;
  animation: hero-book-float-y 5.5s ease-in-out infinite;
}

.hero-banner__book-float--1 {
  width: 15%;
  animation-duration: 6.2s;
  animation-delay: 0s;
}

.hero-banner__book-float--2 {
  width: 10%;
  animation-duration: 4.8s;
  animation-delay: 0.75s;
}

.hero-banner__book-float--3 {
  width: 10%;
  animation-duration: 6.8s;
  animation-delay: 1.2s;
}

.hero-banner__book-float--4 {
  width: 18%;
  animation-duration: 5.3s;
  animation-delay: 0.15s;
}

.hero-banner__book-float--5 {
  width: 14%;
  animation-duration: 5.9s;
  animation-delay: 1.45s;
}

@keyframes hero-book-float-y {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
}

.hero-banner__shelf::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -14px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(8, 131, 149, 0.18), transparent 70%);
  filter: blur(3px);
  pointer-events: none;
}

.hero-banner__book {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(26, 32, 44, 0.12));
  opacity: 0;
  transform: translate3d(300%, 0, 0);
  animation: hero-book-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.hero-banner__book:hover {
  transform: translateY(-10px);
  filter: drop-shadow(0 18px 28px rgba(26, 32, 44, 0.16))
    drop-shadow(0 6px 20px rgba(8, 131, 149, 0.2));
}

.hero-banner__book--1 { animation-delay: 0.32s; }
.hero-banner__book--2 { animation-delay: 0.40s; }
.hero-banner__book--3 { animation-delay: 0.48s; }
.hero-banner__book--4 { animation-delay: 0.50s; }
.hero-banner__book--5 { animation-delay: 0.58s; }

@keyframes hero-book-slide-in {
  0% {
    opacity: 0;
    transform: translate3d(300%, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-6%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner__book-float {
    animation: none;
  }

  .hero-banner__book {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero: Get a quote (horizontal form layout) ---------- */
.hero-banner__quote {
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  margin-inline: auto;
  scroll-margin-top: 5.5rem;
  padding: 0;
  color: var(--color-text);
  box-shadow:
    0 12px 40px rgba(8, 131, 149, 0.1),
    0 4px 12px rgba(26, 46, 53, 0.06);
  border-radius: 0.85rem;
}

@media (min-width: 992px) {
  .hero-banner__quote {
    margin-inline: 0;
    margin-bottom: 0;
  }
}

.hero-banner__quote-inner {
  text-align: center;
  padding: var(--space-5) var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-radius: 0.85rem;
  border: 1px solid rgba(8, 131, 149, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@media (min-width: 992px) {
  .hero-banner__quote-inner {
    text-align: left;
    padding:20px;
  }
}

.hero-banner__quote-title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
}

.hero-banner__quote-lead {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom:20px;
}

@media (min-width: 992px) {
  .hero-banner__quote-lead {
    margin-inline: 0;
  }
}

.hero-banner__quote-form--horizontal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

@media (min-width: 992px) {
  .hero-banner__quote-form--horizontal {
    gap: var(--space-3);
  }
}

.hero-banner__quote-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

@media (min-width: 576px) {
  .hero-banner__quote-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--space-3);
  }

  .hero-banner__quote-row .hero-banner__quote-field {
    flex: 1 1 0;
    min-width: 0;
  }
}

.hero-banner__quote-mid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}



.hero-banner__quote-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero-banner__quote-field--message {
  gap: var(--space-2);
  min-width: 0;
}

.hero-banner__quote-label {
  font-weight: 600;
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.hero-banner__quote-input,
.hero-banner__quote-textarea {
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.hero-banner__quote-textarea {
  display: block;
  min-height: 4.5rem;
  resize: vertical;
  line-height: var(--line-height-relaxed);
}

.hero-banner__quote-input::placeholder,
.hero-banner__quote-textarea::placeholder {
  color: var(--color-text-subtle);
}

.hero-banner__quote-input:focus,
.hero-banner__quote-textarea:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 131, 149, 0.12);
}

.hero-banner__quote-legal {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.hero-banner__quote-link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.hero-banner__quote-link:hover {
  color: var(--color-link-hover);
}

.hero-banner__quote-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.hero-banner__quote-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-text-on-primary);
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

@media (min-width: 992px) {
  .hero-banner__quote-submit {
    width: auto;
    min-width: 10rem;
    align-self: self-start;
    border-radius: 0.5rem;
    flex-direction: row;
    padding: 8px 20px;
  }

  .hero-banner__quote-submit-icon {
    font-size: 0.9rem;
  }
}

.hero-banner__quote-submit:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

.hero-banner__quote-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.hero-banner__quote-submit:active {
  transform: scale(0.99);
}

/* ---------- Hero banner: dark theme (original) ---------- */
.hero-banner[data-hero-theme="dark"],
html[data-hero-theme="dark"] .hero-banner {
  --hero-theme-deep: #034854;
  --hero-theme: #05606e;
  --hero-theme-soft: #067887;
  --hero-text: #f0fafb;
  --hero-text-muted: rgba(247, 250, 251, 0.95);
  --hero-accent: #b8eef5;
  --hero-accent-warm: #ffd293;
  background-color: var(--hero-theme-deep);
  background-image:
    radial-gradient(ellipse 1100px 720px at 12% 18%, rgba(184, 238, 245, 0.22), transparent 54%),
    radial-gradient(ellipse 1000px 800px at 92% 82%, rgba(6, 120, 135, 0.45), transparent 54%),
    radial-gradient(ellipse 820px 620px at 78% 10%, rgba(255, 200, 130, 0.22), transparent 50%),
    radial-gradient(ellipse 720px 540px at 22% 92%, rgba(0, 0, 0, 0.42), transparent 50%),
    radial-gradient(ellipse 500px 380px at 50% 0%, rgba(184, 238, 245, 0.08), transparent 58%),
    linear-gradient(165deg, var(--hero-theme-deep) 0%, var(--hero-theme) 45%, #045a63 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -120px 160px rgba(0, 0, 0, 0.42),
    0 0 60px rgba(8, 131, 149, 0.22);
}

.hero-banner[data-hero-theme="dark"]::before,
html[data-hero-theme="dark"] .hero-banner::before {
  background:
    radial-gradient(circle at 18% 28%, rgba(184, 238, 245, 0.42) 0%, transparent 24%),
    radial-gradient(circle at 82% 62%, rgba(255, 200, 130, 0.32) 0%, transparent 26%),
    radial-gradient(circle at 60% 82%, rgba(122, 178, 178, 0.38) 0%, transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(255, 220, 170, 0.26) 0%, transparent 24%),
    radial-gradient(circle at 30% 78%, rgba(8, 131, 149, 0.45) 0%, transparent 26%),
    radial-gradient(circle at 48% 48%, rgba(184, 238, 245, 0.12) 0%, transparent 38%);
  opacity: 0.78;
  mix-blend-mode: screen;
}

.hero-banner[data-hero-theme="dark"]::after,
html[data-hero-theme="dark"] .hero-banner::after {
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23b8eef5'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='60' cy='0' r='1'/%3E%3Ccircle cx='0' cy='60' r='1'/%3E%3Ccircle cx='60' cy='60' r='1'/%3E%3C/g%3E%3Cpath d='M30 22v6M30 32v6M22 30h6M32 30h6' stroke='%23ffd293' stroke-width='0.8' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  animation: hero-pattern-drift 38s linear infinite;
}

.hero-banner[data-hero-theme="dark"] .hero-banner__texture,
.hero-banner[data-hero-theme="dark"] .hero-banner__swoosh,
html[data-hero-theme="dark"] .hero-banner .hero-banner__texture,
html[data-hero-theme="dark"] .hero-banner .hero-banner__swoosh {
  opacity: 0;
  visibility: hidden;
}

.hero-banner[data-hero-theme="dark"] .hero-banner__glow-sweep,
html[data-hero-theme="dark"] .hero-banner .hero-banner__glow-sweep {
  background:
    radial-gradient(ellipse 90% 70% at 15% 35%, rgba(184, 238, 245, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 55% at 88% 65%, rgba(8, 131, 149, 0.16), transparent 50%),
    linear-gradient(
      118deg,
      transparent 0%,
      transparent 26%,
      rgba(255, 210, 147, 0.28) 50%,
      transparent 74%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: 0.72;
  filter: saturate(1.02) brightness(1.02);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__top-accent,
html[data-hero-theme="dark"] .hero-banner .hero-banner__top-accent {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 210, 147, 0.1) 22%,
    rgba(255, 210, 147, 0.65) 48%,
    rgba(184, 238, 245, 0.55) 55%,
    rgba(255, 210, 147, 0.1) 78%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(255, 210, 147, 0.14);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__eyebrow,
html[data-hero-theme="dark"] .hero-banner .hero-banner__eyebrow {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--hero-accent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__title,
html[data-hero-theme="dark"] .hero-banner .hero-banner__title {
  color: var(--hero-text);
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.45),
    0 8px 28px rgba(0, 0, 0, 0.35);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__title-accent,
html[data-hero-theme="dark"] .hero-banner .hero-banner__title-accent {
  color: #ffd293;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 4px 18px rgba(0, 0, 0, 0.35);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__bullet-icon,
html[data-hero-theme="dark"] .hero-banner .hero-banner__bullet-icon {
  color: #ffd293;
}

.hero-banner[data-hero-theme="dark"] .hero-banner__bullet-text,
html[data-hero-theme="dark"] .hero-banner .hero-banner__bullet-text {
  color: rgba(247, 250, 251, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__lead,
html[data-hero-theme="dark"] .hero-banner .hero-banner__lead {
  color: rgba(240, 250, 251, 0.82);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__btn--secondary,
html[data-hero-theme="dark"] .hero-banner .hero-banner__btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--hero-text);
  border-color: rgba(184, 238, 245, 0.55);
  backdrop-filter: blur(6px);
  box-shadow: none;
}

.hero-banner[data-hero-theme="dark"] .hero-banner__btn--secondary:hover,
html[data-hero-theme="dark"] .hero-banner .hero-banner__btn--secondary:hover {
  background: rgba(184, 238, 245, 0.18);
  color: #ffffff;
  border-color: var(--hero-accent);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__shelf,
html[data-hero-theme="dark"] .hero-banner .hero-banner__shelf {
  border-bottom-color: #333;
}

.hero-banner[data-hero-theme="dark"] .hero-banner__shelf::after,
html[data-hero-theme="dark"] .hero-banner .hero-banner__shelf::after {
  background: radial-gradient(ellipse at center, rgba(8, 131, 149, 0.25), transparent 70%);
  filter: blur(2px);
}

.hero-banner[data-hero-theme="dark"] .hero-banner__book:hover,
html[data-hero-theme="dark"] .hero-banner .hero-banner__book:hover {
  filter: drop-shadow(0 18px 28px rgba(26, 32, 44, 0.18))
    drop-shadow(0 6px 20px rgba(184, 238, 245, 0.35));
}

.hero-banner[data-hero-theme="dark"] .hero-banner__quote,
html[data-hero-theme="dark"] .hero-banner .hero-banner__quote {
  box-shadow: var(--shadow-md);
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner[data-hero-theme="dark"]::after,
  html[data-hero-theme="dark"] .hero-banner::after {
    animation: none;
  }
}

/* ---------- Hero banner theme settings (gear — click dropdown, top-right) ---------- */
.hero-theme-settings {
  position: absolute;
  top: max(0.65rem, env(safe-area-inset-top, 0px));
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  z-index: 8;
}

.hero-theme-settings__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(8, 131, 149, 0.22);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26, 46, 53, 0.1);
  backdrop-filter: blur(8px);
  transition:
    transform 0.38s cubic-bezier(0.34, 1.25, 0.64, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.hero-theme-settings__trigger:hover {
  border-color: rgba(8, 131, 149, 0.45);
  box-shadow: 0 6px 20px rgba(8, 131, 149, 0.18);
}

.hero-theme-settings--open .hero-theme-settings__trigger {
  transform: rotate(90deg);
  border-color: rgba(8, 131, 149, 0.5);
  box-shadow: 0 6px 22px rgba(8, 131, 149, 0.2);
}

.hero-theme-settings__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.hero-theme-settings__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 9.5rem;
  padding: 0.55rem;
  border: 1px solid rgba(8, 131, 149, 0.18);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 36px rgba(26, 46, 53, 0.16);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px) scale(0.94);
  transform-origin: top right;
  transition:
    opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.38s cubic-bezier(0.34, 1.25, 0.64, 1),
    visibility 0.38s;
}

.hero-theme-settings__heading {
  margin: 0 0 0.4rem;
  padding: 0 0.35rem;
  font-family: var(--font-family-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.hero-theme-settings__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
  font-family: var(--font-family-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.hero-theme-settings__option i {
  width: 1rem;
  text-align: center;
  color: var(--color-primary);
}

.hero-theme-settings__option:hover {
  background: rgba(8, 131, 149, 0.08);
  border-color: rgba(8, 131, 149, 0.12);
}

.hero-theme-settings__option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.hero-theme-settings__option--active,
.hero-theme-settings__option[aria-pressed="true"] {
  background: rgba(8, 131, 149, 0.12);
  border-color: rgba(8, 131, 149, 0.25);
  color: var(--color-primary-hover);
  transform: translateX(2px);
}

.hero-theme-settings--open .hero-theme-settings__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hero-banner[data-hero-theme="dark"] .hero-theme-settings__trigger,
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__trigger {
  background: rgba(3, 58, 66, 0.88);
  border-color: rgba(184, 238, 245, 0.28);
  color: #b8eef5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.hero-banner[data-hero-theme="dark"] .hero-theme-settings__panel,
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__panel {
  background: rgba(3, 58, 66, 0.96);
  border-color: rgba(184, 238, 245, 0.22);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.hero-banner[data-hero-theme="dark"] .hero-theme-settings__heading,
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__heading {
  color: rgba(184, 238, 245, 0.65);
}

.hero-banner[data-hero-theme="dark"] .hero-theme-settings__option,
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__option {
  color: #f0fafb;
}

.hero-banner[data-hero-theme="dark"] .hero-theme-settings__option i,
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__option i {
  color: #b8eef5;
}

.hero-banner[data-hero-theme="dark"] .hero-theme-settings__option:hover,
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__option:hover {
  background: rgba(184, 238, 245, 0.1);
  border-color: rgba(184, 238, 245, 0.15);
}

.hero-banner[data-hero-theme="dark"] .hero-theme-settings__option--active,
.hero-banner[data-hero-theme="dark"] .hero-theme-settings__option[aria-pressed="true"],
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__option--active,
html[data-hero-theme="dark"] .hero-banner .hero-theme-settings__option[aria-pressed="true"] {
  background: rgba(184, 238, 245, 0.14);
  border-color: rgba(184, 238, 245, 0.3);
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .hero-theme-settings {
    top: max(0.5rem, env(safe-area-inset-top, 0px));
    right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  .hero-theme-settings__trigger {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner,
  .hero-banner::before,
  .hero-banner::after,
  .hero-banner__texture,
  .hero-banner__swoosh,
  .hero-banner__glow-sweep,
  .hero-banner__eyebrow,
  .hero-banner__title,
  .hero-banner__title-accent,
  .hero-banner__bullet-text,
  .hero-banner__bullet-icon,
  .hero-banner__btn--secondary,
  .hero-theme-settings__panel,
  .hero-theme-settings__trigger,
  .hero-theme-settings__option {
    transition-duration: 0.01ms;
  }
}

/* ---------- Quote modal — bold layout (fields match hero; UI is modal-only) ---------- */
.quote-modal[hidden] {
  display: none !important;
}

.quote-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 10800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.quote-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(8, 131, 149, 0.35), transparent 65%),
    rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.36s ease;
}

.quote-modal.quote-modal--animate .quote-modal__backdrop {
  opacity: 1;
}

.quote-modal__dialog {
  --qm-radius: 1.35rem;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  max-height: min(calc(100dvh - 3rem), 46rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 0;
  background: var(--color-surface);
  border-radius: var(--qm-radius);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(8, 131, 149, 0.12),
    0 4px 6px rgba(8, 131, 149, 0.06),
    0 28px 56px rgba(15, 23, 42, 0.28),
    0 0 80px rgba(8, 131, 149, 0.15);
  opacity: 0;
  transform: translateY(1.35rem) scale(0.97);
  transition:
    opacity 0.4s cubic-bezier(0.34, 1.15, 0.64, 1),
    transform 0.4s cubic-bezier(0.34, 1.15, 0.64, 1);
}

@media (min-width: 480px) {
  .quote-modal__dialog {
    max-width: 28rem;
  }
}

@media (min-width: 640px) {
  .quote-modal__dialog {
    max-width: 32rem;
  }
}

.quote-modal.quote-modal--animate .quote-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.quote-modal__close {
  position: absolute;
  top: max(0.65rem, env(safe-area-inset-top));
  right: 0.65rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.quote-modal__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.quote-modal__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.quote-modal__close:active {
  transform: scale(0.94);
}

/* Top “hero” band inside modal */
.quote-modal__hero {
  position: relative;
  flex-shrink: 0;
  padding: clamp(0.85rem, 2.8vh, var(--space-6)) var(--space-4) clamp(1rem, 3.5vh, var(--space-8));
  margin: 0;
  color: #f8fafc;
  text-align: center;
  background:
    linear-gradient(145deg, #045a66 0%, var(--color-primary) 38%, #0a9aad 72%, var(--color-secondary) 120%);
  border-radius: var(--qm-radius) var(--qm-radius) 0 0;
  overflow: hidden;
}

.quote-modal__hero-glow {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 120%;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 72%);
  pointer-events: none;
}

.quote-modal__hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.quote-modal__hero-ring--1 {
  width: 14rem;
  height: 14rem;
  right: -4rem;
  top: -6rem;
  opacity: 0.55;
}

.quote-modal__hero-ring--2 {
  width: 9rem;
  height: 9rem;
  left: -2rem;
  bottom: -2rem;
  opacity: 0.35;
}

.quote-modal__kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 var(--space-3);
  padding: 0.35rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.quote-modal__kicker .fa-feather-pointed {
  font-size: 0.85rem;
  opacity: 0.95;
}

.quote-modal__title {
  position: relative;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.35rem, min(5.5vw, 4.2vh), 2.05rem);
  line-height: 1.12;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
}

.quote-modal__title-sub {
  position: relative;
  margin: 0;
  font-size: clamp(0.75rem, 2.4vw, var(--font-size-sm));
  font-weight: 500;
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.88);
  max-width: 22rem;
  margin-inline: auto;
}

/* Form body — curves up into hero (no inner scroll: flex + overflow hidden) */
.quote-modal__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: -1.25rem;
  padding: clamp(0.75rem, 2vh, var(--space-5)) var(--space-4) clamp(0.75rem, 2vh, var(--space-5));
  background:
    linear-gradient(180deg, rgba(250, 248, 245, 0.98) 0%, var(--color-bg) 55%, var(--color-surface) 100%);
  border-radius: var(--qm-radius) var(--qm-radius) 0 0;
  box-shadow: 0 -12px 32px rgba(8, 131, 149, 0.08);
}

.quote-modal__lead {
  flex-shrink: 0;
  margin: 0 0 clamp(0.5rem, 1.8vh, var(--space-4));
  font-size: clamp(0.78rem, 2.6vw, var(--font-size-sm));
  line-height: 1.45;
  color: var(--color-text-muted);
  text-align: center;
}

.quote-modal__form {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.6vh, var(--space-4));
}

.quote-modal__row {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: clamp(0.4rem, 1.4vh, var(--space-3));
  width: 100%;
}

.quote-modal__row .quote-modal__field {
  width: 100%;
  flex: none;
}

.quote-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.quote-modal__field--full {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.quote-modal__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
  padding-left: 0.15rem;
}

.quote-modal__control {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: clamp(2.65rem, 8vh, 3rem);
  background: var(--color-surface);
  border: 2px solid rgba(8, 131, 149, 0.14);
  border-radius: 0.85rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.quote-modal__control:focus-within {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 4px rgba(8, 131, 149, 0.14),
    var(--shadow-md);
  transform: translateY(-1px);
}

.quote-modal__control--textarea {
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  max-height: clamp(3.5rem, 14vh, 5.5rem);
}

.quote-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3rem;
  font-size: 1rem;
  color: var(--color-primary);
  background: linear-gradient(180deg, rgba(235, 244, 246, 0.95), rgba(122, 178, 178, 0.18));
  border-right: 1px solid rgba(8, 131, 149, 0.1);
}

.quote-modal__icon--top {
  align-items: flex-start;
  padding-top: 0.85rem;
}

.quote-modal__input,
.quote-modal__textarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  line-height: var(--line-height-relaxed);
}

.quote-modal__textarea {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.quote-modal__textarea::-webkit-scrollbar {
  width: 5px;
}

.quote-modal__textarea::-webkit-scrollbar-thumb {
  background: rgba(8, 131, 149, 0.35);
  border-radius: 999px;
}

.quote-modal__textarea::-webkit-scrollbar-track {
  background: transparent;
}

.quote-modal__input::placeholder,
.quote-modal__textarea::placeholder {
  color: var(--color-text-subtle);
}

.quote-modal__legal {
  flex-shrink: 0;
  margin: 0;
  font-size: clamp(0.62rem, 1.9vw, 0.7rem);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.quote-modal__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.quote-modal__link:hover {
  color: var(--color-primary-hover);
}

.quote-modal__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.quote-modal__submit {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: clamp(0.72rem, 2.2vh, 0.95rem) 1.25rem;
  overflow: hidden;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(0.95rem, 3.2vw, var(--font-size-lg));
  letter-spacing: 0.02em;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 0.9rem;
  background: linear-gradient(105deg, #05606e 0%, var(--color-primary) 42%, #3d9a9a 88%);
  box-shadow:
    0 4px 14px rgba(8, 131, 149, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.15, 0.64, 1),
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.quote-modal__submit-shine {
  position: absolute;
  inset: 0;
  translate: -100% 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.quote-modal__submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(8, 131, 149, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  filter: brightness(1.05);
}

.quote-modal__submit:hover .quote-modal__submit-shine {
  animation: quote-modal-shine 0.85s ease forwards;
}

.quote-modal__submit:focus-visible {
  outline: 3px solid rgba(122, 178, 178, 0.85);
  outline-offset: 3px;
}

.quote-modal__submit:active {
  transform: translateY(0);
}

.quote-modal__submit-text {
  position: relative;
  z-index: 1;
}

.quote-modal__submit-icon {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.quote-modal__submit:hover .quote-modal__submit-icon {
  transform: translateX(4px) translateY(-2px);
}

@keyframes quote-modal-shine {
  to {
    translate: 100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-modal__backdrop,
  .quote-modal__dialog {
    transition: none !important;
  }

  .quote-modal.quote-modal--animate .quote-modal__dialog {
    opacity: 1;
    transform: none;
  }

  .quote-modal.quote-modal--animate .quote-modal__backdrop {
    opacity: 1;
  }

  .quote-modal__submit:hover .quote-modal__submit-shine {
    animation: none;
  }

  .quote-modal__control:focus-within {
    transform: none;
  }

  .quote-modal__submit:hover {
    transform: none;
  }

  .quote-modal__submit:hover .quote-modal__submit-icon {
    transform: none;
  }
}

/* ---------- Section 2 (About / Value props) ---------- */
.section-two {
    overflow: hidden;
  padding: var(--space-12) 0;
  background:
    radial-gradient(1100px 520px at 15% 10%, rgba(8, 131, 149, 0.10), transparent 60%),
    radial-gradient(900px 420px at 90% 70%, rgba(122, 178, 178, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(235, 244, 246, 0.55), rgba(250, 248, 245, 0.0));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.section-two__eyebrow,
.team-section__eyebrow {
  margin: 0 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(8, 131, 149, 0.10);
  border: 1px solid rgba(8, 131, 149, 0.18);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: var(--font-size-sm);
}

.section-two__title,
.team-section__title {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.section-two__lead,
.team-section__lead {
  margin: 0 0 var(--space-6);
  max-width: 40rem;
  color: var(--color-text-muted);
  font-size: clamp(0.95rem, 1.5vw, var(--font-size-base));
  line-height: var(--line-height-relaxed);
}

.section-two__features {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.section-two__feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: var(--shadow-sm);
}

.section-two__feature-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: 0 10px 20px rgba(8, 131, 149, 0.18);
}

.section-two__feature-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-text);
}

.section-two__feature-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.section-two__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.section-two__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.05rem;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.section-two__btn--primary {
  color: var(--color-text-on-primary);
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.section-two__btn--primary:hover {
  color: var(--color-text-on-primary);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.section-two__btn--ghost {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid rgba(8, 131, 149, 0.25);
}

.section-two__btn--ghost:hover {
  color: var(--color-primary-hover);
  border-color: rgba(8, 131, 149, 0.35);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.section-two__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.section-two__media {
  position: relative;
  padding: var(--space-4);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.section-two__media::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(8, 131, 149, 0.25), rgba(122, 178, 178, 0.20), transparent 60%);
  filter: blur(18px);
  opacity: 0.8;
  pointer-events: none;
}

.section-two__media-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
}

.section-two__media-card {
  margin: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: var(--color-surface);
  box-shadow: 0 14px 30px rgba(26, 32, 44, 0.10);
  transform: translateZ(0);
}

.section-two__media-card--large {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.section-two__media-card--small {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.section-two__media-card--small2 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.section-two__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.section-two__media-badge {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 2;
  width: min(15rem, 90%);
  padding: var(--space-3) var(--space-3);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}

.section-two__media-badge-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.section-two__media-badge-number {
  font-family: var(--font-family-heading);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-primary);
}

.section-two__media-badge-label {
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--font-size-sm);
  line-height: 1.15;
  text-align: right;
}

.section-two__media-badge-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.section-two__media-badge-bottom i {
  color: var(--color-success);
}

@media (max-width: 991.98px) {
  .bannerimgwrap {
    display: none;
  }
  .section-two {
    padding: var(--space-8) 0;
  }

  .section-two__media {
    margin-top: var(--space-3);
  }
}

@media (max-width: 575.98px) {
  .section-two__media-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .section-two__media-card--large,
  .section-two__media-card--small,
  .section-two__media-card--small2 {
    grid-column: auto;
    grid-row: auto;
  }

  .section-two__media-badge {
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
  }
}

.shapes.batch-cta-form { width: 130px; height: 130px; right: 40px;
  top: -50px; }
  .shapes.batch-cta-form img {
    width: 100%;
}
.batch-cta-form  p{text-align: center;margin: 0;line-height: 1.3;font-weight: 500;font-size: 10px;}
.batch-cta-form  p span{ display: block;font-size: 25px; font-weight: 700;color:var(--color-primary)}


.shapes.batch-cta { width: 250px; height: 250px;  right: 50px; top: 40px;  }
.shapes.batch-cta img {
  width: 100%;
}
.batch-cta  p{text-align: center;margin: 0;line-height: 1.3;font-weight: 500;}
.batch-cta  p span{ display: block;font-size: 30px; font-weight: 700;color:var(--color-primary)}
.cta-section{z-index: 0;position: relative; background-size: cover; background-position: center; background-repeat: no-repeat;padding: 100px 0;text-align: center;}
.cta-section__overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}

.cta-books-wrapper{position: absolute;left:0;  top: 50px;  z-index: 1;}
.cta-books-wrapper img{width:300px;    transform: rotate(-15deg) !important;}


/* ---------- Consultation (light layout + dark primary form panel) ---------- */
.consultation-section {
  position: relative;
  padding: clamp(3.25rem, 7vw, 5.5rem) 0;
  overflow: hidden;
  color: var(--color-text);
  background:
    radial-gradient(900px 480px at 8% 30%, rgba(8, 131, 149, 0.08), transparent 58%),
    radial-gradient(700px 400px at 92% 80%, rgba(122, 178, 178, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(235, 244, 246, 0.45) 0%, var(--color-bg) 45%, var(--color-bg) 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.consultation-section__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.consultation-section__orb--a {
  width: min(360px, 48vw);
  height: min(360px, 48vw);
  top: -12%;
  right: -6%;
  background: rgba(8, 131, 149, 0.09);
}

.consultation-section__orb--b {
  width: min(260px, 38vw);
  height: min(260px, 38vw);
  bottom: 0;
  left: -6%;
  background: rgba(122, 178, 178, 0.12);
}

.consultation-section__container {
  position: relative;
  z-index: 1;
}

.consultation-section__left {
  color: var(--color-text);
}

.consultation-section__kicker {
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.consultation-section__kicker-line {
  display: inline-block;
  width: 2rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), rgba(122, 178, 178, 0.85));
}

.consultation-section__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.consultation-section__intro {
  margin: 0 0 var(--space-8);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 28rem;
}

.consultation-section__highlights {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.consultation-section__highlight {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.consultation-section__highlight:hover {
  border-color: rgba(8, 131, 149, 0.28);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.consultation-section__highlight-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  font-size: 1rem;
  color: var(--color-secondary);
  background: rgba(8, 131, 149, 0.12);
  border: 1px solid rgba(8, 131, 149, 0.22);
}

.consultation-section__highlight-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.consultation-section__highlight-title {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.consultation-section__highlight-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.consultation-section__channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 480px) {
  .consultation-section__channels {
    grid-template-columns: 1fr 1fr;
  }
}

.consultation-section__channel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.consultation-section__channel:hover {
  border-color: rgba(8, 131, 149, 0.32);
  box-shadow: var(--shadow-md);
}

.consultation-section__channel:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.consultation-section__channel-icon {
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 0.55rem;
  color: var(--color-secondary);
  background: rgba(8, 131, 149, 0.12);
  font-size: 0.95rem;
}

.consultation-section__channel-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.consultation-section__channel-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.consultation-section__channel-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}

.consultation-section__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(0.4rem, 2vw, var(--space-3));
  margin-top: var(--space-5);
  width: 100%;
  max-width: 36rem;
}

.consultation-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.8rem 1.05rem;
  border-radius: 0.6rem;
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: clamp(0.72rem, 2.1vw, var(--font-size-sm));
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.consultation-section__btn--primary {
  color: var(--color-text-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.consultation-section__btn--primary:hover {
  color: var(--color-text-on-primary);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.consultation-section__btn--outline {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(8, 131, 149, 0.38);
}

.consultation-section__btn--outline:hover {
  color: var(--color-primary);
  background: #fff;
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.consultation-section__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.consultation-section__btn .fa-solid {
  flex-shrink: 0;
}

@media (max-width: 399.98px) {
  .consultation-section__actions {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .consultation-section__btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
  }

  .consultation-section__btn:last-child {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

.consultation-section__form-col {
  display: flex;
  justify-content: center;
}

@media (min-width: 992px) {
  .consultation-section__form-col {
    justify-content: flex-end;
  }
}

.consultation-section__form-panel {
  position: relative;
  width: 100%;
  max-width: 26.5rem;
  padding: clamp(1.65rem, 3.2vw, 2.15rem) clamp(1.35rem, 2.8vw, 1.75rem);
  border-radius: clamp(1.35rem, 2.5vw, 1.85rem);
  background: linear-gradient(
    168deg,
    #021c22 0%,
    #043a42 38%,
    var(--color-primary) 72%,
    #0a7d8f 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 28px 56px rgba(2, 24, 28, 0.45);
}

.consultation-section__form-head {
  margin-bottom: var(--space-6);
  padding-top: 0.15rem;
}

.consultation-section__form-kicker {
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

.consultation-section__form-kicker .fa-paper-plane {
  font-size: 0.7rem;
  opacity: 0.95;
}

.consultation-section__form-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.02em;
}

.consultation-section__form-lead {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.88);
}

.consultation-section__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.consultation-section__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
}

.consultation-section__label--nowrap {
  white-space: nowrap;
}

.consultation-section__req {
  text-decoration: none;
  color: rgba(186, 230, 253, 0.95);
  font-weight: 700;
}

.consultation-section__optional {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

.consultation-section__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.consultation-section__input-icon {
  position: absolute;
  left: 0.9rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.consultation-section__input,
.consultation-section__textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.72rem 0.8rem 0.72rem 2.5rem;
  font-family: var(--font-family-sans);
  font-size: 0.8125rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.65rem;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.consultation-section__textarea {
  padding-left: 0.8rem;
  min-height: 6.75rem;
  resize: vertical;
  line-height: var(--line-height-relaxed);
}

.consultation-section__input::placeholder,
.consultation-section__textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.consultation-section__input:hover,
.consultation-section__textarea:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.22);
}

.consultation-section__input:focus,
.consultation-section__textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
}

.consultation-section__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.9rem 1.15rem;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.consultation-section__submit:hover {
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary-hover);
  border-color: rgba(255, 255, 255, 0.94);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.consultation-section__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.consultation-section__submit:active {
  transform: translateY(0);
}

.consultation-section__submit .fa-paper-plane {
  color: inherit;
}

.consultation-section__legal {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.consultation-section__legal a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consultation-section__legal a:hover {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 991.98px) {
  .consultation-section__highlight:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consultation-section__highlight,
  .consultation-section__highlight:hover,
  .consultation-section__submit,
  .consultation-section__submit:hover {
    transition: none;
    transform: none;
  }
}

/* ---------- Team section (intro matches section-two content styling) ---------- */
.team-section {
  position: relative;
  min-height: clamp(22rem, 69vh, 69vh);
  overflow: hidden;
  padding: var(--space-12) 0;
  background:
    radial-gradient(1100px 520px at 15% 10%, rgba(8, 131, 149, 0.10), transparent 60%),
    radial-gradient(900px 420px at 90% 70%, rgba(122, 178, 178, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(235, 244, 246, 0.55), rgba(250, 248, 245, 0.0));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
    align-items: center;
}

.team-section__container {
  position: relative;
  z-index: 1;
}

.team-section__shapes.shapes.bg1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  max-width: 100%;
  pointer-events: none;
  z-index: 0;
}
.team-section__shapes.sty1.shapes.bg1 {
  left: 0;
  right: auto;
}
.team-section__shapes.shapes.bg1 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.team-section__lead {
  margin-bottom: 30px;
}

@media (max-width: 991.98px) {
  .team-section {
    padding: var(--space-8) 0;
    min-height: 0;
  }

  .team-section__shapes.shapes.bg1 {
    width: min(72%, 22rem);
    top: -5%;
    opacity: 0.28;
  }
}

@media (max-width: 575.98px) {
  .team-section__shapes.shapes.bg1 {
    width: 85%;
    right: -12%;
    top: -2%;
    opacity: 0.22;
  }
}

/* ---------- Pricing ---------- */
.pricing-section {
    position: relative;
  --pricing-scroll-h: clamp(220px, 30vh, 300px);
  --pricing-scrollbar-track: rgba(8, 131, 149, 0.1);
  --pricing-scrollbar-thumb: var(--color-primary);
  --pricing-scrollbar-thumb-hover: var(--color-primary-hover);
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.pricing-section__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 560px at 8% 0%, rgba(8, 131, 149, 0.14), transparent 55%),
    radial-gradient(900px 480px at 92% 20%, rgba(122, 178, 178, 0.18), transparent 50%),
    radial-gradient(800px 500px at 50% 100%, rgba(8, 131, 149, 0.06), transparent 45%);
  pointer-events: none;
}

.pricing-section__mesh {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(8, 131, 149, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 131, 149, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, black 0%, transparent 88%);
}

.pricing-section__fluid {
  position: relative;
  z-index: 1;
}

/* Centered header — same pattern as portfolio-section__header */
.pricing-section__header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--space-12);
}

.pricing-section__eyebrow {
  margin: 0 auto var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(45, 55, 72, 0.12);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  box-shadow: var(--shadow-sm);
}

.pricing-section__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: var(--line-height-tight);
  color: #1a202c;
}

.pricing-section__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(0.95rem, 1.6vw, var(--font-size-lg));
  line-height: var(--line-height-relaxed);
}

.pricing-section__grid {
  align-items: stretch;
  padding-top: var(--space-6);
}

.pricing-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(var(--space-6) + 4px) var(--space-4) var(--space-6);
  border-radius: 1.1rem;
  background: linear-gradient(180deg, #ffffff 0%, rgba(250, 252, 252, 0.98) 100%);
  border: 1px solid var(--color-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 36px rgba(15, 23, 42, 0.06);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.pricing-card__accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 1.1rem 1.1rem 0 0;
  pointer-events: none;
}

.pricing-card--bronze .pricing-card__accent-bar {
  background: linear-gradient(90deg, #8b5a2b, #c9a66b, #a67c52);
}

.pricing-card--silver .pricing-card__accent-bar {
  background: linear-gradient(90deg, #64748b, #94a3b8, #cbd5e1);
}

.pricing-card--gold .pricing-card__accent-bar {
  background: linear-gradient(90deg, #9a7209, #d4a84b, #e8c76b);
}

.pricing-card--platinum .pricing-card__accent-bar {
  background: linear-gradient(90deg, #475569, #94a3b8 45%, #cbd5e1 75%, #e2e8f0);
}

.pricing-card:hover {
  border-color: rgba(8, 131, 149, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 48px rgba(8, 131, 149, 0.12);
  transform: translateY(-2px);
}

.pricing-card--featured {
  border-color: rgba(8, 131, 149, 0.42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 20px 50px rgba(8, 131, 149, 0.18);
  background: linear-gradient(180deg, rgba(235, 244, 246, 0.5) 0%, #ffffff 38%, rgba(250, 252, 252, 0.98) 100%);
}

.pricing-card--featured:hover {
  border-color: var(--color-primary);
}

.pricing-card__badge {
  position: absolute;
  top: 0;
  right: var(--space-4);
  transform: translateY(-50%);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-secondary);
  color: var(--color-text-on-primary);
  box-shadow: 0 8px 20px rgba(8, 131, 149, 0.38);
  z-index: 2;
}

.pricing-card__badge--muted {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(8, 131, 149, 0.28);
}

.pricing-card__head {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.pricing-card__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.pricing-card__tier {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.pricing-card__desc {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.pricing-card__price {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: 900;
  font-size: 2.35rem;
  line-height: 1;
  color: var(--color-primary);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pricing-card__currency {
  font-size: 1.05rem;
  font-weight: 700;
  vertical-align: super;
  margin-right: 0.12em;
  opacity: 0.92;
}

/* Equal-height scroll region + themed scrollbar */
.pricing-card__list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: var(--pricing-scroll-h);
  max-height: var(--pricing-scroll-h);
  margin-bottom: 20px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: 0.65rem;
  border: 1px solid rgba(8, 131, 149, 0.12);
  background: rgba(235, 244, 246, 0.35);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--pricing-scrollbar-thumb) var(--pricing-scrollbar-track);
}

.pricing-card__list-scroll:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pricing-card__list-scroll::-webkit-scrollbar {
  width: 9px;
}

.pricing-card__list-scroll::-webkit-scrollbar-track {
  margin: 4px 0;
  background: var(--pricing-scrollbar-track);
  border-radius: 999px;
}

.pricing-card__list-scroll::-webkit-scrollbar-thumb {
  background: var(--pricing-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.pricing-card__list-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--pricing-scrollbar-thumb-hover);
}

.pricing-card--featured .pricing-card__list-scroll {
  border-color: rgba(8, 131, 149, 0.2);
  background: rgba(255, 255, 255, 0.65);
}

.pricing-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.10rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.pricing-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.pricing-card__list .fa-check {
  flex-shrink: 0;
  margin-top: 0.22em;
  color: var(--color-primary);
  font-size: 0.72rem;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
}

.pricing-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.45rem;
}

.pricing-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.72rem 0.5rem;
  border-radius: 0.6rem;
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pricing-card__btn .fa-comments,
.pricing-card__btn .fa-phone {
  flex-shrink: 0;
  font-size: 0.85em;
  opacity: 0.95;
}

.pricing-card__btn--chat {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(8, 131, 149, 0.28);
  box-shadow: var(--shadow-sm);
}

.pricing-card__btn--chat:hover {
  color: var(--color-primary-hover);
  border-color: rgba(8, 131, 149, 0.4);
  background: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.pricing-card__btn--call {
  color: var(--color-text-on-primary);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border: 2px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 16px rgba(8, 131, 149, 0.22);
}

.pricing-card__btn--call:hover {
  color: var(--color-text-on-primary);
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(8, 131, 149, 0.28);
  transform: translateY(-1px);
}

.pricing-card__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pricing-card--featured .pricing-card__btn--call {
  box-shadow: 0 8px 22px rgba(8, 131, 149, 0.3);
}

@media (max-width: 991.98px) {
  .pricing-section {
    padding: var(--space-8) 0;
  }

  .pricing-section__header {
    margin-bottom: var(--space-8);
  }
}

@media (max-width: 575.98px) {
  .pricing-section {
    --pricing-scroll-h: clamp(200px, 42vh, 280px);
  }
}

/* ---------- Portfolio: library “catalogue cards” + Slick ---------- */
.portfolio-section {
  position: relative;
  padding: var(--space-12) 0;
  overflow: hidden;
}

.portfolio-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%232d3748'%3E%3Ccircle cx='0' cy='0' r='1.4'/%3E%3Ccircle cx='44' cy='0' r='1.4'/%3E%3Ccircle cx='0' cy='44' r='1.4'/%3E%3Ccircle cx='44' cy='44' r='1.4'/%3E%3Ccircle cx='22' cy='22' r='1.4'/%3E%3C/g%3E%3Cpath d='M22 14v6M22 24v6M14 22h6M24 22h6' stroke='%23088395' stroke-width='0.7' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 44px 44px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

.portfolio-section__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(8, 131, 149, 0.12), transparent 52%),
    radial-gradient(700px 440px at 92% 88%, rgba(183, 154, 107, 0.18), transparent 48%),
    linear-gradient(178deg, #f7f2e8 0%, #ebe4d8 38%, #f2ede4 100%);
  pointer-events: none;
}

.portfolio-section__grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.portfolio-section__container {
  position: relative;
  z-index: 1;
}

.portfolio-section__header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--space-8);
}

.portfolio-section__eyebrow {
  margin: 0 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(45, 55, 72, 0.12);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  box-shadow: var(--shadow-sm);
}

.portfolio-section__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: var(--line-height-tight);
  color: #1a202c;
}

.portfolio-section__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(0.95rem, 1.6vw, var(--font-size-lg));
  line-height: var(--line-height-relaxed);
}

.portfolio-section__slider-outer {
  position: relative;
  padding: 0;
}

.portfolio-section__dots {
  margin-top: var(--space-6);
  padding: 0 var(--space-2);
}

.portfolio-section__dots .slick-dots {
  position: relative;
  bottom: auto;
  left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portfolio-section__dots .slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}

.portfolio-section__dots .slick-dots li button {
  width: 0.65rem;
  height: 0.65rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(45, 55, 72, 0.28);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.portfolio-section__dots .slick-dots li button:hover,
.portfolio-section__dots .slick-dots li button:focus-visible {
  background: rgba(8, 131, 149, 0.55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 131, 149, 0.2);
}

.portfolio-section__dots .slick-dots li.slick-active button {
  background: var(--color-primary);
  transform: scale(1.35);
  box-shadow: 0 0 0 3px rgba(8, 131, 149, 0.22);
}

.portfolio-section__slider.js-portfolio-slider .slick-list {
  overflow: visible;
  padding: 1rem 0 1.35rem;
  margin: 0 -0.15rem;
}

.portfolio-section__slider.js-portfolio-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.portfolio-section__slider.js-portfolio-slider .slick-slide {
  height: auto;
  padding: 0 0.35rem;
}

.portfolio-section__slider.js-portfolio-slider .slick-slide > div {
  height: 100%;
}

.portfolio-book-slide {
  height: 100%;
}

.portfolio-book-card {
  height: 100%;
  width: 100%;
  max-width: 21rem;
  margin-inline: auto;
  outline: none;
}

@media (max-width: 1199.98px) {
  .portfolio-book-card {
    max-width: 20rem;
  }
}

@media (max-width: 767.98px) {
  .portfolio-book-card {
    max-width: min(21rem, calc(50vw - 2rem));
  }
}

.portfolio-book-card:focus-visible .portfolio-book-card__frame {
  box-shadow:
    0 0 0 3px var(--color-primary),
    0 22px 44px rgba(26, 32, 44, 0.14);
}

.portfolio-book-card__frame {
  position: relative;
  height: 100%;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-radius: 0.95rem;
  background: linear-gradient(165deg, #fffefb 0%, #faf6f0 100%);
  border: 1px solid rgba(45, 55, 72, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 36px rgba(26, 32, 44, 0.1),
    0 4px 12px rgba(26, 32, 44, 0.06);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.15, 0.64, 1),
    box-shadow 0.45s ease;
  isolation: isolate;
}

.portfolio-book-card__tape {
  position: absolute;
  top: -0.35rem;
  left: 50%;
  width: 4.5rem;
  height: 1.1rem;
  transform: translateX(-50%) rotate(-2.5deg);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(8, 131, 149, 0.35), rgba(122, 178, 178, 0.45), rgba(8, 131, 149, 0.35));
  opacity: 0.9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.portfolio-book-card__corner {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-color: rgba(8, 131, 149, 0.55);
  border-style: solid;
  pointer-events: none;
  z-index: 1;
}

.portfolio-book-card__corner--tl {
  top: 0.65rem;
  left: 0.65rem;
  border-width: 2px 0 0 2px;
}

.portfolio-book-card__corner--br {
  bottom: clamp(2.65rem, 14vw, 3.15rem);
  right: 0.55rem;
  border-width: 0 2px 2px 0;
}

.portfolio-book-card__cover-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 0.3rem;
  overflow: hidden;
  background: #e3e3e3;
  box-shadow:
    0 0 0 2px #2d3748,
    0 0 0 3px #f7fafc,
    0 8px 20px rgba(26, 32, 44, 0.16);
}

.portfolio-book-card__cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.portfolio-book-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 58%,
    transparent 100%
  );
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.portfolio-book-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed rgba(45, 55, 72, 0.18);
}

.portfolio-book-card__index {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(8, 131, 149, 0.45);
  transition: transform 0.35s ease, -webkit-text-stroke 0.3s ease;
}

.portfolio-book-card:hover .portfolio-book-card__frame,
.portfolio-book-card:focus-within .portfolio-book-card__frame {
  transform: translateY(-14px) rotate(-1deg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 28px 56px rgba(26, 32, 44, 0.16),
    0 0 0 1px rgba(8, 131, 149, 0.2);
}


.portfolio-book-card:hover .portfolio-book-card__cover-wrap img,
.portfolio-book-card:focus-within .portfolio-book-card__cover-wrap img {
  transform: scale(1.07);
}

.portfolio-book-card:hover .portfolio-book-card__shine,
.portfolio-book-card:focus-within .portfolio-book-card__shine {
  opacity: 1;
  animation: portfolio-shine-sweep 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.portfolio-book-card:not(:hover):not(:focus-within) .portfolio-book-card__shine {
  animation: none;
  transform: translateX(-130%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.portfolio-book-card:hover .portfolio-book-card__index,
.portfolio-book-card:focus-within .portfolio-book-card__index {
  transform: scale(1.05);
  -webkit-text-stroke: 1.5px rgba(8, 131, 149, 0.75);
}

@keyframes portfolio-shine-sweep {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

@media (max-width: 991.98px) {
  .portfolio-section {
    padding: var(--space-8) 0;
  }

  .portfolio-section__header {
    margin-bottom: var(--space-6);
  }

  .portfolio-book-card {
    max-width: min(21rem, calc(50vw - 2.5rem));
  }
}

@media (max-width: 575.98px) {
  .portfolio-section__dots {
    margin-top: var(--space-4);
  }

  .portfolio-book-card {
    max-width: min(21rem, calc(100vw - 2.25rem));
  }

  .portfolio-section__slider.js-portfolio-slider .slick-slide {
    padding: 0 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-book-card__frame,
  .portfolio-book-card__cover-wrap img,
  .portfolio-book-card__index {
    transition: none;
  }

  .portfolio-book-card:hover .portfolio-book-card__frame,
  .portfolio-book-card:focus-within .portfolio-book-card__frame {
    transform: none;
  }

  .portfolio-book-card:hover .portfolio-book-card__cover-wrap img,
  .portfolio-book-card:focus-within .portfolio-book-card__cover-wrap img {
    transform: none;
  }

  .portfolio-book-card:hover .portfolio-book-card__shine,
  .portfolio-book-card:focus-within .portfolio-book-card__shine {
    animation: none;
    opacity: 0;
  }

  .portfolio-book-card:hover .portfolio-book-card__index,
  .portfolio-book-card:focus-within .portfolio-book-card__index {
    transform: none;
  }
}

/* ---------- Process (how we work) ---------- */
.process-section {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(8, 131, 149, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(250, 248, 245, 1) 0%, rgba(235, 244, 246, 0.35) 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.process-section__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.45;
  z-index: 0;
}

.process-section__blob--1 {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  top: -12%;
  right: -8%;
  background: rgba(122, 178, 178, 0.55);
}

.process-section__blob--2 {
  width: min(320px, 40vw);
  height: min(320px, 40vw);
  bottom: -18%;
  left: -6%;
  background: rgba(8, 131, 149, 0.22);
}

.process-section__container {
  position: relative;
  z-index: 1;
}

.process-section__intro {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: 1.25rem;
  background: linear-gradient(155deg, #044e5a 0%, var(--color-primary) 42%, #0a6d7c 100%);
  color: var(--color-text-on-dark);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 24px 48px rgba(8, 131, 149, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 992px) {
  .process-section__intro {
    position: sticky;
    top: 6rem;
    min-height: min(28rem, calc(100vh - 8rem));
  }
}

.process-section__eyebrow {
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(247, 250, 252, 0.95);
}

.process-section__eyebrow .fa-route {
  font-size: 0.85rem;
  opacity: 0.9;
}

.process-section__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.65rem, 3.4vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.process-section__title-line {
  display: block;
  margin-top: 0.2em;
  font-weight: 700;
  color: rgba(186, 230, 253, 0.95);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.process-section__lead {
  margin: 0 0 var(--space-8);
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  line-height: var(--line-height-relaxed);
  color: rgba(247, 250, 252, 0.88);
  max-width: 26rem;
}

.process-section__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
}

.process-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1rem;
  border-radius: 0.65rem;
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.process-section__cta--solid {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.process-section__cta--solid:hover {
  color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.process-section__cta--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.process-section__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
}

.process-section__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.process-section__timeline {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
  position: relative;
}

@media (min-width: 992px) {
  .process-section__timeline {
    padding-left: 0.5rem;
  }
}

.process-section__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 1.35rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.process-section__step:not(.process-section__step--last)::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 3.25rem;
  bottom: 0.35rem;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(8, 131, 149, 0.45) 0%,
    rgba(122, 178, 178, 0.35) 55%,
    rgba(8, 131, 149, 0.12) 100%
  );
  border-radius: 999px;
  z-index: 0;
}

.process-section__marker {
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.process-section__marker-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-surface) 0%, rgba(235, 244, 246, 0.9) 100%);
  border: 2px solid rgba(8, 131, 149, 0.35);
  box-shadow: 0 4px 14px rgba(8, 131, 149, 0.12);
}

.process-section__marker-icon {
  position: relative;
  font-size: 1rem;
  color: var(--color-primary);
}

.process-section__card {
  position: relative;
  padding: clamp(1.1rem, 2.2vw, 1.45rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(8, 131, 149, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 32px rgba(15, 23, 42, 0.06);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.process-section__card:hover {
  border-color: rgba(8, 131, 149, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 18px 40px rgba(8, 131, 149, 0.12);
  transform: translateX(4px);
}

.process-section__card:hover .process-section__index {
  color: rgba(8, 131, 149, 0.26);
}

.process-section__index {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  font-family: var(--font-family-heading);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  line-height: 1;
  color: rgba(8, 131, 149, 0.08);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  transition: color 0.25s ease;
}

.process-section__step-title {
  margin: 0 0 var(--space-2);
  padding-right: 3.5rem;
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.process-section__step-text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 38rem;
}

@media (max-width: 991.98px) {
  .process-section__step:not(.process-section__step--last)::before {
    left: 1.2rem;
  }

  .process-section__card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-section__cta--solid:hover,
  .process-section__cta--ghost:hover,
  .process-section__card:hover {
    transform: none;
  }
}

@media (max-width: 1400px) {
  .cta-books-wrapper {
    left: 20px;
    top: 40%;
  }
    .cta-books-wrapper img{
      width:220px;
  }
  /* .shapes.batch-cta {
    zoom: 50%;
  } */
  .shapes.batch-cta {
    width: 150px;
        height: 150px;
        right: 2%;
        top: 50px;
}
}
/* ---------- Responsive: laptops & tablets (1366 → 991) & mobile ---------- */
@media (max-width: 1366px) {
  /* .cta-books-wrapper{left: 50px; }
  .cta-books-wrapper img{width:250px;} */
  .hero-banner__title {
    font-size: clamp(1.85rem, 3.6vw + 0.85rem, 3.35rem);
  }
}

@media (max-width: 1280px) {
  /* .cta-books-wrapper{left: 60px; }
  .cta-books-wrapper img{width:250px;} */
  .pricing-section__header {
    padding-inline: var(--space-2);
  }

  .section-two__title {
    font-size: clamp(1.45rem, 2.6vw + 0.5rem, 2.05rem);
  }
}

@media (max-width: 1024px) {
  .cta-books-wrapper{display:none;}
  .shapes.batch-cta{display:none;}
  .container-fluid.pricing-section__fluid {
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px)) !important;
  }

  .section-two__media-grid {
    max-width: 100%;
  }

  .portfolio-section__header {
    padding-inline: var(--space-2);
  }
}

@media (max-width: 991.98px) {
  .cta-section{
    padding: 60px 0;
  }
  .hero-banner {
    height: auto;
    min-height: max(28rem, 55vh);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
  }

  .hero-banner__inner {
    padding-block: var(--space-8);
  }

  .section-two__media {
    max-width: 38rem;
    margin-inline: auto;
  }

  .site-header__pill {
    font-size: var(--font-size-xs);
    padding: var(--space-2);
  }
}

@media (max-width: 767.98px) {

  .hero-banner__btn{
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
  }
  .hero-banner__actions{
    flex-wrap: nowrap;
  }
  html {
    overflow-x: hidden;
  }

  .hero-banner {
    min-height: 0;
    height: auto;
    padding-bottom: var(--space-8);
  }

  .hero-banner__inner {
    padding-block: var(--space-6);
  }

  .hero-banner__visual {
    max-width: min(22rem, 92vw);
  }

  .hero-banner__quote-inner {
    padding: 20px;
  }

  .consultation-section__form-panel {
    max-width: 100%;
  }

  .two__btn_wrap {
    flex-wrap: wrap;
    width: 100%;
    max-width: 20rem;
  }
}

@media (max-width: 575.98px) {
  /* .hero-banner__actions {
    flex-direction: column;
    align-items: stretch;
  } */

  .hero-banner__btn {
    justify-content: center;
    width: 100%;
  }

  .site-header__logo {
    font-size: clamp(1rem, 5.2vw, 1.35rem);
  }

  .cta-section .two__btn_wrap {
    width: 100%;
    max-width: none;
  }
}




/* HTML: <div class="stamp"></div> */

@keyframes u-blink-pulse-kf {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.10);
    
  }
}

.u-blink-pulse {
  transform-origin: center center;
  animation: u-blink-pulse-kf 2s ease-in-out infinite;
  will-change: transform, opacity;
}

.shapes.wavy-circle {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  background: linear-gradient(
    168deg,
    #ffd293 0%,
    #ffd293 38%,
    #ffd293 72%,
    #ffd293 100%
  );

    width: 100px;
    height: 100px;
    right: 20px;
    top: -50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shapes.wavy-circle p{color: #333;font-size: 11px;text-align: center;margin:0;}
.shapes.wavy-circle p span{font-size: 22px;display: block;font-weight: 700;color: var(--color-primary-hover);}

.shapes.stamp {
    right: -50px;
    top: 260px;
    height: 300px;
    aspect-ratio: 2.5;
    transform: rotate(-60deg);
    padding: 20px;
    background: var(--color-secondary);
    mask: radial-gradient(50% 50%, #0000 66%, #000 67%) round 20px 20px / calc(2 * 20px) calc(2 * 20px), conic-gradient(#000 0 0) content-box;
    opacity: 0.3;
    animation: stamp-drift 11s ease-in-out infinite;
  }

  .shapes.stamp2 {
    right: -50px;
    top: 260px;
    height: 300px;
    aspect-ratio: 2.5;
    transform: rotate(-60deg);
    padding: 20px;
    background: var(--color-secondary);
    mask: radial-gradient(50% 50%, #0000 66%, #000 67%) round 20px 20px / calc(2 * 20px) calc(2 * 20px), conic-gradient(#000 0 0) content-box;
    opacity: 0.3;
    animation: stamp-drift-reverse 12s ease-in-out infinite;
  }

  /* HTML: <div class="spiral"></div> */
.spiral {
    --b: 15px;  /* border thickness */
    --s: 300px; /* preferred size shape */
    --c: var(--color-primary);
  
    width: round(var(--s),4*var(--b));
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
      repeating-radial-gradient(calc(2*var(--b)) at top,#0000 -1px,var(--c) 0 calc(50% - 1px),#0000 50% calc(100% - 1px)) calc(50% + var(--b)) 100%, 
      repeating-radial-gradient(calc(2*var(--b)) at bottom,var(--c) -1px,#0000 0 calc(50% - 1px),var(--c) 50% calc(100% - 1px)) 50% 0;
    background-size: 150% 50%;
    background-repeat: no-repeat;
    mask: 
      radial-gradient(calc(1.5*var(--b)) at calc(100% - var(--b)/2) 0, #0000 calc(100%/3), #000 calc(100%/3 + 1px) 110%, #0000 0) calc(50% + var(--b)/2) 
       100%/calc(3*var(--b)) 50% exclude no-repeat, 
      conic-gradient(#000 0 0);
      opacity: 0.2;
        top: 30px;
        animation: spiral-turn 16s linear infinite;
  }


  .shapes.blob {
    aspect-ratio: 1;
    clip-path: shape(from 87.45% 45.02%,curve to 92.48% 56.45% with 90.99% 50.00%,curve to 92.05% 69.35% with 93.97% 62.91%,curve to 82.42% 77.15% with 90.14% 75.80%,curve to 71.01% 83.22% with 74.69% 78.49%,curve to 61.91% 91.53% with 67.33% 87.95%,curve to 49.74% 96.95% with 56.49% 95.12%,curve to 38.70% 91.46% with 42.99% 98.79%,curve to 25.99% 85.79% with 34.41% 84.13%,curve to 15.38% 80.54% with 17.56% 87.44%,curve to 14.30% 66.90% with 13.20% 73.65%,curve to 13.33% 55.08% with 15.41% 60.16%,curve to 11.20% 44.30% with 11.25% 50.00%,curve to 11.95% 32.32% with 11.14% 38.59%,curve to 16.84% 21.25% with 12.75% 26.06%,curve to 27.31% 15.38% with 20.92% 16.44%,curve to 38.83% 11.12% with 33.70% 14.32%,curve to 50.39% 5.23% with 43.95% 7.93%,curve to 62.85% 5.60% with 56.83% 2.53%,curve to 72.70% 14.03% with 68.88% 8.67%,curve to 79.11% 24.51% with 76.53% 19.39%,curve to 82.80% 34.84% with 81.69% 29.63%,curve to 87.45% 45.02% with 83.91% 40.04%);
    background: var(--color-secondary);
    opacity: 0.5;
    top: 30px;
    right: -110px;
    width: 260px;
    animation: blob-float-right 13s ease-in-out infinite;
}

.shapes.blob2 {
    aspect-ratio: 1;
    clip-path: shape(from 87.45% 45.02%,curve to 92.48% 56.45% with 90.99% 50.00%,curve to 92.05% 69.35% with 93.97% 62.91%,curve to 82.42% 77.15% with 90.14% 75.80%,curve to 71.01% 83.22% with 74.69% 78.49%,curve to 61.91% 91.53% with 67.33% 87.95%,curve to 49.74% 96.95% with 56.49% 95.12%,curve to 38.70% 91.46% with 42.99% 98.79%,curve to 25.99% 85.79% with 34.41% 84.13%,curve to 15.38% 80.54% with 17.56% 87.44%,curve to 14.30% 66.90% with 13.20% 73.65%,curve to 13.33% 55.08% with 15.41% 60.16%,curve to 11.20% 44.30% with 11.25% 50.00%,curve to 11.95% 32.32% with 11.14% 38.59%,curve to 16.84% 21.25% with 12.75% 26.06%,curve to 27.31% 15.38% with 20.92% 16.44%,curve to 38.83% 11.12% with 33.70% 14.32%,curve to 50.39% 5.23% with 43.95% 7.93%,curve to 62.85% 5.60% with 56.83% 2.53%,curve to 72.70% 14.03% with 68.88% 8.67%,curve to 79.11% 24.51% with 76.53% 19.39%,curve to 82.80% 34.84% with 81.69% 29.63%,curve to 87.45% 45.02% with 83.91% 40.04%);
    background: var(--color-secondary);
    opacity: 0.5;
    top: 30px;
    left: -110px;
    width: 260px;
    animation: blob-float-left 14s ease-in-out infinite;
}

/* HTML: <div class="cube"></div> */
.shapes.cube {
    --d: 40px; /* control the depth */
    height: 100%;
    padding: 10px;
    aspect-ratio: 1;
    box-sizing: border-box;
    border: solid var(--color-secondary);
    border-width: 0 var(--d) var(--d) 0;
    clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% var(--d),100% 100%,var(--d) 100%,0 calc(100% - var(--d)));
    background: 
      conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)),#0004 37.5%,#0008 0 75%,#0000 0) border-box
      var(--color-secondary); /* the color */
      opacity: 0.5;
      top: 30px;
      left: -80px;
      width: 220px;
      animation: cube-drift 12s ease-in-out infinite;
  }
  .shapes.cube.sty1 {
    right: -80px;
    left: auto;
  }
@keyframes stamp-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-60deg);
  }

  50% {
    transform: translate3d(-24px, -14px, 0) rotate(-54deg);
  }
}

@keyframes stamp-drift-reverse {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-60deg);
  }

  50% {
    transform: translate3d(22px, 16px, 0) rotate(-66deg);
  }
}

@keyframes spiral-turn {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.04);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes blob-float-right {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-26px, 18px, 0) scale(1.06);
  }
}

@keyframes blob-float-left {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(26px, -18px, 0) scale(1.05);
  }
}

@keyframes cube-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(18px, 14px, 0) rotate(8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shapes.stamp,
  .shapes.stamp2,
  .shapes.spiral,
  .shapes.blob,
  .shapes.blob2,
  .shapes.cube {
    animation: none;
  }
}
  
@media (max-width: 991px) {
    .shapes{
        display: none;
    }
}

/* ============================================================
   Mid-laptop range fixes: 1024px – 1400px
   Tighter container (75rem) + scaled fonts / spacing / media
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1400px) {
  /* Container narrower for cleaner whitespace */
  .container {
    max-width: 75rem;
  }

  .container-fluid.pricing-section__fluid {
    max-width: 78rem;
    margin-inline: auto;
  }

  /* ---------- Hero banner ---------- */
  .hero-banner {
    height: auto;
    min-height: max(32rem, 82vh);
    padding-bottom: clamp(1.75rem, 4vh, 3rem);
  }

  .hero-banner__inner {
    padding-block: clamp(2.25rem, 4vw, 3.25rem);
  }

  .hero-banner__title {
    font-size: clamp(1.65rem, 2.6vw + 0.7rem, 2.65rem);
    line-height: 1.15;
  }

  .hero-banner__lead {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .hero-banner__eyebrow {
    font-size: 0.78rem;
  }

  .hero-banner__btn {
    padding: 0.7rem 1.35rem;
    font-size: 0.92rem;
  }

  .hero-banner__visual {
    max-width: 24rem;
  }

  .hero-banner__quote-inner {
    padding: 1.25rem;
  }

  .hero-banner__quote-title {
    font-size: 1.25rem;
  }

  .hero-banner__quote-lead {
    font-size: 0.88rem;
  }

  .hero-banner__quote-input,
  .hero-banner__quote-textarea {
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
  }

  /* ---------- Section: Services ---------- */
  .section-two {
    padding: 3.25rem 0;
  }

  .section-two__title {
    font-size: clamp(1.45rem, 2.2vw + 0.5rem, 1.95rem);
    line-height: 1.2;
  }

  .section-two__lead,
  .section-two__feature-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .section-two__feature-title {
    font-size: 1rem;
  }

  .section-two__feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .section-two__media {
    max-width: 32rem;
  }

  .section-two__media-badge {
    padding: 0.85rem 1rem;
  }

  .section-two__btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.92rem;
  }

  /* ---------- Section: Portfolio ---------- */
  .portfolio-section {
    padding: 3.25rem 0;
  }

  .portfolio-section__title {
    font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.1rem);
  }

  .portfolio-section__lead {
    font-size: 0.95rem;
  }

  .portfolio-book-card {
    max-width: 18.5rem;
  }

  /* ---------- Section: Process ---------- */
  .process-section {
    padding: 3.25rem 0;
  }

  .process-section__title {
    font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.05rem);
  }

  .process-section__lead {
    font-size: 0.95rem;
  }

  .process-section__card {
    padding: 1rem 1.1rem;
  }

  .process-section__step-title {
    font-size: 1.02rem;
  }

  .process-section__step-text {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .process-section__index {
    font-size: 0.78rem;
  }

  .process-section__cta {
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
  }

  /* ---------- Section: Team ---------- */
  .team-section {
    padding: 3.25rem 0;
  }

  .team-section__title {
    font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.05rem);
  }

  .team-section__lead {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .team-section__shapes.shapes.bg1 {
    width: 46%;
    top: 2%;
  }

  

  /* ---------- Section: Pricing ---------- */
  .pricing-section {
    padding: 3.25rem 0;
  }

  .pricing-section__title {
    font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.05rem);
  }

  .pricing-section__lead {
    font-size: 0.95rem;
  }

  .pricing-card {
    padding: 1.5rem 1rem 1.25rem;
  }

  .pricing-card__name {
    font-size: 0.98rem;
    margin-bottom: 0.6rem;
  }

  .pricing-card__tier {
    font-size: 1.55rem;
  }

  .pricing-card__desc {
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .pricing-card__price {
    font-size: 1.85rem;
  }

  .pricing-card__list li {
    font-size: 0.72rem;
    padding: 0.35rem 0;
    line-height: 1.3;
  }

  .pricing-card__btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }

  .pricing-card__badge {
    padding: 0.3rem 0.7rem;
    font-size: 0.6rem;
  }

  /* ---------- Section: CTA ---------- */
  .cta-section {
    padding: 3.5rem 0;
  }

  .cta-section__title {
    font-size: clamp(1.65rem, 2.6vw + 0.6rem, 2rem);
    line-height: 1.2;
  }

  .cta-section__lead {
    font-size: 0.98rem;
  }

  /* ---------- Section: Consultation ---------- */
  .consultation-section {
    padding: 3.25rem 0;
  }

  .consultation-section__title {
    font-size: clamp(1.55rem, 2.5vw + 0.5rem, 2.1rem);
  }

  .consultation-section__intro {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .consultation-section__highlight-title {
    font-size: 0.95rem;
  }

  .consultation-section__highlight-text {
    font-size: 0.85rem;
    line-height: 1.55;
  }

  .consultation-section__form-panel {
    max-width: 24rem;
    padding: 1.5rem 1.35rem;
  }

  .consultation-section__form-title {
    font-size: 1.1rem;
  }

  .consultation-section__form-lead {
    font-size: 0.85rem;
  }

  .consultation-section__input,
  .consultation-section__textarea {
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem 0.55rem 2.25rem;
  }

  .consultation-section__submit {
    padding: 0.7rem 1.1rem;
    font-size: 0.92rem;
  }

  /* ---------- Footer ---------- */
  .site-footer__main {
    padding: 2.5rem 0;
  }

  .site-footer__heading {
    font-size: 0.95rem;
  }

  .site-footer__about,
  .site-footer__nav a,
  .site-footer__contact-text,
  .site-footer__contact-link {
    font-size: 0.88rem;
  }

  /* ---------- Decorative shapes scale down ---------- */
  .shapes.stamp,
  .shapes.stamp2 {
    height: 220px;
  }

  .spiral {
    --s: 220px;
  }

  .shapes.blob,
  .shapes.blob2 {
    width: 200px;
  }

  .shapes.cube {
    width: 170px;
  }
}

@media (max-width: 575px){
  .shapes.wavy-circle{
    zoom:60%;
  }
}



.error-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 120px);
  padding: clamp(2rem, 6vw, 4rem) 1rem clamp(3rem, 8vw, 5rem);
  background-color: #d3d3d3;
  padding-top: clamp(120px, 18vw, 160px);
  font-family: poppins, Arial, Helvetica, sans-serif;
  color: #333;
}


.error-page__code {
  margin: 0 0 0.35em;
  font-size: clamp(4rem, 14vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #222;
}

.error-page__title {
  margin: 0 0 1rem;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: #333;
}

.error-page__desc {
  margin: 0 0 2rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: #333;
}

.error-page__btn {
  display: inline-block;
  padding: 0.9rem 2.25rem;
  background-color: #088395;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}