/* ==========================================================================
   Kaua'i Cruisers And Carts — base stylesheet (desktop, 1600px artboard)
   Bootstrap 5.3.8 + Swiper 14.3.0
   All breakpoints live in responsive.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from Figma) */
  --clr-primary: #f4861c;
  /* sunset orange: buttons, accents      */
  --clr-primary-dark: #d36a28;
  /* burnt orange: header, about band     */
  --clr-accent: #f08418;
  /* route line, feature lead words       */
  --clr-accent-soft: #ef9233;
  /* CTA heading accent                   */
  --clr-navy: #012b6b;
  /* headings on light                    */
  --clr-navy-700: #02255b;
  --clr-navy-800: #02204e;
  --clr-navy-900: #011a40;
  /* body copy on light                   */
  --clr-indigo: #252a84;
  /* brush tag text / brush               */
  --clr-indigo-light: #3c42b2;
  /* brush tag (secondary)                */
  --clr-midnight: #0a0b41;
  /* Why section, secondary button        */
  --clr-charcoal: #41413f;
  /* hero logo text                       */
  --clr-white: #ffffff;
  --clr-black: #000000;
  --clr-cream: #fff6e8;
  /* page background                      */
  --clr-cream-50: #fffcf2;
  /* glows                                */
  --clr-cream-100: #fcf9ee;
  /* locations background                 */
  --clr-sand: #efe8dd;
  /* footer back edge                     */
  --clr-paper-shadow: #ebe0ce;
  /* torn paper under-layer               */
  --clr-gold: #e0b765;
  /* hero card frame                      */
  --clr-hero-tint: #312424;
  --clr-footer: #151414;
  --clr-footer-text: #e0dfdf;
  --clr-feature-text: #dddddd;
  --clr-placeholder: #d9d9d9;

  /* Section colours */
  --section-header-bg: var(--clr-primary-dark);
  --section-hero-bg: var(--clr-primary);
  --section-about-bg: var(--clr-primary-dark);
  --section-rides-bg: var(--clr-cream);
  --section-why-bg: var(--clr-midnight);
  --section-locations-bg: var(--clr-cream-100);
  --section-cta-bg: var(--clr-white);
  --section-footer-bg: var(--clr-footer);
  --section-footer-edge: var(--clr-sand);

  /* Typography */
  --ff-heading: "Montserrat", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-h1: clamp(2.25rem, 1.2rem + 3.1vw, 3.875rem);
  /* 62px */
  --fs-h1-span: clamp(1.5rem, .95rem + 1.9vw, 2.75rem);
  /* 44px */
  --fs-h2: clamp(2rem, 1.15rem + 2.65vw, 3.75rem);
  /* 60px */
  --fs-h2-cta: clamp(1.875rem, 1.1rem + 2.35vw, 3.375rem);
  /* 54px */
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  /* 24px */
  --fs-logo-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  /* 40px */
  --fs-location: clamp(1.375rem, 1.2rem + .6vw, 1.6875rem);
  /* 27px */
  --fs-xl: 1.25rem;
  /* 20px */
  --fs-lg: 1.125rem;
  /* 18px */
  --fs-md: 1.0625rem;
  /* 17px */
  --fs-base: 1rem;
  /* 16px */
  --fs-sm: .9375rem;
  /* 15px */

  --lh-h1: .95;
  --lh-h2: 1.05;
  --lh-h3: 1.3;
  --ls-h1: -.05em;
  --ls-h2: -.03em;
  --ls-tight: -.03em;
  --ls-snug: -.02em;
  --ls-wide: .02em;

  /* Heading colours (overridden per section) */
  --h1-color: var(--clr-white);
  --h1-span-color: var(--clr-white);
  --h2-color: var(--clr-navy);
  --h2-span-color: var(--clr-primary);
  --h2-span-weight: inherit;
  --h2-span-size: 1em;
  --h3-color: var(--clr-navy);

  /* Layout — 1 design pixel; scales down below the 1600px artboard */
  --u: min(1px, calc(100vw / 1600));
  --container-max: 1264px;
  /* 1240px content + gutters           */
  --container-wide: 1431px;
  /* footer: 1407px content             */
  --header-h: 77px;
  --torn-band: calc(120 * var(--u));
  /* hero band bottom edge               */
  --torn-why: calc(153 * var(--u));
  /* Why section top edge                */
  --torn-cta: calc(153 * var(--u));
  /* CTA top edge                        */
  --torn-footer: calc(152 * var(--u));

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-card: 30px;
  --radius-lg: 32px;
  --radius-xl: 50px;
  --radius-pill: 60px;

  /* Effects */
  --shadow-btn: drop-shadow(0 4px 4px rgba(0, 0, 0, .12)) drop-shadow(0 9px 9px rgba(0, 0, 0, .06));
  --shadow-deco: drop-shadow(6px 8px 14px rgba(0, 0, 0, .22));
  --shadow-frame: 0 24px 50px rgba(0, 0, 0, .22);
  --transition: .3s cubic-bezier(.4, 0, .2, 1);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--ff-body);
  --bs-body-color: var(--clr-navy-900);
  --bs-body-bg: var(--clr-cream);
  --bs-link-color-rgb: 244, 134, 28;
  --bs-link-hover-color-rgb: 211, 106, 40;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  overflow-x: hidden;
}

body {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  background: var(--clr-cream);
  color: var(--clr-navy-900);
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

a {
  transition: color var(--transition), opacity var(--transition);
}

p:last-child {
  margin-bottom: 0;
}

.container {
  max-width: var(--container-max);
}

.container--wide {
  max-width: var(--container-wide);
}

/* --------------------------------------------------------------------------
   3. Global headings (h1, h2, h3)
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--h1-color);
}

h1 span {
  display: block;
  margin-top: .3em;
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1-span);
  line-height: 1.25;
  color: var(--h1-span-color);
}

h2 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--h2-color);
}

/* Every h2 carries one accent <span>; each section tunes it with variables */
h2 span {
  color: var(--h2-span-color);
  font-weight: var(--h2-span-weight);
  font-size: var(--h2-span-size);
}

h3 {
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: 0;
  color: var(--h3-color);
}


/* Btn Design */

.site_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 56px;
  padding: 0 80px 0 20px;
  color: #fff;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  max-width: fit-content;
}

.site_btn::before {
  position: absolute;
  content: "";
  background-color: #f4861c;
  border-radius: 9999px 0 0 9999px;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(100% - 56px);
}

.site_btn::after {
  position: absolute;
  content: "";
  top: 0;
  right: 34px;
  width: 25px;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 56' width='25' height='56'%3E%3Cpath fill='%23f4861c' d='M16.7 0c2.7 0 5.3.4 7.8 1.1-11.7 3.4-20.2 14.1-20.2 26.9 0 12.8 8.5 23.5 20.2 26.9-2.5.7-5.1 1.1-7.8 1.1h-140.7c-15.5 0-28-12.5-28-28 0-15.5 12.5-28 28-28z'/%3E%3C/svg%3E") no-repeat;
}

.btn__icon {
  position: absolute;
  top: 50%;
  right: 0;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}

.btn__icon svg {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--cruiser .btn__icon {
  background-color: #f5871f;
}

.btn--cart .btn__icon {
  background-color: #0a0b41;
}

.btn--cart.site_btn::before {
  background-color: #0a0b41;
}

.btn--cart.site_btn::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 56' width='25' height='56'%3E%3Cpath fill='%230A0B41' d='M16.7 0c2.7 0 5.3.4 7.8 1.1-11.7 3.4-20.2 14.1-20.2 26.9 0 12.8 8.5 23.5 20.2 26.9-2.5.7-5.1 1.1-7.8 1.1h-140.7c-15.5 0-28-12.5-28-28 0-15.5 12.5-28 28-28z'/%3E%3C/svg%3E") no-repeat;
}

.site_btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.btn__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 36px;
  border-radius: 999px 0 0 999px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle 41px at 100% 50%,
      transparent 40.5px,
      #000 41px);
  mask: radial-gradient(circle 41px at 100% 50%,
      transparent 40.5px,
      #000 41px);
}

.btn__shine::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 90px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 35%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.1) 65%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: translateX(-120%) skewX(-20deg);
  transition:
    opacity 0.3s ease,
    transform 0s linear 0.3s;
}

.btn__shine::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 190px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.09) 55%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: translateX(-110%) skewX(-20deg);
  transition:
    opacity 0.3s ease,
    transform 0s linear 0.3s;
}

.btn__label {
  position: relative;
  display: block;
  padding: 4px 0;
  margin: -4px 0;
  overflow: hidden;
}

.btn__text {
  position: relative;
  display: block;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.15, 1);
}

.btn__text::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 140%;
  left: 0;
  white-space: nowrap;
}

.btn__icon::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity 0.4s ease,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn__icon::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 36px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.32) 50%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-130%) skewX(-20deg);
  transition:
    opacity 0.3s ease,
    transform 0s linear 0.3s;
}

.btn__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@media (hover: hover) and (pointer: fine) {

  .site_btn:hover .btn__shine::before,
  .site_btn:focus-visible .btn__shine::before {
    opacity: 1;
    transform: translateX(380%) skewX(-20deg);
    transition:
      opacity 0.15s ease,
      transform 0.8s cubic-bezier(0.45, 0.05, 0.2, 1);
  }

  .site_btn:hover .btn__shine::after,
  .site_btn:focus-visible .btn__shine::after {
    opacity: 1;
    transform: translateX(210%) skewX(-20deg);
    transition:
      opacity 0.15s ease 0.06s,
      transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1) 0.06s;
  }

  .site_btn:hover .btn__icon::after,
  .site_btn:focus-visible .btn__icon::after {
    opacity: 1;
    transform: translateX(450%) skewX(-20deg);
    transition:
      opacity 0.15s ease,
      transform 0.6s cubic-bezier(0.45, 0.05, 0.2, 1) 0.3s;
  }

  .site_btn:hover .btn__text,
  .site_btn:focus-visible .btn__text {
    transform: translateY(-140%);
  }

  .site_btn:hover .btn__icon::before,
  .site_btn:focus-visible .btn__icon::before {
    opacity: 1;
    transform: scale(1);
  }

  .site_btn:hover .btn__icon path,
  .site_btn:focus-visible .btn__icon path {
    animation: btn-draw 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  .site_btn:hover .btn__icon path:nth-child(1),
  .site_btn:focus-visible .btn__icon path:nth-child(1) {
    animation-delay: 0s;
  }

  .site_btn:hover .btn__icon path:nth-child(2),
  .site_btn:focus-visible .btn__icon path:nth-child(2) {
    animation-delay: 0.08s;
  }

  .site_btn:hover .btn__icon path:nth-child(3),
  .site_btn:focus-visible .btn__icon path:nth-child(3) {
    animation-delay: 0.04s;
  }

  .site_btn:hover .btn__icon path:nth-child(4),
  .site_btn:focus-visible .btn__icon path:nth-child(4) {
    animation-delay: 0.12s;
  }

  .site_btn:hover .btn__icon path:nth-child(5),
  .site_btn:focus-visible .btn__icon path:nth-child(5) {
    animation-name: btn-ripple;
    animation-delay: 0.2s;
  }

  .site_btn:hover .btn__icon path:nth-child(6),
  .site_btn:focus-visible .btn__icon path:nth-child(6) {
    animation-name: btn-ripple;
    animation-delay: 0.26s;
  }

  .site_btn:hover .btn__icon .btn__logo-cover,
  .site_btn:focus-visible .btn__icon .btn__logo-cover {
    animation: btn-logo-cover 0.8s step-end both;
  }
}

@keyframes btn-logo-cover {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes btn-draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes btn-ripple {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
    transform: translateX(-5px);
  }

  12% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .btn__shine,
  .btn__icon::after,
  .btn__text::after {
    display: none;
  }

  .btn__text {
    transition: none;
    transform: none !important;
  }

  .btn__icon::before {
    transition: opacity 0.3s ease;
    transform: none !important;
  }

  .btn__icon path {
    animation: none !important;
  }

  .btn__icon .btn__logo-cover {
    animation: none !important;
  }
}

/* Btn Design */

/* --------------------------------------------------------------------------
   4. Shared components
   -------------------------------------------------------------------------- */

/* Decorative cut-outs (flowers & palms) — sized/placed in design pixels */
.deco {
  position: absolute;
  z-index: 6;
  width: calc(var(--w) * var(--u));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: var(--shadow-deco);
}

/* Brush-stroke label */
.brush-tag {
  --brush: var(--clr-white);
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 12px 80px;
  font-size: var(--fs-sm);
  line-height: 25px;
  letter-spacing: var(--ls-snug);
  isolation: isolate;
}

.brush-tag::before {
  content: "";
  position: absolute;
  background: url(../images/bnr_vec_1.png) no-repeat center;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: 100% 100%;
}


.brush-tag--blue.brush-tag::before {
  background: url(../images/bnr_vec_2.png) no-repeat center;
  background-size: 100% 100%;
}

.brush-tag--light {
  --brush: var(--clr-white);
  color: var(--clr-indigo);
}

.brush-tag--blue {
  --brush: var(--clr-indigo-light);
  max-width: 646px;
  padding: 17px 120px;
  color: var(--clr-white);
  font-size: var(--fs-base);
  line-height: 24px;
}

/* Glass photo frame (about) */
.glass-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.glass-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* White photo frame (locations) */
/* .photo-frame {
  overflow: hidden;
  border: 6px solid var(--clr-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 9px rgba(255, 255, 255, .8), 0 18px 40px rgba(1, 43, 107, .14);
} */

.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Torn-paper edges (shapes taken from the Figma vectors) */
/* .torn-bottom::after,
.torn-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
  background-color: var(--torn-color);
} */

.torn-bottom::after {
  top: calc(100% - 1px);
  height: var(--torn-band);
  -webkit-mask: url("../images/torn-edge-1.svg") center / 100% 100% no-repeat;
  mask: url("../images/torn-edge-1.svg") center / 100% 100% no-repeat;
}

.torn-top::before {
  bottom: calc(100% - 1px);
  height: var(--torn-why);
  transform: scaleY(-1);
  -webkit-mask: url("../images/torn-edge-2.svg") center / 100% 100% no-repeat;
  mask: url("../images/torn-edge-2.svg") center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--section-header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--header-h);
  padding: 0 18px 0 42px;
}

.header-lang {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-right: 52px;
  margin-right: 17px;
  border-right: 1px solid rgba(255, 255, 255, .3);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: .03em;
}

.lang-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--clr-white);
}

.header-lang .dropdown-menu {
  --bs-dropdown-min-width: 5rem;
  --bs-dropdown-link-active-bg: var(--clr-primary);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--clr-white);
  text-decoration: none;
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  font-size: 1.1875rem;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.brand:hover {
  color: var(--clr-white);
  opacity: .9;
}

.brand img {
  width: 42px;
  height: auto;
}

#mainNav,
#mainNav .offcanvas-body {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  align-self: stretch;
}

.main-nav {
  flex-direction: row;
  gap: 20px;
  margin-left: auto;
  margin-right: 32px;
}

.main-nav .nav-link {
  position: relative;
  padding: 0;
  color: rgba(255, 255, 255, .8);
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  letter-spacing: -.01em;
}

.main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--clr-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--clr-white);
}

.main-nav .nav-link.active {
  font-weight: var(--fw-semibold);
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after {
  transform: scaleX(1);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  padding-left: 15px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  color: var(--clr-white);
  text-decoration: none;
  font-family: var(--ff-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: -.03em;
  white-space: nowrap;
}

.header-phone:hover {
  color: var(--clr-cream);
}

.navbar-toggler {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 10px;
  border: 0;
  box-shadow: none !important;
}

.toggler-bar {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--clr-white);
}

/* --------------------------------------------------------------------------
   6. Hero + About band (orange, tropical texture)
   -------------------------------------------------------------------------- */
.tropical-band {
  --torn-color: var(--section-about-bg);
  position: relative;
  z-index: 2;
  isolation: isolate;
  /* #f4861c on top, melting into #d36a28 (Figma: blurred vector at y≈802) */
  background: linear-gradient(180deg,
      var(--section-hero-bg) 0,
      var(--section-hero-bg) calc(650 * var(--u)),
      var(--section-about-bg) calc(900 * var(--u)));
}

.tropical-band__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--section-hero-bg);
  /* Figma: the leaf image twice — COLOR_DODGE layer over an OVERLAY layer */
  background-image: url("../images/hero-texture.webp"), url("../images/hero-texture.webp");
  background-size: 119.75vw auto, 200.9vw auto;
  background-position: -9.875vw -4.8vw, -40.56vw -4.8vw;
  background-repeat: no-repeat;
  background-blend-mode: color-dodge, overlay;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 calc(190 * var(--u)), #000 calc(640 * var(--u)), transparent calc(880 * var(--u)));
  mask: linear-gradient(180deg, transparent 0, #000 calc(190 * var(--u)), #000 calc(640 * var(--u)), transparent calc(880 * var(--u)));
}

.tropical-band__texture::after {
  /* noise @ 30% */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/noise.webp") right top / calc(1584 * var(--u)) auto no-repeat;
  opacity: .3;
}

/* Hero */
.hero_card_mob{display: none;}

.hero {
  position: relative;
  padding: calc(80 * var(--u)) calc(52 * var(--u)) 0;
}

.hero-card {
  position: relative;
  min-height: calc(743 * var(--u));
  border-radius: var(--radius-card);
  border: 18px solid rgba(224, 183, 101, 1);
  box-shadow: 0px 0px 40px 25px rgba(116, 51, 11, 0.9), inset -2px -3px 2px 0px rgba(0, 0, 0, 0.22), inset 2px 3px 2px 1px rgba(255, 255, 255, 0.35);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  background: var(--section-about-bg);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .35), inset 0 -2px 2px rgba(0, 0, 0, .22);
}

.hero-media::before {
  position: absolute;
  background: linear-gradient(180deg, rgba(248, 253, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 1;
  content: "";
}

.hero-media__photo,
.hero-media__cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: inherit;
  padding: calc(50 * var(--u)) calc(127 * var(--u)) calc(39 * var(--u));
  text-align: center;
}

.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  position: relative;
}

.hero-logo::before {
  position: absolute;
  max-width: 500px;
  content: "";
  top: 0;
  left: 50%;
  width: 500px;
  height: 250px;
  max-width: 100%;
  background: #ffffffd1;
  border-radius: 50%;
  filter: blur(50px);
  transform: translateX(-50%);
  z-index: -1;
}

.hero-logo img {
  width: calc(100 * var(--u));
  min-width: 80px;
}

.hero-logo__text {
  margin: 0;
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-logo-xl);
  line-height: 1.05;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-charcoal);
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 24px;
}

.hero-bottom>.btn-kauai {
  margin-top: -10px;
}

.hero-bottom>.btn-kauai:first-child {
  justify-self: start;
}

.hero-bottom>.btn-kauai:last-child {
  justify-self: end;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: 14px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}

.hero-copy h1 span {
  margin-top: .1em;
}

.hero-copy .brush-tag--light {
  margin-bottom: 10px;
}

.deco--hero-cluster {
  --w: 400;
  left: calc(-149 * var(--u));
  top: calc(-34 * var(--u));
  transform: rotate(180deg);
}

.deco--hero-palm {
  --w: 506;
  right: calc(-252 * var(--u));
  top: calc(-25 * var(--u));
  transform: matrix(-.745, .667, .667, .745, 0, 0);
}

.deco--hero-hibiscus {
  --w: 416;
  right: calc(-64 * var(--u));
  bottom: calc(-105 * var(--u));
}

/* About */
.about {
  --h2-color: var(--clr-white);
  position: relative;
  padding: calc(134 * var(--u)) 0;
  color: var(--clr-white);
  /* background: url(../images/About_bg.png) no-repeat center;
  background-size: 100%; */
}

/* h2 accent: white words on an indigo brush stroke */
.about h2 span {
  position: relative;
  display: inline-block;
  padding: 0;
  color: var(--clr-white);
  isolation: isolate;
}

/* .about h2 span::before {
  content: "";
  position: absolute;
  inset: .1em -.05em .02em;
  z-index: -1;
  background: var(--clr-indigo);
  -webkit-mask: url("../images/brush.svg") center / 100% 100% no-repeat;
  mask: url("../images/brush.svg") center / 100% 100% no-repeat;
} */

.about-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 539fr) minmax(0, 705fr);
  grid-template-areas:
    "intro main"
    "sub   body";
}

.about-intro {
  grid-area: intro;
  max-width: 465px;
  padding-top: calc(86 * var(--u));
}

.about-lead {
  margin: 35px 0 0;
  font-size: var(--fs-xl);
  line-height: 32px;
  letter-spacing: -.04em;
  text-align: justify;
}

.about-photo--main {
  grid-area: main;
  aspect-ratio: 705 / 558;
}

.about-photo-wrap {
  grid-area: sub;
  position: relative;
  width: calc(561 / 539 * 100%);
  margin: calc(-58 * var(--u)) 0 0 calc(15 / 539 * 100%);
}

.about-photo--sub {
  aspect-ratio: 561 / 444;
  border-radius: var(--radius-lg);
  rotate: -6.87deg;
  margin-right: -30px;
  margin-left: 30px;
}

.about-body {
  grid-area: body;
  max-width: 522px;
  margin: calc(52 * var(--u)) 0 0 calc(127 * var(--u));
  font-size: var(--fs-xl);
  line-height: 34px;
  letter-spacing: -.04em;
  text-align: justify;
}

.deco--about-orchid {
  --w: 318;
  left: calc(-224 * var(--u));
  top: calc(-123 * var(--u));
  z-index: 7;
  transform: matrix(-.653, -.758, -.758, .653, 0, 0);
}

.deco--band-palm {
  --w: 444;
  right: calc(-123 * var(--u));
  bottom: calc(-132 * var(--u));
  transform: matrix(-.774, .633, .633, .774, 0, 0);
}



/* --------------------------------------------------------------------------
   10. CTA
   -------------------------------------------------------------------------- */
.cta {
  --h2-color: var(--clr-navy);
  --h2-span-color: var(--clr-accent-soft);
  --h2-span-weight: var(--fw-semibold);
  position: relative;
  z-index: 3;
  min-height: calc(708 * var(--u));
  padding: calc(190 * var(--u)) 0 calc(var(--torn-footer) + 70 * var(--u));
  background: var(--section-cta-bg);
  isolation: isolate;
  /* torn top edge (Figma vector rotated 180°), solid below */
  -webkit-mask:
    url("../images/torn-edge-2-top.svg") top / 100% var(--torn-cta) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--torn-cta) - 1px) / 100% 100% no-repeat;
  mask:
    url("../images/torn-edge-2-top.svg") top / 100% var(--torn-cta) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--torn-cta) - 1px) / 100% 100% no-repeat;
}

.cta__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.cta__glow {
  /* cream ellipse @ 91%, blur 230 */
  position: absolute;
  inset: 0;
  background: radial-gradient(calc(760 * var(--u)) calc(400 * var(--u)) at calc(447 * var(--u)) calc(286 * var(--u)), rgba(255, 252, 242, .91) 0%, rgba(255, 252, 242, .75) 45%, rgba(255, 252, 242, 0) 100%);
}

.cta__shade {
  /* black ellipse @ 87%, blur 230 */
  position: absolute;
  inset: 0;
  background: radial-gradient(calc(760 * var(--u)) calc(400 * var(--u)) at calc(1323 * var(--u)) calc(676 * var(--u)), rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, 0) 100%);
}

.cta__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.cta__content {
  max-width: 662px;
}

.cta h2 {
  font-size: var(--fs-h2-cta);
  line-height: 1.11;
}

.cta__text {
  margin: 20px 0 33px;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
  color: rgba(2, 37, 91, .9);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.mail-pill {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 24px 82px;
  color: var(--clr-black);
  text-decoration: none;
  font-size: 1.1875rem;
  letter-spacing: var(--ls-tight);
  isolation: isolate;
}

.mail-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--clr-white);
  -webkit-mask: url("../images/brush.svg") center / 100% 100% no-repeat;
  mask: url("../images/brush.svg") center / 100% 100% no-repeat;
  transition: background-color var(--transition);
}

.mail-pill:hover {
  color: var(--clr-white);
}

.mail-pill:hover::before {
  background: var(--clr-primary);
}

.mail-pill:hover img {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 5;
  padding: calc(52 * var(--u) + 20px) 0 48px;
  background: var(--section-footer-bg);
  color: var(--clr-footer-text);
  isolation: isolate;
}

/* two torn layers over the CTA: sand behind, charcoal in front */
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--torn-footer);
  pointer-events: none;
  -webkit-mask: url("../images/torn-edge-3.svg") center / 100% 100% no-repeat;
  mask: url("../images/torn-edge-3.svg") center / 100% 100% no-repeat;
}

.site-footer::before {
  z-index: -1;
  background: var(--section-footer-edge);
  transform: translateY(calc(-26 * var(--u))) scale(-1, -1);
}

.site-footer::after {
  background: var(--section-footer-bg);
  transform: scaleY(-1);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 853fr) minmax(0, 490fr);
  gap: 48px calc(64 * var(--u));
  align-items: start;
}

.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 318fr) minmax(0, 112fr) minmax(0, 131fr);
  gap: 32px calc(146 * var(--u));
}

.footer-about {
  max-width: 300px;
  margin: 26px 0 38px;
  font-size: var(--fs-base);
  line-height: 26px;
  letter-spacing: var(--ls-snug);
  color: var(--clr-footer-text);
}

.footer-social {
  display: inline-block;
  transition: transform var(--transition);
}

.footer-social:hover {
  transform: translateY(-3px) rotate(-8deg);
}

.footer-heading {
  margin: 8px 0 40px;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: var(--ls-snug);
  text-transform: capitalize;
  color: var(--clr-white);
}

.footer-links {
  display: grid;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: rgba(224, 223, 223, .8);
  text-decoration: none;
  font-size: var(--fs-base);
  line-height: 1.5;
}

.footer-links--light a {
  color: rgba(255, 255, 255, .8);
}

.footer-links a:hover {
  color: var(--clr-primary);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid rgba(199, 206, 221, .2);
  font-size: var(--fs-sm);
  color: var(--clr-white);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: var(--clr-white);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--clr-primary);
}

.footer-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.footer-gallery img {
  width: 100%;
  aspect-ratio: 240 / 192;
  object-fit: cover;
  border-radius: var(--radius-xs);
  transition: transform var(--transition), filter var(--transition);
}

.footer-gallery img:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.deco--footer-hibiscus {
  --w: 356;
  right: calc(-67 * var(--u));
  top: calc(-251 * var(--u));
}


/* --------------------------------------------------------------------------
   7. Two Rides
   -------------------------------------------------------------------------- */
.rides {
  --h2-color: var(--clr-navy);
  --h2-span-color: var(--clr-primary);
  position: relative;
  padding: calc(228 * var(--u)) 0 calc(258 * var(--u));
  background: var(--section-rides-bg);
}

.title-lined {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: calc(115 * var(--u));
  text-align: center;
}

.title-lined__rule {
  flex: 0 0 56px;
  height: 1.5px;
  background: var(--clr-primary);
}

.rides-grid {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.ride-card {
  position: relative;
  isolation: isolate;
  display: flex;
  width: calc(50% - 10px);
  flex-direction: column;
  min-height: calc(698 * var(--u));
  border-radius: var(--radius-xl);
  background: var(--clr-placeholder);
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.05),
    0 30px 60px rgba(76, 46, 14, 0.12);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.ride-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.05),
    0 40px 70px rgba(76, 46, 14, 0.2);
}

.ride-card__photo {
  position: relative;
  flex: 1 1 auto;
}

.ride-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ride-card__vehicle {
  position: absolute;
  z-index: 2;
  max-width: none;
  pointer-events: none;
  transition: transform 0.6s ease;
}

.ride-card:hover .ride-card__vehicle {
  transform: translateX(10px);
}

.ride-card__paper {
  position: relative;
  z-index: 1;
  padding: 0 calc(37 * var(--u));
  background: var(--clr-white);
}

.ride-card__paper h3 {
  margin-bottom: 26px;
}

.ride-card__paper p {
  max-width: 494px;
  margin-bottom: 31px;
  font-size: var(--fs-lg);
  line-height: 30px;
  letter-spacing: var(--ls-snug);
  color: rgba(1, 26, 64, 0.87);
}

/* Cruiser: photo on top, torn paper (with beige under-layer) below */
/* .ride-card--cruiser .ride-card__photo {
  aspect-ratio: 610 / 392;
} */

.ride-card--cruiser .ride-card__paper {
  padding-top: calc(42 * var(--u));
  padding-bottom: calc(56 * var(--u));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.ride-card--cruiser .ride-card__paper::before {
  bottom: calc(100% + 8 * var(--u) - 1px);
  background: var(--clr-paper-shadow);
  transform: scaleY(-1);
}

/* .ride-card--cruiser .ride-card__paper::after {
  bottom: calc(100% - 1px);
  background: var(--clr-white);
  transform: scaleY(-1);
} */

.ride-card--cruiser .ride-card__photo img {
  width: 100%;
  height: 107%;
  margin-top: -27px;
}

/* Cart: torn paper on top, photo below */
.ride-card--cart .ride-card__paper {
  padding-top: calc(43 * var(--u));
  padding-bottom: calc(21 * var(--u));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.ride-card--cart .ride-card__paper::before {
  display: none;
}

.ride-card--cart .ride-card__paper::after {
  top: calc(100% - 1px);
  background: var(--clr-white);
}

.ride-card--cart .ride-card__photo img {
  width: 100%;
  height: 113%;
  margin-bottom: -64px;
}



/* --------------------------------------------------------------------------
   8. Why Ride With Us (navy, the only slider on the page)
   -------------------------------------------------------------------------- */
.why {
  --torn-color: var(--section-why-bg);
  --h2-color: var(--clr-white);
  --h2-span-color: var(--clr-primary);
  position: relative;
  z-index: 3;
  padding: 228px 0 125px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  overflow: hidden;
}

.why>.container {
  position: relative;
  z-index: 2;
}

.why-heading {
  margin-bottom: calc(67 * var(--u));
  text-align: center;
}

.why-heading__icon {
  display: block;
  width: 97px;
  margin: 0 auto;
  opacity: 0.5;
  -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 100%);
  mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 100%);
}

.why-slider {
  position: relative;
}

.why-slide {
  aspect-ratio: 295 / 271;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.why-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.why-slide:hover img {
  transform: scale(1.06);
}

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--clr-white);
  transform: translateY(-50%);
  transition:
    background-color var(--transition),
    border-color var(--transition),
    opacity var(--transition);
}

.slider-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.slider-arrow--prev {
  left: -72px;
}

.slider-arrow--prev::before {
  transform: translateX(2px) rotate(-135deg);
}

.slider-arrow--next {
  right: -72px;
}

.slider-arrow--next::before {
  transform: translateX(-2px) rotate(45deg);
}

.slider-arrow:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}

.slider-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px calc(69 * var(--u));
  margin: 28px 0 0;
  padding: 0 calc(25 * var(--u));
  list-style: none;
}

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

.feature:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(50% + 91px);
  width: 138px;
  height: 6px;
  background: url("../images/flat-line.png") no-repeat center;
  background-size: contain;
}

.feature__icon {
  display: inline-grid;
  place-items: center;
  width: 55px;
  height: 55px;
  margin-bottom: 22px;
  border-radius: 70px;
  background: rgba(255, 255, 255, 0.14);
}

.feature__icon img {
  width: 41px;
  height: 41px;
}

.feature p {
  max-width: 246px;
  margin: 0 auto;
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: 27px;
  letter-spacing: var(--ls-tight);
  color: var(--clr-feature-text);
}

.feature p span {
  font-weight: var(--fw-medium);
  color: var(--clr-accent);
}

.deco--why-hibiscus {
  --w: 376;
  left: calc(-104 * var(--u));
  transform: scaleX(-1);
  top: unset;
  bottom: -175px;
}

.deco--why-orchid {
  --w: 389;
  right: calc(-72 * var(--u));
  bottom: calc(-129 * var(--u));
  transform: rotate(-49deg);
}

.why .why-heading .why-heading__icon {
  opacity: 1;
}

.why .why-heading h2 {
  margin-top: -19px;
}

/* --------------------------------------------------------------------------
   9. Two Locations
   -------------------------------------------------------------------------- */
.locations {
  --h2-color: var(--clr-navy);
  --h2-span-color: var(--clr-accent);
  --h2-span-size: 1.1667em;
  /* 70px against 60px */
  position: relative;
  z-index: 4;
  padding: calc(137 * var(--u)) 0 calc(200 * var(--u));
  /* #fcf9ee block, then the page colour for the last 76px (as in Figma) */
  /* background: linear-gradient(
    180deg,
    var(--section-locations-bg) calc(100% - 76 * var(--u)),
    var(--clr-cream) calc(100% - 76 * var(--u))
  ); */
  isolation: isolate;
}

.locations__texture {
  /* faded truck photo @ 8%, LUMINOSITY */
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: calc(867 * var(--u));
  background: url("../images/location-lihue.webp") center / cover no-repeat;
  filter: grayscale(1);
  opacity: 0.08;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg,
      transparent 0%,
      #000 55%,
      #000 64%,
      transparent 90%);
  mask: linear-gradient(180deg,
      transparent 0%,
      #000 55%,
      #000 64%,
      transparent 90%);
}

.locations h2 {
  max-width: 727px;
  margin: 0 auto;
  line-height: 1.13;
  text-align: center;
}

/* Route Līhu'e ➝ Po'ipū (supplied SVG) — positions from Figma's 410×116 group */
.route {
  position: relative;
  width: min(410px, 100%);
  aspect-ratio: 410 / 122;
  margin: calc(99 * var(--u)) auto 0;
  z-index: 0;
  isolation: isolate;
}

.route__map {
  position: absolute;
  left: 50%;
  top: -12%;
  z-index: -1;
  width: 221%;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.9;
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask: radial-gradient(closest-side, #000 35%, transparent 100%);
}

.route__pin {
  position: absolute;
  width: 9.5%;
}

.route__pin--start {
  left: 0;
  top: 1.7%;
}

.route__pin--end {
  left: 87.3%;
  top: 37.9%;
}

.route__line {
  position: absolute;
  left: 7.56%;
  top: 11.2%;
  width: 82.2%;
  height: auto;
  overflow: visible;
}

.route__line path {
  animation: route-dash 1.2s linear infinite;
}

@keyframes route-dash {
  to {
    stroke-dashoffset: -8;
  }
}

.route__label {
  position: absolute;
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.3rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--clr-navy);
  white-space: nowrap;
}

.route__label--start {
  left: 0;
  top: 49%;
}

.route__label--end {
  left: 85.1%;
  top: 86%;
}

.locations h2 span {
  display: block;
}

.locations-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 355px));
  justify-content: center;
  gap: 48px calc(178 * var(--u));
}

.location-card {
  text-align: center;
}

.location-card .photo-frame {
  aspect-ratio: 355 / 304;
  margin-bottom: 17px;
  transition: transform var(--transition);
}

.location-card:hover .photo-frame {
  transform: rotate(-3.58deg) translateY(-4px);
}

.location-card--offset {
  margin-top: calc(20 * var(--u));
}

.location-card__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-location);
  letter-spacing: var(--ls-tight);
}

.location-card__name img {
  width: 45px;
}

.location-card__rule {
  display: block;
  width: 65px;
  height: 1px;
  margin: 21px auto 20px;
  background: var(--clr-primary);
}

.location-card p {
  max-width: 353px;
  margin: 0 auto;
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: 25px;
  letter-spacing: var(--ls-tight);
  color: var(--clr-navy-800);
}

.deco--locations-palm {
  --w: 444;
  left: calc(-90 * var(--u));
  bottom: calc(-163 * var(--u));
  transform: rotate(39deg);
}

/* ftr */
.ftr_site::after,
.ftr_site::before {
  display: none;
}

.ftr_top_img {
  position: absolute;
  top: -130px;
  width: 100%;
}

.ftr_top_img img {
  width: 100%;
}

.ftr_site .deco--footer-hibiscus {
  top: -260px;
}

.cta_cruiser .mail-pill::before {
  mask: url(../images/new_brush_img.png) center / 100% 100% no-repeat;
}

.cta_cruiser .mail-pill {
  position: absolute;
  right: 80px;
  bottom: 125px;
  padding: 24px 112px;
}

.footer-gallery img {
  border-radius: 0;
}

.footer-gallery img:first-child {
  border-top-left-radius: 40px;
}

.footer-gallery img:last-child {
  border-bottom-right-radius: 40px;
}

.cta_cruiser .cta__glow {
  /* background: radial-gradient(calc(760 * var(--u)) calc(337 * var(--u)) at calc(387 * var(--u)) calc(336 * var(--u)), rgba(255, 252, 242, .91) 0%, rgba(255, 252, 242, .75) 45%, rgba(255, 252, 242, 0) 100%); */
  background-image: url(../images/background_glow.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top right 320px;
}

.cta_cruiser {
  padding-bottom: 280px;
}

.footer-bottom {
  margin-top: 55px;
}

.ftr_site {
  padding-bottom: 25px;
}

.custom_locat .deco--why-orchid {
  top: -130px;
}

.about_flowe .deco.deco--about-orchid {
  top: unset;
  bottom: 35%;
  left: -40px;
}

.about_shape_img {
  position: absolute;
  top: calc(100% - 1px);
  line-height: 0;
  width: 100%;
}

.about_shape_img img {
  width: 100%;
}
#about .deco--band-palm{
  bottom: -180px;
}

/* hero-restruct-15-10-26  */
.hero-restruct .hero-copy h1 {
    font-size: 55px;
}
.hero-restruct h1 span{
  font-size: 36px;
}
.hero-restruct .brush-tag--blue {
    padding: 6px 112px;
    font-size: 14px;
    line-height: 19px;
}
.hero-restruct .brush-tag--light{
    padding: 6px 80px;
    font-size: 14px;
    line-height: 19px;
}
.hero-restruct .hero-bottom .site_btn.btn--cruiser:last-child{
left: 60px;
}
.hero-restruct .hero-card.hero-card-desk{
  min-height: calc(803 * var(--u));
}
.hero-restruct .hero-bottom .site_btn.btn--cruiser:first-child{
left: -60px;
}

.hero-restruct .hero-logo::before {
    width: 250px;
    height: 100px;
    max-width: 100%;
    background: #ffffffd1;
    border-radius: 50%;
    filter: blur(100px);

}
.hero-restruct .hero-logo::before{
	display: none;
}
.ftr_top_img{
	z-index: 2;
}
.ftr_site .container {
	position: relative;
	z-index: 4;
}
.site-header .fl-builder-module-template{
	margin: 0;
    max-width: unset;
}
.fl-node-5gm1svrxfn36 .pp-subscribe-form input[type=email]{
	background: transparent !important;
	border-radius: 10px !important;
	border-color: #fff !important;
	font-size: 16px !important;
	color: #fff !important;
	outline: none !important;
}
.fl-node-5gm1svrxfn36 .pp-subscribe-form input[type=text]::-webkit-input-placeholder, .fl-node-5gm1svrxfn36 .pp-subscribe-form input[type=email]::-webkit-input-placeholder {
    font-size: 16px !important;
	color: #fff !important;
}
.fl-builder-content .fl-node-5gm1svrxfn36 .pp-subscribe-form a.fl-button, .fl-builder-content .fl-node-5gm1svrxfn36 .pp-subscribe-form a.fl-button:visited {
    font-size: 16px !important;
}
.fl-node-5gm1svrxfn36 .pp-subscribe-form .pp-form-error-message {
    font-size: 12px !important;
    position: absolute;
    bottom: 0;
    color: #fff !important;
}