/* ==========================================================================
   E.H.S Party Rentals & Supplies
   Design system: navy foundation, pink primary action, category colour coding
   Type: Nunito (display) + Ubuntu (body)
   ========================================================================== */

:root{
  /* ---- type ---- */
  --font-display:'Nunito','Trebuchet MS',sans-serif;
  --font-body:'Ubuntu','Trebuchet MS',sans-serif;

  --text-xs:.75rem;      /* 12 */
  --text-sm:.875rem;     /* 14 */
  --text-base:1rem;      /* 16 */
  --text-lg:1.1875rem;   /* 19 */
  --text-xl:1.5rem;      /* 24 */
  --text-2xl:2rem;       /* 32 */
  --text-3xl:2.75rem;    /* 44 */
  --text-4xl:3.5rem;     /* 56 */

  --leading-none:1.1;
  --leading-tight:1.18;
  --leading-snug:1.35;
  --leading-normal:1.62;

  --w-regular:400; --w-medium:500; --w-bold:700; --w-black:800;
  --track-tight:-.025em; --track-normal:0; --track-wide:.05em; --track-widest:.12em;

  /* ---- brand colour ---- */
  --navy-900:hsl(219 72% 12%);
  --navy-800:hsl(219 70% 16%);
  --navy-700:hsl(219 69% 21%);   /* #112B5C */
  --navy-600:hsl(219 60% 30%);
  --navy-500:hsl(219 52% 40%);
  --navy-300:hsl(219 45% 68%);
  --navy-100:hsl(219 46% 92%);
  --navy-50:hsl(219 48% 96%);

  --pink-700:hsl(330 78% 40%);
  --pink-600:hsl(330 80% 47%);
  --pink-500:hsl(330 81% 54%);   /* #E92C8B */
  --pink-300:hsl(330 82% 78%);
  --pink-100:hsl(330 84% 95%);

  --cyan-700:hsl(197 86% 32%);
  --cyan-600:hsl(197 85% 40%);
  --cyan-500:hsl(197 84% 48%);   /* #14A8E0 */
  --cyan-100:hsl(197 88% 94%);

  --yellow-700:hsl(40 92% 36%);
  --yellow-600:hsl(44 92% 45%);
  --yellow-500:hsl(47 91% 56%);  /* #F5C927 */
  --yellow-100:hsl(47 95% 92%);

  --green-700:hsl(146 78% 25%);
  --green-600:hsl(146 76% 31%);
  --green-500:hsl(146 75% 38%);  /* #18A857 */
  --green-100:hsl(146 60% 92%);

  --indigo-700:hsl(232 62% 34%);
  --indigo-600:hsl(232 60% 42%);
  --indigo-500:hsl(232 58% 52%);
  --indigo-100:hsl(232 70% 94%);

  /* ---- neutrals (slightly cool, never pure grey) ---- */
  --gray-50:hsl(214 32% 98%);
  --gray-100:hsl(214 28% 95%);
  --gray-200:hsl(214 24% 89%);
  --gray-300:hsl(214 18% 78%);
  --gray-400:hsl(214 14% 60%);
  --gray-500:hsl(214 13% 46%);
  --gray-600:hsl(214 16% 34%);
  --gray-900:hsl(219 40% 12%);

  --text-primary:var(--navy-900);
  --text-secondary:var(--gray-500);
  --text-tertiary:var(--gray-400);
  --surface:#fff;
  --page:hsl(214 40% 98%);

  /* ---- spacing ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s6:1.5rem;
  --s8:2rem; --s12:3rem; --s16:4rem; --s24:6rem; --s32:8rem;
  --section-y:var(--s24);
  --container:1180px;
  --content:660px;

  /* ---- radius: one playful personality throughout ---- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* ---- elevation ---- */
  --sh-xs:0 1px 2px hsl(219 40% 12% / .06);
  --sh-sm:0 1px 4px hsl(219 40% 12% / .08),0 1px 2px hsl(219 40% 12% / .06);
  --sh-md:0 6px 16px hsl(219 40% 12% / .10),0 2px 4px hsl(219 40% 12% / .07);
  --sh-lg:0 14px 34px hsl(219 40% 12% / .13),0 4px 8px hsl(219 40% 12% / .07);
  --sh-xl:0 26px 64px hsl(219 40% 12% / .18),0 8px 16px hsl(219 40% 12% / .08);

  --header-h:70px;
}

/* category tokens */
.c-pink{--c:var(--pink-500);--c-dk:var(--pink-700);--c-tint:var(--pink-100);--c-ink:var(--pink-700);}
.c-cyan{--c:var(--cyan-500);--c-dk:var(--cyan-700);--c-tint:var(--cyan-100);--c-ink:var(--cyan-700);}
.c-yellow{--c:var(--yellow-500);--c-dk:var(--yellow-700);--c-tint:var(--yellow-100);--c-ink:var(--yellow-700);}
.c-green{--c:var(--green-500);--c-dk:var(--green-700);--c-tint:var(--green-100);--c-ink:var(--green-700);}
.c-navy{--c:var(--navy-700);--c-dk:var(--navy-900);--c-tint:var(--navy-100);--c-ink:var(--navy-700);}
.c-indigo{--c:var(--indigo-500);--c-dk:var(--indigo-700);--c-tint:var(--indigo-100);--c-ink:var(--indigo-700);}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--page);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--text-base);
  line-height:var(--leading-normal);font-weight:var(--w-regular);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--pink-600);text-decoration:none;}
a:hover{color:var(--pink-700);}
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:var(--w-black);
  letter-spacing:var(--track-tight);line-height:var(--leading-tight);
  margin:0 0 var(--s4);color:var(--navy-900);
}
h1{font-size:var(--text-3xl);line-height:var(--leading-none);}
h2{font-size:var(--text-2xl);}
h3{font-size:var(--text-xl);letter-spacing:-.015em;}
h4{font-size:var(--text-lg);font-weight:var(--w-bold);letter-spacing:-.01em;}
p{margin:0 0 var(--s4);max-width:66ch;}
ul{margin:0;padding:0;}
:focus-visible{outline:3px solid var(--cyan-500);outline-offset:3px;border-radius:var(--r-sm);}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;padding:var(--s3) var(--s4);z-index:200;border-radius:0 0 var(--r-md) 0;}
.skip:focus{left:0;color:#fff;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s6);}
section{padding:var(--section-y) 0;overflow-x:clip;}
.sec-tight{padding:var(--s16) 0;}
.eyebrow{
  font-size:var(--text-xs);font-weight:var(--w-bold);letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--pink-600);margin:0 0 var(--s3);display:block;
}
.eyebrow.on-dark{color:var(--yellow-500);}
.lead{font-size:var(--text-lg);color:var(--gray-600);line-height:var(--leading-snug);}
.muted{color:var(--text-secondary);font-size:var(--text-sm);}
.center{text-align:center;}
.center p,.center .lead{margin-left:auto;margin-right:auto;}
.sec-head{max-width:var(--content);margin-bottom:var(--s12);}
.sec-head.center{margin-left:auto;margin-right:auto;}

/* accent underline under section headings */
.rule{width:64px;height:5px;border-radius:var(--r-full);background:linear-gradient(90deg,var(--pink-500),var(--yellow-500),var(--cyan-500));margin:0 0 var(--s6);}
.center .rule{margin-left:auto;margin-right:auto;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--w-bold);
  letter-spacing:var(--track-wide);line-height:1;
  padding:var(--s4) var(--s8);border-radius:var(--r-full);border:2px solid transparent;
  cursor:pointer;text-align:center;min-height:52px;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn svg{width:18px;height:18px;flex:none;}
.btn-primary{background:var(--pink-500);color:#fff;box-shadow:var(--sh-md);}
.btn-primary:hover{background:var(--pink-600);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-lg);}
.btn-primary:active{transform:translateY(1px);box-shadow:var(--sh-sm);}
.btn-primary:disabled{background:var(--gray-300);box-shadow:none;cursor:not-allowed;transform:none;}
.btn-wa{background:var(--green-600);color:#fff;box-shadow:var(--sh-md);}
.btn-wa:hover{background:var(--green-700);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-lg);}
.btn-wa:active{transform:translateY(1px);box-shadow:var(--sh-sm);}
.btn-outline{background:transparent;color:var(--navy-700);border-color:var(--navy-300);}
.btn-outline:hover{background:var(--navy-50);color:var(--navy-900);border-color:var(--navy-700);transform:translateY(-2px);}
.btn-outline:active{transform:translateY(1px);}
.btn-outline.on-dark{color:#fff;border-color:hsl(219 45% 55%);}
.btn-outline.on-dark:hover{background:hsl(219 60% 24%);color:#fff;border-color:var(--yellow-500);}
.btn-sm{min-height:42px;padding:var(--s3) var(--s6);font-size:var(--text-xs);}
.btn-block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);}
.center .btn-row{justify-content:center;}

/* ==========================================================================
   TOP BAR + HEADER
   ========================================================================== */
.topbar{
  background:var(--navy-900);color:hsl(219 40% 82%);
  font-size:var(--text-xs);letter-spacing:var(--track-wide);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:38px;}
.topbar a{color:#fff;font-weight:var(--w-medium);}
.topbar a:hover{color:var(--yellow-500);}
.topbar-links{display:flex;gap:var(--s6);align-items:center;}
@media(max-width:900px){.topbar{display:none;}}

.header{
  position:sticky;top:0;z-index:120;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200);
}
.header .wrap{display:flex;align-items:center;gap:var(--s6);min-height:var(--header-h);}
.brand{display:flex;align-items:center;gap:var(--s3);margin-right:auto;flex:none;}
.brand img{height:44px;width:auto;}
.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.nav{display:flex;align-items:center;gap:var(--s6);}
.nav a{
  position:relative;font-size:var(--text-sm);font-weight:var(--w-medium);
  letter-spacing:var(--track-wide);color:var(--navy-700);padding:var(--s2) 0;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:var(--r-full);
  background:var(--pink-500);transition:width .25s ease;
}
.nav a:hover{color:var(--navy-900);}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%;}
.nav a[aria-current="page"]{color:var(--navy-900);font-weight:var(--w-bold);}
.header .btn{flex:none;}
@media(max-width:980px){
  .nav{display:none;}
  .header .btn-book{padding:var(--s3) var(--s6);min-height:44px;font-size:var(--text-xs);}
}
.burger{
  display:none;flex:none;width:48px;height:48px;border:2px solid var(--gray-200);background:#fff;
  border-radius:var(--r-md);cursor:pointer;align-items:center;justify-content:center;
  color:var(--navy-700);transition:border-color .2s ease,background .2s ease;
}
.burger:hover{border-color:var(--navy-300);background:var(--navy-50);}
.burger svg{width:22px;height:22px;}
.burger .ico-x{display:none;}
.burger[aria-expanded="true"] .ico-menu{display:none;}
.burger[aria-expanded="true"] .ico-x{display:block;}
@media(max-width:980px){.burger{display:inline-flex;}}

/* drawer slides from the top so it can never create horizontal overflow */
.drawer{
  position:fixed;left:0;right:0;top:calc(var(--header-h));z-index:115;
  background:#fff;border-bottom:1px solid var(--gray-200);box-shadow:var(--sh-lg);
  transform:translateY(-115%);visibility:hidden;transition:transform .3s ease,visibility .3s;
  max-height:calc(100vh - var(--header-h));overflow-y:auto;
}
.drawer.open{transform:translateY(0);visibility:visible;}
.drawer ul{list-style:none;padding:var(--s4) var(--s6) var(--s8);}
.drawer li+li{border-top:1px solid var(--gray-100);}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) 0;font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:var(--text-lg);color:var(--navy-800);
}
.drawer a:hover{color:var(--pink-600);}
.drawer a[aria-current="page"]{color:var(--pink-600);}
.drawer .drawer-sub{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--gray-500);padding:var(--s3) 0;}
.drawer .drawer-sub:hover{color:var(--navy-800);}
@media(min-width:981px){.drawer{display:none;}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;padding:var(--s24) 0 var(--s32);
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 45%,var(--indigo-700) 100%);
  background-size:220% 220%;animation:shift 16s ease infinite;
  color:#fff;
}
@keyframes shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:70px;
  background:var(--page);
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
.hero h1{color:#fff;font-size:var(--text-4xl);max-width:15ch;}
.hero p{color:hsl(219 50% 88%);}
.hero .lead{max-width:52ch;color:hsl(219 50% 88%);}
.hero-inner{position:relative;z-index:3;max-width:760px;}
.hero-tags{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);list-style:none;margin:var(--s8) 0 0;
  font-size:var(--text-xs);font-weight:var(--w-bold);letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--yellow-500);
}
.hero-tags li{display:flex;align-items:center;gap:var(--s4);}
.hero-tags li+li::before{content:'';width:6px;height:6px;border-radius:var(--r-full);background:var(--pink-500);}
.hero .btn-row{margin-top:var(--s8);}

/* parallax confetti layers */
.confetti{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.confetti i{position:absolute;display:block;border-radius:3px;opacity:.85;}
.confetti .l1 i{width:14px;height:14px;}
.confetti .l2 i{width:10px;height:22px;border-radius:var(--r-full);}
.confetti .l3 i{width:8px;height:8px;border-radius:var(--r-full);}
.confetti > span{position:absolute;inset:0;display:block;will-change:transform;}

/* page banner (inner pages) */
.banner{
  position:relative;overflow:hidden;color:#fff;padding:var(--s16) 0 var(--s16);
  background:linear-gradient(130deg,var(--navy-900),var(--navy-700) 60%,var(--c,var(--indigo-700)));
}
.banner h1{color:#fff;max-width:18ch;}
.banner p{color:hsl(219 50% 88%);max-width:60ch;}
.crumbs{font-size:var(--text-xs);letter-spacing:var(--track-wide);color:hsl(219 45% 78%);margin-bottom:var(--s4);}
.crumbs a{color:#fff;}
.crumbs a:hover{color:var(--yellow-500);}

/* ==========================================================================
   GRIDS + CARDS
   ========================================================================== */
.grid{display:grid;gap:var(--s6);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr;}}

.card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  border-top:5px solid var(--c,var(--pink-500));overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
.card-body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);flex:1;}
.card-body p{margin:0;font-size:var(--text-sm);color:var(--gray-600);}
.card h3,.card h4{margin:0;}
.card-foot{margin-top:auto;padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;}

/* media tile: real photo when supplied, styled panel when not */
.media{
  position:relative;aspect-ratio:4/3;
  background:linear-gradient(var(--ang,140deg),var(--c-dk,var(--navy-700)),var(--c,var(--pink-500)));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.media img{width:100%;height:100%;object-fit:cover;}
.media::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.30) 0 5px,transparent 6px),
    radial-gradient(circle at 82% 30%,rgba(255,255,255,.22) 0 4px,transparent 5px),
    radial-gradient(circle at 30% 78%,rgba(255,255,255,.18) 0 6px,transparent 7px),
    radial-gradient(circle at 70% 72%,rgba(255,255,255,.26) 0 4px,transparent 5px);
}
.media::after{
  content:'';position:absolute;width:150%;height:150%;left:var(--bx,-20%);top:var(--by,-30%);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 62%);pointer-events:none;
}
.media .glyph{position:relative;z-index:1;width:64px;height:64px;color:#fff;opacity:.96;stroke-width:1.6;}
.card:hover .media .glyph{transform:scale(1.06);}
.media .glyph{transition:transform .3s ease;}
.media-shade{position:absolute;inset:0;background:linear-gradient(to top,hsl(219 60% 10% / .55),transparent 55%);pointer-events:none;}
.media .tag{
  position:absolute;left:var(--s3);top:var(--s3);z-index:2;
  background:rgba(255,255,255,.94);color:var(--c-ink,var(--navy-700));
  font-size:11px;font-weight:var(--w-bold);letter-spacing:var(--track-widest);text-transform:uppercase;
  padding:6px 10px;border-radius:var(--r-full);
}

/* price + spec chips */
.price{font-family:var(--font-display);font-weight:var(--w-black);font-size:var(--text-xl);color:var(--navy-900);letter-spacing:var(--track-tight);}
.price small{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--w-medium);color:var(--text-secondary);letter-spacing:0;margin-left:var(--s2);}
.price-ask{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--navy-600);}
.specs{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);}
.specs li{
  display:inline-flex;align-items:center;gap:6px;background:var(--gray-100);color:var(--gray-600);
  font-size:var(--text-xs);font-weight:var(--w-medium);padding:5px 10px;border-radius:var(--r-full);
}
.specs svg{width:13px;height:13px;color:var(--text-tertiary);flex:none;}

/* add to inquiry toggle */
.addbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:var(--s2) var(--s4);border-radius:var(--r-full);
  border:2px solid var(--navy-300);background:#fff;color:var(--navy-700);cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--w-bold);letter-spacing:var(--track-wide);
  transition:all .18s ease;
}
.addbtn svg{width:15px;height:15px;}
.addbtn:hover{border-color:var(--navy-700);background:var(--navy-50);transform:translateY(-2px);}
.addbtn:active{transform:translateY(1px);}
.addbtn[aria-pressed="true"]{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.addbtn[aria-pressed="true"]:hover{background:var(--green-700);border-color:var(--green-700);}
.addbtn[aria-pressed="true"] .ico-plus{display:none;}
.addbtn .ico-check{display:none;}
.addbtn[aria-pressed="true"] .ico-check{display:block;}

/* category card */
.cat-card{position:relative;}
.cat-card .card-body{gap:var(--s2);}
.cat-card .go{
  margin-top:var(--s3);display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--c-ink,var(--pink-600));letter-spacing:var(--track-wide);
}
.cat-card .go svg{width:16px;height:16px;transition:transform .2s ease;}
.cat-card:hover .go svg{transform:translateX(5px);}

/* icon tile */
.itile{
  width:56px;height:56px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:var(--c-tint,var(--pink-100));color:var(--c-ink,var(--pink-600));flex:none;
}
.itile svg{width:26px;height:26px;}

/* why / feature list */
.why{display:flex;gap:var(--s4);align-items:flex-start;}
.why h4{margin:0 0 var(--s1);}
.why p{margin:0;font-size:var(--text-sm);color:var(--gray-600);}

/* numbered steps */
.steps{counter-reset:step;display:grid;gap:var(--s6);grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative;background:#fff;border-radius:var(--r-lg);padding:var(--s8) var(--s6) var(--s6);box-shadow:var(--sh-sm);}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-22px;left:var(--s6);
  width:48px;height:48px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--w-black);font-size:var(--text-lg);
  background:var(--pink-500);color:#fff;box-shadow:var(--sh-md);
}
.step h4{margin:var(--s2) 0 var(--s2);}
.step p{margin:0;font-size:var(--text-sm);color:var(--gray-600);}

/* dark band */
.band{background:var(--navy-900);color:#fff;position:relative;overflow:hidden;}
.band h2,.band h3{color:#fff;}
.band p{color:hsl(219 45% 82%);}
.band-glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;}

/* split layout */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s16);align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--s12);}}

/* checklist */
.checks{list-style:none;display:grid;gap:var(--s3);}
.checks li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--text-sm);}
.checks svg{width:20px;height:20px;flex:none;color:var(--green-500);margin-top:1px;}
.band .checks li{color:hsl(219 45% 88%);}
.band .checks svg{color:var(--yellow-500);}

/* stat / spec panel */
.panel{background:#fff;border-radius:var(--r-xl);padding:var(--s8);box-shadow:var(--sh-md);}
.panel-dark{background:hsl(219 55% 17%);border:1px solid hsl(219 45% 26%);border-radius:var(--r-xl);padding:var(--s8);}
.kv{display:grid;gap:var(--s4);list-style:none;}
.kv li{display:flex;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--gray-100);font-size:var(--text-sm);}
.kv li:last-child{border-bottom:0;padding-bottom:0;}
.kv b{font-weight:var(--w-bold);color:var(--navy-900);}
.panel-dark .kv li{border-color:hsl(219 45% 26%);color:hsl(219 45% 82%);}
.panel-dark .kv b{color:#fff;}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s8);}
.chip{
  border:2px solid var(--gray-200);background:#fff;color:var(--gray-600);cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--w-bold);
  letter-spacing:var(--track-wide);padding:var(--s3) var(--s4);border-radius:var(--r-full);min-height:44px;
  transition:all .18s ease;
}
.chip:hover{border-color:var(--navy-300);color:var(--navy-800);transform:translateY(-2px);}
.chip[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.is-hidden{display:none !important;}

/* packages */
.pkg{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);border-top:5px solid var(--c);padding:var(--s8);display:flex;flex-direction:column;gap:var(--s4);transition:transform .25s ease,box-shadow .25s ease;}
.pkg:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
.pkg h3{margin:0;}
.pkg .meta{display:grid;gap:var(--s2);font-size:var(--text-xs);color:var(--gray-500);}
.pkg .meta span{display:flex;align-items:center;gap:var(--s2);}
.pkg .meta svg{width:14px;height:14px;color:var(--text-tertiary);}
.pkg ul{list-style:none;display:grid;gap:var(--s2);}
.pkg ul li{display:flex;gap:var(--s2);font-size:var(--text-sm);color:var(--gray-600);}
.pkg ul svg{width:16px;height:16px;flex:none;color:var(--c-ink);margin-top:3px;}
.pkg .label{font-size:11px;font-weight:var(--w-bold);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-tertiary);}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:var(--s3);}
.faq details{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-xs);overflow:hidden;border-left:4px solid var(--gray-200);transition:border-color .2s ease;}
.faq details[open]{border-left-color:var(--pink-500);box-shadow:var(--sh-sm);}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s4) var(--s6);
  font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-base);
  color:var(--navy-900);display:flex;justify-content:space-between;gap:var(--s4);align-items:center;min-height:56px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{background:var(--gray-50);}
.faq summary svg{width:18px;height:18px;flex:none;color:var(--pink-500);transition:transform .25s ease;}
.faq details[open] summary svg{transform:rotate(45deg);}
.faq .answer{padding:0 var(--s6) var(--s6);}
.faq .answer p{margin:0;font-size:var(--text-sm);color:var(--gray-600);}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr);}}
.gal button{
  padding:0;border:0;background:none;cursor:pointer;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:1/1;display:block;box-shadow:var(--sh-sm);transition:transform .25s ease,box-shadow .25s ease;
}
.gal button:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.gal img{width:100%;height:100%;object-fit:cover;}
.lightbox{position:fixed;inset:0;z-index:300;background:hsl(219 60% 6% / .93);display:none;align-items:center;justify-content:center;padding:var(--s6);}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(1100px,92vw);max-height:82vh;border-radius:var(--r-md);object-fit:contain;}
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{
  position:absolute;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);color:#fff;
  width:52px;height:52px;border-radius:var(--r-full);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.lightbox button:hover{background:rgba(255,255,255,.26);}
.lightbox .lb-close{top:var(--s6);right:var(--s6);}
.lightbox .lb-prev{left:var(--s4);}
.lightbox .lb-next{right:var(--s4);}
.lightbox svg{width:22px;height:22px;}
.lb-cap{position:absolute;bottom:var(--s6);left:0;right:0;text-align:center;color:hsl(219 30% 84%);font-size:var(--text-sm);padding:0 var(--s8);}

/* empty state */
.empty{
  background:#fff;border:2px dashed var(--gray-200);border-radius:var(--r-xl);
  padding:var(--s16) var(--s8);text-align:center;
}
.empty .itile{margin:0 auto var(--s4);}
.empty p{margin-left:auto;margin-right:auto;}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form{display:grid;gap:var(--s6);}
.field{display:grid;gap:6px;}
.field label{font-size:var(--text-xs);font-weight:var(--w-bold);letter-spacing:var(--track-wide);color:var(--navy-800);text-transform:uppercase;}
.field .hint{font-size:var(--text-xs);color:var(--text-secondary);}
input,select,textarea{
  font-family:var(--font-body);font-size:var(--text-base);color:var(--navy-900);
  background:#fff;border:2px solid var(--gray-200);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);min-height:52px;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
textarea{min-height:130px;resize:vertical;padding-top:var(--s3);line-height:var(--leading-snug);}
input:hover,select:hover,textarea:hover{border-color:var(--gray-300);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan-500);box-shadow:0 0 0 4px hsl(197 84% 48% / .18);}
input:invalid:not(:placeholder-shown){border-color:var(--pink-500);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
@media(max-width:640px){.row2{grid-template-columns:1fr;}}
fieldset{border:0;padding:0;margin:0;display:grid;gap:var(--s3);}
legend{font-size:var(--text-xs);font-weight:var(--w-bold);letter-spacing:var(--track-wide);color:var(--navy-800);text-transform:uppercase;padding:0;margin-bottom:var(--s1);}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2);}
.opt{position:relative;}
.opt input{position:absolute;opacity:0;width:1px;height:1px;}
.opt span{
  display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) var(--s4);
  border:2px solid var(--gray-200);border-radius:var(--r-full);background:#fff;cursor:pointer;
  font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--gray-600);transition:all .18s ease;
}
.opt span:hover{border-color:var(--navy-300);color:var(--navy-800);}
.opt input:checked+span{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.opt input:focus-visible+span{outline:3px solid var(--cyan-500);outline-offset:3px;}
.picked{display:flex;flex-wrap:wrap;gap:var(--s2);min-height:44px;align-items:center;}
.picked .none{font-size:var(--text-sm);color:var(--text-secondary);}
.pill{
  display:inline-flex;align-items:center;gap:var(--s2);background:var(--navy-50);color:var(--navy-800);
  border:1px solid var(--navy-100);border-radius:var(--r-full);padding:6px 6px 6px 14px;font-size:var(--text-sm);font-weight:var(--w-medium);
}
.pill button{
  border:0;background:var(--navy-100);color:var(--navy-700);width:26px;height:26px;border-radius:var(--r-full);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease;
}
.pill button:hover{background:var(--pink-500);color:#fff;}
.pill svg{width:12px;height:12px;}

/* contact tiles */
.ctile{display:flex;gap:var(--s4);align-items:center;background:#fff;border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-sm);transition:transform .2s ease,box-shadow .2s ease;}
.ctile:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.ctile .itile{width:48px;height:48px;}
.ctile .k{font-size:var(--text-xs);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-tertiary);font-weight:var(--w-bold);}
.ctile .v{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-base);color:var(--navy-900);word-break:break-word;}

/* ==========================================================================
   FLOATING ACTIONS + INQUIRY BAR
   ========================================================================== */
.fab{position:fixed;right:16px;bottom:16px;z-index:130;display:flex;flex-direction:column;gap:var(--s3);}
.fab a{
  width:58px;height:58px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:var(--sh-lg);transition:transform .2s ease,box-shadow .2s ease;
}
.fab a:hover{transform:scale(1.07);box-shadow:var(--sh-xl);color:#fff;}
.fab a:active{transform:scale(.96);}
.fab svg{width:27px;height:27px;}
.fab .wa{background:var(--green-600);}
.fab .call{background:var(--navy-700);}
body.has-tray .fab{bottom:98px;}

.tray{
  position:fixed;left:0;right:0;bottom:0;z-index:125;background:var(--navy-900);color:#fff;
  transform:translateY(110%);transition:transform .3s ease;box-shadow:var(--sh-xl);
  border-top:4px solid var(--pink-500);
}
.tray.show{transform:translateY(0);}
.tray .wrap{display:flex;align-items:center;gap:var(--s4);padding-top:var(--s3);padding-bottom:var(--s3);min-height:78px;}
.tray .count{font-family:var(--font-display);font-weight:var(--w-black);font-size:var(--text-lg);}
.tray .count span{color:var(--yellow-500);}
.tray .sub{font-size:var(--text-xs);color:hsl(219 40% 76%);}
.tray .grow{margin-right:auto;}
.tray .clear{background:none;border:0;color:hsl(219 40% 76%);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--w-bold);letter-spacing:var(--track-wide);cursor:pointer;text-decoration:underline;padding:var(--s3);min-height:44px;}
.tray .clear:hover{color:#fff;}
@media(max-width:560px){
  .tray .sub{display:none;}
  .tray .wrap{gap:var(--s3);padding-left:var(--s4);padding-right:var(--s4);}
  .tray .btn{padding:var(--s3) var(--s4);}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--navy-900);color:hsl(219 40% 78%);padding:var(--s24) 0 var(--s8);font-size:var(--text-sm);}
.footer a{color:hsl(219 40% 82%);}
.footer a:hover{color:var(--yellow-500);}
.footer h4{color:#fff;font-size:var(--text-sm);letter-spacing:var(--track-widest);text-transform:uppercase;margin-bottom:var(--s4);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s12);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s8);}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer ul{list-style:none;display:grid;gap:var(--s3);}
.footer img.flogo{height:52px;width:auto;margin-bottom:var(--s4);}
.footer .fbrand p{max-width:34ch;}
.legal{
  margin-top:var(--s16);padding-top:var(--s6);border-top:1px solid hsl(219 45% 22%);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:var(--text-xs);color:hsl(219 30% 62%);
}
.legal a{color:hsl(219 35% 78%);font-weight:var(--w-medium);}

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.reveal.vis{opacity:1;transform:none;}
.reveal-l{opacity:0;transform:translateX(-36px);transition:opacity .6s ease,transform .6s ease;}
.reveal-r{opacity:0;transform:translateX(36px);transition:opacity .6s ease,transform .6s ease;}
.reveal-l.vis,.reveal-r.vis{opacity:1;transform:none;}
.rg > *:nth-child(1){transition-delay:0s}
.rg > *:nth-child(2){transition-delay:.08s}
.rg > *:nth-child(3){transition-delay:.16s}
.rg > *:nth-child(4){transition-delay:.24s}
.rg > *:nth-child(5){transition-delay:.32s}
.rg > *:nth-child(6){transition-delay:.4s}

/* horizontal reveals cause overflow on small screens, so go vertical instead */
@media(max-width:900px){
  .reveal-l,.reveal-r{transform:translateY(28px);}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .reveal,.reveal-l,.reveal-r{opacity:1;transform:none;}
}

/* ==========================================================================
   RESPONSIVE TYPE
   ========================================================================== */
@media(max-width:900px){
  :root{--section-y:var(--s16);--text-4xl:2.5rem;--text-3xl:2.125rem;--text-2xl:1.625rem;--text-xl:1.3125rem;}
  .hero{padding:var(--s16) 0 var(--s24);}
  .split{gap:var(--s8);}
}
@media(max-width:560px){
  :root{--text-4xl:2.125rem;--text-3xl:1.875rem;}
  .wrap{padding:0 var(--s4);}
  /* only stacked CTA rows go full width, never header, tray or card buttons */
  .btn-row > .btn{width:100%;}
}