@import url("/local-fonts/nunito/nunito.css");
/* ===================================================================
   Weston Horton — single stylesheet for the whole site
   Clean hand-written CSS. No framework, no WordPress.
   =================================================================== */

/* ---- Design tokens ---- */
:root {
  --ink:      #1e266d;   /* dark navy — headings, footer */
  --ink-2:    #212240;
  --primary:  #6865e7;   /* brand blue — buttons, links */
  --primary-text:#5A56E0; /* brand for SMALL TEXT on tinted bgs - passes WCAG 4.5 (audit) */
  --primary-d:#524fd4;
  --green:    #00d658;   /* accent / check marks */
  --bg:       #ffffff;
  --bg-soft:  #f1edfa;   /* light blue section bg */
  --bg-mint:  #f7f7f7;   /* light grey section bg — alternates with blue/white */
  --bg-tint:  #e0f0fd;
  --text:     #5a6478;   /* body copy */
  --text-dark:#2b3245;
  --muted:    #656d80;  /* was #656d80 - lifted for WCAG contrast 2026-09-13, revert if disliked */
  --line:     #e6e9f2;
  --radius:   14px;
  --radius-lg:22px;
  --shadow:   0 18px 50px rgba(30,38,109,.10);
  --shadow-sm:0 8px 24px rgba(30,38,109,.08);
  --maxw:     1200px;
  --font:     'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body {
  margin:0; font-family:var(--font); color:var(--text);
  font-size:16px; line-height:1.7; background:var(--bg); overflow-x:clip;
}
h1,h2,h3,h4,h5,h6 { margin:0 0 .5em; color:#150d15; font-weight:800; line-height:1.2; }
h1 { font-size:clamp(2.4rem,5vw,4rem); letter-spacing:-.02em; }
h2 { font-size:clamp(1.5rem,3vw,2.05rem); letter-spacing:-.01em; }
h3 { font-size:1.4rem; }
p { margin:0 0 1rem; }
a { color:var(--primary); text-decoration:none; transition:color .2s; }
a:hover { color:var(--primary-d); }
img { max-width:100%; height:auto; display:block; }
ul { margin:0; padding:0; list-style:none; }

/* ---- Layout helpers ---- */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:90px 0; }
.section-tint { background:var(--bg-soft); }
.section-mint { background:var(--bg-mint); }
.text-center { text-align:center; }
.lead { font-size:1.1rem; color:var(--text); }
.eyebrow {
  display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--primary-text); margin-bottom:14px;
}
.section-head { max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head p { color:var(--text); font-size:1.08rem; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-weight:600; font-size:.98rem; padding:15px 30px; border-radius:10px;
  border:2px solid transparent; transition:.2s; white-space:nowrap;
}
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 10px 24px rgba(104,101,231,.35); }
.btn-primary:hover { background:var(--primary-d); color:#fff; transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--primary); border-color:#c9d8f7; }
.btn-ghost:hover { border-color:var(--primary); color:var(--primary-d); }
.btn-arrow::after { content:"→"; font-weight:400; }

/* ===================================================================
   HEADER / NAV
   =================================================================== */
/* default header: plain (non-sticky), light background */
.site-header { background:var(--bg-soft); position:relative; z-index:100; border-bottom:1px solid rgba(30,38,109,.07); }
.site-header .container { display:flex; align-items:center; min-height:88px; gap:24px; }

/* ---- Top utility bar (above the main header, 1px separator underneath) ---- */
.topbar { border-bottom:1px solid rgba(30,38,109,.10); }
.topbar > .container { min-height:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; padding-bottom:8px; }
.topbar__left,
.topbar__right { display:flex; align-items:center; gap:6px; }
.topbar__app { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; color:var(--ink); transition:background-color .2s, color .2s; }
.topbar__app svg { width:19px; height:19px; }
.topbar__app:hover { background:rgba(30,38,109,.07); color:var(--primary); }
.topbar__link { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:700; font-size:.86rem; padding:7px 12px; border-radius:8px; transition:background-color .2s, color .2s; }
.topbar__link svg { width:17px; height:17px; }
.topbar__link:hover { background:rgba(30,38,109,.07); color:var(--primary); }

/* Account menu (signed-in): greeting button + pure-CSS dropdown (hover / focus-within) */
.topbar__acct { position:relative; }
.topbar__acct-btn { background:none; border:0; cursor:pointer; font-family:inherit; }
.topbar__acct-car { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.7; margin-left:1px; }
.topbar__acct-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:180px; background:#fff; border:1px solid #e9ebf3; border-radius:12px; box-shadow:0 16px 40px rgba(21,13,35,.14); padding:6px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .16s, transform .16s, visibility .16s; z-index:1200; }
.topbar__acct:hover .topbar__acct-menu, .topbar__acct:focus-within .topbar__acct-menu { opacity:1; visibility:visible; transform:translateY(0); }
.topbar__acct-menu a, .topbar__acct-menu button { display:block; width:100%; text-align:left; padding:9px 12px; border:0; background:none; border-radius:8px; color:var(--ink); font-family:inherit; font-weight:700; font-size:.88rem; cursor:pointer; text-decoration:none; }
.topbar__acct-menu a:hover, .topbar__acct-menu button:hover { background:#f1f0fd; color:var(--primary); }
.topbar__acct-menu form { margin:0; }
.topbar__acct-sep { display:block; height:1px; background:#eceef5; margin:5px 8px; }

/* Dashboard sub-header bar: mirrors the "Hi, {name}" account menu as a
   horizontal, centred row of icon links; shown only on cabinet pages. */
.dashnav { background:#efe5f5; border-bottom:1px solid #e0d3ea; }
.dashnav__inner { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 24px; }
.dashnav__link { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; color:var(--ink); font-weight:700; font-size:.92rem; text-decoration:none; white-space:nowrap; transition:background .14s, color .14s; }
.dashnav__link:hover { background:#e2d2ec; color:var(--primary); }
.dashnav__link.is-active { background:#ffffff; color:var(--primary); box-shadow:0 2px 8px rgba(104,101,231,.14); }
.dashnav__i { display:inline-flex; }
@media (max-width:760px){
  /* Phone: the section pills stay on ONE row and scroll sideways; the fade on
     the right signals there is more to swipe (client mobile pass 2026-09-20). */
  .dashnav{position:relative}
  .dashnav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
    background:linear-gradient(90deg,rgba(239,229,245,0),#efe5f5 75%);pointer-events:none}
  .dashnav__inner{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 30px 8px 14px}
  .dashnav__inner::-webkit-scrollbar{display:none}
  .dashnav__link{flex:none;padding:8px 11px}
}
.dashnav__i svg { width:19px; height:19px; }
@media (max-width:560px) {
  .dashnav__inner { gap:2px; padding:6px 12px; }
  .dashnav__link { padding:8px 10px; font-size:.86rem; gap:6px; }
  .dashnav__link span:last-child { font-size:.82rem; }
}

/* slide-out search: input grows to the right of the button on toggle */
.topbar-search { display:flex; align-items:center; }
.topbar-search__btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:0; background:transparent; border-radius:8px; color:var(--ink); cursor:pointer; transition:background-color .2s, color .2s; }
.topbar-search__btn svg { width:18px; height:18px; }
.topbar-search__btn:hover,
.topbar-search.open .topbar-search__btn { background:rgba(30,38,109,.07); color:var(--primary); }
.topbar-search__form { max-width:0; overflow:hidden; transition:max-width .3s ease; }
.topbar-search.open .topbar-search__form { max-width:400px; }
.topbar-search__form input { width:380px; margin-left:6px; border:1px solid rgba(30,38,109,.18); background:#fff; border-radius:999px; padding:7px 14px; font:inherit; font-size:.86rem; color:var(--ink); outline:none; }
.topbar-search__form input:focus { border-color:var(--primary); }

/* light-on-dark grounds (transparent over hero / solid dark header) */
.site-header--over .topbar,
.site-header--dark .topbar { border-bottom-color:rgba(255,255,255,.16); }
.site-header--over .topbar__app,
.site-header--dark .topbar__app,
.site-header--over .topbar__link,
.site-header--dark .topbar__link,
.site-header--over .topbar-search__btn,
.site-header--dark .topbar-search__btn { color:#fff; }
.site-header--over .topbar__app:hover,
.site-header--dark .topbar__app:hover,
.site-header--over .topbar__link:hover,
.site-header--dark .topbar__link:hover,
.site-header--over .topbar-search__btn:hover,
.site-header--dark .topbar-search__btn:hover,
.site-header--over .topbar-search.open .topbar-search__btn,
.site-header--dark .topbar-search.open .topbar-search__btn { background:rgba(255,255,255,.16); color:#fff; }
.site-header--over .topbar-search__form input,
.site-header--dark .topbar-search__form input { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff; }
.site-header--over .topbar-search__form input::placeholder,
.site-header--dark .topbar-search__form input::placeholder { color:rgba(255,255,255,.7); }
.site-header--over .topbar-search__form input:focus,
.site-header--dark .topbar-search__form input:focus { border-color:#fff; }
.logo { flex:none; }
.logo img { height:auto; }
.logo-full { width:140px; }
.logo-mark { display:none; width:44px; }
.main-nav { margin-left:auto; }
.main-nav > ul { display:flex; align-items:center; gap:4px; }
.main-nav a { color:var(--ink); font-weight:700; font-size:.96rem; padding:10px 14px; display:block; border-radius:8px; transition:background-color .2s, color .2s; }
.main-nav a:hover { color:var(--primary); background:var(--bg-soft); }

/* transparent header that sits over the gradient hero (home page) */
.site-header--over {
  position:absolute; top:0; left:0; right:0;
  background:transparent; border-bottom:none;
}
/* solid dark header for pages with no gradient hero underneath (/start).
   Shares every light-on-dark rule below with --over. */
.site-header--dark { background:#150d15; border-bottom:none; }

.site-header--over .main-nav > ul > li > a,
.site-header--dark .main-nav > ul > li > a { color:#fff; }
.site-header--over .main-nav > ul > li > a:hover,
.site-header--dark .main-nav > ul > li > a:hover { color:#fff; background:rgba(255,255,255,.18); opacity:1; }
/* dropdown panels are white — keep their links dark */
.site-header--over .dropdown a,
.site-header--dark .dropdown a { color:#150d15; }
.site-header--over .dropdown a:hover,
.site-header--dark .dropdown a:hover { color:#6865e7; background:#f1edfa; }
.site-header--over .main-nav .has-dropdown > a::after,
.site-header--dark .main-nav .has-dropdown > a::after { color:#fff; }
.site-header--over .logo-full,
.site-header--dark .logo-full { filter:brightness(0) invert(1); }   /* white logo over the dark ground */
.site-header--over .nav-toggle,
.site-header--dark .nav-toggle { color:#fff; }
/* white "Get Accredited" in the transparent header, bold, hover fills to #6865e7 */
.site-header--over .header-cta,
.site-header--dark .header-cta {
  background:#fff; color:#150d15; border-color:#fff; font-weight:700;
  box-shadow:0 12px 30px rgba(30,20,80,.18);
  transition:background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.site-header--over .header-cta::before,
.site-header--dark .header-cta::before { display:none; }
.site-header--over .header-cta:hover { background:#150d15; color:#fff; border-color:#150d15; }
/* the dark header IS #150d15, so that hover would vanish - fill with brand instead */
.site-header--dark .header-cta:hover { background:#6865e7; color:#fff; border-color:#6865e7; }
.main-nav .has-dropdown { position:relative; }
.main-nav .has-dropdown > a::after {
  content:""; display:inline-block; width:7px; height:7px; margin-left:8px;
  border:solid currentColor; border-width:0 2px 2px 0;   /* chevron ▾ */
  transform:translateY(-2px) rotate(45deg); vertical-align:middle;
}
.dropdown {
  position:absolute; top:100%; left:0; min-width:220px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
  transition-delay:.3s;              /* stay open ~0.3s after the mouse leaves */
  z-index:50;
}
.main-nav .has-dropdown:hover > .dropdown {
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}
.dropdown a { padding:8px 12px; font-size:.9rem; border-radius:6px; }
.dropdown a:hover { background:#f1edfa; color:#6865e7; }
/* mega dropdown (Test) — columns */
.dropdown.mega { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:4px 10px; min-width:520px; }
.dropdown.mega .col-title {
  grid-column:auto; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); padding:10px 12px 4px;
}

/* ---- Index mega-menu (full container width: main links | categories | CTA) ---- */
.site-header .container { position:relative; }        /* anchor the full-width mega */
.main-nav .has-dropdown.has-mega { position:static; } /* so the mega spans the container, not the item */

/* ===== STANDARD mega-menu box =====================================
   Every mega dropdown (Index, Recognition, and any future one) shares the
   SAME outer size: full container width (left/right:24px) AND this fixed
   height. Only the content/design INSIDE a mega changes — never the box.
   New megas: give the panel `left:24px;right:24px` + this min-height. */
.dropdown.mega-index,
.dropdown.mega-reco { min-height:266px; }

.dropdown.mega-index {
  left:24px; right:24px;                     /* match .container content (logo -> Get Listed) */
  top:calc(100% + 5px);                      /* drop 5px below the header */
  display:grid; grid-template-columns:400px minmax(0,1fr) 236px;
  width:auto; padding:0; overflow:hidden;
  box-shadow:0 24px 60px rgba(30,20,80,.22), 0 6px 18px rgba(30,20,80,.10);
}
.dropdown.mega-index::before {               /* transparent hover bridge over the 5px gap */
  content:""; position:absolute; left:0; right:0; top:-5px; height:5px;
}
.dropdown.mega-index .mega-index__main { padding:24px; display:flex; flex-direction:column; }
.dropdown.mega-index .mega-index__cats { padding:24px; border-left:1px solid var(--line); }
.dropdown.mega-index .mega-index__cta {
  background:#f6f5fd; border-left:1px solid var(--line);
  padding:24px; display:flex; flex-direction:column; align-items:stretch;
}
/* lead rows (Search, Categories, Services) — kept a touch smaller than the
   top-bar nav items so the parent "Index" stays the more prominent one */
.dropdown.mega-index .mega-row--lead {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  font-weight:700; font-size:.92rem; color:#150d15;
}
.dropdown.mega-index .mega-row--lead:hover { background:#f1edfa; color:#6865e7; }
.dropdown.mega-index .mega-ic { flex:none; color:var(--primary); display:flex; }
.dropdown.mega-index .mega-ic svg { width:20px; height:20px; }
.dropdown.mega-index .mega-row--lead:hover .mega-ic { color:#6865e7; }
/* inline search field (no icon) */
.dropdown.mega-index .mega-search {
  margin:4px 10px 10px;
  padding:9px 14px; background:#f6f5fd; border:1px solid var(--line); border-radius:9px;
}
.dropdown.mega-index .mega-search input {
  width:100%; min-width:0; border:0; background:transparent; outline:none;
  font:inherit; font-size:.88rem; color:#150d15;
}
.dropdown.mega-index .mega-search input::placeholder { color:#9a97ad; }
/* categories column */
.dropdown.mega-index .mega-sec__title {
  display:block; padding:2px 0 8px; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
}
.dropdown.mega-index .mega-cats { display:grid; grid-template-columns:1fr 1fr; gap:1px 14px; }
.dropdown.mega-index .mega-cats a {
  display:block; padding:6px 8px; font-size:.9rem; font-weight:600;
  color:#150d15; border-radius:6px;
}
.dropdown.mega-index .mega-cats a:hover { background:#f1edfa; color:#6865e7; }
/* CTA rail (no icon; full-width button, rail width unchanged) */
.dropdown.mega-index .mega-cta__title { font-size:1rem; font-weight:800; color:#150d15; margin:0 0 8px; }
.dropdown.mega-index .mega-cta__text { font-size:.85rem; line-height:1.5; color:var(--text); margin:0 0 16px; }
.dropdown.mega-index .mega-cta__btn {
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:11px 16px; border-radius:8px; font-weight:700; font-size:.9rem;
  background:var(--primary); color:#fff; transition:background-color .2s, color .2s;
}
.dropdown.mega-index .mega-cta__btn:hover { background:#150d15; color:#fff; }

/* ---- Recognition mega-menu — identical shell to the Index mega (full width,
   same padding / shadow / CTA rail); only the middle is two link columns ---- */
.main-nav .has-dropdown > a.mega-trigger { cursor:default; }   /* trigger is not a link */
.dropdown.mega-reco {
  left:24px; right:24px; top:calc(100% + 5px);
  display:grid; grid-template-columns:280px minmax(0,1fr) 236px;
  width:auto; padding:0; overflow:hidden;
  box-shadow:0 24px 60px rgba(30,20,80,.22), 0 6px 18px rgba(30,20,80,.10);
}
.dropdown.mega-reco::before { content:""; position:absolute; left:0; right:0; top:-5px; height:5px; }
/* col 1: all links */
.dropdown.mega-reco .mega-reco__links { padding:24px; display:flex; flex-direction:column; gap:2px; }
.dropdown.mega-reco .mega-row--lead {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  font-weight:700; font-size:.92rem; color:#150d15;
}
.dropdown.mega-reco .mega-row--lead:hover { background:#f1edfa; color:#6865e7; }
.dropdown.mega-reco .mega-ic { flex:none; color:var(--primary); display:flex; }
.dropdown.mega-reco .mega-ic svg { width:20px; height:20px; }
.dropdown.mega-reco .mega-row--lead:hover .mega-ic { color:#6865e7; }

/* col 2: visual "how recognition works" stepper (white, centred) */
.dropdown.mega-reco .mega-reco__flow {
  border-left:1px solid var(--line);
  padding:24px 30px; display:flex; flex-direction:column; justify-content:center;
}
.dropdown.mega-reco .mega-flow__inner { width:100%; max-width:560px; }
.mega-flow__eyebrow {
  display:block; margin:0 0 16px;
  font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--primary);
}

/* col 3: CTA rail — identical to the Index mega CTA rail */
.dropdown.mega-reco .mega-index__cta {
  background:#f6f5fd; border-left:1px solid var(--line);
  padding:24px; display:flex; flex-direction:column; align-items:stretch;
}
.dropdown.mega-reco .mega-cta__title { font-size:1rem; font-weight:800; color:#150d15; margin:0 0 8px; }
.dropdown.mega-reco .mega-cta__text { font-size:.85rem; line-height:1.5; color:var(--text); margin:0 0 16px; }
.dropdown.mega-reco .mega-cta__btn {
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:11px 16px; border-radius:8px; font-weight:700; font-size:.9rem;
  background:var(--primary); color:#fff; transition:background-color .2s, color .2s;
}
.dropdown.mega-reco .mega-cta__btn:hover { background:#150d15; color:#fff; }
.mega-steps { list-style:none; margin:0; padding:0; }
.mega-step { position:relative; display:flex; align-items:flex-start; gap:12px; padding:0 0 14px; }
.mega-step:last-child { padding-bottom:0; }
.mega-step:not(:last-child)::before {
  content:""; position:absolute; left:14px; top:30px; bottom:4px; width:2px;
  background:linear-gradient(var(--primary), #cfccf3);
}
.mega-step__n {
  flex:none; width:28px; height:28px; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--primary); color:var(--primary);
  font-weight:800; font-size:.9rem;
}
.mega-step__b { display:block; padding-top:4px; }
.mega-step__t { font-weight:800; color:#150d15; font-size:.92rem; line-height:1.3; }
.mega-step__c { font-size:.82rem; line-height:1.3; color:var(--text); }
.mega-step__c::before { content:" - "; color:var(--muted); }

/* "Get Accredited" — matches the old Sway theme button (fill-left-to-right on hover) */
.header-cta {
  flex:none; margin-left:12px;
  position:relative; overflow:hidden; z-index:1;
  font-size:16px; font-weight:400; letter-spacing:.16px; line-height:17px; text-transform:none;
  padding:10px 34px; border-radius:5px;
  background:var(--primary); color:#fff;
  border:1px solid var(--primary);
  box-shadow:0 15px 35px rgba(104,101,231,.15);
}
.header-cta::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink); border-radius:inherit;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s cubic-bezier(.38,.32,.36,.98);
}
.header-cta:hover {
  background:var(--primary); color:#fff;
  border-color:var(--ink); transform:none;
  box-shadow:0 15px 35px rgba(30,38,109,.15);
}
.header-cta:hover::before { transform:scaleX(1); }
/* the two top-bar buttons grouped so "Find a Pro" sits 12px left of "Get Listed" */
.header-actions { display:flex; align-items:center; gap:12px; flex:none; }
.header-actions .header-cta { margin-left:0; }
/* secondary header CTA — outline. White border + white text on the dark header
   grounds (--over / --dark); hover fills white with dark text. */
.header-ghost {
  flex:none;
  font-size:16px; font-weight:400; letter-spacing:.16px; line-height:17px; text-transform:none;
  padding:10px 26px; border-radius:5px;
  background:transparent; color:var(--ink); border:1px solid currentColor;
  transition:background-color .3s, color .3s, border-color .3s;
}
.site-header--over .header-ghost,
.site-header--dark .header-ghost { color:#fff; border-color:#fff; }
.site-header--over .header-ghost:hover,
.site-header--dark .header-ghost:hover { background:#fff; color:#150d15; border-color:#fff; }

/* ===== TEST VARIANT (2026-07-29): two prominent header dropdowns =====
   Business + Customers replace the Find a Pro / Get Listed buttons on the
   right of the header. Desktop hover-driven (same pattern as .has-dropdown);
   mobile untouched (.header-actions is display:none <=860px). Roll back via
   style.css.bak-navdrop-20260729 + header.blade.php.bak-navdrop-20260729. */
.hdrop { position:relative; flex:none; }
.hdrop__btn {
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:10px 18px; border-radius:6px;
  font:inherit; font-size:16px; font-weight:600; letter-spacing:.16px; line-height:17px;
  color:#fff; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.38);
  transition:background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.hdrop__ic { display:flex; }
.hdrop__ic svg { width:19px; height:19px; }
/* caret chevron — same border trick as the nav dropdowns */
.hdrop__car {
  width:7px; height:7px; margin-left:1px;
  border:solid currentColor; border-width:0 2px 2px 0;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s;
}
.hdrop:hover .hdrop__btn,
.hdrop__btn[aria-expanded="true"] {
  background:#fff; color:#150d15; border-color:#fff;
  box-shadow:0 12px 30px rgba(30,20,80,.18);
}
.hdrop:hover .hdrop__car { transform:translateY(1px) rotate(45deg); }

/* main-nav links with a small leading icon (simple 3-link nav, 2026-09-11) */
.main-nav .nav-il { display:inline-flex; align-items:center; gap:7px; }
.nav-il__i { display:flex; color:currentColor; opacity:.85; }
.nav-il__i svg { width:17px; height:17px; }

/* the panel */
.hdrop__menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:250px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 24px 60px rgba(30,20,80,.22), 0 6px 18px rgba(30,20,80,.10);
  padding:8px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
  transition-delay:.3s;                 /* linger ~0.3s after the mouse leaves */
}
.hdrop__menu--split { min-width:288px; }
.hdrop__menu::before {                  /* transparent hover bridge over the 8px gap */
  content:""; position:absolute; left:0; right:0; top:-8px; height:8px;
}
.hdrop:hover .hdrop__menu {
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}
.hdrop__menu a {
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:8px;
  font-size:.9rem; font-weight:600; color:#150d15;
}
.hdrop__menu a:hover { background:#f1edfa; color:#6865e7; }
.hdrop__i { flex:none; color:var(--primary); display:flex; }
.hdrop__i svg { width:18px; height:18px; }
.hdrop__menu a:hover .hdrop__i { color:#6865e7; }
/* group subheadings inside Business (Organizations / Professionals) */
.hdrop__grp {
  display:block; padding:9px 12px 4px; margin-top:2px;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted);
}
.hdrop__menu > .hdrop__grp:first-child { margin-top:0; padding-top:4px; }
.hdrop__sep { display:block; height:1px; margin:7px 10px; background:var(--line); }
/* Business/Customers mobile mirror lives inside .main-nav; hidden on desktop */
.mob-only { display:none; }
.nav-toggle {
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:8px; color:var(--ink);
}
.nav-toggle svg { width:100%; height:100%; fill:currentColor; }
.nav-close { display:none; }   /* base: hidden on desktop, shown inside the mobile menu (≤860px) */
.main-nav .main-nav__cta { display:none; }   /* base: hidden on desktop (header-cta is used); shown inside the mobile menu. Specific enough to beat `.main-nav a` */


/* ===================================================================
   HERO
   =================================================================== */
.hero { background:linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-soft) 30%, #faf9fe 100%); padding:70px 0 100px; position:relative; }
.hero .container { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.hero-title { margin-bottom:24px; }
.hero-text { font-size:1.15rem; max-width:460px; margin-bottom:36px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }


/* ===================================================================
   HERO — badge variant (text left, interactive rating badge right)
   =================================================================== */
/* ===== Home hero v2: search-first on the dark ground (2026-09-11) ===== */
.hero-search {
  position:relative; isolation:isolate; overflow:hidden;
  background:#150d15; color:#cbc6d4; text-align:center;
  padding:196px 0 170px;                /* top clears the over-header with air; bottom leaves room for the wave */
}
.hero-search::before {                  /* two soft brand glows, echoing the CTA bands */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(560px 340px at 18% 8%, rgba(104,101,231,.34), transparent 65%),
    radial-gradient(640px 380px at 84% 90%, rgba(143,91,224,.22), transparent 65%);
}
.hero-search__eyebrow {
  display:inline-block; font-size:.82rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#a7a3f0; margin-bottom:14px;
}
.hero-search__title {
  color:#fff; font-size:clamp(2rem, 4.6vw, 3.1rem); font-weight:900;
  line-height:1.12; letter-spacing:-.015em; margin:0; text-wrap:balance;
}
.hero-search__title em { font-style:normal; color:#8f8cff; }
.hero-search__lede {
  max-width:640px; margin:16px auto 0; font-size:1.06rem; line-height:1.6; color:#b7b1c2;
}
.hero-search__box { max-width:720px; margin:30px auto 0; text-align:left; }
.hero-search__box .wh-search__bar { border-radius:999px; padding:8px 8px 8px 20px; border-color:transparent; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.hero-search__box .wh-search:focus-within .wh-search__bar { box-shadow:0 18px 50px rgba(104,101,231,.35); }
.hero-search__box .wh-search__btn { border-radius:999px; }
.hero-search__chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.hero-search__chips a {
  display:inline-block; padding:6.5px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); color:#cbc6d4;
  font-size:.86rem; font-weight:700; transition:border-color .15s, color .15s, background .15s;
}
.hero-search__chips a:hover { border-color:#8f8cff; color:#fff; background:rgba(104,101,231,.16); }
.hero-search__stats { display:flex; justify-content:center; gap:clamp(26px, 6vw, 72px); flex-wrap:wrap; margin-top:40px; }
.hero-search__stats b { display:block; color:#fff; font-size:1.65rem; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.15; }
.hero-search__stats span { font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8d879c; }
@media (max-width:760px) {
  .hero-search { padding:170px 0 110px; }  /* больше воздуха от лого/хедера на мобиле */
  .hero-search__br { display:none; }
  /* all 4 counters on ONE row on phones - shrink, never wrap the row */
  .hero-search__stats { flex-wrap:nowrap; gap:8px; margin-top:30px; }
  .hero-search__stats > div { flex:1 1 0; min-width:0; text-align:center; }
  .hero-search__stats b { font-size:clamp(.95rem, 4.4vw, 1.25rem); }
  .hero-search__stats span { display:block; font-size:.56rem; letter-spacing:.03em; line-height:1.3; }
  .hero-search__chips a:nth-child(n+5) { display:none; }  /* keep 4 chips on phones */
}

/* ===== Home: "Where Reedleys is live" — photo city cards + categories ===== */
.home-cities { background:#f4f2fb; padding:64px 0 56px; }
.home-cities__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.home-cities__title { margin:0; text-align:left; max-width:none; }
.home-cities__all { font-weight:800; color:var(--primary-text); font-size:.95rem; white-space:nowrap; }
.home-cities__all:hover { text-decoration:underline; }
.city-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; }
.city-card {
  position:relative; grid-column:span 3; min-height:200px; border-radius:14px;
  overflow:hidden; display:flex; align-items:flex-end; color:#fff;
  transition:transform .16s, box-shadow .16s;
}
.city-card--big { grid-column:span 6; min-height:280px; }
/* 6 cards fill two rows exactly: big(6)+3+3, then 3 x span4 */
.city-card:nth-child(n+4) { grid-column:span 4; }
.city-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.city-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,13,21,0) 40%, rgba(21,13,21,.78) 100%);
}
.city-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(30,20,80,.28); }
.city-card__cap { position:relative; z-index:1; padding:16px 18px; display:flex; flex-direction:column; gap:2px; }
.city-card__cap b { font-size:1.12rem; font-weight:900; color:#fff; }
.city-card__cap span { font-size:.82rem; font-weight:700; color:#d8d3e2; }
.home-cities .register-cats-switch { margin-top:44px; }
@media (max-width:1024px) {
  .city-card, .city-card:nth-child(n+4) { grid-column:span 4; }
  .city-card--big { grid-column:span 8; }
}
@media (max-width:680px) {
  .city-card, .city-card:nth-child(n+4), .city-card--big { grid-column:span 6; min-height:150px; }
  .city-card--big { grid-column:span 12; min-height:190px; }
  /* odd count (big + 5): the last card would sit alone with a hole to its
     right - stretch it full-width instead */
  .city-card:last-child:nth-child(even) { grid-column:span 12; }
  .city-card__cap { padding:12px 14px; }
}

/* ===== Home: featured brand tiles (uniform logo size, 2026-09-11) ===== */
.home-brands { padding:64px 0 26px; }
.home-brands .section-head { margin-bottom:34px; }
.home-brands__grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; }
.home-brands__card {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 12px 16px; background:#fff; border:1px solid #e6e9f2; border-radius:14px;
  text-align:center; transition:border-color .15s, box-shadow .15s;
}
.home-brands__card:hover { border-color:rgba(104,101,231,.45); box-shadow:0 10px 26px rgba(104,101,231,.12); }
/* rectangular logo window: wide wordmarks (BofA, FedEx) stay readable,
   square marks centre inside the same box - uniform showcase */
.home-brands__card img { width:112px; height:44px; object-fit:contain; }
.home-brands__card b { font-size:.88rem; font-weight:800; color:#150d15; line-height:1.2; }
.home-brands__card span { font-size:.74rem; font-weight:700; color:#656d80; }
@media (max-width:1024px) { .home-brands__grid { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:640px) { .home-brands__grid { grid-template-columns:repeat(3, 1fr); gap:10px; } .home-brands__card { padding:16px 8px 12px; } .home-brands__card img { width:88px; height:34px; } }

.hero--badge {
  padding:160px 0 150px;                 /* top clears the header; bottom leaves room for the wave */
  position:relative; isolation:isolate;
  background:#7c74e8;                     /* fallback while the image loads */
}
.hero--badge::before {                    /* the multi-colour gradient background */
  content:""; position:absolute; inset:0; z-index:-2; overflow:hidden;
  background:url(../img/hero-gradient.jpg?v=2) center/cover no-repeat;
}
.hero--badge::after {                     /* gentle wash so white text stays readable */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(60,40,120,.30) 0%, rgba(60,40,120,.10) 45%, transparent 70%);
}
/* white wave carving the bottom of the hero, blending into the section below */
.hero__wave {
  position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  width:100%; height:120px; display:block; pointer-events:none;
}
.hero__wave svg { display:block; width:100%; height:100%; }
.hero--badge .container {
  grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero--badge .hero-copy { max-width:560px; }
.hero--badge .hero-title { margin-bottom:20px; font-size:clamp(2.1rem,3.6vw,3.2rem); color:#fff; }
.hero--badge .eyebrow { color:rgba(255,255,255,.9); }
.hero--badge .hero-text { max-width:520px; margin-bottom:30px; color:rgba(255,255,255,.92); }
.hero-note { font-size:.9rem; color:rgba(255,255,255,.8); margin:20px 0 0; }

/* ---- rotating first word of the hero title ---- */
.hero-title__br { display:block; }        /* force the rotator onto its own line */
.hero-rotate-sr {                          /* screen-reader / no-JS fallback word */
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.hero-rotate {
  display:inline-block; position:relative; white-space:nowrap; vertical-align:bottom;
  color:#fff; font-weight:900;            /* white + heavier than the rest of the H1 */
  text-shadow:0 2px 18px rgba(40,20,90,.25);
  min-height:1.1em;
}
.hero-rotate__word {
  display:inline-block;
  opacity:0; transform:translateY(14px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.2,1);
}
.hero-rotate__word.is-active { opacity:1; transform:translateY(0); position:relative; }
.hero-rotate__word.is-leaving { opacity:0; transform:translateY(-14px); position:absolute; left:0; top:0; }
@media (prefers-reduced-motion:reduce) {
  .hero-rotate__word { transition:none; }
}

/* ---- hero static seal (explains the ratings at a glance) ---- */
/* card stretches down past the wave (z-index above it) so the wave tucks behind it */
.hero-seal { display:flex; justify-content:flex-end; position:relative; z-index:3; margin-bottom:-120px; }
.hero-seal__card {
  position:relative; z-index:2; width:100%; max-width:460px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(30,15,60,.28), 0 10px 24px rgba(30,15,60,.14);
  padding:48px 44px 38px; text-align:center;
  border-top:6px solid #6865e7;
}
.hero-seal__ribbon {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:#150d15; color:#fff; font-size:.74rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:7px 18px; border-radius:999px;
  white-space:nowrap;
}
.hero-seal__emblem {
  width:84px; height:84px; margin:8px auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background:linear-gradient(135deg, #8a5cf0 0%, #ef6ea0 55%, #f7b955 100%);
  box-shadow:0 10px 24px rgba(106,101,231,.35), inset 0 0 0 3px rgba(255,255,255,.35);
}
.hero-seal__emblem svg { width:44px; height:44px; fill:currentColor; }
.hero-seal__brand { display:block; font-size:.92rem; font-weight:700; color:#6865e7; letter-spacing:.05em; text-transform:uppercase; }
.hero-seal__head { display:block; font-size:1.75rem; font-weight:800; color:#150d15; margin:6px 0 14px; letter-spacing:-.01em; }
.hero-seal__text { font-size:1rem; color:var(--text); line-height:1.6; margin:0 0 22px; }
.hero-seal__scale { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:22px; }
.hero-seal__pip {
  font-size:.82rem; font-weight:800; color:var(--tier); background:var(--tier-soft);
  border:1px solid var(--tier); border-radius:7px; padding:5px 11px; line-height:1;
}
.hero-seal__foot {
  display:block; font-size:.82rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
  border-top:1px solid var(--line); padding-top:16px;
}
/* extra stats that stretch the card down past the wave */
.hero-seal__stats {
  list-style:none; margin:22px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.hero-seal__stats li { display:flex; flex-direction:column; gap:3px; }
.hero-seal__stats strong { font-size:1.35rem; font-weight:800; color:#6865e7; line-height:1; }
.hero-seal__stats span { font-size:.72rem; color:var(--muted); line-height:1.25; }

/* ---- hero CTA buttons (match header "Get Accredited": fill-left-to-right hover) ---- */
.btn-cta {
  position:relative; overflow:hidden; z-index:1;
  font-size:16px; font-weight:400; letter-spacing:.16px; line-height:17px; text-transform:none;
  padding:14px 34px; border-radius:5px; transition:color .3s, border-color .3s, box-shadow .3s;
}
.btn-cta::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink); border-radius:inherit;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s cubic-bezier(.38,.32,.36,.98);
}
/* the wipe must cover the 2px border too, otherwise a rim of the old colour
   stays visible on hover (obvious on dark backgrounds) */
.btn-cta { background-clip:padding-box; }
.btn-cta::before { margin:-2px; }
.btn-cta:hover::before { transform:scaleX(1); }

.btn-cta--fill {
  background:var(--primary); color:#fff; border:1px solid var(--primary);
  box-shadow:0 15px 35px rgba(104,101,231,.15);
}
.btn-cta--fill:hover {
  color:#fff; border-color:var(--ink); box-shadow:0 15px 35px rgba(30,38,109,.15);
}
.btn-cta--ghost {
  background:transparent; color:var(--primary); border:1px solid var(--primary);
}
.btn-cta--ghost:hover {
  color:#fff; border-color:var(--ink); box-shadow:0 15px 35px rgba(30,38,109,.15);
}

/* ---- hero buttons on the gradient: white, hover fills fully to #150d15 ---- */
.hero--badge .btn-cta { transition:background-color .3s, color .3s, border-color .3s, box-shadow .3s; }
.hero--badge .btn-cta::before { display:none; }   /* use solid background fill instead of the wipe */
.hero--badge .btn-cta--fill {
  background:#fff; color:#150d15; border-color:#fff; font-weight:700;
  box-shadow:0 14px 34px rgba(30,20,80,.18);
}
.hero--badge .btn-cta--fill:hover { background:#150d15; color:#fff; border-color:#150d15; }
.hero--badge .btn-cta--ghost {
  background:transparent; color:#fff; border-color:rgba(255,255,255,.85);
}
.hero--badge .btn-cta--ghost:hover { background:#150d15; color:#fff; border-color:#150d15; }

/* ===================================================================
   PAGE HERO — short gradient banner for inner pages (no right-hand card).
   Same background image + wave as the home hero, header sits over it.
   =================================================================== */
.page-hero {
  position:relative; isolation:isolate;
  padding:150px 0 90px;                  /* top clears the transparent header */
  background:#7c74e8;                     /* fallback while the image loads */
}
.page-hero::before {                      /* multi-colour gradient background */
  content:""; position:absolute; inset:0; z-index:-2; overflow:hidden;
  background:url(../img/hero-gradient.jpg?v=2) center/cover no-repeat;
}
.page-hero::after {                       /* gentle wash so white text stays readable */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(60,40,120,.30) 0%, rgba(60,40,120,.10) 45%, transparent 70%);
}
.page-hero__inner { max-width:760px; }
.page-hero .eyebrow { color:rgba(255,255,255,.9); }

/* ---- Photo-montage hero (<x-site.hero :photos>) -------------------------
   Swaps the brand gradient for a grid of photos + a darkening scrim. Same
   markup and classes as the company profile hero (company.css owns the copy
   used there); this block makes it available to any page on the shell, e.g.
   /catalogue/{category}. Without :photos the hero keeps its gradient. */
.company-hero { color:#fff; }
/* The gradient lives on .page-hero::before at the same depth — hide it, or it
   sits on top of the montage and the photos never show. */
.company-hero::before { display:none; }
.company-hero__media { position:absolute; inset:0; z-index:-2; overflow:hidden; }
/* Two washes: a vertical one for overall contrast, plus a left-weighted one so
   the title column stays legible over bright photos. Category shots come from
   stock and are often much paler than a venue's own pictures, so this is a bit
   heavier than the company-profile scrim it mirrors. */
.company-hero__scrim { position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(21,13,21,.72) 0%, rgba(21,13,21,.45) 45%, rgba(21,13,21,.18) 75%),
    linear-gradient(180deg, rgba(21,13,21,.55) 0%, rgba(21,13,21,.30) 45%, rgba(21,13,21,.62) 100%); }
.company-hero__montage { position:absolute; inset:0; display:grid; gap:4px; }
.company-hero__montage .chm-cell { margin:0; overflow:hidden; }
.company-hero__montage .chm-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.company-hero__montage--1 { grid-template-columns:1fr; }
.company-hero__montage--2 { grid-template-columns:1fr 1fr; }
.company-hero__montage--5 { grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.company-hero__montage--5 .chm-cell--feature { grid-row:1 / span 2; }
/* Light shadow so white text survives a pale photo. */
.company-hero .page-hero__title { text-shadow:0 2px 10px rgba(21,13,21,.35),0 1px 2px rgba(21,13,21,.25); }
.company-hero .page-hero__text { text-shadow:0 1px 6px rgba(21,13,21,.3); }
.company-hero .breadcrumbs { text-shadow:0 1px 3px rgba(21,13,21,.35); }
/* Wave above the media so the white curve hides the photo edge. */
.company-hero .hero__wave { z-index:2; }
@media (max-width:760px){
  /* Phone: the 5-cell grid turns to mush — show the feature shot only. */
  .company-hero__montage--5 { grid-template-columns:1fr; grid-template-rows:1fr; }
  .company-hero__montage--5 .chm-cell { display:none; }
  .company-hero__montage--5 .chm-cell--feature { display:block; grid-row:auto; }
}
/* breadcrumbs on the gradient banner — reuse the .eyebrow type styling */
.breadcrumbs {
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:0;
}
.breadcrumbs li { display:inline-flex; align-items:center; }
.breadcrumbs a { color:rgba(255,255,255,.8); }
.breadcrumbs a:hover { color:#fff; }
.breadcrumbs li[aria-current] { color:#fff; }
/* round dot separator — drawn, so it centres perfectly regardless of the glyph metrics */
.breadcrumbs__sep { font-size:0; line-height:0; }
.breadcrumbs__sep::before {
  content:""; display:block; width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.6);
}
.page-hero__title { color:#fff; margin-bottom:16px; font-size:clamp(2.1rem,3.6vw,3.2rem); }
.page-hero__text { color:rgba(255,255,255,.92); font-size:1.12rem; max-width:640px; margin:0; }
/* white wave carving the bottom edge, blends into the white section below */
.page-hero .hero__wave { height:90px; }

/* ===================================================================
   CTA BAND — full-width brand call-to-action just before the footer
   =================================================================== */
.cta-band {
  position:relative; isolation:isolate; overflow:hidden;
  background:#150d15; padding:80px 0;
}
.cta-band::before {                       /* soft brand-purple glow */
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 120% at 15% 0%, rgba(104,101,231,.45) 0%, transparent 60%),
             radial-gradient(50% 130% at 95% 100%, rgba(104,101,231,.30) 0%, transparent 55%);
}
.cta-band__inner {
  max-width:760px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.cta-band .eyebrow { color:#a7a4f2; }
.cta-band__title { color:#fff; margin-bottom:14px; font-size:clamp(1.9rem,3.2vw,2.7rem); }
.cta-band__text { color:rgba(255,255,255,.82); font-size:1.12rem; max-width:560px; margin:0 0 30px; }
.cta-band .btn-cta--fill {                /* white pill, hover fills to purple */
  background:#fff; color:#150d15; border-color:#fff; font-weight:700;
  box-shadow:0 14px 34px rgba(30,20,80,.28);
  transition:background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.cta-band .btn-cta--fill::before { display:none; }   /* solid fill, not the wipe animation */
.cta-band .btn-cta--fill:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

/* --- CTA band glued flush to the FAQ below, separated only by a wave --- */
/* ONE continuous body paints the whole band AND the wavy overhang, so the dark
   base + purple glow flow uninterrupted right down to the tip of the wave — no
   flat band, no black tail where a separate strip used to take over. The single
   painted layer (::after) is clipped by a composite mask: solid everywhere
   except the bottom 120px, which is cut to the wave silhouette. */
.cta-band--to-faq {
  overflow:visible;                 /* let the painted body spill onto the FAQ */
  isolation:auto;
  position:relative; z-index:1;
  background:transparent;           /* the ::after body provides the fill instead */
  padding-bottom:70px;
}
.cta-band--to-faq::before { display:none; }   /* glow now lives in the ::after body */
.cta-band--to-faq::after {
  content:""; position:absolute; left:0; right:0; top:0; bottom:-118px; z-index:-1;
  pointer-events:none;
  /* identical paint to a normal band: two purple radial glows over the dark base,
     scaled across the FULL body height (band + wave) so it never fades to black */
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(104,101,231,.45) 0%, transparent 60%),
    radial-gradient(60% 95% at 95% 78%, rgba(104,101,231,.30) 0%, transparent 55%),
    #150d15;
  /* composite mask: full opacity above the wave, wave-shaped cut at the bottom */
  -webkit-mask:
    linear-gradient(#000,#000) top/100% calc(100% - 120px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,64 C240,120 480,120 720,88 C960,56 1200,8 1440,40 L1440,0 L0,0 Z'/%3E%3C/svg%3E") bottom/100% 120px no-repeat;
  mask:
    linear-gradient(#000,#000) top/100% calc(100% - 120px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,64 C240,120 480,120 720,88 C960,56 1200,8 1440,40 L1440,0 L0,0 Z'/%3E%3C/svg%3E") bottom/100% 120px no-repeat;
}
.cta-band__inner { position:relative; z-index:1; }
/* FAQ under the CTA: no top wave of its own, top padding clears the overhang */
.faq--under-cta { padding-top:130px; }
.faq--under-cta .faq__wave { display:none; }

/* ===================================================================
   RATING SCALE WIDGET (/ratings — "One Scale. Two Recognition Standards.")
   =================================================================== */

/* tier colour tokens (shared with pro-badges below) */
.rs-card, .rs-band {
  --tier:#6865e7; --tier-d:#524fd4; --tier-soft:#f1edfa; --tier-line:#cdccf5;
}
.tier-top    { --tier:#0f9d58; --tier-d:#0b7c45; --tier-soft:#e8f7ef; --tier-line:#bce3cf; }
.tier-strong { --tier:#2e7d32; --tier-d:#256428; --tier-soft:#eaf5ea; --tier-line:#c4e0c5; }
.tier-good   { --tier:#6865e7; --tier-d:#524fd4; --tier-soft:#f1edfa; --tier-line:#cdccf5; }
.tier-fair   { --tier:#d69200; --tier-d:#b17800; --tier-soft:#fdf5dc; --tier-line:#f0dda0; }
.tier-weak   { --tier:#e8721f; --tier-d:#c65e15; --tier-soft:#fdefe2; --tier-line:#f6cfaa; }
.tier-poor   { --tier:#d64545; --tier-d:#b53535; --tier-soft:#fce8e8; --tier-line:#f1c3c3; }

/* the block sits on its own soft-lavender canvas; panels inside are white */
.rs-block {
  background:#f6f5fd; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 32px 34px;
}

/* --- header row: title/intro + shared-scale switch --- */
.rs-head {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px;
  align-items:start; margin-bottom:26px;
}
.rs-eyebrow {
  display:block; font-size:.78rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--primary); margin-bottom:10px;
}
.rs-title { font-size:1.9rem; color:#150d15; margin:0 0 12px; letter-spacing:-.01em; }
.rs-intro { color:var(--text); font-size:1rem; line-height:1.6; margin:0; max-width:640px; }
.rs-head__aside { text-align:right; }
.rs-switch {
  display:inline-flex; align-items:center; gap:30px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:11px 24px; box-shadow:var(--shadow-sm);
}
.rs-switch__opt { font-weight:600; color:var(--ink); font-size:.98rem; white-space:nowrap; }
.rs-switch__link {
  position:relative; width:36px; height:36px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:#fff; color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.rs-switch__link svg { width:19px; height:19px; }
.rs-switch__link::before, .rs-switch__link::after {
  content:""; position:absolute; top:50%; width:20px; border-top:2px dashed #c9c6ea;
}
.rs-switch__link::before { right:100%; margin-right:6px; }
.rs-switch__link::after  { left:100%;  margin-left:6px; }
.rs-switch__note { margin:12px 0 0; color:var(--muted,#6b7280); font-size:.9rem; }

/* --- the two standards + disclaimer --- */
.rs-standards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-bottom:26px;
}
.rs-standard { display:flex; align-items:flex-start; gap:14px; }
.rs-standard__ic {
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#ecebfb; color:var(--primary);
}
.rs-standard__ic svg { width:22px; height:22px; }
.rs-standard p { margin:0; color:var(--text); font-size:.95rem; line-height:1.5; font-weight:600; }

/* --- main grid: selected-rating card + grouped scale --- */
.rs-main {
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:22px; align-items:start;
}

/* selected-rating card (recolours to the hovered grade's tier) */
.rs-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 24px 24px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:box-shadow .2s;
}
.rs-card__head { display:flex; align-items:center; justify-content:space-between; }
.rs-card__eyebrow { font-size:.85rem; font-weight:700; color:var(--tier); transition:color .2s; }
.rs-card__star {
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--tier); color:var(--tier); transition:.2s;
}
.rs-card__star svg { width:17px; height:17px; }
.rs-card__grade {
  font-size:3.4rem; font-weight:800; line-height:1.05; color:var(--tier);
  letter-spacing:-.02em; margin-top:6px; transition:color .2s;
}
.rs-card__label { font-size:1.15rem; font-weight:800; color:var(--ink); margin-top:2px; }
.rs-card__meta {
  margin:18px 0; padding:18px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:12px;
}
.rs-card__row { display:grid; grid-template-columns:20px 84px minmax(0,1fr); align-items:center; gap:10px; font-size:.95rem; }
.rs-card__ic { color:var(--primary); flex:none; display:flex; }
.rs-card__ic svg { width:19px; height:19px; }
.rs-card__k { color:var(--text); white-space:nowrap; }
.rs-card__v { color:var(--ink); font-weight:700; }
.rs-card__desc { font-size:.92rem; color:var(--text); line-height:1.6; margin:0 0 18px; }
.rs-card__foot {
  margin-top:auto; display:flex; align-items:center; gap:10px;
  background:#e7f7ee; color:#0b7c45; font-weight:600; font-size:.9rem;
  border-radius:10px; padding:12px 14px;
}
.rs-card__foot-ic { flex:none; display:flex; }
.rs-card__foot-ic svg { width:19px; height:19px; }

/* the scale panel — two aligned columns of grades (no band names). Left/right
   grades sit row-for-row; the 15th grade (D) is alone at the bottom. */
.rs-table {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px 20px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:16px; row-gap:7px; align-content:start;
}
.rs-row {
  display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:10px;
  width:100%; text-align:left; font:inherit; cursor:pointer;
  background:#fff; border:1px solid var(--tier-line); border-radius:8px;
  padding:5px 10px; transition:.15s;
}
.rs-row:hover { background:var(--tier-soft); border-color:var(--tier); }
.rs-row.is-active {
  background:var(--tier-soft); border-color:var(--tier);
  box-shadow:0 0 0 1px var(--tier) inset;
}
.rs-row__g {
  font-weight:800; color:var(--tier); font-size:.9rem; text-align:center;
  border:1px solid var(--tier); border-radius:6px; padding:2px 0; background:#fff;
}
.rs-row__l { color:var(--tier); font-weight:600; font-size:.87rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* disclaimer note */
.rs-note {
  display:flex; align-items:center; gap:13px; margin-top:22px;
  background:#efeef9; border:1px solid var(--line); border-radius:12px;
  padding:14px 18px;
}
.rs-note__ic { flex:none; color:var(--primary); display:flex; }
.rs-note__ic svg { width:20px; height:20px; }
.rs-note__text { margin:0; color:var(--text); font-size:.9rem; line-height:1.5; }

/* tier tokens still needed by the pro-badges block below */
.pro-badge, .pro-scale-pip {
  --tier:#6865e7; --tier-d:#524fd4; --tier-soft:#f1edfa;
}

@media (max-width:900px) {
  .rs-head { grid-template-columns:1fr; }
  .rs-head__aside { text-align:center; }
  .rs-standards { grid-template-columns:1fr; gap:16px; }
  .rs-main { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  /* collapse the two aligned columns into one; grid inline positions are
     ignored under display:block, so grades flow in source order (AAA -> D). */
  .rs-table { display:block; }
  .rs-row { margin-bottom:6px; }
  .rs-row:last-child { margin-bottom:0; }
}
@media (max-width:560px) {
  .rs-block { padding:22px 18px 24px; }
  .rs-title { font-size:1.55rem; }
  .rs-switch { gap:22px; padding:10px 18px; }
  .rs-table { padding:10px 16px; }
  .rs-row__l { white-space:normal; }
}

/* ===================================================================
   RECOGNITION LEVELS & BADGES (section 3)
   =================================================================== */
.levels { background:var(--bg-soft); position:relative; overflow:hidden; }
.levels .container { position:relative; z-index:1; }
/* plain white variant (inner pages) — white bg, brand-purple dots, cards need a
   clearly visible shadow so they don't dissolve into the white background */
.levels--plain { background:#fff; }
.levels--plain .kd-shapes.shape_dots { background-color:#6865e7; }
.levels--plain .levels-block { box-shadow:0 20px 50px rgba(30,20,80,.12); }
.levels--plain .pro-badge { box-shadow:0 16px 40px rgba(30,20,80,.10); }
.levels--plain .pro-badge:hover { box-shadow:0 22px 55px rgba(30,20,80,.16); }
.levels-block {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:34px 34px 38px; margin-top:28px;
}
.levels-block:first-of-type { margin-top:0; }
.levels-block__title {
  display:flex; align-items:center; gap:12px; font-size:1.35rem; color:var(--ink);
  margin:0 0 8px; letter-spacing:-.01em;
}
.levels-block__ic {
  width:38px; height:38px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); color:var(--primary);
}
.levels-block__ic svg { width:22px; height:22px; fill:currentColor; }
.levels-block__lead { color:var(--text); font-size:1rem; margin:0 0 24px; max-width:720px; }
.levels-block__lead--full { max-width:none; }

/* three professional badges */
.pro-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pro-badge {
  --tier:#6865e7; --tier-soft:#f1edfa;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  border-top:5px solid var(--tier); padding:26px 24px 28px; text-align:center;
  box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s;
}
.pro-badge:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.pro-badge__emblem {
  width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--tier-soft); color:var(--tier);
}
.pro-badge__emblem svg { width:32px; height:32px; fill:currentColor; }
.pro-badge__emblem--grade { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.pro-badge__name { font-size:1.15rem; color:var(--ink); margin:0 0 8px; }
.pro-badge__desc { font-size:.9rem; color:var(--text); line-height:1.55; margin:0; }
.pro-badge__scale { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px; }
.pro-scale-pip {
  font-size:.74rem; font-weight:800; color:var(--tier); background:var(--tier-soft);
  border:1px solid var(--tier); border-radius:6px; padding:4px 9px; line-height:1;
}
@media (max-width:860px) {
  .pro-badges { grid-template-columns:1fr; }
  .levels-block { padding:26px 22px 30px; }
}

/* ===================================================================
   SEARCH THE REGISTER
   =================================================================== */
.register {
  background:#fff;
  position:relative; overflow:hidden;
}
/* register box breaks out of the container to almost-full width (60px gutters);
   its inner content is re-centred to the hero's container width so the form etc.
   lines up exactly with the hero content. */
.register .container {
  position:relative; z-index:1;
  max-width:none; padding:0 60px;
}
.hero--badge .container { position:relative; z-index:1; }

/* ---- the whole register on a tinted, rounded, dotted panel (swaytheme) ---- */
.register-box {
  position:relative;
  border-radius:32px;
  padding:56px 0;
  background:#f5f6fe;
  border:1px solid #e4e5f4;
}
/* Clip the decorative corner dots to the box WITHOUT clipping the search
   autocomplete panel (which must overflow the box). A dedicated clipped layer
   holds the dots; the box itself no longer uses overflow:hidden. */
.register-box__dotwrap {
  position:absolute; inset:0; overflow:hidden; border-radius:32px;
  pointer-events:none; z-index:1;
}
/* re-centre inner content to the site container width (aligns with hero) */
.register-box__inner {
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px;
}
.register-box .section-head { margin-bottom:30px; }
.register-box .section-head .eyebrow { color:var(--primary-text); }
.register-box .section-head h2 { color:#150d15; }
.register-box .section-head p { color:#4a3d5e; }
/* dotted decorations in the corners */
.register-box__dots {
  position:absolute; z-index:1; pointer-events:none;
  background-color:#6865e7; opacity:.22;
}
.register-box__dots--tr { top:-10px; right:-10px; width:172px; height:172px; }
.register-box__dots--bl { bottom:-14px; left:-14px; width:150px; height:150px; opacity:.18; background-color:#150d15; }

.register-panel {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:26px; text-align:left;
}

/* ---- inline "Advanced Filters" button inside the search bar ---- */
.register-search__filterbtn {
  flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:11px 16px; border-radius:10px; cursor:pointer;
  font:inherit; font-weight:700; font-size:.92rem;
  color:#6865e7; background:#f1edfa;
  border:1px solid transparent; transition:.2s;
}
.register-search__filterbtn svg { width:16px; height:16px; fill:currentColor; }
.register-search__filterbtn:hover { background:#e6e0f7; border-color:#d3c9f0; }
.register-search__filterbtn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(106,101,231,.35); }

/* Search button inside the register block — purple, hover fills to #150d15 */
.register-box .btn-cta--fill { background:#6865e7; border-color:#6865e7; box-shadow:0 12px 30px rgba(106,101,231,.25); }
.register-box .btn-cta--fill::before { background:#150d15; }
.register-box .btn-cta--fill:hover { color:#fff; border-color:#150d15; }

/* ---- advanced-filters modal ---- */
/* Show-results button in the modal — purple, hover fills to #150d15 */
.filter-modal .btn-cta--fill { background:#6865e7; border-color:#6865e7; box-shadow:0 12px 30px rgba(106,101,231,.25); }
.filter-modal .btn-cta--fill::before { background:#150d15; }
.filter-modal .btn-cta--fill:hover { color:#fff; border-color:#150d15; }
.filter-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; }
.filter-modal[hidden] { display:none; }
.filter-modal__overlay { position:absolute; inset:0; background:rgba(20,24,60,.55); backdrop-filter:blur(3px); }
.filter-modal__dialog {
  position:relative; width:100%; max-width:640px; max-height:90vh; display:flex; flex-direction:column;
  background:#fff; border-radius:var(--radius-lg); box-shadow:0 30px 80px rgba(20,24,60,.35);
  overflow:hidden; animation:filterPop .22s ease;
}
@keyframes filterPop { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }

.filter-modal__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 26px; border-bottom:1px solid var(--line);
}
.filter-modal__head h3 { margin:0 0 4px; font-size:1.3rem; }
.filter-modal__head p { margin:0; font-size:.9rem; color:var(--muted); }
.filter-modal__close {
  flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.18s;
}
.filter-modal__close svg { width:18px; height:18px; fill:var(--muted); }
.filter-modal__close:hover { border-color:#6865e7; }
.filter-modal__close:hover svg { fill:#6865e7; }

.filter-modal__body { padding:22px 26px; overflow-y:auto; display:flex; flex-direction:column; gap:22px; }
.filter-group { display:flex; flex-direction:column; gap:10px; }
.filter-group__label, .filter-field__label {
  font-size:.76rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
}
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.filter-field { display:flex; flex-direction:column; gap:7px; }
.filter-field__select { position:relative; display:block; }
.filter-field__select svg {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; fill:var(--muted); pointer-events:none;
}
.filter-field__select select {
  width:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font:inherit; font-size:.98rem; color:var(--ink); cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:11px;
  padding:12px 38px 12px 14px; transition:border-color .2s, box-shadow .2s;
}
.filter-field__select select:hover { border-color:#6865e7; }
.filter-field__select select:focus { outline:none; border-color:#6865e7; box-shadow:0 0 0 4px rgba(106,101,231,.12); }
.filter-field__select select:disabled { color:var(--muted); background:#f1edfa; cursor:not-allowed; }

/* segmented radio rows */
.filter-seg { display:inline-flex; flex-wrap:wrap; gap:5px; padding:5px; background:#f1edfa; border:1px solid var(--line); border-radius:11px; }
.filter-seg--three { display:grid; grid-template-columns:repeat(3,1fr); }
.filter-seg__opt { cursor:pointer; }
.filter-seg__opt input { position:absolute; opacity:0; pointer-events:none; }
.filter-seg__opt span {
  display:block; text-align:center; padding:9px 16px; border-radius:8px;
  font-size:.9rem; font-weight:600; color:var(--text); transition:.18s;
}
.filter-seg__opt:hover span { color:#6865e7; }
.filter-seg__opt input:checked + span { background:#fff; color:#6865e7; box-shadow:var(--shadow-sm); }

/* checkbox rows */
.filter-checks { display:flex; flex-wrap:wrap; gap:10px; }
.filter-check { cursor:pointer; }
.filter-check input { position:absolute; opacity:0; pointer-events:none; }
.filter-check span {
  display:inline-block; padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); background:#f1edfa; color:var(--text);
  font-size:.88rem; font-weight:500; transition:.18s;
}
.filter-check:hover span { border-color:#6865e7; color:#6865e7; }
.filter-check input:checked + span { background:#6865e7; border-color:#6865e7; color:#fff; }
.filter-check input:focus-visible + span { box-shadow:0 0 0 3px rgba(106,101,231,.35); }

.filter-modal__foot {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 26px; border-top:1px solid var(--line); background:#f1edfa;
}
.filter-modal__reset {
  background:none; border:0; cursor:pointer; font:inherit; font-size:.92rem; font-weight:600;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.filter-modal__reset:hover { color:#6865e7; }
.filter-modal__result { display:flex; align-items:center; gap:16px; }
.filter-modal__count { font-size:.95rem; color:var(--text); }
.filter-modal__count strong { font-size:1.15rem; color:var(--ink); }
body.filter-open { overflow:hidden; }

/* segmented type toggle sits at the top of the panel */
.register-toggle {
  display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 20px; padding:5px;
  background:#f1edfa; border:1px solid var(--line); border-radius:12px;
}
.register-toggle__btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:700; color:var(--text);
  background:none; border:0; border-radius:9px; padding:11px 12px; transition:.2s;
  white-space:nowrap; min-width:0;
}
.register-toggle__btn svg { width:16px; height:16px; fill:currentColor; flex:none; }
.register-toggle__btn:hover { color:#6865e7; }
.register-toggle__btn.is-active {
  background:#fff; color:#6865e7; box-shadow:var(--shadow-sm);
}

.register-search { margin:0; }
.register-search__bar {
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line); border-radius:12px; padding:6px 6px 6px 16px;
  transition:border-color .2s, box-shadow .2s;
}
.register-search__bar:focus-within {
  border-color:#6865e7; box-shadow:0 0 0 4px rgba(106,101,231,.14);
}
.register-search__bar > svg { width:20px; height:20px; fill:var(--muted); flex:none; }
.register-search__bar input {
  flex:1; min-width:0; border:0; background:none; font:inherit; font-size:1.02rem;
  color:var(--ink); outline:none; padding:12px 0;
}
.register-search__bar input::placeholder { color:var(--muted); }
.register-search__bar .btn { flex:none; padding:13px 26px; }

.register-search__filters {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px;
}
.register-search__label {
  font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.08em; margin:0;
}
/* Search-by dropdown (replaces the old chip row — one tidy select) */
.register-select { position:relative; display:inline-block; }
.register-select__input {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer;
  padding:10px 40px 10px 16px; border:1.5px solid var(--line); border-radius:12px;
  background:#f1edfa; transition:border-color .18s, box-shadow .18s;
  min-width:190px;
}
.register-select__input:hover { border-color:#6865e7; }
.register-select__input:focus-visible {
  outline:none; border-color:#6865e7; box-shadow:0 0 0 4px rgba(106,101,231,.16);
}
.register-select__chevron {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; fill:#6865e7; pointer-events:none;
}

/* ---- popular categories: compact chip cards ---- */
.register-cats { margin-top:34px; text-align:center; }
.register-cats__title {
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.register-cats__grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  margin:0 auto;
}
.cat-card {
  display:flex; align-items:center; gap:12px; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; color:var(--ink); transition:.18s;
}
.cat-card:hover {
  color:#6865e7; border-color:#6865e7;
  box-shadow:var(--shadow-sm); transform:translateY(-2px);
}
.cat-card__icon {
  width:40px; height:40px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#f1edfa; color:#6865e7; transition:.18s;
}
.cat-card:hover .cat-card__icon { background:#6865e7; color:#fff; }
.cat-card__icon svg { width:22px; height:22px; fill:currentColor; }
.cat-card__name { font-size:.92rem; font-weight:600; line-height:1.25; }

.register-cats__all {
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-weight:600; font-size:.98rem; color:var(--primary-text);
}
.register-cats__all span { transition:transform .2s; }
.register-cats__all:hover { color:#150d15; }
.register-cats__all:hover span { transform:translateX(4px); }

/* ===================================================================
   WHO WE ARE — cards (left) + lead copy & CTA (right), swaytheme layout
   =================================================================== */
.about-grid {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px; align-items:center;
}
.about-cards { display:flex; flex-direction:column; gap:18px; }
.about-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 14px 34px rgba(30,15,60,.08);
  padding:24px 26px;
}
.about-card h3 { font-size:1.15rem; color:#150d15; margin-bottom:8px; }
.about-card p  { font-size:.95rem; color:var(--text); line-height:1.55; margin:0; }

.about-copy .eyebrow { color:var(--primary-text); }
.about-copy h2 { color:#150d15; margin-bottom:16px; font-size:clamp(1.8rem,3vw,2.4rem); }
.about-copy p  { color:#41506b; font-size:1.08rem; line-height:1.65; margin:0 0 28px; }
/* "About WH" — purple, hover fills to #150d15 */
.about-copy .btn-cta--fill { background:#6865e7; border-color:#6865e7; box-shadow:0 12px 30px rgba(106,101,231,.25); }
.about-copy .btn-cta--fill::before { background:#150d15; }
.about-copy .btn-cta--fill:hover { color:#fff; border-color:#150d15; }

/* ===================================================================
   DECORATIVE DOT SHAPES (from the Sway / keydesign theme)
   The dots.svg is used as a mask; the dot colour = element background.
   =================================================================== */
.kd-shapes {
  position:absolute; z-index:0; pointer-events:none;
}
.kd-shapes.shape_dots {
  -webkit-mask-image:url(../img/dots.svg);
          mask-image:url(../img/dots.svg);
  -webkit-mask-size:18px; mask-size:18px;
  -webkit-mask-repeat:repeat; mask-repeat:repeat;
}

/* ===================================================================
   HOW RECOGNITION WORKS (4-step process) — light pastel bg, white cards,
   wave-clipped bottom edge (swaytheme landing style)
   =================================================================== */
.how {
  position:relative; isolation:isolate; overflow:hidden;
  background:#f4f2fb;
  padding-bottom:150px;                 /* room for the wave cut-out */
}
.how__bg {
  position:absolute; inset:0; z-index:-2;
  background:url(../img/how-bg-sway.jpg?v=2) center/cover no-repeat;
}
.how__overlay {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.35) 100%);
}
/* soft dotted texture over the pastel bg */
.how__overlay::after {
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(90,110,180,.12) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent 90%);
          mask-image:linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent 90%);
}
/* wave cut-out at the bottom — white wave carved into the pastel bg,
   blending into the white section that follows */
.how__wave {
  position:absolute; left:0; right:0; bottom:-1px; z-index:0;
  width:100%; height:120px; display:block; pointer-events:none;
}
.how__wave svg { display:block; width:100%; height:100%; }
.how__inner { position:relative; }
/* moved to /ratings/: no bottom wave, so trim the wave allowance and sit flush */
.how--noflow { padding-bottom:96px; }

/* ============ POST A REQUEST (home) ============ */
.postreq-section {
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,#eef0ff 0%,#f4eefb 48%,#fdeef4 100%);
  padding-bottom:150px;
}
.postreq-section__inner { position:relative; z-index:1; }
.postreq-section__wave {
  position:absolute; left:0; right:0; bottom:-1px; z-index:0;
  width:100%; height:120px; pointer-events:none;
}
.postreq-section__wave svg { display:block; width:100%; height:100%; }

.postreq { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px; }
.postreq-hbr { display:none; }
.postreq-card {
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid #ecebf5; border-radius:22px;
  padding:30px 32px; box-shadow:0 22px 50px rgba(35,31,80,.08);
}
.postreq-tag {
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:#efeefc; color:var(--primary-text);
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px; margin-bottom:22px;
}
.postreq-tag svg { width:15px; height:15px; }
.postreq-card__grid { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }
.postreq-card__title { font-size:1.6rem; font-weight:800; color:#150d15; margin:0 0 12px; line-height:1.15; }
.postreq-card__text { font-size:1rem; color:var(--text); line-height:1.6; margin:0 0 4px; }
.postreq-card__art { margin:0; align-self:center; }
.postreq-card__art img { display:block; width:190px; height:auto; }

/* app card: phone is a large, overlapping image on the right */
.postreq-card--app { position:relative; overflow:hidden; }
/* app text sits in the same vertical band as the left card's text
   (left card centres its text against the ~190px art; match that height here) */
.postreq-card--app .postreq-card__body { max-width:54%; min-height:190px; display:flex; flex-direction:column; justify-content:center; }
.postreq-card--app .postreq-card__foot { margin-top:auto; }
/* large phone anchored to the card bottom-right, bleeding only off the right edge.
   Kept shorter than the card so overflow:hidden never clips its top/bottom, and
   the store buttons are held to the left band so the phone never covers them. */
.postreq-card__art--phone { position:absolute; margin:0; right:-28px; bottom:12px; width:auto; z-index:1; pointer-events:none; }
.postreq-card__art--phone img { display:block; height:340px; width:auto; filter:drop-shadow(0 24px 46px rgba(40,30,90,.20)); }
.postreq-card--app .postreq-card__foot--stores { max-width:54%; flex-direction:column; align-items:stretch; }

.postreq-chips { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.postreq-chips li {
  display:inline-flex; align-items:center; gap:6px;
  background:#faf9ff; border:1px solid #ebeaf6; border-radius:999px;
  padding:7px 11px; font-size:.82rem; font-weight:600; color:#3b3663; white-space:nowrap;
}
.postreq-chip__ic { display:inline-flex; color:#6865e7; }
.postreq-chip__ic svg { width:16px; height:16px; }

.postreq-card__foot {
  display:flex; align-items:center; gap:22px;
  margin-top:24px; padding-top:22px; border-top:1px solid #eeedf5;
}
.postreq-textlink {
  font-weight:800; color:#6865e7; text-decoration:none; font-size:.98rem;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.postreq-textlink:hover { color:#4f4ccf; }

.postreq-card__foot--stores { gap:14px; }
.btn-store {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  background:#efeefc; color:#4b46c9; border:1px solid #e2e0f6; border-radius:12px;
  padding:13px 16px; font-weight:800; font-size:.95rem; line-height:1; text-decoration:none;
  transition:background .18s ease, border-color .18s ease;
}
.btn-store svg { flex:none; width:32px; height:32px; }
.btn-store__t { position:relative; top:1px; }
.btn-store:hover { background:#e7e5fb; border-color:#cfccf0; }

.postreq-trust {
  list-style:none; margin:40px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 30px;
}
.postreq-trust li { display:inline-flex; align-items:center; gap:9px; font-size:.95rem; font-weight:700; color:#4a4570; }
.postreq-trust__ic { display:inline-flex; color:#6865e7; }
.postreq-trust__ic svg { width:18px; height:18px; }
.postreq-trust li + li { position:relative; }
.postreq-trust li + li::before {
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:#d9d6ea;
}

@media (max-width:900px) {
  .postreq { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .postreq-hbr { display:inline; }
  .postreq-card { padding:24px 22px; }
  .postreq-card--app { overflow:visible; }
  .postreq-card__grid { grid-template-columns:1fr; }
  .postreq-card__art { display:none; }
  .postreq-card--app .postreq-card__body { max-width:100%; min-height:0; }
  .postreq-card__art--phone { position:static; width:auto; margin:8px auto 0; top:auto; right:auto; bottom:auto; text-align:center; }
  .postreq-card__art--phone img { height:auto; width:400px; max-width:100%; margin:0 auto; }
  .postreq-chips { flex-direction:column; align-items:flex-start; }
  .postreq-card--app .postreq-card__foot { margin-top:22px; }
  .postreq-card__foot { flex-direction:column; align-items:stretch; gap:14px; }
  .postreq-card__foot .btn-cta { justify-content:center; text-align:center; }
  .postreq-textlink { justify-content:center; }
  /* the desktop 54% band (kept clear of the phone art) breaks the stacked
     layout - full width once the phone sits above the buttons */
  .postreq-card--app .postreq-card__foot--stores { max-width:100%; flex-direction:column; }
  .postreq-card__foot--stores .btn-store { width:100%; flex:none; }
  .postreq-trust { flex-direction:column; gap:14px; }
  .postreq-trust li + li::before { display:none; }
}

/* headings on the light bg */
.section-head--light h2 { color:#150d15; }
.section-head--light p  { color:#4b5468; }
.eyebrow--light { color:#6865e7; }

/* ---- the flow ---- */
.how-flow {
  list-style:none; margin:0 auto; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  max-width:1120px; position:relative;
}
.how-card {
  position:relative; padding:30px 24px 26px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(30,15,60,.10);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  outline:none;
  text-align:center;
}
.how-card:hover, .how-card:focus-visible {
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(30,15,60,.18);
}
/* connector rail with dot on the timeline */
.how-card__rail {
  position:absolute; top:44px; right:-22px; width:22px; height:2px;
  background:linear-gradient(90deg, rgba(106,101,231,.5), rgba(106,101,231,.06));
  z-index:1;
}
.how-card:last-child .how-card__rail { display:none; }

.how-card__top {
  display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:18px;
}
.how-card__dot {
  width:14px; height:14px; border-radius:50%;
  background:#6865e7;
  box-shadow:0 0 0 5px rgba(106,101,231,.16);
  flex:0 0 auto;
}
.how-card__dot--final {
  background:#150d15;
  box-shadow:0 0 0 5px rgba(21,13,21,.14);
}
.how-card__step {
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
/* icon = illustrated PNG, no background plate */
.how-card__icon {
  width:96px; height:96px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s;
}
.how-card:hover .how-card__icon, .how-card:focus-visible .how-card__icon {
  transform:scale(1.08) rotate(-4deg);
}
.how-card__icon img { width:100%; height:100%; object-fit:contain; display:block; }
.how-card h3 { font-size:1.14rem; color:#150d15; margin-bottom:10px; }
.how-card p  { font-size:.92rem; color:var(--text); margin:0 0 16px; }
.how-card__meta {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; font-weight:700; letter-spacing:.02em;
  color:#6865e7; padding:5px 12px; border-radius:999px;
  background:#f1edfa; border:1px solid #e0d8f5;
}
.how-card__meta::before {
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.how-card__meta--final { color:#150d15; background:#ecebef; border-color:#dcd9e4; }

.how__cta {
  margin-top:48px; display:flex; align-items:center; justify-content:center;
  gap:26px; flex-wrap:wrap; position:relative; z-index:1;
}
/* "Start your application" button — purple, hover fills to #150d15 */
.how__cta .btn-cta--fill { background:#6865e7; border-color:#6865e7; box-shadow:0 12px 30px rgba(106,101,231,.25); }
.how__cta .btn-cta--fill::before { background:#150d15; }
.how__cta .btn-cta--fill:hover { color:#fff; border-color:#150d15; }
.how__link {
  color:var(--text-dark); font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:.2s;
}
.how__link:hover { color:#6865e7; border-color:#6865e7; }

@media (prefers-reduced-motion:reduce) {
  .how-card, .how-card__icon { transition:none; }
}

/* ===================================================================
   /steps/ (How It Works) page blocks
   =================================================================== */
/* 4 process cards on a plain white section (no dark .how background) */
.steps-cards { background:#fff; }

/* --- "What You'll Need" (Prepare) : intro + Organizations + Professionals --- */
.steps-cards { padding-bottom:45px; }
.prep { background:#fff; padding-top:45px; padding-bottom:45px; }
.prep-panel {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px 28px; align-items:start;
  background:#f6f5fd; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:44px 40px;
}
.prep-intro { grid-column:1 / -1; max-width:820px; margin-bottom:6px; }
.prep-panel > .kd-shapes { z-index:0; }
.prep-panel > *:not(.kd-shapes) { position:relative; z-index:1; }
.prep-intro .eyebrow { display:block; margin-bottom:12px; }
.prep-intro h2 { font-size:1.9rem; color:#150d15; margin:0 0 14px; letter-spacing:-.01em; }
.prep-intro p { color:var(--text); font-size:.98rem; line-height:1.65; margin:0; }
.prep-card {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:24px 24px 26px; box-shadow:0 12px 34px rgba(30,20,80,.06);
}
.prep-card__head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.prep-ic {
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#ecebfb; color:var(--primary);
}
.prep-ic svg { width:24px; height:24px; }
.prep-card__head h3 { font-size:1.2rem; color:#150d15; margin:0; }
.prep-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.prep-list li {
  position:relative; padding-left:30px; color:var(--text); font-size:.9rem; line-height:1.5;
}
.prep-list li::before {
  content:""; position:absolute; left:0; top:1px; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236865e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.4 2.4 4.6-4.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- "What Happens After Recognition" : intro + 4 line-icon items (white, like the step cards) --- */
.after { background:#fff; padding-top:45px; }
.after-panel {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:44px; align-items:center;
}
.after-intro .eyebrow { display:block; margin-bottom:12px; }
.after-intro h2 { font-size:1.9rem; color:#150d15; margin:0 0 14px; letter-spacing:-.01em; }
.after-intro p { color:var(--text); font-size:.96rem; line-height:1.65; margin:0; }
.after-items { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.after-item {
  text-align:center; padding:6px 14px;
  display:flex; flex-direction:column; align-items:center;
}
.after-item + .after-item { border-left:1px solid var(--line); }
.after-ic {
  width:86px; height:86px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
}
.after-ic img { width:86px; height:86px; object-fit:contain; display:block; }
.after-item__label { font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; }

/* --- "Ready to Apply for Recognition" band (555) : flat #f6f5fd, dark text --- */
.apply-band { background:#fff; padding-top:45px; }
.apply-band__inner {
  display:flex; align-items:center; gap:36px;
  background:#f6f5fd; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 44px;
}
.apply-band__ic { width:182px; height:182px; flex:none; }
.apply-band__ic img { width:100%; height:100%; object-fit:contain; display:block; }
.apply-band__copy { flex:1 1 auto; }
.apply-band__copy h2 { font-size:1.7rem; color:#150d15; margin:0 0 8px; letter-spacing:-.01em; }
.apply-band__copy p { color:var(--text); font-size:1rem; line-height:1.6; margin:0; max-width:540px; }
.apply-band__actions { display:flex; flex-direction:column; gap:14px; flex:none; width:250px; }
.apply-band__actions .btn { justify-content:center; }
.apply-band__btn2 {
  background:#fff; color:var(--ink); border:1px solid var(--line);
  font-weight:700; box-shadow:0 8px 22px rgba(30,20,80,.06);
}
.apply-band__btn2:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }

/* ===================================================================
   PROFESSIONAL PROFILES — copy (left) + image (right)
   =================================================================== */
.pro-grid {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px; align-items:center;
}
/* "Now Available" tag — solid dark fill */
.pro-badge-tag {
  display:inline-block; margin-bottom:18px;
  font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; padding:8px 18px; border-radius:999px;
  background:#150d15;
  box-shadow:0 10px 24px rgba(21,13,21,.25);
}
.pro-copy h2 { color:#150d15; margin-bottom:16px; font-size:clamp(1.9rem,3.2vw,2.6rem); }
.pro-copy > p { color:#41506b; font-size:1.05rem; line-height:1.7; margin:0 0 28px; }
.pro-list {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
.pro-list li {
  display:flex; align-items:center; gap:12px;
  font-size:.98rem; font-weight:600; color:var(--text-dark);
}
.pro-list__ic {
  flex:none; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#f1edfa; color:#6865e7;
}
.pro-list__ic svg { width:15px; height:15px; fill:currentColor; }
/* CTA — button + link, same treatment as the "How" block, aligned left */
.pro-cta {
  margin-top:32px; display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.pro-cta .btn-cta--fill { background:#6865e7; border-color:#6865e7; box-shadow:0 12px 30px rgba(106,101,231,.25); }
.pro-cta .btn-cta--fill::before { background:#150d15; }
.pro-cta .btn-cta--fill:hover { color:#fff; border-color:#150d15; }
.pro-link {
  color:var(--text-dark); font-weight:700; font-size:.95rem;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:.2s;
}
.pro-link:hover { color:#6865e7; border-color:#6865e7; }
.pro-media img { width:100%; height:auto; display:block; }

/* ===================================================================
   FAQ — same pastel bg as "How", but the wave is carved into the TOP
   (mirrors the bottom wave of the How block so they'd meet pixel-perfect)
   =================================================================== */
.faq {
  position:relative; isolation:isolate; overflow:hidden;
  background:#f4f2fb;
  padding-top:150px; padding-bottom:64px;   /* top wave clearance; sits flush on the footer below */
}
.faq__bg {
  position:absolute; inset:0; z-index:-2;
  background:url(../img/how-bg-sway.jpg?v=2) center/cover no-repeat;
}
.faq__overlay {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.35) 100%);
}
.faq__overlay::after {
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(90,110,180,.12) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent 90%);
          mask-image:linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent 90%);
}
/* white wave carved into the top edge */
.faq__wave {
  position:absolute; left:0; right:0; top:-1px; z-index:0;
  width:100%; height:120px; display:block; pointer-events:none;
}
.faq__wave svg { display:block; width:100%; height:100%; }
.faq__inner { position:relative; }

.faq-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 40px;
  align-items:start;                      /* accordions don't stretch each other */
  max-width:1000px; margin:0 auto;
}
/* accordion item (native <details>) */
.faq-item {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 14px 34px rgba(30,15,60,.08);
  padding:4px 26px; overflow:hidden;
  transition:box-shadow .2s;
}
.faq-item[open] { box-shadow:0 22px 46px rgba(30,15,60,.14); }
.faq-item summary {
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0; font-size:1.08rem; font-weight:800; color:#150d15;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:#6865e7; }
/* +/- icon */
.faq-item__ico {
  flex:none; width:22px; height:22px; position:relative;
}
.faq-item__ico::before, .faq-item__ico::after {
  content:""; position:absolute; top:50%; left:50%;
  width:12px; height:2px; border-radius:2px; background:#6865e7;
  transform:translate(-50%,-50%); transition:transform .25s, opacity .2s;
}
.faq-item__ico::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-item__ico::after { opacity:0; transform:translate(-50%,-50%) rotate(0); }
.faq-item p {
  font-size:.95rem; color:var(--text); line-height:1.6;
  margin:0; padding:0 0 24px;
}
.faq-item p:has(+ .faq-link) { padding-bottom:14px; }
.faq-link {
  display:inline-flex; align-items:center; gap:6px; margin:0 0 24px;
  font-weight:800; color:#6865e7; text-decoration:none;
}
.faq-link:hover { color:#4f4ccf; }

/* ---- Brand logos ---- */
.brands { padding:76px 0; border-top:1px solid var(--line); }
.brands .section-head { margin-bottom:40px; }

/* ---- Recognised Companies — cascading logo carousel ----
   Both logo groups are pre-rendered (front + back face). Swapping is a pure
   CSS transform/opacity flip with a per-slot delay (--i) — no reflow, no
   network, GPU-composited, so it stays smooth. JS only toggles one class. */
.brands-row {
  display:grid; grid-template-columns:repeat(6,1fr);
  align-items:center; gap:20px 40px; max-width:1040px; margin:0 auto;
}
.brand-slot {
  position:relative; height:52px;
  display:flex; align-items:center; justify-content:center;
}
.brand-face {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; padding:6px;
  will-change:opacity, transform;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i, 0) * 70ms);
  backface-visibility:hidden;
}
.brand-face img {
  height:30px; width:auto; max-width:100%;
  opacity:.5; filter:grayscale(1); transition:opacity .2s;
  pointer-events:none;
}
.brand-face:hover img { opacity:.9; }
/* default: face A visible, face B waiting below */
.brand-face--a { opacity:1; transform:translateY(0); }
.brand-face--b { opacity:0; transform:translateY(16px); pointer-events:none; }
/* flipped: A leaves upward, B enters */
.is-flipped .brand-face--a { opacity:0; transform:translateY(-16px); pointer-events:none; }
.is-flipped .brand-face--b { opacity:1; transform:translateY(0); pointer-events:auto; }

@media (max-width:900px) {
  .brands-row { grid-template-columns:repeat(3,1fr); gap:30px 24px; }
}
@media (max-width:520px) {
  .brands-row { grid-template-columns:repeat(2,1fr); gap:30px 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-face { transition:none; }
}

/* ---- Company detail page (Recognised Companies links) ---- */
.company-hero { background:var(--bg-soft); }
.company-crumbs { font-size:.9rem; color:var(--muted); margin-bottom:28px; display:flex; gap:10px; flex-wrap:wrap; }
.company-crumbs a { color:var(--primary); }
.company-crumbs span[aria-hidden] { color:var(--line); }
.company-card {
  max-width:640px; margin:0 auto; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:52px 44px; box-shadow:var(--shadow-sm);
}
.company-card__logo { height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
.company-card__logo img { height:44px; width:auto; max-width:70%; filter:grayscale(1); opacity:.72; }
.company-card__badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:700; color:var(--green);
  background:rgba(0,214,88,.10); border:1px solid rgba(0,214,88,.24);
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.company-card__badge svg { width:16px; height:16px; fill:currentColor; }
.company-card h1 { font-size:2rem; color:var(--ink); margin-bottom:14px; }
.company-card p { color:var(--text); font-size:1.05rem; margin:0 auto 30px; max-width:480px; }
.company-card__actions { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.company-link { color:var(--text-dark); font-weight:700; font-size:.95rem; border-bottom:1px solid var(--line); padding-bottom:2px; transition:.2s; }
.company-link:hover { color:var(--primary); border-color:var(--primary); }
@media (max-width:560px) {
  .company-card { padding:40px 24px; }
  .company-card h1 { font-size:1.6rem; }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background:#150d15; color:#9c99b8; padding:60px 0 0; border-top:4px solid #6865e7; }
.footer-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr; gap:30px; padding:0 0 40px; }
.footer-cols h5, .footer-cols .ft-h { color:#fff; font-size:1rem; font-weight:800; margin-bottom:18px; }
/* logo art is centred in its canvas with empty space on top — nudge it up */
.footer-mark-link { display:inline-block; line-height:0; }
.footer-mark { width:100px; height:auto; margin-top:-4px; margin-bottom:8px; }
.footer-brand p { font-size:.92rem; max-width:320px; color:#9c99b8; margin:0; }
.footer-cols li { margin-bottom:10px; }
.footer-cols li a { color:#9c99b8; font-size:.92rem; }
.footer-cols li a:hover { color:#fff; }
/* bottom bar: copyright left, Legal | Privacy | Cookie right */
.footer-bottom { padding:22px 0; font-size:.85rem; color:#9c99b8; }
.footer-bottom .container { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bottom__links { display:flex; align-items:center; gap:0; }
.footer-bottom__links a { color:#9c99b8; padding:0 14px; position:relative; }
.footer-bottom__links a:first-child { padding-left:0; }
.footer-bottom__links a:last-child { padding-right:0; }
.footer-bottom__links a + a::before {
  content:"|"; position:absolute; left:-1px; color:rgba(255,255,255,.2);
}
.footer-bottom a:hover { color:#fff; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
/* the "After Recognition" row of 86px icons needs full width once the two-column
   split squeezes the icon column too tightly — stack heading over the icons */
@media (max-width:1160px) {
  .after-panel { grid-template-columns:1fr; gap:30px; align-items:start; }
}

@media (max-width:1024px) {
  .register .container { padding:0 32px; }
  .register-cats__grid { grid-template-columns:repeat(3,1fr); }
  .footer-cols { grid-template-columns:1fr 1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  /* how → 2×2 grid; rail only between columns, not at row ends */
  .how-flow { grid-template-columns:repeat(2,1fr); gap:20px; max-width:760px; }
  .how-card:nth-child(2n) .how-card__rail { display:none; }
}
@media (max-width:860px) {
  /* topbar: icons only, drop the link labels to save room */
  .topbar__link span { display:none; }
  .topbar__link { padding:7px 8px; }
  .topbar-search.open .topbar-search__form { max-width:160px; }
  .topbar-search__form input { width:140px; }

  .section { padding:64px 0; }
  .hero { padding:48px 0 70px; }
  .hero .container { grid-template-columns:1fr; gap:40px; }

  /* badge hero → single column, badge above the scale */
  .hero--badge { padding:120px 0 64px; }   /* keep clear of the absolute header */
  .hero--badge .container { grid-template-columns:1fr; gap:36px; }
  .hero-seal { justify-content:center; }
  .hero--badge .hero-copy { max-width:none; }

  /* register search → buttons drop below the input, side by side */
  .register-search__bar { flex-wrap:wrap; padding:12px; }
  .register-search__bar input { flex:1 1 100%; padding:6px 4px; }
  .register-search__filterbtn { flex:1 1 40%; justify-content:center; }
  .register-search__bar .btn { flex:1 1 45%; justify-content:center; }
  .register-cats__grid { grid-template-columns:1fr 1fr; }
  .register .container { padding:0 16px; }
  .register-box { padding:36px 0; border-radius:24px; }
  .register-box__inner { padding:0 18px; }

  /* who-we-are → single column, lead copy first */
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .about-copy { order:-1; }
  /* professional profiles → single column, image first */
  .pro-grid { grid-template-columns:1fr; gap:32px; }
  .pro-media { order:-1; max-width:480px; margin:0 auto; }
  .pro-list { grid-template-columns:1fr; }

  /* filters modal → single column, stacked footer */
  .filter-grid { grid-template-columns:1fr; }
  .filter-seg--three { grid-template-columns:1fr; }
  .filter-modal { padding:0; align-items:flex-end; }
  .filter-modal__dialog { max-width:none; max-height:94vh; border-radius:20px 20px 0 0; }
  .filter-modal__foot { flex-direction:column; align-items:stretch; gap:12px; }
  .filter-modal__result { flex-direction:column; align-items:stretch; gap:10px; }
  .filter-modal__result .btn { justify-content:center; }
  .filter-modal__count { text-align:center; }

  /* what you'll need / after recognition → stack columns */
  .prep-panel { grid-template-columns:1fr; gap:24px; padding:32px 24px; }
  .after-panel { grid-template-columns:1fr; gap:28px; }
  .after-items { grid-template-columns:repeat(2,1fr); gap:0; }
  .after-item:nth-child(2n+1) { border-left:none; }
  .after-item:nth-child(n+3) { border-top:1px solid var(--line); }

  /* ready to apply band → stack icon, copy, buttons */
  .apply-band__inner { flex-direction:column; text-align:center; gap:22px; padding:32px 24px; }
  .apply-band__copy p { max-width:none; }
  .apply-band__actions { width:100%; max-width:320px; }

  /* process steps → single vertical column */
  .how-flow { grid-template-columns:1fr; max-width:440px; }
  .how-card__rail { display:none !important; }
  .how__cta { flex-direction:column; gap:16px; }
  .faq-grid { grid-template-columns:1fr; gap:16px; max-width:480px; }

  /* mobile nav */
  .nav-toggle { display:block; }
  .main-nav {
    position:fixed; top:0; right:0; bottom:0; width:min(320px,85vw); background:#fff;
    box-shadow:-10px 0 40px rgba(0,0,0,.15); transform:translateX(100%); transition:.28s;
    overflow-y:auto; padding:80px 20px 40px; z-index:200; margin:0;
  }
  body.nav-open .main-nav { transform:translateX(0); }
  /* The .main-nav lives inside .site-header (z-index:100), which forms its own
     stacking context — so the panel's z-index:200 is only local. A backdrop on
     body::after would otherwise paint OVER the whole header (menu included) and
     swallow all clicks. Fix: lift the header above the backdrop while the menu is
     open, so the panel sits above the backdrop and stays interactive. */
  body.nav-open .site-header { z-index:210; }
  body.nav-open::after {
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.4);
    z-index:150; pointer-events:none;
  }
  /* close-on-tap: the backdrop click is handled by JS via the .nav-close button
     and toggle; keep the backdrop non-interactive so it never blocks the panel */
  /* the slide-in panel is white, so keep its links dark even in the over-hero header.
     high specificity to beat `.site-header--over .main-nav > ul > li > a { color:#fff }` */
  header.site-header .main-nav a:not(.main-nav__cta),
  header.site-header--over .main-nav > ul > li > a,
  header.site-header--dark .main-nav > ul > li > a { color:#150d15; }
  header.site-header .main-nav a:not(.main-nav__cta):hover,
  header.site-header--over .main-nav > ul > li > a:hover,
  header.site-header--dark .main-nav > ul > li > a:hover { color:#6865e7; background:#f1edfa; opacity:1; }
  .main-nav > ul { flex-direction:column; align-items:stretch; gap:0; }
  .main-nav a { padding:13px 10px; border-bottom:1px solid var(--line); border-radius:0; }
  /* top-level links bleed across the panel's 20px side padding so the hover
     fill and the divider run edge-to-edge (client 2026-09-12) */
  .main-nav > ul > li > a:not(.main-nav__cta) { margin:0 -20px; padding:13px 20px; }
  /* the icon links are inline-flex on desktop -> shrink-to-content; in the
     panel they must be full-width blocks like the rest */
  .main-nav .nav-il { display:flex; width:auto; }

  /* The header Get Listed button is hidden on mobile; a real link (.main-nav__cta)
     inside the slide-in menu replaces it (added to the markup). Selector matches
     the base `.main-nav .main-nav__cta` specificity so this show rule wins. */
  .header-cta { display:none; }
  .header-actions { display:none; }   /* both top-bar buttons move into the slide-in menu */
  /* Get Listed in the menu — reuses the .btn .btn-cta .btn-cta--fill classes so it
     is IDENTICAL to the .how__cta button (size, font, dark ::before wipe on hover).
     Here we only make it a full-width block and neutralise the generic `.main-nav a`
     link styles (padding / bottom border) that would otherwise override .btn. */
  .main-nav .main-nav__cta {
    display:flex; justify-content:center; width:100%; margin-top:20px;
    border-bottom:0; border-radius:5px; padding:14px 34px;   /* match .btn-cta */
    /* override the generic `.main-nav a` link rules (same specificity, later = wins) */
    color:#fff; font-size:16px; font-weight:700;
  }
  /* dark fill that wipes in on hover — same colour as .how__cta's ::before (#150d15) */
  .main-nav .main-nav__cta::before { background:#150d15; }
  .main-nav .main-nav__cta:hover { color:#fff; border-color:#150d15; }
  /* "Find a Pro" in the menu — outline on the white panel (dark border + text),
     hover fills dark. Sits just above the Get Listed fill button. */
  .main-nav .main-nav__cta--ghost {
    background:transparent; color:#150d15; border:1px solid #150d15;
    margin-top:20px; margin-bottom:-4px;
  }
  .main-nav .main-nav__cta--ghost::before { display:none; }
  .main-nav .main-nav__cta--ghost:hover { background:#150d15; color:#fff; border-color:#150d15; }
  .main-nav .main-nav__cta--ghost + .main-nav__cta { margin-top:12px; }
  .main-nav .has-dropdown > a::after { float:right; }
  .dropdown, .dropdown.mega, .dropdown.mega-index, .dropdown.mega-reco {
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-radius:0; display:none; min-width:0; width:auto; max-width:none;
    padding:0 0 0 16px; grid-template-columns:1fr;
  }
  .main-nav .has-dropdown.open > .dropdown { display:block; }
  /* Index mega-menu, stacked inside the slide-in menu */
  .dropdown.mega-index::before { display:none; }
  .dropdown.mega-index .mega-index__main { padding:0; }
  .dropdown.mega-index .mega-index__cats { padding:0; border-left:0; }
  .dropdown.mega-index .mega-index__cta {
    background:transparent; border-left:0; border-top:1px solid var(--line);
    padding:14px 0 4px; margin-top:8px; align-items:flex-start;
  }
  .dropdown.mega-index .mega-row--lead { border-bottom:1px solid var(--line); border-radius:0; }
  .dropdown.mega-index .mega-search { margin:8px 0; }
  .dropdown.mega-index .mega-cats { grid-template-columns:1fr; gap:0; }
  /* hide the grey "Categories" heading; move the Categories lead below Services
     so it sits right above its category list */
  .dropdown.mega-index .mega-sec__title { display:none; }
  .dropdown.mega-index .mega-lead--services { order:3; }
  .dropdown.mega-index .mega-lead--cats { order:4; }
  /* CTA button stays inline (NOT full-width) on mobile; base white text on
     brand, hover fills dark with white text like Get Listed (needs to beat the
     generic mobile `.main-nav a` colour rules — hence the header prefix) */
  .dropdown.mega-index .mega-cta__btn {
    width:auto; align-self:flex-start; margin-top:10px;
    justify-content:flex-start;
  }
  header.site-header .dropdown.mega-index .mega-cta__btn { color:#fff; background:var(--primary); }

  /* ---- Business / Customers accordions (mobile mirror of the .hdrop pills) ---- */
  .main-nav .mob-only { display:block; }
  .main-nav .mob-trigger { cursor:pointer; }
  .dropdown.mob-menu a { display:flex; align-items:center; gap:11px; }
  .dropdown.mob-menu .hdrop__i { color:var(--primary); }
  .dropdown.mob-menu .hdrop__i svg { width:18px; height:18px; }
  .dropdown.mob-menu .hdrop__grp { padding:14px 10px 5px; border-bottom:0; }
  .dropdown.mob-menu .hdrop__sep { display:none; }   /* row borders already separate the groups */
  header.site-header .dropdown.mega-index .mega-cta__btn:hover { color:#fff; background:#150d15; }
  /* Recognition mega, stacked inside the slide-in menu */
  .dropdown.mega-reco::before { display:none; }
  .dropdown.mega-reco .mega-reco__links { padding:0; }
  .dropdown.mega-reco .mega-reco__flow { display:none; }  /* stepper is desktop-only decoration */
  .dropdown.mega-reco .mega-row--lead { border-bottom:1px solid var(--line); border-radius:0; }
  .dropdown.mega-reco .mega-cta__btn { width:auto; align-self:flex-start; margin-top:10px; justify-content:flex-start; }
  header.site-header .dropdown.mega-reco .mega-cta__btn { color:#fff; background:var(--primary); }
  header.site-header .dropdown.mega-reco .mega-cta__btn:hover { color:#fff; background:#150d15; }
  .nav-close {
    display:block; position:absolute; top:18px; right:18px; background:none; border:0;
    font-size:1.8rem; color:var(--ink); cursor:pointer; line-height:1;
  }
  .footer-cols { grid-template-columns:1fr 1fr; }
  .footer-bottom .container { flex-direction:column; align-items:flex-start; gap:12px; }

  /* ============ MOBILE ADAPTIVE FIXES (2026-07-13) ============ */

  /* Guard: nothing should push the page wider than the viewport */
  html, body { overflow-x:hidden; }

  /* #2 hero rating badges (AAA A BBB … D) stay on ONE line */
  .hero-seal__scale { flex-wrap:nowrap; gap:5px; justify-content:center; }
  .hero-seal__pip { padding:5px 7px; font-size:.68rem; }

  /* #3 the hero card no longer tucks under the wave (was margin-bottom:-120px,
     which cropped "150+ … / Rating tiers" behind it) */
  .hero-seal { margin-bottom:0; }
  /* trim the card's side padding so its contents (badges row, stats) fit 390px
     without spilling past the viewport */
  .hero-seal__card { padding:36px 20px 30px; }
  .hero-seal__stats { gap:6px; }
  .hero-seal__stats strong { font-size:1.2rem; }

  /* #4 register search: keep the icon + input on one row, buttons below */
  .register-search__bar { flex-wrap:wrap; padding:8px 12px; gap:8px; }
  .register-search__bar > svg { order:0; }
  .register-search__bar input { order:1; flex:1 1 auto; width:auto; padding:10px 0; }
  .register-search__filterbtn { order:3; flex:1 1 45%; }
  .register-search__bar .btn { order:4; flex:1 1 45%; }
  /* Search-by chips line up tidily instead of scattering */
  .register-search__filters { gap:8px; }
  .register-search__label { flex:1 1 100%; margin:0 0 2px; }
  .register-chip { flex:0 0 auto; }
  /* Recognition Categories: show only the first 10 on mobile, and tighten the
     grid so the two columns fit 390px without spilling over */
  .register-cats__grid { gap:10px; }
  .register-cats__grid > .cat-card:nth-child(n+11) { display:none; }
  .register-box__inner { padding:0 14px; }
  .cat-card { padding:12px; gap:9px; }

  /* #5 process step cards — center all content */
  .how-card { text-align:center; }
  .how-card__top { justify-content:center; }
  .how-card__icon { margin-left:auto; margin-right:auto; }
  .how-card__meta { margin-left:auto; margin-right:auto; }

  /* #6 professional profiles — center the CTA + link */
  .pro-cta { flex-direction:column; align-items:center; text-align:center; gap:14px; }

  /* #7 we're weston & horton — center button + card content */
  .about-copy { text-align:center; }
  .about-card { text-align:center; }

  /* #8 FAQ on the HOMEPAGE — drop its top wave (it cropped the heading),
     so the big top padding meant for the wave is no longer needed */
  .faq:not(.faq--under-cta) .faq__wave { display:none; }
  .faq:not(.faq--under-cta) { padding-top:64px; }

  /* #10 RATINGS page: drop the wave between the CTA band and the FAQ on mobile —
     a plain straight seam (the wavy mask cropped the FAQ heading on narrow screens).
     Remove the wave-shaped mask so the dark band ends flat, and reset the big top
     padding the FAQ used to leave for the overhang. */
  .cta-band--to-faq { padding-bottom:56px; overflow:hidden; }
  .cta-band--to-faq::after {
    bottom:0;
    -webkit-mask:none; mask:none;   /* no wave — flat bottom edge */
  }
  .faq--under-cta { padding-top:64px; }

  /* #9 footer — center logo, brand text and the bottom bar */
  .footer-brand { text-align:center; }
  .footer-mark-link { display:inline-block; }
  .footer-brand p { max-width:340px; margin-left:auto; margin-right:auto; }
  .footer-bottom .container { align-items:center; text-align:center; }
  .footer-bottom__links { justify-content:center; }
}
@media (max-width:560px) {
  /* Link columns stay 2-up on phones (client 2026-09-11); the longest label
     ("Claim Your Business") still fits a 390px viewport with this gap. */
  .footer-cols { grid-template-columns:1fr 1fr; gap:22px 24px; }
  .logo-full { width:140px; }
}

/* ================= Site search + autocomplete (<x-site.search>) ================= */
.wh-search { position:relative; width:100%; }
.wh-search__bar { display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #e6e9f2; border-radius:14px; padding:8px 8px 8px 16px; box-shadow:0 2px 10px rgba(30,38,109,.05); transition:border-color .16s, box-shadow .16s; }
.wh-search:focus-within .wh-search__bar { border-color:#6865e7; box-shadow:0 6px 24px rgba(104,101,231,.16); }
.wh-search__mag { color:#656d80; flex:none; }
.wh-search__input { flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:1.02rem; color:#150d15; padding:6px 0; min-width:0; }
.wh-search__input::placeholder { color:#9aa2b4; }
.wh-search__btn { flex:none; }
/* search input reset for the native clear/decoration */
.wh-search__input::-webkit-search-cancel-button { -webkit-appearance:none; }

/* Suggestions panel */
.wh-search__panel { position:absolute; z-index:60; left:0; right:0; top:calc(100% + 8px); background:#fff; border:1px solid #e6e9f2; border-radius:14px; box-shadow:0 20px 50px rgba(21,13,21,.18); padding:6px; max-height:min(70vh,460px); overflow-y:auto; }
.wh-search__group { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9aa2b4; padding:10px 12px 4px; }
.wh-search__opt { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; text-decoration:none; color:inherit; cursor:pointer; min-width:0; }
.wh-search__opt.is-active { background:#f3f1fd; }
/* Keep every suggestion on ONE line - long labels ellipsis instead of wrapping. */
.wh-search__opt-label { flex:1; min-width:0; font-weight:700; color:#150d15; font-size:.96rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wh-search__opt-sub { flex:none; margin-left:auto; font-size:.8rem; color:#656d80; font-weight:600; white-space:nowrap; padding-left:10px; }
/* Type dots — a small colour cue per source. */
.wh-search__opt-ico { flex:none; width:9px; height:9px; border-radius:50%; background:#c9c0f2; }
.wh-search__opt-ico--keyword { background:#6865e7; }
.wh-search__opt-ico--service { background:#8b5cf6; }
.wh-search__opt-ico--company { background:#0a7d46; }
.wh-search__opt-ico--professional { background:#c98a00; }
.wh-search__opt-ico--category { background:#3b82f6; }
.wh-search__opt-ico--specialism { background:#9aa2b4; }
@media (max-width:560px){ .wh-search__btn span, .wh-search__btn { font-size:.9rem; } .wh-search__opt-sub{ display:none; } }

/* Catalogue type toggle — centred over the category grid (moved out from under
   the search; switches only the catalogue). */
.register-cats-switch { display:flex; justify-content:center; margin:38px 0 22px; }
.register-cats-switch .register-toggle { margin:0; width:100%; max-width:360px; }

/* ===================================================================
   VERIFY RECOGNITION  (/verify/)
   =================================================================== */
.verify { padding-top:0; }

/* search card — white panel. Sits at the standard band gap (the .verify
   section gets --band-gap from the .site-band + * rule); no negative lift now
   that the hero is a flat band, not the old gradient wave. */
.verify-search {
  max-width:820px; margin:0 auto; position:relative; z-index:5;
  background:#fff; border:1px solid rgba(30,38,109,.08); border-radius:20px;
  box-shadow:0 30px 60px rgba(21,13,35,.14); padding:26px;
}
.verify-search__bar { display:flex; align-items:center; gap:12px; }
.verify-search__ic { flex:none; width:22px; height:22px; color:var(--primary); }
.verify-search__ic svg { width:22px; height:22px; }
.verify-search__bar input {
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  font:inherit; font-size:1.05rem; color:var(--ink); padding:10px 4px;
}
.verify-search__bar input::placeholder { color:#9aa0bd; }
.verify-search__btn { flex:none; padding:14px 30px; }
.verify-search__hint {
  display:flex; align-items:flex-start; gap:9px; margin:16px 4px 0;
  color:#9aa0bd; font-size:.86rem; line-height:1.5;
}
.verify-search__hint svg { flex:none; width:16px; height:16px; margin-top:1px; color:#b6bacb; }

/* ---- result record cards ---- */
.vr {
  max-width:820px; margin:28px auto 0; background:#fff;
  border:1px solid rgba(30,38,109,.10); border-radius:20px;
  box-shadow:0 18px 44px rgba(21,13,35,.08); padding:32px;
}
.vr__head { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.vr__seal { flex:none; width:56px; height:56px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; }
.vr__seal svg { width:30px; height:30px; }
.vr__eyebrow { display:block; font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; }
.vr__title { font-size:clamp(1.5rem,2.4vw,1.9rem); color:#150d15; margin:2px 0 0; font-weight:800; }
.vr__lede { color:var(--text); font-size:1rem; line-height:1.6; margin:0 0 22px; }

/* colour accents per state */
.vr--ok { border-color:rgba(22,163,74,.28); }
.vr--ok .vr__seal { background:rgba(22,163,74,.10); color:#16a34a; }
.vr--ok .vr__eyebrow { color:#16a34a; }
.vr--updated .vr__seal { background:rgba(217,119,6,.10); color:#d97706; }
.vr--updated .vr__eyebrow { color:#b45309; }
.vr--muted .vr__seal { background:rgba(30,38,109,.07); color:#5b6178; }
.vr--muted .vr__eyebrow { color:#5b6178; }
.vr--none .vr__seal { background:rgba(30,38,109,.07); color:#5b6178; }
.vr--none .vr__eyebrow { color:#5b6178; }

/* record fields */
.vr__grid { margin:0; display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.vr__row { display:grid; grid-template-columns:220px 1fr; gap:16px; padding:13px 2px; border-bottom:1px solid var(--line); }
.vr__row dt { color:var(--text); font-weight:700; font-size:.9rem; }
.vr__row dd { margin:0; color:#150d15; font-weight:600; }
.vr__row code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem; background:var(--bg-soft); padding:3px 8px; border-radius:6px; }
.vr__grade { display:inline-block; font-weight:800; color:var(--primary); font-size:1.05rem; letter-spacing:.02em; }
.vr__pill { display:inline-block; background:rgba(22,163,74,.12); color:#15803d; font-weight:800; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:4px 11px; border-radius:999px; }
.vr__pill--off { background:rgba(30,38,109,.08); color:#5b6178; }

/* valid strip + actions */
.vr__valid {
  display:flex; align-items:center; gap:10px; margin-top:22px;
  background:rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.22);
  color:#15803d; font-weight:700; font-size:.95rem; border-radius:12px; padding:14px 16px;
}
.vr__valid svg { flex:none; width:20px; height:20px; }
.vr__note { margin:16px 0 0; color:var(--text); font-size:.9rem; line-height:1.6; padding:14px 16px; background:var(--bg-soft); border-radius:12px; }
.vr__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* dark ghost button used on the record cards (white ground) */
.btn-ghost-dark { background:transparent; color:#150d15; border-color:rgba(21,13,21,.22); }
.btn-ghost-dark:hover { border-color:#150d15; color:#150d15; background:rgba(21,13,21,.04); }

/* ---- name-match list ---- */
.vr--list { padding:26px 28px; }
.vr-list__head { margin-bottom:16px; }
.vr-list__rows { display:flex; flex-direction:column; }
.vr-list__row {
  display:grid; grid-template-columns:1fr auto auto 22px; align-items:center; gap:16px;
  padding:16px 6px; border-top:1px solid var(--line); color:inherit; transition:background-color .15s;
}
.vr-list__row:hover { background:var(--bg-soft); }
.vr-list__main { min-width:0; }
.vr-list__name { display:block; font-weight:800; color:#150d15; }
.vr-list__meta { display:block; color:var(--text); font-size:.88rem; margin-top:2px; }
.vr-list__grade { font-weight:800; color:var(--primary); }
.vr-list__status { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#15803d; }
.vr-list__status--off { color:#5b6178; }
.vr-list__go { color:var(--primary); }
.vr-list__go svg { width:20px; height:20px; }

/* ---- what can be verified ---- */
.verify-info { max-width:900px; margin:64px auto 0; text-align:center; }
.verify-info__head h2 { color:#150d15; font-weight:800; font-size:clamp(1.6rem,2.6vw,2.1rem); margin:6px 0 12px; }
.verify-info__head p { color:var(--text); max-width:620px; margin:0 auto; line-height:1.6; }
.verify-info__grid {
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left;
}
.verify-info__grid li {
  display:flex; align-items:center; gap:11px; background:#fff;
  border:1px solid rgba(30,38,109,.10); border-radius:12px; padding:16px 18px;
  font-weight:700; color:#150d15; font-size:.96rem;
}
.verify-info__grid svg { flex:none; width:20px; height:20px; color:#16a34a; }

@media (max-width:760px) {
  .verify-search { margin-top:0; padding:18px; }
  .verify-search__bar { flex-wrap:wrap; }
  .verify-search__btn { flex:1 1 100%; justify-content:center; margin-top:6px; }
  .vr { padding:22px; }
  .vr__row { grid-template-columns:1fr; gap:3px; padding:11px 2px; }
  .vr__row dt { font-size:.82rem; }
  .vr-list__row { grid-template-columns:1fr auto; grid-auto-rows:auto; }
  .vr-list__status { grid-column:2; }
  .vr-list__go { display:none; }
  .verify-info__grid { grid-template-columns:1fr; }
}

/* ==========================================================================
   UNIFIED internal-page shell (2026-07-31)
   - variant="light": white main header bar + dark topbar (links #9c99b8)
   - <x-site.hero> / <x-site.intro> render a flat #f1f0fd band (.site-band)
   Applies to every internal page EXCEPT company/professional profiles, which
   keep .company-hero / .page-hero. Old gradient-hero look retired.
   ========================================================================== */

/* ---- header: white main bar, dark topbar kept ---- */
.site-header--light { background:#fff; border-bottom:1px solid #e9ebf3; }
.site-header--light .topbar { background:#150d15; border-bottom-color:rgba(255,255,255,.14); }

/* topbar links + icons -> #9c99b8; hover brightens to #fff like the dark ground */
.site-header--light .topbar__app,
.site-header--light .topbar__link,
.site-header--light .topbar-search__btn { color:#9c99b8; }
.site-header--light .topbar__app:hover,
.site-header--light .topbar__link:hover,
.site-header--light .topbar-search__btn:hover,
.site-header--light .topbar-search.open .topbar-search__btn { background:rgba(255,255,255,.16); color:#fff; }
.site-header--light .topbar-search__form input { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff; }
.site-header--light .topbar-search__form input::placeholder { color:rgba(255,255,255,.7); }
.site-header--light .topbar-search__form input:focus { border-color:#fff; }

/* logo: dark wordmark (logo-v3) shows as-is, no invert filter */
.site-header--light .logo-full { filter:none; }

/* main nav: dark on white, light hover (desktop; mobile slide-in keeps its own) */
@media (min-width:861px) {
  .site-header--light .main-nav > ul > li > a { color:#150d15; }
  .site-header--light .main-nav > ul > li > a:hover { color:var(--primary); background:#f1f0fd; }
  .site-header--light .main-nav .has-dropdown > a::after { color:#150d15; }
}
.site-header--light .nav-toggle { color:#150d15; }

/* Business / Customers pills: dark on white, invert on hover */
.site-header--light .hdrop__btn { color:#150d15; background:#f1f0fd; border-color:#e9ebf3; }
.site-header--light .hdrop:hover .hdrop__btn,
.site-header--light .hdrop__btn[aria-expanded="true"] {
  background:#150d15; color:#fff; border-color:#150d15; box-shadow:0 12px 30px rgba(30,20,80,.18);
}

/* ---- hero band: full-bleed #f1f0fd, flush under the header ---- */
.site-band { background:#f1f0fd; border-bottom:1px solid #e9ebf3; }
.site-band .start-intro { margin:0; padding:36px 4px; background:transparent; border:0; border-radius:0; box-shadow:none; }
.site-band .start-title { font-size:2rem; font-weight:800; color:#150d15; margin:0 0 6px; line-height:1.2; }
.site-band .start-lede { font-size:.98rem; color:var(--text,#5a6478); line-height:1.6; margin:0; max-width:none; }
/* smaller heading on phones so long titles don't stack into 3+ lines */
@media (max-width:640px){
  .site-band .start-title { font-size:1.5rem; }
  .site-band .start-intro { padding:26px 4px; }
}
.site-band .start-crumbs { margin-bottom:10px; }
.site-band .start-crumbs a { color:var(--muted,#656d80); }
.site-band .start-crumbs li[aria-current] { color:var(--text-dark,#2b3245); }
.site-band .start-crumbs .breadcrumbs__sep::before { background:#c2c7d6; }
.site-band .is-centered { text-align:center; }
.site-band .is-centered .start-crumbs { justify-content:center; }

/* ── Cover variant — SPLIT band (test 2026-08-04) ───────────────────────────
   The band is split: the left ~40% keeps the standard lavender fill (dark text
   sits here), the right ~60% shows the listing cover, divided by a tilted (~60deg
   off horizontal) double border (#ebeaf6 then #6865e7, 3px each). No scrim; text
   keeps its normal dark colours. The image is set via --cover-img inline; the
   split boundary is a hard-stop gradient laid OVER the image, so the image shows
   only where the gradient is transparent. --split-angle tweaks the tilt. */
.site-band--cover {
  --split-angle:120deg;
  --split-at:40%;               /* where the divider sits along the gradient axis */
  --img-left:30%;               /* image layer starts here so it covers the whole
                                   diagonal; its LEFT edge = the split (not a mid slice) */
  position:relative;
  overflow:hidden;              /* image + divider stay inside the band */
  border-bottom:1px solid #e9ebf3;
  background-color:#f1f0fd;
}
/* Image layer: confined to the RIGHT region and cover-sized to IT, so the image
   begins at its own left edge from the split, instead of a middle slice of a
   full-width image. Sits behind the lavender/divider overlay. */
.site-band--cover::after {
  content:""; position:absolute; top:0; bottom:0; left:var(--img-left); right:0; z-index:0;
  background:var(--cover-img) var(--cover-pos, 50% 50%) / cover no-repeat;
}
/* Overlay: lavender left + tilted double border; transparent past the split so
   the image shows through. Drawn OVER the image so it hides the image's leftmost
   bit up to the divider. */
.site-band--cover::before {
  content:""; position:absolute; inset:0; z-index:1;
  /* ~0.6px feather at every stop: a bare hard-stop on a diagonal gradient looks
     stair-stepped (the rasteriser can't anti-alias a zero-width angled edge); a
     sub-pixel transition lets it blend, so the lines read crisp instead of jagged. */
  background:linear-gradient(var(--split-angle),
    #f1f0fd calc(var(--split-at) - 6px - 0.6px),
    #ebeaf6 calc(var(--split-at) - 6px + 0.6px),
    #ebeaf6 calc(var(--split-at) - 3px - 0.6px),
    #6865e7 calc(var(--split-at) - 3px + 0.6px),
    #6865e7 calc(var(--split-at) - 0.6px),
    transparent calc(var(--split-at) + 0.6px));
}
/* vertically centre the name + rating in the band (short content no longer sticks
   to the top; tall content just grows the band and stays centred) */
.site-band--cover .container { position:relative; z-index:2; display:flex; align-items:center; min-height:210px; }
.site-band--cover .start-intro { max-width:35%; }
@media (max-width:760px){
  /* the diagonal split is too tight on phones: show the plain lavender band */
  .site-band--cover::before, .site-band--cover::after { display:none; }
  .site-band--cover .start-intro { max-width:none; padding:20px 4px; }
  /* drop the tall desktop min-height so the band isn't over-padded on phones */
  .site-band--cover .container { min-height:0; }
}

/* ── Photos variant — Pexels montage behind the band (category pages) ────────
   The SAME universal band, but the flat lavender fill is replaced by a 5-photo
   montage with a dark scrim so the (now white) breadcrumbs, H1, lede and stat
   strip stay readable. Rendered only when <x-site.hero :photos> is passed; every
   other page is untouched. On phones the montage collapses to the feature shot. */
.site-band--photos { position:relative; overflow:hidden; border-bottom:1px solid #e9ebf3; background:#150d15; }
.site-band--photos .site-band__media { position:absolute; inset:0; z-index:0; }
.site-band--photos .site-band__montage { position:absolute; inset:0; display:grid; gap:4px; }
.site-band--photos .sbm-cell { margin:0; overflow:hidden; }
.site-band--photos .sbm-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.site-band--photos .site-band__montage--5 { grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.site-band--photos .site-band__montage--5 .sbm-cell--feature { grid-row:1 / span 2; }
.site-band--photos .site-band__montage--1 { grid-template-columns:1fr; grid-template-rows:1fr; }
/* Scrim: darker on the left (under the text), fading right, plus a slight
   top-to-bottom darkening so the whole band holds white text. */
.site-band--photos .site-band__scrim { position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(21,13,21,.86) 0%, rgba(21,13,21,.66) 42%, rgba(21,13,21,.30) 100%),
    linear-gradient(180deg, rgba(21,13,21,.10), rgba(21,13,21,.45)); }
.site-band--photos .container { position:relative; z-index:2; }
/* White text over the montage. */
.site-band--photos .start-title { color:#fff; }
.site-band--photos .start-lede { color:rgba(255,255,255,.9); }
.site-band--photos .start-crumbs a { color:rgba(255,255,255,.82); }
.site-band--photos .start-crumbs a:hover { color:#fff; }
.site-band--photos .start-crumbs li[aria-current] { color:#fff; }
.site-band--photos .start-crumbs .breadcrumbs__sep::before { background:rgba(255,255,255,.5); }
/* Category stat strip over photos: light figures + hairline dividers. */
.site-band--photos .cat-stat { border-right-color:rgba(255,255,255,.22); }
.site-band--photos .cat-stat b { color:#fff; }
.site-band--photos .cat-stat span { color:rgba(255,255,255,.78); }
@media (max-width:760px){
  /* one shot only on phones - the multi-cell grid is too busy small */
  .site-band--photos .site-band__montage--5 { grid-template-columns:1fr; grid-template-rows:1fr; }
  .site-band--photos .site-band__montage--5 .sbm-cell { display:none; }
  .site-band--photos .site-band__montage--5 .sbm-cell--feature { display:block; grid-row:auto; }
}

/* butt the band flush against the header even when the page's <main> is padded */
main:has(> .site-band:first-child) { padding-top:0; }

/* ── ONE standard gap between the lavender band and page content ────────────
   Every internal page renders <x-site.hero> (= .site-band) followed by SOME
   wrapper: a .container, a <main>, a <section>. Whatever it is, it gets exactly
   this gap — so search, catalogue, pricing, profiles and every NEW page line up
   without anyone re-inventing a top padding. Do NOT set page-specific top
   padding on the first block under the band; change --band-gap here instead.
   !important is deliberate: page CSS loads after style.css, so this must win. */
:root { --band-gap: 46px; }
.site-band + * { padding-top: var(--band-gap) !important; }
@media (max-width:640px){ :root { --band-gap: 32px; } }

/* ---- Claim a business / network (public shell, works for guests) ---- */
.claim-wrap { max-width:720px; }
.claim-card { background:#fff; border:1px solid #e6e9f2; border-radius:16px; box-shadow:0 20px 50px rgba(21,13,35,.08); padding:34px; }
.claim-card h2 { font-size:1.35rem; font-weight:800; color:#150d15; margin:0 0 8px; }
.claim-card > p { color:var(--text,#5a6478); line-height:1.65; margin:0 0 6px; }
.claim-dl { margin:22px 0 0; border:1px solid #e6e9f2; border-radius:12px; padding:6px 18px; }
.claim-dl__row { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #f0f1f6; }
.claim-dl__row:last-child { border-bottom:0; }
.claim-dl__row dt { color:var(--muted,#656d80); font-size:.92rem; margin:0; }
.claim-dl__row dd { color:#150d15; font-weight:700; font-size:.92rem; margin:0; text-align:right; }
.claim-note { margin-top:22px; background:#f1f0fd; border-radius:12px; padding:20px; }
.claim-note b { color:#150d15; }
.claim-note p { color:var(--text,#5a6478); font-size:.94rem; line-height:1.6; margin:8px 0 0; }
.claim-actions { margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
.claim-actions .btn-ghost { display:inline-flex; align-items:center; padding:12px 24px; border:1px solid #e6e9f2; border-radius:999px; font-weight:700; font-size:.9rem; color:#150d15; text-decoration:none; transition:background .14s; }
.claim-actions .btn-ghost:hover { background:#f6f5fb; }

/* "People also ask" Q&A block (light, native details; used on hub/landing pages). */
.paa { padding: 2.4rem 0; }
.paa__head h2 { margin: 0 0 1rem; }
.paa-item { border-bottom: 1px solid #e7e6f5; padding: .85rem 0; }
.paa-item > summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.paa-item > summary::-webkit-details-marker { display: none; }
.paa-item > summary::after { content: "+"; color: var(--primary); font-weight: 800; }
.paa-item[open] > summary::after { content: "\2013"; }
.paa-item > p { margin: .6rem 0 0; color: #4a4a63; line-height: 1.55; }
.paa-item a { color: var(--primary); font-weight: 600; }

/* =========================================================================
   Recognition badges (2026-08-15) — replaces the retired AAA-D letter grade.
   .rec-mini  = the small "Recognized" marker on cards (search/catalogue/geo…)
   .rec-block = the Recognition block on the listing profile page
   Icons: header shield+R glyph (mini) / catalogue webp (block). Single source
   of copy = the badges table.
   ========================================================================= */
/* .rec-mini* styles now live inline in resources/views/components/badge/mini.blade.php (@once) - CDN-cache-proof. */


/* Variant A: badge at the head, certificate meta + verify link in the footer
   (one block; no download button - the owner downloads from cabinet settings). */
.rec-block{border:1px solid #e6e4f2;border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(21,13,21,.05),0 10px 30px rgba(21,13,21,.06);}
.rec-block__top{display:flex;align-items:center;gap:14px;padding:18px 20px 0;}
.rec-block__ico{width:56px;height:56px;flex:none;object-fit:contain;}
.rec-block__head-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rec-block__ttl{font-weight:800;color:#150d15;font-size:1.1rem;line-height:1.15;letter-spacing:-.01em;}
.rec-block__sub{font-size:.8rem;color:#8a86a0;font-weight:700;}
.rec-block__pill{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:800;color:#0a7d46;background:#e6f6ed;border:1px solid #b8e6cc;border-radius:999px;padding:3px 10px;}
.rec-block__pill svg{width:12px;height:12px;}
.rec-block__txt{font-size:.92rem;color:#4a4a68;line-height:1.55;margin:0;padding:12px 20px 4px;}
.rec-block__div{height:1px;background:#e6e4f2;border:0;margin:14px 0 0;}
.rec-block__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 20px 18px;}
.rec-block__meta{flex:1;min-width:170px;display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;}
.rec-block__meta div{display:flex;flex-direction:column;gap:1px;}
.rec-block__meta dt{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a86a0;}
.rec-block__meta dd{margin:0;font-size:.86rem;font-weight:700;color:#150d15;font-variant-numeric:tabular-nums;}
.rec-block__cta{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.88rem;color:#fff;
  background:#6865e7;border-radius:11px;padding:10px 16px;text-decoration:none;transition:background .15s;}
/* keep white text on hover - override the global a:hover{color:var(--primary-d)} */
.rec-block__cta:hover,.rec-block__cta:focus{background:#514ecf;color:#fff;text-decoration:none;}

/* --- Unified status ladder: unclaimed -> claimed -> pro -> recognized --------
   ONE .rec-block, content per state (see x-listing.recognition). Tier reads in
   the icon chip + pill hue; a checklist marks what's active (green tick) and
   previews the next unlock in brand colour - never a greyed-out "locked" look,
   so no tier (Pro especially) reads as diminished next to Recognized. */
.rec-block{margin:4px 0 18px;}
/* accordion: compact summary (icon + status + pill + chevron), body reveals on open */
.rec-block__summary{display:flex;align-items:center;gap:13px;padding:15px 20px;cursor:pointer;list-style:none;}
.rec-block__summary::-webkit-details-marker{display:none;}
.rec-block__summary:focus-visible{outline:2px solid #6865e7;outline-offset:-2px;border-radius:16px;}
.rec-block__head-txt{flex:1;min-width:0;}
.rec-block__pill{margin-left:0;}
.rec-block__chevron{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#6865e7;transition:transform .18s ease,background .15s;}
.rec-block__chevron svg{width:20px;height:20px;fill:currentColor;}
.rec-block__summary:hover .rec-block__chevron{background:rgba(104,101,231,.12);}
.rec-block[open] .rec-block__chevron{transform:rotate(180deg);}
.rec-block__body{padding-bottom:2px;}
.rec-block__ico--logo{border:1px solid #ece9f6;border-radius:12px;background:#fff;object-fit:contain;padding:4px;}
.rec-block__ico--chip{display:grid;place-items:center;border-radius:14px;}
.rec-block__ico--chip svg{width:28px;height:28px;}
.rec-block--unclaimed  .rec-block__ico--chip{background:#eeedf3;color:#6f6b82;}
.rec-block--claimed    .rec-block__ico--chip{background:#e6f6ed;color:#0a7d46;}
.rec-block--pro        .rec-block__ico--chip{background:#f1edfa;color:#6865e7;}
.rec-block--recognized .rec-block__ico--chip{background:#faf1d8;color:#b08409;}
/* pill hue per tier (claimed + recognized reuse the default green pill) */
.rec-block__pill--unclaimed{color:#6f6b82;background:#eeedf3;border-color:#ddd9ea;}
.rec-block__pill--pro{color:#6865e7;background:#f1edfa;border-color:#d9d2f6;}
/* what's active / what's next checklist */
.rec-block__perks{list-style:none;margin:0;padding:2px 20px 2px;display:flex;flex-direction:column;gap:8px;}
.rec-block__perks li{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:700;line-height:1.35;}
.rec-block__perks svg{width:16px;height:16px;flex:none;}
.rec-block__perks .on{color:#150d15;}   .rec-block__perks .on svg{color:#0a7d46;}
.rec-block__perks .next{color:#6865e7;} .rec-block__perks .next svg{color:#6865e7;}
.rec-block__perks .soon{color:#8a86a0;} .rec-block__perks .soon svg{color:#cfcbe0;}
/* CTA row (primary + optional secondary link) */
.rec-block__ctas{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rec-block__cta--soft{background:transparent;color:#6865e7;padding:9px 4px;}
.rec-block__cta--soft:hover,.rec-block__cta--soft:focus{background:transparent;color:#514ecf;text-decoration:underline;}

/* ============ Review cards (reusable across SEO entry points) ============ */
/* Fed by App\Support\SurfaceReviews via <x-site.reviews>; daily-rotated,
   globally unique across pages. Light-theme public site only. */
.rvw-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .rvw-grid{ grid-template-columns:1fr; } }
.rvw { border:1px solid #e6e9f2; border-radius:12px; background:#fff; padding:16px 18px; display:flex; flex-direction:column; gap:9px; box-shadow:0 1px 2px rgba(30,38,109,.04); }
.rvw__stars { letter-spacing:2px; font-size:.95rem; color:#d8d5e6; line-height:1; }
.rvw__stars .on { color:#f2b01e; }
.rvw__body { margin:0; font-size:.95rem; line-height:1.6; color:#2b3245; }
.rvw__foot { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:4px; }
.rvw__who { font-weight:800; font-size:.9rem; color:#150d15; display:flex; align-items:center; gap:8px; }
.rvw__vf { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#0a7d46; background:#e6f6ed; border:1px solid #b8e6cc; border-radius:999px; padding:2px 7px; }
.rvw__on { font-size:.82rem; color:#8a86a8; text-decoration:none; font-weight:600; }
.rvw__on:hover { color:#6865e7; }

/* ============ Home: fresh listings + reviews (идея 6, 2026-09-12) ============ */
.home-fresh { padding-bottom:0; } /* the following We're-Reedleys section brings its own 90px top gap */
.home-fresh .fresh-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:stretch; }
.fresh-col { display:flex; flex-direction:column; min-width:0; }
.home-fresh .section-head { margin:0 0 26px; text-align:left; max-width:none; }
.fresh-card { flex:1; display:flex; align-items:center; gap:14px; border:1.5px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.fresh-card:hover { border-color:var(--primary); box-shadow:var(--shadow-sm); }
.fresh-card:hover .fresh-card__go { color:var(--primary); transform:translateX(3px); }
.fresh-card__logo { position:relative; width:64px; height:48px; flex:none; border-radius:11px; background:var(--bg-soft); display:grid; place-items:center; color:var(--primary); font-weight:900; font-size:17px; overflow:hidden; }
.fresh-card__logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:11px; }
.fresh-card__logo.is-wide { background:#fff; border:1px solid var(--line); }
.fresh-card__logo.is-wide img { object-fit:contain; padding:5px; box-sizing:border-box; }
.fresh-card__body { min-width:0; flex:1; }
.fresh-card__body b { display:block; color:#150d15; font-size:15.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fresh-card__meta { font-size:13px; color:var(--muted); font-weight:700; }
.fresh-card__tags { display:flex; gap:6px; flex:none; align-items:center; }
.fresh-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:4px 10px; }
.fresh-badge svg { width:11px; height:11px; }
.fresh-badge--rec { color:#0f7a4d; background:#e3f6ec; }
.fresh-badge--ver { color:#2456c9; background:#e6eefc; }
.fresh-badge--new { color:var(--primary-d); background:var(--bg-soft); }
.fresh-card__go { flex:none; width:20px; height:20px; color:#c3c8d8; transition:color .15s ease, transform .15s ease; }
.fresh-card__go svg { width:100%; height:100%; }
.fresh-rev { flex:1; display:flex; flex-direction:column; border:1.5px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:12px; background:#fff; }
.fresh-rev__top { display:flex; align-items:center; gap:8px; }
.fresh-rev__stars { font-size:14px; letter-spacing:2px; color:#d9dce6; }
.fresh-rev__stars .on { color:#f5a623; }
.fresh-rev__score { font-size:12px; font-weight:800; color:#150d15; background:#fdf3e3; border-radius:999px; padding:2px 9px; }
.fresh-rev p { color:#3a3344; font-size:15px; margin:8px 0 6px; }
.fresh-rev__by { font-size:13px; font-weight:700; color:var(--muted); }
.fresh-rev__biz { margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:11px; border-top:1px solid var(--line); margin-top:auto; }
.fresh-rev__biz-logo { position:relative; width:52px; height:38px; flex:none; border-radius:9px; background:var(--bg-soft); display:grid; place-items:center; color:var(--primary); font-weight:900; font-size:15px; overflow:hidden; }
.fresh-rev__biz-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:9px; }
.fresh-rev__biz-logo.is-wide { background:#fff; border:1px solid var(--line); }
.fresh-rev__biz-logo.is-wide img { object-fit:contain; padding:4px; box-sizing:border-box; }
.fresh-rev__biz-name { min-width:0; flex:1; }
.fresh-rev__biz-name b { display:block; color:#150d15; font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fresh-rev__biz-name span { font-size:12.5px; color:var(--muted); font-weight:700; }
.fresh-rev__biz:hover b { color:var(--primary); }
.fresh-rev__biz:hover .fresh-card__go { color:var(--primary); transform:translateX(3px); }
.fresh-rev__biz + .fresh-rev__biz { border-top:0; }
.fresh-more { display:inline-block; margin-top:auto; padding-top:6px; font-weight:800; color:var(--primary); font-size:15px; }
.fresh-more:hover { text-decoration:underline; }
@media (max-width:860px) {
  .home-fresh .fresh-grid { grid-template-columns:1fr; gap:40px; }
  .fresh-card, .fresh-rev { flex:none; }
  .fresh-card__tags { display:none; }
}

/* ============ /about/ (client-approved mockup 2026-09-12) ============ */
.about-who { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.about-who h2 { font-size:34px; margin:0 0 18px; }
.about-who p { margin:0 0 16px; max-width:56ch; }
.about-who p b { color:#150d15; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-stat { background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:26px 24px; text-align:center; box-shadow:var(--shadow-sm); }
.about-stat b { display:block; font-size:34px; font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; }
.about-stat span { font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.about-names { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.about-name { background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:30px 28px; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.about-name:hover { border-color:var(--primary); box-shadow:0 14px 34px rgba(30,38,109,.10); transform:translateY(-3px); }
.about-name__ic { width:48px; height:48px; border-radius:13px; background:var(--bg-soft); display:grid; place-items:center; margin-bottom:18px; }
.about-name__ic svg { width:24px; height:24px; stroke:var(--primary); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.about-name h3 { font-size:19px; margin:0 0 8px; }
.about-name h3 i { font-style:normal; color:var(--primary); }
.about-name p { font-size:15px; margin:0; }
.about-inc { margin:26px 0 0; text-align:center; font-size:14px; color:var(--muted); }
.about-inc b { color:#150d15; }
.about-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset: aboutstep; }
.about-step { position:relative; background:var(--bg-soft); border-radius:18px; padding:56px 24px 26px; }
.about-step::before { counter-increment:aboutstep; content:counter(aboutstep, decimal-leading-zero); position:absolute; top:20px; left:24px; font-size:13px; font-weight:800; letter-spacing:.08em; color:#fff; background:var(--primary); border-radius:999px; padding:4px 12px; }
.about-step h3 { font-size:17px; margin:0 0 8px; }
.about-step p { font-size:14.5px; margin:0; }
.about-step__link { margin-top:8px !important; }
.about-step__link a { font-weight:800; font-size:14px; }
.about-prin { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.about-pr { background:#fff; border-radius:18px; padding:28px; box-shadow:0 8px 24px rgba(30,38,109,.07); }
.about-pr__tick { width:26px; height:26px; border-radius:50%; background:#e3f6ec; display:grid; place-items:center; margin-bottom:14px; }
.about-pr__tick svg { width:13px; height:13px; stroke:#0f7a4d; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.about-pr h3 { font-size:17px; margin:0 0 8px; }
.about-pr p { font-size:14.5px; margin:0; }
/* the tint band runs 150px UNDER the CTA panel below (underlay) */
.about-prin-sec { padding-bottom:240px; }
.about-cta { margin-top:-150px; padding:0 0 90px; }
.about-cta__panel { position:relative; background:#150d15; border-radius:26px; padding:64px 40px; text-align:center; overflow:hidden; }
.about-cta__panel::before { content:""; position:absolute; width:460px; height:460px; border-radius:50%; right:-140px; top:-230px; background:radial-gradient(circle, rgba(104,101,231,.3), transparent 65%); }
.about-cta__panel h2 { color:#fff; font-size:30px; margin:0; position:relative; }
.about-cta__panel p { color:rgba(255,255,255,.75); max-width:560px; margin:14px auto 30px; position:relative; }
.about-cta__btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }
.about-cta__ghost { color:#fff; border:1.5px solid rgba(255,255,255,.35); border-radius:999px; }
.about-cta__ghost:hover { border-color:#fff; color:#fff; }
@media (max-width:980px){ .about-steps { grid-template-columns:1fr 1fr; } }
@media (max-width:900px){
  .about-who { grid-template-columns:1fr; gap:40px; }
  .about-names, .about-prin { grid-template-columns:1fr; }
}
@media (max-width:560px){ .about-steps { grid-template-columns:1fr; } }

/* ============ Header hover unification - HOME ONLY (client 2026-09-13:
   "мы говорили только про главную"). #4D476A = как реально выглядит
   топбарный ховер (rgba(255,255,255,.16) поверх градиента hero). Inner
   pages (site-header--light) keep their original lavender hover. */
.site-header--over .main-nav > ul > li > a:hover { background:#4D476A; color:#fff; }
.site-header--over .main-nav > ul > li > a:hover .nav-il__i { opacity:1; }
.site-header--over .hdrop:hover .hdrop__btn,
.site-header--over .hdrop__btn[aria-expanded="true"] {
  background:#4D476A; color:#fff; border-color:#4D476A; box-shadow:none;
}

/* Home hero wave: PC only - на мобиле прячем (client 2026-09-12). */
@media (max-width:760px) {
  .hero-search .hero__wave { display:none; }
  .postreq-section__wave { display:none; }
}

/* Home fresh blocks: a LOGO is never cropped - contain on white, box sizes
   unchanged (only photos keep object-fit:cover). */
.fresh-card__logo.is-logo { background:#fff; border:1px solid var(--line); }
.fresh-card__logo.is-logo img { object-fit:contain; padding:5px; box-sizing:border-box; }
.fresh-rev__biz-logo.is-logo { background:#fff; border:1px solid var(--line); }
.fresh-rev__biz-logo.is-logo img { object-fit:contain; padding:4px; box-sizing:border-box; }