/* ============================================================
   Yawmy — web concept. Built to the Figma spec (frame 1920,
   content 1600, 160px gutters). All values below are the
   design's native px; do not scale them.
   ============================================================ */
:root{
  --primary:#1B5E55; --ring-fill:rgba(27,94,85,.20);
  --hero-wash:#EAF3EB;
  --hero-grad:linear-gradient(90deg,rgba(234,243,235,1) 0%,rgba(234,243,235,.8) 22.6%,rgba(234,243,235,.5) 50%,rgba(234,243,235,0) 100%);
  --hero-img-l:98px; --hero-img-t:-179px; --hero-img-w:1502px; --hero-img-h:1001px;
  --chip-tint:#E5F3EF; --promo-lite:linear-gradient(100deg,#DDE2E0,#E5F3EF);
  --promo-circle:rgba(27,94,85,.30);
  --canvas:#F8F5F0; --surface:#FFFFFF; --warm:#FFFDF8;
  --ink:#2C2C2C; --muted:#6F6A66; --hero-body:#4B5563;
  --line:#E8E1D9;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-card:0 2px 4px rgba(0,0,0,.03), 0 4px 6px rgba(0,0,0,.05);
  --shadow-float:0 8px 10px rgba(0,0,0,.10), 0 20px 25px rgba(0,0,0,.10);
  /* motion system */
  --primary-hi:#175048;
  --ease:cubic-bezier(.2,.8,.2,1);
  --lift:0 10px 24px rgba(30,45,38,.13);
}
/* second colourway (Figma "Design 2") — only these tokens differ */
[data-theme="maroon"]{
  --primary:#7A1B2E; --ring-fill:rgba(122,27,46,.20);
  --hero-wash:#F9D9DF;
  --hero-grad:linear-gradient(90deg,rgba(249,217,223,1) 0%,rgba(249,217,223,.8) 22.6%,rgba(249,217,223,.5) 50%,rgba(249,217,223,0) 100%);
  --chip-tint:#F7E4E9; --promo-lite:linear-gradient(100deg,#DFAEB7,#F2CAD1);
  --promo-circle:rgba(122,27,46,.30);
  --primary-hi:#681727;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;}
body{background:var(--canvas);color:var(--ink);}
img{display:block;} a{text-decoration:none;color:inherit;}
.container{max-width:1660px;margin:0 auto;padding:0 30px;}

/* ---------------- header ---------------- */
.head{position:sticky;top:0;z-index:50;background:rgba(248,245,240,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s;}
:root:not(.at-top) .head{border-bottom-color:var(--line);}
.head{padding-top:10px;}
.head-in{display:flex;align-items:center;height:80px;gap:32px;}
.logo{font-size:30px;font-weight:800;line-height:36px;letter-spacing:-.75px;color:var(--primary);}
.loc{display:flex;align-items:center;gap:8px;background:#fff;border-radius:9999px;padding:8px 16px;
  font-size:14px;line-height:20px;white-space:nowrap;}
.loc svg{color:var(--primary);flex-shrink:0;}
/* One header slot holds two things that are never both useful at once: the category tabs
   (at the top, where the hero already carries the search) and the search itself (once the
   hero search has scrolled away). Both sit absolutely inside the slot so they cross-fade
   with no layout shift. */
.head-slot{position:relative;flex:1;display:flex;align-items:center;justify-content:center;height:46px;}
.head-slot > *{position:absolute;left:50%;transform:translateX(-50%);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;}
.hsearch{width:608px;height:46px;background:#fff;border:1px solid var(--line);border-radius:9999px;
  display:flex;align-items:center;gap:16px;padding:0 16px;color:var(--muted);font-size:14px;}
.svc-tabs{display:flex;gap:28px;white-space:nowrap;}
.svc-tabs a{font-size:14px;line-height:20px;font-weight:500;color:var(--ink);cursor:pointer;transition:color .16s;}
.svc-tabs a:hover{color:var(--primary);}
.svc-tabs a.on{font-weight:600;color:var(--primary);}
/* Handoff: the tabs converge on the Services trigger, which sits to their left. Every tab
   moves for the same duration but travels a different distance — furthest tab, furthest
   journey — so they funnel toward one point rather than sliding as a block. The fade is
   held back 60ms so the travel is actually visible before they go. */
.svc-tabs a{transition:opacity .26s var(--ease) .06s,transform .32s var(--ease);}
.svc-tabs a:nth-child(1){--conv:-8px;}
.svc-tabs a:nth-child(2){--conv:-13px;}
.svc-tabs a:nth-child(3){--conv:-18px;}
.svc-tabs a:nth-child(4){--conv:-24px;}
.svc-tabs a:nth-child(5){--conv:-29px;}
.svc-tabs a:nth-child(6){--conv:-35px;}
.svc-tabs a:nth-child(7){--conv:-40px;}

/* at the top: tabs in, search and dropdown out */
.at-top .hsearch{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px) scale(.98);}
.at-top .svc{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-10px) scale(.9);}
/* scrolled: tabs funnel into the trigger, which then takes their place.
   The parent only holds visibility — held open until the last tab has finished. */
:root:not(.at-top) .svc-tabs{opacity:1;visibility:hidden;transform:translateX(-50%);
  transition:visibility 0s linear .34s;}
:root:not(.at-top) .svc-tabs a{opacity:0;transform:translateX(var(--conv)) scale(.9);}
/* the 7 inline tabs need ~704px; below this there isn't room, so use the dropdown throughout */
@media (max-width:1400px){
  .svc-tabs{display:none;}
  /* transform:none matters — a transformed .svc would become the containing block for the
     position:fixed panel used below 1180px */
  .at-top .svc{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
}
.head-right{display:flex;align-items:center;gap:24px;flex-shrink:0;}
.ar{font-size:14px;line-height:20px;color:var(--ink);}
.login{background:var(--primary);color:#fff;font-weight:500;font-size:14px;line-height:20px;
  padding:10px 24px;border-radius:9999px;box-shadow:var(--shadow-sm);}

/* Services mega-menu — replaces the old full-width category row. One header row, and the
   catalogue scales past the 6 links that used to fit. */
.svc{position:relative;align-self:stretch;display:flex;align-items:center;flex-shrink:0;
  transition:opacity .24s var(--ease) .16s,transform .24s var(--ease) .16s,visibility .24s;}
.svc-trigger{display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);white-space:nowrap;}
.svc-trigger svg{transition:transform .2s;}
.svc.open .svc-trigger{color:var(--primary);}
.svc.open .svc-trigger svg{transform:rotate(180deg);}
.svc-panel{position:absolute;top:calc(100% + 8px);left:-12px;z-index:60;width:856px;max-width:calc(100vw - 40px);
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;
  box-shadow:0 12px 32px rgba(30,45,38,.14);
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;}
.svc.open .svc-panel{opacity:1;visibility:visible;transform:none;}
/* invisible bridge across the 8px gap so moving the cursor down doesn't drop the hover */
.svc-panel::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;}
.svc-panel a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;
  font-size:14px;line-height:20px;font-weight:500;color:var(--ink);}
.svc-panel a:hover{background:var(--canvas);}
.svc-panel .ic{width:36px;height:36px;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.svc-panel .ic svg{width:18px;height:18px;}
.svc-panel .all{color:var(--primary);font-weight:600;}
.svc-panel .all .ic{background:var(--ring-fill);color:var(--primary);}
/* below ~1180px the trigger-anchored panel would run off-screen, so pin it to the viewport */
@media (max-width:1180px){
  .svc-panel{position:fixed;top:99px;left:16px;right:16px;width:auto;max-width:none;
    grid-template-columns:repeat(3,1fr);}
}

/* ---------------- hero ---------------- */
.hero{position:relative;margin-top:24px;height:629px;border-radius:40px;overflow:hidden;background:var(--hero-wash);}
/* image node placement is taken from Figma and differs slightly between the two colourways */
.hero-photo{position:absolute;left:var(--hero-img-l);top:var(--hero-img-t);
  width:var(--hero-img-w);height:var(--hero-img-h);z-index:1;
  background:url('img/hero-figma.png') center / cover;}
.hero::before{content:"";position:absolute;inset:0;z-index:2;background:var(--hero-grad);}
.hero-content{position:relative;z-index:3;width:611px;padding:64px;}
.eyebrow{font-size:14px;font-weight:700;line-height:20px;letter-spacing:1.4px;text-transform:uppercase;color:var(--primary);}
.hero h1{font-size:60px;line-height:60px;font-weight:800;color:var(--ink);margin-top:16px;}
.hero-para{font-size:18px;line-height:28px;color:var(--hero-body);width:426px;padding:8px 0 24px;margin-top:16px;}
.hero-search{width:448px;height:64px;background:var(--warm);border-radius:9999px;padding:8px;
  display:flex;align-items:center;box-shadow:0 4px 6px rgba(0,0,0,.10),0 10px 15px rgba(0,0,0,.10);}
.hero-search > svg{color:var(--muted);margin:0 8px 0 16px;flex-shrink:0;}
.hero-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14px;color:var(--muted);}
.hero-search .go{background:var(--primary);color:#fff;font-weight:500;font-size:16px;line-height:24px;
  padding:12px 32px;border-radius:9999px;white-space:nowrap;}
.hero-stats{display:flex;gap:40px;padding-top:32px;}
.hero-stats b{display:block;font-size:18px;line-height:28px;font-weight:700;color:var(--ink);}
.hero-stats span{font-size:14px;line-height:20px;color:var(--muted);}
/* floating cards — positions are Figma coords relative to the hero box */
.fcard{position:absolute;z-index:4;background:var(--warm);border-radius:16px;padding:16px;
  display:flex;align-items:center;gap:16px;white-space:nowrap;box-shadow:var(--shadow-float);}
.fcard .ic{width:40px;height:40px;border-radius:9999px;background:var(--chip-tint);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fcard .t{font-size:14px;line-height:20px;font-weight:700;color:var(--ink);}
.fcard .s{font-size:12px;line-height:16px;color:var(--muted);}
.f1{left:616px;top:190px;}
.f2{left:669px;top:481px;}
.f3{left:1320px;top:346px;width:90px;padding:12px;flex-direction:column;align-items:flex-start;gap:4px;}
.f3 .badge{width:30px;height:22px;border-radius:4px;background:#FEF9C3;color:#CA8A04;
  display:flex;align-items:center;justify-content:center;}

/* ---------------- section heads ---------------- */
.sec{margin-top:64px;}
.sec-h{display:flex;justify-content:space-between;align-items:flex-start;}
.sec-h h2{font-size:32px;line-height:32px;font-weight:600;color:var(--ink);}
.sec-h .sub{font-size:16px;line-height:24px;color:var(--muted);margin-top:8px;}
.sec-h .rule{width:111px;height:4px;border-radius:9999px;background:var(--primary);margin-top:8px;}
.pill-link{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--primary);color:var(--primary);
  border-radius:20px;height:29px;padding:0 12px;font-size:12px;line-height:20px;font-weight:500;flex-shrink:0;}
.pill-link.lg{height:34px;font-size:14px;}

/* ---------------- explore services ---------------- */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:32px;}
.cat{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;min-height:237px;
  display:flex;flex-direction:column;align-items:center;box-shadow:var(--shadow-card);}
.cat .chip{width:64px;height:64px;border-radius:9999px;display:flex;align-items:center;justify-content:center;}
.cat .chip svg{width:26px;height:26px;}
.cat .lb{font-size:18px;line-height:28px;font-weight:600;color:var(--ink);text-align:center;margin-top:41px;}
.cat .ds{font-size:14px;line-height:20px;color:var(--muted);text-align:center;margin-top:12px;}

/* ---------------- promo banners ---------------- */
.promo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;}
.pbox{position:relative;overflow:hidden;height:160px;border-radius:12px;padding:32px 24px;
  display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow-sm);}
.pbox::after{content:"";position:absolute;width:256px;height:256px;border-radius:9999px;right:-60px;top:-32px;}
.pbox .kick{display:flex;align-items:center;gap:8px;font-size:11px;line-height:16.5px;font-weight:500;
  letter-spacing:.55px;text-transform:uppercase;}
.pbox .kick i{font-style:normal;font-size:18px;line-height:28px;}
.pbox h3{margin-top:8px;}
.pbox .sub{font-size:14px;line-height:20px;font-weight:500;margin-top:8px;}
.pbox.dark{background:var(--primary);}
.pbox.dark h3{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.75px;color:#fff;}
.pbox.dark .kick{color:rgba(255,255,255,.9);} .pbox.dark .sub{color:rgba(255,255,255,.8);}
.pbox.dark::after{background:rgba(0,0,0,.15);}
.pbox.lite{background:var(--promo-lite);padding:34px 24px;}
.pbox.lite h3{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.6px;color:var(--ink);}
.pbox.lite .kick{color:var(--primary);} .pbox.lite .sub{color:var(--muted);}
.pbox.lite::after{background:var(--promo-circle);}

/* ---------------- popular this week ---------------- */
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:32px;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow-sm);}
.pcard .img{position:relative;height:192px;}
.pcard .img img{width:100%;height:100%;object-fit:cover;}
/* z-index needed: the image gets a transform on hover, which creates a stacking context and
   would otherwise paint over these — making the heart unclickable */
.pcard .disc{position:absolute;z-index:2;top:12px;left:12px;background:#fff;color:var(--ink);border-radius:4px;
  padding:4px 8px;font-size:12px;line-height:16px;font-weight:500;box-shadow:var(--shadow-sm);}
.pcard .hrt{position:absolute;z-index:2;top:12px;right:12px;width:32px;height:32px;border-radius:9999px;background:#fff;
  color:var(--muted);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.pcard .bd{padding:20px;}
.pcard .tt{font-size:16px;line-height:24px;font-weight:600;color:var(--ink);}
.pcard .meta{display:flex;align-items:center;gap:8px;margin-top:8px;}
.ratepill{display:inline-flex;align-items:center;gap:4px;background:#FEFCE8;color:#A16207;border-radius:4px;
  padding:2px 6px;font-size:12px;line-height:16px;font-weight:700;}
.pcard .catlbl{font-size:12px;line-height:16px;color:var(--muted);}
.pcard .ft{display:flex;justify-content:space-between;align-items:flex-end;margin-top:16px;}
.pcard .fr{display:block;font-size:12px;line-height:16px;color:var(--muted);}
.pcard .pr{font-size:16px;line-height:24px;font-weight:600;color:var(--ink);}
.addbtn{width:40px;height:41px;border-radius:9999px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ---------------- how it works ---------------- */
/* Card surface is a pseudo-element so the ring ellipse can sit *behind* it —
   only the arc above the card edge is visible, as in the design. */
/* 75px = 32px section gap + the 43px the ring overhangs above the card */
.steps{display:grid;grid-template-columns:1fr 82px 1fr 82px 1fr;align-items:center;margin-top:75px;padding-bottom:10px;}
.step{position:relative;height:224px;padding:32px;}
.step::before{content:"";position:absolute;inset:0;background:#fff;border-radius:24px;box-shadow:var(--shadow-sm);z-index:1;}
/* accent plate: same width as the card, 55 tall, 10px of it showing below */
.step::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:55px;background:var(--primary);
  border-radius:0 0 24px 24px;box-shadow:0 4px 4px rgba(0,0,0,.25);z-index:0;}
/* Figma: 85x81 ellipse, arcData {0 -> -PI, innerRadius .8944}. Rendered by Figma as a
   4.25px arc with ROUND caps whose ends stop ~2.1px above the diameter and bulge down to
   meet it — hence SVG rather than a CSS border. */
.step .ring{position:absolute;left:50%;top:-43px;transform:translateX(-50%);width:85px;height:81px;
  color:var(--primary);z-index:0;}
.step .sic{position:absolute;left:50%;top:-36px;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;
  background:#fff;box-shadow:0 4px 4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:2;}
.step .sic i{width:61px;height:61px;border-radius:50%;background:var(--ring-fill);color:var(--primary);
  display:flex;align-items:center;justify-content:center;}
.step .num,.step h4,.step p{position:relative;z-index:2;}
.step .num{font-size:30px;line-height:36px;font-weight:600;color:var(--primary);}
.step h4{font-size:20px;line-height:28px;font-weight:600;color:var(--ink);margin-top:20px;}
.step p{font-size:16px;line-height:26px;color:var(--muted);margin-top:20px;}
.step-arrow{display:flex;justify-content:center;color:var(--primary);}

/* ---------------- providers ---------------- */
.prov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px;}
.prov{background:#fff;border:1px solid var(--line);border-radius:15px;padding:24px;height:186px;
  box-shadow:0 1px 2px rgba(0,0,0,.10);}
.prov .top{display:flex;gap:16px;}
.prov .av{position:relative;width:64px;height:64px;flex-shrink:0;margin-top:4px;}
.prov .av img{width:68px;height:68px;margin:-2px;border-radius:9999px;object-fit:cover;background:#C9EAD9;}
.prov .vf{position:absolute;right:-4px;bottom:0;width:26px;height:26px;border-radius:9999px;background:var(--primary);
  border:2px solid #FBF9F8;color:#fff;display:flex;align-items:center;justify-content:center;}
.prov .nm{font-size:18px;line-height:28px;font-weight:600;color:var(--ink);}
.prov .ct{font-size:14px;line-height:20px;color:var(--muted);}
.prov .rt{display:flex;align-items:center;gap:4px;padding-top:4px;}
.prov .rt .v{font-size:14px;line-height:16px;font-weight:500;letter-spacing:.7px;color:var(--ink);}
.prov .rt .n{font-size:14px;line-height:20px;color:var(--muted);}
.prov .ft{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:16px;}
.prov .fr2{font-size:14px;line-height:20px;color:var(--muted);}
.prov .fr2 b{font-size:14px;line-height:16px;font-weight:600;letter-spacing:.7px;color:var(--ink);}
.bookpill{background:var(--primary);color:#fff;font-size:14px;line-height:16px;font-weight:500;letter-spacing:.7px;
  padding:8px 24px;border-radius:27px;}

/* ---------------- offers ---------------- */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px;}
.offer{position:relative;overflow:hidden;height:124px;border-radius:15px;padding:24px;
  display:flex;flex-direction:column;justify-content:center;}
.offer .kick{font-size:12px;line-height:14px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--primary);}
.offer .ttl{font-size:18px;line-height:25px;font-weight:600;color:var(--ink);margin-top:8px;position:relative;z-index:2;}
.offer > svg{position:absolute;right:14px;bottom:-6px;width:84px;height:88px;}

/* ---------------- app cta ---------------- */
.appband{position:relative;overflow:hidden;height:235px;border-radius:24px;background:var(--primary);
  margin-top:64px;padding:24px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow-sm);color:#fff;}
.appband::after{content:"";position:absolute;width:256px;height:256px;border-radius:9999px;
  background:rgba(0,0,0,.15);right:-32px;top:-32px;}
.appband h3{font-size:32px;line-height:36px;font-weight:600;letter-spacing:-.75px;}
.appband p{font-size:16px;line-height:20px;font-weight:500;color:rgba(255,255,255,.8);margin-top:11px;}
/* official store badges, sized to the design's 211x70 button. The artwork carries its own
   white fill and rounded border, so no plate behind it — a plate would show through the
   antialiased outer edge as a pale halo. */
.appbtns{display:flex;gap:28px;flex-shrink:0;position:relative;z-index:2;}
.appbtns a{display:block;width:211px;height:70px;}
.appbtns img{width:100%;height:100%;}

/* ---------------- footer ---------------- */
.foot{background:#fff;border:1px solid var(--line);border-radius:30px;margin:79px 0 10px;padding:81px 24px 0;height:345px;}
.foot-grid{display:grid;grid-template-columns:1fr 295px 295px 295px;}
.foot .logo{font-size:30px;line-height:32px;font-weight:800;letter-spacing:0;}
.foot .tag{font-size:14px;line-height:20px;color:var(--muted);margin-top:24px;}
.foot .city{font-size:14px;line-height:20px;color:var(--ink);margin-top:16px;}
.foot h5{font-size:16px;line-height:24px;font-weight:700;color:var(--primary);}
.foot ul{list-style:none;margin-top:16px;}
.foot li{font-size:14px;line-height:20px;color:var(--muted);margin-bottom:12px;}
.foot-bottom{display:flex;justify-content:space-between;font-size:14px;line-height:20px;color:var(--muted);margin-top:37px;}
.foot-bottom .lang{display:flex;gap:8px;} .foot-bottom .lang b{color:var(--ink);font-weight:500;}

/* ---------------- colourway switcher (preview control, not part of the design) ---------------- */
.fab{position:fixed;right:32px;bottom:32px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:12px;}
.fab-opts{display:flex;flex-direction:column;gap:10px;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s cubic-bezier(.2,.8,.2,1);}
.fab.open .fab-opts{opacity:1;pointer-events:auto;transform:none;}
.sw{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.20);cursor:pointer;position:relative;padding:0;transition:.15s;}
.sw:hover{transform:scale(1.08);}
.sw.on{outline:2px solid var(--ink);outline-offset:3px;}
.sw span{position:absolute;right:56px;top:50%;transform:translateY(-50%);background:#2C2C2C;color:#fff;
  font-size:12px;font-weight:500;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;}
.sw:hover span{opacity:1;}
.fab-btn{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:none;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;transition:.2s;}
.fab-btn:hover{transform:scale(1.05);}
.fab.open .fab-btn{transform:rotate(45deg);}
@media print{.fab{display:none;}}

/* ---------------- typeahead ---------------- */
.hsearch input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:14px;color:var(--ink);}
.hsearch input::placeholder,.hero-search input::placeholder{color:var(--muted);}
.hero-search input{color:var(--ink);}
/* fixed, not absolute — the hero clips its overflow, which would cut the panel off */
.sug{position:fixed;z-index:300;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:8px;box-shadow:0 14px 34px rgba(30,45,38,.16);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;}
.sug.open{opacity:1;visibility:visible;transform:none;}
.sug .grp{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);padding:10px 12px 6px;}
.sug button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:none;
  background:none;border-radius:12px;cursor:pointer;text-align:left;font-family:inherit;}
.sug button.on{background:var(--canvas);}
.sug .ic{width:34px;height:34px;border-radius:9999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sug .ic svg{width:17px;height:17px;}
.sug .ic img{width:100%;height:100%;object-fit:cover;}
.sug .t{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);}
.sug .c{display:block;font-size:12px;line-height:16px;color:var(--muted);}
.sug mark{background:none;color:var(--primary);font-weight:700;}
.sug .none{padding:14px 12px;font-size:13px;line-height:19px;color:var(--muted);}

/* ============================================================
   INTERACTION & MOTION
   Hover/press states and scroll reveals. Nothing here changes the
   resting design — it is all :hover / :active / reveal state.
   ============================================================ */

/* solid primary buttons */
.login,.hero-search .go,.bookpill,.addbtn{cursor:pointer;
  transition:background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);}
.login:hover,.hero-search .go:hover,.bookpill:hover,.addbtn:hover{
  background:var(--primary-hi);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.20);}
.login:active,.hero-search .go:active,.bookpill:active,.addbtn:active{
  transform:translateY(0) scale(.97);box-shadow:none;}

/* outlined pills — fill on hover, nudge the chevron */
.pill-link{cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);}
.pill-link svg{transition:transform .16s var(--ease);}
.pill-link:hover{background:var(--primary);color:#fff;}
.pill-link:hover svg{transform:translateX(3px);}
.pill-link:active{transform:scale(.97);}

/* header controls */
.loc{cursor:pointer;transition:box-shadow .16s var(--ease),transform .16s var(--ease);}
.loc:hover{box-shadow:0 4px 12px rgba(30,45,38,.12);transform:translateY(-1px);}
.svc-trigger:hover{color:var(--primary);}
.ar{cursor:pointer;transition:color .16s;}
.ar:hover{color:var(--primary);}
.logo{cursor:pointer;}

/* service cards */
.cat{cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease);}
.cat .chip{transition:transform .22s var(--ease);}
.cat:hover{transform:translateY(-4px);box-shadow:var(--lift);}
.cat:hover .chip{transform:scale(1.09);}

/* popular cards — lift, and let the photo breathe */
.pcard{cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease);}
.pcard .img img{transition:transform .45s var(--ease);}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--lift);}
.pcard:hover .img img{transform:scale(1.06);}
.pcard .hrt{cursor:pointer;transition:color .16s,transform .16s var(--ease);}
.pcard .hrt:hover{color:#E0245E;transform:scale(1.14);}

/* provider cards */
.prov{cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease);}
.prov .av img{transition:transform .22s var(--ease);}
.prov:hover{transform:translateY(-4px);box-shadow:var(--lift);}
.prov:hover .av img{transform:scale(1.06);}

/* promo banners & offer tiles */
.pbox,.offer{cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease);}
.pbox:hover,.offer:hover{transform:translateY(-3px);box-shadow:var(--lift);}
.offer>svg{transition:transform .3s var(--ease);}
.offer:hover>svg{transform:scale(1.07) rotate(-5deg);}
.pbox::after{transition:transform .4s var(--ease);}
.pbox:hover::after{transform:scale(1.08);}

/* store badges */
.appbtns a{transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
.appbtns a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22);}
.appbtns a:active{transform:translateY(0) scale(.98);}

/* mega-menu items & footer links */
.svc-panel a .ic{transition:transform .16s var(--ease);}
.svc-panel a:hover .ic{transform:scale(1.12);}
.foot li{cursor:pointer;width:fit-content;transition:color .16s,transform .16s var(--ease);}
.foot li:hover{color:var(--primary);transform:translateX(3px);}

/* hero floating cards — slow idle drift so the hero feels alive */
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.f1{animation:floaty 6s ease-in-out infinite;}
.f2{animation:floaty 6s ease-in-out infinite .9s;}
.f3{animation:floaty 6s ease-in-out infinite 1.8s;}

/* keyboard focus */
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;}

/* scroll reveal — .js is set pre-paint, so without JS everything is simply visible */
.js .sec,.js .promo,.js .appband,.js .foot{opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .5s var(--ease);}
.js .sec.in,.js .promo.in,.js .appband.in,.js .foot.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important;}
  .js .sec,.js .promo,.js .appband,.js .foot{opacity:1;transform:none;}
}

/* ---------------- responsive ---------------- */
@media (max-width:1500px){
  .hero{height:auto;} .hero-content{width:100%;max-width:611px;}
  .fcard{display:none;}
  .cats,.grid5{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1100px){
  .container{padding:0 22px;}
  .hsearch{display:none;}
  .hero-content{padding:40px;} .hero h1{font-size:44px;line-height:46px;}
  .hero-para,.hero-search{width:100%;max-width:448px;}
  .steps{grid-template-columns:1fr;gap:76px;} .step{height:auto;} .step-arrow{display:none;}
  .promo{grid-template-columns:1fr;} .pbox{height:auto;}
  .prov-grid,.offers{grid-template-columns:repeat(2,1fr);}
  .appband{height:auto;flex-direction:column;align-items:flex-start;gap:28px;padding:40px 24px;}
  .foot{height:auto;padding:48px 24px;} .foot-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
}
@media (max-width:760px){
  .svc-panel{grid-template-columns:repeat(2,1fr);}
  .cats,.grid5{grid-template-columns:repeat(2,1fr);}
  .prov-grid,.offers,.foot-grid{grid-template-columns:1fr;}
  .sec-h h2{font-size:26px;line-height:30px;}
  .hero h1{font-size:34px;line-height:38px;}
  .appbtns{flex-wrap:wrap;gap:16px;} .appbtns a{width:100%;}
}
/* ============================================================
   INNER PAGES — search results & service detail
   ============================================================ */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;line-height:20px;color:var(--muted);padding-top:28px;}
.crumb a{cursor:pointer;transition:color .16s;} .crumb a:hover{color:var(--primary);}
.page-head{padding:14px 0 24px;}
.page-head h1{font-size:32px;line-height:40px;font-weight:600;color:var(--ink);}
.page-head h1 em{font-style:normal;color:var(--primary);}
.page-head .count{font-size:15px;line-height:24px;color:var(--muted);margin-top:6px;}

/* ---- search results ---- */
.results-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start;}
.filters{background:#fff;border:1px solid var(--line);border-radius:24px;padding:8px 24px 20px;
  box-shadow:var(--shadow-sm);position:sticky;top:107px;}
.fh{display:flex;justify-content:space-between;align-items:center;padding-top:16px;}
.fh h3{font-size:18px;line-height:28px;font-weight:600;}
.fh .clear{font-size:13px;font-weight:500;color:var(--primary);cursor:pointer;background:none;border:none;font-family:inherit;}
.fgroup{padding:16px 0;border-bottom:1px solid var(--line);}
.fgroup:last-child{border-bottom:none;padding-bottom:4px;}
.fgroup h4{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.opt{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;font-size:14px;line-height:20px;color:var(--ink);}
.opt input{appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;flex-shrink:0;
  cursor:pointer;position:relative;transition:.15s;background:#fff;}
.opt input:checked{background:var(--primary);border-color:var(--primary);}
/* centre the marks with transforms rather than hardcoded offsets — the input is 18px with a
   1.5px border, so the padding box is 15px and fixed pixel values sit half a pixel out */
.opt input:checked::after{content:"";position:absolute;left:50%;top:46%;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg);}
.opt input[type=radio]{border-radius:50%;}
.opt input[type=radio]:checked::after{left:50%;top:50%;width:6px;height:6px;border:none;
  border-radius:50%;background:#fff;transform:translate(-50%,-50%);}
.opt .n{margin-left:auto;font-size:12px;color:var(--muted);}
.range{display:flex;align-items:center;gap:8px;}
.range input{width:100%;height:38px;border:1px solid var(--line);border-radius:10px;padding:0 12px;
  font-family:inherit;font-size:14px;color:var(--ink);outline:none;background:#fff;transition:border-color .16s;}
.range input:focus{border-color:var(--primary);}
.range span{color:var(--muted);font-size:13px;}
.sel{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;
  font-family:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;cursor:pointer;transition:border-color .16s;}
.sel:focus{border-color:var(--primary);}
.results-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--ring-fill);color:var(--primary);
  border-radius:100px;padding:6px 12px;font-size:13px;font-weight:500;}
.chip b{cursor:pointer;font-weight:700;line-height:1;}
.sortwrap{display:flex;align-items:center;gap:10px;flex-shrink:0;font-size:14px;color:var(--muted);}
.sortwrap .sel{width:auto;min-width:190px;}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.loadmore{display:block;margin:32px auto 0;background:#fff;border:1px solid var(--primary);color:var(--primary);
  font-family:inherit;font-size:14px;font-weight:600;padding:13px 32px;border-radius:100px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);}
.loadmore:hover{background:var(--primary);color:#fff;transform:translateY(-1px);}
.empty{background:#fff;border:1px solid var(--line);border-radius:24px;padding:56px 32px;text-align:center;}
.empty h3{font-size:20px;font-weight:600;margin-bottom:8px;}
.empty p{font-size:14px;color:var(--muted);}

/* ---- service detail ---- */
.svc-layout{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start;}
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px;}
.gallery img{width:100%;object-fit:cover;border-radius:20px;display:block;}
.gallery .main img{height:412px;}
.gallery .side{display:grid;grid-template-rows:1fr 1fr;gap:12px;}
.gallery .side img{height:200px;}
.panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;margin-top:24px;box-shadow:var(--shadow-sm);}
.panel h2{font-size:24px;line-height:32px;font-weight:600;margin-bottom:14px;}
.panel p{font-size:15px;line-height:26px;color:var(--muted);}
.svc-title{font-size:32px;line-height:40px;font-weight:600;}
.svc-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--muted);}
.svc-meta .rate{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;}
.badge-soft{display:inline-flex;align-items:center;gap:6px;background:var(--ring-fill);color:var(--primary);
  border-radius:100px;padding:5px 12px;font-size:12.5px;font-weight:600;}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
.incl div{display:flex;gap:10px;font-size:14.5px;line-height:24px;color:var(--ink);}
.incl svg{color:var(--primary);flex-shrink:0;margin-top:5px;}
.provstrip{display:flex;align-items:center;gap:16px;}
.provstrip img{width:64px;height:64px;border-radius:9999px;object-fit:cover;}
.provstrip .nm{font-size:18px;font-weight:600;}
.provstrip .ct{font-size:14px;color:var(--muted);margin-top:2px;}
.review{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.review:last-child{border-bottom:none;padding-bottom:0;}
.review img{width:44px;height:44px;border-radius:9999px;object-fit:cover;flex-shrink:0;}
.review .rn{font-size:14.5px;font-weight:600;}
.review .rd{font-size:12.5px;color:var(--muted);}
.review .rt{font-size:14px;line-height:24px;color:var(--muted);margin-top:6px;}
.stars{display:inline-flex;gap:2px;color:#D1A86A;}

/* booking panel */
.book{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;
  box-shadow:0 4px 14px rgba(30,45,38,.09);position:sticky;top:107px;}
.book .price{display:flex;align-items:baseline;gap:8px;}
.book .price b{font-size:30px;line-height:36px;font-weight:700;color:var(--ink);}
.book .price span{font-size:14px;color:var(--muted);}
.seg{display:flex;background:var(--canvas);border-radius:100px;padding:4px;margin:18px 0;}
.seg button{flex:1;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 0;border-radius:100px;cursor:pointer;color:var(--muted);transition:.16s;}
.seg button.on{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm);}
.blab{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:18px 0 10px;}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.day{border:1px solid var(--line);border-radius:12px;padding:9px 0;text-align:center;cursor:pointer;
  background:#fff;font-family:inherit;transition:.16s;}
.day:hover{border-color:var(--primary);}
.day.on{border-color:var(--primary);background:var(--ring-fill);}
.day .dn{display:block;font-size:11px;line-height:16px;color:var(--muted);}
.day .dd{display:block;font-size:16px;line-height:22px;font-weight:700;color:var(--ink);}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.slot{border:1px solid var(--line);border-radius:10px;padding:9px 0;text-align:center;background:#fff;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;transition:.16s;}
.slot:hover:not(:disabled){border-color:var(--primary);}
.slot.on{border-color:var(--primary);background:var(--ring-fill);color:var(--primary);font-weight:600;}
.slot:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through;}
.sum{border-top:1px solid var(--line);margin-top:20px;padding-top:14px;}
.sum div{display:flex;justify-content:space-between;font-size:14px;line-height:26px;color:var(--muted);}
.sum .tot{font-size:16px;font-weight:700;color:var(--ink);border-top:1px solid var(--line);margin-top:10px;padding-top:12px;}
.bookbtn{width:100%;background:var(--primary);color:#fff;border:none;font-family:inherit;font-size:15px;
  font-weight:600;padding:15px;border-radius:100px;cursor:pointer;margin-top:16px;
  transition:background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);}
.bookbtn:hover{background:var(--primary-hi);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.20);}
.bookbtn:active{transform:translateY(0) scale(.98);}
.note-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:12px;}
.bid-note{background:var(--canvas);border-radius:14px;padding:14px 16px;font-size:13px;line-height:21px;color:var(--muted);}

@media (max-width:1280px){
  .results-layout{grid-template-columns:260px 1fr;}
  .results-grid{grid-template-columns:repeat(3,1fr);}
  .svc-layout{grid-template-columns:1fr 380px;}
}
@media (max-width:1100px){
  .results-layout,.svc-layout{grid-template-columns:1fr;}
  .filters,.book{position:static;}
  .results-grid{grid-template-columns:repeat(3,1fr);}
  .gallery .main img{height:320px;} .gallery .side img{height:154px;}
}
@media (max-width:760px){
  .results-grid{grid-template-columns:repeat(2,1fr);}
  .results-bar{flex-direction:column;align-items:flex-start;}
  .gallery{grid-template-columns:1fr;} .gallery .side{display:none;}
  .incl{grid-template-columns:1fr;}
  .page-head h1,.svc-title{font-size:26px;line-height:34px;}
}

/* ---- all services / category browse ---- */
.catnav{display:flex;flex-wrap:wrap;gap:10px;}
.catnav a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:6px 14px 6px 7px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);}
.catnav a:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.catnav .ic{width:28px;height:28px;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.catnav .ic svg{width:15px;height:15px;}
.catnav .n{color:var(--muted);font-size:12.5px;}
.catsec{padding-top:52px;scroll-margin-top:112px;}
.catsec-h{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.catsec-h .ic{width:56px;height:56px;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.catsec-h .ic svg{width:26px;height:26px;}
.catsec-h h2{font-size:24px;line-height:32px;font-weight:600;color:var(--ink);}
.catsec-h .sub{font-size:13.5px;line-height:20px;color:var(--muted);margin-top:2px;}
.catsec-h .pill-link{margin-left:auto;}
@media (max-width:760px){
  .catsec-h{flex-wrap:wrap;} .catsec-h .pill-link{margin-left:0;}
}

/* ---- provider card ---- */
.provcard{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--canvas);}
.pc-top{display:flex;align-items:center;gap:18px;}
.pc-av{position:relative;flex-shrink:0;}
.pc-av img{width:72px;height:72px;border-radius:9999px;object-fit:cover;}
.pc-vf{position:absolute;right:-2px;bottom:2px;width:26px;height:26px;border-radius:9999px;background:var(--primary);
  border:2px solid var(--canvas);color:#fff;display:flex;align-items:center;justify-content:center;}
.pc-nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:19px;line-height:28px;font-weight:600;color:var(--ink);}
.pc-sub{font-size:13.5px;line-height:20px;color:var(--muted);margin-top:2px;}
.pc-rate{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);margin-top:7px;}
.pc-rate span{font-weight:400;color:var(--muted);}
.pc-btn{margin-left:auto;flex-shrink:0;}
.pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.pc-stats div{text-align:center;}
.pc-stats b{display:block;font-size:17px;line-height:24px;font-weight:700;color:var(--ink);}
.pc-stats span{font-size:12px;line-height:18px;color:var(--muted);}
.pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.pc-tags .tag{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:5px 12px;font-size:12.5px;line-height:18px;color:var(--muted);}
.pc-tags .tag svg{color:var(--primary);}
@media (max-width:760px){
  .pc-top{flex-wrap:wrap;} .pc-btn{margin-left:0;}
  .pc-stats{grid-template-columns:repeat(2,1fr);gap:16px 12px;}
}

/* logo is a link on every page; keep block-ish sizing in the footer */
.logo{display:inline-block;}
/* saved state for the card heart */
.pcard .hrt.saved{color:#E0245E;}
.pcard .hrt.saved svg{fill:#E0245E;}

/* ---- additional colourways (same token set as the two Figma designs) ---- */
[data-theme="teal"]{
  --primary:#0F5E63; --primary-hi:#0C4E52; --ring-fill:rgba(15,94,99,.20);
  --hero-wash:#E7F2F2;
  --hero-grad:linear-gradient(90deg,rgba(231,242,242,1) 0%,rgba(231,242,242,.8) 22.6%,rgba(231,242,242,.5) 50%,rgba(231,242,242,0) 100%);
  --chip-tint:#E2F0F0; --promo-lite:linear-gradient(100deg,#D3E3E3,#E2F0F0);
  --promo-circle:rgba(15,94,99,.30);
}
[data-theme="indigo"]{
  --primary:#2A3B75; --primary-hi:#222F5E; --ring-fill:rgba(42,59,117,.20);
  --hero-wash:#E9ECF6;
  --hero-grad:linear-gradient(90deg,rgba(233,236,246,1) 0%,rgba(233,236,246,.8) 22.6%,rgba(233,236,246,.5) 50%,rgba(233,236,246,0) 100%);
  --chip-tint:#E6EAF6; --promo-lite:linear-gradient(100deg,#D6DBEE,#E6EAF6);
  --promo-circle:rgba(42,59,117,.30);
}
[data-theme="clay"]{
  --primary:#9C4221; --primary-hi:#7F361B; --ring-fill:rgba(156,66,33,.20);
  --hero-wash:#FAE7DE;
  --hero-grad:linear-gradient(90deg,rgba(250,231,222,1) 0%,rgba(250,231,222,.8) 22.6%,rgba(250,231,222,.5) 50%,rgba(250,231,222,0) 100%);
  --chip-tint:#FBE8DE; --promo-lite:linear-gradient(100deg,#EECEBC,#FBE8DE);
  --promo-circle:rgba(156,66,33,.30);
}

/* ---- first-visit coach mark for the palette button ---- */
.coach{position:fixed;right:32px;bottom:104px;z-index:210;width:290px;
  background:var(--primary);color:#fff;border-radius:18px;padding:18px 20px;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;}
.coach.show{opacity:1;visibility:visible;transform:none;}
/* tail pointing down at the button */
.coach::after{content:"";position:absolute;right:24px;bottom:-7px;width:16px;height:16px;
  background:var(--primary);transform:rotate(45deg);border-radius:3px;}
.coach-t{font-size:15px;line-height:22px;font-weight:700;}
.coach-p{font-size:13px;line-height:20px;color:rgba(255,255,255,.86);margin-top:6px;}
.coach-x{margin-top:14px;background:#fff;color:var(--primary);border:none;font-family:inherit;
  font-size:13px;font-weight:600;padding:8px 18px;border-radius:100px;cursor:pointer;
  transition:transform .16s var(--ease);}
.coach-x:hover{transform:translateY(-1px);}
/* halo on the button itself while the tip is up */
@keyframes fabPulse{
  0%{box-shadow:0 6px 20px rgba(0,0,0,.22),0 0 0 0 var(--ring-fill);}
  70%{box-shadow:0 6px 20px rgba(0,0,0,.22),0 0 0 18px rgba(0,0,0,0);}
  100%{box-shadow:0 6px 20px rgba(0,0,0,.22),0 0 0 0 rgba(0,0,0,0);}}
.coaching .fab-btn{animation:fabPulse 2s ease-out infinite;}
@media (max-width:600px){ .coach{right:16px;left:16px;width:auto;bottom:96px;} }