@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* =====================================================================
   qlWeb V8 — service_pro
   QS single-business · corporate / trust (legal, medical, consulting)
   Confident, structured, squared. Scoped to html[data-template="service_pro"].
   ===================================================================== */

html[data-template="service_pro"] {
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;

  --bg: #f4f6fa;
  --bg-2: #eaeef5;
  --surface: #ffffff;
  --ink: #122340;
  --muted: #54637a;
  --faint: #8593a8;

  --primary: #143a6b;
  --primary-700: #0e2a4f;
  --primary-050: #e8eef7;
  --accent: #0d8a72;
  --accent-700: #0a6e5b;
  --accent-050: #e2f3ef;

  --line: #dce2ec;
  --line-strong: #c6cfdd;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-btn: 5px;

  --shadow-sm: 0 1px 2px rgba(18,35,64,.06);
  --shadow: 0 8px 24px -10px rgba(18,35,64,.22);
  --shadow-lg: 0 20px 48px -18px rgba(18,35,64,.3);

  --maxw: 1200px;
  --gap: 20px;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  overflow-x: clip;

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden; }
  a { color: var(--primary); text-decoration: none; }
  a:hover { color: var(--accent); }
  img { max-width: 100%; display: block; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; color: var(--ink); margin: 0; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  ul { margin: 0; padding: 0; list-style: none; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

  .icon { display: inline-block; line-height: 1; }
  .do_not_disp { display: none !important; }

  /* buttons — squared, corporate */
  .btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1; letter-spacing: .01em; padding: .82em 1.4em; border-radius: var(--radius-btn); border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; }
  .btn:hover { transform: translateY(-2px); }
  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--primary-700); color: #fff; box-shadow: var(--shadow); }
  .btn-ghost { background: transparent; color: var(--primary); border-color: var(--line-strong); }
  .btn-ghost:hover { background: var(--primary-050); border-color: var(--primary); color: var(--primary); }

  .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
  .block-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
  .block-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
  .block-link:hover { gap: .65em; }

  /* remark / utility */
  .remark { font-size: .9rem; padding: 9px 16px; text-align: center; }
  .remark-above-header { background: var(--primary); color: #fff; font-weight: 500; }
  .remark-above-header a { color: #fff; text-decoration: underline; }
  .remark-below-header, .remark-above-footer, .remark-below-footer { background: var(--bg-2); color: var(--muted); border-block: 1px solid var(--line); }
  .remark-sidebar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }

  .site-utility { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--primary-700); color: rgba(255,255,255,.82); }
  .site-utility { padding: 8px 24px; font-size: .82rem; }
  .site-utility > * { max-width: var(--maxw); }
  .site-utility-text { font-weight: 500; }
  .site-utility-links { display: flex; gap: 18px; }
  .site-utility-link { color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: .4em; }
  .site-utility-link:hover { color: #fff; }

  /* header */
  .site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
  .site-header.is-scrolled { box-shadow: var(--shadow-sm); }
  .site-header-inner { display: flex; align-items: center; gap: 18px; max-width: var(--maxw); margin-inline: auto; padding: 16px 24px; transition: padding .2s; }
  .site-header.is-scrolled .site-header-inner { padding-block: 10px; }
  .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
  .brand-name { font-family: var(--font-display); font-weight: 900; font-size: 1.34rem; letter-spacing: -.02em; color: var(--primary); text-transform: uppercase; }
  .brand-name::before { content: ""; display: inline-block; width: 5px; height: 22px; margin-right: 10px; background: var(--accent); transform: translateY(4px); border-radius: 1px; }

  .main-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
  .main-nav-link { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); padding: 9px 13px; border-radius: var(--radius-sm); transition: color .14s, background .14s; }
  .main-nav-link:hover { color: var(--primary); background: var(--primary-050); }

  .header-search { display: flex; align-items: center; min-width: 0; flex: 0 1 250px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 3px 4px 3px 12px; transition: border-color .15s; }
  .header-search:focus-within { border-color: var(--primary); }
  .header-search-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .88rem; color: var(--ink); padding: 7px 4px; }
  .header-search-input:focus { outline: none; }
  .header-search-btn { width: 34px; height: 34px; border: 0; border-radius: var(--radius-btn); background: var(--primary); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
  .header-search-btn:hover { background: var(--accent); }

  .header-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; }

  .layout-main { max-width: var(--maxw); margin-inline: auto; padding: 0 24px; }

  /* ===================== HOME (service_pro) =====================
     Corporate services portal: boxed, structured, navy + teal.
     hero+panel · how-it-works · boxed category grid · featured list ·
     stats band · testimonial · CTA bar. */
  .sp-hero { position: relative; margin: 26px 0 0; border-radius: var(--radius); overflow: hidden; background: var(--primary); color: #fff; isolation: isolate; }
  .sp-hero-media { position: absolute; inset: 0; z-index: -1; background:
      linear-gradient(120deg, var(--primary) 30%, var(--primary-700) 100%),
      radial-gradient(80% 90% at 90% 10%, rgba(13,138,114,.4), transparent 60%); }
  .sp-hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 88% 0%, rgba(13,138,114,.45), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px); }
  .sp-hero-inner { padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 56px); }
  .sp-hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 4vw, 56px); align-items: center; }
  .sp-hero-copy { max-width: 640px; }
  .sp-hero-kicker { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; border-left: 3px solid var(--accent); padding-left: 12px; margin-bottom: 20px; }
  .sp-hero-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1.05; }
  .sp-hero-sub { margin-top: 16px; font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: rgba(255,255,255,.84); max-width: 56ch; }
  .sp-hero-search { display: flex; gap: 0; margin-top: 28px; max-width: min(540px, 100%); background: #fff; border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow-lg); }
  .sp-search-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); padding: 12px 14px; }
  .sp-search-input:focus { outline: none; }
  .sp-search-btn { flex: 0 0 auto; border: 0; border-radius: var(--radius-btn); background: var(--accent); color: #fff; font: inherit; font-family: var(--font-display); font-weight: 700; padding: 0 24px; cursor: pointer; display: inline-flex; align-items: center; gap: .5em; transition: background .15s; }
  .sp-search-btn:hover { background: var(--accent-700); }
  .sp-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 24px; }
  .sp-trust-item { display: inline-flex; align-items: center; gap: .55em; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9); }
  .sp-trust-item .icon { color: var(--accent); font-size: 1.05em; background: rgba(13,138,114,.18); width: 26px; height: 26px; border-radius: var(--radius-btn); display: grid; place-items: center; }

  /* hero side panel — owner CTA box */
  .sp-hero-panel { background: var(--surface); color: var(--ink); border-radius: var(--radius); border-top: 3px solid var(--accent); padding: 26px 24px; box-shadow: var(--shadow-lg); }
  .sp-hero-panel-head { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
  .sp-hero-panel-head .icon { color: var(--accent); }
  .sp-hero-panel-text { margin: 14px 0 20px; font-size: .95rem; color: var(--muted); line-height: 1.6; }
  .sp-hero-panel-link { display: inline-flex; align-items: center; gap: .45em; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--accent); }
  .sp-hero-panel-link:hover { gap: .7em; }

  /* how it works — numbered steps */
  .sp-steps { margin: 56px 0; }
  .sp-steps-head { text-align: center; margin-bottom: 32px; }
  .sp-steps-title { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 900; margin-top: 8px; }
  .sp-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); counter-reset: step; }
  .sp-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px 28px; box-shadow: var(--shadow-sm); overflow: hidden; }
  .sp-step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
  .sp-step-num { position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--primary-050); letter-spacing: -.04em; }
  .sp-step-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--primary-050); color: var(--primary); font-size: 1.3rem; margin-bottom: 18px; }
  .sp-step-name { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
  .sp-step-text { font-size: .94rem; color: var(--muted); line-height: 1.6; }

  /* boxed category grid */
  .sp-services { margin: 56px 0; }
  .sp-svc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 2px solid var(--line); }
  .sp-svc-head .eyebrow { margin-bottom: 6px; }
  .sp-svc-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; position: relative; padding-left: 16px; }
  .sp-svc-title::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 5px; background: var(--accent); border-radius: 1px; }
  .sp-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .sp-svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: transform .16s, box-shadow .16s, border-color .16s; }
  .sp-svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary); }
  .sp-svc-card:not(:has(.sp-svc-list a)) { display: none; }
  .sp-svc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--primary-050); color: var(--primary); font-size: 1.1rem; margin-bottom: 14px; }
  .sp-svc-name { font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .sp-svc-list { display: flex; flex-direction: column; gap: 7px; }
  .sp-svc-list li a, .sp-svc-item { font-size: .9rem; color: var(--muted); display: inline-flex; align-items: center; gap: .5em; transition: color .14s, gap .14s; }
  .sp-svc-list li a::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent); font-size: .8em; }
  .sp-svc-list li a:hover { color: var(--primary); gap: .75em; }

  /* featured providers — vertical list of rows */
  .sp-featured { margin: 56px 0; }
  .sp-feat-list { display: flex; flex-direction: column; gap: 12px; }
  .sp-feat-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 20px 14px 16px; transition: transform .15s, box-shadow .15s, border-color .15s; }
  .sp-feat-row:hover { transform: translateX(3px); box-shadow: var(--shadow); }
  .sp-feat-thumb { position: relative; width: 110px; aspect-ratio: 10/7; border-radius: var(--radius-sm); background-color: var(--bg-2); overflow: hidden; flex: 0 0 auto; }
  .sp-feat-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
  .sp-feat-thumb::before { content: "\f1ad"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-strong); font-size: 1.4rem; }
  .sp-feat-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .sp-feat-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink); line-height: 1.2; }
  .sp-feat-row:hover .sp-feat-name { color: var(--primary); }
  .sp-feat-meta { display: inline-flex; align-items: center; gap: .45em; font-size: .82rem; font-weight: 600; color: var(--accent); }
  .sp-feat-view { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--primary); background: var(--primary-050); padding: 9px 16px; border-radius: var(--radius-btn); white-space: nowrap; transition: background .15s, color .15s, gap .15s; }
  .sp-feat-row:hover .sp-feat-view { background: var(--primary); color: #fff; gap: .75em; }

  /* stats band */
  .sp-stats { margin: 56px 0; background: var(--primary); color: #fff; border-radius: var(--radius); padding: clamp(30px, 4vw, 48px) clamp(24px, 4vw, 48px); text-align: center; position: relative; overflow: hidden; isolation: isolate; }
  .sp-stats::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
      radial-gradient(60% 120% at 50% -10%, rgba(13,138,114,.45), transparent 60%),
      radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1.5px) 0 0 / 26px 26px; }
  .sp-stats-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.9rem); color: #fff; line-height: 1.3; }
  .sp-stats-num { font-weight: 900; color: var(--accent); font-size: 1.15em; }
  .sp-stats-dot { color: rgba(255,255,255,.4); margin: 0 .35em; }
  .sp-stats-sub { margin-top: 12px; font-size: 1rem; color: rgba(255,255,255,.78); }

  /* testimonial / quote */
  .sp-quote { margin: 56px 0; }
  .sp-quote-box { position: relative; max-width: 880px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: clamp(32px, 5vw, 52px); box-shadow: var(--shadow-sm); text-align: center; }
  .sp-quote-mark { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--accent-050); color: var(--accent); font-size: 1.4rem; margin-bottom: 20px; }
  .sp-quote-text { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.45; color: var(--ink); letter-spacing: -.01em; }
  .sp-quote-cite { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; }
  .sp-quote-name { font-family: var(--font-display); font-weight: 800; color: var(--primary); }
  .sp-quote-role { font-size: .85rem; color: var(--muted); }

  /* recently listed — secondary list */
  .sp-recent { margin: 56px 0; }
  .sp-recent-list { display: flex; flex-direction: column; gap: 10px; }
  .sp-recent-row { display: grid; grid-template-columns: minmax(180px, 280px) 1fr auto; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 20px; transition: border-color .15s, box-shadow .15s, transform .15s; }
  .sp-recent-row:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateX(3px); }
  .sp-recent-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
  .sp-recent-row:hover .sp-recent-title { color: var(--primary); }
  .sp-recent-desc { font-size: .9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sp-recent-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-btn); background: var(--primary-050); color: var(--primary); transition: background .15s, color .15s; }
  .sp-recent-row:hover .sp-recent-go { background: var(--accent); color: #fff; }

  /* CTA band — full width bar */
  .sp-cta-band { margin: 56px 0; background: var(--primary); color: #fff; border-radius: var(--radius); padding: clamp(30px, 4vw, 48px) clamp(28px, 5vw, 56px); position: relative; overflow: hidden; }
  .sp-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% -10%, rgba(13,138,114,.45), transparent 60%); }
  .sp-cta-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
  .sp-cta-copy { max-width: 56ch; }
  .sp-cta-title { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 900; color: #fff; }
  .sp-cta-text { margin-top: 10px; font-size: 1.05rem; color: rgba(255,255,255,.85); }
  .sp-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
  .sp-cta-actions .btn-primary { background: var(--accent); }
  .sp-cta-actions .btn-primary:hover { background: var(--accent-700); }
  .sp-cta-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
  .sp-cta-actions .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

  /* generic section head reuse (used by shared pages) */
  .section { margin: 48px 0; }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
  .section-kicker { font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
  .section-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; }
  .section-link { font-weight: 700; font-size: .9rem; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; }

  /* ===================== CATEGORY LISTING ===================== */
  .subcat { margin: 30px 0 50px; }
  .subcat-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-bottom: 16px; }
  .subcat-head { margin-bottom: 18px; padding-left: 16px; border-left: 5px solid var(--accent); }
  .subcat-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; }
  .subcat-desc { margin-top: 8px; color: var(--muted); max-width: 70ch; }
  .subcat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .subcat-nav-link { font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--primary); background: var(--surface); border: 1px solid var(--line-strong); padding: 7px 13px; border-radius: var(--radius-btn); transition: all .14s; }
  .subcat-nav-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

  .subcat-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .87rem; color: var(--muted); margin: 14px 0; }
  .pagging strong { color: var(--primary); }
  .sort { display: flex; align-items: center; gap: 8px; }
  .sort-link { color: var(--accent); font-weight: 700; }

  .listing-list { display: flex; flex-direction: column; gap: 14px; }
  .listing-card { display: grid; grid-template-columns: 190px 1fr; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: transform .16s, box-shadow .16s, border-color .16s; }
  .listing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
  .listing-card.featured { border-left: 4px solid var(--accent); }
  .listing-thumb { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background-color: var(--bg-2); align-self: start; }
  .listing-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
  .listing-thumb::before { content: "\f1ad"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-strong); font-size: 1.4rem; }
  .listing-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .listing-company { font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
  .listing-title { font-size: 1.25rem; font-weight: 800; }
  .listing-title a { color: var(--ink); }
  .listing-title a:hover { color: var(--accent); }
  .listing-card.featured .listing-title::after { content: "\f00c  Verified"; font-family: "Font Awesome 6 Free", var(--font-display); font-weight: 700; margin-left: 10px; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-050); padding: 4px 9px; border-radius: var(--radius-btn); vertical-align: middle; }
  .listing-url { font-size: .85rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4em; }
  .listing-url .icon { color: var(--faint); }
  .listing-desc { font-size: .92rem; color: var(--muted); line-height: 1.55; }
  .listing-addr, .listing-tel, .listing-visits { font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .listing-addr .icon, .listing-tel .icon, .listing-visits .icon { color: var(--accent); }
  .listing-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
  .listing-actions span { display: inline-flex; gap: 16px; flex-wrap: wrap; }
  .listing-detail { font-family: var(--font-display); font-weight: 600; font-size: .87rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4em; }
  .listing-detail:hover { color: var(--accent); }
  .listing-report { font-size: .85rem; color: var(--faint); display: inline-flex; align-items: center; gap: .4em; }
  .listing-report:hover { color: var(--accent); }
  .listing-admin:empty { display: none; }
  .listing-ad { padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); text-align: center; color: var(--faint); font-size: .82rem; background: var(--surface); }
  .be-first { text-align: center; padding: 28px; }

  /* ===================== LISTING DETAIL ===================== */
  .detail { margin: 28px 0 50px; }
  .detail-hero { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--primary); color: #fff; margin-bottom: 22px; }
  .detail-hero-media { position: absolute; inset: 0; background:
      linear-gradient(120deg, var(--primary), var(--primary-700)),
      radial-gradient(70% 90% at 90% 0%, rgba(13,138,114,.4), transparent 60%); opacity: 1; }
  .detail-hero-media::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px); }
  .detail-hero-body { position: relative; z-index: 2; padding: clamp(26px, 4vw, 46px); }
  .detail-logo { width: 76px; height: 76px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); padding: 8px; margin-bottom: 16px; box-shadow: var(--shadow); }
  .detail-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 900; color: #fff; }
  .detail-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
  .detail-meta-item { display: inline-flex; align-items: center; gap: .5em; font-size: .94rem; color: rgba(255,255,255,.88); }
  .detail-meta-item .icon { color: #fff; opacity: .8; }
  .detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
  .detail-actions .btn-primary { background: var(--accent); }
  .detail-actions .btn-primary:hover { background: var(--accent-700); }
  .detail-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
  .detail-actions .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

  .detail-grid { display: grid; grid-template-columns: 1fr 330px; gap: 22px; align-items: start; }
  .detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
  .card-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; padding-left: 14px; border-left: 4px solid var(--accent); }
  .detail-desc { color: var(--muted); line-height: 1.75; }
  .info-dl { margin-top: 18px; }
  .info-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
  .info-row:first-child { border-top: 0; }
  .info-row-label { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .9rem; }
  .info-row-value { color: var(--muted); font-size: .94rem; }
  .detail-video { border-radius: var(--radius-sm); overflow: hidden; }

  .detail-side { position: sticky; top: 92px; }
  .side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
  .side-card-head { background: var(--primary); color: #fff; font-family: var(--font-display); font-weight: 700; padding: 16px 20px; display: flex; align-items: center; gap: .5em; }
  .side-card-head .icon { color: var(--accent); }
  .contact-list { padding: 6px 20px; }
  .contact-list .contact-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--ink); }
  .contact-list .contact-item:last-child { border-bottom: 0; }
  .contact-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--primary-050); color: var(--primary); }
  .social-row { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
  .social-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--bg); color: var(--primary); border: 1px solid var(--line); transition: all .15s; }
  .social-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }

  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 4px; font-size: .82rem; color: var(--faint); }
  .breadcrumb a { color: var(--muted); display: inline-flex; align-items: center; gap: .4em; }
  .breadcrumb a:hover { color: var(--accent); }
  .breadcrumb a .icon { color: var(--accent); font-size: .85em; }
  .breadcrumb-sep { color: var(--faint); }
  .breadcrumb-current { color: var(--ink); font-weight: 600; }
  .detail-hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; z-index: 0; }
  .detail-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,58,107,.55) 0%, rgba(20,58,107,.86) 70%, var(--primary) 100%); }
  .detail-hero.no-shot .detail-hero-overlay { background: radial-gradient(900px 320px at 12% -10%, var(--primary-700), transparent 60%); }
  .detail-hero-top { display: flex; gap: 18px; align-items: flex-start; }
  .detail-hero-head { min-width: 0; }
  .detail-cat-chip { display: inline-flex; align-items: center; gap: .45em; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; }
  .detail-cat-chip .icon { color: #fff; }
  .detail-subtitle { margin-top: 8px; color: rgba(255,255,255,.85); font-size: 1.02rem; }
  .detail-map { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 8; }
  .detail-map iframe { width: 100%; height: 100%; border: 0; display: block; }
  .map-link { display: inline-flex; align-items: center; gap: .5em; margin-top: 14px; font-size: .9rem; font-weight: 600; color: var(--accent); }
  .map-link:hover { text-decoration: underline; }
  .attachment-box img { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
  .attachment-box a { color: var(--accent); font-weight: 600; }
  .deep-links { display: flex; flex-direction: column; gap: 8px; }
  .deep-links a { color: var(--muted); display: inline-flex; align-items: center; gap: .5em; }
  .deep-links a:hover { color: var(--accent); }
  .cta-card { margin-top: 18px; padding: 24px 22px; text-align: center; background: var(--bg-2); }
  .cta-icon { font-size: 1.7rem; color: var(--accent); margin-bottom: 10px; }
  .cta-title { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
  .cta-text { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-bottom: 16px; }
  .detail-ad { margin-top: 18px; }
  .detail-ad:empty { display: none; }
  .btn.w-full { width: 100%; justify-content: center; }
  .btn-lg { font-size: 1rem; padding: .95em 1.7em; }
  .get-listed-cta { margin: 30px 0 10px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--accent); background: linear-gradient(135deg, var(--accent-050) 0%, var(--surface) 60%); }
  .get-listed-inner { padding: clamp(28px, 5vw, 52px); text-align: center; }
  .get-listed-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--ink); margin-bottom: 10px; }
  .get-listed-text { color: var(--muted); font-size: 1.02rem; margin-bottom: 22px; }

  /* ===================== SEARCH ===================== */
  .breadcrumb { margin: 26px 0 12px; font-size: .87rem; }
  .crumb { color: var(--muted); display: inline-flex; align-items: center; gap: .4em; }
  .crumb:hover { color: var(--accent); }
  .search-head { margin-bottom: 22px; padding-left: 16px; border-left: 5px solid var(--accent); }
  .search-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; }
  .search-query { color: var(--accent); }
  .search-cats { margin-bottom: 28px; }
  .search-subhead { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: .5em; }
  .search-subhead .icon { color: var(--accent); }
  .search-cat-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .search-cat { font-size: .88rem; color: var(--primary); background: var(--surface); border: 1px solid var(--line-strong); padding: 8px 15px; border-radius: var(--radius-btn); transition: all .14s; }
  .search-cat:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
  .result-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
  .result-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius-sm); padding: 18px 20px; transition: transform .15s, box-shadow .15s, border-color .15s; }
  .result-card:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); border-left-color: var(--primary); }
  .result-card.featured { border-left-color: var(--accent); }
  .result-title { font-size: 1.18rem; font-weight: 800; margin-bottom: 5px; }
  .result-link { color: var(--ink); }
  .result-link:hover { color: var(--accent); }
  .result-desc { font-size: .92rem; color: var(--muted); line-height: 1.55; margin-bottom: 7px; }
  .result-url, .result-tel { font-size: .84rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4em; margin-right: 18px; }
  .result-url .icon, .result-tel .icon { color: var(--faint); }
  .result-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .result-detail { font-family: var(--font-display); font-weight: 600; font-size: .87rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4em; }
  .result-detail:hover { color: var(--accent); }
  .result-report { font-size: .84rem; color: var(--faint); display: inline-flex; align-items: center; gap: .4em; }

  /* ===================== FORMS / AUTH ===================== */
  .auth { max-width: 640px; margin: 34px auto 50px; }
  .auth.form-wide, .form-wide { max-width: 840px; }
  .auth-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-sm); }
  .auth-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 900; }
  .auth-title-sub { font-size: .55em; font-weight: 600; color: var(--muted); }
  .auth-required { font-size: .85rem; color: var(--muted); margin: 6px 0 22px; }
  .req { color: var(--accent); font-weight: 700; }
  .form { display: flex; flex-direction: column; gap: 2px; }
  .form-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 22px; margin: 0 0 18px; }
  .form-group-title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; padding: 0 6px; color: var(--primary); display: flex; align-items: center; gap: .5em; text-transform: uppercase; letter-spacing: .04em; }
  .field { margin-bottom: 15px; }
  .field-label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .86rem; margin-bottom: 7px; color: var(--ink); }
  .field-input, .field-select, .field-textarea, .field input[type="text"], .field input[type="password"], .field input[type="email"], .field input[type="search"], .field input[type="file"], .field select, .field textarea {
    width: 100%; font: inherit; font-size: .94rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 11px 13px; transition: border-color .15s, box-shadow .15s, background .15s; }
  .field-textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
  .field-input:focus, .field-select:focus, .field-textarea:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px var(--primary-050); }
  .field-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354637a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
  .field-hint { font-size: .82rem; color: var(--faint); margin: 4px 0; line-height: 1.5; }
  .field-check { display: flex; align-items: center; gap: 10px; }
  .field-check input[type="checkbox"], .field-check input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
  .field-check .field-label { margin: 0; font-weight: 500; font-family: var(--font-body); }
  .field-upload .field-input { border: 1px dashed var(--line-strong); background: var(--bg); padding: 16px; }
  .upload-preview { border-radius: var(--radius-sm); border: 1px solid var(--line); }
  .form-tos { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; margin: 4px 0 18px; font-size: .85rem; color: var(--muted); line-height: 1.6; }
  .form-tos-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin-bottom: 8px; color: var(--ink); }
  .form-terms { margin: 4px 0 18px; }
  .captcha-img { display: inline-block; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
  .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
  .form-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; }
  .form-link, .form-back { color: var(--primary); display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
  .form-link:hover, .form-back:hover { color: var(--accent); }
  .form-error:not(:empty) { background: #fdecec; border: 1px solid #d9534f; color: #b23b37; border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: .9rem; font-weight: 500; }
  .form-ad:not(:empty) { margin: 16px 0; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); text-align: center; color: var(--faint); font-size: .82rem; }
  .form-ad.info { background: var(--accent-050); border-style: solid; border-color: var(--accent); color: var(--accent-700); }

  /* ===================== ACCOUNT ===================== */
  .account { margin: 30px 0 50px; }
  .account-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
  .account-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-top: 3px solid var(--accent); }
  .account-user { font-size: 1.35rem; font-weight: 900; display: flex; align-items: center; gap: .5em; }
  .account-user span { color: var(--accent); }
  .account-user .icon { color: var(--primary); }
  .account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .account-action { font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--primary); background: var(--bg); border: 1px solid var(--line-strong); padding: 8px 14px; border-radius: var(--radius-btn); display: inline-flex; align-items: center; gap: .4em; transition: all .14s; }
  .account-action:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
  .account-section-title { font-size: 1.25rem; font-weight: 800; margin: 24px 0 14px; padding-left: 14px; border-left: 4px solid var(--accent); }
  .account-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .account-table thead th { text-align: left; padding: 14px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .account-table .l-sort { color: var(--muted); font-weight: 700; }
  .account-table .l-sort:hover { color: var(--primary); }
  .account-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
  .account-table tbody tr:hover { background: var(--bg); }
  .account-table tbody tr:last-child td { border-bottom: 0; }
  .status { display: inline-block; font-family: var(--font-display); font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-btn); background: var(--accent-050); color: var(--accent-700); text-transform: uppercase; letter-spacing: .04em; }
  .listing-edit-link { font-family: var(--font-display); font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .4em; }

  /* ===================== CMS / NOTICES ===================== */
  .page-content { max-width: 800px; margin: 32px auto 50px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-sm); }
  .page-content p  { margin: .85em 0; }
  .page-content ul { list-style: disc; margin: .7em 0; padding-left: 1.5em; }
  .page-content ol { list-style: decimal; margin: .7em 0; padding-left: 1.7em; }
  .page-content li { display: list-item; margin: .25em 0; }
  .page-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; margin-bottom: 18px; padding-left: 16px; border-left: 5px solid var(--accent); }
  .page-body { color: var(--muted); line-height: 1.75; }
  .page-body p { margin-bottom: 14px; }
  .page-body h2, .page-body h3 { color: var(--ink); margin: 24px 0 10px; }
  .page-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

  .notice { max-width: 720px; margin: 26px auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow-sm); }
  .notice-title { font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: .5em; margin-bottom: 10px; }
  .notice-body { color: var(--muted); line-height: 1.65; }
  .notice-success { border-top: 3px solid var(--accent); }
  .notice-success .notice-title { color: var(--accent-700); }
  .notice-success .notice-title .icon { color: var(--accent); }
  .notice-error { border-top: 3px solid #d9534f; display: flex; align-items: center; gap: .6em; color: #b23b37; }
  .notice-error .icon { color: #d9534f; font-size: 1.3rem; }
  .notice-payment { text-align: center; }
  .listing-body dt { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-top: 12px; }
  .listing-body dd { margin: 2px 0 0; color: var(--muted); }

  /* ===================== FOOTER ===================== */
  .site-footer { margin-top: 56px; background: var(--primary-700); color: rgba(255,255,255,.72); }
  .footer-inner { max-width: var(--maxw); margin-inline: auto; padding: 48px 24px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .footer-col { display: flex; flex-direction: column; gap: 11px; }
  .footer-link { color: rgba(255,255,255,.68); font-size: .9rem; }
  .footer-link:hover { color: #fff; }
  .footer-bottom { max-width: var(--maxw); margin-inline: auto; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; border-top: 1px solid rgba(255,255,255,.12); }
  .footer-copy { font-size: .84rem; color: rgba(255,255,255,.55); }
  .footer-bottom-links { display: flex; gap: 16px; }
  .footer-social { display: flex; gap: 9px; margin-left: auto; }
  .footer-social .social-link { width: 36px; height: 36px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
  .footer-social .social-link:hover { background: var(--accent); border-color: var(--accent); }
  .footer-powered { font-size: .82rem; color: rgba(255,255,255,.78); width: 100%; }
  .footer-powered a { color: #fff; }

  /* reveal */
  &.has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--reveal-delay, 0ms); }
  &.has-js .reveal.revealed { opacity: 1; transform: none; }

  /* responsive */
  @media (max-width: 1000px) {
    .sp-hero-grid { grid-template-columns: 1fr; }
    .sp-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-steps-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-side { position: static; }
  }
  @media (max-width: 1024px) {
    .header-search, .header-cta .btn-ghost { display: none; }
    .nav-toggle { display: grid; place-items: center; }
    .main-nav { position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px); flex-direction: column; align-items: stretch; gap: 4px; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 80px 18px 24px; transform: translateX(100%); transition: transform .26s ease; z-index: 60; }
    &.nav-open .main-nav { transform: translateX(0); }
    .main-nav-link { font-size: 1.05rem; padding: 12px 14px; }
    .site-utility { flex-direction: column; gap: 6px; text-align: center; }
    .listing-card { grid-template-columns: 1fr; }
    .listing-thumb { aspect-ratio: 16/9; }
    .sp-feat-row { grid-template-columns: 90px 1fr; grid-template-areas: "thumb body" "view view"; row-gap: 12px; }
    .sp-feat-thumb { grid-area: thumb; width: 90px; }
    .sp-feat-body { grid-area: body; }
    .sp-feat-view { grid-area: view; justify-content: center; }
    .sp-recent-row { grid-template-columns: 1fr auto; grid-template-areas: "title go" "desc go"; row-gap: 3px; column-gap: 14px; }
    .sp-recent-title { grid-area: title; }
    .sp-recent-desc { grid-area: desc; }
    .sp-recent-go { grid-area: go; align-self: center; }
    .sp-cta-inner { flex-direction: column; align-items: flex-start; }
    .info-row { grid-template-columns: 1fr; gap: 2px; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 22px; }
    .sp-hero-search { flex-wrap: wrap; }
    .sp-search-input { flex-basis: 100%; }
    .sp-search-btn { flex: 1; justify-content: center; padding: 13px; }
  }
  @media (max-width: 700px) {
    .header-cta { display: none; }
  }
  @media (max-width: 480px) {
    .sp-svc-grid { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .sp-svc-head, .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .layout-main { padding-inline: 16px; }
    .site-header-inner { padding: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    &.has-js .reveal { opacity: 1; transform: none; }
  }

  /* ---------- polish pass ---------- */
  & ::selection { background: var(--accent); color: #fff; }
  .sp-hero-media { background:
    linear-gradient(120deg, #14406f 28%, #0e2a4f 100%); }
  .sp-hero-media::after { background:
    radial-gradient(70% 86% at 90% -6%, rgba(13,138,114,.5), transparent 58%),
    radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 26px 26px; }
  .detail-hero-media::after { background:
    radial-gradient(70% 96% at 88% -8%, rgba(13,138,114,.45), transparent 58%),
    radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.5px) 0 0 / 24px 24px; }
  .sp-cta-band::before { background:
    radial-gradient(62% 130% at 50% -14%, rgba(13,138,114,.5), transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1.5px) 0 0 / 26px 26px; }
  .sp-hero-title, .sp-cta-title, .detail-title { letter-spacing: -.03em; }

}

/* Message shown by login, registration and password recovery */
.info {
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,.15);
  background: #fbf6ee;
  color: #6b4a1f;
  font-size: .95rem;
  line-height: 1.5;
}
.info a { color: inherit; text-decoration: underline; }

/* Banner Rotator and Random Site home widgets */
.qlw-widget-section{padding:26px 0}
.qlw-widget-wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.qlw-widget-title{font-size:20px;margin:0 0 14px;color:inherit}
.qlw-banner{text-align:center}
.qlw-banner img{max-width:100%;height:auto}
.qlw-random-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid rgba(128,128,128,.28);border-radius:10px;padding:14px 16px}
.qlw-random-card img{width:150px;max-width:40vw;height:auto;border-radius:6px;flex:0 0 auto}
.qlw-random-title{font-weight:600;font-size:16px;color:inherit;text-decoration:none}
.qlw-random-title:hover{text-decoration:underline}
@media (max-width:600px){.qlw-random-card{justify-content:center;text-align:center}}

/* website home */
.sp-hero-kicker:empty, .sp-hero-title:empty { display: none; }
.sp-hero-panel .contact-block { margin: 6px 0 14px; }