/* ============================================================================
   Public marketing site.

   Kept OUT of app.css deliberately: the fleet rule is that app.css stays
   byte-identical across every app, with the palette living in config +
   head_theme.php. This file adds only the public-site surfaces (mega menu,
   service page, footer) and uses the SAME --sky/--blue/--sky-soft tokens, so it
   re-skins with the palette exactly like the rest of the app.
   ========================================================================= */

:root{
  --wrap:1240px;
  --ink:#101828; --ink-2:#475467; --ink-3:#667085;
  --line-2:#e4e7ec; --bg-2:#f8fafc;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(16,24,40,.06);
  --sh-2:0 4px 12px -2px rgba(16,24,40,.10);
  --sh-3:0 18px 40px -18px rgba(16,24,40,.28);
}

body.site{background:#fff;color:var(--ink);}
body.no-scroll{overflow:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.site .muted{color:var(--ink-3)}
.site h1,.site h2,.site h3,.site h4{color:var(--ink);letter-spacing:-.02em;margin:0}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue)}

/* ---- utility bar ---- */
.site-utility{background:var(--blue-dark);color:#fff;font-size:13px}
.site-utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;height:38px}
.site-utility a{color:rgba(255,255,255,.88);display:inline-flex;align-items:center;gap:6px;margin-right:16px}
.site-utility a:hover{color:#fff}
.site-utility .u-right a{margin:0 0 0 16px}
@media (max-width:768px){ .hide-sm{display:none!important} .site-utility{font-size:12px} }

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line-2);
  transition:box-shadow .18s ease, height .18s ease}
.site-header.shrink{box-shadow:var(--sh-2)}
.site-header .wrap{display:flex;align-items:center;gap:18px;height:68px}
.site-header.shrink .wrap{height:58px}
.burger{display:none;background:none;border:0;font-size:24px;color:var(--ink);padding:6px;cursor:pointer}
.site-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);white-space:nowrap}
.site-brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  font-size:20px;background:linear-gradient(135deg,var(--sky),var(--blue))}
.site-brand .name{font-size:16px;letter-spacing:-.02em;max-width:230px;overflow:hidden;text-overflow:ellipsis}

/* min-width:0 + overflow guard: a nav that grows past the viewport is what
   pushed the whole page into horizontal scroll. The breakpoint below hides it
   entirely, but this makes the failure impossible rather than merely unlikely. */
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0;flex-shrink:1}
.site-nav > .nav-item, .site-nav > .nav-link{flex-shrink:0}
body.site{overflow-x:clip}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:3px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.nav-link:hover{background:var(--sky-soft);color:var(--blue)}
.nav-link i{font-size:16px;opacity:.6}

/* mega menu — opens on hover AND on keyboard focus, never hover-only */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:min(760px,92vw);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:18px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease, transform .16s ease}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(4px)}
/* The rightmost triggers sit close to the viewport edge, so a centred panel
   spills past it and widens the document. Anchor those to the right instead —
   this is geometry, not a scrollbar quirk, so clipping alone would not fix it. */
.nav-item:nth-last-of-type(-n+2) .mega{left:auto;right:0;transform:translateX(0) translateY(8px)}
.nav-item:nth-last-of-type(-n+2):hover .mega,
.nav-item:nth-last-of-type(-n+2):focus-within .mega{transform:translateX(0) translateY(4px)}
.mega-inner{display:grid;grid-template-columns:1fr 232px;gap:18px}
.mega-groups{display:grid;gap:14px}
.mega-group h5{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px;padding:0 11px}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-links a{display:block;padding:9px 11px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px}
.mega-links a:hover{background:var(--sky-soft);color:var(--blue)}
.mega-links a span{display:block;font-weight:600}
.mega-links a small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.mega-all{grid-column:1/-1;font-weight:700!important;color:var(--blue)!important;border-top:1px solid var(--line-2);
  border-radius:0!important;margin-top:6px;padding-top:11px!important}
.mega-promo{background:var(--sky-soft);border-radius:var(--r);padding:16px}
.mega-promo h4{font-size:15px;margin:6px 0 8px}
.mega-promo .price{font-size:13px;color:var(--ink-2);margin:0 0 4px}
.mega-promo .price strong{font-size:19px;color:var(--blue);display:block}
.mega-promo .price small{color:var(--ink-3)}
.mega-promo .muted{font-size:12.5px;margin:0 0 12px}

.site-actions{display:flex;align-items:center;gap:8px;margin-left:14px;flex-shrink:0}

/* The horizontal nav only appears where there is genuinely room for
   brand + 5 mega triggers + 2 buttons. Measured with Inter actually loaded:
   below ~1200px they collide, so the drawer takes over there, not at 1080. */
@media (max-width:1200px){
  .site-nav{display:none}
  .burger{display:block}
  .site-actions{margin-left:auto}
}
@media (max-width:1400px){
  .site-brand .name{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-link{padding:10px 9px;font-size:13.5px}
}
@media (max-width:900px){ .hide-md{display:none!important} }

/* ---- mobile drawer ---- */
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:90;
  transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;
  box-shadow:var(--sh-3)}
.drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:80;opacity:0;visibility:hidden;
  transition:opacity .2s ease}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line-2)}
.drawer-nav{flex:1;min-height:0;overflow-y:auto;padding:8px 10px}
.drawer-nav details{border-bottom:1px solid var(--line-2)}
.drawer-nav summary{padding:13px 8px;font-weight:700;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;font-size:14.5px}
.drawer-nav summary::after{content:"\ea4e";font-family:remixicon;color:var(--ink-3)}
.drawer-nav details[open] summary::after{content:"\ea78"}
.drawer-nav details a{display:block;padding:10px 8px 10px 18px;color:var(--ink-2);font-size:14px}
.drawer-nav details a.all{color:var(--blue);font-weight:700}
.drawer-nav a.flat{display:block;padding:13px 8px;font-weight:700;font-size:14.5px;color:var(--ink);
  border-bottom:1px solid var(--line-2)}
.drawer-foot{padding:14px 16px;border-top:1px solid var(--line-2)}
.btn.block{display:flex;width:100%;justify-content:center}

/* ---- hero ---- */
.hero{background:linear-gradient(165deg,var(--sky-soft) 0%,rgba(255,255,255,.4) 62%,#fff 100%);
  border-bottom:1px solid var(--line-2);padding:56px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.08;margin-bottom:16px}
.hero h1 .accent{background:linear-gradient(120deg,var(--sky),var(--blue));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .sub{font-size:17px;color:var(--ink-2);line-height:1.6;max-width:56ch;margin-bottom:22px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.trust-strip{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.trust-strip b{display:block;font-size:22px;color:var(--ink);letter-spacing:-.02em}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:30px} .hero{padding:36px 0 34px} }

/* lead form card */
.lead-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:24px;
  box-shadow:var(--sh-3)}
.lead-card h3{font-size:19px;margin-bottom:5px}
.lead-card p.muted{font-size:13.5px;margin-bottom:16px}
.lead-card .field{margin-bottom:11px}
.lead-card label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.lead-card input,.lead-card select,.lead-card textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);font:inherit;font-size:15px;background:#fff}
.lead-card input:focus,.lead-card select:focus{outline:none;border-color:var(--sky);
  box-shadow:0 0 0 3px var(--sky-soft)}
.lead-note{font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.5}

/* ---- sections ---- */
.section{padding:56px 0}
.section.tint{background:var(--bg-2)}
.section-head{text-align:center;max-width:720px;margin:0 auto 34px}
.section-head h2{font-size:clamp(24px,3vw,34px);margin:8px 0 10px}
.section-head p{color:var(--ink-2);font-size:16px;line-height:1.6}
.section-head.left{text-align:left;margin-left:0}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:1fr} }

/* service card */
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:20px;transition:border-color .16s, box-shadow .16s, transform .16s}
.svc-card:hover{border-color:var(--sky);box-shadow:var(--sh-2);transform:translateY(-2px)}
.svc-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;
  background:var(--sky-soft);color:var(--blue);margin-bottom:12px}
.svc-card h3{font-size:16px;margin-bottom:6px;line-height:1.3}
.svc-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;flex:1;margin-bottom:14px}
.svc-card .meta{display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid var(--line-2);padding-top:12px}
.svc-card .from{font-size:12px;color:var(--ink-3)}
.svc-card .from b{display:block;font-size:18px;color:var(--blue);letter-spacing:-.02em}
.svc-card .time{font-size:12px;color:var(--ink-3);text-align:right}

/* category tile */
.cat-card{display:block;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px}
.cat-card:hover{border-color:var(--sky);box-shadow:var(--sh-2)}
.cat-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;
  background:var(--sky-soft);color:var(--blue);margin-bottom:12px}
.cat-card i{font-size:26px;color:var(--blue);display:block;margin-bottom:10px}
.cat-card h3{font-size:15.5px;margin-bottom:5px}
.cat-card p{font-size:13px;color:var(--ink-3)}

/* Category accent colours — category_accent() in helpers.php assigns one of
   these deterministically, so the same category is always the same colour on
   the home page tiles, the services listing and a service's own eyebrow/crumb.
   Six variants is enough to tell neighbouring categories apart without turning
   the page into a rainbow; sky is also the plain default so an old template
   that never adds a colour class still renders exactly as before. */
.cat-card.c-teal .ic,.svc-card.c-teal .ic,.c-teal.eyebrow,.c-teal .eyebrow{color:var(--teal)}
.cat-card.c-teal .ic,.svc-card.c-teal .ic{background:var(--teal-soft)}
.cat-card.c-green .ic,.svc-card.c-green .ic,.c-green.eyebrow,.c-green .eyebrow{color:var(--green)}
.cat-card.c-green .ic,.svc-card.c-green .ic{background:var(--green-soft)}
.cat-card.c-amber .ic,.svc-card.c-amber .ic,.c-amber.eyebrow,.c-amber .eyebrow{color:var(--amber)}
.cat-card.c-amber .ic,.svc-card.c-amber .ic{background:var(--amber-soft)}
.cat-card.c-indigo .ic,.svc-card.c-indigo .ic,.c-indigo.eyebrow,.c-indigo .eyebrow{color:var(--indigo)}
.cat-card.c-indigo .ic,.svc-card.c-indigo .ic{background:var(--indigo-soft)}
.cat-card.c-rose .ic,.svc-card.c-rose .ic,.c-rose.eyebrow,.c-rose .eyebrow{color:var(--rose)}
.cat-card.c-rose .ic,.svc-card.c-rose .ic{background:var(--rose-soft)}
.cat-card.c-sky .ic,.svc-card.c-sky .ic,.c-sky.eyebrow,.c-sky .eyebrow{color:var(--blue)}
.cat-card.c-sky .ic,.svc-card.c-sky .ic{background:var(--sky-soft)}
/* .cat-card's plain <i> markup (home page tiles use a bare icon, no .ic chip) */
.cat-card.c-teal>i{color:var(--teal)} .cat-card.c-green>i{color:var(--green)}
.cat-card.c-amber>i{color:var(--amber)} .cat-card.c-indigo>i{color:var(--indigo)}
.cat-card.c-rose>i{color:var(--rose)} .cat-card.c-sky>i{color:var(--blue)}
/* .jump-chip: icon + text pick up the accent; the chip itself stays neutral
   until hovered/active so the row doesn't turn into six clashing pill colours
   at once — the colour is a wayfinding cue on the icon, not a paint job. */
.jump-chip.c-teal i{color:var(--teal)} .jump-chip.c-green i{color:var(--green)}
.jump-chip.c-amber i{color:var(--amber)} .jump-chip.c-indigo i{color:var(--indigo)}
.jump-chip.c-rose i{color:var(--rose)} .jump-chip.c-sky i{color:var(--blue)}
.jump-chip.active{background:var(--bg-2);border-color:var(--ink-2)}

/* Jump nav — a horizontal pill row under the services-listing hero so the page
   reads as "six sections you can jump between", not one long scroll with no
   sense of where you are. Sticky under the site header on desktop; a plain
   scrolling strip on phones (no room to also pin a second bar under the header
   without eating into content). */
.jump-nav{position:sticky;top:68px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);padding:12px 0}
.jump-nav .wrap{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.jump-nav .wrap::-webkit-scrollbar{display:none}
.jump-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line-2);background:#fff;font-size:13.5px;font-weight:700;color:var(--ink-2);
  white-space:nowrap;flex-shrink:0}
.jump-chip:hover{border-color:var(--sky);color:var(--blue)}
.jump-chip i{font-size:15px}
@media (max-width:768px){.jump-nav{top:58px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.step{position:relative;padding:22px 18px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg)}
.step:before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:18px;width:30px;
  height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--sky),var(--blue))}
.step h4{font-size:15px;margin:8px 0 6px}
.step p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* testimonial */
.quote{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px}
.quote .stars{color:#f5a524;font-size:14px;margin-bottom:10px}
.quote p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:14px}
.quote .who{display:flex;align-items:center;gap:11px}
.quote .who .av{width:38px;height:38px;border-radius:50%;background:var(--sky-soft);color:var(--blue);
  display:grid;place-items:center;font-weight:800}
.quote .who b{display:block;font-size:14px}
.quote .who small{color:var(--ink-3);font-size:12.5px}
.verified{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#0d9488}

/* ---- service detail page ---- */
.svc-hero{background:linear-gradient(165deg,var(--sky-soft),#fff);border-bottom:1px solid var(--line-2);
  padding:26px 0 34px}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--ink-3)} .crumbs a:hover{color:var(--blue)}
.svc-layout{display:grid;grid-template-columns:1fr 372px;gap:34px;align-items:start;
  /* Horizontal padding must be RESTATED. This element is `class="wrap svc-layout"`,
     and .wrap's `padding:0 20px` is a shorthand that this shorthand overwrites — so
     writing `34px 0 60px` silently set the side gutters to zero. Invisible on a wide
     screen (max-width + margin:auto supplies the whitespace), but on mobile .wrap is
     full-bleed and every heading and paragraph sat flush against both edges. */
  padding:34px 20px 60px}
@media (max-width:1080px){ .svc-layout{grid-template-columns:1fr} }

.rail{position:sticky;top:96px}
/* Below the two-column breakpoint the rail can't stick to anything (the layout
   is one stacked column), and it sits wherever it falls in the DOM — which was
   dead last, after every section of body text. On a tablet-width screen that
   put "how much and how do I buy" a very long scroll away from the price
   comparison it depends on reading first: `order` moves it to right after the
   hero without touching the markup, so it is the first thing under the fold on
   any narrower-than-desktop device, phone included (on top of, not instead of,
   the fixed bottom action bar those already get). */
@media (max-width:1080px){ .rail{position:static;order:-1;margin-bottom:28px} }
.rail-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  overflow:hidden}
.rail-card .body{padding:20px}
.pkg-tabs{display:flex;background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.pkg-tab{flex:1;padding:12px 8px;text-align:center;font-size:13px;font-weight:700;color:var(--ink-3);
  cursor:pointer;border:0;background:none;border-bottom:2px solid transparent}
.pkg-tab.active{color:var(--blue);background:#fff;border-bottom-color:var(--blue)}
.price-rows{margin:4px 0 14px}
.price-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;
  border-bottom:1px dashed var(--line-2)}
.price-row:last-child{border-bottom:0}
.price-row .lbl{color:var(--ink-2)} .price-row .val{font-weight:600;white-space:nowrap}
.price-row.total{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;font-size:17px;font-weight:800}
.price-row.total .val{color:var(--blue);font-size:20px}
.sample-flag{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:var(--r-sm);
  padding:9px 11px;font-size:12px;line-height:1.5;margin:10px 0}
.addon{display:flex;gap:12px;align-items:flex-start;padding:12px 10px;margin:0 -10px;
  border-top:1px solid var(--line-2);border-radius:12px;cursor:pointer;transition:background .15s}
.addon:first-of-type{border-top:0}
.addon:hover{background:var(--bg-2)}
/* Row highlight when its own checkbox is checked. Progressive enhancement only —
   :has() support is not load-bearing: without it the row just doesn't tint, the
   checkbox itself (below) still shows checked/unchecked clearly either way. */
.addon:has(input:checked){background:var(--sky-soft)}
.addon .a-name{font-size:13.5px;font-weight:600}
.addon .a-desc{font-size:12px;color:var(--ink-3);line-height:1.45}
.addon .a-price{margin-left:auto;font-size:13.5px;font-weight:700;white-space:nowrap}
/* Custom checkbox — a plain browser checkbox is a tiny, easy-to-miss square that
   looked out of place next to every other control on this panel. Same visual
   language as the pill toggle (.tgl): rounded, brand-gradient when on, with a
   drawn checkmark rather than relying on an icon font loading in time. */
.addon input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;
  min-height:0;flex:0 0 auto;margin-top:2px;border-radius:7px;border:2px solid var(--line-2);
  background:#fff;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.addon input[type=checkbox]:hover{border-color:var(--sky)}
.addon input[type=checkbox]:checked{background:linear-gradient(135deg,var(--sky),var(--blue));border-color:var(--blue)}
.addon input[type=checkbox]:checked::after{content:"";position:absolute;left:7px;top:3px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.addon input[type=checkbox]:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

.block{margin-bottom:34px}
.block h2{font-size:22px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.block h2 i{font-size:20px;color:var(--blue)}
.block p{font-size:15px;line-height:1.72;color:var(--ink-2);margin-bottom:12px}
.block ul{margin:0 0 12px 18px} .block li{font-size:15px;line-height:1.7;color:var(--ink-2);margin-bottom:5px}
/* A callout card (.note*) inside a .block must win on its own colour — .block p
   is more specific than .note{color} alone and would otherwise repaint every
   paragraph inside it back to plain body ink. */
.block .note{margin-bottom:0}
.block .note p{color:inherit}

.matrix{width:100%;border-collapse:collapse;font-size:14px}
.matrix th,.matrix td{padding:11px 12px;border-bottom:1px solid var(--line-2);text-align:left}
.matrix th{background:var(--bg-2);font-weight:700;font-size:13px}
.matrix td.tick{text-align:center;width:110px}
.matrix .yes{color:#0d9488;font-size:17px} .matrix .no{color:var(--line-2);font-size:17px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-2);
  border-radius:var(--r);}
.table-scroll table{min-width:640px;margin:0}
/* NOTE on the package table's horizontal scroll (640px table, ~350px phone).
   The last price column is cut mid-number, which reads as a broken layout. Two
   affordances were tried and BOTH are recorded here so they are not retried:
     1. background-gradient scroll shadows — render nothing, because the cells
        paint their own opaque background over the scroller's.
     2. position:sticky on the first column — actively WORSE. Measured: that
        column is 310px inside a 350px scroller, so pinning it covers all three
        tick columns instead of revealing them.
   The table does scroll correctly and no data is unreachable. The real fix is to
   stack the packages as cards under ~720px rather than to decorate the table. */

.doclist{display:grid;gap:9px}
.docitem{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r)}
.docitem i{color:var(--blue);font-size:18px;margin-top:1px}
.docitem b{display:block;font-size:14px} .docitem small{color:var(--ink-3);font-size:12.5px;line-height:1.5}
.docitem .req{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}

.tracker{display:flex;gap:0;overflow-x:auto;padding-bottom:6px}
.tracker .t{flex:1;min-width:150px;position:relative;padding:0 12px}
.tracker .t:before{content:"";position:absolute;top:13px;left:0;right:0;height:2px;background:var(--line-2)}
.tracker .t:first-child:before{left:50%} .tracker .t:last-child:before{right:50%}
.tracker .dot{position:relative;width:28px;height:28px;border-radius:50%;margin:0 auto 10px;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--sky),var(--blue))}
.tracker h5{font-size:13.5px;text-align:center;margin-bottom:4px}
.tracker p{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.45}
.tracker .day{display:block;font-size:11px;color:var(--blue);font-weight:700;text-align:center;margin-top:4px}

.faq{border:1px solid var(--line-2);border-radius:var(--r);margin-bottom:9px;background:#fff;overflow:hidden}
.faq summary{padding:15px 17px;font-weight:650;font-size:15px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\ea4e";font-family:remixicon;color:var(--ink-3);flex-shrink:0}
.faq[open] summary::after{content:"\ea78"}
.faq[open] summary{border-bottom:1px solid var(--line-2)}
.faq .a{padding:15px 17px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius:var(--r-xl);
  padding:40px 28px;text-align:center;color:#fff;box-shadow:var(--sh-3)}
.cta-band h2{color:#fff;font-size:clamp(21px,2.6vw,29px);margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.85);font-size:15.5px;margin-bottom:20px;max-width:56ch;
  margin-left:auto;margin-right:auto}
.cta-band .btn-light{background:#fff;color:var(--blue)}

/* ---- footer ---- */
.site-footer{background:var(--blue-dark);color:rgba(255,255,255,.72);padding:52px 0 26px;margin-top:56px}
.site-footer h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:.01em}
.site-footer a{color:rgba(255,255,255,.72);font-size:13.5px}
.site-footer a:hover{color:#fff}
.foot-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr) 1.2fr;gap:28px}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:8px}
.foot-col.brandcol .site-brand{color:#fff;margin-bottom:12px}
.foot-col.brandcol .muted{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.6}
.socials{display:flex;gap:8px;margin-top:14px}
.socials a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;
  place-items:center;font-size:16px}
.socials a:hover{background:var(--sky);color:#fff}
address{font-style:normal;font-size:13.5px;line-height:1.65;margin-bottom:12px;color:rgba(255,255,255,.72)}
.contact{list-style:none;padding:0;margin:0}
.contact li{margin-bottom:8px;font-size:13.5px;display:flex;gap:7px;align-items:center}
@media (max-width:1100px){ .foot-cols{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .foot-cols{grid-template-columns:repeat(2,1fr);gap:22px} }

.foot-band{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:24px}
.newsletter{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center}
.newsletter p{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:4px}
.nl-form{display:grid;grid-template-columns:1fr auto;gap:9px}
.nl-form input{padding:11px 13px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:14px}
.nl-form input::placeholder{color:rgba(255,255,255,.45)}
.nl-form .consent{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;font-size:11.5px;
  color:rgba(255,255,255,.6);line-height:1.5}
.nl-form .consent input{width:auto;flex-shrink:0;margin-top:2px}
@media (max-width:820px){ .newsletter{grid-template-columns:1fr} .nl-form{grid-template-columns:1fr} }

.trust{display:flex;gap:26px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.58)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.disclaimer{margin-top:22px;font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.5);
  border-left:2px solid rgba(255,255,255,.2);padding-left:12px}
.legal-bar{border-top:1px solid rgba(255,255,255,.14);margin-top:24px;padding-top:18px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
.legal-bar p{margin:0;color:rgba(255,255,255,.5)}
.legal-bar nav{display:flex;gap:16px;flex-wrap:wrap}
.legal-bar a{font-size:12.5px}

/* ---- mobile sticky action bar (blueprint 7.3) ---- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:#fff;
  border-top:1px solid var(--line-2);box-shadow:0 -6px 22px -10px rgba(16,24,40,.3);
  padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:10px 4px;min-height:56px;font-size:11.5px;font-weight:700;color:var(--ink-2)}
.mobile-bar a i{font-size:20px}
.mobile-bar a.primary{background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff}
.mobile-bar.hidden{transform:translateY(110%)}
@media (max-width:900px){
  .mobile-bar{display:flex;transition:transform .18s ease}
  body.site main{padding-bottom:64px}
}

/* ---- cookie banner ---- */
.cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:95;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:16px 18px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  max-width:760px;margin:0 auto}
.cookie-banner p{font-size:13px;color:var(--ink-2);margin:4px 0 0;line-height:1.55}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
@media (max-width:900px){ .cookie-banner{bottom:72px} }

/* ---- misc ---- */
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-2);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--blue)}
.note{background:var(--sky-soft);border-radius:var(--r);padding:14px 16px;font-size:13.5px;
  line-height:1.6;color:var(--blue-dark)}
.note.warn{background:#fffbeb;color:#92400e}
.note.danger{background:#fef2f2;color:#991b1b}
.note.next{background:#f0fdfa;color:#115e59}
.note p{margin:0 0 8px} .note p:last-child{margin-bottom:0}
.note-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.note-head i{font-size:17px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;font-weight:600}
.empty{text-align:center;padding:52px 20px;color:var(--ink-3)}
.empty i{font-size:38px;display:block;margin-bottom:12px;opacity:.4}

/* ---------------------------------------------------------------------------
   min-width:0 on every grid/flex child.

   A grid or flex item defaults to min-width:auto, which means it REFUSES to
   shrink below its content's min-content width. `.table-scroll table` sets
   min-width:640px so the table can scroll inside its own container — but that
   640px propagated up and forced the whole column to 750px at a 375px viewport,
   pushing the entire page into horizontal scroll.

   overflow-x:clip on body HIDES that; it does not fix it. This does.
   -------------------------------------------------------------------------- */
.svc-layout > *, .hero-grid > *, .grid > *, .foot-cols > *, .mega-inner > *,
.mega-groups > *, .newsletter > *, .steps > *, .price-row > *{ min-width:0 }
.table-scroll{ max-width:100% }

/* ---- mobile header: the brand name must not push the actions off-screen ---- */
@media (max-width:560px){
  .site-header .wrap{gap:10px}
  .site-brand .name{max-width:110px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-brand .logo{width:32px;height:32px;font-size:17px;border-radius:9px}
  .site-actions{gap:6px;margin-left:auto}
  .site-actions .btn{padding:8px 11px;font-size:13px}
}
@media (max-width:340px){
  /* Below this the name cannot fit at all; the logo still identifies the site.
     Was 400px, which hid the firm's name on EVERY common phone (360/390/414).
     That threshold was set when the brand string was the full product name;
     with the 110px ellipsis cap above, the name clears the actions with room
     to spare at 360px and up (measured: no collision, no overflow). A
     professional-services site should say whose site it is. */
  .site-brand .name{display:none}
}

/* ==========================================================================
   MOBILE-FIRST REFINEMENT
   Everything below is scoped to phones (or is a bug fix), so the desktop
   composition is unchanged. Written after auditing the live site at 320–414px,
   where the page read as a desktop layout linearised onto a phone: hero and
   section padding were still desktop-scale, so a services page ran to 20,000px
   with large dead bands between sections.
   ========================================================================== */

/* 1 · The `hidden` attribute must actually hide.
   `.cookie-banner{display:flex}` and `[hidden]` have the SAME specificity, and
   the class rule wins on source order — so "Accept all" stored the consent and
   set `hidden`, and the banner stayed on screen. It was not the button that was
   broken. A global guard fixes this element and every future one. */
[hidden]{display:none !important}

/* 2 · Consent as a bottom sheet, not a floating slab that covers the content. */
@media (max-width:720px){
  .cookie-banner{
    left:0; right:0; bottom:0; max-width:none; margin:0;
    border-radius:16px 16px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding:16px 18px calc(16px + env(safe-area-inset-bottom));
    gap:12px; box-shadow:0 -14px 34px -18px rgba(16,24,40,.4);
  }
  body.has-mobile-bar .cookie-banner{ bottom:64px }
  .cookie-actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .cookie-actions .btn{ width:100%; justify-content:center; min-height:44px }
}

/* 3 · Vertical rhythm. The single biggest reason the site felt dated on a phone
   was desktop spacing: 56px section padding plus section-head margins produced
   ~250px of empty band between every block. */
@media (max-width:720px){
  .section{padding:34px 0}
  .hero{padding:26px 0 28px}
  .section-head{margin-bottom:20px}
  .section-head h2{font-size:25px;line-height:1.2;margin:6px 0 8px}
  .section-head p{font-size:15px;line-height:1.55}
  .hero h1{font-size:31px;line-height:1.12;margin-bottom:12px}
  .hero .sub{font-size:15.5px;line-height:1.55;margin-bottom:18px}
  .hero-cta{margin-bottom:18px;gap:8px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center;min-height:48px}
  .block h2{font-size:20px;margin-bottom:10px}
  .grid{gap:12px}
  .trust-strip{gap:16px;font-size:13px}
  .trust-strip b{font-size:19px}
}

/* 4 · Legibility. 11.5–13px copy is fine on a desktop monitor and too small on a
   phone held at arm's length; nothing on a phone should go below 13px. */
@media (max-width:720px){
  .lead-card p.muted,.trust-strip,.crumbs{font-size:13.5px}
  .lead-note{font-size:12.5px;line-height:1.55}
  .lead-card label{font-size:13px}
  .lead-card{padding:18px;border-radius:18px}
  /* 16px inputs: anything smaller makes iOS Safari zoom the page on focus. */
  .lead-card input,.lead-card select,.lead-card textarea{font-size:16px;min-height:48px}
}

/* 5 · Tap targets. The footer and drawer navigation were 16–21px tall — inside
   the 44px minimum that every mobile guideline agrees on. */
@media (max-width:720px){
  .foot-col a,.drawer a,.site-utility a{
    display:flex; align-items:center; min-height:44px; padding:2px 0;
  }
  .foot-cols{gap:10px}
  .foot-col h4{margin-bottom:2px}
  .btn.sm{min-height:40px}
}

/* 6 · Package comparison: table on desktop, cards on phones.
   The table is 640px wide by necessity (4 columns), which inside a ~350px
   viewport cut the last price mid-number. Both views render the same data. */
.pkg-cards{display:none}
@media (max-width:720px){
  .pkg-table{display:none}
  .pkg-cards{display:grid;gap:14px}
  .pkg-card{
    position:relative;background:#fff;border:1px solid var(--line-2);
    border-radius:18px;padding:18px;box-shadow:var(--sh-2);
  }
  .pkg-card.featured{border-color:var(--blue);box-shadow:0 10px 30px -14px rgba(30,58,95,.45)}
  .pkg-flag{
    position:absolute;top:-10px;left:18px;background:var(--blue);color:#fff;
    font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    padding:4px 10px;border-radius:999px;
  }
  .pkg-card h3{font-size:18px;margin:2px 0 2px}
  .pkg-price{font-size:26px;font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1.15}
  .pkg-price small{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:0}
  .pkg-tag{font-size:13.5px;color:var(--ink-2);margin:8px 0 0;line-height:1.5}
  .pkg-list{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2);display:grid;gap:9px}
  .pkg-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink)}
  .pkg-list li.off{color:var(--ink-3)}
  .pkg-list i{flex:none;margin-top:1px;font-size:15px}
  .pkg-list .yes{color:#059669}
  .pkg-list .no{color:var(--ink-3)}
}

/* 7 · Retina finish: keep hairlines hairline on a 2–3x screen rather than
   letting them render as a heavy 2–3px rule. */
@media (max-width:720px) and (-webkit-min-device-pixel-ratio:2){
  .card,.svc-card,.pkg-card,.lead-card,.table-scroll{border-width:.5px}
}

/* 8 · Footer accordions. <details> ships open, so with no JS every link is
   visible exactly as before; the marker and summary chrome are neutralised on
   desktop so an expanded <details> is visually identical to the old <div>. */
.foot-acc > summary{list-style:none;cursor:default}
.foot-acc > summary::-webkit-details-marker{display:none}
.foot-acc > summary i{display:none}
@media (max-width:720px){
  .foot-acc > summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .foot-acc > summary i{display:block;font-size:20px;transition:transform .2s ease;opacity:.75}
  .foot-acc[open] > summary i{transform:rotate(180deg)}
  .foot-acc > summary h4{margin:0}
  .foot-acc > ul{padding:6px 0 10px}
  /* One column. An accordion list side-by-side in a 2-up grid puts a collapsed
     header next to an expanded one and the rows stop lining up; it also leaves a
     dead half-cell wherever a column has no accordion (Reach us). */
  .foot-cols{grid-template-columns:1fr;gap:0}
  .foot-col.brandcol{margin-bottom:8px}
  .foot-col:not(.foot-acc) h4{margin-top:16px}
}

/* 9 · A legibility FLOOR for phones.
   Audited live at 390px: `small`, .verified, .req and .disclaimer were rendering
   at 10.8–11.5px. Secondary metadata at 12–12.5px is fine on a phone; below 12px
   is not, particularly for the legal and "unverified" notes, which are exactly
   the text a reader must not have to squint at. Deliberately a floor and not a
   rescale — the eyebrow/label sizes are a design decision and are left alone. */
@media (max-width:720px){
  .site small,
  .site .disclaimer,
  .site .verified,
  .site .req,
  .site .a-desc,
  .site .sample-flag,
  .site p.muted,
  .site .tracker .day,
  .site .pkg-flag{ font-size:12.5px; line-height:1.5 }

  /* A consent label is the one line a reader must be able to read without
     effort — it was the SMALLEST text on the page at 11.5px. Give it body size
     and a 44px hit area on the checkbox. */
  .site .nl-form .consent,
  .site .consent{ font-size:14px; line-height:1.5; gap:10px }
  .site .consent input[type=checkbox]{ width:22px; height:22px }
}
/* Reassurance under the pay button. Was an INLINE font-size:11.5px, which no
   stylesheet rule can override — the fix has to be at the markup, not in CSS. */
.pay-note{font-size:12.5px;line-height:1.55;margin-top:12px;text-align:center}
@media (max-width:720px){ .pay-note{font-size:13px} }

/* ==========================================================================
   Motion.

   Two mechanisms, both OFF entirely for prefers-reduced-motion: reduce.

   1. Hero entrance — plain CSS keyframes with `both` fill mode, so it runs on
      load with or without JavaScript and can never leave anything stuck.
   2. Scroll reveal on cards — needs JavaScript to know when an element enters
      view, so the hidden starting state ONLY applies once JS confirms it can
      also remove it: `.js-reveal` is added to <html> by the observer script
      below, and every rule here is scoped under it. A blocked or slow script
      leaves every card exactly as visible as it always was — animation is a
      bonus, never a gate content can get stuck behind.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .hero-grid > *,.hero>.wrap>*{animation:revealUp .6s cubic-bezier(.16,1,.3,1) both}
  .hero-grid > *:nth-child(2){animation-delay:.12s}
  @keyframes revealUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  .js-reveal .cat-card,.js-reveal .svc-card,.js-reveal .step,.js-reveal .quote,
  .js-reveal .ld-feature,.js-reveal .pkg-card{
    opacity:0;transform:translateY(20px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);
  }
  .js-reveal .cat-card.in,.js-reveal .svc-card.in,.js-reveal .step.in,.js-reveal .quote.in,
  .js-reveal .ld-feature.in,.js-reveal .pkg-card.in{opacity:1;transform:none}
}

/* Sales mode: what stands in for a price when the firm does not publish one.
   Never an empty cell — a blank where a number belongs reads as a broken page. */
.pkg-price.on-request{font-size:19px;color:var(--ink-2)}
.rail-enquiry{padding:2px 0 4px}
.rail-enquiry p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 8px}
.rail-enquiry p b{color:var(--ink)}

/* Round 3 — timeline disclaimer, section-heading links */
.note.timeline-note{margin-top:14px;background:#f8fafc;color:var(--ink-2,#334155);border:1px dashed var(--line,#e2e8f0)}
.block h2 .h2-link{margin-left:auto;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:2px;text-decoration:none}
.block h2:has(.h2-link){display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Wider header + footer (round 3) — content sections keep --wrap */
:root{--wrap-wide:1440px}
.site-header > .wrap, .site-footer > .wrap{max-width:var(--wrap-wide)}
.more-inner{grid-template-columns:1fr 220px}
.more-links{display:flex;flex-direction:column;gap:2px}
.more-links a{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:6px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.more-links a:hover{background:#fff;color:var(--blue)}
.mega-links a span i{color:var(--blue);margin-right:4px}
.sitemap-page{padding-bottom:40px}
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px}
.sm-col h2{font-size:15px;margin:0 0 8px}
.sm-col h2 + ul{margin-bottom:18px}
.sm-col ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.sm-col a{color:var(--ink-2);font-size:14px}
.sm-col a:hover{color:var(--blue)}
@media (min-width:1101px){ body.ent .site-footer .foot-cols{grid-template-columns:1.5fr repeat(var(--fcols,4),1fr) 1.3fr;gap:24px} }
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.rv-score{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink-2)}
.rv-score .stars{color:#f59e0b}
.rv-filter select{min-width:240px}
.quote .rv-svc{display:inline-flex;gap:4px;align-items:center;font-size:12.5px;font-weight:600;margin:-4px 0 10px}
.note.tool-disclaimer{margin-top:16px;font-size:12.5px;background:#f8fafc;color:var(--ink-2);border:1px dashed var(--line)}
.tool-lead{margin-top:16px;box-shadow:none}
.tool-lead .tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.tool-lead .tl-grid{grid-template-columns:1fr}}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media (max-width:760px){.tool-grid{grid-template-columns:1fr;gap:16px}}

.cap-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cap-chips button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--ink-2)}
.cap-chips button:hover{border-color:var(--blue);color:var(--blue)}

/* ── Content sections (public) ── */
.cs-wrap > * + *{margin-top:18px}
.cs-heading{font-size:22px;margin:26px 0 8px}
.cs h3{font-size:17px;margin:0 0 6px}
.cs-image img,.cs-imgtext img{width:100%;border-radius:12px;display:block}
.cs-image figcaption{font-size:13px;color:var(--ink-3);margin-top:6px;text-align:center}
.cs-imgtext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.cs-frame{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}
.cs-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-quote{margin:0;padding:16px 20px;border-left:4px solid var(--blue);background:var(--sky-soft);border-radius:0 12px 12px 0;font-size:16px}
.cs-quote cite{display:block;margin-top:6px;font-size:13px;font-style:normal;color:var(--ink-3)}
.cs-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:14px;background:linear-gradient(135deg,var(--sky-soft),#fff);border:1px solid var(--line)}
.cs-cta p{margin:0;color:var(--ink-2)}
.block ul,.block ol,.cs ul,.cs ol{padding-left:20px;margin:0 0 10px}
.block li,.cs li{margin:4px 0}
@media (max-width:760px){ .cs-imgtext{grid-template-columns:1fr} }

.blog-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.blog-tags .pill{text-decoration:none}
.blog-tags .pill.on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* star picker (portal + public review link) */
.rv-stars{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rv-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rv-stars label{font-size:24px;color:#d1d5db;cursor:pointer;line-height:1}
.rv-stars.big label{font-size:38px}
.rv-stars input:checked ~ label,.rv-stars label:hover,.rv-stars label:hover ~ label{color:#f59e0b}
.quote .rv-reply{font-size:13px;color:var(--ink-2);background:var(--bg,#f8fafc);border-radius:8px;padding:8px 10px;margin:-2px 0 10px}

.st-msgs{display:grid;gap:10px}
.st-msg{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;font-size:14px;max-width:85%}
.st-msg.mine{margin-left:auto;background:var(--sky-soft)}
.st-msg small{display:block;color:var(--ink-3);font-size:12px;margin-bottom:4px}
.ask-card{margin-top:14px}


/* ── Multi-service cart ─────────────────────────────────────────────── */
.cart-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--sky-50,#eef6ff);
  color:var(--blue);font-weight:700;font-size:13px;text-decoration:none;border:1px solid var(--line-2)}
.cart-pill i{font-size:17px}
.cart-line{border:1px solid var(--line-2);border-radius:12px;padding:14px;margin-bottom:12px;background:#fff}
.cart-line-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cart-svc{font-weight:800;font-size:15px;color:var(--ink);text-decoration:none}
.cart-amt{font-size:16px;color:var(--blue);white-space:nowrap}
.cart-x{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:17px;padding:2px 0 0 8px;vertical-align:middle}
.cart-x:hover{color:#b91c1c}
.cart-break{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink-3);margin-top:6px}
.cart-for{display:flex;align-items:center;gap:10px;margin-top:10px}
.cart-for label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.cart-for select{flex:1;max-width:420px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:13.5px}
.cart-new{display:grid;grid-template-columns:2fr 1.3fr 1fr;gap:8px;margin-top:8px}
.cart-new input,.cart-new select{padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:13.5px;min-width:0}
.cart-groups{list-style:none;padding:0;margin:0}
.cart-groups li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--line-2)}
.cart-groups li span{min-width:0;overflow-wrap:anywhere}
.cart-agree{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;margin-top:14px;padding:10px;border-radius:8px;background:var(--bg-2,#f8fafc)}
.cart-agree input{margin-top:3px}
.cart-agree.need{outline:2px solid #f59e0b}
/* Deductions in the order summary (coupon, gift card, points, credit) and coins earned. */
.cart-rm{border:0;background:none;padding:0 0 0 6px;font:inherit;font-size:11.5px;color:var(--ink-3);text-decoration:underline;cursor:pointer}
.cart-rm:hover{color:#b91c1c}
.cart-coins{color:#92400e}
.ck-credit-msg{font-size:12px;margin:6px 0 0}
.price-row .lbl small{font-weight:500}
@media (max-width:640px){
  .cart-new{grid-template-columns:1fr}
  .cart-for{flex-direction:column;align-items:stretch;gap:4px}
  .cart-for select{max-width:none}
}

/* Two secondary actions side by side under the main buy button. */
.rail-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.rail-pair .btn{justify-content:center;padding-left:8px;padding-right:8px;white-space:nowrap}
/* A sticky rail taller than the window could never show its bottom (the buy
   buttons) until the page ended; let it scroll on its own instead. */
@media (min-width:1081px){
  .rail{max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    padding:0 6px 10px;margin:0 -6px}
}

/* On the cart the summary (with the pay button) follows the services it totals. */
@media (max-width:1080px){ .cart-page .rail{order:0;margin-bottom:0} }

/* Home "Due this month" filters */
.due-filters{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;margin:-6px 0 16px}
.due-chips{display:flex;flex-wrap:wrap;gap:6px}
.due-chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.due-chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.due-toggles{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:var(--ink-2)}
.due-toggles label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.due-mine{font-weight:700;color:var(--blue)}
.due-card.past{opacity:.72}
.due-industry{padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:13px;background:#fff}

/* ═══ Community forum (/community) ═══════════════════════════════════════ */
.cm-hero{background:var(--bg-2);border-bottom:1px solid var(--line-2);padding:26px 0 22px}
.cm-hero h1{font-size:clamp(24px,3.2vw,34px);margin:2px 0 6px;line-height:1.15}
.cm-hero .sub{color:var(--ink-2);font-size:15px;line-height:1.55;max-width:720px;margin:0}
.cm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.cm-search{display:flex;flex:1 1 260px;max-width:520px;background:#fff;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.cm-search:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.cm-search input{flex:1;border:0;padding:10px 16px;font:inherit;font-size:14px;min-width:0;outline:none;background:transparent}
.cm-search button{border:0;background:transparent;padding:0 14px;color:var(--ink-3);cursor:pointer;font-size:18px}
.cm-iconlink{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font-size:18px}
.cm-iconlink:hover{border-color:var(--sky);color:var(--blue)}
.cm-iconlink .dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#d92d20;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.cm-main{padding:26px 0 56px}
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media (max-width:960px){.cm-grid{grid-template-columns:minmax(0,1fr)}}
.cm-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:18px}
.cm-card > h2,.cm-card > h3{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.cm-card > h2 i,.cm-card > h3 i{color:var(--blue)}
.cm-boards{display:grid;gap:12px;margin-bottom:22px}
.cm-board{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;color:inherit;transition:border-color .15s,box-shadow .15s}
.cm-board:hover{border-color:var(--sky);box-shadow:var(--sh-2)}
.cm-board .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--sky-soft);color:var(--blue)}
.cm-board h3{font-size:16px;margin:0 0 3px}
.cm-board p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.cm-board .latest{font-size:12.5px;color:var(--ink-3);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-board .stats{display:flex;gap:16px;font-size:12px;color:var(--ink-3);text-align:center}
.cm-board .stats b{display:block;font-size:17px;color:var(--ink)}
@media (max-width:640px){.cm-board{grid-template-columns:40px minmax(0,1fr)}.cm-board .stats{grid-column:2;text-align:left}.cm-board .stats b{display:inline;font-size:14px;margin-right:4px}}
.cm-flag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#f2f4f7;color:var(--ink-2);white-space:nowrap}
.cm-flag.q{background:var(--sky-soft);color:var(--blue-dark)}
.cm-flag.ok{background:#ecfdf3;color:#067647}
.cm-flag.pin{background:#fffaeb;color:#b54708}
.cm-flag.warn{background:#fef3f2;color:#b42318}
.cm-list{list-style:none;margin:0;padding:0}
.cm-topic{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line-2);align-items:center}
.cm-topic:last-child{border-bottom:0}
.cm-topic .t{font-weight:700;color:var(--ink);font-size:15px;line-height:1.4}
.cm-topic .t:hover{color:var(--blue)}
.cm-topic.unread .t::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sky);margin-right:8px;vertical-align:2px}
.cm-meta{font-size:12.5px;color:var(--ink-3);margin-top:5px;display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.cm-meta a{color:var(--ink-3)} .cm-meta a:hover{color:var(--blue)}
.cm-counts{display:flex;gap:16px;font-size:11.5px;color:var(--ink-3);text-align:center}
.cm-counts b{display:block;font-size:15px;color:var(--ink)}
.cm-counts .solved b{color:#067647}
@media (max-width:560px){.cm-topic{grid-template-columns:minmax(0,1fr)}.cm-counts{justify-content:flex-start}}
.cm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.cm-tabs a{padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);background:#fff}
.cm-tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cm-tagcloud{display:flex;flex-wrap:wrap;gap:6px}
.cm-tag{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;padding:4px 10px;border-radius:999px;background:#f2f4f7;color:var(--ink-2)}
.cm-tag:hover{background:var(--sky-soft);color:var(--blue)}
.cm-tag small{color:var(--ink-3)}
.cm-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cm-head-row h1{font-size:clamp(22px,3vw,30px);line-height:1.2;margin:0}
.cm-post{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--line-2);scroll-margin-top:90px}
.cm-post.first{border-top:0;padding-top:4px}
.cm-post:target > .cm-post-main{box-shadow:0 0 0 3px var(--sky-soft);border-radius:12px}
.cm-vote{display:flex;flex-direction:column;align-items:center;gap:3px}
.cm-vote form{margin:0}
.cm-vote button{border:1px solid var(--line-2);background:#fff;border-radius:10px;width:40px;height:36px;cursor:pointer;font-size:18px;color:var(--ink-2);display:grid;place-items:center}
.cm-vote button:hover{border-color:var(--sky);color:var(--blue)}
.cm-vote button.on{background:var(--sky-soft);border-color:var(--blue);color:var(--blue)}
.cm-vote button[disabled]{cursor:default;opacity:.55}
.cm-vote b{font-size:15px}
.cm-vote .acc{color:#067647;font-size:24px;margin-top:4px}
.cm-post-main{min-width:0}
.cm-author{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-bottom:8px}
.cm-author a{color:var(--ink);font-weight:700}
.cm-av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:var(--sky-soft);color:var(--blue);font-weight:800;font-size:12px;flex:0 0 auto}
.cm-av.team{background:var(--blue);color:#fff}
.cm-team{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--blue);color:#fff}
.cm-rep{font-size:12px;color:var(--ink-3)}
.cm-body{font-size:15px;line-height:1.7;color:var(--ink-2);overflow-wrap:anywhere}
.cm-body > :last-child{margin-bottom:0}
.cm-body p{margin:0 0 10px}
.cm-body pre{background:#0b1220;color:#e6edf6;padding:12px;border-radius:10px;overflow:auto;font-size:13px}
.cm-body code{background:#f2f4f7;padding:1px 5px;border-radius:5px;font-size:.92em}
.cm-body pre code{background:none;padding:0;color:inherit}
.cm-body blockquote{border-left:3px solid var(--line-2);margin:0 0 10px;padding:2px 12px;color:var(--ink-3)}
.cm-body ul,.cm-body ol{margin:0 0 10px 20px}
.cm-body a{color:var(--blue);text-decoration:underline}
.cm-body h1,.cm-body h2,.cm-body h3,.cm-body h4{font-size:16px;margin:14px 0 8px}
.cm-body table{border-collapse:collapse;margin:0 0 10px;font-size:14px}
.cm-body td,.cm-body th{border:1px solid var(--line-2);padding:5px 8px}
.cm-answered-by{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;margin:0 6px 8px 0}
.cm-answered-by.acc{color:#067647;background:#ecfdf3}
.cm-answered-by.team{color:var(--blue-dark);background:var(--sky-soft)}
.cm-post.team-reply > .cm-post-main{background:#f7fbff;border:1px solid var(--sky-soft);border-radius:12px;padding:12px 14px}
.cm-post.is-pending > .cm-post-main,.cm-post.is-hidden > .cm-post-main{opacity:.78;border:1px dashed #fda29b;border-radius:12px;padding:10px 12px}
.cm-children{margin-top:12px;border-left:2px solid var(--line-2);padding-left:14px}
.cm-children .cm-post{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px dashed var(--line-2)}
.cm-children .cm-post:first-child{border-top:0}
.cm-children .cm-vote button{width:32px;height:30px;font-size:15px}
.cm-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;align-items:center}
.cm-actions form{display:inline;margin:0}
.cm-actions button,.cm-actions a,.cm-actions summary{background:none;border:0;padding:0;color:var(--ink-3);cursor:pointer;font:inherit;font-size:12.5px;display:inline-flex;gap:4px;align-items:center}
.cm-actions button:hover,.cm-actions a:hover,.cm-actions summary:hover{color:var(--blue)}
.cm-actions details{position:relative}
.cm-actions summary{list-style:none}
.cm-actions summary::-webkit-details-marker{display:none}
.cm-pop{position:absolute;z-index:20;top:24px;left:0;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--sh-3);padding:12px;width:min(340px,82vw)}
.cm-pop textarea,.cm-pop input,.cm-pop select{width:100%;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:13.5px;margin-bottom:8px}
.cm-form label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:14px 0 5px}
.cm-form input[type=text],.cm-form input:not([type]),.cm-form select,.cm-form textarea{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:14px;background:#fff}
.cm-form input:focus,.cm-form select:focus,.cm-form textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.cm-form textarea{min-height:140px;resize:vertical;line-height:1.55}
.cm-form .hint{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.5}
.cm-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.cm-form .row2{grid-template-columns:1fr}}
.cm-choice{display:flex;gap:8px;flex-wrap:wrap}
.cm-choice label{margin:0;display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--ink)}
.cm-choice input{width:auto}
.cm-share{display:flex;gap:8px;flex-wrap:wrap}
.cm-share a,.cm-share button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.cm-share a:hover,.cm-share button:hover{border-color:var(--sky);color:var(--blue)}
.cm-mod{background:#fffaeb;border:1px solid #fedf89;border-radius:12px;padding:8px 10px;margin:8px 0 2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#93370d}
.cm-mod form{display:inline-flex;gap:4px;margin:0}
.cm-mod button,.cm-mod select{font:inherit;font-size:12px;padding:4px 9px;border-radius:7px;border:1px solid #fedf89;background:#fff;cursor:pointer;color:var(--ink-2)}
.cm-notice{padding:10px 14px;border-radius:12px;font-size:13.5px;margin-bottom:14px;background:#f2f4f7;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start}
.cm-notice.warn{background:#fffaeb;color:#93370d}
.cm-notice.ok{background:#ecfdf3;color:#05603a}
.cm-badges{display:flex;flex-wrap:wrap;gap:8px}
.cm-bdg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:#f2f4f7;color:var(--ink-2)}
.cm-bdg i{color:#b54708}
.cm-bdg.team i,.cm-bdg.expert i{color:var(--blue)}
.cm-profile-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cm-profile-head .cm-av{width:64px;height:64px;font-size:24px}
.cm-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.cm-stat div{background:var(--bg-2);border-radius:12px;padding:12px;text-align:center}
.cm-stat b{display:block;font-size:20px;color:var(--ink)}
.cm-stat span{font-size:12px;color:var(--ink-3)}
.cm-inbox li{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.cm-inbox li:last-child{border-bottom:0}
.cm-inbox li.new b{color:var(--ink)}
.cm-inbox li.new .ic{background:var(--blue);color:#fff}
.cm-inbox .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f2f4f7;color:var(--ink-3);flex:0 0 auto}
.cm-inbox b{font-weight:600;color:var(--ink-2);font-size:14px;display:block}
.cm-inbox small{color:var(--ink-3);font-size:12px}
.cm-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.cm-pager a{padding:6px 12px;border:1px solid var(--line-2);border-radius:8px;font-size:13px;color:var(--ink-2)}
.cm-pager a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cm-empty{text-align:center;padding:36px 16px;color:var(--ink-3)}
.cm-empty i{font-size:34px;display:block;margin-bottom:10px;opacity:.45}
.cm-side .cm-card{padding:16px 18px}
.cm-side ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cm-side li a{color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.4}
.cm-side li a:hover{color:var(--blue)}
.cm-side li small{display:block;color:var(--ink-3);font-size:12px;font-weight:400;margin-top:2px}
.cm-rules{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0;padding-left:18px}
.cm-svc{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px 18px;background:#fff}
.cm-svc ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.cm-svc li a{font-weight:600;color:var(--ink);font-size:14.5px}
.cm-svc li a:hover{color:var(--blue)}
.cm-svc li small{color:var(--ink-3);font-size:12.5px;margin-left:6px}
@media (max-width:640px){.cm-stat{grid-template-columns:repeat(2,1fr)}.cm-post{grid-template-columns:38px minmax(0,1fr);gap:10px}.cm-vote button{width:34px;height:32px;font-size:16px}.cm-card{padding:16px}}

/* ═══ Consultation booking (/book-consultation, /book/{type}, /consultation/{ref}) ═══ */
.bk-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.bk-type{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;color:inherit;transition:border-color .15s,box-shadow .15s}
.bk-type:hover{border-color:var(--sky);box-shadow:var(--sh-2)}
.bk-type h3{font-size:16.5px;margin:0}
.bk-type p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0;flex:1}
.bk-facts{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--ink-3)}
.bk-facts span{display:inline-flex;align-items:center;gap:5px}
.bk-price{font-weight:800;color:var(--blue);font-size:15px}
.bk-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media (max-width:900px){.bk-layout{grid-template-columns:minmax(0,1fr)}.bk-layout aside{order:-1}}
.bk-summary{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px;background:var(--bg-2);position:sticky;top:90px}
@media (max-width:900px){.bk-summary{position:static}}
.bk-summary h2{font-size:17px;margin:0 0 6px}
.bk-summary p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 10px}
.bk-summary .bk-facts{flex-direction:column;gap:6px;font-size:13px}
.bk-step{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:20px 0 8px}
.bk-step:first-child{margin-top:0}
.bk-dates{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.bk-date{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:58px;padding:8px 6px;border:1px solid var(--line-2);border-radius:12px;background:#fff;font:inherit;cursor:pointer;color:var(--ink)}
.bk-date small{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.bk-date b{font-size:18px}
.bk-date:hover{border-color:var(--sky)}
.bk-date.on{background:var(--blue);border-color:var(--blue);color:#fff}
.bk-date.on small{color:rgba(255,255,255,.85)}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;min-height:44px}
.bk-slot{padding:10px 6px;border:1px solid var(--line-2);border-radius:10px;background:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);text-align:center}
.bk-slot small{display:block;font-size:11px;font-weight:500;color:var(--ink-3)}
.bk-slot:hover{border-color:var(--sky)}
.bk-slot.on{background:var(--blue);border-color:var(--blue);color:#fff}
.bk-slot.on small{color:rgba(255,255,255,.85)}
.bk-tz{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.bk-chosen{font-size:14px;font-weight:700;color:var(--blue);margin-top:8px;min-height:20px}
.bk-cal{display:flex;flex-wrap:wrap;gap:8px}
.bk-cal a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;color:var(--ink-2);background:#fff}
.bk-cal a:hover{border-color:var(--sky);color:var(--blue)}
.bk-when{font-size:clamp(18px,2.4vw,22px);font-weight:800;color:var(--ink);margin:6px 0 4px}
.bk-kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:6px 12px;font-size:14px;margin:12px 0}
.bk-kv dt{color:var(--ink-3)}
.bk-kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:520px){.bk-kv{grid-template-columns:1fr}.bk-kv dd{margin-bottom:6px}}

/* ---- catalogue: homepage services carousel ---- */
.car-sec{padding-bottom:8px}
.car-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.car-head h2{font-size:clamp(22px,2.6vw,30px);margin-top:6px}
.car-nav{display:flex;gap:8px;flex:none}
.car-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-size:20px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-1)}
.car-btn:hover{border-color:var(--sky);color:var(--blue)}
.car-btn:focus-visible,.car-view:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}
.car-view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--r);
  overscroll-behavior-x:contain;padding:4px 2px 10px}
.car-view::-webkit-scrollbar{display:none}
.car-track{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.car-slide{flex:0 0 clamp(240px,calc((100% - 48px)/4),320px);scroll-snap-align:start;display:flex}
.car-slide .svc-card{width:100%}
@media (max-width:900px){.car-slide{flex-basis:calc((100% - 16px)/2)}}
@media (max-width:560px){.car-slide{flex-basis:82%}.car-nav{display:none}}
@media (prefers-reduced-motion:reduce){.car-view{scroll-behavior:auto}}

/* ---- catalogue: government fee working (price panel, checkout, fee table) ---- */
.gf-lines{margin:2px 0 6px;padding:8px 10px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:12.5px}
.gf-line+.gf-line{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}
.gf-head{display:flex;justify-content:space-between;gap:10px;color:var(--ink)}
.gf-head b{white-space:nowrap}
.gf-work{list-style:none;margin:6px 0 0;padding:0 0 0 10px;border-left:2px solid var(--line-2)}
.gf-work li{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2);line-height:1.45;padding:2px 0}
.gf-work li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.gf-note{margin:6px 0 0;color:var(--ink-3);font-size:12px;line-height:1.45}
.matrix .gf-work{margin:8px 0 6px;font-size:13px}
.gf-missing{margin:4px 0 8px;font-size:12.5px;color:#b45309;display:flex;gap:6px;align-items:flex-start}

/* ---- catalogue: bundles, preview banner, proof counts, review summary ---- */
.pkg-bundle{display:inline-flex;gap:4px;align-items:center;margin-left:6px;font-size:11.5px;font-weight:700;color:var(--blue);
  background:rgba(37,99,235,.08);border-radius:999px;padding:2px 8px;white-space:nowrap}
.pkg-bundle a{color:inherit;text-decoration:underline}
.pkg-bundle-items{display:block;margin-top:4px;font-size:12px;color:var(--ink-3);line-height:1.45}
.svc-preview{background:#fffbeb;border-bottom:1px solid #fde68a;color:#92400e;font-size:13.5px;padding:10px 0}
.svc-preview .wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.svc-preview a{color:inherit;text-decoration:underline;font-weight:700}
a.svc-proof{color:inherit;text-decoration:none}
a.svc-proof:hover{text-decoration:underline}
.rv-summary{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:4px 0 16px;padding:14px 16px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--bg-2)}
.rv-score{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:120px}
.rv-score b{font-size:34px;line-height:1;color:var(--ink)}
.rv-score .stars{color:#f5a524;font-size:15px}
.rv-score small{color:var(--ink-3);font-size:12.5px}
.rv-bars{list-style:none;margin:0;padding:0;flex:1;min-width:200px;max-width:380px}
.rv-bars li{display:grid;grid-template-columns:34px 1fr 28px;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-2);padding:2px 0}
.rv-bars li i{color:#f5a524}
.rv-bar{height:7px;border-radius:999px;background:var(--line-2);overflow:hidden}
.rv-bar i{display:block;height:100%;background:#f5a524;border-radius:999px}
.rv-bars li span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.pkg-list.pkg-single{list-style:none;margin:4px 0 0;padding:0;border:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px 18px}
.pkg-single li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink)}
.pkg-single li>i{color:#12b76a;margin-top:2px}
@media (max-width:640px){.cm-pop{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:70vh;overflow:auto}}