/* Fitrip Design System, compiled token sheet for DC pages */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Colors */
  --cream:#f6f2ee; --green:#2d464c; --sand:#e6bfae; --white:#ffffff; --black:#000000;
  --green-900:#1f3236; --green-700:#2d464c; --green-500:#436168; --green-300:#7d9498; --green-100:#d7dee0;
  --sand-600:#d49e87; --sand-300:#f0d8cd; --cream-200:#ece6df; --cream-300:#e2dad0;
  --bg-page:var(--cream); --bg-page-alt:var(--cream-200); --bg-dark:var(--green); --bg-dark-deep:var(--green-900);
  --surface-card:var(--white); --surface-sunken:var(--cream-200);
  --text-heading:var(--green); --text-body:var(--green-700); --text-muted:var(--green-300);
  --text-on-dark:var(--cream); --text-on-dark-muted:rgba(246,242,238,.72);
  --accent:var(--sand); --accent-strong:var(--sand-600); --star:var(--sand);
  --border-hairline:var(--green-100); --border-card:var(--cream-300); --border-on-dark:rgba(246,242,238,.28);
  --focus-ring:#436168;
  /* Typography */
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-display:500;
  --fs-hero:clamp(3.25rem,9vw,8rem); --fs-h1:clamp(2.5rem,5.5vw,4rem); --fs-h2:clamp(2rem,4vw,3rem);
  --fs-h3:clamp(1.5rem,2.5vw,2rem); --fs-h4:1.25rem; --fs-lead:1.2rem; --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-display:1; --lh-heading:1.1; --lh-snug:1.3; --lh-body:1.65; --lh-loose:1.8;
  --ls-display:.06em; --ls-display-wide:.12em; --ls-eyebrow:.22em; --ls-body:0; --ls-button:.08em;
  /* Spacing */
  --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --radius-sm:4px; --radius:8px; --radius-lg:16px; --radius-pill:999px;
  --shadow-card:0 6px 18px rgba(0,0,0,.05); --shadow-raised:0 12px 32px rgba(0,0,0,.09); --shadow-nav:0 2px 16px rgba(31,50,54,.08);
  --border-width:1px; --container:1240px; --container-narrow:880px;
  --gutter:clamp(1.25rem,5vw,4rem); --nav-height:76px; --card-portrait-min:70vh;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:.2s; --dur-med:.5s; --dur-reveal:.9s;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;scroll-behavior:smooth}
body{background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0}
p{margin:0;text-wrap:pretty}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:var(--font-body)}
ul{margin:0;padding:0}

/* Keyframes */
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(230,191,174,.4)}50%{transform:scale(1.05);box-shadow:0 0 0 12px rgba(230,191,174,0)}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-img{opacity:0;transform:translateY(52px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal-img.in{opacity:1;transform:none}
.stagger-1{transition-delay:.12s}
.stagger-2{transition-delay:.24s}
.stagger-3{transition-delay:.36s}
.stagger-4{transition-delay:.48s}

/* Accordion expand/collapse.
   Hover effects are gated to real pointers: on a touch screen the first tap
   would otherwise only apply :hover, swallowing the tap meant to open the link. */
.pkg-cards .pkg-card{transition:flex .6s cubic-bezier(.45,.182,.111,.989),opacity .4s ease}
@media (hover:hover) and (pointer:fine){
  .pkg-cards:hover .pkg-card:not(:hover){opacity:.7}
  .pkg-cards .pkg-card:hover{flex:2.6!important}
  .pkg-cards .pkg-card:hover img{transform:scale(1.06)}
}

/* Image hover zoom */
.img-hover{transition:transform .4s ease}
@media (hover:hover) and (pointer:fine){
  .img-hover:hover{transform:scale(1.04)}
}

/* Button hover states */
.btn-p{display:inline-flex;align-items:center;padding:.75rem 1.75rem;border-radius:var(--radius);background:var(--green);color:var(--white);border:1px solid var(--white);font-family:var(--font-body);font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:all .2s;cursor:pointer;white-space:nowrap}
.btn-p:hover{background:var(--cream)!important;color:var(--green)!important;border-color:var(--green)!important}
.btn-s{display:inline-flex;align-items:center;padding:.75rem 1.75rem;border-radius:var(--radius);background:transparent;color:var(--green);border:1px solid var(--green);font-family:var(--font-body);font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:all .2s;cursor:pointer;white-space:nowrap}
.btn-s:hover{background:var(--green)!important;color:var(--white)!important}
.btn-od{display:inline-flex;align-items:center;padding:.75rem 1.75rem;border-radius:var(--radius);background:var(--green);color:var(--white);border:1px solid var(--cream);font-family:var(--font-body);font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:all .2s;cursor:pointer;white-space:nowrap}
.btn-od:hover{background:var(--cream)!important;color:var(--green)!important;border-color:var(--cream)!important}

/* Nav helpers */
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-burger{display:none!important}
@media(max-width:992px){.nav-links{display:none!important}.nav-burger{display:flex!important}}

/* Forms */
.ft-input{width:100%;padding:.75rem 1rem;border-radius:var(--radius);border:1px solid var(--green-100);background:var(--white);font-family:var(--font-body);font-size:.9rem;color:var(--green);outline:none;transition:border-color .2s}
.ft-input:focus{border-color:var(--green)}
.ft-label{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:.4rem}

/* FAQ accordion */
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;cursor:pointer;border-bottom:1px solid var(--green-100);font-family:var(--font-body);font-size:1rem;font-weight:500;color:var(--green);gap:1rem}
.faq-q:hover{color:var(--sand-600)}
.faq-a{overflow:hidden;transition:max-height .4s var(--ease-out),opacity .3s ease}

/* Cards */
.exp-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.exp-card img{transition:transform .5s ease}
@media (hover:hover) and (pointer:fine){
  .exp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised)}
  .exp-card:hover img{transform:scale(1.04)}
}

/* Pill */
.pill{display:inline-flex;align-items:center;padding:.3rem .85rem;border-radius:var(--radius-pill);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;border:1px solid var(--sand);color:var(--green);background:transparent;white-space:nowrap}
.pill-coming{background:var(--sand);color:var(--green);border-color:var(--sand)}
.pill-white{border-color:rgba(246,242,238,.5);color:var(--cream)}

/* Category pill filter */
.cat-pill{padding:.4rem 1rem;border-radius:var(--radius-pill);font-size:.78rem;font-weight:500;letter-spacing:.06em;border:1px solid var(--green);background:transparent;color:var(--green);cursor:pointer;transition:all .2s}
.cat-pill.active,.cat-pill:hover{background:var(--green);color:var(--white);border-color:var(--green)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
