@import url('/assets/fonts/ATP-Pleasurize/ATP-Pleasurize.css');
@import url('/assets/fonts/Cubano/Cubano.css');
:root {
  --unnamed-color-f5ae34: #F5AE34;
  --unnamed-color-d6ebf1: #D6EBF1;
  --unnamed-color-14afd1: #14AFD1;
  --unnamed-color-0084ac: #0084AC;
  --unnamed-color-154269: #154269;
  --unnamed-color-ffffff: #FFFFFF;

  --background-color-primary: lightgray;

  --text-color: black;
  --link-color: #00355A;

  --ubuntu-font: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --pleasurize-font: 'ATP Pleasurize', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: var(--unnamed-color-ffffff);
  border-bottom: 2px solid var(--unnamed-color-d6ebf1);
}

.header-inner {
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  margin: 0 auto;
  padding: 0 20px;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-toggle__icon {
  width: 26px;
  height: 18px;
  position: relative;
  display: block;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--unnamed-color-154269);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 150ms ease, top 200ms ease;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 8px; }
.nav-toggle__bar:nth-child(3) { top: 16px; }

/* Open state: turn into an X */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}


.site-nav {
  display: flex;
  gap: 0;
  align-items: center;
  visibility: visible;
}


@media (max-width: 800px) {
  header {
    position: sticky; /* optional; keeps header visible */
    top: 0;
    z-index: 3000;
    background: var(--unnamed-color-ffffff);
  }

  .header-inner {
    position: relative;
    z-index: 3100; /* ensure the button stays above drawer */
  }


  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav {
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    width: min(320px, 86vw);
    background: var(--unnamed-color-ffffff);
    border-left: 2px solid var(--unnamed-color-d6ebf1);

    padding: 88px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 2000;
    transform: translate3d(110%, 0, 0); /* closed */
    opacity: 1;
    pointer-events: none;

    transition: none; /* ✅ IMPORTANT */
    box-shadow: -12px 0 28px rgba(0,0,0,0.12);
    will-change: transform;
  }

  /* Only animate AFTER we're "ready" */
  html.nav-ready .site-nav {
    transition: transform 350ms ease;
    visibility: visible;
  }

  .site-nav.is-open {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }


  .site-nav .link {
    display: block;
    text-align: left;
    width: 100%;
    text-align: right;
  }

  .site-nav .link.primary {
    width: 100%;
    text-align: center;
  }

  /* Backdrop (dimmed page) */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.28);
    opacity: 0;
    pointer-events: none;
    transition: none; /* default no transition */
    z-index: 1500;
  }

  html.nav-ready .nav-backdrop {
    transition: opacity 250ms ease;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Keep hamburger clickable above everything */
  .logo-link {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Pin hamburger to the right so logo can truly center */
  .nav-toggle {
    position: absolute;
    right: 12px;  /* match your header padding vibe */
    top: 50%;
    transform: translateY(-50%);
    z-index: 3200; /* keep above drawer/backdrop */
  }


  /* Optional: prevent page scroll when open */
  body.nav-open {
    overflow: hidden;
  }
}


.link {
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--link-color);
  font-family: var(--ubuntu-font);
  font-size: 18px;
}
.title-pleasurize {
  font-family: var(--pleasurize-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px; /* Flow-style */
  color: var(--unnamed-color-154269);
}

.link.primary {
  background-color: var(--unnamed-color-0084ac);
  color: var(--unnamed-color-ffffff);
}

.link:hover {
  background-color: var(--unnamed-color-14afd1);
  color: var(--unnamed-color-ffffff);
  text-decoration: none;
}

/* .arch {
  background-color: var(--unnamed-color-d6ebf1);

  background-image: url('/assets/img/templates/arch.svg');
  background-repeat: no-repeat;

  background-position: bottom center;
  background-size: 100% auto;
} */

.arch {
  background-color: var(--unnamed-color-d6ebf1);
}
.arch img {
  display: block;
  width: 100%;
}

footer {
  padding-bottom: 50px;
}

footer .content {
  max-width: 1024px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: auto;
  margin: 0 auto;
  padding: 0 20px;
}

footer .logo img {
  height: 44px;
}

@media screen and (max-width: 800px) {
  footer .content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
    height: auto;
    gap: 20px;
  }
}


footer .social {
  margin-top: 30px;
  display: flex;
  gap: 30px;
}

footer .social img {
  height: 30px;
  opacity: 0.5;
}

footer .social img:hover {
  opacity: 1;
}

footer .links {
  display: flex;
  gap: 30px;
  font-family: var(--ubuntu-font);
  font-size: 16px;
  color: color-mix(in srgb, var(--unnamed-color-154269) 50%, transparent);
}

footer .links  div {
  max-width: 100px;
  margin-bottom: 10px;
}

footer .links a {
  color: inherit;
  text-decoration: none;
}

footer .links a:hover {
  color: var(--unnamed-color-154269);
}

@media screen and (min-width: 1024px) {
  footer .content {
    padding: 0;
  }
}

.white {
  background-color: var(--unnamed-color-ffffff);
}

.dark-blue-band {
  background-color: var(--unnamed-color-14afd1);
  height: 56px;
  position: relative;
}

.blue {
  background-color: var(--unnamed-color-d6ebf1);
  /* Bug with rendering of background color */
  padding: 1px 0;
}

.box {
  margin: 20px;
  padding: 50px;
  min-height: 50px;
}

.border {
  background-color: var(--unnamed-color-ffffff);
  border-radius: 15px;
  box-shadow: 0 4px 8px #14afd129;
}
*, *::before, *::after {
  box-sizing: border-box;
}

@media screen and (min-width: 1024px) {
  .box {
    width: min(1200px, calc(100% - 40px));
    margin: 20px auto;
  }
}
/* =========================
   GLOBAL: Two-column card layout
   Usage:
   <div class="box two-card">
     <div class="two">
       <div class="border">...</div>
       <div class="border">...</div>
     </div>
   </div>
   ========================= */

   .two-card {
    padding: 0;
  }

  .two {
    display: grid;
    gap: 20px;
    align-items: stretch;
  }

  .two.equal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two.split {
    grid-template-columns: 344px minmax(0, 1fr);
  }

  .two > .border {
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
  .two-card .two.split > .border:last-child {
    padding: 50px;
  }


.border.is-plain {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}


  @media (max-width: 900px) {
    .two,
    .two.equal,
    .two.split {
      grid-template-columns: 1fr;
    }
  }


input {
  width: 100%;
  padding: 8px 4px;
  font-family: var(--ubuntu-font);
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #d4d7d9;
}

/* =========================
   GLOBAL: Demo form (Flow-styled)
   ========================= */

   .demo-title {
    font-family: var(--ubuntu-font);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--unnamed-color-154269);
    margin: 0 0 16px 0;
  }

  .demo-form {
    display: grid;
    gap: 14px;
  }

  .demo-form input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    box-sizing: border-box;

    font-family: var(--ubuntu-font);
    font-size: 14px;
    color: var(--unnamed-color-154269);

    background: var(--unnamed-color-ffffff);
    border: 2px solid #D4D7D9;
    border-radius: 6px;
    outline: none;
  }

  .demo-form input::placeholder {
    color: color-mix(in srgb, var(--unnamed-color-154269) 55%, transparent);
  }

  .demo-form input:focus {
    border-color: var(--unnamed-color-0084ac);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--unnamed-color-0084ac) 20%, transparent);
  }

  .demo-form .captcha {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 2px solid #D4D7D9;
    border-radius: 6px;
    font-family: var(--ubuntu-font);
    font-size: 14px;
    color: color-mix(in srgb, var(--unnamed-color-154269) 70%, transparent);
    background: #fff;
  }

  .demo-form button.link.primary {
    height: 40px;
    width: fit-content;
    min-width: 116px;
    padding: 0 22px;
    border-radius: 20px;

    border: 2px solid var(--unnamed-color-0084ac);
    background: var(--unnamed-color-0084ac);
    color: var(--unnamed-color-ffffff);

    font-family: var(--ubuntu-font);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  .demo-form button.link.primary:hover {
    background: var(--unnamed-color-14afd1);
    border-color: var(--unnamed-color-14afd1);
  }

  @media (max-width: 420px) {
    .demo-form button.link.primary {
      width: 100%;
      justify-content: center;
    }
  }

/* =========================
   LEGAL PAGE LAYOUT (Privacy + Terms)
   ========================= */

   .legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
    gap: 20px;
    align-items: start;
    padding: 0;
  }


  /* =========================
     LEGAL CARD (main content)
     ========================= */

  .legal-card__title {
    font-family: 'ATPPleasurize-Regular', 'ATP-Pleasurize', sans-serif;
    font-size: 56px;
    line-height: 55px;
    color: #154269;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 24px 0;
  }

  .legal-card__meta {
    font-family: var(--ubuntu-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--unnamed-color-154269);
    margin: 0 0 12px 0;
  }

  .legal-card__intro {
    font-family: var(--ubuntu-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--unnamed-color-154269);
    margin: 0 0 20px 0;
  }

  .legal-card__body {
    font-family: var(--ubuntu-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--unnamed-color-154269);
  }

  .legal-card__section {
    margin: 18px 0 10px 0;
    font-family: var(--ubuntu-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--unnamed-color-154269);
  }

  .legal-card__subsection {
    margin: 12px 0 8px 0;
    font-family: var(--ubuntu-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--unnamed-color-154269);
  }

  .legal-card__p {
    margin: 0 0 12px 0;
  }

  .legal-card__list {
    margin: 8px 0 16px 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
  }

  .legal-card__list li {
    margin: 0;
  }

  .legal-card__list li strong {
    font-weight: 700;
  }

  /* =========================
     CONTACT US CARD (shared)
     ========================= */

  .contact-us-card__title {
    font-family: var(--ubuntu-font);
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 4.27px;
    text-transform: uppercase;
    color: var(--unnamed-color-154269);
    margin: 0 0 14px 0;
  }

  .contact-us-card__lead {
    font-family: var(--ubuntu-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--unnamed-color-154269);
    margin: 0 0 16px 0;
  }

  .contact-us-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }

  .contact-us-card__list li {
    font-family: var(--ubuntu-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--unnamed-color-154269);
    margin: 0;
  }

  /* =========================
     RESPONSIVE
     ========================= */

  @media (max-width: 980px) {
    .legal-layout {
      grid-template-columns: 1fr;
    }

    .contact-us-card {
      order: 2;
    }
  }

  @media (max-width: 600px) {
    .legal-card,
    .contact-us-card {
      padding: 22px;
    }

    .legal-card__title {
      font-size: 42px;
      line-height: 40px;
    }
  }