/* ============================================================
   The HandyDreamTeam — styles v2 (mobile-first, flat, touch)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-extra);line-height:var(--lh-tight);letter-spacing:-0.02em;color:var(--ink)}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);font-weight:var(--fw-bold)}
p{margin:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--surface-2)}
.section--dark{background:var(--ink);color:#fff}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.eyebrow{display:inline-block;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--orange);text-transform:uppercase;margin-bottom:var(--s-3)}
.lead{font-size:var(--fs-lg);color:var(--fg-2);line-height:var(--lh-body)}
.sec-head{margin-bottom:var(--s-6)}
.sec-head h2{margin-bottom:var(--s-2)}
.sec-head p{color:var(--fg-muted)}

/* ---- Buttons (large, tap-friendly) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:52px;padding:14px 22px;border-radius:var(--r-md);border:2px solid transparent;
  font-weight:var(--fw-bold);font-size:var(--fs-base);letter-spacing:.01em;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;text-align:center;
}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.btn--primary{background:var(--primary);color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-hover)}
.btn--outline{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn--outline:hover{border-color:var(--ink)}
.btn--ghostdark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.btn--ghostdark:hover{background:rgba(255,255,255,.16)}
.btn--block{width:100%}
.btn--lg{min-height:58px;font-size:var(--fs-lg)}
.btn-row{display:flex;flex-direction:column;gap:var(--s-3)}

/* ============================================================ HEADER */
.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--cream) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:60px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-extra);font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--orange);color:#fff;display:grid;place-items:center;flex:none}
.brand .mark svg{width:18px;height:18px}
.brand b{color:var(--orange)}
.hdr-nav{display:none}
.hdr-actions{display:flex;align-items:center;gap:var(--s-2)}
.hdr .btn{min-height:42px;padding:9px 16px;font-size:var(--fs-sm)}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.menu-btn svg{width:22px;height:22px}

/* Drawer */
.drawer{position:fixed;inset:0;z-index:80;background:var(--cream);display:flex;flex-direction:column;padding:18px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom))}
.drawer[hidden]{display:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:60px;margin-bottom:var(--s-4)}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav a{font-size:22px;font-weight:var(--fw-bold);padding:14px 6px;border-bottom:1px solid var(--border)}
.drawer .btn{margin-top:var(--s-5)}
.drawer-social{display:flex;gap:var(--s-3);margin-top:auto;padding-top:var(--s-6)}
.drawer-social a{width:46px;height:46px;border:1px solid var(--line-strong);border-radius:12px;display:grid;place-items:center}
.drawer-social svg{width:22px;height:22px;color:var(--ink)}

/* ============================================================ HERO */
.hero{position:relative;padding-top:var(--s-7);padding-bottom:var(--s-8)}
.hero .wrap{position:relative;z-index:2}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-5)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 13px;font-size:13px;font-weight:var(--fw-semibold);color:var(--fg-2)}
.chip svg{width:15px;height:15px;color:var(--orange)}
.chip .star{color:var(--star)}
.hero h1{margin-bottom:var(--s-4)}
.hero h1 .u{color:var(--orange)}
.hero-sub{font-size:var(--fs-lg);color:var(--fg-2);margin-bottom:var(--s-3);max-width:34ch}
.hero-trust{font-size:var(--fs-sm);color:var(--fg-muted);margin-bottom:var(--s-6);display:flex;align-items:center;gap:7px}
.hero-trust svg{width:16px;height:16px;color:var(--orange);flex:none}
.hero-media{margin-top:var(--s-7);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3}
.hero-media img{width:100%;height:100%;object-fit:cover}

/* ============================================================ SERVICES */
.svc-grid{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
.svc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast)}
.svc:active{transform:scale(.99)}
.svc-ic{width:48px;height:48px;border-radius:12px;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center;margin-bottom:var(--s-4)}
.svc-ic svg{width:26px;height:26px}
.svc h3{margin-bottom:var(--s-2)}
.svc-ex{color:var(--fg-muted);font-size:var(--fs-sm);line-height:var(--lh-snug);margin-bottom:var(--s-4)}
.svc .booklink{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-bold);color:var(--orange);font-size:var(--fs-sm)}
.svc .booklink svg{width:16px;height:16px;transition:transform var(--t-fast)}
.svc:hover .booklink svg{transform:translateX(3px)}

/* ============================================================ FAST BOOK band */
.band{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s-6)}
.band h2{margin-bottom:var(--s-3)}
.band p{color:var(--fg-muted);margin-bottom:var(--s-5)}

/* ============================================================ REVIEWS */
.rate-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-bottom:var(--s-5)}
.rate{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);text-align:center}
.rate .score{font-size:26px;font-weight:var(--fw-extra);color:var(--ink);line-height:1}
.rate .stars{color:var(--star);font-size:14px;letter-spacing:1px;margin:4px 0}
.rate .src{font-size:13px;color:var(--fg-muted);font-weight:var(--fw-semibold)}
.rev-cards{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
.rev{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-5)}
.rev .stars{color:var(--star);font-size:13px;letter-spacing:1px;margin-bottom:var(--s-2)}
.rev p{font-size:var(--fs-base);color:var(--ink);line-height:var(--lh-snug);margin-bottom:var(--s-3)}
.rev .who{font-size:13px;color:var(--fg-muted)}
.rev .who b{color:var(--ink);font-weight:var(--fw-bold)}
.rev-links{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

/* ============================================================ GALLERY */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.gal figure{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1;background:var(--surface-2)}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 9px;font-size:12px;font-weight:var(--fw-bold);color:#fff;background:linear-gradient(transparent,rgba(20,24,31,.78))}
.gal-foot{margin-top:var(--s-5)}
.gfilter{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:var(--s-5);scrollbar-width:none}
.gfilter::-webkit-scrollbar{display:none}
.gfilter button{flex:none;min-height:42px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--fg-2);white-space:nowrap;transition:all var(--t-fast)}
.gfilter button.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
.gal figure[hidden]{display:none}

/* ============================================================ SERVICE AREA */
.area{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s-5) 0}
.area span,.area a{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 14px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg-2);transition:all var(--t-fast)}
.area a:hover{border-color:var(--orange);color:var(--orange)}

/* ============================================================ BOOK page */
.book-note{background:var(--surface-2);border:1px solid var(--orange-tint);border-radius:var(--r-lg);padding:var(--s-5);margin-bottom:var(--s-5)}
.book-note h3{margin-bottom:var(--s-3)}
.book-note ul{margin:0;padding-left:20px;color:var(--fg-2)}
.book-note li{margin-bottom:4px}
.cal-toggle{display:flex;gap:8px;margin-bottom:var(--s-3)}
.cal-toggle[hidden]{display:none}
.cal-tab{flex:1;min-height:48px;padding:10px;border:2px solid var(--line-strong);background:var(--surface);border-radius:var(--r-md);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--fg-muted);transition:all var(--t-fast)}
.cal-tab.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
.cal-inline{min-height:560px;border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.cal-inline[hidden]{display:none}
.cal-inline #cal-mount{min-height:560px}
.book-fallback{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-7);text-align:center}
.book-fallback h3{margin-bottom:var(--s-2)}
.book-fallback p{color:var(--fg-muted);margin-bottom:var(--s-4)}

/* ============================================================ STICKY BOTTOM BAR (mobile) */
.bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;gap:8px;align-items:stretch;
  padding:9px var(--gutter) calc(9px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--sh-bar);
}
.bottombar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:50px;border-radius:var(--r-md);font-weight:var(--fw-bold);font-size:12px;
  transition:transform var(--t-fast) var(--ease);-webkit-tap-highlight-color:transparent;
}
.bottombar a:active{transform:scale(.96)}
.bottombar svg{width:21px;height:21px}
.bottombar .bb-mini{flex:0 0 64px;background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.bottombar .bb-book{flex:1;flex-direction:row;gap:8px;background:var(--orange);color:#fff;font-size:var(--fs-base)}

/* keep content clear of bottom bar on mobile */
body{padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom))}

/* ============================================================ FOOTER */
.ftr{background:var(--ink);color:rgba(255,255,255,.72);padding:var(--s-8) 0 var(--s-7)}
.ftr .brand{color:#fff;margin-bottom:var(--s-3)}
.ftr p{font-size:var(--fs-sm);line-height:var(--lh-body);max-width:40ch}
.ftr-links{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-6) 0;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.ftr-links a:hover{color:#fff}
.ftr-social{display:flex;gap:10px;margin-bottom:var(--s-6)}
.ftr-social a{width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:12px;display:grid;place-items:center}
.ftr-social svg{width:21px;height:21px;color:#fff}
.ftr hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:var(--s-6) 0}
.ftr small,.disclaimer{font-size:12px;color:rgba(255,255,255,.5);line-height:var(--lh-body);display:block}
.disclaimer{margin-top:var(--s-3);max-width:72ch}

/* ============================================================ OWNER strip */
.owner{display:flex;align-items:center;gap:var(--s-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);margin-top:var(--s-6)}
.owner .ava{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:var(--fw-extra);font-size:22px;overflow:hidden}
.owner .ava img{width:100%;height:100%;object-fit:cover}
.owner b{display:block;font-size:var(--fs-base);color:var(--ink)}
.owner span{font-size:var(--fs-sm);color:var(--fg-muted);line-height:var(--lh-snug)}
.owner .badge{margin-left:auto;flex:none;font-size:12px;font-weight:var(--fw-bold);color:var(--orange);background:var(--orange-tint);padding:6px 12px;border-radius:var(--r-pill)}

/* hero photo caption (owner) */
.hero-media{position:relative}
.hero-cap{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;background:rgba(20,24,31,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:var(--fw-semibold);padding:7px 12px;border-radius:var(--r-pill)}
.hero-cap .dot{width:7px;height:7px;border-radius:50%;background:#37D67A}

/* review platform tag */
.rev .who .tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:var(--fw-bold);color:var(--orange);background:var(--orange-tint);padding:2px 8px;border-radius:var(--r-pill);vertical-align:middle}

/* clickable card */
a.svc{display:block;color:inherit}
a.svc:hover{border-color:var(--line-strong)}

/* ============================================================ REVEAL */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ============================================================ RESPONSIVE (scale up) */
@media (min-width:680px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .rate-row{grid-template-columns:repeat(4,1fr)}
  .rev-cards{grid-template-columns:repeat(3,1fr)}
  .btn-row{flex-direction:row}
  .btn-row .btn{flex:1}
}
@media (min-width:960px){
  .hdr-nav{display:flex;align-items:center;gap:var(--s-6);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
  .hdr-nav a:hover{color:var(--orange)}
  .menu-btn{display:none}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .bottombar{display:none}            /* desktop: no sticky bar */
  body{padding-bottom:0}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-9);align-items:center}
  .hero-media{margin-top:0;aspect-ratio:5/4}
  .hero-sub{font-size:var(--fs-xl)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .btn:active,.bottombar a:active,.svc:active{transform:none}
}