/* The Family Freedom Travel Co. — Brand Refresh stylesheet (cream + editorial red)
   Loaded on all refreshed public pages as /assets/css/brand.css */
:root{
  --cream:#FBF5E4; --white:#FFFFFF; --red:#E5534E; --deep:#DF3A1B; --hover:#B22B12;
  --creamtext:#FBF5E4; --hair:#E5D9BE; --tan:#B8A588; --ink:#241610;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased;}
a{color:var(--deep);text-decoration:none;}
a:hover{color:var(--hover);}
.page{position:relative;max-width:1280px;margin:0 auto;padding:40px 56px;display:flex;flex-direction:column;gap:32px;}
.banner{background:var(--white);box-shadow:0 12px 40px rgba(36,22,16,0.25);padding:44px 48px;position:relative;z-index:2;}
.banner.hero{padding:28px 48px 44px;}
.nav{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:'Instrument Serif',serif;font-size:20px;letter-spacing:0.06em;color:var(--red);-webkit-text-stroke:1.1px var(--red);padding-bottom:22px;}
.nav a{color:var(--red);}
.nav a.active{border-bottom:2px solid var(--red);}
.rule{border-top:1px solid var(--deep);}
h1.word{font-family:'Instrument Serif',serif;font-weight:400;color:var(--red);font-size:96px;line-height:0.95;text-align:center;margin:0 0 10px;-webkit-text-stroke:4px var(--red);letter-spacing:-0.02em;}
.kicker{font-family:'Plus Jakarta Sans';font-size:13px;letter-spacing:0.24em;color:var(--red);text-align:center;margin:0 0 24px;text-transform:uppercase;}
h2.sec{font-family:'Instrument Serif',serif;font-weight:400;color:var(--red);font-size:58px;margin:0;}
h3.sub{font-family:'Instrument Serif',serif;font-weight:400;color:var(--red);font-size:32px;margin:0;}
.label{font-family:'Plus Jakarta Sans';font-size:12px;letter-spacing:0.14em;color:var(--red);text-transform:uppercase;}
.pull{font-family:'Instrument Serif',serif;font-size:30px;color:var(--red);line-height:1.4;margin:0;}
.body{font-family:'Plus Jakarta Sans';font-size:15px;color:var(--ink);line-height:1.8;}
.btn{background:var(--deep);color:var(--creamtext);font-family:'Plus Jakarta Sans';font-size:13px;font-weight:700;letter-spacing:0.18em;padding:18px 34px;border-radius:8px;display:inline-block;text-transform:uppercase;border:none;cursor:pointer;}
.btn:hover{background:var(--hover);color:var(--creamtext);}
.btn.sm{font-size:12px;padding:14px 26px;letter-spacing:0.16em;}
.btn.cream{background:var(--cream);color:var(--red);}
.btn.cream:hover{background:#F1E6C8;color:var(--hover);}
.photo{border-radius:12px;background-size:cover;background-position:center;background-color:var(--tan);filter:sepia(0.28) saturate(1.18) contrast(1.05) brightness(1.02);}
.heroimg{position:relative;height:420px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center 40%;background-color:var(--tan);}
.heroimg .ov,.storyimg .ov{position:absolute;inset:0;background:linear-gradient(rgba(120,80,30,0.16),rgba(120,80,30,0.16)),rgba(36,22,16,0.16);}
.storyimg{position:relative;height:420px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center 40%;background-color:var(--tan);display:flex;align-items:flex-end;justify-content:center;padding-bottom:36px;}
.storyimg h1{position:relative;font-family:'Instrument Serif',serif;font-weight:400;color:var(--red);font-size:96px;line-height:0.95;text-align:center;margin:0;text-shadow:0 2px 24px rgba(36,22,16,0.35);-webkit-text-stroke:4px var(--red);letter-spacing:-0.02em;}
.flex{display:flex;}
.cap{font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:0.12em;color:var(--red);text-align:center;margin:0;text-transform:uppercase;}
.step{font-family:'Instrument Serif',serif;font-size:26px;color:var(--red);border-top:1px solid var(--deep);padding-top:16px;margin-bottom:10px;}
.arrows{font-family:'Instrument Serif',serif;font-size:34px;color:var(--red);letter-spacing:8px;}
.ulink{font-family:'Plus Jakarta Sans';font-size:12px;letter-spacing:0.16em;color:var(--red);border-bottom:1px solid var(--deep);padding-bottom:3px;text-transform:uppercase;}
.card{background:var(--white);border-radius:12px;overflow:hidden;box-shadow:0 8px 28px rgba(36,22,16,0.12);}
.field{border:none;border-bottom:1px solid var(--deep);background:transparent;color:var(--ink);font-family:'Plus Jakarta Sans';font-size:15px;padding:12px 4px;width:100%;outline:none;}
.field::placeholder{color:rgba(36,22,16,0.4);}
.foot .col{display:flex;flex-direction:column;gap:10px;font-size:12px;}
.foot .h{letter-spacing:0.2em;color:var(--red);font-weight:700;font-size:10px;}
.foot a{color:var(--red);}
.legal{border-top:1px solid var(--hair);margin-top:32px;padding-top:16px;font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:0.08em;color:var(--ink);text-align:center;line-height:1.7;}
.tex{position:absolute;inset:0;pointer-events:none;}
.vig{z-index:5;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(74,50,20,0.14) 100%);}
.grain{z-index:6;opacity:0.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");}
@media(max-width:820px){
  .page{padding:20px;} .banner{padding:26px 20px;}
  h1.word,.storyimg h1{font-size:42px;-webkit-text-stroke:1.8px var(--red);}
  h2.sec{font-size:34px;} .pull{font-size:22px;}
  .stack{flex-direction:column!important;}
  .stack > *{width:100%!important;margin-top:0!important;flex:1 1 auto!important;}
  .grid3,.grid4,.grid2{grid-template-columns:1fr!important;}
  .arrows{display:none;}
}

/* =============================================================================
   Injected-card utility shim
   Several pages (listings, destination hubs, booking, my-booking) build cards
   in JavaScript using the previous Tailwind class names and old brand tokens.
   brand.css no longer ships those, so define the subset used here. Old navy
   (#001827) and plum "primary" are remapped to the new brand.
   ============================================================================= */
.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}
.top-3{top:12px}.top-4{top:16px}.left-3{left:12px}.left-4{left:16px}.right-4{right:16px}.bottom-4{bottom:16px}.top-9{top:36px}.right-0{right:0}
.w-full{width:100%}.h-full{height:100%}.h-48{height:12rem}.h-56{height:14rem}.w-8{width:32px}.h-8{height:32px}
.h-4{height:16px}.h-3{height:12px}.h-10{height:40px}.w-3\/4{width:75%}.w-1\/2{width:50%}.min-h-\[44px\]{min-height:44px}
.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}.mt-auto{margin-top:auto}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-x-3{column-gap:12px}.gap-y-1{row-gap:4px}.space-y-3>*+*{margin-top:12px}
.col-span-3{grid-column:1/-1}.ml-auto{margin-left:auto}.block{display:block}.hidden{display:none}
.p-6{padding:24px}.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-1{padding-top:4px;padding-bottom:4px}.py-1\.5{padding-top:6px;padding-bottom:6px}.py-3{padding-top:12px;padding-bottom:12px}.py-8{padding-top:32px;padding-bottom:32px}.py-16{padding-top:64px;padding-bottom:64px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mt-4{margin-top:16px}
.rounded{border-radius:6px}.rounded-full{border-radius:9999px}.rounded-2xl{border-radius:16px}.overflow-hidden{overflow:hidden}.object-cover{object-fit:cover}
.backdrop-blur-sm{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.shadow-sm{box-shadow:0 1px 3px rgba(36,22,16,0.12)}
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-lg{font-size:18px}.text-\[10px\]{font-size:10px}.text-\[16px\]{font-size:16px}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-headline-md{font-family:'Instrument Serif',serif}.font-body-md{font-family:'Plus Jakarta Sans',sans-serif}
.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:0.05em}.leading-snug{line-height:1.35}.leading-relaxed{line-height:1.625}
.text-center{text-align:center}.whitespace-nowrap{white-space:nowrap}.cursor-pointer{cursor:pointer}.underline{text-decoration:underline}
.border{border:1px solid var(--hair)}.border-0{border:0}
.bg-white{background:#fff}.bg-white\/90{background:rgba(255,255,255,0.92)}.bg-\[\#f3f3f3\]{background:#F5EEDD}.bg-surface-container{background:#F5EEDD}
.bg-\[\#001827\]{background:var(--deep)}.text-white{color:#fff}.text-\[\#001827\]{color:var(--ink)}.text-\[\#42474c\]{color:#5C4F3D}
.text-primary{color:var(--ink)}.text-on-surface-variant{color:#5C4F3D}.text-secondary{color:var(--deep)}
.border-\[\#001827\]{border-color:var(--deep)}
.bg-gradient-to-t{background-image:linear-gradient(to top, rgba(36,22,16,0.55), transparent)}
.bg-amber-50{background:#FFF7E6}.text-amber-800{color:#8A5A00}.bg-slate-100{background:#EEF1F4}.text-slate-700{color:#3F4A57}
.bg-yellow-50{background:#FFFAE6}.text-yellow-800{color:#7A5C00}.bg-purple-50{background:#F5ECFA}.text-purple-800{color:#6B3B7A}
.bg-red-50{background:#FDECE9}.border-red-200{border-color:#F3C9C1}.text-red-700{color:var(--hover)}
.transition-colors{transition:color .2s,background-color .2s,border-color .2s}.transition-transform{transition:transform .3s}.transition-all{transition:all .3s}
.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}
.hover\:scale-105:hover{transform:scale(1.05)}.hover\:-translate-y-1:hover{transform:translateY(-4px)}
.hover\:bg-white:hover{background:#fff}.hover\:bg-\[\#0f2d40\]:hover{background:var(--hover)}.hover\:bg-red-100:hover{background:#FADED7}.hover\:shadow-lg:hover{box-shadow:0 20px 50px -10px rgba(36,22,16,0.18)}
.active\:scale-95:active{transform:scale(0.95)}.active\:scale-\[0\.98\]:active{transform:scale(0.98)}
.focus\:ring-2:focus{outline:2px solid var(--deep);outline-offset:1px}
@media(max-width:767px){.max-md\:min-h-\[44px\]{min-height:44px}.max-md\:text-\[16px\]{font-size:16px}}
@media(min-width:768px){.md\:block{display:block}}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}