/* ==========================================================================
   bookingo.ae — homepage
   Palette locked to the approved design:
     teal      #16833F  (brand, buttons, links)
     teal-dark #16833F  (hover)
     ink       #0F2A33  (headings)
     slate     #5A6962  (body)
     mist      #F4F7F5  (deals band)
     line      #E2EAE5  (borders)
     sale      #16833F  (offer price + discount badge)
   ========================================================================== */

:root{
  --teal:#16833F; --teal-dark:#16833F; --teal-soft:#F2FAF4;
  --ink:#0B2545; --slate:#5A6962; --mist:#F4F7F5;
  --line:#E2EAE5; --sale:#16833F; --amber:#F5A623;
  --radius:10px; --shell:1180px;

  /* Compatibility aliases. Legacy views (topic/keyword pages) were written
     against the old feed.css variable names. Mapping them here means those
     pages inherit the bookingo palette instead of rendering unstyled — the
     alternative was editing every legacy template. */
  --primary:#16833F; --primary-dark:#16833F;
  --text-primary:#0B2545; --text-secondary:#5A6962; --text-muted:#8A968F;
  --border:#E2EAE5; --card-bg:#fff; --bg-soft:#F4F7F5;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--slate);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
h1,h2,h3{color:var(--ink); margin:0; line-height:1.2; font-weight:800}
.shell{max-width:var(--shell); margin:0 auto; padding:0 20px}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

/* ---------- header ---------- */
.dn-head{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.dn-head-in{max-width:var(--shell); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:28px}
.dn-logo{display:flex; align-items:center; flex:none; line-height:0}
.dn-logo img{height:30px; width:auto; display:block}
/* footer sits on navy, so the wordmark is knocked out to white there */
.dn-foot-logo{display:inline-flex; align-items:center; margin-bottom:12px; line-height:0}
.dn-foot-logo img{height:30px; width:auto; display:block; background:#fff; padding:6px 10px; border-radius:10px; box-sizing:content-box}
@media (max-width:600px){ .dn-logo img{height:26px} }
.dn-nav{display:flex; gap:18px; margin-left:auto; align-items:center}
.dn-nav a{font-size:.9rem; font-weight:600; color:var(--slate); padding:6px 0; white-space:nowrap; display:inline-flex; align-items:center; gap:7px}
.nav-ic{width:17px; height:17px; flex:none; opacity:.85}
@media (max-width:1240px){ .dn-nav{gap:14px} .dn-nav .nav-ic{display:none} }
.dn-nav a:hover .nav-ic,.dn-nav a.on .nav-ic{opacity:1}
.dn-head-cta .btn{display:inline-flex; align-items:center; gap:7px}
.dn-head-cta .nav-ic{width:17px; height:17px}
.dn-nav a:hover{color:var(--teal)}
.dn-nav a.on{color:var(--teal); box-shadow:inset 0 -2px 0 var(--teal)}
.dn-head-cta{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:8px; font-weight:700; font-size:.9rem; cursor:pointer;
  padding:10px 20px; border:1px solid transparent; white-space:nowrap;
  transition:background .15s,color .15s}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:var(--teal-dark)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn-outline{background:#fff; color:var(--teal); border-color:var(--teal); width:100%}
.btn-outline:hover{background:var(--teal); color:#fff}
.btn-full{width:100%}
.dn-burger{display:none; margin-left:auto; background:none; border:0; font-size:1.5rem; color:var(--ink); cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative; background:linear-gradient(180deg,#EAF6F8 0%,#F4FBFC 100%)}
/* the dropdown panel escapes the hero, so clipping lives on the image */
.hero-in{max-width:var(--shell); margin:0 auto; padding:56px 20px 40px; position:relative; z-index:2}
.hero-copy{max-width:640px}
.hero-eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--slate);
  text-transform:uppercase; margin:0 0 14px}
.hero h1{font-size:2.95rem; letter-spacing:-.035em; line-height:1.1}
.hero h1 em{font-style:normal; color:var(--teal)}
.hero-sub{margin:16px 0 26px; font-size:1.02rem; max-width:430px}

/* search */
.hero-search{display:flex; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px; box-shadow:0 8px 24px rgba(11,37,69,.07); max-width:660px;
  position:relative; z-index:40}
.hs-field{flex:1 1 0; display:flex; align-items:center; gap:9px; padding:6px 11px; min-width:0; position:relative}
.hs-field + .hs-field{border-left:1px solid var(--line)}
.hs-ic{color:var(--teal); flex:none}
.hs-lab{font-size:.72rem; font-weight:700; color:var(--ink); display:block}
.hs-field select{width:100%; border:0; padding:0; font-size:.82rem; color:var(--slate); text-overflow:ellipsis;
  background:transparent; appearance:none; cursor:pointer}

.hs-caret{color:var(--slate); flex:none}

/* trust row */
.hero-trust{display:flex; flex-wrap:wrap; gap:24px; margin-top:26px; width:780px; max-width:100%}
.ht{display:flex; gap:9px; align-items:flex-start; white-space:nowrap}
.ht svg{color:var(--teal); flex:none; margin-top:2px}
.ht b{display:block; font-size:.82rem; color:var(--ink); font-weight:700}
.ht span{font-size:.75rem}

/* ---------- hero visual (right column) ----------
   Absolutely positioned inside .hero so the hero height is still set by the
   copy column. Everything animates with transform/opacity only (compositor
   work, no layout), and .hv-paused stops the loops when scrolled away. */
.hero-visual{position:absolute; right:0; top:0; bottom:0; width:47%; z-index:1;
  overflow:hidden; contain:layout paint; pointer-events:none}
.hero-visual > *{pointer-events:auto}

/* orbit rings + glow behind the client */
.hv-orbit{position:absolute; border-radius:50%; border:1.5px dashed rgba(22,131,63,.28);
  left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg)}
.hv-orbit--outer{width:112%; aspect-ratio:1; animation:hv-spin 90s linear infinite}
.hv-orbit--inner{width:76%; aspect-ratio:1; border-style:solid; border-color:rgba(22,131,63,.14);
  animation:hv-spin 60s linear infinite reverse}
.hv-glow{position:absolute; left:50%; top:52%; width:70%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 45%, rgba(22,131,63,.30) 0%, rgba(22,131,63,.14) 42%, rgba(234,246,248,0) 72%)}

/* client photo: masked so it dissolves into the hero background */
.hv-client{position:absolute; right:12%; bottom:0; top:6%; width:60%; display:block; margin:0}
.hv-client img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block;
  -webkit-mask-image:radial-gradient(ellipse 64% 60% at 52% 46%, #10201A 58%, transparent 100%);
          mask-image:radial-gradient(ellipse 64% 60% at 52% 46%, #10201A 58%, transparent 100%)}

/* floating cards */
.hv-card{position:absolute; display:flex; align-items:center; gap:12px; background:#fff;
  border-radius:16px; padding:14px 16px; box-shadow:0 14px 34px rgba(11,37,69,.12);
  color:var(--ink); text-decoration:none; font-weight:800; font-size:.98rem; line-height:1.18;
  letter-spacing:-.01em; z-index:4; transition:box-shadow .25s ease, transform .25s ease}
.hv-card:hover{box-shadow:0 18px 40px rgba(11,37,69,.18)}
.hv-card:focus-visible{outline:3px solid var(--teal); outline-offset:3px}
.hv-ic{width:44px; height:44px; border-radius:50%; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; flex:none}
.hv-ic svg{width:22px; height:22px}
.hv-ic--rose{background:#F2FAF4; color:#16833F}
.hv-txt{flex:1}
.hv-chev{width:18px; height:18px; color:var(--slate); flex:none}
.hv-card--book{right:6%; top:14%}
.hv-card--compare{right:3%; top:40%}
.hv-card--offers{right:8%; top:66%}

/* before / after */
.hv-ba{position:absolute; left:8%; top:5%; width:clamp(150px,34%,200px); margin:0; z-index:4;
  background:#fff; border-radius:12px; padding:8px 8px 10px; box-shadow:0 14px 34px rgba(11,37,69,.12);
  transform:rotate(-4deg)}
/* square photo inside a softly rounded frame (polaroid-style) */
.hv-ba img{width:100%; height:auto; border-radius:0; display:block}
.hv-ba figcaption{font-size:.72rem; color:var(--slate); text-align:center; margin-top:6px; font-weight:600}
/* slideshow variant: stacked images crossfade; the stage keeps the card's
   aspect so nothing reflows between slides */
.hv-ba-stage{position:relative; display:block; aspect-ratio:190/112; border-radius:0; overflow:hidden;
  background:var(--teal-soft)}
.hv-ba-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .9s ease}
.hv-ba-stage img.is-on{opacity:1}
.hv-ba-tag{position:absolute; bottom:8px; font-size:.62rem; font-weight:700; letter-spacing:.02em;
  padding:3px 8px; border-radius:999px; z-index:2; line-height:1.2}
.hv-ba-tag--b{left:8px; background:rgba(11,37,69,.55); color:#fff}
.hv-ba-tag--a{right:8px; background:var(--teal); color:#fff}
.hv-ba--slides figcaption{color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700}
.hv-ba-stage:focus-visible{outline:3px solid var(--teal); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .hv-ba-stage img{transition:none} }

/* stats card (server-driven counts) */
.hero-stats{position:absolute; left:17%; bottom:6%; z-index:5; background:#fff;
  border-radius:16px; box-shadow:0 14px 34px rgba(11,37,69,.13); padding:16px 20px;
  display:grid; gap:14px; min-width:190px}

/* entrance: stagger in once, then breathe very slowly */
.hv-card,.hv-ba,.hero-visual .hero-stats{opacity:0; transform:translateY(14px)}
.hv-ba{transform:translateY(14px) rotate(-4deg)}
.hero-visual.hv-in .hv-card,.hero-visual.hv-in .hv-ba,.hero-visual.hv-in .hero-stats{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.hero-visual.hv-in .hv-ba{transform:rotate(-4deg)}
.hero-visual.hv-in .hv-card--book{transition-delay:.15s}
.hero-visual.hv-in .hv-ba{transition-delay:.25s}
.hero-visual.hv-in .hv-card--compare{transition-delay:.35s}
.hero-visual.hv-in .hero-stats{transition-delay:.45s}
.hero-visual.hv-in .hv-card--offers{transition-delay:.55s}
.hero-visual.hv-live .hv-card--book{animation:hv-float 8s ease-in-out 1s infinite alternate}
.hero-visual.hv-live .hv-card--compare{animation:hv-float 9s ease-in-out 2.2s infinite alternate}
.hero-visual.hv-live .hv-card--offers{animation:hv-float 8.5s ease-in-out 3.1s infinite alternate}
.hero-visual.hv-live .hero-stats{animation:hv-float 10s ease-in-out 1.6s infinite alternate}
.hero-visual.hv-live .hv-ba{animation:hv-float-tilt 9s ease-in-out 2.6s infinite alternate}
.hero-visual.hv-paused *{animation-play-state:paused}
@keyframes hv-float{from{transform:translateY(0)} to{transform:translateY(-7px)}}
@keyframes hv-float-tilt{from{transform:translateY(0) rotate(-4deg)} to{transform:translateY(-6px) rotate(-3deg)}}
@keyframes hv-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .hv-orbit,.hero-visual.hv-live .hv-card,.hero-visual.hv-live .hv-ba,.hero-visual.hv-live .hero-stats{animation:none}
  .hv-card,.hv-ba,.hero-visual .hero-stats{opacity:1; transform:none; transition:none}
  .hv-ba,.hero-visual.hv-in .hv-ba{transform:rotate(-4deg)}
}
@media (max-width:1180px){
  .hero-visual{width:44%}
  .hv-card{padding:12px 14px; font-size:.9rem; gap:10px}
  .hv-ic{width:38px; height:38px}
  .hv-ba{width:150px; left:6%; top:4%}
  .hero-stats{left:10%; padding:14px 16px; min-width:170px}
  .hv-client{width:66%; right:8%}
}
.hs-row{display:flex; gap:12px; align-items:center}
.hs-row svg{color:var(--teal); flex:none}
.hs-row b{display:block; color:var(--ink); font-size:1.05rem; font-weight:800; line-height:1.1}
.hs-row span{font-size:.75rem}

/* ---------- section furniture ---------- */
.sec{padding:46px 0}
.sec-mist{background:var(--mist)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px}
.sec-head h2{font-size:1.55rem; letter-spacing:-.02em}
.sec-head p{margin:6px 0 0; font-size:.9rem}
.sec-more{color:var(--teal); font-weight:700; font-size:.85rem; white-space:nowrap; flex:none}

/* ---------- offer cards ---------- */
.rail{position:relative}
.rail-track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(214px,1fr);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;
  scrollbar-width:none}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > *{scroll-snap-align:start}
.rail-next{position:absolute; right:-14px; top:38%; width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:0 4px 14px rgba(11,37,69,.14);
  color:var(--ink); display:grid; place-items:center; cursor:pointer; z-index:4}

.offer{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column}
.offer-media{position:relative; aspect-ratio:4/2.7; background:var(--teal-soft); overflow:hidden}
.offer-media img{width:100%; height:100%; object-fit:cover}
.offer-badge{position:absolute; top:8px; right:8px; background:var(--sale); color:#fff;
  font-size:.68rem; font-weight:800; padding:4px 9px; border-radius:5px; letter-spacing:.01em}
/* countdown sits on the image, as in the design */
.cd{position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(11,37,69,.72); backdrop-filter:blur(2px)}
.cd div{text-align:center; padding:5px 2px; color:#fff}
.cd div + div{border-left:1px solid rgba(255,255,255,.18)}
.cd b{display:block; font-size:.95rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums}
.cd span{font-size:.58rem; opacity:.85; letter-spacing:.02em}
.cd.is-over{background:rgba(22,131,63,.85)}

.offer-body{padding:12px 13px 14px; display:flex; flex-direction:column; gap:8px; flex:1}
.offer-title{font-size:.97rem; font-weight:800; color:var(--ink)}
.offer-agency{display:flex; gap:8px; align-items:center; min-width:0}
.oc-logo{width:26px; height:26px; border-radius:5px; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; font-size:.6rem; font-weight:800; flex:none; overflow:hidden}
.oc-logo img{width:100%;height:100%;object-fit:cover}
.oc-meta{min-width:0}
.oc-name{font-size:.78rem; font-weight:700; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.oc-loc{font-size:.7rem; display:flex; align-items:center; gap:3px}
.offer-price{display:flex; align-items:baseline; gap:10px; margin-top:auto; padding-top:2px}
.op-was{font-size:.82rem; color:#8A968F; text-decoration:line-through}
.op-now{font-size:1.12rem; font-weight:800; color:var(--sale)}

/* ---------- specialties ---------- */
.treats{display:grid; grid-template-columns:repeat(10,1fr); gap:10px}
.treat{text-align:center; padding:6px 2px}
.treat-ic{width:100px; height:100px; margin:0 auto 10px; border-radius:50%; background:var(--teal);
  color:#fff; display:grid; place-items:center; overflow:hidden}
/* uploaded photo fills the whole circle; line-icons show white on the teal */
.treat-ic.has-img{background:none}
.treat-ic.has-img img{width:100%; height:100%; object-fit:cover; display:block}
.treat-nm{font-size:.76rem; font-weight:600; color:var(--ink); line-height:1.3}
.treat:hover .treat-ic{background:var(--teal-dark)}

/* ---------- agency cards ---------- */
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.agency{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column}
.agency-media{position:relative; aspect-ratio:4/2.8; background:var(--teal-soft)}
.agency-media img{width:100%; height:100%; object-fit:cover}
.fav{position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.94); border:0; display:grid; place-items:center; cursor:pointer; color:var(--slate)}
.fav[aria-pressed="true"]{color:var(--sale)}
.agency-body{padding:12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.agency-name{font-size:.95rem; font-weight:800; color:var(--ink)}
.agency-loc{font-size:.75rem; display:flex; align-items:center; gap:4px}
.agency-rate{display:flex; align-items:center; gap:6px; font-size:.75rem; margin-bottom:6px}
.stars{color:var(--amber); letter-spacing:-1px; font-size:.8rem}
.agency-rate b{color:var(--ink); font-weight:700}
.verified{display:inline-flex; align-items:center; gap:3px; color:var(--teal); font-size:.68rem; font-weight:700}

/* ---------- emirates ---------- */
.grid7{display:grid; grid-template-columns:repeat(7,1fr); gap:12px}
.emirate{position:relative; aspect-ratio:1/1.06; border-radius:var(--radius); overflow:hidden;
  background:#123; display:block}
.emirate img{width:100%; height:100%; object-fit:cover}
.emirate::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(8,26,32,.82) 100%)}
.emirate-txt{position:absolute; left:12px; right:12px; bottom:11px; z-index:2; color:#fff}
.emirate-txt b{display:block; font-size:.95rem; font-weight:800; line-height:1.2}
.emirate-txt span{font-size:.73rem; opacity:.92}

/* ---------- footer ---------- */
.dn-foot{background:#0B2545; color:#9FB6BD; margin-top:14px; padding:44px 0 22px; font-size:.85rem}
.dn-foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px}
.dn-foot h4{color:#fff; font-size:.9rem; font-weight:700; margin:0 0 12px}
.dn-foot a{display:block; padding:4px 0; color:#9FB6BD}
.dn-foot a:hover{color:#fff}

.dn-foot-bot{border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:16px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.78rem}

/* ---------- empty state ---------- */
.empty{border:1px dashed var(--line); border-radius:var(--radius); padding:30px;
  text-align:center; background:#fff}
.empty b{display:block; color:var(--ink); margin-bottom:4px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .treats{grid-template-columns:repeat(5,1fr)}
  .grid5{grid-template-columns:repeat(3,1fr)}
  .grid7{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .dn-nav,.dn-head-cta{display:none}
  .dn-burger{display:block}
  /* mobile: the visual collapses to a compact block under the copy —
     client + stats only; secondary cards, orbit and before/after go. */
  .hero-visual{position:relative; width:auto; inset:auto; margin-top:26px; overflow:visible; contain:none;
    display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center}
  .hv-card,.hv-ba,.hv-orbit{display:none}
  .hv-glow{left:75px; top:50%; width:150px; transform:translate(-50%,-50%)}
  .hv-client{position:relative; inset:auto; width:150px; height:150px; border-radius:50%; overflow:hidden;
    background:var(--teal-soft)}
  .hv-client img{-webkit-mask-image:none; mask-image:none; object-position:50% 25%}
  .hero-stats{position:static; grid-template-columns:1fr; min-width:0; gap:10px; padding:14px 16px}
  .hero-visual .hero-stats{opacity:1; transform:none}
  .hero h1{font-size:2.3rem}
  .hero-in{padding:38px 20px 32px}
}
.hs-btn-txt-full{display:none}
@media (max-width:680px){
  .hs-btn-txt-full{display:inline}
  /* App-like search card: stacked rows, roomy touch targets, icon chips,
     a divider between fields, and a prominent full-width button — matching
     the mobile concept rather than a squeezed desktop row. */
  .hero-search{flex-direction:column; gap:0; padding:8px; border-radius:18px;
    box-shadow:0 12px 30px rgba(11,37,69,.10)}
  .hero-search .dd{width:100%}
  .hero-search .dd + .dd{border-top:1px solid var(--line)}
  .dd-btn{padding:15px 12px; gap:14px; border-radius:14px; min-height:64px}
  /* icon chip: the .dd-ic svg keeps its natural size, the chip is a background
     box behind it via padding — don't stretch the svg to fill 48px */
  .hero-search .dd-ic{box-sizing:content-box; width:22px; height:22px; padding:13px;
    border-radius:14px; background:var(--teal-soft); color:var(--teal)}
  .hero-search .dd-lab{font-size:.95rem; font-weight:800; color:var(--ink); margin-bottom:2px}
  .hero-search .dd-val{font-size:.9rem; color:var(--slate)}
  .hero-search .dd-caret{width:20px; height:20px; stroke-width:2.4}
  /* prominent full-width search button */
  .hero-search .btn{width:100%; margin-top:8px; padding:17px; font-size:1.05rem;
    border-radius:14px; font-weight:800; box-shadow:0 8px 20px rgba(22,131,63,.28)}
  .hero-search .btn svg{width:20px; height:20px}
  /* dropdown panel fills the card width and is easy to tap */
  /* Mobile: the dropdown becomes an app-style bottom sheet — slides up from
     the bottom over a dimmed backdrop, with big tappable rows. Far more
     usable on a phone than a small floating box. */
  .dd.open::before{content:''; position:fixed; inset:0; background:rgba(11,37,69,.45);
    z-index:200; animation:ddFade .2s ease}
  .hero-search .dd-panel{position:fixed; left:0; right:0; bottom:0; top:auto;
    min-width:0; width:100%; max-height:70vh; z-index:201;
    border-radius:22px 22px 0 0; padding:8px 10px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(11,37,69,.22); animation:ddSlide .26s cubic-bezier(.22,.8,.3,1)}
  /* grab handle + title bar on the sheet */
  .hero-search .dd-panel::before{content:''; display:block; width:40px; height:4px; border-radius:99px;
    background:#D3DEE1; margin:6px auto 12px}
  .dd-opt{padding:15px 16px; font-size:1rem; border-radius:12px; min-height:54px}
  .dd-opt[aria-selected="true"]::after{font-size:1rem}
  .dd-sep{font-size:.72rem; padding:6px 16px 8px}
  .dd-opt.dd-all{margin-top:6px; padding-top:16px}
@keyframes ddSlide{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ddFade{from{opacity:0}to{opacity:1}}
  /* near-me becomes a clear tappable pill under the card */
  .hero-near{margin-top:16px; font-size:.95rem; justify-content:center; width:100%}

  .hero-search{flex-wrap:nowrap}
  .hs-field + .hs-field{border-left:0; border-top:1px solid var(--line)}
  .treats{grid-template-columns:repeat(3,1fr)}
  .grid5{grid-template-columns:repeat(2,1fr)}
  .grid7{grid-template-columns:repeat(2,1fr)}
  .dn-foot-grid{grid-template-columns:1fr 1fr}
  .sec-head{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

/* ==========================================================================
   Inner pages: directory, offers, agency profile, specialties, viewing
   ========================================================================== */
.pg-head{background:linear-gradient(180deg,#EAF6F8,#F7FCFD); border-bottom:1px solid var(--line); padding:30px 0}
.pg-head h1{font-size:1.9rem; letter-spacing:-.02em}
.pg-head p{margin:8px 0 0}
.crumb{font-size:.78rem; margin:0 0 10px; color:var(--slate)}
.crumb a{color:var(--teal); font-weight:600}

.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:18px 0 4px}
.fl{display:flex; flex-direction:column; gap:5px}
.fl label{font-size:.72rem; font-weight:700; color:var(--ink)}
.fl select,.fl input{border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:9px 12px; font-size:.85rem; color:var(--ink); min-width:170px}

.count{font-size:.85rem; margin:16px 0 14px}
.count b{color:var(--ink)}

.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid2{display:grid; grid-template-columns:1.55fr 1fr; gap:26px; align-items:start}

.chip{display:inline-block; background:var(--teal-soft); color:var(--teal); border-radius:99px;
  padding:5px 11px; font-size:.75rem; font-weight:700; margin:0 6px 6px 0}
.chip-grey{background:#F1F5F6; color:var(--slate)}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.card + .card{margin-top:16px}
.card h2{font-size:1.1rem; margin:0 0 12px}
.card h3{font-size:.95rem; margin:0 0 8px}

.price-row{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.price-row:last-child{border-bottom:0}
.price-row b{color:var(--ink); font-weight:600}
.price-row span{color:var(--teal); font-weight:700; white-space:nowrap}

/* agency profile hero */
.cp-hero{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.cp-logo{width:74px; height:74px; border-radius:12px; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; font-size:1.3rem; font-weight:800; flex:none; overflow:hidden}
.cp-logo img{width:100%;height:100%;object-fit:cover}
.cp-meta h1{font-size:1.6rem; margin:0 0 6px}
.cp-line{display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:.85rem}
.badge-verified{display:inline-flex; align-items:center; gap:4px; background:var(--teal-soft);
  color:var(--teal); border-radius:99px; padding:3px 10px; font-size:.72rem; font-weight:800}
.badge-unclaimed{background:#F1F5F6; color:var(--slate); border-radius:99px; padding:3px 10px;
  font-size:.72rem; font-weight:700}

/* viewing form */
.bk{position:sticky; top:86px}
.bk-price{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.bk-price .was{text-decoration:line-through; color:#8A968F; font-size:.9rem}
.bk-price .now{font-size:1.5rem; font-weight:800; color:var(--sale)}
.field{margin-bottom:11px}
.field label{display:block; font-size:.75rem; font-weight:700; color:var(--ink); margin-bottom:4px}
.field input,.field select,.field textarea{width:100%; border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-size:.87rem; font-family:inherit; color:var(--ink); background:#fff}

.field-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.note{font-size:.74rem; color:var(--slate); margin-top:9px; line-height:1.5}
.alert{background:#F2FAF4; border:1px solid #DDF2E3; color:#A32626; border-radius:8px;
  padding:10px 13px; font-size:.83rem; margin-bottom:12px}

/* offer detail */
.od-badge{display:inline-block; background:var(--sale); color:#fff; font-weight:800; font-size:.8rem;
  padding:5px 12px; border-radius:6px}
.od-cd{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0 4px}
.od-cd div{background:var(--ink); color:#fff; border-radius:8px; padding:10px 4px; text-align:center}
.od-cd b{display:block; font-size:1.4rem; font-weight:800; font-variant-numeric:tabular-nums}
.od-cd span{font-size:.65rem; opacity:.85}
.od-cd.is-over div{background:var(--sale)}

/* specialties index */
.tr-card{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.tr-card:hover{border-color:var(--teal)}
.tr-card b{display:block; color:var(--ink); font-size:.98rem; margin-bottom:4px}
.tr-card span{font-size:.8rem}

/* booked confirmation */
.done{max-width:620px; margin:50px auto; text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:38px 30px}
.done-ic{width:60px; height:60px; border-radius:50%; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; margin:0 auto 16px}
.done h1{font-size:1.5rem; margin-bottom:8px}
.done .ref{display:inline-block; background:var(--teal-soft); color:var(--teal); font-weight:800;
  letter-spacing:.06em; padding:8px 18px; border-radius:8px; margin:14px 0}

@media (max-width:1080px){ .grid4{grid-template-columns:repeat(3,1fr)} .grid2{grid-template-columns:1fr} .bk{position:static} }
@media (max-width:760px){ .grid4,.grid3{grid-template-columns:repeat(2,1fr)} .fl select,.fl input{min-width:0;width:100%} .fl{flex:1 1 140px} }
@media (max-width:520px){ .grid4,.grid3{grid-template-columns:1fr} .field-2{grid-template-columns:1fr} }

/* ==========================================================================
   Custom dropdown (dd)
   Native <select> popups are drawn by the OS and can't be styled, which is
   why the hero search used to drop a plain grey list over the page. This is
   a button + listbox that we control. Keyboard and screen-reader accessible.
   ========================================================================== */
.dd{position:relative; flex:1 1 0; min-width:0}
.dd-btn{width:100%; display:flex; align-items:center; gap:9px; background:transparent;
  border:0; padding:6px 11px; cursor:pointer; text-align:left; border-radius:8px}
.dd-btn:hover{background:#F7FBFC}
.dd-ic{color:var(--teal); flex:none; width:19px; height:19px}
.dd-txt{flex:1; min-width:0}
.dd-lab{display:block; font-size:.72rem; font-weight:700; color:var(--ink); line-height:1.3}
.dd-val{display:block; font-size:.82rem; color:var(--slate); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.dd-val.is-set{color:var(--ink); font-weight:600}
.dd-caret{color:var(--slate); flex:none; transition:transform .15s}
.dd.open .dd-caret{transform:rotate(180deg)}

.dd-panel{position:absolute; z-index:60; top:calc(100% + 8px); left:0; min-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px rgba(11,37,69,.16); padding:6px; display:none;
  max-height:302px; overflow-y:auto; overscroll-behavior:contain}
.dd.open .dd-panel{display:block}
.dd-panel::-webkit-scrollbar{width:8px}
.dd-panel::-webkit-scrollbar-thumb{background:#DCE7EA; border-radius:99px}

.dd-opt{display:flex; align-items:center; gap:8px; width:100%; padding:9px 11px;
  border-radius:8px; font-size:.87rem; color:var(--ink); cursor:pointer;
  background:none; border:0; text-align:left; line-height:1.3}
.dd-opt:hover,.dd-opt.active{background:var(--teal-soft); color:var(--teal)}
.dd-opt[aria-selected="true"]{font-weight:700; color:var(--teal)}
.dd-opt[aria-selected="true"]::after{content:'✓'; margin-left:auto; font-size:.8rem}
.dd-opt.dd-all{border-top:1px solid var(--line); border-radius:0 0 8px 8px;
  margin-top:4px; padding-top:11px; color:var(--teal); font-weight:700}
.dd-sep{font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8A968F; padding:9px 11px 4px}

/* the inner-page filter selects: replace the default OS arrow only */
.fl select{appearance:none; -webkit-appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B7079' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; cursor:pointer}

@media (max-width:680px){
  .dd-panel{position:fixed; left:12px; right:12px; top:auto; min-width:0; max-height:60vh}
}

/* ==========================================================================
   UAE phone input — sticky +971 prefix with flag, live validation
   ========================================================================== */
.ph-wrap{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:8px;
  background:#fff; overflow:hidden; transition:border-color .15s, box-shadow .15s}

.ph-wrap.is-ok{border-color:var(--teal)}
.ph-wrap.is-bad{border-color:var(--sale)}


.ph-prefix{display:flex; align-items:center; gap:6px; padding:0 10px; flex:none;
  background:#F4F9FA; border-right:1px solid var(--line); color:var(--ink);
  font-size:.87rem; font-weight:700; user-select:none}
.ph-flag{display:inline-flex; line-height:1} .ph-flag svg{border-radius:2px; display:block}
.ph-cc{font-variant-numeric:tabular-nums}

.ph-input{flex:1; min-width:0; border:0 !important; border-radius:0 !important;
  padding:10px 12px !important; font-size:.87rem; font-family:inherit; color:var(--ink);
  letter-spacing:.03em; background:transparent}


.ph-hint{display:block; font-size:.74rem; margin-top:5px; min-height:1em; color:var(--slate)}
.ph-hint.is-ok{color:var(--teal); font-weight:600}
.ph-hint.is-ok::before{content:'✓ '}
.ph-hint.is-bad{color:var(--sale); font-weight:600}

/* the dashboard/admin forms use .field, so keep the wrap flush with it */
.field .ph-wrap{width:100%}

/* ── CMS page body (about, privacy, terms…) ───────────────────────────────── */
.cms{line-height:1.75}
.cms h1{font-size:1.6rem; margin:0 0 14px}
.cms h2{font-size:1.15rem; margin:26px 0 10px}
.cms h3{font-size:1rem; margin:20px 0 8px}
.cms p{margin:0 0 14px}
.cms ul,.cms ol{margin:0 0 16px; padding-left:22px}
.cms li{margin-bottom:7px}
.cms a{color:var(--teal); font-weight:600}
.cms a:hover{text-decoration:underline}
.cms strong{color:var(--ink)}
.cms table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.9rem}
.cms th,.cms td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line)}
.cms th{color:var(--ink); font-weight:700}
.cms blockquote{margin:0 0 16px; padding:12px 16px; background:var(--mist);
  border-left:3px solid var(--teal); border-radius:0 8px 8px 0}
.cms hr{border:0; border-top:1px solid var(--line); margin:24px 0}

/* ==========================================================================
   Login modal — centred dialog on desktop, bottom sheet on mobile
   ========================================================================== */
.dnm{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center}
.dnm[hidden]{display:none}

.dnm-backdrop{position:absolute; inset:0; background:rgba(11,37,69,.55);
  opacity:0; transition:opacity .2s ease; backdrop-filter:blur(2px)}
.dnm.is-open .dnm-backdrop{opacity:1}

.dnm-panel{position:relative; z-index:1; width:100%; max-width:400px; background:#fff;
  border-radius:16px; padding:30px 28px 24px; box-shadow:0 24px 60px rgba(11,37,69,.28);
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .2s ease, transform .2s ease}
.dnm.is-open .dnm-panel{opacity:1; transform:translateY(0) scale(1)}

.dnm-x{position:absolute; top:12px; right:14px; width:32px; height:32px; border:0;
  background:none; font-size:1.6rem; line-height:1; color:var(--slate); cursor:pointer;
  border-radius:8px}
.dnm-x:hover{background:#F4F9FA; color:var(--ink)}
.dnm-grip{display:none}

.dnm-title{font-size:1.3rem; margin:0 0 4px}
.dnm-sub{font-size:.87rem; margin:0 0 18px}
.dnm-error{background:#F2FAF4; border:1px solid #DDF2E3; color:#A32626;
  border-radius:8px; padding:10px 13px; font-size:.84rem; margin-bottom:12px}
.dnm-error[hidden]{display:none}
.dnm #dnm-submit{margin-top:4px}

/* ── mobile: slide up from the bottom ─────────────────────────────────────── */
@media (max-width:640px){
  .dnm{align-items:flex-end}
  .dnm-panel{max-width:none; border-radius:20px 20px 0 0; padding:12px 20px 28px;
    /* clears the iOS home indicator */
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    transform:translateY(100%); transition:transform .26s cubic-bezier(.32,.72,0,1), opacity .2s}
  .dnm.is-open .dnm-panel{transform:translateY(0)}
  .dnm-grip{display:block; width:38px; height:4px; border-radius:99px; background:#D8E3E6;
    margin:0 auto 14px}
  .dnm-x{top:8px; right:10px}
  .dnm-title{font-size:1.2rem; padding-right:34px}
  /* 16px stops iOS Safari zooming the page when the field is focused */
  .dnm .field input{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .dnm-backdrop,.dnm-panel{transition:none}
}

/* ── review star picker ───────────────────────────────────────────────────── */
.rv-stars{display:inline-flex; flex-direction:row-reverse; gap:4px}
.rv-stars input{position:absolute; opacity:0; width:0; height:0}
.rv-stars label{font-size:2rem; line-height:1; color:#E2EAE5; cursor:pointer; transition:color .12s}
/* reverse order + sibling selector lights up the chosen star and those before it */
.rv-stars input:checked ~ label,
.rv-stars label:hover,
.rv-stars label:hover ~ label{color:var(--amber)}


/* ── review trust badges ──────────────────────────────────────────────────── */
.rv-badge{display:inline-flex; align-items:center; gap:4px; border-radius:99px;
  padding:2px 9px; font-size:.7rem; font-weight:800; letter-spacing:.01em}
.rv-badge.is-viewing{background:var(--teal-soft); color:var(--teal-dark)}
.rv-badge.is-visit{background:var(--teal-soft); color:var(--teal)}
.rv-badge.is-none{background:#F1F5F6; color:var(--slate)}
.rv-item{padding:14px 0; border-bottom:1px solid var(--line)}
.rv-item:last-child{border-bottom:0}
.rv-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px}
.note.is-bad{color:var(--sale); font-weight:600}

/* ==========================================================================
   CMS page components
   A small kit the content HTML composes from, so editors get a designed page
   without touching CSS and every page stays visually consistent.
   ========================================================================== */

/* ── page hero: copy left, illustration right ─────────────────────────────── */
.pg-hero{background:linear-gradient(180deg,#EAF6F8 0%,#F7FCFD 100%); border-bottom:1px solid var(--line)}
.pg-hero-in{max-width:var(--shell); margin:0 auto; padding:34px 20px 40px;
  display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:center}
.pg-hero h1{font-size:2.5rem; letter-spacing:-.03em; margin:6px 0 14px}
.pg-hero .lead{font-size:1.02rem; max-width:52ch; margin:0}
.pg-hero-art{justify-self:end; max-width:320px; width:100%}

/* ── icon badges ──────────────────────────────────────────────────────────── */
.ic{width:24px; height:24px; display:block}
.ic-badge{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; flex:none}
.ic-badge .ic{width:28px; height:28px}
.ic-badge.is-teal{background:var(--teal-soft); color:var(--teal)}
.ic-badge.is-green{background:#E3F5EA; color:#1B8A55}
.ic-badge.is-blue{background:#E6EFFB; color:#2C6FD1}
.ic-badge.is-grey{background:#EEF3F0; color:#5A6962}
.ic-badge.is-red{background:#F2FAF4; color:var(--sale)}
.ic-badge.is-amber{background:#FEF3DC; color:#C98A08}
.ic-badge.sm{width:40px; height:40px}
.ic-badge.sm .ic{width:20px; height:20px}

/* ── three-level card grid ────────────────────────────────────────────────── */
.lvl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 30px}
.lvl{border-radius:14px; padding:22px 20px; border:1px solid var(--line); background:#fff}
.lvl.is-green{background:#F4FBF7; border-color:#CDEBDA}
.lvl.is-blue{background:#F3F8FE; border-color:#D3E3F7}
.lvl.is-grey{background:#F8FAFB; border-color:#E2EAE5}
.lvl h3{font-size:1.12rem; margin:14px 0 6px}
.lvl .kicker{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#1B8A55; margin:0 0 8px}
.lvl p{font-size:.9rem; margin:0}

/* ── step flow inside a card ──────────────────────────────────────────────── */
.flow{display:flex; align-items:flex-start; gap:6px; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(11,37,69,.08)}
.flow-step{flex:1; text-align:center; min-width:0}
.flow-step .ic-badge{margin:0 auto 7px}
.flow-step span{display:block; font-size:.68rem; line-height:1.35; color:var(--slate)}
.flow-sep{color:#AEB9B2; align-self:center; padding-top:6px; flex:none}
.flow-sep .ic{width:16px; height:16px}

/* ── two-column info blocks ───────────────────────────────────────────────── */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 34px; margin:8px 0 4px}
.info{display:flex; gap:14px; align-items:flex-start}
.info-body h3{font-size:1.05rem; margin:6px 0 8px}
.info-body p{font-size:.9rem; margin:0 0 10px}
.info-body ul{margin:0; padding-left:0; list-style:none}
.info-body li{position:relative; padding-left:16px; font-size:.9rem; margin-bottom:7px}
.info-body li::before{content:''; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--sale)}

/* ── callouts ─────────────────────────────────────────────────────────────── */
.callout{border-radius:12px; padding:14px 16px; font-size:.87rem; display:flex; gap:11px; align-items:flex-start}
.callout .ic{flex:none; margin-top:1px}
.callout.is-warn{background:#F2FAF4; border:1px solid #DDF2E3; color:#0F5A2B}
.callout.is-info{background:var(--mist); border:1px solid var(--line); color:var(--slate)}
.callout b{display:block; margin-bottom:2px}

/* ── rating example ───────────────────────────────────────────────────────── */
.rate-demo{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  background:var(--mist); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px}
.rate-score{text-align:center}
.rate-score .stars{font-size:1.25rem; letter-spacing:1px}
.rate-score b{display:block; font-size:1.5rem; color:var(--ink); line-height:1.1}
.rate-score span{font-size:.72rem}
.rate-order{display:grid; gap:6px}
.rate-row{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:9px; padding:8px 11px; font-size:.8rem; font-weight:700; color:var(--ink)}
.rate-row .ic{width:18px; height:18px}
.rate-row em{font-style:normal; font-weight:500; color:var(--slate); margin-left:auto; font-size:.74rem}

/* ── closing CTA band ─────────────────────────────────────────────────────── */
.cta-band{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--mist); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-top:26px}
.cta-band .cta-body{flex:1; min-width:220px}
.cta-band h3{font-size:1.05rem; margin:0 0 4px}
.cta-band p{font-size:.88rem; margin:0}

@media (max-width:900px){
  .pg-hero-in{grid-template-columns:1fr; gap:22px; padding:28px 20px 32px}
  .pg-hero-art{display:none}
  .pg-hero h1{font-size:1.95rem}
  .lvl-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr; gap:22px}
}
@media (max-width:520px){
  .flow{flex-wrap:wrap; gap:12px}
  .flow-step{flex:0 0 30%}
  .flow-sep{display:none}
  .rate-demo{grid-template-columns:1fr}
}

/* .cms a{color:var(--teal)} was repainting button labels teal-on-teal, which
   made the CTA button render as an empty coloured box. Buttons keep their own
   colours inside CMS content. */
.cms .btn{color:#fff}
.cms .btn-teal{color:#fff !important}
.cms .btn-ghost,.cms .btn-outline{color:var(--teal) !important}
.cms .btn:hover{text-decoration:none}

/* a touch more separation between the three level cards */
.lvl.is-green{background:#EFF9F3; border-color:#BFE5D0}
.lvl.is-blue{background:#EEF5FD; border-color:#C7DCF4}
.lvl.is-grey{background:#F5F8F9; border-color:#DFE8EA}

/* admin-uploaded SVG icons render at the same size as the built-ins */
.treat-ic svg{width:44px;height:44px;display:block}

/* ── specialty price panel ────────────────────────────────────────────────── */
.price-panel{border-color:var(--teal); background:linear-gradient(180deg,#F2FBFB 0%,#fff 60%)}
.pp-main{display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:center}
.pp-label{font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--teal)}
.pp-range{font-size:2.1rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.15; margin:4px 0 6px}
.pp-range span{color:var(--slate); font-weight:600; margin:0 2px}
.pp-basis{font-size:.85rem; margin:0}
.pp-spread{display:grid; gap:5px}
.pp-row{display:flex; justify-content:space-between; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:8px 13px; font-size:.85rem}
.pp-row span{color:var(--slate)}
.pp-row b{color:var(--ink)}
.pp-row.is-mid{border-color:var(--teal); background:var(--teal-soft)}
.pp-row.is-mid b{color:var(--teal-dark)}
.pp-cities{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.pp-cities b{display:block; font-size:.88rem; color:var(--ink); margin-bottom:8px}
.pp-cities table{width:100%; border-collapse:collapse; font-size:.85rem}
.pp-cities th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--slate); padding:6px 8px; border-bottom:1px solid var(--line)}
.pp-cities td{padding:8px; border-bottom:1px solid var(--line)}
.pp-cities tr:last-child td{border-bottom:0}
@media (max-width:700px){ .pp-main{grid-template-columns:1fr; gap:16px} .pp-range{font-size:1.7rem} }

/* ==========================================================================
   Smart field kit — icon-prefixed inputs with live inline validation.
   Opt in with class="ff" on a wrapper; JS in field-kit.js drives the state.
   ========================================================================== */
.ff{position:relative; margin-bottom:18px}
.ff-label{display:block; font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:6px}
.ff-label .req{color:var(--sale); margin-left:2px}
.ff-wrap{position:relative; display:flex; align-items:center;
  border:1.5px solid var(--line); border-radius:10px; background:#fff;
  transition:border-color .15s, box-shadow .15s}

.ff-ico{display:grid; place-items:center; width:42px; flex:none; color:var(--slate); transition:color .15s}
.ff-ico .ic{width:19px; height:19px}
.ff-wrap:focus-within .ff-ico{color:var(--teal)}
.ff-wrap input,.ff-wrap select,.ff-wrap textarea{flex:1; min-width:0; border:0 !important;
  background:transparent; padding:11px 13px 11px 0 !important; font-size:.92rem; font-family:inherit;
  color:var(--ink); border-radius:0 !important}
.ff-wrap select{outline:none !important; box-shadow:none !important}
.ff-wrap textarea{padding-top:11px !important; resize:vertical; min-height:84px}
.ff-wrap select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px !important;
  color:var(--ink)}
.ff-wrap select:required:invalid{color:var(--slate)}   /* grey "Select city" placeholder */
.ff-wrap option{color:var(--ink); padding:8px}
.ff-wrap option[value=""]{color:var(--slate)}
/* state icon: fixed slot on the right, never overlaps the caret */
.ff-state{width:36px; flex:none; display:grid; place-items:center; opacity:0; transform:scale(.6);
  transition:opacity .18s, transform .18s; margin-right:4px}
.ff-state .ic{width:19px; height:19px}
.ff.is-ok .ff-state.ok{opacity:1; transform:scale(1); color:var(--teal)}
.ff.is-bad .ff-state.bad{opacity:1; transform:scale(1); color:var(--sale)}
.ff.is-ok .ff-wrap{border-color:var(--teal)}
.ff.is-bad .ff-wrap{border-color:var(--sale)}

.ff-msg{font-size:.76rem; margin-top:5px; min-height:1em; color:var(--slate); transition:color .15s}
.ff.is-bad .ff-msg{color:var(--sale); font-weight:600}
.ff.is-ok .ff-msg{color:var(--teal); font-weight:600}
/* V22.110 — one success icon (a green circle with a white check) instead of the "✓" character */
.ff-msg .m-ok::before,.ff-msg.is-ok::before,.ip-msg.is-ok::before{content:'';display:inline-block;flex:none;width:14px;height:14px;margin-right:5px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230F6B3E'/%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* select chevron — sits in its own slot, select padding-right reserves the room */
.ff-sel-caret{position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none;
  color:var(--slate); width:18px; height:18px; transition:transform .15s}
.ff-wrap:focus-within .ff-sel-caret{color:var(--teal); transform:translateY(-50%) rotate(180deg)}
/* password reveal */
.ff-eye{width:40px; flex:none; border:0; background:transparent; cursor:pointer; color:var(--slate);
  display:grid; place-items:center}
.ff-eye:hover{color:var(--ink)}
/* char counter for textareas */
.ff-count{position:absolute; right:2px; bottom:-18px; font-size:.72rem; color:var(--slate)}

.geo-btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;color:var(--teal);border-color:var(--line)}
.geo-btn:hover{border-color:var(--teal);background:var(--teal-soft)}

/* ── styled select panel (field kit) ──────────────────────────────────────── */
.ff-dd{position:relative}
.ff-dd-panel{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50;
  background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(11,37,69,.16);
  max-height:260px; overflow-y:auto; padding:5px; display:none}
.ff-dd.open .ff-dd-panel{display:block}
.ff-dd-opt{padding:9px 12px; border-radius:7px; font-size:.9rem; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; gap:8px}
.ff-dd-opt:hover,.ff-dd-opt.active{background:var(--teal-soft); color:var(--teal-dark)}
.ff-dd-opt.sel{font-weight:700}
.ff-dd-opt[data-v=""]{color:var(--slate)}
.ff-dd.open .ff-sel-caret{transform:translateY(-50%) rotate(180deg); color:var(--teal)}

/* simple agency list (city pages) */
.agency-list{display:grid; gap:10px}
.agency-row{display:flex; justify-content:space-between; align-items:center; gap:14px; background:#fff;
  border:1px solid var(--line); border-radius:11px; padding:14px 18px; text-decoration:none; transition:border-color .15s}
.agency-row:hover{border-color:var(--teal)}
.agency-row b{color:var(--ink); font-size:.95rem}
.agency-meta{display:block; font-size:.8rem; color:var(--slate); margin-top:3px}
.agency-rate{color:var(--amber); font-weight:700; font-size:.88rem; white-space:nowrap}
.agency-rate em{font-style:normal; color:var(--slate); font-weight:500}

/* ── agency card placeholder + near-me links ──────────────────────────────── */
.agency-media.is-placeholder{display:grid; place-items:center;
  background:linear-gradient(135deg,var(--teal-soft),#EAF6F8); color:var(--teal)}
.agency-media.is-placeholder svg{width:52px; height:52px; opacity:.55}
.agency-branch{display:inline-block; font-size:.7rem; font-weight:700; color:var(--teal);
  background:var(--teal-soft); border-radius:99px; padding:1px 8px; vertical-align:middle; margin-left:4px}
.agency-rate-none{font-size:.8rem; color:var(--slate)}
.hero-near{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.85rem;
  font-weight:700; color:var(--teal); text-decoration:none}
.hero-near:hover{text-decoration:underline}
.near-chip{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.84rem;
  font-weight:700; color:var(--teal); text-decoration:none; border:1px solid var(--teal);
  border-radius:99px; padding:7px 14px; background:var(--teal-soft)}
.near-chip:hover{background:var(--teal); color:#fff}

.book-consent{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--slate);margin:4px 0 12px;cursor:pointer;line-height:1.4}
.book-consent input{margin-top:2px;flex:none}

/* login modal logo */
.dnm-logo{height:32px; width:auto; display:block; margin:2px auto 16px}
.dnm-title{font-size:1.3rem; margin:0 0 4px; text-align:center}
.dnm-sub{font-size:.87rem; margin:0 0 18px; text-align:center}
@media (max-width:640px){ .dnm-logo{margin-top:6px} }

/* ── agency register: marketing pitch column ──────────────────────────────── */
.reg-eyebrow{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal); margin-bottom:10px}
.reg-h{font-size:2rem; line-height:1.18; letter-spacing:-.02em; color:var(--ink); margin:0 0 14px; font-weight:800}
.reg-h span{color:var(--teal)}
.reg-lead{font-size:1rem; color:var(--slate); line-height:1.6; margin:0 0 26px; max-width:440px}
.reg-feats{display:grid; gap:18px; margin-bottom:26px}
.reg-feat{display:flex; gap:15px; align-items:flex-start}
.reg-feat b{display:block; color:var(--ink); font-size:1.02rem; margin-bottom:3px}
.reg-feat p{margin:0; font-size:.9rem; color:var(--slate); line-height:1.55; max-width:360px}
.reg-ic{width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center}
.reg-ic .ic{width:22px; height:22px}
.reg-ic.sm{width:34px; height:34px; border-radius:10px}
.reg-ic.sm .ic{width:17px; height:17px}
.reg-ic.is-teal{background:#DCF3F2; color:#16833F}
.reg-ic.is-blue{background:#E3ECFB; color:#3B6FE0}
.reg-ic.is-green{background:#DFF3E6; color:#1B8A55}
.reg-ic.is-purple{background:#ECE7FB; color:#6B4FD0}
.reg-quote{position:relative; background:var(--teal-soft); border-radius:14px; padding:20px 22px; margin-bottom:22px}
.reg-q{width:26px; height:26px; color:var(--teal); opacity:.55; margin-bottom:6px}
.reg-quote p{margin:0 0 12px; font-size:.96rem; color:var(--ink); line-height:1.55; font-style:italic}
.reg-by b{display:block; color:var(--ink); font-size:.86rem}
.reg-by span{font-size:.8rem; color:var(--slate)}
.reg-stats{display:flex; gap:26px; flex-wrap:wrap; padding-top:6px}
.reg-stats > div{display:flex; gap:9px; align-items:center}
.reg-stats b{display:block; color:var(--ink); font-size:1.15rem; line-height:1}
.reg-stats span{font-size:.76rem; color:var(--slate)}
@media (max-width:760px){ .reg-h{font-size:1.6rem} .reg-stats{gap:18px} }

/* ── agency page: gallery, tabs, features, map ────────────────────────────── */
.cp-gallery{display:grid; grid-template-columns:2fr 1fr; gap:10px; margin-bottom:18px; height:340px}
.cp-gallery.is-empty{grid-template-columns:1fr}
.cp-g-main{position:relative; border-radius:14px; overflow:hidden; height:100%}
.cp-g-main img{width:100%; height:100%; object-fit:cover; display:block}
.cp-g-side{display:grid; grid-template-rows:1fr 1fr; gap:10px; height:100%}
.cp-g-side img{width:100%; height:100%; object-fit:cover; border-radius:14px; display:block}
.cp-g-count{position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px;
  background:rgba(11,37,69,.82); color:#fff; font-size:.82rem; font-weight:600; padding:8px 13px; border-radius:9px}
.cp-g-count .ic{width:16px; height:16px}
.cp-g-placeholder{height:340px; border-radius:14px; display:grid; place-items:center; gap:8px;
  background:linear-gradient(135deg,var(--teal-soft),#EAF6F8); color:var(--teal)}
.cp-g-placeholder svg{width:70px; height:70px; opacity:.5}
.cp-g-placeholder span{font-size:.9rem; color:var(--slate)}
.cp-tabs{display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto}
.cp-tabs a{padding:0 0 12px; font-size:.92rem; font-weight:700; color:var(--slate); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap}
.cp-tabs a.is-active,.cp-tabs a:hover{color:var(--teal); border-bottom-color:var(--teal)}
.cp-feats{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
.cp-feat{display:flex; gap:11px; align-items:center}
.cp-fic{width:40px; height:40px; border-radius:11px; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; flex:none}
.cp-fic .ic{width:20px; height:20px}
.cp-feat b{display:block; color:var(--ink); font-size:.88rem}
.cp-feat span{font-size:.78rem; color:var(--slate)}
.cp-map{display:block; position:relative; border-radius:12px; overflow:hidden; height:200px; background:#EAF2F4}
.cp-map img{width:100%; height:100%; object-fit:cover; display:block}
.cp-map-pin{position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); color:var(--teal); width:34px; height:34px}
.cp-map-pin svg{width:100%; height:100%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.cp-map.cp-map-fallback{display:grid; place-items:center}
.cp-map.cp-map-fallback .cp-map-pin{position:static; transform:none}
.cp-dir{color:var(--teal); font-weight:700; font-size:.82rem; text-decoration:none; white-space:nowrap}
@media (max-width:760px){ .cp-gallery{height:auto; grid-template-columns:1fr} .cp-g-side{grid-template-rows:none; grid-template-columns:1fr 1fr; height:120px} .cp-feats{grid-template-columns:1fr} }

/* ── agency page: claim card + owner banner ───────────────────────────────── */
.cp-claim-mini{display:flex; gap:12px; align-items:flex-start; border-top:1px solid var(--line);
  margin-top:14px; padding-top:14px}
.cp-claim-ic{width:40px; height:40px; border-radius:11px; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; flex:none}
.cp-claim-ic .ic{width:20px; height:20px}
.cp-claim-mini b{color:var(--ink); font-size:.88rem}
.cp-claim-mini p{margin:2px 0 8px; font-size:.82rem; color:var(--slate)}
.cp-claim-mini p a{color:var(--teal); font-weight:700; text-decoration:none}
.cp-claim-link{display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-weight:700;
  font-size:.83rem; text-decoration:none; background:var(--teal-soft); padding:8px 13px; border-radius:8px}
.cp-claim-link .ic{width:15px; height:15px}
.cp-owner{display:flex; gap:16px; align-items:center; background:var(--teal-soft); border:1px solid #DDF2E3;
  border-radius:14px; padding:18px 22px; margin-bottom:18px; flex-wrap:wrap}
.cp-owner-ic{width:52px; height:52px; border-radius:13px; background:#fff; color:var(--teal);
  display:grid; place-items:center; flex:none}
.cp-owner-ic svg{width:26px; height:26px}
.cp-owner-txt{flex:1; min-width:200px}
.cp-owner-txt b{display:block; color:var(--ink); font-size:1rem; margin-bottom:3px}
.cp-owner-txt p{margin:0; font-size:.87rem; color:var(--slate); line-height:1.5}
.cp-owner-btn{flex:none; white-space:nowrap}
@media (max-width:600px){ .cp-owner-btn{width:100%} }

/* ── inline claim form ────────────────────────────────────────────────────── */
.cp-claimform{animation:claimIn .3s ease}
@keyframes claimIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cf-msg{border-radius:9px;padding:11px 14px;margin-bottom:12px;font-size:.88rem}
.cf-msg.cf-ok{background:var(--teal-soft);border:1px solid var(--teal);color:var(--teal-dark)}
.cf-msg.cf-err{background:#F2FAF4;border:1px solid #DDF2E3;color:#a32626}
.cp-claimform input:disabled{color:var(--slate);background:var(--mist)}

/* ── field tooltip ────────────────────────────────────────────────────────── */
.ff-tip{display:inline-flex; vertical-align:-3px; margin-left:5px; color:var(--slate); cursor:help; position:relative; outline:none}
.ff-tip svg{width:15px; height:15px}
.ff-tip:hover,.ff-tip:focus{color:var(--teal)}
.ff-tip-box{position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  width:250px; background:var(--ink); color:#fff; font-size:.78rem; font-weight:500; line-height:1.5;
  padding:9px 12px; border-radius:9px; box-shadow:0 8px 24px rgba(11,37,69,.22);
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s; z-index:30; pointer-events:none}
.ff-tip-box::after{content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ink)}
.ff-tip:hover .ff-tip-box,.ff-tip:focus .ff-tip-box{opacity:1; visibility:visible; transform:translateX(-50%) translateY(-2px)}
/* two-colour verified icon keeps its own fills — don't let .ff-ico recolour it */
.ff-ico svg[viewBox="0 0 128 128"]{width:22px; height:22px}
@media (max-width:600px){ .ff-tip-box{width:200px} }

/* ── split contact fields ─────────────────────────────────────────────────── */
.ff-ico-wa{color:#25D366 !important}
.ff-ico-wa .ic, .ff-ico-wa svg{color:#25D366; fill:currentColor}
.ff-atleast{font-size:.78rem; color:var(--slate); margin:-8px 0 16px}

/* ── phone/whatsapp inside the field kit: avoid the double border ──────────── */
/* phone-input.js wraps the <input> in its own .ph-wrap (flag + +971 + input).
   Inside a .ff field the OUTER .ff-wrap keeps the border so the field looks
   like every other one (icon inside the box); the inner .ph-wrap goes
   borderless and its validation state is mirrored onto the outer border. */
.ff-wrap:has(.ph-wrap){align-items:stretch}
.ff-wrap:has(.ph-wrap) .ff-ico{align-self:center}
.ff-wrap:has(.ph-wrap) .ph-wrap{flex:1; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; background:transparent; overflow:visible}
.ff-wrap:has(.ph-wrap) .ph-prefix{border-left:1.5px solid var(--line); border-right:1.5px solid var(--line);
  border-radius:0}
.ff-wrap:has(.ph-wrap) .ph-input{padding:11px 13px !important; font-size:.92rem}
.ff-wrap:has(.ph-wrap) .ph-hint{position:absolute; right:12px; top:50%; transform:translateY(-50%); margin:0;
  white-space:nowrap; font-size:.78rem; pointer-events:none; background:#fff; padding-left:6px}
.ff-wrap:has(.ph-wrap) .ph-hint:empty{display:none}
.ff-wrap:has(.ph-wrap) .ph-input{padding-right:96px !important}
.ff-wrap:has(.ph-wrap.is-ok){border-color:var(--teal)}
@media (max-width:480px){ /* phones: just the ✓ / ✕, keep the digits readable */
  .ff-wrap:has(.ph-wrap) .ph-hint{font-size:0}
  .ff-wrap:has(.ph-wrap) .ph-hint.is-ok::before{font-size:1rem; content:'✓'}
  .ff-wrap:has(.ph-wrap) .ph-hint.is-bad::before{font-size:1rem; content:'✕'}
  .ff-wrap:has(.ph-wrap) .ph-input{padding-right:40px !important}
}
.ff-wrap:has(.ph-wrap.is-bad){border-color:var(--sale)}


@media (max-width:680px){
  /* app-like hero rhythm */
  .hero-in{padding:26px 18px 30px}
  .hero h1{font-size:2rem; line-height:1.12; letter-spacing:-.02em}
  .hero-sub{font-size:1rem; margin-top:12px}
  /* trust items: clean 2-column, NO card border (matches the concept) —
     just a small icon chip + text */
  .hero-trust{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; margin-top:24px; width:auto}
  .ht{background:none; border:0; box-shadow:none; padding:0; gap:11px; align-items:center; white-space:normal}
  .ht svg{box-sizing:content-box; width:20px; height:20px; padding:9px; border-radius:12px;
    background:var(--teal-soft); color:var(--teal); flex:none}
  .ht b{font-size:.9rem; display:block}
  .ht span{font-size:.78rem}
}






/* left */

/* right: phone */
   /* stand-in for the AGENCYALPROTECT photo */

/* right: sample quote cards (stacked, offset to the right on desktop) */

/* hand-drawn scribble labels */


/* trust bar */

/* responsive */



/* ══ Blog ══════════════════════════════════════════════════════════════════ */
.blog-bar{display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:22px}
.blog-cats{display:flex; gap:6px; flex-wrap:wrap}
.blog-cats a{padding:7px 14px; border-radius:99px; font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--slate); border:1px solid var(--line); background:#fff}
.blog-cats a.on,.blog-cats a:hover{background:var(--teal); color:#fff; border-color:var(--teal)}
.blog-search{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 13px; background:#fff}
.blog-search .ic{width:17px; height:17px; color:var(--slate)}
.blog-search input{border:0; outline:0; font-size:.9rem; min-width:180px; background:transparent}
.blog-chip{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--teal-dark); background:var(--teal-soft); border-radius:6px; padding:3px 9px; margin-bottom:8px}
.blog-meta{font-size:.8rem; color:var(--slate)}
/* featured */
.blog-featured{display:grid; grid-template-columns:1.3fr 1fr; gap:0; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; text-decoration:none; margin-bottom:26px; transition:box-shadow .15s}
.blog-featured:hover{box-shadow:0 12px 30px rgba(11,37,69,.10)}
.blog-featured-img{min-height:280px; background:#EEF4F5}
.blog-featured-img img{width:100%; height:100%; object-fit:cover; display:block}
.blog-featured-img.is-ph{display:grid; place-items:center; color:var(--teal); background:linear-gradient(135deg,var(--teal-soft),#EAF6F8)}
.blog-featured-img.is-ph .ic{width:56px; height:56px; opacity:.5}
.blog-featured-body{padding:26px 28px; align-self:center}
.blog-featured-body h2{color:var(--ink); font-size:1.5rem; line-height:1.25; margin:0 0 10px}
.blog-featured-body p{color:var(--slate); font-size:.95rem; line-height:1.55; margin:0 0 12px}
/* grid */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.blog-card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; transition:box-shadow .15s, transform .12s}
.blog-card:hover{box-shadow:0 10px 26px rgba(11,37,69,.09); transform:translateY(-2px)}
.blog-card-img{height:170px; background:#EEF4F5}
.blog-card-img img{width:100%; height:100%; object-fit:cover; display:block}
.blog-card-img.is-ph{display:grid; place-items:center; color:var(--teal); background:linear-gradient(135deg,var(--teal-soft),#EAF6F8)}
.blog-card-img.is-ph .ic{width:42px; height:42px; opacity:.5}
.blog-card-body{padding:16px 18px}
.blog-card-body h3{color:var(--ink); font-size:1.05rem; line-height:1.3; margin:0 0 6px}
.blog-card-body p{color:var(--slate); font-size:.86rem; line-height:1.5; margin:0 0 8px}
.blog-pager{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:28px; font-size:.9rem}
.blog-pager a{color:var(--teal); font-weight:700; text-decoration:none}
.blog-pager span{color:var(--slate)}
/* article */
.blog-hero-img{width:100%; max-height:440px; object-fit:cover; border-radius:16px; margin:0 0 8px}
.blog-article-meta{margin-top:8px}
.blog-body{font-size:1.06rem; line-height:1.75; color:var(--ink); padding:20px 0}
.blog-body h1,.blog-body h2,.blog-body h3{color:var(--ink); line-height:1.3; margin:1.6em 0 .5em; letter-spacing:-.01em}
.blog-body h2{font-size:1.55rem} .blog-body h3{font-size:1.25rem}
.blog-body p{margin:0 0 1.1em}
.blog-body a{color:var(--teal); text-decoration:underline}
.blog-body ul,.blog-body ol{margin:0 0 1.1em; padding-left:1.4em} .blog-body li{margin:.3em 0}
.blog-body img{max-width:100%; height:auto; border-radius:12px; margin:1.2em 0}
.blog-body figure{margin:1.4em 0} .blog-body figcaption{font-size:.85rem; color:var(--slate); text-align:center; margin-top:6px}
.blog-body blockquote{border-left:4px solid var(--teal); background:var(--mist); margin:1.4em 0; padding:14px 20px; border-radius:0 10px 10px 0; color:var(--ink)}
.blog-body table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.95rem}
.blog-body th,.blog-body td{border:1px solid var(--line); padding:9px 12px; text-align:left}
.blog-body th{background:var(--mist)}
.blog-body pre{background:#0B2545; color:#fff; padding:14px 16px; border-radius:10px; overflow:auto; font-size:.88rem}
.blog-body hr{border:none; border-top:1px solid var(--line); margin:2em 0}
.blog-body .text-center{text-align:center} .blog-body .text-right{text-align:right}
.blog-body .image-style-align-left{float:left; margin:0 1.2em 1em 0; max-width:50%}
.blog-body .image-style-align-right{float:right; margin:0 0 1em 1.2em; max-width:50%}
.blog-cta{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--teal-soft); border-radius:16px; padding:22px 26px; margin:28px 0}
.blog-cta b{color:var(--ink); font-size:1.05rem} .blog-cta p{margin:4px 0 0; color:var(--slate); font-size:.9rem}
.blog-cta-btns{display:flex; gap:10px}
@media (max-width:860px){
  .blog-featured{grid-template-columns:1fr} .blog-featured-img{min-height:200px}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .blog-grid{grid-template-columns:1fr} .blog-bar{flex-direction:column; align-items:stretch}
  .blog-search input{min-width:0; width:100%} .blog-cta{flex-direction:column; align-items:flex-start}
  .blog-cta-btns{width:100%} .blog-cta-btns .btn{flex:1}
  .blog-body .image-style-align-left,.blog-body .image-style-align-right{float:none; max-width:100%; margin:1.2em 0}
}

/* ── agency register: success message with green tick ─────────────────────── */
.reg-success{display:flex; gap:13px; align-items:flex-start; background:var(--teal-soft);
  border:1px solid #DDF2E3; border-radius:14px; padding:16px 18px; margin:0 0 16px}
.reg-success-tick{width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff;
  display:grid; place-items:center; flex:none; box-shadow:0 4px 12px rgba(22,131,63,.35)}
.reg-success-tick svg{width:19px; height:19px}
.reg-success b{color:var(--ink); font-size:.98rem}
.reg-success p{margin:3px 0 0; font-size:.86rem; color:var(--slate); line-height:1.5}

/* ── agency auth cards (login / forgot / reset) — register-agency style ────── */
.auth-card{max-width:460px}
.auth-lock{width:52px;height:52px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;margin:0 auto 14px}
.auth-lock .ic{width:24px;height:24px}
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:44px}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--slate);padding:0}
.pw-toggle:hover{color:var(--teal)}.pw-toggle svg{width:20px;height:20px}
.auth-reqs{background:var(--teal-soft);border-radius:12px;padding:14px 16px;margin:4px 0 18px}
.auth-reqs-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);font-size:.88rem;margin-bottom:9px}
.auth-reqs-head .ic{width:17px;height:17px;color:var(--teal)}
.auth-req{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--slate);padding:3px 0}
.auth-req .dot{width:16px;height:16px;border-radius:50%;border:1.6px solid #C3D6D6;flex:none;display:grid;place-items:center;transition:all .15s}
.auth-req .dot .ic{width:10px;height:10px;color:#fff;opacity:0;transition:opacity .15s}
.auth-req.ok{color:var(--ink)}
.auth-req.ok .dot{background:var(--teal);border-color:var(--teal)}
.auth-req.ok .dot .ic{opacity:1}

/* login: remember-this-device checkbox */
.auth-remember{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--slate);margin:2px 0 16px;cursor:pointer}
.auth-remember input{width:17px;height:17px;accent-color:var(--teal);cursor:pointer;flex:none}

/* ── agency dashboard header (14-item nav — wraps + scales, doesn't cram) ─── */
.dash-head .dn-head-in{flex-wrap:wrap; gap:14px 20px; align-items:center}
.dash-head .dn-nav{gap:8px 16px; flex-wrap:wrap; font-size:.9rem; row-gap:6px}
.dash-head .dn-nav a{white-space:nowrap; padding:4px 0}
.dash-head .dn-head-cta{margin-left:auto}
/* on smaller desktops give the nav its own full-width row under the logo */
@media (max-width:1200px){
  .dash-head .dn-nav{order:3; width:100%; margin-left:0; border-top:1px solid var(--line); padding-top:10px; margin-top:4px}
  .dash-head .dn-head-cta{margin-left:auto}
}
/* mobile: the public rule hides .dn-nav; re-show it for the dashboard, wrapped */
@media (max-width:900px){
  .dash-head .dn-nav{display:flex}
  .dash-head .dn-head-cta{display:flex}
}
@media (max-width:600px){
  .dash-head .dn-nav{gap:6px 12px; font-size:.85rem}
  .dash-head .dn-head-cta .btn{padding:8px 12px;font-size:.85rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   AGENCY DASHBOARD PANEL (sidebar layout)
   ══════════════════════════════════════════════════════════════════════════ */
body.dash{background:#F4F8F9}
.dpanel{display:grid; grid-template-columns:256px 1fr; min-height:100vh}
/* ── sidebar ── */
.dside{background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto}
.dside-brand{padding:4px 8px 20px}
.dside-brand img{height:30px;width:auto;display:block}
.dside-portal{display:block; font-size:.72rem; color:var(--slate); font-weight:700; margin-top:3px; padding-left:2px}
.dside-nav{display:flex; flex-direction:column; gap:2px}
.dn-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  font-size:.9rem; font-weight:600; color:var(--slate); text-decoration:none; position:relative}
.dn-item .ic{width:19px; height:19px; flex:none; color:var(--slate)}
.dn-item:hover{background:var(--mist); color:var(--ink)}
.dn-item.on{background:var(--teal-soft); color:var(--teal-dark)}
.dn-item.on .ic{color:var(--teal)}
.dn-badge{margin-left:auto; background:var(--sale); color:#fff; font-size:.68rem; font-weight:800;
  min-width:18px; height:18px; border-radius:99px; display:grid; place-items:center; padding:0 5px}
.dside-help{margin-top:auto; background:var(--teal-soft); border-radius:14px; padding:16px; text-align:center}
.dside-help-ic{width:40px; height:40px; border-radius:50%; background:#fff; color:var(--teal); display:grid; place-items:center; margin:0 auto 8px}
.dside-help-ic .ic{width:20px;height:20px}
.dside-help b{display:block; font-size:.86rem; color:var(--ink)}
.dside-help span{display:block; font-size:.76rem; color:var(--slate); margin:2px 0 10px}
.dside-help-btn{display:block; background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px; font-size:.82rem; font-weight:700; color:var(--ink); text-decoration:none}
.dside-help-btn:hover{border-color:var(--teal); color:var(--teal)}
.dside-backdrop{display:none}
/* ── main column ── */
.dmain{display:flex; flex-direction:column; min-width:0}
.dtop{display:flex; align-items:center; gap:16px; background:#fff; border-bottom:1px solid var(--line); padding:12px 26px; position:sticky; top:0; z-index:50}
.dtop-burger{display:none; background:none; border:0; cursor:pointer; color:var(--ink); padding:4px}
.dtop-burger svg{width:24px;height:24px}
.dtop-search{flex:1; max-width:520px; display:flex; align-items:center; gap:9px; background:var(--mist); border:1px solid var(--line); border-radius:10px; padding:9px 13px}
.dtop-search .ic{width:17px;height:17px;color:var(--slate);flex:none}
.dtop-search input{border:0; outline:0; background:none; width:100%; font-size:.88rem}
.dtop-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.dtop-bell{position:relative; color:var(--slate); display:grid; place-items:center}
.dtop-bell svg{width:22px;height:22px}
.dtop-bell-dot{position:absolute; top:-4px; right:-5px; background:var(--sale); color:#fff; font-size:.62rem; font-weight:800; min-width:16px; height:16px; border-radius:99px; display:grid; place-items:center; padding:0 4px}
.dtop-sep{width:1px; height:26px; background:var(--line)}
.dtop-acct{position:relative}
.dtop-acct-btn{display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:10px}
.dtop-acct-btn:hover{background:var(--mist)}
.dtop-acct-av{width:38px; height:38px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; flex:none}
.dtop-acct-av .ic{width:20px;height:20px}
.dtop-acct-txt{text-align:left}
.dtop-acct-txt b{display:block; font-size:.86rem; color:var(--ink); line-height:1.2}
.dtop-acct-txt span{font-size:.74rem; color:var(--slate)}
.dtop-acct-caret{width:18px;height:18px;color:var(--slate)}
.dtop-menu{position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px rgba(11,37,69,.15); padding:6px; min-width:210px; z-index:100}
.dtop-menu[hidden]{display:none}
.dtop-menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--ink); text-decoration:none}
.dtop-menu a .ic,.dtop-menu a svg{width:17px;height:17px;color:var(--slate);flex:none}
.dtop-menu a:hover{background:var(--mist)}
.dtop-menu-sep{height:1px;background:var(--line);margin:5px 0}
.dtop-menu-out{color:var(--sale) !important}
.dtop-menu-out svg{color:var(--sale) !important}
.dbody{padding:24px 26px 40px; min-width:0}
/* the old pg-head band inside dashboard pages is redundant now — hide it */
.dash .pg-head{display:none}
/* ── responsive ── */
@media (max-width:1000px){
  .dpanel{grid-template-columns:1fr}
  .dside{position:fixed; left:0; top:0; z-index:200; width:256px; transform:translateX(-100%); transition:transform .22s ease}
  .dside.show{transform:none; box-shadow:0 20px 60px rgba(11,37,69,.25)}
  .dside-backdrop.show{display:block; position:fixed; inset:0; background:rgba(11,37,69,.45); z-index:150}
  .dtop-burger{display:grid; place-items:center}
  .dtop-acct-txt{display:none}
}
@media (max-width:560px){ .dtop-search{max-width:none} .dbody{padding:16px} }

/* ── dashboard home content ── */
.dash-hero{background:linear-gradient(120deg,#10201A,#0F5A2B 60%,#0F5A2B); color:#fff; border-radius:18px; padding:26px 30px; margin-bottom:20px; display:flex; align-items:center; gap:20px; overflow:hidden; position:relative}
.dash-hero-txt h1{font-size:1.6rem; color:var(--ink); margin:0 0 4px}
.dash-hero-txt p{margin:0; color:var(--slate); font-size:.95rem}
.dash-hero-quote{margin-left:auto; background:#fff; border-radius:12px; padding:14px 18px; font-size:.86rem; color:var(--slate); font-style:italic; max-width:230px; box-shadow:0 6px 18px rgba(11,37,69,.06)}
.dash-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px}
.dstat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; align-items:flex-start; gap:14px; text-decoration:none; position:relative; transition:box-shadow .15s,transform .12s}
.dstat:hover{box-shadow:0 10px 26px rgba(11,37,69,.08); transform:translateY(-2px)}
.dstat-ic{width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center}
.dstat-ic .ic{width:22px;height:22px}
.dstat-ic.is-teal{background:#DCF3F2;color:#16833F}.dstat-ic.is-blue{background:#E3ECFB;color:#3B6FE0}
.dstat-ic.is-purple{background:#ECE7FB;color:#6B4FD0}.dstat-ic.is-amber{background:#FCEFD6;color:#E0A030}
.dstat-lab{font-size:.82rem;color:var(--slate);font-weight:600;display:block}
.dstat-body b{font-size:1.7rem;color:var(--ink);display:block;line-height:1.2;margin:2px 0}
.dstat-sub{font-size:.76rem;color:var(--slate)}
.dstat-arrow{width:18px;height:18px;color:#C3D6D6;position:absolute;top:18px;right:16px}
.dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.dash-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.dcard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px}
.dcard-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.dcard-head h2{font-size:1.05rem; color:var(--ink); margin:0; display:flex; align-items:center; gap:9px}
.dcard-ic{width:19px;height:19px;color:var(--teal)}
.dcard-head a{font-size:.82rem; color:var(--teal); font-weight:700; text-decoration:none}
.dempty{text-align:center; padding:22px 10px}
.dempty-ic{width:56px;height:56px;border-radius:50%;background:var(--mist);color:#B7C9CD;display:grid;place-items:center;margin:0 auto 12px}
.dempty-ic .ic{width:28px;height:28px}
.dempty b{display:block;color:var(--ink);font-size:1rem;margin-bottom:5px}
.dempty p{font-size:.86rem;color:var(--slate);line-height:1.5;max-width:340px;margin:0 auto 14px}
.drow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}
.drow b{color:var(--ink);font-size:.9rem}
.drow-sub{display:block;font-size:.8rem;color:var(--slate);margin-top:2px}
.drow-meta{font-size:.8rem;color:var(--slate);white-space:nowrap}
/* profile ring */
.dprofile{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.dring{width:96px;height:96px;border-radius:50%;flex:none;
  background:conic-gradient(var(--teal) calc(var(--pct)*1%), #E2EAE5 0);display:grid;place-items:center}
.dring-hole{width:72px;height:72px;border-radius:50%;background:#fff;display:grid;place-items:center}
.dring-hole b{font-size:1.3rem;color:var(--ink)}
.dprofile-txt b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:3px}
.dprofile-txt p{margin:0;font-size:.86rem;color:var(--slate);line-height:1.5}
.dcheck-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.dcheck{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--slate);padding:3px 0}
.dcheck-dot{width:18px;height:18px;border-radius:50%;border:1.6px solid #D3DEE1;flex:none;display:grid;place-items:center}
.dcheck-dot .ic{width:11px;height:11px;color:#fff;opacity:0}
.dcheck.ok{color:var(--ink)}
.dcheck.ok .dcheck-dot{background:var(--teal);border-color:var(--teal)}
.dcheck.ok .dcheck-dot .ic{opacity:1}
/* quick actions */
.dquick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dquick-item{display:flex;align-items:center;gap:12px;background:var(--mist);border-radius:12px;padding:14px;text-decoration:none;transition:background .15s}
.dquick-item:hover{background:var(--teal-soft)}
.dquick-ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center}
.dquick-ic .ic{width:20px;height:20px}
.dquick-ic.is-teal{background:#DCF3F2;color:#16833F}.dquick-ic.is-blue{background:#E3ECFB;color:#3B6FE0}
.dquick-ic.is-purple{background:#ECE7FB;color:#6B4FD0}.dquick-ic.is-amber{background:#FCEFD6;color:#E0A030}
.dquick-item b{display:block;color:var(--ink);font-size:.88rem}
.dquick-item span{font-size:.76rem;color:var(--slate)}
@media (max-width:1100px){ .dash-stats{grid-template-columns:1fr 1fr} .dash-grid{grid-template-columns:1fr} }
@media (max-width:560px){ .dash-stats{grid-template-columns:1fr} .dash-hero{flex-direction:column;align-items:flex-start} .dash-hero-quote{margin-left:0} .dquick,.dcheck-grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE APP-LIKE FORMS (register-agency, auth pages)
   Native-app feel: no iOS zoom, big tap targets, comfy spacing, sticky submit.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* 16px inputs stop iOS from zooming the page on focus — the single biggest
     thing that makes web forms feel app-like. Also roomier tap targets. */
  .field input, .field select, .field textarea,
  .ff-wrap input, .cp2-inwrap input, .ff input, .ff select,
  .est-form input, .est-form select, .est-form textarea{
    font-size:16px !important; padding:13px 14px; border-radius:11px;
  }
  .field textarea{min-height:96px}
  .field label, .ff-label{font-size:.9rem; margin-bottom:7px}
  .field{margin-bottom:18px}

  /* full-width, big, thumb-friendly primary buttons */
  .est-form .btn.btn-teal.btn-full,
  form .btn.btn-teal.btn-full{padding:16px; font-size:1.05rem; border-radius:13px}

  /* comfy card padding on phones */
  .card{padding:20px 18px}

  /* on the register pages, pin the primary submit to the bottom as
     a sticky bar (app-style), so the CTA is always in reach while scrolling */
  .form-mobile-sticky{position:sticky; bottom:0; z-index:20;
    background:linear-gradient(180deg, rgba(255,255,255,0), #fff 32%);
    padding:14px 0 max(14px, env(safe-area-inset-bottom)); margin:0 -18px;
    padding-left:18px; padding-right:18px}
  .form-mobile-sticky .btn{margin:0}

  /* select controls get an obvious tap affordance */
  .field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B7079' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:40px}
}

/* ══════════════════════════════════════════════════════════════════════════
   Reusable image uploader (data-uploader)
   ══════════════════════════════════════════════════════════════════════════ */
.iu{display:block}
.iu-grid{display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:thin}
.iu-grid > *{flex:0 0 110px}
.iu-drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  aspect-ratio:1; border:2px dashed #C3D6D6; border-radius:14px; padding:10px; text-align:center; cursor:pointer;
  background:var(--mist); transition:border-color .15s, background .15s}
.iu-drop:hover,.iu-drop.drag{border-color:var(--teal); background:var(--teal-soft); outline:none}.iu-drop:focus{ background:var(--teal-soft)}
.iu-drop-ic{width:40px; height:40px; border-radius:50%; background:#fff; color:var(--teal); display:grid; place-items:center}
.iu-drop-ic svg{width:20px;height:20px}
.iu-drop-main{font-size:.82rem; font-weight:700; color:var(--ink)}
.iu-hint{font-size:.78rem; color:var(--slate); margin:10px 0 0}
.iu-cell{position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#EEF4F5}
.iu-cell img{width:100%; height:100%; object-fit:cover; display:block}
.iu-overlay{position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,37,69,.45); transition:opacity .2s}
.iu-cell.is-done .iu-overlay{opacity:0; pointer-events:none}
.iu-spin{width:26px; height:26px; border-radius:50%; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; animation:iuSpin .7s linear infinite}
@keyframes iuSpin{to{transform:rotate(360deg)}}
.iu-err{width:26px;height:26px;border-radius:50%;background:var(--sale);color:#fff;font-weight:800;display:grid;place-items:center}
/* green tick badge — appears when done */
.iu-badge{position:absolute; top:7px; left:7px; width:24px; height:24px; border-radius:50%; background:var(--teal);
  display:grid; place-items:center; transform:scale(0); transition:transform .22s cubic-bezier(.2,1.3,.4,1); box-shadow:0 2px 6px rgba(0,0,0,.25)}
.iu-badge svg{width:14px;height:14px}
.iu-cell.is-done .iu-badge{transform:scale(1)}
.iu-remove{position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(11,37,69,.6); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .15s}
.iu-cell:hover .iu-remove,.iu-cell.is-error .iu-remove{opacity:1}
.iu-remove svg{width:13px;height:13px}

/* ══ Global professional confirm dialog ═══════════════════════════════════ */
.cfm-overlay{position:fixed;inset:0;background:rgba(11,37,69,.55);display:grid;place-items:center;z-index:3000;animation:cfmFade .15s ease;padding:20px}
.cfm-overlay[hidden]{display:none}
.cfm-box{background:#fff;border-radius:16px;padding:26px 26px 20px;max-width:410px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(11,37,69,.28);animation:cfmPop .18s cubic-bezier(.2,.8,.3,1)}
.cfm-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px}
.cfm-icon svg{width:28px;height:28px}
.cfm-icon.is-teal{background:var(--teal-soft);color:var(--teal)}
.cfm-icon.is-danger{background:#F2FAF4;color:#c0392b}
.cfm-title{margin:0 0 20px;font-size:1.12rem;color:var(--ink);line-height:1.4}
.cfm-text{margin:-12px 0 20px;font-size:.9rem;color:var(--slate);line-height:1.5}
.cfm-text[hidden]{display:none}
.cfm-icon.is-warn{background:#FFF6DC;color:#C98A00}
.cfm-icon.is-info{background:var(--teal-soft);color:var(--teal)}
.cfm-cancel[hidden]{display:none}
.cfm-actions{display:flex;gap:10px}
.cfm-btn{flex:1;padding:11px;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;border:1px solid transparent;font-family:inherit}
.cfm-cancel{background:#fff;border-color:var(--line);color:var(--slate)}
.cfm-cancel:hover{background:var(--mist)}
.cfm-ok{background:var(--teal);color:#fff}
.cfm-ok.is-danger{background:#c0392b}
@keyframes cfmFade{from{opacity:0}to{opacity:1}}
@keyframes cfmPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ── professional checkmark helpers (replaces plain ✓ text everywhere) ────── */
.tick{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;
  color:var(--teal);vertical-align:-.12em}
.tick svg{width:100%;height:100%}
.tick-badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--teal);color:#fff;flex:none}
.tick-badge svg{width:13px;height:13px}

/* ── email OTP verification (sign-up forms) ───────────────────────────────── */
.otp-wrap{position:relative;display:flex;align-items:center}
.otp-wrap input{width:100%;padding-right:110px}
.otp-verify-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2;border:0;cursor:pointer;
  background:var(--teal);color:#fff;font-weight:700;font-size:.8rem;padding:8px 16px;border-radius:8px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.otp-verify-btn:hover{background:var(--teal-dark)}
.otp-sent{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;
  background:var(--teal-soft);color:var(--teal-dark);font-weight:800;font-size:.72rem;letter-spacing:.03em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px}
.otp-verified{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;gap:5px;
  color:var(--teal);font-weight:700;font-size:.84rem;background:#fff;padding:2px 4px 2px 8px}
.otp-verified svg{width:16px;height:16px}
/* CRITICAL: explicit display above overrides the [hidden] attribute, so restore it */
.otp-verify-btn[hidden],.otp-sent[hidden],.otp-verified[hidden],.otp-box[hidden]{display:none !important}
.otp-box{margin-top:12px;background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.otp-hint{font-size:.85rem;color:var(--slate);margin:0 0 10px}
.otp-hint a{color:var(--teal);font-weight:700;text-decoration:none}
.otp-row{display:flex;gap:10px}
.otp-row input{flex:1;letter-spacing:8px;font-size:1.2rem;text-align:center;font-weight:700;
  border:1px solid var(--line);border-radius:9px;padding:10px}
.otp-row .btn{flex:none}
.otp-msg{font-size:.82rem;margin:8px 0 0;min-height:1em}
.otp-msg.is-bad{color:var(--sale)}
.otp-resend{background:none;border:0;color:var(--teal);font-weight:700;font-size:.82rem;cursor:pointer;padding:8px 0 0}
.otp-resend:disabled{color:var(--slate);cursor:default}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile bottom-sheet for long forms (data-sheet-open) — mobile only
   ══════════════════════════════════════════════════════════════════════════ */
.msheet-scrim{position:fixed;inset:0;background:rgba(11,37,69,.5);z-index:2500;display:flex;align-items:flex-end;animation:msFade .2s ease}
.msheet-scrim[hidden]{display:none}
.msheet{width:100%;max-height:92dvh;background:#fff;border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -12px 40px rgba(11,37,69,.25);will-change:transform}
.msheet.show{transform:translateY(0)}
.msheet-grip{width:42px;height:5px;border-radius:5px;background:#D3DEE1;margin:10px auto 4px;flex:none;cursor:grab}
.msheet-head{display:flex;align-items:center;justify-content:center;position:relative;padding:4px 18px 12px;border-bottom:1px solid var(--line);flex:none}
.msheet-title{font-weight:800;color:var(--ink);font-size:1.02rem;display:inline-flex;align-items:center;gap:8px}
.msheet-title-ic{width:18px;height:auto;flex:none;display:block}
.msheet-x{position:absolute;right:14px;top:2px;background:none;border:0;font-size:1.7rem;line-height:1;color:var(--slate);cursor:pointer;padding:0 4px}
.msheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 18px calc(20px + env(safe-area-inset-bottom));flex:1}
/* the moved section: strip its own page chrome inside the sheet */
.in-sheet{margin:0 !important}
.in-sheet .pg-head,.in-sheet .est-hero,.in-sheet .reg-pitch{display:none !important}
.in-sheet .shell,.in-sheet .sec,.in-sheet .grid2{max-width:none;padding:0;margin:0;display:block}
.in-sheet .card{border:0;box-shadow:none;padding:0}
body.msheet-lock{overflow:hidden}
@keyframes msFade{from{opacity:0}to{opacity:1}}
/* desktop: sheet chrome never shows (component no-ops, but belt & braces) */
/* On desktop, a bottom SHEET shouldn't show — but a DRAWER should. Only hide
   the non-drawer (sheet) scrim on desktop. */
@media (min-width:761px){ .msheet-scrim:not(.is-drawer){display:none !important} }

/* register-agency: mobile shows a CTA that opens the form sheet; the inline
   form aside is hidden on mobile (it only appears inside the sheet). */
.reg-mobile-cta{display:none;margin-top:20px}
@media (max-width:760px){
  .reg-mobile-cta{display:block}
  #reg-sheet:not(.in-sheet){display:none}   /* hide inline form on mobile until opened */
}

/* inside the sheet, the form's own sticky CTA shouldn't also stick (the sheet
   scrolls internally) — let it flow normally so it sits at the form's end. */
.in-sheet .form-mobile-sticky{position:static;background:none;margin:0;padding:16px 0 0}

/* ── desktop right-side drawer variant of the sheet ───────────────────────── */
.msheet-scrim.is-drawer{align-items:stretch;justify-content:flex-end}
.msheet-drawer{width:480px;max-width:92vw;max-height:100dvh;height:100dvh;border-radius:0;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.msheet-drawer.show{transform:translateX(0)}
.msheet-drawer .msheet-head{justify-content:space-between;padding:18px 22px 14px}
.msheet-drawer .msheet-body{padding:20px 22px calc(24px + env(safe-area-inset-bottom))}
@media (max-width:760px){ /* safety: never show drawer width on mobile */
  .msheet-drawer{width:100%;max-width:none;height:auto;max-height:92dvh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .msheet-drawer.show{transform:translateY(0)}
}

/* Long forms: the form section is a panel (drawer on desktop, sheet on
   mobile) — it must NOT render inline on the page. It only shows once moved
   into the panel (.in-sheet). This is what makes it "slide in" rather than
   sit at the bottom of the page. */
#est-sheet[data-sheet]:not(.in-sheet){display:none !important}


/* ── wide modal ─────────────────────────────────────── */
.dnm-panel--wide{max-width:600px; padding:26px 28px 22px; max-height:calc(100vh - 48px); display:flex; flex-direction:column}
.dnm-est-body{overflow:auto; margin:0 -10px; padding:2px 10px 4px; -webkit-overflow-scrolling:touch}
.dnm-est-body .form-mobile-sticky{position:sticky; bottom:0; background:#fff; padding-top:10px; box-shadow:0 -12px 12px -6px #fff}
@media (max-width:640px){
  .dnm-panel--wide{max-height:92vh; padding:12px 18px 20px}
  }




/* ── mobile navigation drawer (built by mobile-nav.js) ───────────────────── */
.mnav{position:fixed; inset:0; z-index:300}
.mnav[hidden]{display:none}
.mnav-scrim{position:absolute; inset:0; background:rgba(11,37,69,.5); opacity:0; transition:opacity .2s ease}
.mnav.is-open .mnav-scrim{opacity:1}
.mnav-panel{position:absolute; top:0; right:0; bottom:0; width:min(86vw,340px); background:#fff;
  box-shadow:-20px 0 50px rgba(11,37,69,.22); display:flex; flex-direction:column;
  padding:14px 18px calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(100%); transition:transform .26s cubic-bezier(.32,.72,0,1); overflow:auto}
.mnav.is-open .mnav-panel{transform:translateX(0)}
.mnav-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.mnav-top img{height:30px; width:auto}
.mnav-x{width:38px; height:38px; border:0; background:var(--mist); border-radius:10px; font-size:1.5rem; line-height:1;
  color:var(--ink); cursor:pointer}
.mnav-links{display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:6px}
.mnav-link{display:flex; align-items:center; gap:14px; padding:14px 4px; font-size:1.05rem; font-weight:700; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line)}
.mnav-link .nav-ic{width:38px; height:38px; padding:9px; box-sizing:border-box; border-radius:11px; background:var(--mist); color:var(--teal); opacity:1}
.mnav-link.on .nav-ic{background:var(--teal-soft)}
.mnav-link.on{color:var(--teal)}
.mnav-cta{display:grid; gap:10px; margin-top:auto; padding-top:20px}
.mnav-btn{display:flex; align-items:center; justify-content:center; gap:9px; text-align:center; padding:14px; border-radius:12px; font-weight:800; text-decoration:none;
  border:1.5px solid var(--line); color:var(--ink)}
.mnav-btn.is-primary{background:var(--teal); border-color:var(--teal); color:#fff}
.mnav-btn .nav-ic{width:20px; height:20px; opacity:1}
@media (prefers-reduced-motion:reduce){ .mnav-scrim,.mnav-panel{transition:none} }

/* ── register: website / facebook / instagram type select inside the field ─ */
.ff-wrap .web-type{flex:none; width:auto; padding:11px 26px 11px 0 !important; font-weight:700; color:var(--ink);
  border-right:1.5px solid var(--line) !important; border-radius:0 !important; margin-right:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 6px center/14px no-repeat}

#web-ico .web-ic[hidden]{display:none}
/* OTP controls inside a .ff-wrap (register form): leave room for the Verify button */
.ff-wrap.otp-wrap input{padding-right:110px !important}

/* ── agency highlights: dashboard toggle list ────────────────────────────── */
.cf-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cf-row{display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff;
  transition:border-color .15s, background .15s}
.cf-row:has(input:checked){border-color:var(--teal); background:#F4FBFB}
.cf-badge{width:42px; height:42px; border-radius:12px; background:var(--mist); color:var(--slate); display:grid; place-items:center; flex:none;
  transition:background .15s, color .15s}
.cf-row:has(input:checked) .cf-badge{background:var(--teal-soft); color:var(--teal)}
.cf-ic{width:22px; height:22px}
.cf-text{flex:1; display:grid; gap:2px; cursor:pointer; min-width:0}
.cf-text b{font-size:.95rem; color:var(--ink)}
.cf-text span{font-size:.8rem; color:var(--slate)}
.cf-switch{position:relative; flex:none; width:46px; height:26px; cursor:pointer}
.cf-switch input{position:absolute; opacity:0; width:0; height:0}
.cf-track{position:absolute; inset:0; border-radius:999px; background:#D5DEE3; transition:background .18s}
.cf-track::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(11,37,69,.25); transition:transform .18s}
.cf-switch input:checked + .cf-track{background:var(--teal)}
.cf-switch input:checked + .cf-track::after{transform:translateX(20px)}

.cf-sub{font-size:1rem; margin:22px 0 4px}
.cf-row--derived{background:var(--mist); border-style:dashed}
.cf-row--derived.is-on{border-color:var(--teal); border-style:solid; background:#F4FBFB}
.cf-row--derived.is-on .cf-badge{background:var(--teal-soft); color:var(--teal)}
.cf-derived-state{flex:none; font-size:.8rem; font-weight:700; color:var(--slate); text-decoration:none; padding:6px 10px; border-radius:8px; background:#fff; border:1px solid var(--line)}
.cf-row--derived.is-on .cf-derived-state{color:var(--teal)}
.cf-derived-state:hover{border-color:var(--teal); color:var(--teal)}
.cf-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px}
.cf-count{font-size:.85rem; color:var(--slate); font-weight:600}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:520px){ .cf-row{padding:10px 12px; gap:10px} .cf-badge{width:36px; height:36px} .cf-ic{width:19px; height:19px} }

/* ── agency highlights: public badges (agency page + cards) ─────────────── */
.cf-badges{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0}
.cf-pill{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:var(--teal-soft); color:var(--teal-dark);
  font-size:.82rem; font-weight:700; line-height:1}
.cf-pill .cf-ic{width:16px; height:16px}
.cf-badges--card{margin:0 0 8px; gap:5px; padding:0; list-style:none}
.cf-badges--card .cf-pill{padding:4px 8px; font-size:.72rem}
.cf-badges--card .cf-pill .cf-ic{width:13px; height:13px}
.cf-badges{list-style:none; padding:0}
/* listing filter chips */
.cf-filter{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px}
.cf-pill--filter{background:#fff; color:var(--slate); border:1.5px solid var(--line); text-decoration:none; transition:border-color .15s, color .15s}
.cf-pill--filter:hover{border-color:var(--teal); color:var(--teal)}
.cf-pill--filter.is-on{background:var(--teal); border-color:var(--teal); color:#fff}

/* ── Every checkbox on the platform renders as a switch ─────────────────── */
input[type="checkbox"]:not(.cf-switch input):not(.dn-native){
  appearance:none; -webkit-appearance:none; position:relative; flex:none; vertical-align:middle;
  width:40px; height:22px; margin:0 6px 0 0; border-radius:999px; background:#D5DEE3; border:0; cursor:pointer;
  transition:background .18s; outline:none}
input[type="checkbox"]:not(.cf-switch input):not(.dn-native)::after{
  content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(11,37,69,.25); transition:transform .18s}
input[type="checkbox"]:not(.cf-switch input):not(.dn-native):checked{background:var(--teal)}
input[type="checkbox"]:not(.cf-switch input):not(.dn-native):checked::after{transform:translateX(18px)}

input[type="checkbox"]:not(.cf-switch input):not(.dn-native):disabled{opacity:.5; cursor:not-allowed}
input[type="checkbox"]:not(.cf-switch input):not(.dn-native):required:invalid{box-shadow:0 0 0 2px rgba(22,131,63,.35)}
label:has(> input[type="checkbox"]){display:inline-flex; align-items:center; gap:8px; cursor:pointer}

/* ── Dashboard "Recommended & tips" panel ───────────────────────────────── */
.dbody.has-tips{display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; align-items:start}
.dbody-main{min-width:0}
.dtips{grid-column:1; order:-1; margin:0 0 14px}
.dtips-pill{display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--line); background:#fff; border-radius:999px;
  padding:8px 14px 8px 10px; font:inherit; font-size:.85rem; font-weight:700; color:var(--ink); cursor:pointer}
.dtips-pill .dtips-bulb{width:26px; height:26px}
.dtips-chev{width:16px; height:16px; color:var(--slate); transition:transform .18s}
.dtips.is-open .dtips-chev{transform:rotate(180deg)}
.dtips-box{display:none; position:relative; margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 18px 14px; box-shadow:0 10px 30px rgba(11,37,69,.08)}
.dtips.is-open .dtips-box{display:block}
.dtips-box::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:16px 0 0 16px; background:var(--teal)}
.dtips-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.dtips-head b{font-size:.98rem; color:var(--ink); flex:1}
.dtips-bulb{width:30px; height:30px; border-radius:9px; background:#FFF6DC; color:#C98A00; display:grid; place-items:center; flex:none}
.dtips-bulb svg{width:18px; height:18px}
.dtips-x{border:0; background:none; font-size:1.3rem; line-height:1; color:var(--slate); cursor:pointer; padding:2px 4px}
.dtips-label{font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:12px 0 6px}
.dtips-recs,.dtips-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.dtips-recs li{display:flex; gap:9px; align-items:flex-start; font-size:.84rem; line-height:1.45; color:var(--ink)}
.dtips-recs a{color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--slate)}
.dtips-recs a:hover{color:var(--teal); border-color:var(--teal)}
.dtips-dot{flex:none; width:9px; height:9px; border-radius:50%; margin-top:6px; background:#F2A93B}
.dtips-recs li.is-ok .dtips-dot{background:var(--teal)}
.dtips-recs li.is-ok{color:var(--slate)}
.dtips-list li{position:relative; padding-left:16px; font-size:.82rem; line-height:1.5; color:var(--slate)}
.dtips-list li::before{content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--teal)}
.dtips-gotit{margin-top:12px; border:1px solid var(--line); background:#fff; border-radius:9px; padding:7px 12px; font:inherit; font-size:.8rem;
  font-weight:700; color:var(--slate); cursor:pointer}
.dtips-gotit:hover{border-color:var(--teal); color:var(--teal)}
@media (min-width:1280px){
  .dbody.has-tips{grid-template-columns:minmax(0,1fr) 300px}
  .dtips{grid-column:2; order:0; position:sticky; top:90px; margin:0}
  .dtips-pill{display:none}
  .dtips-box{margin-top:0}
  /* speech-bubble pointer toward the content on the left */
  .dtips-box{border-color:#DDF2E3}
  .dtips-box::before{display:none}
  .dtips-box::after{content:''; position:absolute; left:-9px; top:24px; width:16px; height:16px; background:#fff;
    border-left:1px solid #DDF2E3; border-bottom:1px solid #DDF2E3; transform:rotate(45deg)}
  .dtips:not(.is-open) .dtips-pill{display:inline-flex}
}

/* ── Agent card (public profile + dashboard preview) ───────────────────── */
.doc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.doc-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 6px 18px rgba(11,37,69,.05)}
.doc-photo{position:relative; aspect-ratio:1; background:linear-gradient(160deg,#F2FAF4,#E3F4E8); display:grid; place-items:center; overflow:hidden}
.doc-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.doc-ini{font-size:2.6rem; font-weight:800; color:var(--teal); letter-spacing:-.03em; display:none}
.doc-photo.is-empty .doc-ini{display:block}
.doc-body{padding:14px 16px 16px; display:grid; gap:6px}
.doc-name{font-size:1.02rem; font-weight:800; color:var(--ink); margin:0; display:flex; align-items:center; gap:6px; line-height:1.25}
.doc-tick{width:18px; height:18px; border-radius:50%; background:var(--teal); color:#fff; display:inline-grid; place-items:center; flex:none}
.doc-tick svg{width:11px; height:11px}
.doc-tick[hidden]{display:none}
.doc-title{margin:0; font-size:.86rem; font-weight:600; color:var(--teal-dark)}
.doc-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px}
.doc-chip{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:var(--mist); color:var(--slate);
  font-size:.74rem; font-weight:600; line-height:1.2}
.doc-chip--yrs{background:#FFF6DC; color:#8A5A00}
.doc-chip--yrs svg{width:13px; height:13px}
.doc-chip--yrs[hidden]{display:none}
.doc-langs{display:contents}
.doc-bio{margin:4px 0 0; font-size:.83rem; line-height:1.5; color:var(--slate)}
.doc-bio[hidden]{display:none}
/* dashboard list + preview */
.doc-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px}
.doc-list .doc-photo{aspect-ratio:4/3}
.doc-list-item .doc-actions{display:flex; gap:6px; justify-content:flex-end; margin-top:8px}
.doc-prev-label{font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:0 0 8px}
#doc-preview{max-width:260px; margin:0 auto 18px}
#doc-preview .doc-photo{aspect-ratio:4/3}
.doc-upl .iu-drop{min-height:88px}
.doc-photo-clear{margin-top:6px; padding:6px 12px; font-size:.8rem; color:var(--sale)}
.doc-photo-clear[hidden]{display:none}

/* ── Language picker (dashboard) + languages row (agency page) ──────────── */
.lang-pick{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff}
.lang-selected{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.lang-selected[hidden]{display:none}
.lang-tag{display:inline-flex; align-items:center; gap:4px; background:var(--teal); color:#fff; border-radius:999px; padding:5px 6px 5px 11px; font-size:.8rem; font-weight:700}
.lang-tag-x{border:0; background:rgba(255,255,255,.22); color:#fff; width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:.9rem; line-height:1; display:grid; place-items:center}
.lang-search{width:100%; border:1px solid var(--line); border-radius:9px; padding:8px 11px; font:inherit; font-size:.88rem; margin-bottom:8px}

.lang-group-label{font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:6px 0 6px}
.lang-cloud{display:flex; flex-wrap:wrap; gap:6px}
.lang-chip{border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:5px 11px; font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  transition:border-color .12s, background .12s, color .12s}
.lang-chip:hover{border-color:var(--teal); color:var(--teal)}
.lang-chip.is-on{background:var(--teal-soft); border-color:var(--teal); color:var(--teal-dark)}
.lang-chip.is-on::before{content:'✓ '; font-weight:800}
.lang-chip[hidden]{display:none}
.lang-more{margin-top:8px}
.lang-more summary{cursor:pointer; font-size:.82rem; font-weight:700; color:var(--teal); margin-bottom:8px; list-style:none}
.lang-more summary::-webkit-details-marker{display:none}
.lang-more summary::before{content:'+ '}
.lang-more[open] summary::before{content:'− '}
.cp-langs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:8px 0 0; font-size:.86rem; color:var(--slate)}
.cp-langs svg{width:16px; height:16px; color:var(--teal); flex:none}
.cp-langs a{color:var(--ink); font-weight:600; text-decoration:none}
.cp-langs a:hover{color:var(--teal)}

/* ── Find Agencies: filter card (desktop redesign) ───────────────────────── */
.fx-head{position:relative; overflow:hidden; background:linear-gradient(90deg,#EAF6F8 0%,#F3FAFB 55%,#DDEFF2 100%)}
.fx-head-in{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; position:relative; min-height:170px; padding-bottom:40px}
.fx-tag{margin-left:auto; margin-right:8%; align-self:center; padding-bottom:4px}
.fx-tag p{margin:0; font-size:1.2rem; line-height:1.3; color:var(--ink); font-weight:500}
.fx-tag b{color:var(--teal)}
.fx-tag::after{content:''; display:block; width:80px; height:3px; background:var(--teal); border-radius:2px; margin-top:8px}
.fx-head-img{position:absolute; right:0; top:0; height:100%; width:auto; max-width:30%; object-fit:cover; object-position:right center; pointer-events:none}
.fx-head .shell{position:static}
.fx-sec{padding-top:0; margin-top:-28px; position:relative; z-index:2}
.fx-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px 28px 24px; box-shadow:0 18px 44px rgba(11,37,69,.10)}
.fx-form{margin:0}
.fx-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:12px; align-items:end}
.fx-field{display:flex; flex-direction:column; gap:8px; min-width:0}
.fx-field label{display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--ink)}
.fx-field label svg{width:18px; height:18px; color:var(--teal); flex:none}
.fx-field select,.fx-field input{width:100%; height:48px; border:1.5px solid var(--line); border-radius:12px; padding:0 40px 0 14px; font:inherit; font-size:.95rem; color:var(--ink); background:#fff;
  appearance:none; -webkit-appearance:none; transition:border-color .15s, box-shadow .15s}
.fx-field input{padding-right:14px}
.fx-field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat}

.fx-submit{height:48px; padding:0 20px; border-radius:12px; font-size:1rem; display:inline-flex; align-items:center; gap:10px; white-space:nowrap}
.fx-submit svg{width:18px; height:18px}
.fx-reset-row{display:flex; justify-content:flex-end; margin-top:12px}
.fx-reset{display:inline-flex; align-items:center; gap:7px; font-size:.88rem; font-weight:600; color:var(--slate); text-decoration:none}
.fx-reset svg{width:16px; height:16px}
.fx-reset:hover{color:var(--teal)}
.fx-reset.is-idle{opacity:.6}
.fx-popular{border-top:1px solid var(--line); margin-top:16px; padding-top:18px}
.fx-popular-label{display:flex; align-items:center; gap:8px; width:100%; font:inherit; font-size:.95rem; font-weight:600; color:var(--ink); margin:0 0 12px;
  background:none; border:0; padding:0; cursor:pointer; text-align:left}
.fx-popular-label svg{width:18px; height:18px; color:var(--ink)}
.fx-popular-count{font-size:.72rem; font-weight:700; color:var(--teal); background:var(--teal-soft); padding:3px 8px; border-radius:999px}
.fx-popular-chev{margin-left:auto; color:var(--slate); transition:transform .18s}
.fx-popular.is-closed .fx-popular-chev{transform:rotate(-90deg)}
.fx-popular.is-closed .fx-chips{display:none}
.fx-popular.is-closed .fx-popular-label{margin-bottom:0}
.fx-chips{display:flex; flex-wrap:wrap; gap:8px}
.fx-chip{display:inline-flex; align-items:center; gap:8px; padding:0 14px; height:36px; border-radius:999px; background:#F2F6F8; color:var(--ink);
  font-size:.84rem; font-weight:500; text-decoration:none; border:1px solid transparent; transition:background .15s, border-color .15s, color .15s}
.fx-chip svg,.fx-chip-ic{width:16px; height:16px; flex:none; color:var(--ink); stroke-width:1.7}
.fx-chip:hover{background:#E9F3F4; border-color:#DDF2E3}
.fx-chip.is-on{background:var(--teal-soft); border-color:var(--teal); color:var(--teal-dark)}
.fx-chip.is-on svg{color:var(--teal-dark)}
.fx-chip.is-primary{background:var(--teal); color:#fff}
.fx-chip.is-primary svg{color:#fff}
.fx-chip.is-primary:hover{background:var(--teal-dark); border-color:transparent}
.fx-results{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:26px 0 18px; flex-wrap:wrap}
.fx-results .count{margin:0; font-size:1rem; color:var(--slate)}
.fx-results .count b{font-size:1.35rem; color:var(--ink)}
.fx-tools{display:flex; align-items:center; gap:14px}
.fx-sort{display:flex; align-items:center; gap:10px; font-size:.95rem; font-weight:600; color:var(--ink)}
.fx-sort-box{position:relative; display:inline-flex; align-items:center; height:46px; border:1.5px solid var(--line); border-radius:12px; background:#fff; padding-left:12px}
.fx-sort-box > svg{width:18px; height:18px; color:var(--ink); pointer-events:none}
.fx-sort-box select{height:100%; border:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;
  padding:0 38px 0 10px; font:inherit; font-size:.95rem; font-weight:600; color:var(--ink); appearance:none; -webkit-appearance:none; cursor:pointer}

.fx-view{display:inline-flex; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.fx-view-btn{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px; border:0; background:#fff; font:inherit; font-size:.95rem; font-weight:600; color:var(--ink); cursor:pointer}
.fx-view-btn svg{width:18px; height:18px}
.fx-view-btn + .fx-view-btn{border-left:1.5px solid var(--line)}
.fx-view-btn.is-on{color:var(--teal); background:var(--teal-soft)}
/* list view */
@media (max-width:1180px){ .fx-row{grid-template-columns:repeat(3,minmax(0,1fr))} .fx-submit{grid-column:1 / -1; justify-content:center} .fx-tag{display:none} .fx-head-img{display:none} }
@media (max-width:760px){
  .fx-card{padding:18px 16px; border-radius:18px}
  .fx-row{grid-template-columns:1fr 1fr; gap:12px}
  .fx-chip{height:34px; padding:0 12px; font-size:.8rem; gap:7px; white-space:nowrap}
  /* phones: two scrollable rows instead of a long column */
  .fx-chips{display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); gap:8px; overflow-x:auto; padding-bottom:6px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; margin:0 -16px; padding-left:16px; padding-right:16px}
  .fx-chips .fx-chip{scroll-snap-align:start}
  .fx-results{flex-direction:column; align-items:flex-start}
}
@media (max-width:480px){ .fx-row{grid-template-columns:1fr} }

/* ── Header account menu (signed-in agency) ─────────────────────────────── */
.acc{position:relative}
.acc-btn{display:inline-flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border:1.5px solid var(--line); border-radius:999px; background:#fff;
  font:inherit; cursor:pointer; color:var(--ink); transition:border-color .15s, box-shadow .15s}
.acc-btn:hover,.acc.is-open .acc-btn{border-color:var(--teal); box-shadow:0 0 0 3px rgba(22,131,63,.12)}
.acc-avatar{width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--teal); color:#fff; display:grid; place-items:center; flex:none;
  font-size:.8rem; font-weight:800; letter-spacing:.02em}
.acc-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.acc-name{font-size:.88rem; font-weight:700; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-chev{width:16px; height:16px; color:var(--slate); transition:transform .18s}
.acc.is-open .acc-chev{transform:rotate(180deg)}
.acc-menu{position:absolute; right:0; top:calc(100% + 8px); width:250px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 40px rgba(11,37,69,.14); padding:6px; z-index:80}
.acc-menu[hidden]{display:none}
.acc-menu-head{padding:10px 12px 8px; display:grid; gap:2px}
.acc-menu-head b{font-size:.92rem; color:var(--ink)}
.acc-menu-head span{font-size:.76rem; color:var(--slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-menu a{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; color:var(--ink); font-size:.9rem; font-weight:600; text-decoration:none}
.acc-menu a:hover{background:var(--mist)}
.acc-menu a .nav-ic{width:17px; height:17px; color:var(--teal); opacity:1}
.acc-sep{height:1px; background:var(--line); margin:6px 8px}
.acc-out{color:var(--sale) !important}
.acc-out .nav-ic{color:var(--sale) !important}
.acc-hidden-link{display:none}
@media (max-width:900px){ .acc-name{display:none} .acc-btn{padding:3px 8px 3px 3px} .acc-avatar{width:32px; height:32px} }

/* ── Results bar: compact ───────────────────────────────────────────────── */
.fx-results{margin:22px 0 14px}
.fx-results .count{font-size:.9rem}
.fx-results .count b{font-size:1.05rem}
.fx-sort{font-size:.86rem; gap:8px}
.fx-sort-box{height:38px; border-radius:10px; padding-left:10px}
.fx-sort-box > svg{width:16px; height:16px}
.fx-sort-box select{font-size:.86rem; padding:0 32px 0 8px; background-position:right 10px center; background-size:14px}
.fx-view{border-radius:10px}
.fx-view-btn{height:38px; padding:0 14px; font-size:.86rem; gap:6px}
.fx-view-btn svg{width:16px; height:16px}

/* ── results bar: smaller still + pager ─────────────────────────────────── */
.fx-results{margin:18px 0 12px}
.fx-results .count{font-size:.82rem}
.fx-results .count b{font-size:.95rem}
.count-range{color:var(--slate); font-weight:500}
.fx-sort{font-size:.8rem; gap:6px}
.fx-sort-box{height:32px; border-radius:8px; padding-left:8px}
.fx-sort-box > svg{width:14px; height:14px}
.fx-sort-box select{font-size:.8rem; padding:0 28px 0 6px; background-position:right 8px center; background-size:12px}
.fx-view{border-radius:8px}
.fx-view-btn{height:32px; padding:0 11px; font-size:.8rem; gap:5px}
.fx-view-btn svg{width:14px; height:14px}
.pager{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:26px 0 6px}
.pager-btn{min-width:36px; height:36px; padding:0 10px; display:inline-grid; place-items:center; border:1.5px solid var(--line); border-radius:9px; background:#fff;
  color:var(--ink); font-size:.86rem; font-weight:700; text-decoration:none}
.pager-btn:hover{border-color:var(--teal); color:var(--teal)}
.pager-btn.is-on{background:var(--teal); border-color:var(--teal); color:#fff}
.pager-gap{align-self:center; color:var(--slate); padding:0 4px}

/* ── Find Agencies: list view (design) ───────────────────────────────────── */
.agency{position:relative}
.agency-save{position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--slate); cursor:pointer; box-shadow:0 2px 8px rgba(11,37,69,.08)}
.agency-save svg{width:18px; height:18px}
.agency-save:hover{color:var(--sale); border-color:#DDF2E3}
.agency-save.is-on{color:var(--sale); border-color:#DDF2E3; background:#F6FBF8}
.agency-save.is-on svg{fill:currentColor}
.agency-vpill{display:none}
.agency-loc-ic{display:none}
.agency-desc{display:none}
.agency-cta-arrow{display:none}
.fx-layout.is-list{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start}
.fx-side[hidden]{display:none}
.fx-grid.is-list{grid-template-columns:1fr; gap:14px}
.fx-grid.is-list .agency{display:grid; grid-template-columns:184px 1fr; gap:16px; padding:14px; border-radius:16px}
.fx-grid.is-list .agency-media{aspect-ratio:auto; height:150px; border-radius:12px; overflow:hidden}
.fx-grid.is-list .agency-body{padding:2px 44px 0 0; display:grid; grid-template-columns:1fr auto; grid-template-areas:"name name" "rate cta" "desc cta" "chips cta"; column-gap:16px; row-gap:6px; align-items:start}
.fx-grid.is-list .agency-name{grid-area:name; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:1.08rem}
.fx-grid.is-list .agency-vpill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:var(--teal-soft); color:var(--teal-dark); font-size:.72rem; font-weight:700}
.fx-grid.is-list .agency-vpill svg{width:11px; height:11px}
.fx-grid.is-list .agency-loc .verified{display:none}
.agency-meta{display:contents}
.fx-grid.is-list .agency-meta{display:flex; grid-area:rate; align-items:center; gap:16px; flex-wrap:wrap; margin:0}
.fx-grid.is-list .agency-meta .agency-loc{order:2; display:inline-flex; align-items:center; gap:6px; font-size:.84rem; color:var(--slate); margin:0}
.fx-grid.is-list .agency-loc-ic{display:inline; width:15px; height:15px; color:var(--teal)}
.fx-grid.is-list .agency-rate{font-size:.86rem; margin:0}
.fx-grid.is-list .agency-desc{display:block; grid-area:desc; margin:0; font-size:.86rem; line-height:1.5; color:var(--slate); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.fx-grid.is-list .cf-badges--card{grid-area:chips; margin:2px 0 0}
.fx-grid.is-list .agency-cta{grid-area:cta; align-self:center; width:auto; min-width:150px; height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.fx-grid.is-list .agency-cta-arrow{display:inline; width:16px; height:16px}
.fx-grid.is-list .agency-body > div[style]{grid-area:chips}
/* sidebar */
.fx-map{position:relative; border-radius:16px; overflow:hidden; background:var(--teal-soft); min-height:150px; border:1px solid var(--line)}
.fx-map img{width:100%; height:230px; object-fit:cover; display:block}
.fx-map-btn{position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:7px; background:#fff; border-radius:10px; padding:8px 12px; font-size:.82rem; font-weight:700;
  color:var(--ink); text-decoration:none; box-shadow:0 4px 14px rgba(11,37,69,.12)}
.fx-map-btn svg{width:15px; height:15px; color:var(--teal)}
.fx-facets{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-top:16px}
.fx-facets h3{font-size:.95rem; margin:0 0 6px}
.fx-facet{border-top:1px solid var(--line); padding:4px 0}
.fx-facet summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:.88rem; font-weight:700; color:var(--ink)}
.fx-facet summary::-webkit-details-marker{display:none}
.fx-facet summary::after{content:''; width:8px; height:8px; border-right:2px solid var(--slate); border-bottom:2px solid var(--slate); transform:rotate(45deg); transition:transform .15s; margin-right:4px}
.fx-facet[open] summary::after{transform:rotate(-135deg)}
.fx-facet ul{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px}
.fx-facet a{display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--slate); text-decoration:none}
.fx-facet a em{font-style:normal; color:#94A3B8}
.fx-facet a:hover{color:var(--teal)}
.fx-facet-box{width:15px; height:15px; border:1.5px solid #CBD5DF; border-radius:4px; flex:none; background:#fff}
.fx-facet a.is-on{color:var(--ink); font-weight:700}
.fx-facet a.is-on .fx-facet-box{background:var(--teal); border-color:var(--teal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size:10px; background-position:center; background-repeat:no-repeat}
.fx-facets-reset{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:.84rem; font-weight:700; color:var(--teal); text-decoration:none}
.fx-facets-reset svg{width:15px; height:15px}
.fx-help{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:16px}
.fx-help-ic{width:40px; height:40px; border-radius:12px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; margin-bottom:10px}
.fx-help-ic svg{width:22px; height:22px}
.fx-help b{display:block; font-size:1rem; line-height:1.3; margin-bottom:4px}
.fx-help p{margin:0 0 12px; font-size:.84rem; color:var(--slate)}
.fx-help .btn{width:100%; text-align:center}
/* pager row */
.pager-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:22px}
.pager-row .pager{margin:0}
.pager-arrow svg{width:16px; height:16px}
.pager-arrow.is-off{opacity:.4; pointer-events:none}
.pager-info{margin:0; font-size:.86rem; color:var(--slate)}
@media (max-width:1080px){ .fx-layout.is-list{grid-template-columns:1fr} .fx-side{display:none !important} }
.fx-results{justify-content:space-between}
@media (max-width:640px){
  .fx-grid.is-list .agency{grid-template-columns:1fr}
  .fx-grid.is-list .agency-media{height:160px}
  .fx-grid.is-list .agency-body{padding-right:0; grid-template-columns:1fr; grid-template-areas:"name" "rate" "desc" "chips" "cta"}
  .fx-grid.is-list .agency-cta{width:100%}
}

/* ── "Nearest to me" toggle ─────────────────────────────────────────────── */
.fx-near{display:inline-flex; align-items:center; gap:9px; height:36px; padding:0 12px 0 8px; border:1.5px solid var(--line); border-radius:999px; background:#fff;
  font-size:.86rem; font-weight:600; color:var(--ink); cursor:pointer; user-select:none}
.fx-near input{order:3; width:36px; height:20px; margin:0 0 0 4px}
.fx-near input::after{width:14px; height:14px}
.fx-near input:checked::after{transform:translateX(16px)}
.fx-near-ic{width:26px; height:26px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center}
.fx-near-ic svg{width:14px; height:14px}
.fx-near:has(input:checked){border-color:var(--teal); background:#F4FBFB}
.fx-near-state{font-size:.74rem; color:var(--slate); font-weight:700}
.fx-near:has(input:checked) .fx-near-state{color:var(--teal)}
.fx-near.is-busy{opacity:.7}
.agency-dist{color:var(--teal); font-weight:700}

/* ── Google rating badge ────────────────────────────────────────────────── */
.cp-google{display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:6px 12px 6px 8px; border:1px solid var(--line); border-radius:999px; background:#fff;
  text-decoration:none; color:var(--ink); font-size:.86rem}
.cp-google:hover{border-color:#CBD5DF; box-shadow:0 4px 12px rgba(11,37,69,.08)}
.cp-google-g{width:18px; height:18px}
.cp-google-txt b{font-weight:800}
.cp-google-star{color:#F5A623}
.cp-google-txt span{color:var(--slate)}
.agency-google{display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--ink); margin-left:4px}
.agency-google svg{width:14px; height:14px}
.agency-google b{font-weight:800}
.agency-google span{color:var(--slate)}
.cp-map--embed{border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--mist)}

/* ══ Agency page v3 (design) ═══════════════════════════════════════════════ */
.ic-s{width:15px; height:15px}
.cph{position:relative; overflow:hidden; background:linear-gradient(90deg,#EEF7F8 0%,#F6FBFC 60%,#E9F4F6 100%); border-bottom:1px solid var(--line)}
.cph-in{position:relative; padding-top:18px; padding-bottom:22px}
.cph-bg{position:absolute; right:-40px; top:0; height:100%; width:52%; object-fit:cover; object-position:center; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#10201A 70%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#10201A 70%)}
.cph .crumb{position:relative; z-index:1; margin-bottom:12px}
.cph-row{position:relative; z-index:1; display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:22px; align-items:start}
.cph-logo{width:132px; height:118px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 24px rgba(11,37,69,.08); display:grid; place-items:center; overflow:hidden}
.cph-logo img{width:88%; height:88%; object-fit:contain}
.cph-logo span{font-size:2rem; font-weight:800; color:var(--teal); letter-spacing:.02em}
.cph-meta{min-width:0}
.cph-vpill{display:inline-flex; align-items:center; gap:6px; background:var(--teal-soft); color:var(--teal-dark); border-radius:999px; padding:4px 10px 4px 6px; font-size:.78rem; font-weight:700; margin-bottom:8px}
.cph-vpill svg{width:18px; height:18px; color:var(--teal)}
.cph h1{font-size:2.1rem; letter-spacing:-.02em; margin:0 0 4px; line-height:1.15}
.cph-tag{margin:0 0 10px; color:var(--slate); font-size:1rem}
.cph-rating{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.92rem; color:var(--slate)}
.cph-rating b{color:var(--ink); font-size:1.05rem}
.cph-rating a{color:var(--slate); text-decoration:none}
.cph-rating a:hover{color:var(--teal)}
.stars.big{font-size:1.1rem; letter-spacing:1px}
.cph-g{display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--ink) !important}
.cph-sep{width:1px; height:18px; background:var(--line); margin:0 4px}
.cph-norev{font-weight:600}
.cph-unclaimed{display:inline-flex; align-items:center; gap:5px; border:0; background:none; font:inherit; font-size:.88rem; font-weight:700; color:var(--slate); cursor:pointer; padding:2px 0}
.cph-unclaimed:hover{color:var(--teal)}
.cph-addr{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 0; font-size:.9rem; color:var(--slate)}
.cph-addr .ic-s{color:var(--teal)}
.cph-addr2{color:var(--slate)}
.cph-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.cph-chip{display:inline-block; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); font-size:.82rem; font-weight:600; text-decoration:none}
.cph-chip:hover{border-color:var(--teal); color:var(--teal)}
.cph-chip--more{color:var(--teal)}
.cph-points{list-style:none; margin:0; padding:14px 16px; background:rgba(255,255,255,.72); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.9); border-radius:18px;
  box-shadow:0 10px 30px rgba(11,37,69,.10); display:grid; gap:12px; align-self:center; min-width:210px}
.cph-points li{display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:600; color:var(--ink)}
.cph-pt-ic{width:30px; height:30px; border-radius:9px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; flex:none}
.cph-actions{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.cph-btn{display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 18px; border-radius:12px; font-size:.95rem}
.cph-btn .ic{width:19px; height:19px}
.cph-btn--primary{padding-right:14px}
.btn.is-soft{position:relative}
.btn.btn-teal.is-soft{background:#DDF2E3; border-color:#DDF2E3; cursor:pointer}
.btn.btn-ghost.is-soft{color:#94A3B8; border-style:dashed}
.btn.is-soft::after{content:'i'; position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:var(--ink); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; font-style:italic}
/* layout */
.cp-cols{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start}
.cp-main > .card{margin-bottom:16px}
.cp-side{position:sticky; top:90px; display:grid; gap:16px}
.cp-sech{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px}
.cp-sech h2{margin:0; display:flex; align-items:center; gap:8px}
.cp-sech a{display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:700; font-size:.86rem; text-decoration:none}
/* gallery mosaic */
.cpg{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.4fr); gap:10px; margin-bottom:16px}
.cpg-main{display:block; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--teal-soft)}
.cpg-main img,.cpg-tile img{width:100%; height:100%; object-fit:cover; display:block}
.cpg-grid{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:100%; min-height:0}
.cpg{align-items:stretch}
.cpg-main{position:relative}
.cpg-main img{position:absolute; inset:0}
.cpg-tile{position:relative; display:block; border-radius:14px; overflow:hidden; background:var(--teal-soft); min-height:0}
.cpg-tile img{position:absolute; inset:0}
.cpg-tile--empty{display:grid; place-items:center; color:var(--teal); opacity:.55}
.cpg-tile--empty .ic{width:34px; height:34px}
.cpg-more{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(11,37,69,.55); color:#fff; font-weight:700; font-size:.9rem}
.cpg-more .ic{width:22px; height:22px}
.cpg.is-empty{grid-template-columns:1fr}
.cpg-placeholder{aspect-ratio:16/7; border-radius:16px; background:linear-gradient(160deg,#F2FAF4,#E3F4E8); display:grid; place-items:center; color:var(--teal); text-align:center}
.cpg-placeholder svg{width:48px; height:48px; margin-bottom:6px}
.cpg-placeholder span{display:block; color:var(--slate); font-size:.9rem}
/* tabs */
.cpt{display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto; scrollbar-width:none}
.cpt a{padding:10px 0 12px; font-weight:700; color:var(--slate); text-decoration:none; white-space:nowrap; border-bottom:2.5px solid transparent; margin-bottom:-1px}
.cpt a.on,.cpt a:hover{color:var(--teal); border-color:var(--teal)}
/* about */
.cpa{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:start}
.cpa-txt{min-width:0}
.cpa-desc{color:var(--slate); font-size:.95rem; line-height:1.65; max-height:7.6em; overflow:hidden; position:relative}
.cpa-desc.is-open{max-height:none}
.cpa-desc:not(.is-open)::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2.2em; background:linear-gradient(transparent,#fff)}
.cpa-more{margin-top:8px; border:0; background:none; color:var(--teal); font:inherit; font-weight:700; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:4px}
.cpa-stats{list-style:none; margin:0; padding:0 0 0 20px; border-left:1px solid var(--line); display:flex; gap:22px}
.cpa-stats li{display:grid; justify-items:center; text-align:center; gap:4px; min-width:76px}
.cpa-st-ic{width:48px; height:48px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center}
.cpa-st-ic .ic{width:22px; height:22px}
.cpa-stats b{color:var(--ink); font-size:.92rem}
.cpa-stats span{font-size:.74rem; color:var(--slate); line-height:1.2}
/* specialties */
.cpx-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.cpx{display:grid; gap:6px; text-decoration:none; color:var(--ink)}
.cpx-img{display:block; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--teal-soft)}
.cpx-img img{width:100%; height:100%; object-fit:cover; display:block}
.cpx-img.is-empty{display:grid; place-items:center; color:var(--teal)}
.cpx b{font-size:.9rem}
.cpx-price{font-size:.8rem; color:var(--teal); font-weight:700}
.cpx-all{margin-top:14px}
.cpx-all summary{cursor:pointer; color:var(--teal); font-weight:700; font-size:.88rem; margin-bottom:6px}
.cp-empty{padding:18px; background:var(--mist); border-radius:12px; font-size:.9rem; color:var(--slate); display:grid; gap:10px; justify-items:start}
.cp-empty p{margin:0}
/* claim band */
.cpo{background:linear-gradient(135deg,#0B2545 0%,#10201A 100%); color:#fff; border-radius:20px; padding:26px 28px; margin:8px 0 16px; position:relative; overflow:hidden}
.cpo::before{content:''; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(22,131,63,.25)}
.cpo-top{display:flex; gap:16px; align-items:flex-start; position:relative}
.cpo-ic{width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.12); display:grid; place-items:center; flex:none}
.cpo-ic svg{width:26px; height:26px}
.cpo-kicker{margin:0 0 4px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#22A94A}
.cpo h2{margin:0 0 6px; color:#fff; font-size:1.35rem}
.cpo p{margin:0; color:rgba(255,255,255,.82); font-size:.92rem}
.cpo-grid{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; position:relative}
.cpo-grid li{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:12px; display:grid; gap:4px}
.cpo-grid li span{width:32px; height:32px; border-radius:9px; background:rgba(255,138,147,.18); color:#22A94A; display:grid; place-items:center; margin-bottom:2px}
.cpo-grid li span .ic{width:18px; height:18px}
.cpo-grid b{font-size:.86rem}
.cpo-grid small{font-size:.74rem; color:rgba(255,255,255,.7); line-height:1.35}
.cpo-cta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; position:relative}
.cpo-cta .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.cpo-cta .btn-ghost:hover{border-color:#fff}
.cpo-note{font-size:.76rem; color:rgba(255,255,255,.65); margin-left:auto}
/* sidebar cards */
.cps{padding:18px 20px}
.cps h2{font-size:1.05rem; margin:0}
.cps-sub{font-size:.84rem; color:var(--slate); margin:4px 0 12px}
.cps-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; margin-bottom:8px; height:44px}
.cps-btn .ic{width:18px; height:18px}
.cps-site{display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:700; color:var(--teal); text-decoration:none; margin-top:2px}
.cp-map--embed{position:relative}
.cp-map-x{position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:9px; background:#fff; display:grid; place-items:center; color:var(--ink); box-shadow:0 2px 8px rgba(11,37,69,.15)}
.cps-addr{display:flex; gap:8px; margin:12px 0 0; font-size:.86rem; color:var(--slate)}
.cps-addr .ic-s{color:var(--teal); flex:none; margin-top:3px}
.cps-maps{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; padding:10px; border-radius:10px; background:var(--teal-soft); color:var(--teal-dark); font-size:.84rem; font-weight:700; text-decoration:none}
.cps-hours summary{list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.9rem; padding:6px 0}
.cps-hours summary::-webkit-details-marker{display:none}
.cps-hours summary span{color:var(--slate)}
.cps-hours summary b{margin-left:auto; color:var(--ink)}
.cps-hours summary .ic-s{color:var(--slate); transition:transform .15s}
.cps-hours[open] summary .ic-s{transform:rotate(180deg)}
.cps-hours .price-row{font-size:.86rem}
.cps-hours .price-row.is-today b{color:var(--teal)}
/* pointer tooltip */
.tipbox{position:absolute; z-index:120; width:300px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px 14px; box-shadow:0 18px 44px rgba(11,37,69,.18)}
.tipbox[hidden]{display:none}
.tipbox-arrow{position:absolute; width:14px; height:14px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); top:-8px}
.tipbox[data-side="bottom"] .tipbox-arrow{top:auto; bottom:-8px; transform:rotate(225deg)}
.tipbox-x{position:absolute; top:6px; right:8px; border:0; background:none; font-size:1.2rem; color:var(--slate); cursor:pointer}
.tipbox-t{display:block; font-size:.95rem; color:var(--ink); margin:0 18px 6px 0}
.tipbox p{margin:0; font-size:.86rem; color:var(--slate); line-height:1.5}
.tipbox-links{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px}
.tipbox-links a{display:block; padding:9px 12px; border-radius:9px; background:var(--mist); color:var(--ink); font-size:.86rem; font-weight:700; text-decoration:none}
.tipbox-links a:hover{background:var(--teal-soft); color:var(--teal-dark)}
.tipbox-owner{margin-top:10px !important; padding-top:10px; border-top:1px dashed var(--line); font-size:.78rem !important}
.tipbox-owner a{color:var(--teal); font-weight:700; text-decoration:none}
@media (max-width:1080px){ .cp-cols{grid-template-columns:1fr} .cp-side{position:static} .cph-points{display:none} .cph-row{grid-template-columns:100px 1fr} .cph-logo{width:100px; height:90px} .cpo-grid{grid-template-columns:1fr 1fr} .cpx-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){
  .cph h1{font-size:1.5rem} .cph-row{grid-template-columns:1fr; gap:12px} .cph-logo{width:84px; height:76px} .cph-bg{display:none}
  .cph-btn{flex:1 1 46%; justify-content:center; padding:0 12px; font-size:.88rem}
  .cpg{grid-template-columns:1fr} .cpg-grid{grid-template-columns:repeat(4,1fr); grid-template-rows:auto} .cpg-tile{aspect-ratio:1}
  .cpa{grid-template-columns:1fr} .cpa-stats{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; justify-content:space-around}
  .cpx-grid{grid-template-columns:1fr 1fr} .cpo{padding:20px} .cpo-grid{grid-template-columns:1fr} .cpo-note{margin-left:0}
  .tipbox{width:calc(100vw - 24px)}
}

/* ══ Footer v2 (light) ═════════════════════════════════════════════════════ */
.ft{background:#fff; border-top:1px solid var(--line); padding:34px 0 22px; color:var(--ink)}
.ft svg{width:18px; height:18px}
.ft-news{display:grid; grid-template-columns:96px minmax(0,1fr) minmax(360px,.95fr); grid-template-areas:"art txt form" "perks perks perks"; gap:18px 24px; align-items:center;
  background:#EEF7F8; border:1px solid #DDEFF1; border-radius:20px; padding:22px 28px 18px; margin-bottom:38px}
.ft-news-art{grid-area:art} .ft-news-txt{grid-area:txt} .ft-news-form{grid-area:form}
.ft-news-art svg{width:96px; height:96px}
.ft-news-txt h2{font-size:1.35rem; letter-spacing:-.02em; margin:0 0 6px}
.ft-news-txt p{margin:0; color:var(--slate); font-size:.95rem; line-height:1.5}
.ft-news-form{position:relative; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center}
.ft-news-in{display:flex; align-items:center; gap:10px; height:50px; padding:0 14px; background:#fff; border:1.5px solid var(--line); border-radius:12px}
.ft-news-in svg{color:var(--teal); flex:none}
.ft-news-in input{border:0; outline:0; width:100%; font:inherit; font-size:.95rem; background:transparent}

.ft-news-form .btn{height:50px; padding:0 26px; border-radius:12px; font-size:1rem}
.ft-news-note{grid-column:1 / -1; margin:0; display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--slate)}
.ft-news-note svg{width:15px; height:15px; color:var(--teal)}
.ft-news-note.is-ok{color:var(--teal-dark); font-weight:600}
.ft-news-note.is-err{color:var(--sale); font-weight:600}
.ft-news-perks{grid-area:perks; list-style:none; margin:0; padding:14px 0 0; border-top:1px solid #E3F4E8; display:flex; gap:28px; justify-content:center}
.ft-news-perks li{display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--ink); line-height:1.25}
.ft-news-perks span{width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #E3F4E8; color:var(--teal); display:grid; place-items:center; flex:none}
.ft-news-perks span svg{width:20px; height:20px}
.ft-grid{position:relative; display:grid; grid-template-columns:1.5fr .85fr .85fr .85fr 1.25fr; gap:26px; padding-bottom:120px; border-bottom:1px solid var(--line)}
.ft-logo img{height:30px; width:auto; display:block}
.ft-tag{margin:10px 0 12px; font-size:.68rem; letter-spacing:.2em; color:var(--teal); font-weight:700}
.ft-desc{margin:0 0 16px; font-size:.92rem; line-height:1.6; color:var(--slate)}
.ft-social{display:flex; gap:10px}
.ft-social a{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff}
.ft-social svg{width:20px; height:20px}
.ft-social .is-fb{background:#1877F2} .ft-social .is-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} .ft-social .is-yt{background:#16833F} .ft-social .is-li{background:#0A66C2} .ft-social .is-x{background:#10201A}
.ft-col h4,.ft-contact h4{font-size:1.02rem; margin:0 0 6px; position:relative; padding-bottom:10px}
.ft-col h4::after,.ft-contact h4::after{content:''; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--teal); border-radius:2px}
.ft-col a{display:block; padding:7px 0; color:var(--ink); font-size:.95rem; text-decoration:none}
.ft-col a:hover{color:var(--teal)}
.ft-contact a,.ft-contact > span{display:flex; align-items:center; gap:12px; padding:8px 0; color:var(--ink); font-size:.95rem; text-decoration:none}
.ft-contact svg{color:var(--teal); flex:none}
.ft-help{display:grid !important; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:10px; padding:14px 16px !important; background:#EEF7F8; border:1px solid #DDEFF1; border-radius:14px}
.ft-help-ic{width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center}
.ft-help b{display:block; font-size:.95rem} .ft-help small{color:var(--slate); font-size:.8rem}
.ft-help > svg{color:var(--teal)}
.ft-sky{position:absolute; right:0; bottom:0; width:420px; height:130px; pointer-events:none; display:flex; align-items:flex-end; justify-content:flex-end}
.ft-sky svg{width:420px; height:130px}
.ft-script{position:absolute; left:0; bottom:20px; margin:0; font-family:"Segoe Script","Brush Script MT","Comic Sans MS",cursive; font-size:1.05rem; line-height:1.3; color:#DDF2E3; opacity:.7; white-space:nowrap}
.ft-script br{display:none}
.ft-bot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:18px; font-size:.84rem; color:var(--ink)}
.ft-trust{list-style:none; margin:0; padding:0; display:flex; gap:18px}
.ft-trust li{display:flex; align-items:center; gap:8px}
.ft-trust svg{color:var(--teal); width:19px; height:19px}
.ft-made{display:inline-flex; align-items:center; gap:10px}
.ft-flag{width:22px; height:15px; border-radius:2px; background:linear-gradient(#00732F 0 33%,#fff 33% 66%,#10201A 66%); position:relative; overflow:hidden}
.ft-flag::before{content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:#16833F}
.ft-sep{width:1px; height:16px; background:var(--line); margin:0 6px}
.ft-top{display:inline-flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; font-weight:600}
.ft-top:hover{color:var(--teal)}
.ft-legal{margin:10px 0 0; font-size:.78rem; color:var(--slate)}
@media (max-width:1000px){ .ft-news{grid-template-columns:90px 1fr; grid-template-areas:"art txt" "form form" "perks perks"} .ft-grid{grid-template-columns:1.4fr 1fr 1fr 1fr; padding-bottom:26px} .ft-contact{grid-column:1 / -1} .ft-sky{display:none} }
@media (max-width:760px){
  .ft-news{grid-template-columns:1fr; grid-template-areas:"txt" "form" "perks"; padding:18px} .ft-news-art{display:none} .ft-news-form{grid-template-columns:1fr} .ft-news-form .btn{width:100%}
  .ft-news-perks{flex-wrap:wrap; gap:10px 16px; justify-content:flex-start} .ft-news-perks li{flex:1 1 42%}
  .ft-grid{grid-template-columns:1fr 1fr} .ft-brand{grid-column:1 / -1}
  .ft-bot{flex-direction:column; align-items:flex-start} .ft-trust{flex-wrap:wrap; gap:12px}
}

/* ── admin impersonation banner (agency dashboard) ─────────────────────── */
.dimp{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#FFF6DC; color:#5C3D00; border-bottom:1px solid #F5D98A; padding:9px 26px; font-size:.86rem}
.dimp-dot{width:9px; height:9px; border-radius:50%; background:#F2A93B; box-shadow:0 0 0 3px rgba(242,169,59,.25)}
.dimp a{margin-left:auto; font-weight:800; color:#8A5A00; text-decoration:none; padding:5px 12px; border:1.5px solid #F5D98A; border-radius:8px; background:#fff}
.dimp a:hover{background:#FFF1C6}

/* ── Thin, hover-only scrollbar for the dashboard sidebar ─────────────── */
.dside{scrollbar-width:thin; scrollbar-color:transparent transparent; scrollbar-gutter:stable}
.dside:hover{scrollbar-color:rgba(11,37,69,.28) transparent}
.dside::-webkit-scrollbar{width:6px}
.dside::-webkit-scrollbar-track{background:transparent}
.dside::-webkit-scrollbar-thumb{background:transparent; border-radius:999px}
.dside:hover::-webkit-scrollbar-thumb{background:rgba(11,37,69,.28)}
.dside::-webkit-scrollbar-thumb:hover{background:rgba(11,37,69,.45)}
/* same specialty for other scrollable panels in the dashboard */
.dbody-main .dtips-box,.dbody .fx-chips,.doc-list{scrollbar-width:thin; scrollbar-color:rgba(11,37,69,.2) transparent}

/* ── Agency Profile Status: animated ring, warning, next step ───────────── */
.dps-ring{position:relative; width:104px; height:104px; flex:none}
.dps-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.dps-track{fill:none; stroke:#E2EAE5; stroke-width:10}
.dps-bar{fill:none; stroke:var(--teal); stroke-width:10; stroke-linecap:round; transition:stroke .3s}
.dps.is-low .dps-bar{stroke:#F2A93B}
.dps.is-complete .dps-bar{stroke:var(--teal)}
.dps-hole{position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1}
.dps-hole b{font-size:1.35rem; color:var(--ink)}
.dps-hole small{display:block; margin-top:4px; font-size:.66rem; color:var(--slate); font-weight:600}
.dps-warn,.dps-done{position:absolute; top:-4px; right:-4px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:2px solid #fff}
.dps-warn{background:#F2A93B; color:#fff; animation:dps-pulse 2.2s ease-in-out infinite}
.dps-warn svg{width:15px; height:15px}
.dps-done{background:var(--teal); color:#fff}
.dps-done svg{width:15px; height:15px}
@keyframes dps-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,169,59,.55); transform:scale(1)} 50%{box-shadow:0 0 0 9px rgba(242,169,59,0); transform:scale(1.06)}}
.dps-next{display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; border-radius:12px; background:#FFF6DC; border:1px solid #F5D98A; color:var(--ink); text-decoration:none;
  transition:transform .15s, box-shadow .15s}
.dps-next:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(242,169,59,.25)}
.dps-next-ic{width:34px; height:34px; border-radius:10px; background:#F2A93B; color:#fff; display:grid; place-items:center; flex:none}
.dps-next-ic svg{width:18px; height:18px; animation:dps-nudge 1.6s ease-in-out infinite}
@keyframes dps-nudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)}}
.dps-next small{display:block; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A5A00}
.dps-next b{display:block; font-size:.92rem}
.dps-next em{display:block; font-style:normal; font-size:.76rem; color:var(--slate)}
.dps .dcheck{text-decoration:none; border-radius:8px; padding:4px 6px; margin:0 -6px; transition:background .15s; opacity:0; transform:translateX(-6px)}
.dps.is-in .dcheck{opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease, background .15s; transition-delay:calc(var(--i,0) * 60ms)}
.dps .dcheck:hover{background:var(--mist)}
.dps .dcheck-lbl{flex:1; font-size:.84rem; line-height:1.25}
@media (max-width:1400px){ .dps .dcheck-grid{grid-template-columns:1fr} }
.dps .dcheck.todo .dcheck-dot{border-style:dashed; border-color:#F2A93B}
.dps .dcheck-w{font-size:.68rem; font-weight:800; color:#8A5A00; background:#FFF6DC; padding:2px 6px; border-radius:999px}
.dps.is-complete .dcheck.ok .dcheck-dot{animation:dps-pop .5s ease both; animation-delay:calc(var(--i,0) * 60ms)}
@keyframes dps-pop{0%{transform:scale(.6)} 60%{transform:scale(1.2)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .dps-warn,.dps-next-ic svg,.dps.is-complete .dcheck.ok .dcheck-dot{animation:none} .dps .dcheck{opacity:1; transform:none} }

/* deep-link flash for a form block (e.g. /dashboard/profile#licence) */
.is-flash{animation:dn-flash 2.4s ease}
@keyframes dn-flash{0%{box-shadow:0 0 0 0 rgba(242,169,59,0); background:transparent} 15%{box-shadow:0 0 0 6px rgba(242,169,59,.35); background:#FFF6DC} 100%{box-shadow:0 0 0 0 rgba(242,169,59,0); background:transparent}}
.field-2.is-flash,.field.is-flash{border-radius:12px; padding:6px; margin:-6px}

/* ── ⓘ help buttons + popover ───────────────────────────────────────────── */
.dn-help{display:inline-grid; place-items:center; width:18px; height:18px; margin-left:4px; vertical-align:-3px; border:0; padding:0; background:none; color:#94A3B8; cursor:pointer; border-radius:50%}
.dn-help svg{width:16px; height:16px}
.dn-help:hover,.dn-help.is-on{color:var(--teal)}
.dn-help:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
h2 .dn-help{width:20px; height:20px; vertical-align:-2px}
h2 .dn-help svg{width:18px; height:18px}
.hpop{position:absolute; z-index:130; width:300px; background:#0B2545; color:#fff; border-radius:12px; padding:14px 34px 14px 16px; box-shadow:0 18px 44px rgba(11,37,69,.28)}
.hpop[hidden]{display:none}
.hpop-arrow{position:absolute; top:-7px; width:14px; height:14px; background:#0B2545; transform:rotate(45deg)}
.hpop[data-side="bottom"] .hpop-arrow{top:auto; bottom:-7px}
.hpop-x{position:absolute; top:6px; right:8px; border:0; background:none; color:rgba(255,255,255,.6); font-size:1.2rem; cursor:pointer; line-height:1}
.hpop-x:hover{color:#fff}
.hpop-t{display:block; font-size:.9rem; margin-bottom:6px; color:#22A94A}
.hpop-x-txt{margin:0; font-size:.84rem; line-height:1.55; color:rgba(255,255,255,.88)}
.hpop-link{display:inline-block; margin-top:10px; font-size:.82rem; font-weight:700; color:#fff; text-decoration:none; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.12)}
.hpop-link:hover{background:var(--teal)}
@media (max-width:480px){ .hpop{width:calc(100vw - 24px)} }

/* specialties page: column captions over the price/duration inputs */
.svc-cols{display:flex; gap:8px; justify-content:flex-end; margin:-4px 0 6px; font-size:.72rem; font-weight:700; color:var(--slate)}
.svc-cols span{text-align:center}
.svc-cols span:nth-child(1){flex:1; min-width:210px}
.svc-cols span:nth-child(2),.svc-cols span:nth-child(3){width:110px}
.svc-cols span:nth-child(4){width:96px; white-space:nowrap}
.svc-cols span:nth-child(5){width:190px}
@media (max-width:760px){ .svc-cols{display:none} }

/* offers list: state + actions */
.of-state{font-weight:800; font-size:.78rem; letter-spacing:.04em}
.of-state.is-live{color:var(--teal)} .of-state.is-sched{color:#B7791F} .of-state.is-off{color:var(--slate)}
.of-actions{display:flex; gap:6px; justify-content:flex-end; margin-top:8px}
.of-btn{border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 10px; font:inherit; font-size:.76rem; font-weight:700; color:var(--ink); cursor:pointer}
.of-btn:hover{border-color:var(--teal); color:var(--teal)}
.of-btn--go{background:var(--teal); border-color:var(--teal); color:#fff} .of-btn--go:hover{color:#fff; background:var(--teal-dark)}
.of-btn--danger{color:var(--sale)} .of-btn--danger:hover{border-color:var(--sale); color:var(--sale)}
.dstat-sched{color:#B7791F; font-weight:700}

/* offer live preview in the dashboard */
.of-preview{max-width:300px; margin:0 auto 18px; pointer-events:none}
.of-preview .offer{box-shadow:0 10px 30px rgba(11,37,69,.10)}

/* offers page: list left, wide form card right with preview column */
.of-layout{display:grid; grid-template-columns:1fr; gap:22px; align-items:start; max-width:860px}
.of-wrap{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:26px; align-items:start}
.of-prev-col{position:sticky; top:96px}
.of-preview{max-width:none; margin:0}
.of-preview.is-bad .offer-badge{background:var(--sale)}
.of-preview.is-bad .op-now{color:var(--sale)}
.of-prev-note{margin:8px 0 0; font-size:.8rem; font-weight:700; color:var(--sale)}
.of-err{margin:-6px 0 12px; padding:8px 12px; border-radius:10px; background:#F2FAF4; color:#B42318; font-size:.82rem; font-weight:600}
.of-err[hidden]{display:none}
#o-dp.is-invalid{border-color:var(--sale) !important; box-shadow:0 0 0 3px rgba(22,131,63,.14)}
#of-submit:disabled{opacity:.55; cursor:not-allowed}
@media (max-width:760px){ .of-wrap{grid-template-columns:1fr} .of-prev-col{position:static; order:-1} .of-preview{max-width:300px; margin:0 auto 12px} }

/* offers form: live-validation states */
.of-missing{margin:0 0 10px; padding:9px 12px; border-radius:10px; background:#FFF6DC; color:#8A5A00; font-size:.82rem; font-weight:600}
.of-missing[hidden]{display:none}
#of-form .is-touched-empty{border-color:#F2A93B !important; box-shadow:0 0 0 3px rgba(242,169,59,.16)}
.of-btn.is-muted{opacity:.45; cursor:not-allowed}

/* ── Open now toggle + per-card status ─────────────────────────────────── */
.fx-toggles{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fx-open-ic{background:#DCFCE7; color:#15803D}
.fx-open:has(input:checked){border-color:#15803D; background:#F0FDF4}
.fx-open:has(input:checked) .fx-near-state{color:#15803D}
.fx-open input:checked{background:#15803D}
.fx-open-note{font-size:.84rem; color:var(--slate)}
.fx-open-note b{color:#15803D}
.agency-open{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:.8rem; font-weight:700}
.agency-open.is-open{color:#15803D} .agency-open.is-closed{color:var(--slate); font-weight:600}
.agency-open-dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.agency-open.is-open .agency-open-dot{box-shadow:0 0 0 3px rgba(21,128,61,.18)}
.fx-grid.is-list .agency-open{grid-area:rate; justify-self:start}
.fx-grid.is-list .agency-meta{grid-area:auto}
.fx-grid.is-list .agency-body{grid-template-areas:"name name" "rate cta" "open cta" "desc cta" "chips cta"}
.fx-grid.is-list .agency-meta{grid-area:rate}
.fx-grid.is-list .agency-open{grid-area:open}

/* working hours: 24h checkbox + tools */
.hrs-24{display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:700; color:var(--slate); cursor:pointer; margin:0 6px}
.hrs-24 input{width:34px; height:20px; margin:0} .hrs-24 input::after{width:14px; height:14px} .hrs-24 input:checked::after{transform:translateX(14px)}
.price-row.is-24h .hrs-24{color:var(--teal)}
.hrs-tools{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.hrs-tools .btn{padding:8px 12px; font-size:.82rem}

  .in-stat-ic.is-navy{background:#E8EEF7; color:var(--ink)}   .in-table tr.is-voided td{opacity:.5; text-decoration:line-through}
 .in-badge.is-active,.in-badge.is-upcoming{background:var(--teal-soft); color:var(--teal-dark)}
.in-badge.is-due{background:#FFF6DC; color:#8A5A00} .in-badge.is-partial{background:#EDE9FE; color:#5B21B6}
.in-badge.is-overdue{background:#F2FAF4; color:#B42318} .in-badge.is-paid,.in-badge.is-completed{background:#DCFCE7; color:#15803D}
.in-badge.is-cancelled{background:var(--mist); color:var(--slate)}
     .in-next.upcoming{border-left-color:var(--teal)}
  .wa-prev{white-space:pre-wrap; background:#E7F8EE; border:1px solid #BBE7CC; border-radius:14px 14px 14px 4px; padding:14px 16px; font-size:.92rem; line-height:1.55; color:#0B2545; position:relative}
.wa-prev::after{content:'✓✓'; position:absolute; right:12px; bottom:6px; font-size:.7rem; color:#53BDEB}
.dn-badge{margin-left:auto; background:#F2A93B; color:#fff; font-size:.68rem; font-weight:800; padding:2px 7px; border-radius:999px}
/* bell dropdown */
.dtop-notif{position:relative}
.dtop-bell{border:0; background:none; cursor:pointer}
.dtop-notif-menu{position:absolute; right:0; top:calc(100% + 8px); width:340px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(11,37,69,.16); padding:6px; z-index:90}
.dtop-notif-menu[hidden]{display:none}
.dtop-notif-head{display:flex; justify-content:space-between; padding:10px 12px 8px; font-size:.86rem} .dtop-notif-head span{color:var(--slate)}
.dtop-notif-item{display:flex; gap:10px; align-items:center; padding:9px 12px; border-radius:10px; text-decoration:none; color:var(--ink)}
.dtop-notif-item:hover{background:var(--mist)}
.dtop-notif-item b{display:block; font-size:.86rem} .dtop-notif-item small{display:block; color:var(--slate); font-size:.76rem}
.dtop-notif-ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none}
.dtop-notif-ic .ic{width:16px; height:16px}
.dtop-notif-ic.is-teal{background:var(--teal-soft); color:var(--teal)} .dtop-notif-ic.is-amber{background:#FFF6DC; color:#C98A00} .dtop-notif-ic.is-red{background:#F2FAF4; color:#B42318}
.dtop-notif-more{display:block; padding:10px 12px; font-size:.84rem; font-weight:700; color:var(--teal); text-decoration:none}
.dtop-notif-empty{margin:0; padding:14px 12px; color:var(--slate); font-size:.86rem}


  
/* ---------- Bookingo hero: skyline + verified-agent card ---------- */
.hv-skyline svg{width:100%; height:100%; display:block;
  -webkit-mask-image:radial-gradient(ellipse 64% 60% at 52% 50%, #10201A 58%, transparent 100%);
          mask-image:radial-gradient(ellipse 64% 60% at 52% 50%, #10201A 58%, transparent 100%)}
.hv-verified{background:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 14px 34px rgba(11,37,69,.12)}
.hv-vf{display:flex; align-items:center; gap:10px}
.hv-vf-av{width:38px; height:38px; border-radius:50%; background:var(--teal-soft,#E6F6F6); color:var(--teal,#16833F);
  display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:none}
.hv-vf-name{font-weight:800; font-size:.92rem; color:var(--ink,#0B2545); line-height:1.15; display:flex; flex-direction:column}
.hv-vf-name small{font-weight:600; font-size:.7rem; color:var(--slate,#5A6962); margin-top:2px}
.hv-vf-badge{width:22px; height:22px; color:var(--teal,#16833F); margin-left:auto; flex:none}
.hv-verified figcaption{font-size:.7rem; color:var(--teal,#16833F); font-weight:700; text-align:center; margin-top:8px}
@media (max-width:900px){ .hv-skyline{overflow:hidden} .hv-skyline svg{-webkit-mask-image:none; mask-image:none} }
.hv-ba.hv-verified{width:clamp(210px,44%,260px); transform:none}
.hero-visual.hv-in .hv-ba.hv-verified{transform:none}
.hv-vf-name small{white-space:nowrap}

/* agent card: BRN + direct contact */
.doc-brn{display:inline-block; margin-left:6px; font-size:.68rem; font-weight:700; color:var(--slate,#5A6962); background:#F1F5F9; padding:1px 6px; border-radius:6px; vertical-align:1px}
.doc-contact{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px}
.doc-cbtn{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; padding:6px 10px; border-radius:9px;
  border:1px solid #E2E8F0; color:var(--ink,#0B2545); text-decoration:none; background:#fff}
.doc-cbtn svg{width:14px; height:14px}
.doc-cbtn:hover{border-color:var(--teal,#16833F); color:var(--teal,#16833F)}
.doc-cbtn--wa{background:#E9F9F0; border-color:#BFEBD2; color:#127A45}
.doc-cbtn--wa:hover{background:#25D366; border-color:#25D366; color:#fff}

/* V22.85 — offer page: the drop, why it's cheaper, and features */
.od-why{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.od-badge small{font-size:.72em;font-weight:600;opacity:.9}
.od-reason{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid #DDF2E3;background:#F6FBF8;font-weight:700;font-size:.9rem;color:#10201A}
.od-reason small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0F5A2B}
.od-reason-ic{width:20px;height:20px;color:#12703A;flex:none}
.od-feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.od-feats span{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;padding:4px 8px;border-radius:7px;background:#EEF3F0;color:#10201A}
.od-feats .dc-feat-ic{width:14px;height:14px}

/* V22.87 — offer page: gallery, details, sticky price panel */
.op{background:#F6F7F9;padding:24px 0 60px}
.op-shell{max-width:1240px;margin:0 auto;padding:0 28px;box-sizing:border-box}
.op *,.op *::before,.op *::after{box-sizing:border-box}
.op-crumb{margin:0 0 6px;font-size:13px;color:#5A6962}.op-crumb a{font-weight:600;text-decoration:none}
.op-h1{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#10201A}
.op-sub{margin:0 0 20px;font-size:15px;color:#3A4A42}
.op-gal{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;height:460px;margin-bottom:24px}
.op-gal--one{grid-template-columns:minmax(0,1fr)}
.op-main,.op-thumb{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:#E2EAE5;cursor:zoom-in}
.op-thumb{border-radius:14px;cursor:pointer}
.op-main img,.op-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.op-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
.op-pct{position:absolute;left:16px;top:16px;font-size:13px;font-weight:800;color:#fff;background:#12703A;padding:6px 10px;border-radius:8px}
.op-pct small{font-size:11px;font-weight:600}
.op-count{position:absolute;left:16px;bottom:16px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(21,23,28,.72);padding:5px 10px;border-radius:7px}
.op-more{position:absolute;inset:0;background:rgba(21,23,28,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800}
.op-main:focus-visible,.op-thumb:focus-visible{outline:3px solid #10201A;outline-offset:2px}
.op-nophoto{position:relative;height:260px;border-radius:18px;background:linear-gradient(160deg,#DCE8F3,#F4F6F8);margin-bottom:24px;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px 24px;overflow:hidden}
.op-nophoto svg{width:170px;height:160px}
.op-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.op-main-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.op-card{background:#fff;border:1px solid #E2EAE5;border-radius:18px;padding:22px 24px}
.op-card h2{margin:0 0 10px;font-size:18px;font-weight:700}.op-card h3{margin:14px 0 6px;font-size:15px;font-weight:700}
.op-facts{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:#3A4A42}.op-facts b{color:#10201A}
.op-feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.op-feats span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;background:#EEF3F0;color:#10201A}
.op-feat-ic{width:15px;height:15px}
.op-why{display:flex;gap:16px;align-items:flex-start;background:#F6FBF8;border:1px solid #DDF2E3;border-radius:18px;padding:20px 24px}
.op-why-ic{width:46px;height:46px;flex:none;border-radius:12px;background:#fff;border:1px solid #DDF2E3;display:flex;align-items:center;justify-content:center;color:#12703A}
.op-why-ic .ui-ic{width:24px;height:24px}
.op-why small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0F5A2B}
.op-why h2{margin:2px 0 4px;font-size:20px;font-weight:800}
.op-why p{margin:0;font-size:14.5px;color:#3A4A42;line-height:1.5}
.op-text{margin:0;font-size:15px;color:#3A4A42;line-height:1.6}.op-text--s{font-size:14px;color:#5A6962}
.op-form{display:flex;flex-direction:column;gap:12px}
.op-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.op-note{margin:6px 0 0;font-size:13px;color:#5A6962}
.op-agency{display:flex;align-items:center;gap:16px}
.op-agency-logo{width:56px;height:56px;flex:none;border-radius:12px;background:#E3F4E8;color:#0F5A2B;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden}
.op-agency-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.op-agency>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.op-agency small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A6962}
.op-agency b{font-size:16px}.op-agency span{font-size:13px;color:#5A6962}
.op-agency>a{font-size:14px;font-weight:700;text-decoration:none;flex:none}
.op-panel{position:sticky;top:84px;background:#fff;border:1px solid #E2EAE5;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px rgba(21,23,28,.08)}
.op-price s{font-size:15px;color:#5A6962}
.op-price>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.op-price b{font-size:32px;font-weight:800;color:#12703A;letter-spacing:-.01em}
.op-pbadge{font-size:13px;font-weight:800;color:#fff;background:#12703A;padding:4px 8px;border-radius:7px}
.op-price small{display:block;font-size:13px;color:#5A6962}
.op-cd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#F6FBF8;font-size:14px}
.op-cd-ic{width:20px;height:20px;color:#12703A;flex:none}
.op-cd b{color:#12703A}.op-cd-date{color:#5A6962}
.op-ended{margin:0;padding:12px 14px;border-radius:12px;background:#FFF4DB;color:#7A4D00;font-size:14px}
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid #D3DED7;background:#fff;color:#10201A;font:inherit;font-size:14.5px;font-weight:700;text-decoration:none;cursor:pointer}
.op-btn:hover{border-color:#10201A;color:#10201A}
.op-btn--red{background:#16833F;border-color:#16833F;color:#fff;font-size:16px;min-height:50px}
.op-btn--red:hover{background:#0F5A2B;border-color:#0F5A2B;color:#fff}
.op-btn--wa{color:#0E6F63}.op-btn--wa .ui-ic{color:#128C7E}
.op-btn .ui-ic{width:18px;height:18px}
.op-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.op-by{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid #EEF3F0}
.op-by-av{width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;background:#E3E8F2;color:#2B3A55;font-weight:800;display:flex;align-items:center;justify-content:center;text-decoration:none}
.op-by-av img{width:100%;height:100%;object-fit:cover}
.op-by>div{flex:1;min-width:0;display:flex;flex-direction:column}
.op-by b{font-size:14.5px;display:flex;align-items:center;gap:4px}.op-by small{font-size:12.5px;color:#5A6962}
.op-by-link{font-size:13px;font-weight:700;text-decoration:none;flex:none}
.op-bar{display:none}
.op-lb{width:min(1100px,96vw);max-height:92vh;padding:0;border:0;border-radius:16px;background:#10201A;color:#fff;overflow:hidden}
.op-lb::backdrop{background:rgba(0,0,0,.8)}
.op-lb img{display:block;width:100%;max-height:82vh;object-fit:contain;background:#10201A}
.op-lb-x{position:absolute;right:12px;top:10px;z-index:2;width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer}
.op-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:34px;cursor:pointer}
.op-lb-prev{left:10px}.op-lb-next{right:10px}
.op-lb-pos{margin:0;padding:10px;text-align:center;font-size:13px;color:#D3DED7}
@media (max-width:980px){
  .op-grid{grid-template-columns:minmax(0,1fr)}
  .op-panel{position:static}
}
@media (max-width:760px){
  .op{padding:14px 0 90px}.op-shell{padding:0 12px}
  .op-h1{font-size:22px}
  .op-gal{display:flex;flex-direction:column;height:auto;gap:8px}
  .op-main{height:260px;border-radius:14px}
  .op-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
  .op-thumbs::-webkit-scrollbar{display:none}
  .op-thumb{flex:0 0 96px;height:72px;border-radius:10px}
  .op-more{font-size:12px;text-align:center}
  .op-card,.op-why{padding:18px 16px}
  .op-f2{grid-template-columns:minmax(0,1fr)}
  .op-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #E2EAE5}
  .op-bar>div{flex:1;min-width:0;display:flex;flex-direction:column}
  .op-bar small{font-size:12px;color:#5A6962;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .op-bar b{font-size:17px;font-weight:800;color:#12703A}
}

/* V22.142: success states are always green — --teal is the brand colour (red) on public pages */
.ph-wrap.is-ok{border-color:#0F9D58 !important}
.ph-hint.is-ok{color:#0B7A43 !important}
.ff.is-ok .ff-state.ok{color:#0F9D58 !important}