/* ==========================================================================
   Ojembaa International — header + hero
   Real full-viewport page. Mobile-first, three breakpoints (640 / 900 / 1200).
   The navy wedge is one rotated rounded square anchored by its left corner,
   so its angle stays a true 45° at every viewport size instead of shearing
   the way a percentage clip-path would.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --navy:#0c1e42;                  /* brand navy — buttons, wedge, headings */
  --navy-soft:#48699e;             /* the lighter half of the headline */
  --panel:#0c1e42;
  --gold:#dcb34d;                  /* brand gold — fills only */
  --gold-deep:#cda23d;
  /* Brand gold on white is ~1.9:1, so gold *text* uses this darkened cast
     instead. Fills keep the true brand colour; only lettering shifts. */
  --gold-ink:#9c7724;
  --ink:#0c1e42;
  --muted:#7b8698;
  --hair:#d5dae3;

  --pad:clamp(20px,5vw,64px);      /* container side padding */
  --maxw:1360px;

  --fz-logo:clamp(22px,2.6vw,30px);
  --fz-h1:clamp(28px,5.2vw,48px);
  --fz-copy:clamp(14px,3.4vw,16px);
  --fz-link:clamp(14px,1.15vw,16px);
  --fz-cta:clamp(15px,3.2vw,18px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------- page shell ---------- */
.page{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;      /* clips the oversized wedge */
  isolation:isolate;
}

/* ==========================================================================
   The navy wedge
   MOBILE: a full-width slab across the lower page with a diagonal top edge.
   ========================================================================== */
.panel{
  position:absolute;
  left:-2%;
  right:-2%;
  top:46%;
  bottom:-2%;
  background:var(--panel);
  clip-path:polygon(0 14%,100% 0,100% 100%,0 100%);
  z-index:0;
  overflow:hidden;
}
.panel__doodles{
  position:absolute;
  inset:-10%;
  background:url("../assets/doodles.1ce69a2a9463.svg") repeat;
  background-size:132px 132px;
  opacity:.9;
}

/* ---------- ambient decoration ---------- */
.glow{
  position:absolute;left:-12%;top:-10%;
  width:min(30vw,280px);aspect-ratio:1.1;
  border-radius:50%;
  background:radial-gradient(circle,#fdf1d6 0%,rgba(253,241,214,0) 70%);
  opacity:.55;
  z-index:1;pointer-events:none;
}
.dot-grid{
  position:absolute;left:var(--pad);top:12px;
  width:clamp(72px,9vw,110px);aspect-ratio:1.15;
  background-image:radial-gradient(var(--hair) 1.1px,transparent 1.1px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(120deg,#000 20%,transparent 80%);
          mask-image:linear-gradient(120deg,#000 20%,transparent 80%);
  z-index:1;pointer-events:none;
}
.deco{position:absolute;z-index:1;pointer-events:none;display:none}
.deco--plane{left:0;top:52%;width:clamp(96px,10vw,150px);
  filter:drop-shadow(0 12px 22px rgba(12,30,66,.14))}
.deco--cap{left:1%;bottom:2%;width:clamp(60px,6vw,96px);transform:rotate(22deg)}

/* ==========================================================================
   Header
   ========================================================================== */
/* Above .scrim (35): .hdr creates a stacking context, so the nav sheet's
   z-index is scoped to this value — it cannot out-stack the scrim on its own. */
.hdr{position:relative;z-index:50;padding-block:clamp(18px,3.5vw,34px)}
.hdr__inner{display:flex;align-items:center;gap:24px}

.logo{
  display:flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;
}
.logo__mark{
  width:clamp(36px,3.6vw,44px);height:auto;flex:none;
  border-radius:50%;
  box-shadow:0 6px 16px rgba(12,30,66,.28);
}
.logo__word{
  font-size:var(--fz-logo);font-weight:700;letter-spacing:-.03em;line-height:1;
}
.logo__dot{color:var(--gold-deep)}
.logo__sub{
  display:block;margin-top:4px;
  font-size:clamp(7px,.72vw,9px);font-weight:600;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* --- burger (mobile only) --- */
.burger{
  position:relative;
  z-index:41;              /* stays tappable on top of the open nav sheet */
  margin-left:auto;
  width:46px;height:46px;
  display:grid;place-content:center;gap:5px;
  border-radius:50%;
  transition:background .2s;
}
.burger span{
  display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .28s ease,opacity .2s ease;
}
.burger:hover{background:#f1f4f8}
/* the open-state X sits on the dark sheet — the light-gray hover disc
   reads as a glitch there, so it becomes a faint white wash instead */
.burger[aria-expanded="true"]:hover{background:rgba(255,255,255,.12)}
.burger[aria-expanded="true"] span{background:#fff}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- nav: a slide-in sheet on mobile --- */
.nav{
  position:fixed;
  top:0;right:0;
  width:min(84vw,340px);
  height:100dvh;
  z-index:40;
  background:#0a1932;
  padding:96px 32px 40px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  overscroll-behavior:contain;   /* a scroll gesture on the sheet must not scroll the page behind it */
}
.nav.is-open{transform:none}

/* set on <html> while the sheet is open — locks the page scroller itself,
   which is more reliable than an inline overflow on <body> */
.nav-lock,.nav-lock body{overflow:hidden}

.menu{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;
  color:#9fb0cc;margin-bottom:8px;transition:color .18s;
}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.icon-btn:hover{color:#fff}

.link{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  font-size:18px;font-weight:400;line-height:1;
  color:#c3cede;text-decoration:none;
  white-space:nowrap;    /* "About Us" must never break across two lines */
  padding:12px 0;
  transition:color .18s;
}
.link:hover,.link.is-active{color:#fff}
.link__arc{display:none;position:absolute;left:-2px;top:-8px;width:38px;color:var(--gold-deep);pointer-events:none}
.link--btn{font-size:18px;color:#c3cede}
.caret{width:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .22s}
.dropdown{position:relative;width:100%}
.dropdown.is-open .caret{transform:rotate(180deg)}
.dropdown.is-open .link--btn{color:#fff}

/* Hidden the same way at every breakpoint — opacity/visibility are declared
   here rather than only in the desktop query, so a viewport resize can never
   catch the list mid-transition from an inherited `opacity:1`.
   Collapsed with max-height, not grid-template-rows:0fr — the 0fr trick only
   collapses the first row, so a multi-item list keeps phantom height. */
.dropdown__list{
  list-style:none;
  max-height:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:max-height .3s ease,opacity .2s ease,visibility .2s ease;
}
.dropdown.is-open .dropdown__list{max-height:300px;opacity:1;visibility:visible}
.dropdown__list a{
  display:block;padding:9px 14px;border-radius:8px;
  font-size:15px;color:#93a2b8;text-decoration:none;
}
.dropdown__list a:hover{background:#15294b;color:#fff}

/* margin-top:auto anchors the pills to the sheet's bottom edge; the
   padding keeps a minimum gap when a short landscape screen removes the slack */
.auth{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px}
.btn{
  font-size:15px;font-weight:500;line-height:1;white-space:nowrap;
  padding:16px 26px;border-radius:40px;
  transition:transform .16s,box-shadow .2s,filter .2s;
}
/* .btn is also used on <a> — normalize the anchor bits */
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.btn:active{transform:scale(.96)}
/* inside the dark sheet a navy pill disappears — outline it instead */
.btn--dark{
  background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);
}
.btn--dark:hover{background:rgba(255,255,255,.08)}
.btn--gold{background:var(--gold);color:var(--navy);font-weight:600;box-shadow:0 8px 20px rgba(220,179,77,.45)}
.btn--gold:hover{filter:brightness(1.05)}

.scrim{
  position:fixed;inset:0;z-index:35;
  background:rgba(6,14,30,.55);
  backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s;
}
.scrim.is-on{opacity:1}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;z-index:10;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(12px,3vw,40px);
  padding-block:clamp(8px,2vw,32px) clamp(20px,3vw,48px);
}
/* minmax(0,1fr), not plain auto: an auto track grows to the content's
   min-content width, which lets a wide cta-row push the column past the
   viewport instead of wrapping. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(4px,2vw,32px)}

/* --- copy ---
   Centred below 900px — a left-ragged column looks unfinished on a narrow
   screen. The desktop breakpoint restores the mockup's left alignment. */
.hero__copy{position:relative;text-align:center}
.squiggle{
  display:none;
  position:absolute;left:-58px;top:14px;
  width:34px;color:var(--gold-deep);opacity:.9;
}
.eyebrow{
  font-family:'Dancing Script',cursive;
  font-size:clamp(21px,4.4vw,29px);font-weight:700;line-height:1;
  color:var(--gold-ink);
  margin-bottom:clamp(6px,1.2vw,12px);
}
.title{font-weight:400;line-height:1.15;letter-spacing:-.01em}
.title__thin{display:block;font-size:var(--fz-h1);font-weight:300;color:var(--navy-soft)}
.title__bold{display:block;font-size:var(--fz-h1);font-weight:800;color:var(--navy)}
.copy{
  margin-top:clamp(10px,2vw,18px);
  margin-inline:auto;
  max-width:38ch;
  font-size:var(--fz-copy);font-weight:300;line-height:1.75;color:var(--muted);
}
.copy b{color:var(--ink);font-weight:600}
.copy br{display:none}

.cta-row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(16px,3vw,38px);
}

.cta{
  display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,16px);
  background:var(--navy);color:#fff;text-decoration:none;
  font-size:var(--fz-cta);font-weight:500;line-height:1;
  padding:10px clamp(18px,2vw,26px) 10px 10px;
  border-radius:60px;
  box-shadow:0 18px 30px -8px rgba(12,30,66,.5);
  transition:transform .18s,box-shadow .18s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 24px 38px -8px rgba(12,30,66,.55)}
.cta:active{transform:scale(.97)}
.cta__ico{
  width:clamp(38px,4.4vw,50px);aspect-ratio:1;flex:none;
  border-radius:50%;background:var(--gold);
  display:grid;place-items:center;
}
.cta__ico svg{width:52%;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}

.dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(14px,3vw,36px)}
.dashline{
  width:26px;height:3px;border-radius:2px;background:var(--hair);
  transition:background .2s,width .2s;
}
.dashline.is-on{background:var(--gold-deep);width:30px}

/* --- art ---
   Sized by height (with a width cap) so the hero tracks short screens
   instead of only narrow ones. */
.art{
  position:relative;
  aspect-ratio:64/62;
  height:min(40svh,430px);
  width:auto;
  max-width:92%;
  margin-inline:auto;
  z-index:5;
  filter:drop-shadow(0 34px 44px rgba(12,30,66,.34));
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  will-change:transform;
}
.art img{
  width:100%;
  height:100%;
  object-fit:contain;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-12px)}}

/* These land on the navy wedge at >=900px, so they are drawn in white and
   dimmed rather than in --hair, which read as stray scratches against navy. */
.threads{
  position:absolute;left:-6%;top:38%;
  width:34%;color:#ffffff;
  z-index:-1;opacity:.16;
}
.fdot{position:absolute;border-radius:50%;background:var(--navy)}
.fdot--1{width:8px;height:8px;background:var(--gold-deep);left:82%;top:-4%}
.fdot--2{width:9px;height:9px;left:33%;top:1%}
.fdot--3{width:8px;height:8px;left:4%;top:41%}
.fdot--4{width:8px;height:8px;background:var(--gold-deep);left:9%;top:26%}
.fdot--5{width:7px;height:7px;background:var(--gold-deep);left:5%;top:52%}
.fdot--6{width:7px;height:7px;left:-4%;top:64%}

/* --- hero footer --- */
.hero__foot{
  display:grid;
  gap:clamp(16px,3vw,36px);
  align-items:center;
}

/* trust */
.trust{position:relative;display:flex;align-items:center;justify-content:center;gap:12px}
/* Ring + logo share their own square so the dashed ring always stays centred
   on the logo, no matter how tall the adjacent text wraps on small screens. */
.trust__badge{
  position:relative;flex:none;
  width:clamp(42px,5vw,54px);aspect-ratio:1;
  display:grid;place-items:center;
}
.trust__ring{
  position:absolute;inset:-7px;
  border:1.4px dashed rgba(255,255,255,.25);border-radius:50%;
  animation:spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.trust__img{
  width:100%;aspect-ratio:1;
  border-radius:50%;
  box-shadow:0 8px 16px rgba(12,30,66,.28);
}
.trust__top{
  display:block;
  font-size:clamp(11px,2.6vw,12px);font-weight:300;line-height:1.4;
  color:rgba(255,255,255,.66);
}
.trust__top b{font-weight:600;color:#fff}
.trust__top .stars{color:var(--gold);letter-spacing:.06em}
.trust__link{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:2px;
  font-size:clamp(13px,3vw,14px);font-weight:600;
  color:#fff;text-decoration:none;
}
.trust__link svg{
  width:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;
}
.trust__link:hover svg{transform:translateX(4px)}

/* destinations */
.dest{
  border:1.3px dashed rgba(255,255,255,.3);
  border-radius:16px;
  padding:clamp(9px,1.2vw,13px);
}
.dest__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:clamp(7px,1vw,11px);padding-inline:4px;
}
.dest__head h2{font-size:clamp(12px,2.4vw,13.5px);font-weight:400;color:#eef2f8}
.dest__nav{display:flex;align-items:center;gap:16px}
.dnav{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:300;color:#9fb0cc;
  transition:color .18s;
}
.dnav:hover{color:#fff}
.dnav svg{width:6px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.card{
  background:#fff;border-radius:12px;
  padding:clamp(8px,1vw,10px) clamp(10px,1.2vw,14px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(9px,1vw,13px);
  box-shadow:0 16px 30px rgba(6,14,30,.34);
}
.card__img{
  width:clamp(36px,3.6vw,44px);aspect-ratio:1;
  filter:drop-shadow(0 5px 9px rgba(12,30,66,.22));
  transition:transform .35s;
}
.card:hover .card__img{transform:rotate(14deg)}
.card__info{min-width:0}
.card__info h3{
  font-size:clamp(14px,1.2vw,16px);font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tag{display:inline-flex;align-items:center;gap:6px;margin-top:2px;min-width:0}
.tag__ico{
  width:10px;height:10px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e39d,#cda23d);
  box-shadow:inset 0 0 0 2px #e6cd8c;
}
.tag b{
  font-size:11px;font-weight:400;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card__meta{display:flex;flex-direction:column;line-height:1.15}
.card__meta span{
  font-size:9px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:#a7b1c2;
}
.card__meta strong{font-size:clamp(12px,1.05vw,14px);font-weight:600;margin-top:3px;white-space:nowrap}
.badge{
  display:none;align-items:center;gap:5px;
  background:var(--gold);border-radius:40px;padding:6px 11px;
}
.badge svg{width:12px;fill:var(--navy);stroke:none}
.badge b{font-size:11px;font-weight:500;white-space:nowrap;color:var(--navy)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:70;
  max-width:calc(100vw - 32px);
  background:var(--navy);color:#fff;
  font-size:14px;text-align:center;
  padding:13px 22px;border-radius:40px;
  box-shadow:0 16px 34px rgba(6,14,30,.45);
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .25s,transform .25s;
}
.toast.is-on{opacity:1;transform:none}

/* ==========================================================================
   >= 640px — roomier phones / small tablets
   ========================================================================== */
@media (min-width:640px){
  .copy br{display:revert}
  .card{grid-template-columns:auto 1fr auto auto}
  .badge{display:inline-flex}
  .hero__foot{grid-template-columns:1fr;justify-items:stretch}
  .trust{justify-self:start}
}

/* ==========================================================================
   >= 900px — the diagonal layout arrives
   ========================================================================== */
@media (min-width:900px){
  /* the wedge becomes a rotated rounded square: left corner parked at
     (38% of page width, 60% of page height), edges at a true 45deg. */
  .panel{
    left:36%;top:68%;right:auto;bottom:auto;
    width:180vmax;height:180vmax;
    border-radius:120px;
    clip-path:none;
    /* half-diagonal of a 180vmax square = 127.28vmax; shifting the centre
       right by exactly that lands the square's left corner on `left`/`top` */
    transform:translate(calc(-50% + 127.28vmax),-50%) rotate(45deg);
  }
  .panel__doodles{
    inset:0;
    /* counter-rotate so the doodles stay upright */
    transform:rotate(-45deg);
    background-size:150px 150px;
  }

  .deco{display:block}
  .squiggle{display:block;left:0}
  .link__arc{display:block}

  /* header goes inline */
  .burger{display:none}
  .scrim{display:none}
  .nav{
    position:static;
    width:auto;height:auto;
    background:none;padding:0;
    margin-left:auto;
    flex-direction:row;align-items:center;
    /* Five nav items plus two pills make a wide header: the gaps have to give
       first around 900-1100, or the links wrap and the row collapses. */
    gap:clamp(12px,2.2vw,48px);
    transform:none;overflow:visible;
  }
  .menu{flex-direction:row;align-items:center;gap:clamp(10px,1.8vw,32px)}
  .icon-btn{width:22px;height:22px;margin:0;color:#8d9aae}
  .icon-btn:hover{color:var(--ink)}
  .link{font-size:var(--fz-link);color:#6f7d92;padding:0}
  .link:hover,.link.is-active{color:var(--ink)}
  .link.is-active{font-weight:500}
  .link--btn{font-size:var(--fz-link);color:#6f7d92}
  .dropdown{width:auto}
  /* the open-state white was for the dark mobile sheet — on the white
     header it made the toggle vanish */
  .dropdown.is-open .link--btn{color:var(--ink)}
  .dropdown__list{
    position:absolute;top:calc(100% + 16px);left:50%;translate:-50% 0;
    display:block;
    background:#fff;border-radius:14px;padding:8px;
    min-width:170px;
    box-shadow:0 18px 40px rgba(12,30,66,.2);
    transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  }
  .dropdown.is-open .dropdown__list{transform:none}
  .dropdown__list a{color:#5b6b85}
  .dropdown__list a:hover{background:#f3f6fb;color:var(--ink)}
  .auth{flex-direction:row;align-items:center;gap:10px;margin:0;padding:0}
  .btn{padding:14px 18px}
  /* this pill straddles the wedge boundary — navy would vanish against navy,
     so it becomes a white chip (like the mockup's "Sign In") */
  .btn--dark{
    background:#fff;color:var(--ink);
    box-shadow:inset 0 0 0 1.5px var(--hair),0 8px 18px rgba(12,30,66,.14);
  }
  .btn--dark:hover{background:#fff;box-shadow:inset 0 0 0 1.5px #c3ccd9,0 10px 22px rgba(12,30,66,.22)}

  .cta{white-space:nowrap}

  /* hero split */
  .hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
    align-items:center;
  }
  /* The mockup indents the headline block ~8.5vw past the logo, with the
     squiggle parked in that gutter, flush with the logo's left edge.
     16vw-120px ramps the indent from 24px at 900w up to the 124px cap. */
  .hero__copy{text-align:left;padding-right:12px;padding-left:clamp(16px,14vw - 104px,96px)}
  .copy{margin-inline:0}
  .cta-row{justify-content:flex-start}
  .dots{justify-content:flex-start}
  .trust{justify-content:flex-start}
  /* Centred in its column, then nudged left with the translate so the
     booklet breaks out of the navy wedge onto the white side.
     The negative block margins let it overhang its grid row — the page keeps
     fitting one screen while the artwork itself renders far larger. */
  .art{
    aspect-ratio:64/62;
    height:min(68svh,700px);
    width:auto;
    max-width:106%;
    margin-inline:auto;
    margin-block:-6svh -10svh;
    translate:-7% -2%;
  }

  .hero__foot{
    grid-template-columns:1fr;
    align-items:center;
  }
  .dest{width:100%}

  /* the trust block sits on white again */
  .trust__ring{border-color:var(--hair)}
  .trust__top{color:#6f7d92}
  .trust__top b{color:var(--ink)}
  .trust__top .stars{color:var(--gold-deep)}
  .trust__link{color:var(--ink)}
}

/* ==========================================================================
   >= 1200px — final polish
   ========================================================================== */
@media (min-width:1200px){
  .title__thin{font-size:clamp(38px,3.1vw,44px)}
  .title__bold{font-size:clamp(40px,3.3vw,48px)}
  /* the header has room again — give the pills their padding back */
  .auth{gap:12px}
  .btn{padding:14px 24px}
}

/* ==========================================================================
   Below-the-hero sections
   ========================================================================== */
.section{position:relative;padding-block:clamp(56px,8vw,104px);overflow:hidden}
.section > .container{position:relative}

/* Light sections carry a whisper of the same doodle pattern the navy
   surfaces use — inverted to ink, and masked out of the middle so it stays
   in the margins, never behind the content. Texture instead of color. */
.section::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/doodles.1ce69a2a9463.svg") repeat;
  background-size:170px 170px;
  filter:brightness(0);
  opacity:.32;   /* strokes are .16 alpha in the file — net ≈ 5% ink */
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,transparent 30%,#000 95%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,transparent 30%,#000 95%);
}
.next-step::before{display:none}   /* its navy banner is the texture here */

/* echo of the hero's dot grid, tucked beside the section headings */
.section__head::before{
  content:"";position:absolute;
  left:calc(50% - clamp(150px,24vw,270px));top:-14px;
  width:clamp(60px,7vw,90px);aspect-ratio:1.15;
  background-image:radial-gradient(var(--hair) 1.1px,transparent 1.1px);
  background-size:13px 13px;
  -webkit-mask-image:linear-gradient(120deg,#000 20%,transparent 80%);
          mask-image:linear-gradient(120deg,#000 20%,transparent 80%);
  pointer-events:none;
}
.section__head{position:relative}

.section__head{text-align:center;margin-bottom:clamp(30px,4.5vw,54px)}
.section__eyebrow{
  font-family:'Dancing Script',cursive;
  font-size:clamp(20px,2.4vw,27px);font-weight:700;line-height:1;
  color:var(--gold-ink);
  margin-bottom:10px;
}
.section__title{
  font-size:clamp(24px,3vw,38px);font-weight:800;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--navy);
}

/* --- about --- */
.about__story{
  max-width:76ch;
  margin-inline:auto;
  text-align:center;
}
.about__story p{
  font-size:clamp(14px,1.15vw,15.5px);font-weight:300;line-height:1.85;color:#4d5a70;
}
.about__story p + p{margin-top:14px}
.about__story b{color:var(--ink);font-weight:600}
.about__values{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(28px,3.5vw,46px);
}
.value{
  background:#fff;
  border:1px solid #e7ebf2;border-radius:18px;
  padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,26px);
  text-align:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.value:hover{
  transform:translateY(-5px);
  border-color:#ecd9a6;
  box-shadow:0 20px 38px -14px rgba(12,30,66,.22);
}
.value__ico{
  width:54px;aspect-ratio:1;
  margin-inline:auto;margin-bottom:14px;
  border-radius:16px;
  background:#f2f5fa;
  display:grid;place-items:center;
}
.value__ico svg{width:52%}
.value h3{font-size:17px;font-weight:600;color:var(--navy);margin-bottom:10px}
.value h3::after{
  content:"";display:block;
  width:30px;height:2.5px;border-radius:2px;
  background:var(--gold);
  margin:10px auto 0;
}
.value p{font-size:13.5px;font-weight:300;line-height:1.7;color:var(--muted)}

/* --- services --- */
.services{background:#f5f7fb}
.services__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(150px,42vw,218px),1fr));
  gap:clamp(12px,1.6vw,22px);
}
.svc{
  background:#fff;
  border:1px solid #e7ebf2;border-radius:18px;
  padding:clamp(22px,2.4vw,32px) clamp(16px,1.8vw,24px);
  text-align:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.svc:hover{
  transform:translateY(-5px);
  border-color:#ecd9a6;
  box-shadow:0 20px 38px -14px rgba(12,30,66,.22);
}
.svc__ico{
  width:clamp(48px,4.4vw,58px);aspect-ratio:1;
  margin-inline:auto;margin-bottom:16px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e39d,var(--gold));
  display:grid;place-items:center;
  box-shadow:0 10px 20px -6px rgba(220,179,77,.55);
}
.svc__ico svg{width:46%;fill:var(--navy)}
.svc h3{
  font-size:clamp(15px,1.2vw,17px);font-weight:600;line-height:1.35;
  color:var(--navy);margin-bottom:8px;
}
.svc p{font-size:13.5px;font-weight:300;line-height:1.65;color:var(--muted)}

/* --- destinations --- */
.dests__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,1.6vw,22px);
}
.country{
  background:#fff;
  border:1px solid #e7ebf2;border-radius:18px;
  padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px);
  display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.country:hover{
  transform:translateY(-5px);
  border-color:#ecd9a6;
  box-shadow:0 20px 38px -14px rgba(12,30,66,.22);
}
.country__top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.country__top img{
  width:46px;aspect-ratio:1;flex:none;
  filter:drop-shadow(0 5px 9px rgba(12,30,66,.22));
}
.country__top h3{font-size:17px;font-weight:600;color:var(--navy);line-height:1.2}
.country__tag{
  display:inline-block;margin-top:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-ink);
  background:#faf3df;
  border-radius:20px;padding:4px 10px;
}
.country__desc{font-size:13.5px;font-weight:300;line-height:1.7;color:var(--muted)}
.country__facts{
  list-style:none;
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px 14px;
  margin-top:auto;
  padding-top:16px;
}
.country__facts li{
  border-top:1px solid #eef1f6;
  padding-top:8px;
  line-height:1.3;
}
.country__facts b{display:block;font-size:13.5px;font-weight:600;color:var(--navy)}
.country__facts span{font-size:10.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:#a7b1c2}

.country--more{
  position:relative;
  background:var(--navy);border-color:var(--navy);
  align-items:center;text-align:center;justify-content:center;
  gap:4px;
  overflow:hidden;
}
.country--more::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/doodles.1ce69a2a9463.svg") repeat;
  background-size:150px 150px;
  opacity:.45;
}
.country--more > *{position:relative}
.country--more:hover{border-color:var(--gold-deep)}
.country__pin{
  width:52px;aspect-ratio:1;
  border-radius:50%;
  border:2px solid var(--gold);
  display:grid;place-items:center;
  margin-bottom:12px;
}
.country__pin svg{width:24px;fill:var(--gold)}
.country--more h3{font-size:18px;font-weight:700;color:#fff}
.country--more .country__desc{color:#b9c5da;margin-top:8px}
.country__cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;
  font-size:14px;font-weight:600;color:var(--gold);text-decoration:none;
}
.country__cta svg{
  width:16px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;
}
.country__cta:hover svg{transform:translateX(4px)}

/* --- contact --- */
.contact__cards{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,1.6vw,22px);
}
.ccard{
  background:#fff;
  border:1px solid #e7ebf2;border-radius:18px;
  padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,26px);
  text-align:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ccard:hover{
  transform:translateY(-5px);
  border-color:#ecd9a6;
  box-shadow:0 20px 38px -14px rgba(12,30,66,.22);
}
.ccard__ico{
  width:50px;aspect-ratio:1;
  margin-inline:auto;margin-bottom:14px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e39d,var(--gold));
  display:grid;place-items:center;
  box-shadow:0 10px 20px -6px rgba(220,179,77,.55);
}
.ccard__ico svg{width:44%;fill:var(--navy)}
.ccard h3{font-size:16px;font-weight:600;color:var(--navy);margin-bottom:8px}
.ccard p{font-size:14px;font-weight:400;line-height:1.6;color:#4d5a70}
.ccard a{color:inherit;text-decoration:none;transition:color .18s}
.ccard a:hover{color:var(--gold-ink)}
.ccard small{display:block;margin-top:8px;font-size:11.5px;font-weight:400;letter-spacing:.04em;color:#a7b1c2}

.contact__main{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(14px,1.8vw,24px);
  align-items:start;
}
.cform{
  background:#fff;
  border:1px solid #e7ebf2;border-radius:18px;
  padding:clamp(22px,2.6vw,34px);
}
.cform h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;color:var(--navy)}
.cform__sub{margin:8px 0 22px;font-size:13.5px;font-weight:300;line-height:1.65;color:var(--muted)}
.cform__row{display:grid;grid-template-columns:1fr;gap:14px}
.cform label{
  display:block;
  font-size:12px;font-weight:600;color:var(--navy);
  margin-bottom:14px;
}
.cform input,.cform select,.cform textarea{
  display:block;width:100%;
  margin-top:6px;
  font:inherit;font-size:14px;font-weight:400;color:var(--ink);
  background:#fbfcfe;
  border:1px solid #dde3ec;border-radius:10px;
  padding:12px 14px;
  transition:border-color .18s,box-shadow .18s;
}
.cform textarea{resize:vertical;min-height:110px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(220,179,77,.18);
}
.cform ::placeholder{color:#a7b1c2}
.cform .btn{margin-top:4px}

.hours{
  position:relative;
  background:var(--navy);
  border-radius:18px;
  padding:clamp(22px,2.6vw,32px);
  overflow:hidden;
}
.hours::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/doodles.1ce69a2a9463.svg") repeat;
  background-size:150px 150px;
  opacity:.4;
}
.hours > *{position:relative}
.hours h3{
  font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding-bottom:12px;margin-bottom:6px;
}
.hours ul{list-style:none}
.hours li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:12px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;
}
.hours li span{font-weight:300;color:#b9c5da}
.hours li b{font-weight:600;color:#fff;white-space:nowrap}
.hours__note{
  margin-top:16px;
  font-size:12.5px;font-weight:300;line-height:1.6;color:#93a4c2;
}

/* --- stats banner --- */
.stats{
  position:relative;
  background:var(--navy);
  padding-block:clamp(36px,4.5vw,58px);
  overflow:hidden;
}
.stats::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/doodles.1ce69a2a9463.svg") repeat;
  background-size:150px 150px;
  opacity:.5;
}
.stats__grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,3vw,20px);
}
.stat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.stat-card__ico{color:var(--gold)}
.stat-card__ico svg{width:clamp(24px,2.2vw,30px);fill:currentColor;margin-bottom:2px}
.stat-card__num{
  font-size:clamp(28px,3.3vw,44px);font-weight:800;line-height:1;
  letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.stat-card p{
  font-size:clamp(10px,1vw,12px);font-weight:400;line-height:1.3;
  letter-spacing:.14em;text-transform:uppercase;color:#93a4c2;
}

/* --- testimonials --- */
.quotes{background:#f5f7fb}
.quotes__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,1.8vw,24px);
}
.quote{
  position:relative;
  background:#fff;border-radius:18px;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px);
  box-shadow:0 14px 30px -18px rgba(12,30,66,.25);
}
.quote__mark{
  display:block;
  font-family:'Dancing Script',cursive;
  font-size:56px;line-height:.55;
  color:var(--gold-deep);
  margin-bottom:14px;
}
.quote blockquote{
  font-size:14.5px;font-weight:300;line-height:1.75;color:#4d5a70;
}
.quote__who{display:flex;align-items:center;gap:12px;margin-top:20px}
.quote__avatar{
  width:44px;aspect-ratio:1;flex:none;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e39d,var(--gold-deep));
  display:grid;place-items:center;
  font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.02em;
}
.quote__who b{display:block;font-size:15px;font-weight:600;color:var(--navy);line-height:1.2}
.quote__who small{display:block;font-size:12.5px;font-weight:300;color:var(--muted);margin-top:2px}

/* --- next step / QR banner --- */
.next-step{padding-top:0}
.next{
  position:relative;
  background:var(--navy);
  border-radius:26px;
  padding:clamp(30px,4vw,52px) clamp(24px,4vw,56px);
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
  gap:clamp(24px,3vw,36px);
  text-align:center;
  box-shadow:0 30px 60px -24px rgba(12,30,66,.55);
  overflow:hidden;
}
.next::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/doodles.1ce69a2a9463.svg") repeat;
  background-size:150px 150px;
  opacity:.45;
}
.next > *{position:relative}
.next__qr{
  background:#fff;border-radius:16px;
  padding:14px 14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:0 16px 30px rgba(6,14,30,.4);
}
.next__qr img{width:clamp(108px,10vw,132px);height:auto}
.next__scan{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy);
}
.next__copy h2{
  font-size:clamp(21px,2.5vw,32px);font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;color:#fff;
  margin-bottom:10px;
}
.next__copy p{font-size:clamp(14px,1.15vw,16px);font-weight:300;line-height:1.7;color:#b9c5da}
.next__copy b{color:var(--gold);font-weight:700}
.next__cursive{
  font-family:'Dancing Script',cursive;
  font-size:clamp(26px,2.8vw,38px);font-weight:700;line-height:1.25;
  color:var(--gold);
}

/* --- footer --- */
.footer{background:#0a1932;color:#fff}
.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,4vw,48px);
  padding-block:clamp(44px,6vw,72px) clamp(30px,4vw,48px);
}
.footer__logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.footer__word{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}
.footer__word small{
  display:block;margin-top:5px;
  font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);
}
.footer__word .footer__word-sub{
  margin-top:4px;
  font-size:8px;letter-spacing:.24em;color:rgba(255,255,255,.55);
}
.footer__desc{
  margin-top:18px;
  max-width:30ch;
  font-size:14px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.66);
}
.footer__title{
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;
  padding-bottom:10px;margin-bottom:18px;
  position:relative;
}
.footer__title::after{
  content:"";position:absolute;left:0;bottom:0;
  width:30px;height:2.5px;border-radius:2px;background:var(--gold);
}
.footer__list{list-style:none}
.footer__list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.72);
  margin-bottom:14px;
}
.footer__list i{font-style:normal;color:rgba(255,255,255,.45)}
.footer__list svg{width:16px;flex:none;margin-top:3px;fill:var(--gold)}
.footer__list a{color:inherit;text-decoration:none;transition:color .18s}
.footer__list a:hover{color:#fff}
.footer__social{display:flex;gap:10px}
.footer__social a{
  width:38px;aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:50%;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.22);
  color:#dfe6f1;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s;
}
.footer__social a:hover{
  background:var(--gold);color:var(--navy);
  box-shadow:none;transform:translateY(-2px);
}
.footer__social svg{width:17px;fill:currentColor}
.footer__handle{margin-top:14px;font-size:13px;font-weight:300;color:rgba(255,255,255,.55)}
.footer__bottom{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:20px;
  font-size:12.5px;font-weight:300;color:rgba(255,255,255,.5);
}
.footer__legal a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .18s}
.footer__legal a:hover{color:#fff}

/* --- scroll reveal (armed by script.js; without JS everything stays visible) --- */
.js-reveal .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
  transition-delay:var(--rv,0ms);
}
.js-reveal .reveal.is-in{opacity:1;transform:none}

/* --- sections at >=640px --- */
@media (min-width:640px){
  .stats__grid{grid-template-columns:repeat(4,1fr)}
  .quotes__grid{grid-template-columns:repeat(3,1fr)}
  .dests__grid{grid-template-columns:repeat(2,1fr)}
  .contact__cards{grid-template-columns:repeat(3,1fr)}
  .cform__row{grid-template-columns:1fr 1fr;gap:14px}
}

/* --- sections at >=900px --- */
@media (min-width:900px){
  .about__values{grid-template-columns:repeat(3,1fr)}
  .dests__grid{grid-template-columns:repeat(3,1fr)}
  .contact__main{grid-template-columns:1.45fr 1fr}
  .next{
    grid-template-columns:auto 1fr auto;
    justify-items:start;
    text-align:left;
  }
  .next__cursive{text-align:right}
  .footer__grid{grid-template-columns:1.25fr 1.2fr .8fr;gap:clamp(36px,5vw,80px)}
  .footer__bottom{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   App layer — dashboards, booking flow, tables, forms, status pills.
   Shares the brand tokens defined at the top of this sheet.
   ========================================================================== */

/* ---------- server messages ---------- */
.msgs{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:80;display:flex;flex-direction:column;gap:8px;width:min(560px,calc(100vw - 32px))}
.msg{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--navy);color:#fff;font-size:13.5px;line-height:1.45;padding:13px 18px;border-radius:14px;box-shadow:0 16px 34px rgba(6,14,30,.45);transition:opacity .4s,transform .4s}
.msg.is-out{opacity:0;transform:translateY(10px)}
.msg--success{background:#0e5c3f}
.msg--error{background:#7c2430}
.msg--warning{background:#7a5b16}
.msg__close{flex:none;color:rgba(255,255,255,.7);font-size:17px;line-height:1;padding:2px 4px;border-radius:6px}
.msg__close:hover{color:#fff}

/* ---------- dashboard shell ---------- */
.dash{padding-block:clamp(18px,2.6vw,36px) clamp(48px,6vw,84px);min-height:60svh}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,28px)}
.dash-head__eyebrow{font-family:'Dancing Script',cursive;font-size:clamp(17px,1.8vw,22px);font-weight:700;line-height:1;color:var(--gold-ink);margin-bottom:6px}
.dash-head h1{font-size:clamp(21px,2.4vw,30px);font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.15}
.dash-head__sub{margin-top:6px;font-size:13px;font-weight:300;color:var(--muted)}
.dash-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.dash-nav{display:flex;gap:6px;flex-wrap:wrap;background:#eef2f8;border-radius:40px;padding:5px;width:max-content;max-width:100%;margin-bottom:clamp(18px,2.4vw,28px)}
.dash-nav a{display:inline-flex;align-items:center;padding:9px 18px;border-radius:40px;font-size:13px;font-weight:500;color:#6f7d92;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.dash-nav a:hover{color:var(--ink)}
.dash-nav a.is-on{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(12,30,66,.3)}

/* ---------- stat tiles ---------- */
.dtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px);margin-bottom:clamp(18px,2.4vw,28px)}
@media (min-width:760px){.dtiles{grid-template-columns:repeat(4,1fr)}}
.dtile{background:#fff;border:1px solid #e7ebf2;border-radius:16px;padding:clamp(16px,1.8vw,22px)}
.dtile__label{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a7b1c2}
.dtile__num{display:block;margin-top:8px;font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.dtile--gold{background:var(--navy);border-color:var(--navy)}
.dtile--gold .dtile__label{color:#93a4c2}
.dtile--gold .dtile__num{color:var(--gold)}

/* ---------- cards ---------- */
.dcard{background:#fff;border:1px solid #e7ebf2;border-radius:18px;padding:clamp(18px,2.2vw,28px);margin-bottom:clamp(14px,1.8vw,22px)}
.dcard__title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:14px}
.dcard__title small{font-size:12px;font-weight:400;color:var(--muted)}
.dcard--navy{position:relative;background:var(--navy);border-color:var(--navy);overflow:hidden;isolation:isolate}
.dcard--navy::before{content:"";position:absolute;inset:0;background:url("../assets/doodles.1ce69a2a9463.svg") repeat;background-size:150px 150px;opacity:.4;z-index:-1}
.dcard--navy,.dcard--navy .dcard__title{color:#fff}

/* next appointment hero card */
.nextapt{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.nextapt__when{font-size:clamp(19px,2vw,26px);font-weight:800;color:#fff;letter-spacing:-.01em}
.nextapt__svc{margin-top:6px;font-size:13.5px;font-weight:300;color:#b9c5da}
.nextapt__svc b{color:var(--gold);font-weight:600}

/* ==========================================================================
   Premium dashboard layer — gradient hero, icon stat cards, motion, progress
   ========================================================================== */

/* top navigation progress bar (see smooth-nav module in site.js) */
.pgbar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  box-shadow:0 0 12px rgba(220,179,77,.7);
  transition:width .18s ease;
}
.pgbar.is-on{opacity:1}
.pgbar.is-done{opacity:0;transition:width .2s ease,opacity .3s ease .12s}

/* gradient welcome banner */
.dhero{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:22px;
  padding:clamp(22px,3vw,34px) clamp(20px,3vw,38px);
  margin-bottom:clamp(14px,1.8vw,22px);
  background:
    radial-gradient(120% 150% at 100% 0%, #17356b 0%, rgba(23,53,107,0) 55%),
    linear-gradient(135deg,#0c1e42 0%,#13294e 58%,#0c1e42 100%);
  color:#fff;
  box-shadow:0 26px 50px -22px rgba(12,30,66,.6);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.dhero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("../assets/doodles.1ce69a2a9463.svg") repeat;background-size:150px 150px;opacity:.15;
}
.dhero::after{
  content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(220,179,77,.32), transparent 70%);
}
.dhero__eyebrow{font-family:'Dancing Script',cursive;font-size:clamp(18px,2vw,24px);font-weight:700;color:var(--gold);line-height:1;margin-bottom:8px}
.dhero__title{font-size:clamp(23px,2.8vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.dhero__sub{margin-top:9px;font-size:clamp(13px,1.15vw,14.5px);font-weight:300;color:#b9c5da;max-width:54ch;line-height:1.6}
.dhero__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ghost button on the navy hero needs light strokes to be visible */
.dhero .btn--ghost{color:#fff;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.dhero .btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}

/* icon stat cards (dstats — distinct from the marketing .stats banner) */
.dstats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(16px,2vw,24px)}
@media (min-width:760px){.dstats{grid-template-columns:repeat(4,1fr)}}
.stat{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid #e7ebf2;border-radius:18px;
  padding:clamp(15px,1.8vw,20px);min-height:132px;
  text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(12,30,66,.04);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
a.stat:hover{transform:translateY(-3px);box-shadow:0 20px 36px -20px rgba(12,30,66,.4);border-color:#dbe2ee}
.stat__ico{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:#eef2f8;color:var(--navy)}
.stat__ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stat__num{font-size:clamp(25px,2.6vw,33px);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.stat__num--sm{font-size:clamp(15px,1.5vw,19px);line-height:1.25}
.stat__label{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#a7b1c2}
.stat__hint{margin-top:auto;font-size:12px;font-weight:600;color:var(--gold-ink)}
.stat__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* highlighted (navy) stat — for "attention" tiles */
.stat--navy{background:linear-gradient(150deg,#13294e,#0c1e42);border-color:transparent;color:#fff}
.stat--navy .stat__ico{background:rgba(255,255,255,.12);color:var(--gold)}
.stat--navy .stat__num{color:#fff}
.stat--navy .stat__label{color:#93a4c2}
.stat--navy .stat__hint{color:var(--gold)}
.stat--navy::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(220,179,77,.28),transparent 70%)}

/* dashboard-scoped card depth (kept off other app pages) */
.dash .dcard{box-shadow:0 1px 2px rgba(12,30,66,.04),0 18px 34px -26px rgba(12,30,66,.22)}

/* subtle staggered entrance for dashboard content */
@keyframes dfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .dash > .container > *{animation:dfade .55s cubic-bezier(.22,.61,.36,1) both}
  .dash > .container > *:nth-child(1){animation-delay:.02s}
  .dash > .container > *:nth-child(2){animation-delay:.09s}
  .dash > .container > *:nth-child(3){animation-delay:.16s}
  .dash > .container > *:nth-child(4){animation-delay:.22s}
  .dash > .container > *:nth-child(n+5){animation-delay:.27s}
}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:20px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--pending{background:#faf3df;color:#8a6a1c}
.pill--confirmed{background:#e3f4ec;color:#136c46}
.pill--reschedule{background:#e6eefb;color:#2b5cad}
.pill--cancelled{background:#eef0f4;color:#5b6b85}
.pill--rejected{background:#fbe7ea;color:#a12639}
.pill--completed{background:#e8ecf6;color:#0c1e42}
.pill--noshow{background:#f4e9e9;color:#7c4a4a}

/* ---------- tables ---------- */
.dtable-wrap{overflow-x:auto;border:1px solid #e7ebf2;border-radius:16px;background:#fff}
.dtable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.dtable th{background:#f5f7fb;color:#6f7d92;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:12px 16px;white-space:nowrap}
.dtable td{padding:13px 16px;border-top:1px solid #eef1f6;color:#3c4a61;vertical-align:middle}
.dtable td b{color:var(--navy);font-weight:600}
.dtable tr:hover td{background:#fbfcfe}
.dtable .ref{font-weight:600;color:var(--navy);text-decoration:none}
.dtable .ref:hover{color:var(--gold-ink)}

/* booking list cards (mobile-friendly alternative) */
.bk-list{display:grid;gap:12px}
.bk{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #e7ebf2;border-radius:16px;padding:16px 18px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.bk:hover{border-color:#ecd9a6;box-shadow:0 14px 28px -14px rgba(12,30,66,.22);transform:translateY(-2px)}
.bk__main b{display:block;font-size:14.5px;font-weight:600;color:var(--navy)}
.bk__main small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.bk__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bk__when{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
.bk__when small{display:block;font-weight:400;color:var(--muted);margin-top:2px}

/* ---------- buttons ---------- */
.btn--sm{font-size:13px;padding:11px 18px}
.btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--hair)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #c3ccd9;background:#f7f9fc}
.btn--danger{background:#fbe7ea;color:#a12639}
.btn--danger:hover{background:#f7d7dc}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(12,30,66,.3)}
.btn--navy:hover{filter:brightness(1.25)}

/* ---------- forms ---------- */
.fld{display:block;font-size:12px;font-weight:600;color:var(--navy);margin-bottom:14px}
.fld input,.fld select,.fld textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:14px;font-weight:400;color:var(--ink);background:#fbfcfe;border:1px solid #dde3ec;border-radius:11px;padding:12px 14px;transition:border-color .18s,box-shadow .18s}

/* On phones any form control under 16px makes iOS Safari auto-zoom the page
   on focus. Bump the contact and booking fields to 16px on small screens;
   desktop (which never zooms) keeps the smaller design size. */
@media (max-width:640px){
  .cform input,.cform select,.cform textarea,
  .fld input,.fld select,.fld textarea{font-size:16px}
}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(220,179,77,.18)}
.fld ::placeholder{color:#a7b1c2;font-weight:300}
.fld--err input,.fld--err select,.fld--err textarea{border-color:#d4677a}
.fld__err{margin-top:5px;font-size:12px;color:#a12639}
.fld__help{margin-top:5px;font-size:12px;font-weight:400;color:#a7b1c2}
.frow{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:640px){.frow{grid-template-columns:1fr 1fr}}

/* ---------- slot picker ---------- */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:10px}
.slot{padding:11px 6px;border-radius:10px;text-align:center;font-size:13px;font-weight:600;color:var(--navy);background:#f5f7fb;border:1px solid #e3e8f1;cursor:pointer;user-select:none;transition:transform .16s,border-color .18s,background .18s,box-shadow .18s}
.slot:hover:not(.is-off){border-color:var(--gold-deep);background:#fff;transform:translateY(-2px);box-shadow:0 8px 16px -6px rgba(220,179,77,.4)}
.slot.is-picked{background:var(--gold);border-color:var(--gold);box-shadow:0 8px 18px -6px rgba(220,179,77,.6)}
.slot.is-off{background:#eef0f4;border-color:#e5e8ee;color:#adb6c4;cursor:not-allowed;text-decoration:line-through;opacity:.75}
.slots__note{grid-column:1/-1;font-size:13px;color:var(--muted)}

/* ---------- key/value detail rows ---------- */
.kv{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:640px){.kv{grid-template-columns:1fr 1fr}}
.kv > div{padding:11px 0;border-bottom:1px solid #eef1f6}
.kv dt{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#a7b1c2}
.kv dd{margin-top:4px;font-size:14px;font-weight:500;color:var(--navy)}
.kv dd.soft{font-weight:300;color:#3c4a61;line-height:1.6}

/* ---------- timeline (audit log) ---------- */
.tl{list-style:none;position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:#e3e8f1}
.tl li{position:relative;padding-bottom:16px}
.tl li::before{content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--gold-deep)}
.tl b{display:block;font-size:13.5px;font-weight:600;color:var(--navy)}
.tl small{display:block;margin-top:2px;font-size:12px;color:var(--muted);line-height:1.5}
.tl time{font-size:11px;color:#a7b1c2}

/* ---------- filters row ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters .fld{margin-bottom:0;flex:1;min-width:150px}
.filters .btn{flex:none}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:clamp(28px,4vw,52px) 20px;color:var(--muted)}
.empty svg{width:44px;margin:0 auto 12px;color:#c9d2e0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.empty b{display:block;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px}
.empty p{font-size:13px;font-weight:300}

/* ---------- two-column detail layout ---------- */
.dgrid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,22px);align-items:start}
@media (min-width:900px){.dgrid{grid-template-columns:1.5fr 1fr}}

/* proposed reschedule highlight */
.proposal{background:#e6eefb;border:1px solid #c8d9f4;border-radius:14px;padding:16px 18px;margin-bottom:16px}
.proposal b{color:#2b5cad}
.proposal p{font-size:13.5px;color:#3c4a61;margin-top:4px}
.proposal__actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* header auth logout inline form */
.nav .logout-form{display:contents}

/* service card booking link */
.svc__book{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--gold-ink);text-decoration:none;transition:color .18s}
.svc__book svg{width:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.svc__book:hover{color:var(--navy)}
.svc__book:hover svg{transform:translateX(3px)}

/* ---------- dashboard UX helpers ---------- */
/* clickable stat tiles */
a.dtile{display:block;text-decoration:none;transition:transform .18s,border-color .2s,box-shadow .2s}
a.dtile:hover{transform:translateY(-3px);border-color:#ecd9a6;box-shadow:0 16px 30px -16px rgba(12,30,66,.25)}
a.dtile .dtile__hint{display:block;margin-top:8px;font-size:11px;font-weight:500;color:var(--gold-ink)}

/* logout pill inside the dash nav, pushed to the far end */
.dash-nav__logout{display:flex;margin-left:auto}
.dash-nav__logout button{
  display:inline-flex;align-items:center;padding:9px 18px;border-radius:40px;
  font-size:13px;font-weight:500;color:#a12639;white-space:nowrap;
  transition:background .2s;
}
.dash-nav__logout button:hover{background:#fbe7ea}

/* count chips inside nav tabs */
.dash-nav .cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;margin-left:7px;
  border-radius:20px;background:#dfe6f0;color:#4d5f7d;
  font-size:10.5px;font-weight:600;line-height:1;
}
.dash-nav a.is-on .cnt{background:rgba(255,255,255,.18);color:#fff}

/* inline quick action forms inside tables */
.rowact{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.rowact form{display:contents}

/* logout lives in the header menu as a plain nav link (works in the mobile sheet too) */
.menu__logout{display:contents}
.menu__logout .link{border:0;background:none}

/* ---------- testimonials pager ---------- */
.quotes__grid{transition:opacity .16s ease}
.quotes__grid.is-swap{opacity:0}
.quotes__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(20px,2.6vw,32px)}
.qnav{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--navy);
  padding:10px 20px;border-radius:40px;
  background:#fff;border:1px solid #e7ebf2;
  transition:border-color .2s,box-shadow .2s,transform .16s;
}
.qnav:hover{border-color:#ecd9a6;box-shadow:0 10px 20px -10px rgba(12,30,66,.25);transform:translateY(-2px)}
.qnav svg{width:7px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qpage{min-width:44px;text-align:center;font-size:12.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}

/* ==========================================================================
   Dashboard app shell — clean sidebar + topbar layout (customer & admin)
   Compact, minimal workspace: fixed left navigation, a light content canvas,
   and an off-canvas drawer on mobile toggled from the topbar hamburger.
   All classes here are namespaced (side/topbar/pcard/mstat…) so they never
   collide with the marketing-site components above.
   ========================================================================== */
:root{
  --side-w:248px;
  --canvas:#f6f8fb;      /* content background */
  --line:#e9edf4;        /* hairline borders */
  --ink-soft:#5b6b85;    /* secondary nav/label text */
  --rad:16px;
}

body.dash-mode{background:var(--canvas)}

.app{display:flex;min-height:100svh;align-items:stretch}

/* ---------- sidebar ---------- */
.side{
  position:fixed;inset:0 auto 0 0;z-index:60;
  width:var(--side-w);flex:none;
  display:flex;flex-direction:column;
  background:#fff;border-right:1px solid var(--line);
  padding:18px 14px;
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.side__brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;text-decoration:none;color:var(--ink)}
.side__brand img{width:34px;height:34px;flex:none;border-radius:50%;box-shadow:0 5px 14px rgba(12,30,66,.22)}
.side__brand .w{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1}
.side__brand .w b{color:var(--gold-deep);font-weight:700}
.side__brand .s{display:block;margin-top:3px;font-size:7px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

.snav{display:flex;flex-direction:column;gap:2px}
.snav__cap{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#aeb8c8;padding:12px 12px 5px}
.snav a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:11px;
  font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  transition:background .18s,color .18s;
}
.snav a svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.snav a:hover{background:#f3f6fb;color:var(--navy)}
.snav a.is-on{background:#fbf3de;color:var(--navy);font-weight:600}
.snav a.is-on svg{color:var(--gold-deep)}
.snav .cnt{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;border-radius:20px;background:#eef2f8;color:#4d5f7d;font-size:10.5px;font-weight:700;line-height:1}
.snav a.is-on .cnt{background:var(--gold);color:var(--navy)}

.side__foot{margin-top:auto;padding-top:14px}
.side__help{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#f6f8fc;text-decoration:none;transition:background .18s}
.side__help:hover{background:#eef3fa}
.side__help svg{width:22px;height:22px;flex:none;color:var(--gold-deep);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side__help b{display:block;font-size:12.5px;font-weight:600;color:var(--navy)}
.side__help small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.side__logout{margin-top:6px}
.side__logout button,.side__logout a{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:11px;
  font-size:13.5px;font-weight:500;color:#a12639;text-decoration:none;
  transition:background .18s;
}
.side__logout button svg,.side__logout a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side__logout button:hover,.side__logout a:hover{background:#fbe7ea}

.side-scrim{position:fixed;inset:0;z-index:55;background:rgba(6,14,30,.5);opacity:0;transition:opacity .3s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.side-scrim.is-on{opacity:1}

/* ---------- main column ---------- */
.app__main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  padding:12px clamp(14px,2.4vw,30px);
  background:rgba(246,248,251,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.topbar__brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.topbar__brand img{width:30px;height:30px;border-radius:50%}
.topbar__brand span{font-size:17px;font-weight:700;letter-spacing:-.03em}
.topbar__brand b{color:var(--gold-deep)}
.topbar__spacer{flex:1}
.topbar__right{display:flex;align-items:center;gap:8px}

.hbtn{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--navy);
  transition:background .18s;
}
.hbtn:hover{background:#f3f6fb}
.hbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.bell{position:relative}

.acct{position:relative}
.acct__btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:40px;background:#fff;border:1px solid var(--line);transition:background .18s}
.acct__btn:hover{background:#f7f9fc}
.acct__ava{width:31px;height:31px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase}
.acct__name{font-size:13.5px;font-weight:600;color:var(--navy);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__cr{width:14px;height:14px;fill:none;stroke:#8593a8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.acct.is-open .acct__cr{transform:rotate(180deg)}
.acct__menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;
  min-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:7px;box-shadow:0 20px 44px -16px rgba(12,30,66,.32);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;
}
.acct.is-open .acct__menu{opacity:1;visibility:visible;transform:none}
.acct__head{padding:8px 11px 11px;border-bottom:1px solid var(--line);margin-bottom:5px}
.acct__head b{display:block;font-size:13.5px;font-weight:600;color:var(--navy)}
.acct__head small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.acct__menu a,.acct__menu button{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:10px 11px;border-radius:10px;font-size:13.5px;font-weight:500;
  color:var(--ink-soft);text-decoration:none;text-align:left;transition:background .16s,color .16s;
}
.acct__menu a svg,.acct__menu button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acct__menu a:hover,.acct__menu button:hover{background:#f3f6fb;color:var(--navy)}
.acct__menu .is-danger{color:#a12639}
.acct__menu .is-danger:hover{background:#fbe7ea;color:#a12639}

/* ---------- content canvas ---------- */
.app__content{flex:1;width:100%;max-width:1120px;margin-inline:auto;padding:clamp(14px,1.6vw,22px) clamp(14px,2.4vw,30px) 34px}
.app__foot{padding:14px 30px 26px;text-align:center;font-size:12px;color:#9aa6b8}
.app__foot span{display:inline-flex;align-items:center;gap:6px}
.app__foot svg{opacity:.7}

@media (prefers-reduced-motion:no-preference){
  .app__content > *{animation:dfade .45s cubic-bezier(.22,.61,.36,1) both}
  .app__content > *:nth-child(1){animation-delay:.02s}
  .app__content > *:nth-child(2){animation-delay:.07s}
  .app__content > *:nth-child(3){animation-delay:.12s}
  .app__content > *:nth-child(4){animation-delay:.17s}
  .app__content > *:nth-child(n+5){animation-delay:.2s}
}

/* ---------- page header (welcome hero) ---------- */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,22px)}
.pagehead__eyebrow{font-size:13px;font-weight:400;color:var(--muted);margin-bottom:3px}
.pagehead__title{font-size:clamp(21px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.14}
.pagehead__sub{margin-top:6px;font-size:13.5px;font-weight:300;color:var(--muted);max-width:58ch;line-height:1.55}
.pagehead__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* pagehead action buttons: consistent sleek height across desktop & mobile */
.pagehead__actions .btn{height:42px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center}
.btn--arrow svg{width:15px;height:15px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.btn--arrow:hover svg{transform:translateX(3px)}
/* icon + label buttons */
.btn--ico{display:inline-flex;align-items:center;gap:8px}
.btn--ico svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- reference-style stat cards ---------- */
.mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:clamp(14px,1.8vw,20px)}
/* on phones the 3 customer tiles stay side-by-side but go compact/stacked */
@media (max-width:560px){
  .mstats{gap:8px}
  .mstats:not(.mstats--4) .mstat{flex-direction:column;align-items:flex-start;gap:9px;padding:12px 11px}
  .mstats:not(.mstats--4) .mstat__ico{width:32px;height:32px}
  .mstats:not(.mstats--4) .mstat__ico svg{width:16px;height:16px}
  .mstats:not(.mstats--4) .mstat__num{font-size:19px}
  .mstats:not(.mstats--4) .mstat__label{font-size:10.5px}
}
.mstats--4{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.mstats--4{grid-template-columns:repeat(4,1fr)}}
.mstat{
  display:flex;align-items:center;gap:13px;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:16px;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(12,30,66,.03),0 16px 28px -26px rgba(12,30,66,.2);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
a.mstat:hover{transform:translateY(-2px);border-color:#dbe3ef;box-shadow:0 18px 34px -22px rgba(12,30,66,.32)}
.mstat__ico{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fbf1d8;color:var(--gold-deep)}
.mstat__ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mstat__ico--navy{background:#e9eefa;color:var(--navy)}
.mstat__ico--green{background:#e4f4ec;color:#1b7a52}
.mstat__b{display:flex;flex-direction:column;min-width:0}
.mstat__num{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.05;font-variant-numeric:tabular-nums}
.mstat__label{margin-top:3px;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.25}
.mstats--4 .mstat{padding:14px}
.mstats--4 .mstat__ico{width:42px;height:42px}
.mstats--4 .mstat__ico svg{width:19px;height:19px}

/* ---------- soft two-column dashboard grid ---------- */
.dcols{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:880px){.dcols{grid-template-columns:1fr 1fr}}

/* panel card (namespaced — does NOT reuse the marketing .card) */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(16px,1.5vw,20px);box-shadow:0 1px 2px rgba(12,30,66,.03),0 16px 28px -26px rgba(12,30,66,.16)}
.pcard + .pcard{margin-top:16px}
.pcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pcard__title{font-size:15px;font-weight:700;color:var(--navy)}
.pcard__link{font-size:12.5px;font-weight:600;color:var(--gold-ink);text-decoration:none;white-space:nowrap}
.pcard__link:hover{text-decoration:underline}

/* popular services list */
.slist{display:flex;flex-direction:column}
.srow{display:flex;align-items:center;gap:13px;padding:13px 2px;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:background .16s}
.srow:first-child{border-top:0}
.srow:hover{background:#fafbfe}
.srow__ico{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:#eef2f8;color:var(--navy)}
.srow__ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.srow__main{flex:1;min-width:0}
.srow__main b{display:block;font-size:14px;font-weight:600;color:var(--navy)}
.srow__main p{margin-top:2px;font-size:12px;font-weight:300;color:var(--muted);line-height:1.45}
.srow__go{width:17px;height:17px;flex:none;fill:none;stroke:#b6c0d0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcard__cta{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;padding:12px;border-radius:12px;background:#fbf3de;color:var(--gold-ink);font-size:13.5px;font-weight:600;text-decoration:none;transition:background .18s}
.pcard__cta:hover{background:#f7ecc9}

/* big centered empty state inside a card */
.emptybox{text-align:center;padding:clamp(20px,2.6vw,32px) 12px}
.emptybox__ico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#f0f3f8;color:#9fb0c8}
.emptybox__ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.emptybox b{display:block;font-size:15px;font-weight:700;color:var(--navy)}
.emptybox p{margin-top:5px;font-size:13px;font-weight:300;color:var(--muted)}
.emptybox .btn{margin-top:16px}

/* highlighted next-appointment card */
.nextcard{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,#13294e,#0c1e42);border:0;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.nextcard::before{content:"";position:absolute;inset:0;background:url("../assets/doodles.1ce69a2a9463.svg") repeat;background-size:140px 140px;opacity:.35;z-index:-1}
.nextcard__label{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#93a4c2}
.nextcard__when{margin-top:5px;font-size:clamp(18px,1.8vw,22px);font-weight:800;letter-spacing:-.01em}
.nextcard__svc{margin-top:4px;font-size:13px;font-weight:300;color:#b9c5da}
.nextcard__svc b{color:var(--gold);font-weight:600}

/* mini booking row list */
.rowlist{display:flex;flex-direction:column;gap:10px}

/* filter/search bar on the light canvas */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(12,30,66,.03)}
.toolbar .fld{margin-bottom:0;flex:1;min-width:150px}
.toolbar .btn{flex:none}

/* segmented tab filter */
.segtabs{display:flex;gap:5px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:40px;padding:4px;width:max-content;max-width:100%;margin-bottom:18px;box-shadow:0 1px 2px rgba(12,30,66,.03)}
.segtabs a{display:inline-flex;align-items:center;padding:8px 15px;border-radius:40px;font-size:12.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.segtabs a:hover{color:var(--navy)}
.segtabs a.is-on{background:var(--navy);color:#fff}
.segtabs a .cnt{margin-left:7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:20px;background:#eef2f8;color:#4d5f7d;font-size:10px;font-weight:700;line-height:1}
.segtabs a.is-on .cnt{background:rgba(255,255,255,.2);color:#fff}

/* weekly-hours editor — compact checkbox rows */
.hours{display:flex;flex-direction:column;gap:6px}
.hours__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.hours__row.is-closed{background:#f7f9fc}
.hours__day{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;margin:0}
.hours__day input{width:17px;height:17px;flex:none;accent-color:var(--gold-deep);cursor:pointer}
.hours__row.is-closed .hours__day span{color:var(--muted)}
.hours__times{display:flex;align-items:center;gap:8px}
.hours__times input[type=time]{width:auto;margin-top:0;font-size:13.5px;padding:6px 9px;border:1px solid #dde3ec;border-radius:8px;background:#fbfcfe;color:var(--ink);font-variant-numeric:tabular-nums}
.hours__times input[type=time]:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(220,179,77,.18)}
.hours__to{font-size:12px;color:var(--muted)}
.hours__row.is-closed .hours__times{opacity:.5}
@media (max-width:560px){.hours__row{align-items:flex-start}.hours__times input[type=time]{font-size:16px}}

/* dashboard-scoped tweaks to shared components so nothing feels oversized */
.app__content .dcard{border-radius:var(--rad);padding:clamp(16px,1.6vw,20px)}
.app__content .dgrid{gap:16px}
.app__content .bk{border-radius:12px;padding:13px 15px}

/* ---------- responsive: desktop shows fixed sidebar ---------- */
@media (min-width:1000px){
  .side{position:sticky;top:0;height:100svh;transform:none}
  .hbtn--burger{display:none}
  .topbar__brand{display:none}
  .side-scrim{display:none}
}
@media (max-width:999px){
  .side.is-open{transform:none;box-shadow:0 24px 60px rgba(6,14,30,.3)}
  html.side-lock,html.side-lock body{overflow:hidden}
}
/* keep the topbar from overflowing narrow phones (which would stretch the whole
   content column and clip everything on the right) */
@media (max-width:600px){
  .topbar__brand{display:none}
  .acct__name{display:none}
  .acct__btn{padding:5px}
  .pagehead__actions{width:100%;gap:8px}
  /* share the row evenly: one button fills the width, two split it side-by-side */
  .pagehead__actions .btn{flex:1 1 0;min-width:0;padding-inline:10px;font-size:12.5px}
}