/* Hamov — main stylesheet (one file for the whole site)
   Navy + off-white, sections alternate dark / light, orange for buttons only. */

:root {
  --navy: #13213F;
  --navy-2: #1B2B4E;
  --navy-line: #2A3B62;
  --navy-line-2: #3A4C75;
  --on-navy: #E9EEF7;
  --on-navy-muted: #B7C2D8;
  --paper: #FAF7F2;
  --paper-2: #F3EEE6;
  --paper-line: #E7E0D4;
  --white: #FFFFFF;
  --ink: #13213F;
  --muted: #4E5872;
  --muted-2: #626B82;
  --orange: #F28C28;
  --orange-hover: #E07A16;
  --orange-text: #A44F08;
  --green: #1E8E5A;
  --star: #E8A317;
  --radius: 16px;
  --radius-sm: 10px;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 10px 30px rgba(10, 20, 40, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-text); }
a:hover { color: #7E3C05; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { margin: 0; color: inherit; }
h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.07; letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; font-weight: 800; }
h3 { font-size: 16px; line-height: 1.35; font-weight: 700; }
p { margin: 0; }
html[lang="hy"] h1, html[lang="hy"] h2 { letter-spacing: -.01em; line-height: 1.2; }
html[lang="hy"] h1 { font-size: clamp(28px, 3.4vw, 44px); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap, .wrap-narrow { padding: 0 16px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--orange); color: var(--navy); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Sections ---------- */
.sec { padding: 80px 0; }
.sec-dark { background: var(--navy); color: var(--on-navy); }
.sec-light { background: var(--paper); color: var(--ink); }
.sec-soft { background: var(--paper-2); color: var(--ink); }
@media (max-width: 600px) { .sec { padding: 56px 0; } }

.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.sec-dark .eyebrow { color: var(--orange); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--white); }
.lead { font-size: 17px; color: var(--muted); max-width: 34em; }
.sec-dark .lead { color: var(--on-navy-muted); }
.muted { color: var(--muted); }
.sec-dark .muted { color: var(--on-navy-muted); }
.small { font-size: 13px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 28px; }
.sec-head p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.sec-dark .sec-head p:not(.eyebrow) { color: var(--on-navy-muted); }
.link-arrow { font-weight: 600; font-size: 14px; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.sec-dark .link-arrow, .sec-dark a.link-arrow { color: var(--orange); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 700 15px/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-orange { background: var(--orange); color: var(--navy); }
.btn-orange:hover { background: var(--orange-hover); color: var(--navy); }
.btn-line { border-color: #D8D0C2; color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.sec-dark .btn-line, .btn-line.on-dark { border-color: var(--navy-line-2); color: var(--white); }
.sec-dark .btn-line:hover, .btn-line.on-dark:hover { border-color: var(--on-navy-muted); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-2); color: var(--white); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); border-bottom: 1px solid var(--navy-line); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--white); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.logo:hover { color: var(--white); }
.logo-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--orange); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav a { display: block; white-space: nowrap; padding: 8px 12px; border-radius: 8px; color: var(--on-navy-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:hover { color: var(--white); background: var(--navy-2); }
.nav a[aria-current="page"] { color: var(--white); background: var(--navy-2); }
.header-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lang { display: flex; border: 1px solid var(--navy-line-2); border-radius: 8px; overflow: hidden; }
.lang a { min-width: 40px; padding: 7px 10px; text-align: center; color: var(--on-navy-muted); text-decoration: none; font-size: 12px; font-weight: 600; }
.lang a:hover { color: var(--white); }
.lang a[aria-current="true"] { background: var(--navy-line); color: var(--white); }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--navy-line-2); background: transparent; color: var(--white); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; }
.nav .mobile-only { display: none; }

@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .header-cta { display: none; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-bottom: 1px solid var(--navy-line); display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; padding: 8px 16px 20px; }
  .nav a { font-size: 16px; padding: 12px; }
  .nav .mobile-only { display: block; margin-top: 8px; }
}
@media (max-width: 400px) { .logo-text { display: none; } }

/* ---------- Home hero ---------- */
.hero { padding: 44px 0 52px; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.pill { display: inline-flex; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--navy-line-2); color: var(--orange); font-size: 13px; font-weight: 600; }
.ticks-inline { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--on-navy-muted); }
.ticks-inline li { display: flex; align-items: center; gap: 6px; }
.ticks-inline svg { width: 15px; height: 15px; color: var(--orange); }

.hero-visual { flex: 1 1 460px; min-width: 0; position: relative; min-height: 460px; }
.hero-photo { position: absolute; inset: 0 0 0 70px; margin: 0; border-radius: 20px; overflow: hidden; background: var(--navy-2); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 33, 63, .35), rgba(19, 33, 63, 0) 45%); }
.float { position: absolute; z-index: 2; background: var(--white); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
.float-phone { left: 0; top: 36px; width: 196px; border: 6px solid var(--navy-line-2); border-radius: 24px; overflow: hidden; }
.float-phone .ph-img { height: 112px; overflow: hidden; }
.float-phone .ph-img img { width: 100%; height: 100%; object-fit: cover; }
.float-phone .ph-body { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.ph-name { font-weight: 700; font-size: 14px; }
.ph-sub { font-size: 11px; color: var(--muted-2); }
.ph-btn { display: flex; justify-content: center; padding: 8px; border-radius: 8px; background: var(--navy); color: var(--orange); font-size: 12px; font-weight: 700; }
.ph-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ph-row span { text-align: center; padding: 6px; border-radius: 8px; border: 1px solid #D8D0C2; font-size: 11px; font-weight: 600; }
.float-maps { right: 18px; top: 22px; width: 220px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.fm-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted-2); }
.fm-label svg { width: 14px; height: 14px; color: var(--orange-text); }
.fm-name { font-weight: 700; font-size: 14px; }
.fm-stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }
.fm-open { font-size: 11px; font-weight: 600; color: var(--green); }
.float-report { right: 18px; bottom: 22px; width: 236px; padding: 14px; }
.fr-top { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.fr-top span:last-child { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; }
.bars span { flex: 1; border-radius: 4px; background: #FCE3C8; }
.bars span:nth-child(n+3) { background: #F5A55A; }
.bars span:last-child { background: var(--navy); }
@media (max-width: 760px) {
  .hero { padding: 40px 0 56px; }
  .hero-visual { min-height: 340px; }
  .hero-photo { inset: 0; }
  .float-phone, .float-report { display: none; }
  .float-maps { left: 14px; right: auto; top: auto; bottom: 14px; }
}

/* ---------- Platforms strip ---------- */
.platforms { border-bottom: 1px solid var(--paper-line); }
.platforms .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 22px; padding-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--muted-2); }
.platforms .label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8A93A8; }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 28px; }
.card { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-img { height: 150px; overflow: hidden; background: var(--paper-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.card-body p { font-size: 14px; color: var(--muted); }
.card-price { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--muted-2); font-weight: 500; }
.card-link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card-link:hover { border-color: #CFC4B2; color: inherit; transform: translateY(-2px); }

.main-svc { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; padding: 28px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--paper-line); margin-bottom: 14px; }
.main-svc-text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.main-svc-text h3 { font-size: 24px; letter-spacing: -.02em; }
.main-svc-text p { color: var(--muted); }
.tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--navy); color: var(--orange); font-size: 12px; font-weight: 700; }
.price-from { font-size: 14px; color: var(--muted); }
.price-from strong { color: var(--ink); font-size: 18px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px 20px; font-size: 14px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; }
.ticks svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--orange-text); }
.sec-dark .ticks svg { color: var(--orange); }
.main-svc .ticks { flex: 1 1 380px; min-width: 0; color: #36405A; }

/* Dark cards */
.num { display: inline-flex; width: 32px; height: 32px; border-radius: 8px; background: var(--orange); color: var(--navy); align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }

/* ---------- Price plans ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.plan { padding: 26px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--paper-line); display: flex; flex-direction: column; gap: 10px; }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-for { font-size: 13px; color: var(--muted-2); }
.plan-price { margin: 6px 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.plan ul { margin: 0; padding: 0 0 0 18px; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.plan .btn { margin-top: 8px; min-height: 42px; font-size: 14px; }
.plan.featured { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.plan.featured h3, .plan.featured .plan-price { color: var(--white); }
.plan.featured .plan-for { color: #A3AFC8; }
.plan.featured ul { color: var(--on-navy-muted); }
.badge { padding: 2px 8px; border-radius: 999px; background: var(--orange); color: var(--navy); font-size: 11px; font-weight: 700; }

/* ---------- Care calculator ---------- */
.care { margin-top: 40px; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: var(--white); border: 1px solid var(--paper-line); display: flex; flex-wrap: wrap; gap: 28px; }
.care-list { flex: 1 1 520px; min-width: 0; }
.care-items { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.care-item { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 16px; border: 1px solid var(--paper-line); border-radius: 12px; cursor: pointer; font-weight: 500; font-size: 14px; }
.care-item:hover { border-color: #CFC4B2; }
.care-item input { width: 20px; height: 20px; accent-color: var(--orange-text); flex: 0 0 auto; margin: 0; }
.care-item span:first-of-type { flex: 1 1 auto; }
.care-item .price { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.care-item:has(input:checked) { border-color: var(--orange); background: #FFF6EC; }
.care-total { flex: 1 1 280px; min-width: 0; align-self: flex-start; position: sticky; top: 90px; background: var(--navy); color: var(--on-navy); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.care-total .label { font-size: 13px; color: var(--on-navy-muted); font-weight: 600; }
.care-total .total { font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--white); }
.care-total .total small { font-size: 14px; font-weight: 500; color: var(--on-navy-muted); }
.care-total p { font-size: 13px; color: var(--on-navy-muted); }
.care-total .btn { margin-top: 8px; }
@media (max-width: 860px) { .care-total { position: static; } }

.extras { width: 100%; border-collapse: collapse; font-size: 14px; }
.extras th, .extras td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--navy-line); vertical-align: top; }
.extras th { font-weight: 500; padding-right: 16px; color: var(--on-navy); }
.extras td { font-weight: 700; white-space: nowrap; text-align: right; color: var(--white); }
.notes { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--on-navy-muted); }

/* ---------- Work ---------- */
.work-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px; background: var(--navy-2); display: flex; align-items: flex-end; }
.work-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.work-card .work-label { position: relative; z-index: 1; margin: 16px; padding: 10px 14px; border-radius: 10px; background: rgba(19, 33, 63, .88); color: var(--white); font-size: 14px; font-weight: 600; }
.work-card .work-label small { display: block; font-weight: 500; color: var(--on-navy-muted); font-size: 12px; }

/* ---------- Why us ---------- */
.why h3 { margin-bottom: 6px; }
.why p { font-size: 14px; color: var(--muted); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 56px 0 64px; }
.page-hero .wrap { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.page-hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.page-hero-img { flex: 1 1 380px; min-width: 0; margin: 0; border-radius: 20px; overflow: hidden; background: var(--navy-2); }
.page-hero-img img { width: 100%; height: 340px; object-fit: cover; }
@media (max-width: 760px) { .page-hero { padding: 40px 0 48px; } .page-hero-img img { height: 240px; } }

/* ---------- Services detail ---------- */
.svc { display: flex; flex-wrap: wrap; gap: 20px 48px; padding: 36px 0; border-top: 1px solid var(--paper-line); scroll-margin-top: 90px; }
.svc:first-child { border-top: 0; padding-top: 0; }
.svc-main { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.svc-main h2 { font-size: clamp(22px, 2.4vw, 28px); }
.svc-main p { color: var(--muted); }
.svc-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.svc-icon svg { width: 20px; height: 20px; }
.svc-price { display: inline-flex; padding: 6px 12px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--paper-line); font-weight: 700; font-size: 14px; }
.svc-side { flex: 1 1 340px; min-width: 0; }
.svc-side h3 { margin-bottom: 12px; font-size: 14px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }

.split { display: flex; flex-wrap: wrap; gap: 40px; }
.split > * { flex: 1 1 360px; min-width: 0; }

.panel { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.sec-dark .panel { background: var(--navy-2); border-color: var(--navy-line); }

/* People */
.person { display: flex; gap: 16px; align-items: flex-start; }
.avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--navy-line); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.avatar svg { width: 24px; height: 24px; }
.role { font-size: 13px; font-weight: 600; color: var(--orange); margin: 2px 0 8px; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--white); border: 1px solid var(--paper-line); border-radius: 12px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 22px; color: var(--orange-text); }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 16px; color: var(--muted); font-size: 14px; }

/* ---------- Forms ---------- */
.contact-band { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.contact-band > div { flex: 1 1 380px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--paper-line); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip svg { width: 16px; height: 16px; color: var(--orange-text); }
.form-card { flex: 1 1 420px; min-width: 0; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.form-card .field { flex: 1 1 180px; }
.form-card .field.full, .form-card .btn, .form-card .form-note, .form-card .form-status, .form-card h2, .form-card > p { flex: 1 1 100%; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #D8D0C2; border-radius: 10px; background: var(--white); color: var(--ink); font: 400 15px/1.4 var(--font); }
.field textarea { min-height: 100px; padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 140, 40, .2); }
.form-note { font-size: 12px; color: var(--muted-2); }
.form-status { font-size: 14px; font-weight: 600; min-height: 1.4em; margin: 0; }
.form-status.ok { color: var(--green); }
.form-status.err { color: #B42318; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.messengers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.msg-btn { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--navy-line); color: var(--white); font-weight: 600; text-decoration: none; }
.msg-btn:hover { border-color: var(--navy-line-2); color: var(--white); }
.msg-btn svg { width: 20px; height: 20px; color: var(--orange); flex: 0 0 auto; }
.msg-btn.primary { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.msg-btn.primary svg { color: var(--navy); }

.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.contact-list svg { width: 20px; height: 20px; color: var(--orange); flex: 0 0 auto; margin-top: 2px; }
.contact-list a { color: var(--white); font-weight: 600; text-decoration: none; }

/* Prose */
.prose { max-width: 760px; }
.prose h2 { font-size: 20px; margin: 32px 0 8px; }
.prose p, .prose li { color: #36405A; }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #A3AFC8; border-top: 1px solid var(--navy-line); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 28px; padding: 48px 0 32px; font-size: 14px; }
.footer-grid h2 { font-size: 14px; color: var(--white); letter-spacing: 0; margin-bottom: 10px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-grid a { color: #A3AFC8; text-decoration: none; }
.footer-grid a:hover { color: var(--white); }
.footer-brand p { margin-top: 10px; font-size: 13px; max-width: 22em; }
.footer-bottom { border-top: 1px solid var(--navy-line); padding: 16px 0 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; }
.footer-bottom a { color: #A3AFC8; }

/* ---------- Mobile contact bar ---------- */
.mbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 68px; }
  .mbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--navy); border-top: 1px solid var(--navy-line); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 10px; background: var(--navy-2); color: var(--white); font-weight: 600; font-size: 14px; text-decoration: none; }
  .mbar a.primary { background: var(--orange); color: var(--navy); }
  .mbar svg { width: 18px; height: 18px; }
}

/* 404 */
.notfound { min-height: 70vh; display: flex; align-items: center; }
.notfound .wrap { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ---------- Photos ---------- */
.media { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.media img { width: 100%; height: 100%; min-height: 280px; max-height: 440px; object-fit: cover; }
.venues { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.venue { position: relative; display: block; border-radius: var(--radius); overflow: hidden; height: 240px; background: var(--paper-2); text-decoration: none; }
.venue img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.venue:hover img { transform: scale(1.04); }
.venue::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(19, 33, 63, .78), rgba(19, 33, 63, 0) 55%); }
.venue span { position: absolute; z-index: 1; left: 18px; bottom: 16px; color: var(--white); font-weight: 700; font-size: 17px; }
@media (max-width: 600px) { .venues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .venue { height: 170px; } .venue span { font-size: 15px; left: 12px; bottom: 10px; } }
.why-wrap { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.why-wrap .media { flex: 1 1 420px; min-width: 0; }
.why-list { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.why-list .why { padding-left: 16px; border-left: 3px solid var(--orange); }
.svc-img { margin: 0 0 18px; border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.svc-img img { width: 100%; height: 200px; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .venue img { transition: none; } }

/* ---------- Mockup screens (phones, browsers) ---------- */
.mk { font-family: var(--font); color: var(--ink); text-align: left; line-height: 1.4; }
.mk img { display: block; }

.mk-browser { width: 100%; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.mk-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #EEF0F4; }
.mk-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CDD2DC; }
.mk-url { flex: 1; margin-left: 8px; background: var(--white); border-radius: 6px; padding: 3px 10px; font-size: 11px; color: var(--muted-2); }
.mk-nav { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 11px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.mk-nav b { margin-right: auto; font-size: 13px; color: var(--ink); white-space: nowrap; }
.mk-nav em, .mk-hero-txt em { font-style: normal; font-weight: 700; border-radius: 6px; white-space: nowrap; }
.mk-nav em { background: var(--navy); color: var(--white); padding: 5px 10px; }
.mk-hero { position: relative; height: 170px; margin: 0 14px; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.mk-hero img { width: 100%; height: 100%; object-fit: cover; }
.mk-hero-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; color: var(--white); background: linear-gradient(0deg, rgba(10, 16, 30, .72), rgba(10, 16, 30, 0) 75%); }
.mk-hero-txt strong { font-size: 18px; line-height: 1.2; max-width: 14em; }
.mk-hero-txt em { align-self: flex-start; background: var(--orange); color: var(--navy); font-size: 11px; padding: 6px 12px; }
.mk-dishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 14px; }
.mk-dish { display: flex; flex-direction: column; gap: 1px; font-size: 11px; min-width: 0; }
.mk-dish img { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; margin-bottom: 4px; background: var(--paper-2); }
.mk-dish b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-dish span { color: var(--muted-2); }

.mk-card { width: 100%; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.mk-pad { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.mk-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3px; height: 90px; background: var(--paper-2); }
.mk-photos img { width: 100%; height: 100%; min-width: 0; object-fit: cover; }
.mk-photos { overflow: hidden; }
.mk-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted-2); }
.mk-label svg { width: 13px; height: 13px; color: var(--orange-text); }
.mk-title { font-size: 15px; color: var(--ink); }
.mk-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.mk-stars { color: var(--star); letter-spacing: 1px; }
.mk-open { font-size: 11px; font-weight: 600; color: var(--green); }
.mk-acts { display: flex; gap: 6px; margin-top: 4px; }
.mk-acts span { flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; padding: 6px 4px; border-radius: 999px; background: #EEF3FF; color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-review { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #F6F4EF; font-size: 11px; color: #36405A; }
.mk-reply { margin-top: 4px; color: var(--orange-text); font-weight: 600; }

.mk-phone { width: 210px; flex: 0 0 auto; background: #0E1830; padding: 7px; border-radius: 30px; box-shadow: var(--shadow); }
.mk-screen { height: 400px; background: var(--white); border-radius: 24px; overflow: hidden; }
.mk-sub { font-size: 11px; color: var(--muted-2); }
.mk-ig-head { display: flex; align-items: center; gap: 10px; padding: 16px 12px 8px; }
.mk-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid var(--orange); background: var(--paper-2); }
.mk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mk-ig-head b { display: block; font-size: 13px; }
.mk-ig-head span { font-size: 10.5px; color: var(--muted-2); }
.mk-ig-btn { margin: 4px 12px 10px; text-align: center; background: var(--navy); color: var(--white); font-size: 11px; font-weight: 600; padding: 6px; border-radius: 7px; }
.mk-ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.mk-ig-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); }
.mk-dbanner { height: 100px; background: var(--paper-2); }
.mk-dbanner img { width: 100%; height: 100%; object-fit: cover; }
.mk-drow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #EEECE6; }
.mk-drow img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--paper-2); }
.mk-drow div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-drow b { font-size: 11.5px; }
.mk-drow span { font-size: 11px; color: var(--muted-2); }
.mk-drow em { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.mk-langs { display: flex; gap: 3px; }
.mk-langs i { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 2px 5px; border-radius: 4px; background: #EEF0F4; }
.mk-langs i:first-child { background: var(--navy); color: var(--white); }
.mk-qimg { height: 110px; margin: 6px 0; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.mk-qimg img { width: 100%; height: 100%; object-fit: cover; }
.mk-qrow { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #E2DCCF; font-size: 11.5px; }
.mk-qrow b { white-space: nowrap; }
.mk-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 10px; }
.mk-col { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.mk-col span { flex: 1; border-radius: 3px 3px 0 0; background: var(--navy); }
.mk-col span:nth-child(2) { background: var(--orange); }
.mk-col span:nth-child(3) { background: #F7C99A; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 10.5px; color: var(--muted-2); }
.mk-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--navy); }
.mk-legend i.b { background: var(--orange); }
.mk-legend i.c { background: #F7C99A; }

/* Showcase grid */
.shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.show { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--navy-2); border: 1px solid var(--navy-line); display: flex; flex-direction: column; }
.show-stage { height: 340px; padding: 28px 24px 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; background: #22345C; }
.show-stage .mk-browser { max-width: 400px; }
.show-stage .mk-card { max-width: 300px; }
.show figcaption { padding: 18px 20px 20px; }
.show figcaption h3 { color: var(--white); }
.show figcaption p { font-size: 14px; color: var(--on-navy-muted); }
.sec-light .show { background: var(--white); border-color: var(--paper-line); }
.sec-light .show-stage { background: var(--paper-2); }
.sec-light .show figcaption h3 { color: var(--ink); }
.sec-light .show figcaption p { color: var(--muted); }

/* Hero with mockup screens */
.hero-mocks { min-height: 470px; }
.hero-mocks .mk-browser { position: absolute; left: 70px; right: 0; top: 10px; width: auto; }
.hero-phone { position: absolute; left: 0; bottom: 0; z-index: 3; width: 172px; }
.hero-phone .mk-screen { height: 290px; }
.hero-maps { position: absolute; right: -8px; bottom: 6px; width: 236px; z-index: 3; }
.hero-maps .mk-photos { height: 58px; }
.hero-maps .mk-review { display: none; }
@media (max-width: 760px) {
  .hero-mocks { min-height: 0; }
  .hero-mocks .mk-browser { position: relative; left: 0; top: 0; }
  .hero-phone, .hero-maps { display: none; }
}

/* Mockup screens inside inner pages */
.svc-mock { margin: 0 0 18px; padding: 24px 24px 0; max-height: 330px; overflow: hidden; border-radius: 12px; background: var(--navy); display: flex; justify-content: center; align-items: flex-start; }
.svc-mock .mk-browser { max-width: 420px; }
.svc-mock .mk-card { max-width: 320px; }
.page-hero-mock { flex: 1 1 420px; min-width: 0; }

/* ---------- Single page: service cards ---------- */
.sec-head-text { max-width: 46em; }
.scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.scard { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.scard-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.scard-icon svg { width: 24px; height: 24px; }
.scard-step { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.scard h3 { font-size: 20px; letter-spacing: -.01em; }
.scard > p { font-size: 14px; color: var(--muted); }
.scard-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: #36405A; }
.scard-ticks li { display: flex; gap: 8px; }
.scard-ticks li::before { content: '✓'; color: var(--orange-text); font-weight: 800; }
.scard-price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--paper-line); display: flex; flex-direction: column; gap: 4px; }
.scard-price .btn { margin-top: 10px; min-height: 42px; font-size: 14px; }
.chip-s { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.chip-blue { background: #EEF3FF; color: var(--navy-2); }
.chip-orange { background: #FFF1E2; color: var(--orange-text); }
.from { font-size: 13px; color: var(--muted-2); }
.amt { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.amt small { font-size: 14px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.scards-note { margin-top: 20px; font-size: 14px; color: var(--muted-2); }
a.show-stage { text-decoration: none; cursor: zoom-in; }
a.show-stage:hover .mk { transform: translateY(-3px); }
.show-stage .mk { transition: transform .2s; }
.sec-dark .why p { color: var(--on-navy-muted); }
.team { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--navy-line); }
.contact-meta { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.contact-meta li { display: flex; align-items: center; gap: 8px; }
.contact-meta svg { width: 16px; height: 16px; color: var(--orange-text); }
.contact-meta a { color: var(--ink); text-decoration: none; font-weight: 600; }

/* ---------- Pop-ups (native <dialog>) ---------- */
html.modal-open { overflow: hidden; }
.modal { width: calc(100% - 32px); max-width: 720px; max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 24px 60px rgba(10, 20, 40, .35); overflow: auto; overscroll-behavior: contain; }
.modal-wide { max-width: 820px; }
.modal::backdrop { background: rgba(19, 33, 63, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px 16px; background: var(--white); border-bottom: 1px solid #EEE8DC; }
.modal-head h2 { font-size: 24px; }
.modal-head .eyebrow { margin-bottom: 4px; }
.modal-sub { margin-top: 4px; font-size: 14px; color: var(--muted-2); }
.modal-x { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--paper-line); background: var(--white); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.modal-x:hover { border-color: var(--ink); }
.modal-body { padding: 20px 26px 26px; display: flex; flex-direction: column; gap: 22px; }
.modal-h3 { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.modal-stage { padding: 24px 24px 0; max-height: 300px; overflow: hidden; border-radius: 12px; background: var(--navy); display: flex; justify-content: center; align-items: flex-start; }
.modal-stage .mk-browser { max-width: 460px; }
.modal-stage .mk-card { max-width: 340px; }
.modal-stage-lg { max-height: 460px; padding-bottom: 24px; }
.modal-stage-lg .mk-browser { max-width: 600px; }
.modal-stage-lg .mk-phone { width: 240px; }
.modal-stage-lg .mk-screen { height: 440px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable td { padding: 11px 0; border-bottom: 1px solid #EEE8DC; vertical-align: top; }
.ptable td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 16px; }
.ptable small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-2); font-weight: 400; }
.care-fs { border: 0; margin: 0; padding: 0; }
.modal .care-items { margin-top: 10px; }
.care-bar { margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: var(--navy); color: var(--on-navy); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.care-bar .label { display: block; font-size: 12px; color: var(--on-navy-muted); }
.care-bar .total { font-size: 26px; font-weight: 800; color: var(--white); }
.care-bar .total small { font-size: 13px; font-weight: 500; color: var(--on-navy-muted); }
.modal-notes { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.modal .form-card { border: 0; padding: 0; }
@media (max-width: 640px) {
  .modal, .modal-wide { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .modal-head { padding: 16px 16px 12px; }
  .modal-body { padding: 16px 16px 24px; }
  .modal-stage { max-height: 240px; }
}

/* ---------- v5: detail pop-ups, audit pop-up, team ---------- */
.modal { height: -moz-fit-content; height: fit-content; }
@media (max-width: 640px) { .modal, .modal-wide { height: 100%; } }
.show-modal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.show-modal .modal-stage-lg { max-height: 480px; }
.show-info { display: flex; flex-direction: column; gap: 18px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.facts div { padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--paper-line); }
.facts dt { font-size: 12px; color: var(--muted-2); font-weight: 600; }
.facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.audit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.audit-info { display: flex; flex-direction: column; gap: 14px; }
.audit-result { padding: 14px 16px; border-radius: 12px; background: #FFF6EC; border: 1px solid #F8D7B5; font-size: 14px; font-weight: 600; color: #5A3207; }
.audit-info .chips { margin-top: 0; }
.audit-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--paper-line); }
.audit-form .btn { margin-top: 4px; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.tcards { display: flex; flex-direction: column; gap: 14px; }
.tcard { display: flex; gap: 18px; align-items: center; padding: 16px; border-radius: var(--radius); background: var(--navy-2); border: 1px solid var(--navy-line); color: var(--on-navy); text-decoration: none; transition: border-color .15s, transform .15s; cursor: pointer; }
.tcard:hover { border-color: var(--orange); color: var(--on-navy); transform: translateY(-2px); }
.tcard img { flex: 0 0 auto; width: 112px; height: 112px; border-radius: 14px; object-fit: cover; background: var(--navy-line); }
.tcard-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcard-body b { font-size: 17px; color: var(--white); }
.tcard-body .role { margin: 0 0 4px; }
.tcard-short { font-size: 14px; color: var(--on-navy-muted); }
.tcard-link { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--orange); }
.profile { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.profile-photo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; object-fit: cover; background: var(--paper-2); }
.profile-info { display: flex; flex-direction: column; gap: 16px; }
.profile-info .role { margin: 0; }
.skill-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chips li { padding: 6px 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--paper-line); font-size: 13px; font-weight: 600; }
.work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.work-list li { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid #EEE8DC; font-size: 14px; }
.work-list span { color: var(--muted-2); font-size: 13px; }
@media (max-width: 760px) {
  .show-modal, .audit-grid, .about-grid, .profile { grid-template-columns: minmax(0, 1fr); }
  .profile-photo { width: 140px; }
  .tcard img { width: 84px; height: 84px; }
}

/* ---------- v6 ---------- */
/* Hero cover photo with navy overlay */
.hero-cover { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--navy); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 33, 63, .96) 0%, rgba(19, 33, 63, .9) 45%, rgba(19, 33, 63, .76) 100%); }
@media (max-width: 760px) { .hero-bg::after { background: rgba(19, 33, 63, .9); } }

/* Language switch with flags */
.lang.lang-flags { gap: 2px; padding: 3px; border: 1px solid var(--navy-line); border-radius: 10px; overflow: visible; }
.lang-flags a { min-width: 0; padding: 6px 7px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: transparent; }
.lang-flags svg { width: 24px; height: 16px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); filter: grayscale(1); opacity: .4; transition: opacity .15s, filter .15s; }
.lang-flags a:hover svg { opacity: .8; filter: grayscale(.2); }
.lang-flags a[aria-current="true"] { background: var(--navy-2); }
.lang-flags a[aria-current="true"] svg { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--orange); }

/* Service icons */
.scard-icon { width: 56px; height: 56px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.scard-icon svg { width: 28px; height: 28px; stroke-width: 1.7; }

/* Who we work with: rows */
.vrows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 14px; }
.vrow { display: flex; gap: 18px; align-items: center; padding: 14px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); }
.vrow-img { flex: 0 0 170px; height: 130px; border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.vrow-img img { width: 100%; height: 100%; object-fit: cover; }
.vrow-body { min-width: 0; }
.vrow-body h3 { font-size: 18px; margin-bottom: 4px; }
.vrow-body > p:not(.vrow-need) { font-size: 14px; color: var(--muted); }
.vrow-need { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-2); }
.vrow-need span { font-weight: 600; margin-right: 2px; }
.vrow-need em { font-style: normal; padding: 3px 10px; border-radius: 999px; background: #FFF1E2; color: var(--orange-text); font-weight: 700; }
@media (max-width: 600px) { .vrow { align-items: flex-start; } .vrow-img { flex-basis: 96px; height: 96px; } }

/* How it works: timeline */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tl-step { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tl-step:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 62px; right: -22px; height: 2px; background: repeating-linear-gradient(90deg, var(--navy-line-2) 0 8px, transparent 8px 14px); }
.tl-dot { width: 48px; height: 48px; border-radius: 50%; background: var(--orange); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; box-shadow: 0 0 0 6px rgba(242, 140, 40, .15); margin-bottom: 10px; }
.tl-when { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.tl-step h3 { font-size: 20px; }
.tl-step p { font-size: 14px; color: var(--on-navy-muted); max-width: 30em; }
@media (max-width: 760px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tl-step { padding-left: 66px; }
  .tl-dot { position: absolute; left: 0; top: 0; margin: 0; }
  .tl-step:not(:last-child)::after { top: 58px; bottom: -22px; left: 23px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--navy-line-2) 0 8px, transparent 8px 14px); }
}

/* About on light background */
.about-light .modal-h3 { color: var(--orange-text) !important; }
.about-light .tcard { background: var(--white); border-color: var(--paper-line); color: var(--ink); }
.about-light .tcard:hover { border-color: var(--orange); color: var(--ink); }
.about-light .tcard-body b { color: var(--ink); }
.about-light .tcard-body .role { color: var(--orange-text); }
.about-light .tcard-short { color: var(--muted); }
.about-light .tcard-link { color: var(--orange-text); }
.about-light .tcard img { background: var(--paper-2); }

/* ---------- v7 ---------- */
/* Flags: selected in full color with an orange frame, others softened but easy to recognise */
.lang.lang-flags { gap: 6px; padding: 0; border: 0; border-radius: 0; }
.lang-flags a { padding: 3px; border-radius: 8px; border: 2px solid transparent; background: transparent; }
.lang-flags svg { width: 32px; height: 21px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); filter: saturate(.45) brightness(1.15); opacity: .62; }
.lang-flags a:hover svg { opacity: .95; filter: none; }
.lang-flags a[aria-current="true"] { border-color: var(--orange); background: transparent; }
.lang-flags a[aria-current="true"] svg { opacity: 1; filter: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }

/* How it works + Who we work with (one light section) */
.combo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.combo-how { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.combo-how .btn { margin-top: 8px; }
.timeline.tl-v { grid-template-columns: minmax(0, 1fr); gap: 30px; margin: 30px 0 28px; }
.tl-v .tl-step { padding-left: 68px; }
.tl-v .tl-dot { position: absolute; left: 0; top: 0; margin: 0; }
.tl-v .tl-step:not(:last-child)::after { top: 58px; bottom: -24px; left: 23px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #D8D0C2 0 8px, transparent 8px 14px); }
.sec-light .tl-when { color: var(--orange-text); }
.sec-light .tl-step p { color: var(--muted); }
.sec-light .tl-dot { box-shadow: 0 0 0 6px #FFF1E2; }
.vrows-1 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vrows-1 .vrow-img { flex-basis: 150px; height: 112px; }
@media (max-width: 900px) { .combo { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
@media (max-width: 600px) { .vrows-1 .vrow-img { flex-basis: 96px; height: 96px; } }
/* softer "not selected" look: a light film over the flag instead of darkening it */
.lang-flags a { position: relative; }
.lang-flags svg { filter: saturate(.75); opacity: 1; }
.lang-flags a:not([aria-current="true"])::after { content: ''; position: absolute; inset: 3px; border-radius: 4px; background: rgba(255, 255, 255, .38); transition: background .15s; pointer-events: none; }
.lang-flags a:not([aria-current="true"]):hover::after { background: rgba(255, 255, 255, .12); }
.lang-flags a:hover svg { filter: none; }
/* flags, final: like the reference — no overlay, no outlines */
.lang.lang-flags { gap: 8px; }
.lang-flags a { padding: 3px; border: 2px solid transparent; border-radius: 7px; background: transparent !important; }
.lang-flags a:not([aria-current="true"])::after { display: none; }
.lang-flags svg { width: 32px; height: 21px; border-radius: 3px; box-shadow: none !important; filter: saturate(.6) brightness(1.3); opacity: .8; }
.lang-flags a:hover svg { filter: none; opacity: 1; }
.lang-flags a[aria-current="true"] { border-color: var(--orange); }
.lang-flags a[aria-current="true"] svg { filter: none; opacity: 1; }

/* ---------- v8 ---------- */
/* Language switch: codes. Selected is bright, the others are dimmed. */
.lang.lang-codes { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--navy-line-2); border-radius: 10px; overflow: hidden; }
.lang-codes a { min-width: 42px; padding: 6px 10px; border-radius: 7px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #7F8BA6; text-decoration: none; }
.lang-codes a:hover { color: var(--white); }
.lang-codes a[aria-current="true"] { background: var(--white); color: var(--navy); }

/* Team pop-ups: city cover photo, faded so the text stays easy to read */
.modal-cover { background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .93)), var(--cover) center / cover no-repeat, var(--white); }
.modal-cover .modal-head { background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom-color: rgba(231, 224, 212, .8); }
.modal-cover .skill-chips li { background: rgba(255, 255, 255, .8); }
.modal-cover .work-list li { border-bottom-color: rgba(231, 224, 212, .9); }
/* Team pop-ups: photo fills the whole card (header too) and shows more */
.modal-cover { background: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .78)), var(--cover) center / cover no-repeat, var(--white); }
.modal-cover .modal-head { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(19, 33, 63, .12); }
.modal-cover .modal-x { background: rgba(255, 255, 255, .85); }
.modal-cover .profile-info .muted, .modal-cover .work-list span { color: #36405A; }
.modal-cover .skill-chips li { background: rgba(255, 255, 255, .88); }
.modal-cover .btn-line { background: rgba(255, 255, 255, .85); }
.modal-cover .profile-photo { box-shadow: 0 10px 30px rgba(10, 20, 40, .25); }

/* ---------- v9: team pop-ups with a city banner ---------- */
.modal-profile { overflow-x: hidden; }
.pf-banner { position: relative; height: 200px; background: linear-gradient(180deg, rgba(19, 33, 63, .1) 0%, rgba(19, 33, 63, .45) 100%), var(--cover) center / cover no-repeat, var(--navy-2); }
.pf-banner .modal-x { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, .92); border-color: transparent; }
.pf-clock { position: absolute; top: 16px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(19, 33, 63, .78); color: var(--white); font-size: 13px; font-weight: 600; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pf-clock svg { width: 16px; height: 16px; color: var(--orange); }
.pf-clock time { font-variant-numeric: tabular-nums; font-weight: 800; }
.pf-clock small { font-size: 12px; font-weight: 500; color: var(--on-navy-muted); }
.pf-head { display: flex; align-items: flex-end; gap: 20px; padding: 0 26px; margin-top: -64px; position: relative; }
.pf-photo { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 20px; border: 4px solid var(--white); object-fit: cover; background: var(--paper-2); box-shadow: 0 10px 28px rgba(10, 20, 40, .25); }
.pf-title { padding-bottom: 6px; min-width: 0; }
.pf-title .eyebrow { margin-bottom: 2px; }
.pf-title h2 { font-size: 26px; }
.pf-title .role { margin: 2px 0 0; color: var(--orange-text); font-size: 14px; font-weight: 600; }
.modal-profile .modal-body { padding-top: 18px; }
@media (max-width: 640px) {
  .pf-banner { height: 150px; }
  .pf-head { padding: 0 16px; margin-top: -48px; gap: 14px; }
  .pf-photo { width: 100px; height: 100px; border-radius: 16px; }
  .pf-title h2 { font-size: 21px; }
  .pf-clock { left: 14px; top: 14px; font-size: 12px; }
}
.pf-head { align-items: flex-start; }
.pf-title { padding: 74px 0 0; }
@media (max-width: 640px) { .pf-title { padding-top: 54px; } }
/* banner focus point (set per person) */
.pf-banner { background-position: center, var(--pos, center); background-size: auto, cover; }

/* ---------- v10 ---------- */
/* Header: menu sits right after the logo, with light dividers */
@media (min-width: 1081px) {
  .header-in .nav { margin-left: 40px; margin-right: auto; }
  .nav ul { align-items: center; gap: 0; }
  .nav li { display: flex; align-items: center; }
  .nav li + li::before { content: ''; width: 1px; height: 16px; background: rgba(255, 255, 255, .16); }
  .nav a { padding: 8px 16px; font-size: 14.5px; font-weight: 500; color: #C9D2E3; }
  .nav a:hover { background: transparent; color: var(--white); }
}

/* Final section: navy panel with a white form card */
section#contact { background: var(--paper); border-top: 6px solid var(--orange); }
.cta-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; color: var(--ink); }
.cta-left { display: flex; flex-direction: column; gap: 16px; }
.cta-left .eyebrow { color: var(--orange-text); margin: 0; }
.cta-left h2 { color: var(--ink); font-size: clamp(28px, 3.2vw, 38px); }
.cta-lead { color: var(--muted); font-size: 16px; max-width: 32em; }
.promise { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.promise li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 15px; }
.promise svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--navy); color: var(--orange); flex: 0 0 auto; box-sizing: content-box; }
.talk { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.talk-faces { display: flex; }
.talk-faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); background: var(--paper-2); }
.talk-faces img + img { margin-left: -10px; }
.cta-or { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.cta-msgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cta-msgs .msg-btn { min-height: 46px; font-size: 14px; padding: 0 14px; background: var(--white); border-color: var(--paper-line); color: var(--ink); }
.cta-msgs .msg-btn:hover { border-color: var(--ink); color: var(--ink); }
.cta-msgs .msg-btn svg { color: var(--orange-text); }
.cta-msgs .msg-btn.primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.cta-msgs .msg-btn.primary:hover { background: var(--navy-2); color: var(--white); }
.cta-msgs .msg-btn.primary svg { color: var(--orange); }
.cta-meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); }
.cta-meta li { display: flex; align-items: center; gap: 6px; }
.cta-meta svg { width: 15px; height: 15px; color: var(--orange-text); }
.cta-meta a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cta-form { background: var(--white); color: var(--ink); border-radius: 18px; border: 1px solid var(--paper-line); border-top: 5px solid var(--orange); box-shadow: 0 24px 60px rgba(19, 33, 63, .12); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.cta-form h3 { font-size: 20px; }
.cta-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cta-fields .full { grid-column: 1 / -1; }
.cta-form .field textarea { min-height: 88px; }
.cta-form .btn { min-height: 50px; font-size: 16px; }
@media (max-width: 900px) { .cta-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cta-fields, .cta-msgs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v11: photo + UI chip on each service card ---------- */
.scard-media { position: relative; margin: -24px -24px 0; height: 160px; border-radius: 16px 16px 0 0; overflow: hidden; background: var(--paper-2); }
.scard-media img { width: 100%; height: 100%; object-fit: cover; }
.scard-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 33, 63, 0) 45%, rgba(19, 33, 63, .35) 100%); }
.sm-chip { position: absolute; z-index: 1; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 10px; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 6px 18px rgba(10, 20, 40, .22); white-space: nowrap; }
.sm-chip svg { width: 14px; height: 14px; color: var(--orange-text); flex: 0 0 auto; }
.sm-chip small { font-size: 10px; font-weight: 600; color: var(--muted-2); padding: 1px 6px; border-radius: 4px; background: var(--paper-2); }
.sm-stars { color: var(--star); letter-spacing: 1px; }
.sm-open { color: var(--green); }
.sm-play { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: var(--navy); font-size: 8px; align-items: center; justify-content: center; padding-left: 1px; }
.sm-site { gap: 8px; padding: 5px 5px 5px 10px; }
.sm-url { font-weight: 500; color: var(--muted-2); }
.sm-site em { font-style: normal; padding: 4px 8px; border-radius: 6px; background: var(--navy); color: var(--white); font-size: 11px; }
.scard .scard-icon { position: relative; z-index: 2; margin-top: -42px; margin-left: auto; margin-right: 0; border: 3px solid var(--white); }
.sm-chip { top: 12px; bottom: auto; }
.scard-media::after { background: linear-gradient(180deg, rgba(19, 33, 63, .18) 0%, rgba(19, 33, 63, 0) 40%, rgba(19, 33, 63, .3) 100%); }
.pf-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.work-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.work-link:hover b { color: var(--orange-text); }
.work-link em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--orange-text); margin-top: 2px; }

/* ===== Work: guest journey ===== */
.jr-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.jr-head h2 { color: var(--white); }
.jr-head p { margin: 10px 0 0; color: var(--on-navy-muted); }
.journey { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.journey::before { content: ''; position: absolute; left: 10%; right: 10%; top: 19px; border-top: 2px dashed var(--navy-line-2); }
.jr-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.jr-dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); border: 2px solid var(--orange); color: var(--orange); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.jr-main .jr-dot { background: var(--orange); color: var(--navy); }
.jr-when { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-navy-muted); }
.jr-phone { display: block; border-radius: 26px; color: var(--ink); text-decoration: none; transition: transform .2s; }
.jr-phone * { text-decoration: none; }
.jr-phone:hover { transform: translateY(-4px); }
.jr-phone:focus-visible, .jr-phone:hover { outline: 2px solid var(--orange); outline-offset: 4px; }
.jr-phone .mk-phone { width: 172px; padding: 6px; border-radius: 26px; }
.jr-phone .mk-screen { height: 310px; border-radius: 21px; }
.jr-main .jr-phone .mk-phone { box-shadow: 0 0 0 2px var(--orange), var(--shadow); }
.jr-txt h3 { margin: 0; font-size: 15px; color: var(--white); }
.jr-txt p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--on-navy-muted); }
.jr-tag { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--orange); background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: 999px; padding: 5px 12px; }
.jr-main .jr-tag { background: var(--orange); border-color: var(--orange); color: var(--navy); }
/* phone mocks used only here */
.jm-search { padding: 10px; background: #F4F6FA; }
.jm-search span { display: block; background: var(--white); border-radius: 999px; padding: 6px 12px; font-size: 11px; color: var(--muted-2); text-align: left; }
.jm-map { position: relative; height: 100px; background: #DCE6D4; overflow: hidden; }
.jm-road { position: absolute; background: #FFFFFF; }
.jm-road.a { left: 0; right: 0; top: 58%; height: 8px; transform: rotate(-8deg); }
.jm-road.b { top: 0; bottom: 0; left: 30%; width: 7px; transform: rotate(12deg); }
.jm-pin { position: absolute; left: 50%; top: 22%; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #E2482D; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.mk-jmaps .mk-pad, .mk-jsite .mk-pad { text-align: left; }
.jb-hero { position: relative; height: 104px; margin: 0 10px; border-radius: 10px; overflow: hidden; background: #9A5A34; }
.jb-hero img { width: 100%; height: 100%; object-fit: cover; }
.jb-hero strong { position: absolute; inset: auto 0 0 0; padding: 8px 10px; font-size: 12px; line-height: 1.25; color: var(--white); background: linear-gradient(0deg, rgba(10,16,30,.75), rgba(10,16,30,0)); }
.jb-form { gap: 6px; font-size: 11px; }
.jb-form b { font-size: 12px; }
.jb-form span { padding: 5px 8px; border: 1px solid #DDD8CE; border-radius: 6px; }
.jb-two { display: flex; gap: 6px; }
.jb-two span { flex: 1; }
.jb-form em { font-style: normal; text-align: center; padding: 7px; border-radius: 6px; background: var(--orange); color: var(--navy); font-weight: 700; }
/* owner strip */
.jr-owner { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 24px; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 22px 26px; }
.jr-owner-txt { flex: 1 1 420px; display: flex; align-items: center; gap: 18px; }
.jr-owner-txt h3 { margin: 0; color: var(--white); font-size: 16px; }
.jr-owner-txt p { margin: 2px 0 0; font-size: 14px; color: var(--on-navy-muted); }
.jr-chart { flex: 0 0 auto; width: 110px; height: 62px; border-radius: 10px; background: var(--white); display: flex; align-items: flex-end; gap: 5px; padding: 10px; }
.jr-chart i { flex: 1; background: var(--navy); border-radius: 2px 2px 0 0; }
.jr-chart i:nth-child(even) { background: var(--orange); }
.jr-owner-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1080px) {
  .journey { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 40px; }
  .jr-step { flex: 0 0 calc(33.333% - 12px); }
  .journey::before { display: none; }
}
@media (max-width: 640px) {
  .jr-head { text-align: left; margin-bottom: 28px; }
  .journey { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 4px 16px 12px; }
  .jr-step { flex: 0 0 210px; scroll-snap-align: start; }
  .jr-owner { padding: 18px; }
  .jr-owner-txt { flex-basis: 100%; }
  .jr-chart { display: none; }
}

/* ===== Work: real websites row ===== */
.rw { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--navy-line); }
.rw-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; margin-bottom: 26px; }
.rw-head p { margin: 8px 0 0; max-width: 560px; font-size: 15px; color: var(--on-navy-muted); }
.rw-h { margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; color: var(--white); }
.rw-all { font-size: 14px; font-weight: 700; color: var(--orange); text-decoration: none; white-space: nowrap; }
.rw-all:hover { text-decoration: underline; }
.rw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; }
.rw-card { position: relative; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.rw-browser { display: block; border-radius: 10px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); transition: transform .2s; }
.rw-card:hover .rw-browser { transform: translateY(-4px); }
.rw-card:focus-visible .rw-browser, .rw-card:hover .rw-browser { outline: 2px solid var(--orange); outline-offset: 3px; }
.rw-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #EEF0F4; }
.rw-bar i { width: 8px; height: 8px; border-radius: 50%; background: #CDD2DC; }
.rw-bar span { flex: 1; min-width: 0; margin-left: 6px; background: var(--white); border-radius: 5px; padding: 2px 8px; font-size: 10.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--navy-line); }
.rw-txt { display: flex; flex-direction: column; }
.rw-txt b { color: var(--white); font-size: 15px; }
.rw-tag { font-size: 12.5px; color: var(--on-navy-muted); }
.rw-proof { margin-top: 4px; font-size: 13px; color: var(--on-navy); }
.rw-proof::before { content: '✓ '; color: var(--orange); font-weight: 800; }
.rw-go { font-weight: 800; color: var(--orange); }
@media (max-width: 1080px) { .rw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 640px) {
  .rw { margin-top: 44px; padding-top: 36px; }
  .rw-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 4px 16px 12px; }
  .rw-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Real work as its own light section */
.sec-rw .rw-head { margin-bottom: 30px; }
.sec-rw .rw-head .eyebrow { color: var(--orange-text); }
.sec-rw .rw-h { color: var(--ink); font-size: clamp(28px, 3.2vw, 36px); }
.sec-rw .rw-head p { color: var(--muted); }
.sec-rw .rw-all { color: var(--orange-text); }
.sec-rw .rw-browser { border: 1px solid var(--paper-line); box-shadow: 0 14px 34px rgba(19, 33, 63, .10); }
.sec-rw .rw-browser img { background: var(--paper-2); }
.sec-rw .rw-txt b { color: var(--ink); }
.sec-rw .rw-tag { color: var(--muted-2); }
.sec-rw .rw-proof { color: var(--ink); }
.sec-rw .rw-proof::before, .sec-rw .rw-go { color: var(--orange-text); }

/* ===== v19: general journey screens ===== */
.g-ava { display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--orange); font-weight: 800; font-size: 18px; }
.g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.g-grid i { aspect-ratio: 1; display: block; }
.g-t0 { background: #13213F; } .g-t1 { background: #F28C28; } .g-t2 { background: #E9DFD0; } .g-t3 { background: #2A3B62; } .g-t4 { background: #F7C99A; }
.g-hero { margin: 0 10px; padding: 14px 12px; border-radius: 10px; background: linear-gradient(135deg, #13213F, #2A3B62); color: var(--white); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.g-hero strong { font-size: 15px; line-height: 1.2; }
.g-hero span { font-size: 10.5px; color: #C9D2E6; }
.g-btns { display: flex; gap: 6px; margin-top: 4px; }
.g-btns em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 5px 10px; border-radius: 6px; background: var(--orange); color: var(--navy); }
.g-btns em.alt { background: rgba(255,255,255,.14); color: var(--white); }
.g-list { display: flex; flex-direction: column; padding: 8px 10px; text-align: left; }
.g-list span { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid #EEECE6; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.g-list i { font-style: normal; color: var(--muted-2); }
.g-tabs { display: flex; gap: 4px; margin: 0 10px; padding: 3px; border-radius: 8px; background: #F1EEE8; }
.g-tabs span { flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; padding: 5px 2px; border-radius: 6px; color: var(--muted); }
.g-tabs span.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.g-toast { margin: 4px 10px 0; padding: 8px 10px; border-radius: 8px; background: #E7F5EE; color: var(--green); font-size: 11px; font-weight: 700; text-align: left; }
.g-up { font-size: 10px; color: var(--green); }
.g-rev { margin: 6px 10px 0; padding: 8px 10px; border-radius: 8px; background: #F6F4EF; font-size: 11px; color: #36405A; text-align: left; }
.g-rev b { font-size: 10px; }
.g-rev p { margin: 2px 0 0; }
.modal-stage .mk-phone { margin: 0 auto; }

/* who-does-it labels */
.jr-who, .scard-who { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.jr-who svg, .scard-who svg { width: 13px; height: 13px; flex: 0 0 auto; }
.jr-who { color: var(--on-navy-muted); }
.jr-who svg { color: var(--orange); }
.scard-who { margin: -2px 0 8px; color: var(--muted-2); }
.scard-who svg { color: var(--orange-text); }
.scard-who-la { color: var(--ink); }

.g-tabs span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.g-btns { flex-wrap: wrap; }
.g-btns em { white-space: nowrap; }
.mk-ig-head div { min-width: 0; }
.mk-ig-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-tabs { flex-wrap: wrap; }
.g-tabs span { flex: 1 1 auto; overflow: visible; text-overflow: clip; padding: 5px 6px; }

/* ===== Video, 3D & tools (dark) ===== */
.vp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); align-items: center; }
.vp-media { position: relative; padding: 0 18px 30px 0; }
.vp-reel { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 20% 10%, #F7A75A 0%, #F28C28 25%, #8A3B12 70%, #3A1A0B 100%); box-shadow: var(--shadow); }
.vp-reel::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px); }
.vp-vert { position: absolute; right: 0; bottom: 0; width: 26%; aspect-ratio: 9 / 16; border: 3px solid var(--navy);
  background: radial-gradient(120% 90% at 30% 10%, #9C7CC4 0%, #6B4A8A 40%, #1B2B4E 100%); }
.vp-play { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 18px; padding-left: 4px; }
.vp-vert .vp-play { width: 38px; height: 38px; font-size: 13px; padding-left: 3px; }
.vp-lbl { position: absolute; z-index: 1; left: 12px; bottom: 10px; font-size: 12px; font-weight: 700; color: var(--white); background: rgba(10,16,30,.55); padding: 3px 8px; border-radius: 6px; }
.vp-fmt { position: absolute; z-index: 1; right: 10px; top: 10px; font-size: 11px; font-weight: 700; color: var(--navy); background: var(--orange); padding: 2px 7px; border-radius: 5px; }
.vp-text h2 { color: var(--white); }
.vp-desc { margin: 10px 0 0; font-size: 16px; color: var(--on-navy-muted); }
.vp-ticks { list-style: none; margin: 20px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vp-ticks li { position: relative; padding-left: 26px; color: var(--on-navy); }
.vp-ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
.tl-wrap { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--navy-line); }
.sec-dark .tl-title { color: var(--on-navy-muted); }
.tl-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 14px; }
.tl-h { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7F8BA6; }
.tl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tl { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--navy-line); color: var(--white); font-size: 14px; font-weight: 600; }
.tl span:last-child { min-width: 0; line-height: 1.25; }
.tl img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.tl-badge { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--navy); }
.tl-c0 { background: var(--orange); } .tl-c1 { background: #F7C99A; } .tl-c2 { background: #C9D2E6; } .tl-c3 { background: #FFFFFF; }
@media (max-width: 1080px) { .tl-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .vp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tl-groups { grid-template-columns: minmax(0, 1fr); } }
.tl-logo { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.tl-logo img { width: 18px; height: 18px; object-fit: contain; }
.tl-badge { width: 30px; height: 30px; border-radius: 8px; }
.tl-badge, .tl-c0, .tl-c1, .tl-c2, .tl-c3 { background: #FFFFFF; color: var(--navy); }

/* ===== Hero motion ===== */
@keyframes hm-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes hm-float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 -20px; } }
@keyframes hm-float-c { 0%, 100% { translate: 0 0; } 50% { translate: 0 12px; } }
@keyframes hm-in { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@keyframes hm-zoom { from { scale: 1; } to { scale: 1.09; } }
@keyframes hm-glow { 0%, 100% { opacity: .55; translate: 0 0; } 50% { opacity: .9; translate: -30px 20px; } }
@keyframes hm-shine { 0% { translate: -120% 0; opacity: 1; } 90% { opacity: 1; } 100% { translate: 300% 0; opacity: 0; } }

.hero-mocks { position: relative; }
.hero-mocks::before { content: ''; position: absolute; z-index: 0; width: 420px; height: 420px; right: 8%; top: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 140, 40, .32) 0%, rgba(242, 140, 40, 0) 65%); filter: blur(10px);
  animation: hm-glow 12s ease-in-out infinite; pointer-events: none; }
.hero-mocks > * { will-change: translate; }
.hero-mocks .mk-browser { z-index: 1; overflow: hidden; animation: hm-in .9s ease-out both, hm-float-a 7s ease-in-out 1s infinite; }
.hero-phone { animation: hm-in .9s ease-out .25s both, hm-float-b 6s ease-in-out 1.2s infinite; }
.hero-maps { animation: hm-in .9s ease-out .45s both, hm-float-c 8s ease-in-out 1.4s infinite; }
.hero-mocks .mk-browser::after { content: ''; position: absolute; top: 0; left: 0; width: 35%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  animation: hm-shine 1.6s ease-in-out 1.1s 1 both; }
.hero-bg img { animation: hm-zoom 24s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.hero-cover { overflow: hidden; }
.hero-text > * { animation: hm-in .8s ease-out both; }
.hero-text > *:nth-child(2) { animation-delay: .1s; }
.hero-text > *:nth-child(3) { animation-delay: .2s; }
.hero-text > *:nth-child(4) { animation-delay: .3s; }
.hero-text > *:nth-child(5) { animation-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .hero-mocks::before, .hero-mocks .mk-browser, .hero-phone, .hero-maps, .hero-mocks .mk-browser::after, .hero-bg img, .hero-text > * { animation: none !important; }
}

/* ===== v21: fewer photos ===== */
/* hero background: navy + soft light, no photo */
.hero-bg { background:
  radial-gradient(60% 70% at 85% 30%, rgba(42, 59, 98, .9) 0%, rgba(19, 33, 63, 0) 70%),
  radial-gradient(40% 50% at 10% 90%, rgba(242, 140, 40, .10) 0%, rgba(242, 140, 40, 0) 70%),
  linear-gradient(180deg, #13213F 0%, #101C37 100%); }
.hero-bg::after { display: none; }
.hero-bg::before { content: ''; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }

/* hero generic screens */
.hv-hero { margin: 0 14px; padding: 22px 20px; border-radius: 10px; background: linear-gradient(135deg, #13213F 0%, #2A3B62 100%); color: var(--white); display: flex; flex-direction: column; gap: 8px; }
.hv-hero strong { font-size: 22px; line-height: 1.15; }
.hv-hero span { font-size: 12px; color: #C9D2E6; max-width: 26em; }
.hv-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 14px; }
.hv-feat { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; background: #F6F4EF; font-size: 11px; min-width: 0; }
.hv-feat b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; }
.hv-d0 { background: var(--orange); } .hv-d1 { background: var(--navy); } .hv-d2 { background: #F7C99A; }
.hv-map { height: 74px; }
.hero-maps .mk-card { width: 100%; }

/* ad screen (Ads & sales pop-up) */
.g-ad { margin: 4px 10px 0; aspect-ratio: 1; border-radius: 10px; background: radial-gradient(120% 90% at 20% 10%, #F7A75A 0%, #F28C28 35%, #8A3B12 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--white); text-align: center; }
.g-ad span { font-size: 12px; font-weight: 700; }
.g-ad strong { font-size: 34px; line-height: 1; }
.g-ad-cta { margin: 8px 10px 0; padding: 8px 10px; border-radius: 8px; background: var(--navy); color: var(--white); font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; }

/* services cards without photos */
.scard .scard-icon { margin-top: 0; margin-left: 0; border: 0; }

/* who we work with: icons instead of photos */
.vrow-ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: #FFF1E2; color: var(--orange-text); display: flex; align-items: center; justify-content: center; }
.vrow-ico svg { width: 28px; height: 28px; }

/* ===== minimal tool logos ===== */
.tl-groups { gap: 40px; }
.tl-grid { gap: 4px 18px; }
.tl { padding: 8px 0; background: none; border: 0; border-radius: 0; gap: 12px; font-weight: 500; color: var(--on-navy); }
.tl-logo { width: auto; height: auto; background: none; border-radius: 0; }
.tl-logo img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: .7; transition: filter .2s, opacity .2s; }
.tl:hover .tl-logo img { filter: none; opacity: 1; }
.tl-badge, .tl-c0, .tl-c1, .tl-c2, .tl-c3 { width: 20px; height: 20px; border-radius: 50%; background: none; border: 1.5px solid rgba(255,255,255,.55); color: rgba(255,255,255,.75); font-size: 10px; }
.tl:hover .tl-logo + span, .tl:hover .tl-badge + span { color: var(--white); }

/* ===== scroll reveal ===== */
html.rv-on .rv { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0s); }
html.rv-on .rv.rv-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html.rv-on .rv { opacity: 1; translate: none; transition: none; } }

/* softer contact form */
.cta-form { background: #F3EEE6; border-color: #E7E0D4; box-shadow: 0 18px 44px rgba(19, 33, 63, .07); }
.cta-form input, .cta-form select, .cta-form textarea { background: #FBF9F5; border-color: #E2DACB; }
.cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus { background: #FFFFFF; }
.cta-form { border-top: 5px solid var(--orange); }
.cta-msgs .msg-btn:not(.primary) { background: #F3EEE6; border-color: #E7E0D4; }
.scard-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--paper-line); }
.scard-foot .btn { width: 100%; justify-content: center; }

/* ===== contact: 3 steps ===== */
.cta-steps ol { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
.cta-steps ol::before { content: ''; position: absolute; left: 15px; top: 30px; bottom: 30px; border-left: 2px dashed #E2DACB; }
.cta-steps li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.cs-num { flex: 0 0 auto; position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--paper); }
.cs-when { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.cta-steps b { display: block; color: var(--ink); font-size: 15px; }
.cta-steps p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ===== FAQ ===== */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-head h2 { color: var(--ink); }
.faq-head p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--white); border: 1px solid var(--paper-line); border-radius: 14px; padding: 0 20px; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 700; color: var(--ink); font-size: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #FFF1E2; color: var(--orange-text); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; transition: rotate .2s; }
.faq-item[open] summary::after { rotate: 45deg; }
.faq-item p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.cta-panel { align-items: start; }
@media (min-width: 901px) { .cta-form { position: sticky; top: 96px; } }

/* FAQ: softer, no white cards */
.faq-list { gap: 0; border-top: 0; }
.faq-item { background: none; border: 0; border-bottom: 1px solid var(--paper-line); border-radius: 0; padding: 0 4px; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { padding: 20px 0; font-weight: 600; }
.faq-item summary::after { background: none; border: 1.5px solid #E2DACB; color: var(--muted); width: 26px; height: 26px; font-size: 16px; }
.faq-item[open] summary::after { border-color: var(--orange); color: var(--orange-text); }
.faq-item[open] summary { color: var(--orange-text); }
.faq-item p { padding-right: 40px; }

/* ===== footer tools strip ===== */
.ft-tools { border-bottom: 1px solid var(--navy-line); padding: 22px 0; margin-bottom: 40px; }
.ft-tools .wrap { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.ft-tools-l { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7F8BA6; }
.ft-tools ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ft-tool { position: relative; display: flex; align-items: center; }
.ft-tool img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .2s, filter .2s; }
.ft-tool:hover img { filter: none; opacity: 1; }
.ft-tool-txt { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.ft-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; white-space: nowrap; font-size: 12px; font-weight: 600;
  color: var(--navy); background: var(--white); padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; }
.ft-tool:hover .ft-tip { opacity: 1; translate: -50% 0; }
@media (max-width: 640px) { .ft-tools .wrap { flex-direction: column; align-items: flex-start; } .ft-tools ul { gap: 14px 20px; } }
.ft-tools { overflow-x: clip; }
@media (hover: none), (max-width: 640px) { .ft-tip { display: none; } }

/* v26: short steps, one-line footer tools, no sticky form */
.cta-steps-short ol { gap: 12px; }
.cta-steps-short ol::before { top: 26px; bottom: 26px; }
.cta-steps-short li { align-items: center; }
.cta-steps-short b { font-size: 15px; }
.cta-steps-short .cs-when { display: inline; font-size: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--orange-text); }
.cta-steps-short p { margin: 1px 0 0; }
@media (min-width: 901px) { .cta-form { position: static; } }

@media (min-width: 1100px) {
  .ft-tools .wrap { flex-wrap: nowrap; gap: 24px; }
  .ft-tools ul { flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
  .ft-tool-txt { font-size: 12px; white-space: nowrap; }
  .ft-tool img { width: 20px; height: 20px; }
}

/* ===== footer v27: minimal, left-aligned ===== */
.fm { padding: 48px 0 24px; }
.fm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.fm-brand p { margin: 12px 0 0; max-width: 420px; color: var(--on-navy-muted); font-size: 16px; }
.fm-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.fm-nav a { color: var(--white); font-weight: 600; text-decoration: none; }
.fm-nav a:hover { color: var(--orange); }
.fm-contact { margin-top: 36px; }
.fm-msgs { display: flex; flex-wrap: wrap; gap: 10px; }
.fm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: var(--navy-2); border: 1px solid var(--navy-line); color: var(--white); font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .2s; }
.fm-btn svg { width: 18px; height: 18px; color: var(--orange); flex: 0 0 auto; }
.fm-btn:hover { border-color: var(--navy-line-2); color: var(--white); }
.fm-meta { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: #7F8BA6; }
.fm-meta > * + *::before { content: '·'; margin-right: 10px; color: #4E5D82; }
.fm-meta a { color: var(--on-navy-muted); text-decoration: none; }
.fm-meta a:hover { color: var(--white); }
.fm-tools { margin-top: 40px; padding: 18px 0; border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; overflow-x: clip; }
.fm-h { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7F8BA6; }
.fm-tools ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
@media (min-width: 1100px) {
  .fm-tools { flex-wrap: nowrap; }
  .fm-tools ul { flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
}
.fm-bottom { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; font-size: 13px; color: #7F8BA6; }
.fm-bottom > a { color: var(--on-navy-muted); }
.fm-socials { display: flex; gap: 8px; margin-left: auto; }
.fm-soc { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--navy-line); color: var(--on-navy-muted); display: inline-flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s; }
.fm-soc svg { width: 16px; height: 16px; }
.fm-soc:hover { color: var(--white); border-color: var(--navy-line-2); }
.fm-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--navy-line); }
.fm-lang a { padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; color: #7F8BA6; text-decoration: none; }
.fm-lang a[aria-current="true"] { background: var(--white); color: var(--navy); }
@media (max-width: 640px) {
  .fm { padding-bottom: 96px; }
  .fm-top { flex-direction: column; align-items: flex-start; }
  .fm-socials { margin-left: 0; }
  .fm-tools { flex-direction: column; align-items: flex-start; }
}
.fm .logo-text { display: inline !important; }
@media (max-width: 640px) {
  .fm-meta { flex-direction: column; gap: 4px; }
  .fm-meta > * + *::before { content: none; }
}

/* ===== araRank logo ===== */
.logo .logo-svg { flex: 0 0 auto; width: 34px; height: 34px; color: var(--white); }
.logo .logo-text { font-weight: 800; letter-spacing: -.03em; }
.logo .logo-accent { color: var(--orange); }
.sec-light .logo .logo-svg, .logo.on-light .logo-svg { color: var(--navy); }
.logo .logo-text { font-size: 22px; display: inline !important; }
@media (max-width: 400px) { .logo .logo-text { font-size: 19px; } .logo .logo-svg { width: 28px; height: 28px; } }

.scard-more { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--orange-text); text-decoration: none; }
.scard-more:hover { text-decoration: underline; }



/* v31 hero: custom "marketing network" (search, Maps, reviews, Instagram, analytics, ads) */
.hero-bg { background: radial-gradient(70% 80% at 65% 45%, #1B2B4E, var(--navy) 70%); overflow: hidden; }
.hero-bg::before, .hero-bg::after { display: none !important; }
.hb-art { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.15) 20%, rgba(0,0,0,.4) 42%, #000 62%); mask-image: linear-gradient(90deg, rgba(0,0,0,.15) 20%, rgba(0,0,0,.4) 42%, #000 62%); }
.hb-net .ed { stroke: #E9EEF7; stroke-opacity: .11; stroke-width: 1.1; }
.hb-net .nd { fill: #1B2B4E; stroke: #2A3B62; stroke-width: 1.5; }
.hb-net .ic { fill: none; stroke: #E9EEF7; stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hb-net > g:nth-of-type(4n+2) .ic { stroke: #F28C28; stroke-opacity: .8; }
.hb-net .du { fill: #E9EEF7; fill-opacity: .18; }
.hb-net .ed { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hbDraw .6s ease var(--d, 0s) forwards; }
.hb-net > g { opacity: 0; animation: hbIn .5s ease var(--d, 0s) forwards, hbFloat 10s ease-in-out calc(var(--d, 0s) + .5s) infinite; }
.hb-net > g:nth-child(odd) { animation-duration: .5s, 12s; }
.hb-net > g:nth-child(3n) { animation-duration: .5s, 14s; }
.hb-net > circle:first-of-type { animation: hbGlow 6s ease-in-out infinite; }
@keyframes hbDraw { to { stroke-dashoffset: 0; } }
@keyframes hbIn { to { opacity: 1; } }
@keyframes hbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes hbGlow { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@media (max-width: 640px) { .hb-art { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.45), #000 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35) 50%, #000 75%); } }
@media (prefers-reduced-motion: reduce) { .hb-net > g, .hb-net .ed, .hb-net > circle { animation: none !important; opacity: 1; stroke-dashoffset: 0; } }

/* v31 real projects: one at a time, laptop + phone (option 2) */
.rw2 { position: relative; display: grid; }
.rw2-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px; align-items: center;
  visibility: hidden; transition: visibility 0s linear .4s; }
.rw2-slide.on { visibility: visible; transition: visibility 0s; z-index: 1; }
.rw2-slide:not(.on) .rw2-ctl { visibility: hidden; transition: none; }
.rw2-slide .rw2-dev { opacity: 0; transition: opacity .2s ease; }
.rw2-slide.on .rw2-dev { opacity: 1; transition: opacity .5s ease .2s; }
.rw2-slide .rw2-txt > :not(.rw2-ctl) { transform: translateY(14px); opacity: 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.rw2-slide:not(.on) .rw2-txt > :not(.rw2-ctl) { transition: opacity .18s ease, transform .3s ease; transform: translateY(-8px); }
.rw2-slide.on .rw2-txt > :not(.rw2-ctl) { transform: none; opacity: 1; transition-delay: .2s; }
.rw2-slide.on .rw2-txt > :nth-child(2) { transition-delay: .25s; } .rw2-slide.on .rw2-txt > :nth-child(3) { transition-delay: .29s; }
.rw2-slide.on .rw2-txt > :nth-child(4) { transition-delay: .33s; } .rw2-slide.on .rw2-txt > :nth-child(5) { transition-delay: .37s; }
.rw2-slide .rw2-laptop { transform: translateX(var(--rw2-shift, 40px)) scale(.985); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .2s; }
.rw2-slide.on .rw2-laptop { transform: none; }
.rw2-slide .rw2-phone { transform: translateY(26px); opacity: 0; transition: transform .8s cubic-bezier(.2, .7, .2, 1) .3s, opacity .5s ease .3s; }
.rw2-slide:not(.on) .rw2-phone { transition: opacity .15s ease, transform .2s ease; }
.rw2-slide:not(.on) .rw2-laptop { transition: transform .2s ease; }
.rw2-slide.on .rw2-phone { transform: none; opacity: 1; }
.rw2.go-back { --rw2-shift: -40px; }
.rw2-count { font-size: 13px; font-weight: 700; color: var(--orange-text); letter-spacing: .1em; }
.rw2-txt h3 { margin: 8px 0 2px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
.rw2-tag { margin: 0 0 18px; color: var(--muted-2); }
.rw2-txt ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.rw2-txt li { padding-left: 22px; position: relative; color: var(--muted); }
.rw2-txt li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.rw2-dev { position: relative; padding: 0 44px 40px 0; }
.rw2-dev.no-phone { padding-right: 0; }
.rw2-laptop { display: block; text-decoration: none; }
.rw2-screen { display: block; border: 10px solid #1C2233; border-bottom-width: 12px; border-radius: 16px 16px 4px 4px; overflow: hidden; background: #fff; }
.rw2-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #F2F0EB; border-bottom: 1px solid var(--paper-line); }
.rw2-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D6D1C7; }
.rw2-bar span { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #8A8478; font-size: 11px; font-weight: 600; }
.rw2-shot { display: block; aspect-ratio: 16 / 10; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: var(--paper-2); transition: background-position 1.2s ease; }
.rw2-laptop:hover .rw2-shot { background-position: center bottom; transition: background-position 9s ease-in-out; }
.rw2-base { display: block; height: 14px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#D9DCE3, #B8BDC8); box-shadow: 0 18px 30px rgba(19, 33, 63, .15); }
.rw2-phone { position: absolute; right: 0; bottom: 0; width: 22%; max-width: 160px; border: 7px solid #1C2233; border-radius: 26px; overflow: hidden; box-shadow: 0 20px 40px rgba(19, 33, 63, .3); background: #000; }
.rw2-phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; }
.rw2-ctl { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.rw2-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--paper-line); background: var(--white); color: var(--ink); font-size: 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.rw2-arrow:hover { border-color: var(--orange); }
.rw2-arrow:focus-visible, .rw2-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rw2-dots { display: flex; gap: 6px; margin-left: 10px; }
.rw2-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--paper-line); cursor: pointer; transition: width .25s, background .25s; }
.rw2-dot.on { width: 26px; border-radius: 5px; background: var(--ink); }
@media (max-width: 900px) {
  .rw2-slide { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
  .rw2-dev { order: -1; padding: 0 30px 26px 0; }
  .rw2-base { margin: 0 -3%; }
  .rw2 { overflow-x: clip; }
  .rw2-phone { width: 24%; border-width: 5px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .rw2-slide, .rw2-slide .rw2-dev, .rw2-slide .rw2-txt > *, .rw2-slide .rw2-laptop, .rw2-slide .rw2-phone { transition: none !important; transform: none !important; } .rw2-shot, .rw2-laptop:hover .rw2-shot { transition: none; background-position: center top; } }

/* v31 "We get you found on" stripe under the hero: white, real brand colours */
.fs { background: #fff; border-bottom: 1px solid var(--paper-line); }
.fs-in { display: flex; align-items: center; gap: 28px; padding-top: 22px; padding-bottom: 22px; }
.fs-l { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); }
.fs-m { flex: 1; min-width: 0; }
.fs-in { gap: 22px; }
.fs-t { display: flex; margin: 0; padding: 0; list-style: none; }
.fs-t li { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; color: var(--navy); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.fs-t li + li { border-left: 1px solid #DDD6CA; }
.fs-t li:first-child { padding-left: 0; }
.fs-t li:last-child { padding-right: 0; }
.fs-t svg { flex: none; width: 18px; height: 18px; color: var(--navy); }
@media (max-width: 1100px) { .fs-t li { font-size: 12.5px; gap: 6px; padding: 0 8px; } .fs-t svg { width: 16px; height: 16px; } }
/* phone and tablet: one line, one service at a time (main.js swaps them) */
@media (max-width: 900px) {
  .fs-in { flex-direction: row; align-items: center; gap: 0; padding-top: 16px; padding-bottom: 16px; }
  .fs-l { font-size: 10.5px; padding-right: 14px; border-right: 1px solid #DDD6CA; }
  .fs-t { padding-left: 14px; }
  .fs-t li { flex: none; padding: 0; border: 0; font-size: 14.5px; gap: 8px; }
  .fs-t li + li { border-left: 0; display: none; }
  .fs-t.cyc li { display: none; }
  .fs-t.cyc li.on { display: inline-flex; animation: fsIn .6s ease; }
  .fs-t svg { width: 20px; height: 20px; }
}
@keyframes fsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fs-t li.on { animation: none; } }

/* v31 footer: "Tools we use" row removed; divider line above the bottom row instead */
.fm-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--navy-line); }

/* v31 header: warm cream (option D) on every page */
.site-header { background: #FAF7F2; border-bottom: 1px solid #E7E0D4; }
.site-header .logo, .site-header .logo .logo-text, .site-header .logo .logo-svg { color: var(--navy); }
.site-header .nav a { color: #3B4763; }
.site-header .nav a:hover, .site-header .nav a[aria-current="page"] { color: var(--navy); background: rgba(19, 33, 63, .06); }
.site-header .nav li + li::before { background: #D9D2C4; border-color: #D9D2C4; }
.site-header .lang { border-color: #E1D9CB; background: #fff; }
.site-header .lang a { color: #626B82; }
.site-header .lang a:hover { color: var(--navy); }
.site-header .lang a[aria-current="true"] { background: var(--navy); color: #fff; }
.site-header .menu-btn { color: var(--navy); border-color: #E1D9CB; }
@media (max-width: 1080px) {
  .site-header .nav { background: #FAF7F2; border-bottom-color: #E7E0D4; box-shadow: 0 16px 30px rgba(19, 33, 63, .12); }
  .site-header .nav a { color: var(--navy); }
}

/* v32 search-result phone */
.mk-serp .mk-pad{display:grid;gap:10px;text-align:left}
.sp-r{position:relative;display:grid;gap:5px;padding:9px 10px;border-radius:10px;background:#F4F6FA}
.sp-r i{display:block;width:46%;height:6px;border-radius:3px;background:#C9D2E3}
.sp-r b{display:block;width:80%;height:9px;border-radius:3px;background:#A9B6D0}
.sp-r em{display:block;width:92%;height:6px;border-radius:3px;background:#DCE2EE}
.sp-r em.s{width:64%}
.sp-you{background:#fff;border:1.5px solid #F28C28;box-shadow:0 6px 16px rgba(242,140,40,.18)}
.sp-you strong{font-size:13px;color:#1A3FB0}
.sp-you i{background:#9FD5A8}
.sp-top{position:absolute;top:-9px;right:8px;padding:2px 8px;border-radius:999px;background:#F28C28;color:#13213F;font-size:10px;font-weight:800}

/* ===== About (one person), contact, footer note ===== */
.tcard-lg { align-items: flex-start; padding: 22px; gap: 22px; }
.tcard-lg img { width: 150px; height: 150px; border-radius: 16px; }
.tcard-lg .tcard-body b { font-size: 21px; }
.tcard-lg .tcard-short { font-size: 15px; line-height: 1.55; }
.tcard-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tcard-facts span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--navy-line); color: var(--on-navy); font-size: 12.5px; font-weight: 600; }
.cta-msgs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-note { flex-basis: 100%; color: #7F8BA6; }
@media (max-width: 560px) { .tcard-lg { flex-direction: column; } .tcard-lg img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: center 30%; } }

/* ===== Blog ===== */
.sec-white { background: var(--white); color: var(--ink); }
.bc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--white); border: 1px solid var(--paper-line); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.bc:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(19, 33, 63, .1); border-color: #E2DACB; }
.bc-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; background: var(--navy); overflow: hidden; }
.bc-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 78% 20%, rgba(242,140,40,.28), rgba(242,140,40,0) 55%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }
.bc-pin .bc-cover, .bc-cover.bc-pin { background: #1B2B4E; }
.bc-cover.bc-target { background: #22335A; }
.bc-cover.bc-scales { background: #0F1A33; }
.bc-ic { position: relative; width: 64px; height: 64px; color: var(--orange); }
.bc-cat { position: absolute; left: 14px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--white); font-size: 12px; font-weight: 700; }
.bc-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.bc-body .bc-tag { display: none; }
.bc h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.bc h3 a { color: var(--ink); text-decoration: none; }
.bc h3 a:hover { color: var(--orange-text); }
.bc h3 a::after { content: ''; position: absolute; inset: 0; }
.bc { position: relative; }
.bc-body p { margin: 0; color: var(--muted); font-size: 14.5px; flex: 1; }
.bc-meta { font-size: 13px; color: var(--muted-2); }
.bc-tag { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #FFF1E2; color: var(--orange-text); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bc-lg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.bc-lg .bc-cover { aspect-ratio: auto; min-height: 300px; }
.bc-lg .bc-ic { width: 96px; height: 96px; }
.bc-lg .bc-body { justify-content: center; padding: 36px; gap: 12px; }
.bc-lg .bc-body .bc-tag { display: inline-block; }
.bc-lg h3 { font-size: 30px; line-height: 1.15; }
.bc-lg .bc-body p { flex: 0; font-size: 16px; }
.blog-h { margin: 48px 0 20px; font-size: 24px; }
.sec-white .blog-h { margin-top: 0; }
.blog-hero .page-hero-text { max-width: 720px; }
.au { display: inline-flex; align-items: center; gap: 12px; }
.au img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); }
.au b { display: block; font-size: 15px; }
.au span span { display: block; font-size: 13px; color: var(--muted); }
.sec-dark .au span span { color: var(--on-navy-muted); }
.sec-dark .au b { color: var(--white); }
.blog-cta { padding: 64px 0; }
.blog-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.blog-cta h2 { margin: 0 0 6px; }
.blog-cta .lead { margin: 0; }

/* article */
.post-head { padding: 40px 0 8px; }
.post-head .wrap { max-width: 1180px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 13px; color: var(--muted-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--orange-text); }
.post-head h1 { max-width: 860px; margin: 14px 0 14px; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; color: var(--ink); }
.post-lead { max-width: 760px; margin: 0; font-size: 19px; line-height: 1.6; color: #36405A; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--paper-line); }
.post-date { font-size: 14px; color: var(--muted-2); }
.post-wrap { padding: 36px 0 72px; }
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.post-body { max-width: 740px; font-size: 17px; line-height: 1.75; }
.post-body h2 { font-size: 26px; line-height: 1.25; margin: 40px 0 10px; color: var(--ink); scroll-margin-top: 90px; }
.post-body p { margin: 0 0 16px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; gap: 8px; }
.post-body ol { display: flex; flex-direction: column; }
.post-body a { color: var(--orange-text); font-weight: 600; }
.post-body b { color: var(--ink); }
.takeaways { margin: 0 0 28px; padding: 20px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--paper-line); }
.takeaways > b { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); }
.takeaways ul { margin: 0; }
.note { margin: 20px 0; padding: 16px 20px; border-radius: 12px; background: #FFF6EC; border: 1px solid #F7DDBF; font-size: 15.5px; line-height: 1.6; color: #5A4632; }
.checklist { counter-reset: c; list-style: none; padding-left: 0 !important; }
.checklist li { position: relative; padding: 14px 16px 14px 56px; border-radius: 12px; background: var(--white); border: 1px solid var(--paper-line); }
.checklist li::before { counter-increment: c; content: counter(c); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1; }
.table-wrap { overflow-x: auto; margin: 8px 0 24px; border: 1px solid var(--paper-line); border-radius: 12px; background: var(--white); }
.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-wrap th, .table-wrap td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-line); }
.table-wrap thead th { background: var(--navy); color: var(--white); font-size: 14px; }
.table-wrap tbody td:first-child { font-weight: 700; color: var(--ink); }
.table-wrap tr:last-child td { border-bottom: 0; }
.post-sources { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--paper-line); }
.post-sources h2 { font-size: 18px; margin-top: 24px; }
.post-sources li { font-size: 15px; }
.author-box { display: flex; gap: 18px; align-items: flex-start; margin-top: 36px; padding: 22px; border-radius: var(--radius); background: var(--navy); color: var(--on-navy); }
.author-box img { flex: none; width: 76px; height: 76px; border-radius: 14px; object-fit: cover; }
.author-box b { color: var(--white); font-size: 17px; }
.author-box p { margin: 6px 0 8px; color: var(--on-navy-muted); font-size: 15px; line-height: 1.6; }
.author-box a { color: var(--orange); }
.post-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.toc { padding: 18px 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--paper-line); }
.toc b { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.toc ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--orange-text); }
.side-cta { padding: 20px; border-radius: var(--radius); background: var(--navy); color: var(--on-navy); }
.side-cta b { color: var(--white); font-size: 17px; }
.side-cta p { margin: 6px 0 14px; font-size: 14px; color: var(--on-navy-muted); }
@media (max-width: 1000px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .post-side { position: static; }
  .toc { display: none; }
  .bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bc-lg { grid-template-columns: minmax(0, 1fr); }
  .bc-lg .bc-cover { min-height: 0; aspect-ratio: 16 / 8; }
  .bc-lg .bc-body { padding: 22px; }
  .bc-lg h3 { font-size: 23px; }
}
@media (max-width: 640px) {
  .bc-grid, .bc-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .post-body { font-size: 16.5px; }
  .post-lead { font-size: 17px; }
  .author-box { flex-direction: column; }
}

/* ===== Hero search widget (layout; colors are in the cream and frosted glass blocks below): types a search, shows the client site we built ===== */
.hs { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 0; }
.hs-card, .hs-foot { width: 100%; max-width: 440px; }
.hs-card { position: relative; padding: 22px 22px 18px; border-radius: 18px; background: rgba(27, 43, 78, .78); border: 1px solid var(--navy-line); color: var(--on-navy); box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: hm-in .8s ease-out .15s both; }
.hs-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--white); }
.hs-brand svg { width: 22px; height: 22px; }
.hs-bar { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--navy-line); border-radius: 999px; background: var(--navy); cursor: text; font-size: 15px; color: var(--white); transition: border-color .2s, box-shadow .2s; }
.hs-bar:hover, .hs-bar:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 140, 40, .18); }
.hs-bar svg { flex: none; width: 17px; height: 17px; color: var(--orange); }
.hs-q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-caret { flex: none; width: 2px; height: 18px; margin-left: -8px; background: var(--orange); animation: hsBlink 1.05s step-end infinite; }
@keyframes hsBlink { 50% { opacity: 0; } }
.hs-input { position: absolute; inset: 0; width: 100%; padding: 0 18px 0 45px; border: 0; border-radius: 999px; background: transparent; color: var(--white); font: inherit; font-size: 15px; opacity: 0; }
.hs-input::placeholder { color: #8292B3; }
.hs-input:focus { outline: none; }
.hs-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hs.typing .hs-input { opacity: 1; }
.hs.typing .hs-q, .hs.typing .hs-caret { display: none; }
.hs-result { display: flex; gap: 14px; align-items: flex-start; min-height: 236px; margin-top: 16px; padding: 18px; border-radius: 14px; background: var(--navy); border: 1px solid var(--navy-line); text-decoration: none; color: inherit; transition: opacity .3s ease, transform .3s ease, background .2s, border-color .2s; }
.hs-result:hover { background: #172748; border-color: var(--navy-line-2, #3A4C76); }
.hs-result:hover .hs-title { color: var(--orange); }
.hs-result.off { opacity: 0; transform: translateY(6px); }
.hs-txt { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.hs-url { display: block; margin-bottom: 4px; font-size: 12.5px; color: #9FB0CF; }
.hs-title { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--white); transition: color .2s; }
.hs-snip { display: block; font-size: 14px; line-height: 1.55; color: #B9C4DA; }
.hs-built { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(242, 140, 40, .16); color: #F7B26A; font-size: 11.5px; font-weight: 700; }
.hs-thumb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 92px; padding-top: 2px; text-align: center; }
.hs-face { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--navy) center / cover no-repeat; color: var(--white); font-size: 20px; font-weight: 800; box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--orange); }
.hs-who { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hs-chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--navy-line); border-radius: 999px; background: transparent; color: #C9D2E6; font: inherit; font-size: 12.5px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.hs-chip:hover { background: var(--navy); }
.hs-chip.on { background: var(--orange); border-color: var(--orange); color: var(--navy); font-weight: 600; }
.hs-foot { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--on-navy-muted); }
@media (max-width: 900px) { .hs { align-items: stretch; } .hs-card, .hs-foot { max-width: none; } }
@media (max-width: 560px) {
  .hs-card { padding: 16px 14px 14px; }
  .hs-result { min-height: 0; }
  .hs-thumb { width: 72px; } .hs-face { width: 60px; height: 60px; font-size: 17px; }
  .hs-title { font-size: 17px; }
  .hs-chips { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hs-caret { animation: none; } .hs-result { transition: none; } .hs-card { animation: none; } }

/* ===== Our story: Sevag & Diana (photo melts into the dark) ===== */
.st { position: relative; overflow: hidden; background: #0B0F1A; color: #C9D2E6; }
.st-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 720px; }
.st-img { position: relative; background: #000; }
.st-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.st-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 26, 0) 55%, #0B0F1A 100%), linear-gradient(0deg, rgba(11, 15, 26, .6), rgba(11, 15, 26, 0) 30%); }
.st-txt { align-self: center; padding: 72px max(24px, calc((100vw - 1180px) / 2)) 72px 56px; }
.st .eyebrow { margin-bottom: 10px; }
.st h2 { margin: 0 0 16px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: var(--white); }
.st-lead { margin: 0 0 12px; font-size: 19px; line-height: 1.55; color: #E9EEF7; }
.st-p { margin: 0 0 22px; font-size: 16px; line-height: 1.65; }
.st-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.st-stats li { padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.st-stats b { display: block; font-size: 24px; line-height: 1.1; color: var(--orange); }
.st-stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #9FB0CF; }
.st-people { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0 0 24px; }
.st-pp { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.st-pp img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy-line); transition: border-color .2s; }
.st-pp:hover img { border-color: var(--orange); }
.st-pp b { display: block; font-size: 15px; color: var(--white); }
.st-pp small { display: block; font-size: 13px; color: #9FB0CF; }
.st .btn-line { color: var(--white); border-color: rgba(255, 255, 255, .35); background: transparent; }
.st .btn-line:hover { border-color: var(--white); color: var(--white); }
@media (max-width: 900px) {
  .st-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .st-img { min-height: 460px; }
  .st-img::after { background: linear-gradient(0deg, #0B0F1A 0%, rgba(11, 15, 26, 0) 45%); }
  .st-txt { padding: 8px 16px 64px; }
  .st-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ===== How we work (dark, 4 steps) ===== */
.hw-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 40px; margin-bottom: 36px; }
.hw-head h2 { max-width: 620px; margin: 0; }
.hw-head > p { max-width: 380px; margin: 0; color: var(--on-navy-muted); }
.hw-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hw-steps::before { content: ''; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: linear-gradient(90deg, var(--orange), rgba(242, 140, 40, .15)); }
.hw-steps li { position: relative; padding: 0 4px; }
.hw-n { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--navy); border: 2px solid var(--orange); color: var(--white); font-size: 20px; font-weight: 800; }
.hw-when { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.hw-steps h3 { margin: 0 0 6px; font-size: 20px; color: var(--white); }
.hw-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--on-navy-muted); }
.hw-promises { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--navy-line); list-style: none; }
.hw-promises li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--navy-2); border: 1px solid var(--navy-line); color: #E9EEF7; font-size: 14px; font-weight: 600; }
.hw-promises li::before { content: '✓'; color: var(--orange); font-weight: 800; }
.hw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.hw-cta span { color: var(--on-navy-muted); font-size: 14px; }
@media (max-width: 900px) { .hw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .hw-steps::before { display: none; } }
@media (max-width: 560px) { .hw-steps { grid-template-columns: minmax(0, 1fr); } }

/* ===== Dark sections are shorter than light ones (Our story keeps its size) ===== */
.sec-tight { padding: 56px 0; }
@media (max-width: 600px) { .sec-tight { padding: 44px 0; } }
.hw-head { margin-bottom: 28px; }
.hw-promises { margin-top: 28px; padding-top: 20px; }
.hw-cta { margin-top: 20px; }

/* ===== FAQ on dark ===== */
.faq-dark .faq-head h2 { color: var(--white); }
.faq-dark .faq-head p:not(.eyebrow) { color: var(--on-navy-muted); }
.faq-dark .faq-list { border-top-color: var(--navy-line); }
.faq-dark .faq-item { border-bottom-color: var(--navy-line); }
.faq-dark .faq-item summary { padding: 16px 0; color: var(--white); }
.faq-dark .faq-item summary::after { border-color: #3A4C76; color: #C9D2E6; }
.faq-dark .faq-item[open] summary { color: var(--orange); }
.faq-dark .faq-item[open] summary::after { border-color: var(--orange); color: var(--orange); }
.faq-dark .faq-item p { color: var(--on-navy-muted); }
.faq-dark .faq-item summary:focus-visible { outline-color: var(--orange); }

/* ===== Real projects on dark ===== */
.rw-dark .rw-head .eyebrow { color: var(--orange); }
.rw-dark .rw-h { color: var(--white); }
.rw-dark .rw-head p { color: var(--on-navy-muted); }
.rw-dark .rw2-count { color: var(--orange); }
.rw-dark .rw2-txt h3 { color: var(--white); }
.rw-dark .rw2-tag { color: #9FB0CF; }
.rw-dark .rw2-txt li { color: #C9D2E6; }
.rw-dark .rw2-arrow { background: transparent; border-color: var(--navy-line); color: var(--white); }
.rw-dark .rw2-arrow:hover { border-color: var(--orange); }
.rw-dark .rw2-dot { background: var(--navy-line); }
.rw-dark .rw2-dot.on { background: var(--orange); }
.rw-dark .rw2-screen, .rw-dark .rw2-phone { border-color: #0B1428; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.rw-dark .rw2-base { background: linear-gradient(#55607A, #2A3552); box-shadow: none; }
.rw-dark .rw-head { margin-bottom: 20px; }

/* ===== What clients say ===== */
.rq-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 36px; }
.rq-head h2 { margin: 0; }
.rq-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rq-facts li { padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--paper-line); font-size: 14px; color: var(--muted); }
.rq-facts b { color: var(--ink); }
.rq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.rq { display: flex; flex-direction: column; height: 100%; margin: 0; border-radius: 20px; background: var(--white); border: 1px solid var(--paper-line); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.rq:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(19, 33, 63, .35); }
.rq-top { position: relative; padding: 22px 22px 0; background: linear-gradient(160deg, var(--navy), #22335C); }
.rq-win { position: relative; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--white); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.rq-win img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: top; }
.rq-bar { display: flex; gap: 6px; padding: 10px 12px; background: #EEF0F4; border-bottom: 1px solid var(--paper-line); }
.rq-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CDD3DE; }
.rq-url { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 2px 14px; border-radius: 6px; background: var(--white); font-size: 11px; color: var(--muted); white-space: nowrap; }
.rq-chip { position: absolute; left: 14px; bottom: 12px; z-index: 1; padding: 5px 11px; border-radius: 999px; background: var(--orange); color: var(--navy); font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
.rq blockquote { flex: 1; margin: 0; padding: 24px 24px 18px; }
.rq-mark { display: block; height: 30px; font-size: 60px; line-height: 1; font-weight: 800; color: var(--orange); }
.rq blockquote p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.rq figcaption { display: flex; align-items: center; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--paper-line); }
.rq-av { flex: none; display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--navy); box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--paper-line); }
.rq-who { flex: 1; min-width: 0; }
.rq-who b { display: block; color: var(--ink); font-size: 15.5px; }
.rq-who span { display: block; color: var(--muted); font-size: 13.5px; }
.rq-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--orange-text); font-weight: 800; text-decoration: none; transition: background .2s, color .2s; }
.rq-go:hover { background: var(--orange); color: var(--navy); }
@media (max-width: 900px) { .rq-grid { grid-template-columns: minmax(0, 1fr); } .rq-head { margin-bottom: 24px; } }

/* ===== How we work on light ===== */
.hw-light .hw-head h2 { color: var(--ink); }
.hw-light .hw-head > p, .hw-light .hw-steps p, .hw-light .hw-cta span { color: var(--muted); }
.hw-light .hw-steps h3 { color: var(--ink); }
.hw-light .hw-n { background: var(--navy); color: var(--white); border-color: var(--navy); }
.hw-light .hw-when { color: var(--orange-text); }
.hw-light .hw-promises { border-top-color: var(--paper-line); }
.hw-light .hw-promises li { background: var(--white); border-color: var(--paper-line); color: var(--ink); }
.hw-light .hw-promises li::before { color: var(--orange-text); }

/* ===== Call banner (small dark band) ===== */
.callband { background: var(--navy); }
.callband-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; padding-top: 28px; padding-bottom: 28px; }
.callband p { margin: 0; color: var(--on-navy-muted); font-size: 17px; }
.callband p b { color: var(--white); }
.callband-faces img { width: 44px; height: 44px; border-color: var(--navy); }
.callband .btn svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .callband-in { justify-content: flex-start; } .callband .btn { width: 100%; } }
.rw-dark.sec-tight { padding: 44px 0 40px; }
.rw-dark .rw-head { margin-bottom: 8px; }
@media (min-width: 901px) { .rw-dark .rw2-slide { grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); } }

/* How we work, compact dark (v4) */
.hw-dark.sec-tight { padding: 44px 0 40px; }
.hw-dark .hw-head { margin-bottom: 22px; }
.hw-dark .hw-n { width: 46px; height: 46px; margin-bottom: 12px; font-size: 18px; }
.hw-dark .hw-steps::before { top: 22px; left: 23px; right: 23px; }
.hw-dark .hw-steps h3 { font-size: 18px; margin-bottom: 4px; }
.hw-dark .hw-steps p { font-size: 14.5px; line-height: 1.55; }
.hw-dark .hw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--navy-line); }
.hw-dark .hw-foot .hw-promises { margin: 0; padding: 0; border: 0; gap: 8px; }
.hw-dark .hw-foot .hw-promises li { padding: 6px 12px; font-size: 13.5px; }
.hw-dark .hw-foot .hw-cta { margin: 0; }
@media (max-width: 700px) {
  .rq-facts li { padding: 6px 11px; font-size: 13px; }
  .rq-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 18px; scrollbar-width: none; align-items: stretch; }
  .rq-grid::-webkit-scrollbar { display: none; }
  .rq { scroll-snap-align: center; }
  .rq:hover { transform: none; }
  .rq blockquote p { font-size: 15.5px; }
}

/* ===== Hero search widget: cream paper look (replaces navy glass colors) ===== */
.hs-card { background: var(--paper); border: 0; border-radius: 20px; color: var(--navy); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hs-brand { justify-content: flex-start; gap: 10px; }
.hs-brand span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); }
.hs-bar { background: var(--white); border-color: #E7E0D4; color: var(--navy); box-shadow: none; }
.hs-bar:hover, .hs-bar:focus-within { border-color: var(--navy); box-shadow: none; }
.hs-bar svg { color: var(--navy); }
.hs-input { color: var(--navy); }
.hs-input::placeholder { color: #8A90A0; }
.hs-result { background: var(--white); border-color: #EDE6DA; }
.hs-result:hover { background: var(--white); border-color: var(--orange); }
.hs-result:hover .hs-title { color: var(--orange-text); }
.hs-url { color: #626B82; }
.hs-title { color: var(--navy); }
.hs-snip { color: #4E5872; }
.hs-built { background: var(--navy); color: var(--white); }
.hs-chip { background: var(--white); border-color: #E7E0D4; color: #4E5872; }
.hs-chip:hover { background: var(--white); border-color: var(--navy); color: var(--navy); }
.hs-chip.on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.hs-chip:focus-visible, .hs-result:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }

/* ===== Hero search widget: frosted glass (on top of the cream colors above) ===== */
.hs-card { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: var(--white); box-shadow: 0 30px 70px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.hs-brand span { color: #F7B26A; }
.hs-bar { background: rgba(255, 255, 255, .95); border-color: transparent; }
.hs-bar:hover, .hs-bar:focus-within { border-color: var(--orange); }
.hs-result { background: rgba(255, 255, 255, .95); border-color: transparent; }
.hs-result:hover { background: var(--white); border-color: var(--orange); }
.hs-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #E9EEF7; }
.hs-chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); color: var(--white); }
.hs-chip.on { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.hs-chip:focus-visible, .hs-result:focus-visible { outline-color: var(--orange); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hs-card { background: rgba(40, 56, 92, .92); } }

/* Search result: firm logo band on top, attorney face on the right */
.hs-result { flex-wrap: wrap; overflow: hidden; }
.hs-logo { display: none; }
.hs-result.has-logo { padding-top: 0; }
.has-logo .hs-logo { flex: 0 0 calc(100% + 36px); display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; margin: 0 -18px 14px; padding: 0 18px; background: linear-gradient(120deg, var(--navy), #22335C); border-bottom: 3px solid var(--orange); }
.hs-logo img { display: block; height: 38px; width: auto; max-width: 68%; object-fit: contain; object-position: left center; }
.hs-logo em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #F7B26A; white-space: nowrap; }
.has-logo .hs-built { display: none; }
.hs-face { width: 64px; height: 64px; }
@media (max-width: 560px) { .has-logo .hs-logo { flex-basis: calc(100% + 36px); height: 52px; } .hs-logo img { height: 32px; } .hs-logo em { font-size: 10px; } }

/* Home page blog: featured article + list */
.bf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
.bf a { text-decoration: none; color: inherit; }
.bf-feat { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--white); border: 1px solid var(--paper-line); transition: border-color .2s, box-shadow .2s; }
.bf-feat:hover { border-color: var(--orange); box-shadow: 0 24px 50px -30px rgba(19, 33, 63, .35); }
.bf-feat .bc-cover { aspect-ratio: 16 / 7; }
.bf-feat .bc-ic { width: 84px; height: 84px; }
.bf-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 26px 26px; }
.bf-title { font-size: 24px; line-height: 1.25; color: var(--ink); transition: color .2s; }
.bf-feat:hover .bf-title { color: var(--orange-text); }
.bf-p { color: var(--muted); font-size: 15px; }
.bf-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bf-list li { flex: 1; }
.bf-list a { display: flex; align-items: center; gap: 16px; height: 100%; padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--paper-line); transition: border-color .2s; }
.bf-list a:hover { border-color: var(--orange); }
.bf-ic { flex: none; position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 12px; background: var(--navy); overflow: hidden; }
.bf-ic.bc-pin { background: #1B2B4E; } .bf-ic.bc-target { background: #22335A; } .bf-ic.bc-scales { background: #0F1A33; }
.bf-ic .bc-ic { width: 38px; height: 38px; }
.bf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bf-t b { font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.bf-arr { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--paper-line); background: var(--white); color: var(--ink); font-weight: 700; transition: background .2s, border-color .2s; }
.bf-list a:hover .bf-arr { background: var(--orange); border-color: var(--orange); color: var(--navy); }
@media (max-width: 900px) { .bf { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .bf-ic { width: 60px; height: 60px; } .bf-ic .bc-ic { width: 30px; height: 30px; } .bf-title { font-size: 20px; } .bf-body { padding: 20px; } .bf-list a { gap: 12px; padding: 14px; } .bf-arr { display: none; } }

/* FAQ: numbered list (like the blog list mockup B) */
.faq-num .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.faq-num .faq-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 40px; }
.faq-num .faq-head h2 { margin: 0; }
.faq-num .faq-head > p { max-width: 360px; margin: 0; }
.faq-num .faq-list { counter-reset: faq; }
.faq-num .faq-item { counter-increment: faq; padding: 0 12px; border-radius: 0; transition: background .2s; }
.faq-num .faq-item:hover, .faq-num .faq-item[open] { background: var(--white); }
.faq-num .faq-item summary { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 20px; align-items: center; padding: 20px 0; font-size: 18px; font-weight: 700; }
.faq-num .faq-item summary::before { content: counter(faq, decimal-leading-zero); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--orange); }
.faq-num .faq-item summary::after { width: 40px; height: 40px; border: 1px solid var(--paper-line); background: var(--white); color: var(--ink); font-size: 20px; transition: rotate .2s, background .2s, border-color .2s; }
.faq-num .faq-item:hover summary::after { border-color: var(--orange); }
.faq-num .faq-item[open] summary::after { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.faq-num .faq-item p { margin: -6px 60px 22px 84px; padding: 0; font-size: 15.5px; }
@media (max-width: 560px) {
  .faq-num .faq-item { padding: 0 8px; }
  .faq-num .faq-item summary { grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 12px; padding: 16px 0; font-size: 16px; }
  .faq-num .faq-item summary::before { font-size: 20px; }
  .faq-num .faq-item summary::after { width: 32px; height: 32px; font-size: 17px; }
  .faq-num .faq-item p { margin: -4px 8px 18px 48px; font-size: 15px; }
}

/* Featured images: cards, home list and article hero */
.bc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bc-cover .bc-cat { z-index: 1; background: rgba(19, 33, 63, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bc:hover .bc-cover img, .bf-feat:hover .bc-cover img { transform: scale(1.04); }
.bf-ic { width: 120px; height: 84px; }
.bf-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .bf-ic { width: 88px; height: 62px; } }

.post-hero { position: relative; padding: 56px 0 0; background: var(--navy) right center / auto 100% no-repeat; color: var(--white); isolation: isolate; }
.post-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #13213F 0%, #13213F 38%, rgba(19, 33, 63, .72) 58%, rgba(19, 33, 63, .2) 100%), linear-gradient(0deg, rgba(19, 33, 63, .85), rgba(19, 33, 63, 0) 35%); }
.post-hero h1, .post-hero .post-lead { max-width: 720px; }
.post-hero h1 { color: var(--white); }
.post-hero .post-lead { color: #D5DCEA; }
.post-hero .crumbs, .post-hero .crumbs span { color: #9FB0CF; }
.post-hero .crumbs a { color: #C9D2E6; }
.post-hero .crumbs a:hover { color: var(--orange); }
.post-hero .bc-tag { background: rgba(242, 140, 40, .18); color: #F7B26A; }
.post-hero .post-meta { margin-top: 28px; padding: 22px 0 30px; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.post-hero .post-meta, .post-hero .post-meta b { color: var(--white); }
.post-hero .post-meta span span, .post-hero .post-date { color: #B7C2D8; }
@media (max-width: 900px) { .post-hero { background-position: center; background-size: cover; } .post-hero::before { background: rgba(19, 33, 63, .86); } }
@media (max-width: 700px) { .post-hero { padding-top: 36px; } }
.bf-feat .bc-cat { top: 14px; bottom: auto; }
/* the image says what it is; the topic tag moves under the image */
.bc-cover .bc-cat { display: none; }
.bc-body .bc-tag { display: inline-block; }

/* Contact: orange card floating over the footer */
section#contact.kc { padding: 8px 0 0; border-top: 0; background: linear-gradient(180deg, var(--paper) 0 58%, var(--navy) 58% 100%); }
.kc-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding: 48px; border-radius: 28px; background: var(--orange); color: var(--navy); box-shadow: 0 40px 90px -40px rgba(10, 20, 40, .7); background-image: radial-gradient(600px 320px at 0% 0%, rgba(255, 255, 255, .22), transparent 60%); }
.kc .eyebrow { color: var(--navy); opacity: .8; }
.kc h2 { margin: 8px 0 14px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; color: var(--navy); }
.kc-lead { max-width: 500px; margin: 0; font-size: 17.5px; color: #2A1A12; }
.kc-team { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.kc-team b { display: block; font-size: 16px; }
.kc-team em { display: block; font-style: normal; font-size: 14px; color: #3B2414; }
.kc-faces { display: flex; }
.kc-faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--orange); }
.kc-faces img + img { margin-left: -14px; }
.kc-direct { display: grid; gap: 10px; max-width: 440px; margin-top: 22px; }
.kc-direct a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(19, 33, 63, .08); border: 1px solid rgba(19, 33, 63, .22); color: var(--navy); text-decoration: none; transition: background .2s, border-color .2s; }
.kc-direct a:hover { background: rgba(19, 33, 63, .14); border-color: var(--navy); }
.kc-direct svg { flex: none; width: 22px; height: 22px; color: var(--navy); }
.kc-direct b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.kc-direct em { display: block; font-style: normal; font-size: 13px; color: #3B2414; }
.kc-form { padding: 28px; border-radius: 20px; background: var(--white); color: var(--ink); box-shadow: 0 30px 70px -30px rgba(19, 33, 63, .6); }
.kc-form h3 { margin: 0 0 16px; font-size: 22px; color: var(--ink); }
.kc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kc-fields .full { grid-column: 1 / -1; }
.kc-form .btn { width: 100%; margin-top: 16px; }
.btn-navy { background: var(--navy); border: 1px solid var(--navy); color: var(--white); }
.btn-navy:hover { background: #1F3054; border-color: #1F3054; color: var(--white); }
.kc-form .form-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.kc-form .form-note a { color: var(--orange-text); }
.kc + .site-footer { padding-top: 64px; border-top: 0; }
@media (max-width: 900px) { .kc-card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px; } section#contact.kc { padding-top: 0; background: linear-gradient(180deg, var(--paper) 0 82%, var(--navy) 82% 100%); } .kc-fields { grid-template-columns: minmax(0, 1fr); } }

/* Contact card: deep-to-bright orange, off-white text, cream form */
.kc-card { background-color: #C25F0C; background-image: linear-gradient(100deg, #B04F08 0%, #C25F0C 40%, var(--orange) 100%); color: #FFF6EC; }
.kc h2, .kc .eyebrow, .kc-team b, .kc-direct a, .kc-direct svg { color: #FFF6EC; }
.kc .eyebrow { opacity: .85; }
.kc-lead, .kc-team em, .kc-direct em { color: #FCE3C8; }
.kc-faces img { border-color: #B8560A; }
.kc-direct a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 246, 236, .35); }
.kc-direct a:hover { background: rgba(255, 255, 255, .18); border-color: #FFF6EC; }
.kc-form { background: var(--paper); }
@media (max-width: 900px) { .kc-card { background-image: linear-gradient(170deg, #B04F08 0%, #C25F0C 45%, var(--orange) 100%); } }

/* Contact as a full-width section (remove "kc-full" from the section to go back to the floating card) */
section#contact.kc.kc-full { padding: 84px 0; background: #C25F0C linear-gradient(100deg, #A94C07 0%, #C25F0C 40%, var(--orange) 100%); }
section#contact.kc.kc-full::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 380px at 8% 0%, rgba(255, 255, 255, .14), transparent 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 18px); }
.kc-full { position: relative; }
.kc-full .kc-card { position: relative; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.kc-full + .site-footer { padding-top: 48px; }
@media (max-width: 900px) { section#contact.kc.kc-full { padding: 56px 0; background-image: linear-gradient(170deg, #A94C07 0%, #C25F0C 45%, var(--orange) 100%); } }

/* Contact, flipped: cream section, orange form (remove "kc-inv" to go back to the orange section) */
section#contact.kc.kc-full.kc-inv { background: var(--paper-2); border-top: 1px solid var(--paper-line); }
section#contact.kc.kc-full.kc-inv::before { background: radial-gradient(700px 380px at 90% 10%, rgba(242, 140, 40, .12), transparent 60%); }
.kc-inv h2, .kc-inv .kc-team b, .kc-inv .kc-direct a, .kc-inv .kc-direct b { color: var(--ink); }
.kc-inv .eyebrow { color: var(--orange-text); opacity: 1; }
.kc-inv .kc-lead { color: var(--muted); }
.kc-inv .kc-team em, .kc-inv .kc-direct em { color: var(--muted); }
.kc-inv .kc-faces img { border-color: var(--paper-2); }
.kc-inv .kc-direct a { background: var(--white); border-color: var(--paper-line); }
.kc-inv .kc-direct a:hover { background: var(--white); border-color: var(--orange); }
.kc-inv .kc-direct svg { color: var(--orange); }
.kc-inv .kc-form { background: #C25F0C linear-gradient(160deg, #A94C07 0%, #C25F0C 55%, #D06A10 100%); color: #FFF6EC; box-shadow: 0 30px 70px -30px rgba(169, 76, 7, .7); }
.kc-inv .kc-form h3 { color: #FFF6EC; }
.kc-inv .kc-form .field { color: #FFF1E2; }
.kc-inv .kc-form .field input, .kc-inv .kc-form .field select, .kc-inv .kc-form .field textarea { border-color: transparent; background: #FFFBF6; }
.kc-inv .kc-form .field input:focus, .kc-inv .kc-form .field select:focus, .kc-inv .kc-form .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(19, 33, 63, .25); }
.kc-inv .kc-form .form-note { color: #FCE3C8; }
.kc-inv .kc-form .form-note a { color: #FFF6EC; }
.kc-inv .kc-form .form-status { color: #FFF6EC; }
@media (max-width: 900px) { section#contact.kc.kc-full.kc-inv { background: var(--paper-2); } }

/* Floating contact card, 20% smaller (desktop) */
@media (min-width: 901px) {
  .kc-card { max-width: 906px; margin: 0 auto; gap: 32px; padding: 32px 36px; border-radius: 24px; }
  .kc h2 { font-size: 35px; margin: 6px 0 10px; }
  .kc-lead { font-size: 15.5px; }
  .kc-team { margin-top: 20px; gap: 12px; }
  .kc-faces img { width: 44px; height: 44px; }
  .kc-direct { margin-top: 16px; gap: 8px; }
  .kc-direct a { padding: 10px 14px; }
  .kc-direct b { font-size: 15px; }
  .kc-form { padding: 20px 22px; border-radius: 16px; }
  .kc-form h3 { font-size: 19px; margin-bottom: 12px; }
  .kc-fields { gap: 10px; }
  .kc-form .field input, .kc-form .field select { min-height: 40px; }
  .kc-form .field textarea { min-height: 60px; }
  .kc-form .btn { margin-top: 12px; min-height: 44px; }
  .kc-form .form-note { font-size: 12px; }
}

/* Soft spotlight on the contact card (desktop) */
.kc-dim { position: fixed; inset: 0; z-index: 55; background: rgba(10, 16, 30, .32); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s; }
.kc-dim.on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.kc-card { position: relative; transition: box-shadow .5s ease, scale .5s ease; }
.kc-card.lit { z-index: 56; scale: 1.015; box-shadow: 0 0 0 1px rgba(255, 246, 236, .25), 0 0 80px rgba(242, 140, 40, .45), 0 50px 100px -40px rgba(10, 20, 40, .8); }
@media (prefers-reduced-motion: reduce) { .kc-dim, .kc-card { transition: none; } .kc-card.lit { scale: none; } }

/* Reviews with two cards */
@media (min-width: 901px) { .rq-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; } }

/* Reviews: 3 cards in view, arrows show the rest */
.rq-nav { display: flex; gap: 10px; }
.rq-arr { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--paper-line); background: var(--white); color: var(--ink); font: 700 18px/1 var(--font); cursor: pointer; transition: background .2s, border-color .2s, color .2s, opacity .2s; }
.rq-arr:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.rq-arr:disabled { opacity: .35; cursor: default; }
.rq-arr:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.rq-track { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: -16px -16px 0; padding: 16px 16px 24px; align-items: stretch; }
.rq-track::-webkit-scrollbar { display: none; }
.rq-track { scroll-padding-inline: 16px; }
.rq-track .rq { scroll-snap-align: start; }
.rq-track .rq:hover { transform: translateY(-4px); }
/* cards without a quote yet: the site screenshot fills the space */
.rq-noquote .rq-top { flex: 1; display: flex; flex-direction: column; min-height: 260px; }
.rq-noquote .rq-win { flex: 1; position: relative; overflow: hidden; }
.rq-noquote .rq-win img { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; width: 100%; height: calc(100% - 30px); aspect-ratio: auto; object-fit: cover; object-position: top; }
@media (max-width: 1000px) and (min-width: 701px) { .rq-track { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 700px) { .rq-track { grid-auto-columns: 86%; gap: 14px; } .rq-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .rq-track { scroll-behavior: auto; } }

/* "a brand of SB Coding" link in the footer */
.fm-bottom span a { color: #C9D2E6; text-decoration: underline; text-underline-offset: 2px; }
.fm-bottom span a:hover { color: var(--orange); }

/* Tagline under the logo */
.logo-words { display: flex; flex-direction: column; line-height: 1; }
.logo-tag { margin-top: 4px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; opacity: .72; white-space: nowrap; }
.fm .logo-tag { font-size: 12.5px; }
@media (max-width: 360px) { .site-header .logo-tag { display: none; } }

/* Header: menu on the right, orange underline, phone number at the end (no Free audit button) */
.hd-phone { display: none; }
@media (min-width: 1081px) {
  .header-in .nav { margin-left: auto; margin-right: 0; }
  .site-header .nav ul { gap: 6px; }
  .site-header .nav li + li::before { display: none; }
  .site-header .nav a { position: relative; padding: 10px 14px; border-radius: 0; font-size: 15px; font-weight: 600; color: #3B4763; background: none; }
  .site-header .nav a:hover, .site-header .nav a[aria-current="page"] { color: var(--navy); background: none; }
  .site-header .nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .site-header .nav a:hover::after, .site-header .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .hd-phone { display: flex; align-items: center; gap: 10px; margin-left: 8px; padding-left: 22px; border-left: 1px solid #E1D9CB; color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
  .hd-phone i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFF1E2; color: var(--orange-text); font-style: normal; transition: background .2s, color .2s; }
  .hd-phone small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted-2); }
  .hd-phone:hover { color: var(--navy); }
  .hd-phone:hover i { background: var(--orange); color: var(--navy); }
}
@media (min-width: 1081px) and (max-width: 1240px) { .site-header .nav a { padding: 10px 10px; font-size: 14.5px; } .site-header .nav a::after { left: 10px; right: 10px; } .hd-phone small { display: none; } }
@media (prefers-reduced-motion: reduce) { .site-header .nav a::after { transition: none; } }

/* ===== Hero search widget: minimal, no box (option C). Everything is transparent. ===== */
.hero-visual.hs .hs-card { position: relative; isolation: isolate; padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* a soft navy glow behind the widget so the hero icons don't sit under the text */
.hero-visual.hs .hs-card::before { content: ''; position: absolute; inset: -60px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(19, 33, 63, .92), rgba(19, 33, 63, .75) 60%, rgba(19, 33, 63, 0)); }
.hero-visual.hs .hs-brand { margin-bottom: 18px; }
.hero-visual.hs .hs-bar { min-height: 54px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--white); box-shadow: none; }
.hero-visual.hs .hs-bar:hover, .hero-visual.hs .hs-bar:focus-within { border-color: rgba(242, 140, 40, .7); box-shadow: none; }
.hero-visual.hs .hs-bar svg { color: var(--orange); }
.hero-visual.hs .hs-q, .hero-visual.hs .hs-input { color: var(--white); }
.hero-visual.hs .hs-input::placeholder { color: rgba(255, 255, 255, .5); }
.hero-visual.hs .hs-result, .hero-visual.hs .hs-result:hover { margin-top: 26px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hero-visual.hs .has-logo .hs-logo { flex-basis: 100%; height: auto; margin: 0 0 14px; padding: 0 0 14px; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hero-visual.hs .hs-logo img { height: 30px; }
.hero-visual.hs .hs-logo em { color: #F7B26A; }
.hero-visual.hs .hs-url { color: #9FB0CF; }
.hero-visual.hs .hs-title { color: var(--white); }
.hero-visual.hs .hs-result:hover .hs-title { color: #F7B26A; }
.hero-visual.hs .hs-snip { color: #C9D2E6; }
.hero-visual.hs .hs-who { color: #E9EEF7; }
.hero-visual.hs .hs-face { box-shadow: 0 0 0 2px rgba(19, 33, 63, .6), 0 0 0 3.5px var(--orange); }
.hero-visual.hs .hs-built { background: rgba(242, 140, 40, .16); color: #F7B26A; }
.hero-visual.hs .hs-chips { gap: 4px 18px; margin-top: 22px; }
.hero-visual.hs .hs-chips::before { content: 'Try:'; align-self: center; color: #7F8BA6; font-size: 13px; }
.hero-visual.hs .hs-chip { min-height: 0; padding: 0; border: 0; background: transparent; color: #C9D2E6; font-size: 13.5px; text-decoration: underline; text-decoration-color: rgba(201, 210, 230, .35); text-underline-offset: 4px; }
.hero-visual.hs .hs-chip:hover { background: transparent; color: var(--white); text-decoration-color: var(--white); }
.hero-visual.hs .hs-chip.on { background: transparent; color: #F7B26A; text-decoration-color: var(--orange); }
.hero-visual.hs .hs-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* Hero search field: just a line, the search icon and the text */
.hero-visual.hs .hs-bar { min-height: 52px; padding: 0 2px; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, .35); border-radius: 0; background: transparent; font-size: 17px; transition: border-color .2s; }
.hero-visual.hs .hs-bar:hover, .hero-visual.hs .hs-bar:focus-within { border-color: var(--orange); background: transparent; }
.hero-visual.hs .hs-bar svg { width: 19px; height: 19px; }
.hero-visual.hs .hs-input { padding: 0 2px 0 33px; border-radius: 0; font-size: 17px; }

/* Search Console numbers under a result (real data only) */
.hs-stats { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hs-stats[hidden] { display: none; }
.hs-st { display: flex; align-items: baseline; gap: 8px; color: #C9D2E6; font-size: 13.5px; }
.hs-st b { color: var(--orange); font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hs-stats em { flex-basis: 100%; font-style: normal; font-size: 11.5px; color: #7F8BA6; }
@media (max-width: 560px) { .hs-st b { font-size: 22px; } .hs-stats { gap: 4px 18px; } }
.hero-visual.hs .hs-result { align-content: flex-start; }
.hs-stats { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 2px 22px; margin-top: 14px; padding-top: 12px; }
.hs-stats[hidden] { display: none; }
.hs-st { white-space: nowrap; font-size: 13px; }
.hs-st b { font-size: 22px; }
.hs-stats em { grid-column: 1 / -1; }
@media (max-width: 560px) { .hs-stats { grid-template-columns: 1fr 1fr; } .hs-st { flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; } }

/* Hero search, quieter: no top label, no "Built by" tag, no line under the logo, no caption under the widget */
.hero-visual.hs .hs-brand, .hero-visual.hs .hs-foot, .hero-visual.hs .hs-logo em { display: none; }
.hero-visual.hs .has-logo .hs-logo { padding-bottom: 0; margin-bottom: 18px; border-bottom: 0; }

/* Search result layout B-1: logo above a black & white portrait in a left column, text on the right */
.hero-visual.hs .hs-result.has-logo { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "logo txt" "thumb txt" "stats stats"; column-gap: 22px; row-gap: 12px; align-items: start; }
.hero-visual.hs .has-logo .hs-logo { grid-area: logo; margin: 0; padding: 0; align-self: end; }
.hero-visual.hs .has-logo .hs-logo img { width: 104px; max-width: 104px; height: auto; }
.hero-visual.hs .has-logo .hs-txt { grid-area: txt; grid-row: 1 / 3; align-self: center; }
.hero-visual.hs .has-logo .hs-thumb { grid-area: thumb; }
.hero-visual.hs .has-logo .hs-stats { grid-area: stats; }
.hero-visual.hs .hs-thumb { width: 104px; gap: 8px; align-items: flex-start; text-align: left; }
.hero-visual.hs .hs-face { position: relative; width: 104px; height: 124px; border-radius: 10px; box-shadow: none; background-size: cover; background-position: center top; filter: grayscale(1) contrast(1.05); transition: filter .35s ease;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 60%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 30%, #000 60%, transparent 100%); }
.hero-visual.hs .hs-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 33, 63, 0) 40%, rgba(242, 140, 40, .35)); mix-blend-mode: soft-light; }
.hero-visual.hs .hs-result:hover .hs-face { filter: none; }
.hero-visual.hs .hs-who { font-size: 12px; text-align: left; }
@media (max-width: 560px) {
  .hero-visual.hs .hs-result.has-logo { grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; }
  .hero-visual.hs .has-logo .hs-logo img { width: 84px; max-width: 84px; }
  .hero-visual.hs .hs-thumb { width: 84px; }
  .hero-visual.hs .hs-face { width: 84px; height: 100px; }
}
.hero-visual.hs .has-logo .hs-logo img { height: 36px; object-fit: contain; object-position: left center; }
@media (max-width: 560px) { .hero-visual.hs .has-logo .hs-logo img { height: 30px; } }

/* Attorney name sits on the bottom of the photo, over a soft navy fade */
.hero-visual.hs .hs-thumb { position: relative; }
.hero-visual.hs .hs-who { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, rgba(19, 33, 63, 0), rgba(19, 33, 63, .92)); color: var(--white); font-size: 11.5px; line-height: 1.2; text-align: center; }

/* No example links under the hero search (the search still types the examples by itself) */
.hero-visual.hs .hs-chips { display: none; }

/* SB Coding logo next to its name */
a.sbc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; vertical-align: baseline; }
.sbc-mk { width: 1.05em; height: 1.05em; flex: none; position: relative; top: .08em; }
.fm-bottom a.sbc { color: #C9D2E6; }
.prose a.sbc { color: var(--ink); }
a.sbc { display: inline; }
.sbc-mk { display: inline-block; top: 0; vertical-align: -0.16em; margin-right: 4px; }

/* ---------- Website check page ---------- */
.wc-link { display: inline-flex; gap: 6px; margin-top: 14px; color: #F7B26A; font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(247,178,106,.4); padding-bottom: 2px; }
.wc-link:hover { color: #FFC98F; border-bottom-color: #FFC98F; }
.wc-hero { padding: 64px 0 72px; background: radial-gradient(60% 80% at 80% 0%, rgba(242,140,40,.12), transparent 60%), var(--navy); }
.wc-hero-in { max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wc-hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: -.03em; margin: 0; }
.wc-form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 620px; margin-top: 10px; background: #fff; border-radius: 14px; padding: 6px 6px 6px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.wc-ic { color: #8A93A8; display: grid; }
.wc-form input { flex: 1; min-width: 0; border: 0; outline: 0; font: 500 17px var(--font); color: var(--ink); padding: 12px 4px; background: transparent; }
.wc-form .btn[disabled] { opacity: .6; cursor: wait; }
.wc-note { font-size: 13px; color: var(--on-navy-muted); margin: 0; }
.wc-note.err { color: #FFB38A; }
.wc-what { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; color: var(--on-navy); }
.wc-what li::before { content: '✓'; color: var(--orange); margin-right: 7px; font-weight: 800; }
.wc-rep { padding: 56px 0 80px; }
.wc-wait { max-width: 560px; margin: 0 auto; text-align: center; }
.wc-wait p { font-size: 18px; font-weight: 700; margin: 18px 0 4px; }
.wc-wait small { color: var(--muted); font-size: 14px; }
.wc-bar { height: 6px; border-radius: 6px; background: var(--paper-line); overflow: hidden; }
.wc-bar i { display: block; height: 100%; width: 30%; border-radius: 6px; background: var(--orange); animation: wcBar 1.4s ease-in-out infinite; }
@keyframes wcBar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.wc-err { max-width: 560px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 12px; }
.wc-err h2 { margin: 0; font-size: 26px; } .wc-err p { margin: 0; color: var(--muted); }
.wc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.wc-head h2 { margin: 4px 0 0; font-size: 30px; overflow-wrap: anywhere; }
.wc-src { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); background: var(--paper-2); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.wc-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 28px; }
.wc-score { display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 24px; position: relative; }
.wc-arc { transition: stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1); }
.wc-num { position: absolute; left: 0; top: 50%; width: 168px; transform: translateY(-50%); text-align: center; }
.wc-num b { display: block; font-size: 52px; line-height: 1; letter-spacing: -.03em; }
.wc-num span { font-size: 13px; color: var(--muted-2); }
.wc-score p { margin: 0; font-size: 16px; color: var(--muted); }
.wc-score p b { display: block; color: var(--ink); font-size: 22px; margin-bottom: 4px; }
.wc-subs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: center; border-left: 1px solid var(--paper-line); padding-left: 24px; }
.ss { display: grid; justify-items: center; text-align: center; position: relative; gap: 8px; }
.ss b { position: absolute; top: 21px; font-size: 18px; }
.ss span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.wc-h3 { font-size: 22px; margin: 40px 0 14px; }
.wc-p { margin: -6px 0 16px; color: var(--muted); }
.wc-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); }
.wc-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: start; padding: 16px 22px; }
.wc-list li + li { border-top: 1px solid var(--paper-line); }
.wi { padding-top: 2px; }
.wc-list b { display: block; font-size: 15.5px; }
.wc-list small { display: block; font-size: 14px; color: var(--muted); }
.wc-list em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); background: var(--paper-2); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.wc-ba { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 12px; align-items: start; }
.wc-ba figure { margin: 0; }
.wc-ba figcaption { font-weight: 700; margin-bottom: 10px; }
.wc-ba figcaption span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--orange); color: var(--navy); padding: 3px 8px; border-radius: 999px; margin-left: 6px; }
.br { border-radius: 18px; overflow: hidden; border: 1px solid var(--paper-line); background: #fff; box-shadow: var(--shadow); }
.br-desk { border-radius: 12px; }
.br-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #EEE9E0; }
.br-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CFC6B8; flex: none; }
.br-bar span { margin-left: 10px; font-size: 11.5px; color: var(--muted-2); background: #fff; padding: 2px 10px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-desk img { display: block; width: 100%; aspect-ratio: 500 / 348; object-fit: cover; object-position: top; background: var(--paper-2); }
.new .br-desk { outline: 3px solid var(--orange); outline-offset: -1px; }
.wc-arrow { align-self: center; font-size: 30px; color: var(--orange); text-align: center; font-weight: 800; }
.wc-stats { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--muted); }
.wc-cta { margin-top: 44px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: center; background: var(--navy); color: var(--on-navy); border-radius: var(--radius); padding: 30px; }
.wc-cta h3 { color: #fff; font-size: 22px; margin: 0 0 6px; }
.wc-cta p { margin: 0; color: var(--on-navy-muted); }
.wc-lead { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-lead input:not([type=hidden]) { flex: 1 1 160px; min-width: 0; border: 0; border-radius: 10px; padding: 0 14px; min-height: 46px; font: 500 15px var(--font); }
.wc-lead .form-status { flex: 1 1 100%; color: var(--on-navy); }
@media (max-width: 860px) {
  .wc-hero h1 { font-size: 34px; }
  .wc-top { grid-template-columns: 1fr; }
  .wc-subs { border-left: 0; padding-left: 0; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .wc-score { grid-template-columns: 120px 1fr; } .wc-score svg { width: 120px; height: 120px; } .wc-num { width: 120px; } .wc-num b { font-size: 38px; }
  .wc-list li { grid-template-columns: 24px 1fr; } .wc-list em { grid-column: 2; justify-self: start; }
  .wc-ba { grid-template-columns: 1fr; gap: 24px; } .wc-arrow { display: none; }
  .wc-cta { grid-template-columns: 1fr; } .wc-lead { flex-direction: column; }
  .wc-form { flex-wrap: wrap; padding: 8px; } .wc-form .btn { width: 100%; }
  .wc-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .wc-bar i { animation: none; width: 100%; opacity: .4; } .wc-arc { transition: none; } }
.wc-rep[hidden], .wc-wait[hidden], .wc-err[hidden], #wc-out[hidden] { display: none; }
#wc-report { scroll-margin-top: 90px; }
/* website check: content & SEO report */
.wc-h3 em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #C2410C; background: #FDECE3; padding: 4px 9px; border-radius: 999px; margin-left: 8px; vertical-align: 3px; }
.wc-h3 em.ok { color: var(--green); background: #E3F4EA; }
.wc-h3 em:empty { display: none; }
.wc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.wc-cols .wc-list li, #wc-list li { grid-template-columns: 28px 1fr; }
.g-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 24px; align-items: center; }
.g-res { font-family: Arial, sans-serif; border: 1px solid #ECE7DE; border-radius: 12px; padding: 16px 18px; min-width: 0; }
.g-site { display: flex; gap: 10px; align-items: center; }
.g-fav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F1F3F4; font-size: 12px; color: #555; text-transform: uppercase; flex: none; }
.g-site b { display: block; font-size: 14px; font-weight: 400; color: #202124; }
.g-site small { font-size: 12px; color: #4D5156; overflow-wrap: anywhere; }
.g-title { color: #1A0DAB; font-size: 20px; line-height: 1.3; margin: 6px 0 4px; overflow-wrap: anywhere; }
.g-desc { color: #4D5156; font-size: 14px; line-height: 1.55; }
.g-desc.none { font-style: italic; color: #8A8F98; }
.g-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.g-notes li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 860px) { .wc-cols, .g-wrap { grid-template-columns: 1fr; } }
.wc-cols[hidden], #wc-g-box[hidden] { display: none; }
/* website check boxes (Services card, blog articles) */
.wcx { display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid transparent; border-radius: 12px; padding: 5px 5px 5px 14px; max-width: 460px; }
.wcx input { flex: 1; min-width: 0; width: auto; border: 0; outline: 0; font: 500 15px var(--font); color: var(--ink); background: transparent; padding: 0; }
.wcx .btn { min-height: 40px; padding: 0 16px; white-space: nowrap; }
.sv-wc { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; background: var(--navy); color: var(--on-navy); border-radius: 18px; padding: 22px 26px; margin-top: 22px; }
.sv-ic { width: 56px; height: 56px; border-radius: 14px; background: rgba(242,140,40,.15); display: grid; place-items: center; color: var(--orange); }
.sv-wc h3 { margin: 0 0 4px; color: #fff; font-size: 20px; }
.sv-wc p { margin: 0; color: var(--on-navy-muted); font-size: 14.5px; }
.sv-wc .wcx { width: 420px; }
.ar-wc { margin: 36px 0; padding: 24px; border-radius: 16px; background: var(--navy); color: var(--on-navy); }
.ar-wc h3 { margin: 0 0 6px; color: #fff; font-size: 21px; }
.ar-wc p { margin: 0 0 14px; color: var(--on-navy-muted); }
.side-wc { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--navy); color: var(--on-navy); }
.side-wc b { display: block; color: #fff; margin-bottom: 4px; }
.side-wc p { margin: 0 0 10px; font-size: 13px; color: var(--on-navy-muted); }
.side-wc .wcx { padding: 4px 4px 4px 10px; }
.side-wc .wcx .btn { padding: 0 10px; font-size: 13px; min-height: 36px; }
@media (max-width: 860px) {
  .sv-wc { grid-template-columns: 1fr; gap: 14px; padding: 22px; } .sv-ic { display: none; } .sv-wc .wcx { width: auto; }
  .wcx { flex-wrap: wrap; padding: 8px; } .wcx input { padding: 6px 4px; } .wcx .btn { width: 100%; }
}

/* ---------- "Get a free audit" pop-up: website check or new website ---------- */
.pp { max-width: 620px; }
.pp .modal-body { gap: 18px; }
.pp-pane[hidden] { display: none; }
.pp-pane { display: flex; flex-direction: column; gap: 16px; }
.pp-steps { display: flex; gap: 6px; margin-top: 10px; max-width: 280px; }
.pp-steps i { height: 4px; flex: 1; border-radius: 4px; background: #EEE8DC; }
.pp-steps i.on { background: var(--orange); }
.pp-q { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-opt { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 20px; border: 1.5px solid var(--paper-line); border-radius: 16px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.pp-opt:hover, .pp-opt:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,140,40,.15); outline: 0; }
.pp-opt .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: var(--orange); margin-bottom: 6px; }
.pp-opt.no .ic { background: #FCEBD9; color: var(--orange-text); }
.pp-opt b { font-size: 17px; }
.pp-opt span { font-size: 13.5px; color: var(--muted); }
.pp-alt { margin: 0; text-align: center; font-size: 13.5px; color: var(--muted-2); }
.pp-alt a { color: var(--ink); font-weight: 700; }
.pp-alt.err { color: #C2410C; }
.pp-url { display: flex; gap: 6px; border: 1.5px solid var(--navy); border-radius: 14px; padding: 6px 6px 6px 16px; }
.pp-url input { flex: 1; min-width: 0; border: 0; outline: 0; font: 500 17px var(--font); color: var(--ink); background: transparent; }
.pp-back { align-self: flex-start; background: none; border: 0; padding: 0; font: 600 13.5px var(--font); color: var(--muted-2); cursor: pointer; }
.pp-back:hover { color: var(--ink); }
.pp-wait { text-align: center; padding: 12px 0; }
.pp-wait p { font-weight: 700; font-size: 17px; margin: 16px 0 4px; }
.pp-wait small { color: var(--muted-2); }
.pp-err p { margin: 0 0 14px; font-weight: 600; text-align: center; }
.pp-score { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; position: relative; }
.pp-arc { transition: stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1); }
.pp-score .n { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 120px; text-align: center; }
.pp-score .n b { display: block; font-size: 38px; line-height: 1; }
.pp-score .n span { font-size: 12px; color: var(--muted-2); }
.pp-score h3 { margin: 0 0 4px; font-size: 20px; }
.pp-score p { margin: 0; color: var(--muted); font-size: 14.5px; }
.pp-subs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pp-subs span { font-size: 12px; font-weight: 700; background: var(--paper-2); border-radius: 999px; padding: 4px 10px; }
.pp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--paper-line); border-radius: 14px; }
.pp-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 16px; font-size: 14.5px; }
.pp-list li + li { border-top: 1px solid var(--paper-line); }
.pp-list small { display: block; color: var(--muted); font-size: 13px; }
.pp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-form .full { grid-column: 1 / -1; }
.pp-form .form-note { margin: 0; font-size: 12.5px; color: var(--muted-2); }
.pp-call { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) {
  .pp-q, .pp-cta, .pp-form, .pp-call { grid-template-columns: 1fr; }
  .pp-url { flex-wrap: wrap; padding: 8px; } .pp-url input { padding: 6px 4px; } .pp-url .btn { width: 100%; }
  .pp-score { grid-template-columns: 96px 1fr; } .pp-score svg { width: 96px; height: 96px; } .pp-score .n { width: 96px; } .pp-score .n b { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .pp-arc { transition: none; } }
/* pop-up keeps one size on every step (phones are already full screen) */
@media (min-width: 641px) {
  .pp { height: min(680px, calc(100vh - 48px)); }
  .pp[open] { display: flex; flex-direction: column; }
  .pp .modal-head { flex: none; }
  .pp .modal-body { flex: 1; }
  .pp .pp-pane { flex: 1; }
  .pp .pp-pane[data-pp="q"], .pp .pp-pane[data-pp="url"], .pp .pp-pane[data-pp="wait"], .pp .pp-pane[data-pp="err"] { justify-content: center; }
  .pp .pp-pane[data-pp="url"] .pp-back { margin-top: 8px; }
}
/* pop-up: fuller steps */
.pp-ticks { list-style: none; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--paper-line); display: grid; gap: 7px; }
.pp-ticks li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pp-ticks svg { width: 16px; height: 16px; flex: none; color: var(--orange); }
.pp-team { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--paper); }
.pp-faces { display: flex; flex: none; }
.pp-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.pp-faces img + img { margin-left: -12px; }
.pp-team b { display: block; font-size: 14.5px; }
.pp-team em { font-style: normal; font-size: 13.5px; color: var(--muted); }
.pp-team a { color: var(--ink); font-weight: 700; }
.pp-h { margin: 6px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-text); }
.pp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-tiles div { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--paper-line); border-radius: 14px; }
.pp-ti { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: var(--orange); display: grid; place-items: center; }
.pp-ti svg { width: 20px; height: 20px; }
.pp-tiles b { font-size: 14px; }
.pp-tiles span:not(.pp-ti) { font-size: 12.5px; color: var(--muted); }
.pp-steplist { list-style: none; margin: 0; padding: 4px 18px; border: 1px solid var(--paper-line); border-radius: 14px; }
.pp-steplist li { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14.5px; color: var(--muted-2); }
.pp-steplist li + li { border-top: 1px solid var(--paper-line); }
.pp-steplist i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--paper-line); flex: none; display: grid; place-items: center; }
.pp-steplist li.now { color: var(--ink); font-weight: 700; }
.pp-steplist li.now i { border-color: var(--orange); border-top-color: transparent; animation: ppSpin .8s linear infinite; }
.pp-steplist li.done { color: var(--ink); }
.pp-steplist li.done i { border-color: var(--green); background: var(--green); }
.pp-steplist li.done i::after { content: ''; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
@keyframes ppSpin { to { transform: rotate(360deg); } }
.pp-soon { padding: 14px 16px; border-radius: 14px; background: var(--paper); font-size: 14px; color: var(--muted); }
.pp-soon b { color: var(--ink); }
.pp-wait { padding: 0; }
.pp-wait p { margin-top: 14px; }
.pp-err { text-align: center; }
.pp-err-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #FDECE3; color: #C2410C; font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.pp-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: n; }
.pp-next li { counter-increment: n; padding: 14px; border-radius: 14px; background: var(--paper); display: grid; gap: 2px; }
.pp-next li::before { content: counter(n); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.pp-next b { font-size: 14px; }
.pp-next span { font-size: 12.5px; color: var(--muted); }
@media (min-width: 641px) {
  .pp .pp-pane[data-pp="q"], .pp .pp-pane[data-pp="url"], .pp .pp-pane[data-pp="wait"], .pp .pp-pane[data-pp="err"] { justify-content: space-between; }
  .pp .pp-pane[data-pp="url"] .pp-back { margin-top: 0; }
}
@media (max-width: 640px) { .pp-tiles, .pp-next { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pp-steplist li.now i { animation: none; } }
.pp-logos { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px; background: var(--navy); }
.pp-logos > span { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-muted); max-width: 90px; line-height: 1.3; }
.pp-logos div { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.pp-logos img { height: 26px; width: auto; max-width: 23%; object-fit: contain; }
.pp-why { margin: 0; padding: 14px 18px 14px 34px; border-radius: 14px; background: var(--paper); font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
@media (min-width: 641px) {
  .pp .pp-pane[data-pp="url"], .pp .pp-pane[data-pp="err"] { justify-content: flex-start; }
  .pp .pp-pane[data-pp="url"] .pp-back, .pp .pp-pane[data-pp="err"] .pp-team { margin-top: auto; }
  .pp .pp-pane[data-pp="score"] .pp-soon { margin-top: auto; }
}
@media (max-width: 640px) { .pp-logos { flex-direction: column; align-items: stretch; gap: 10px; } .pp-logos > span { max-width: none; } }
@media (min-width: 641px) {
  .pp .pp-pane[data-pp="err"] { justify-content: space-between; }
  .pp .pp-pane[data-pp="err"] .pp-team { margin-top: 0; }
}
.pp-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pp-facts li { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--paper-line); border-radius: 14px; }
.pp-facts svg { grid-row: span 2; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #FCEBD9; color: var(--orange-text); }
.pp-facts b { font-size: 14px; }
.pp-facts span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.pp-get { display: flex; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--paper); }
.pp-get svg { flex: none; }
.pp-get b { display: block; font-size: 15px; }
.pp-get .pp-ticks { border-top: 0; padding-top: 0; margin-top: 8px; }
@media (max-width: 640px) { .pp-facts { grid-template-columns: 1fr; } }

/* ---------- Website check page: left-aligned hero, intro, progress ---------- */
.wc-hero { padding: 64px 0 72px; }
.wc-hero-in { max-width: 1180px; text-align: left; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.wc-hero-l { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.wc-hero h1 { font-size: 48px; }
.wc-hero .wc-form { margin-top: 8px; max-width: 560px; }
.wc-mock { background: #fff; color: var(--ink); border-radius: 20px; padding: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.35); transform: rotate(1.5deg); }
.wc-mock-top { display: flex; align-items: center; gap: 18px; }
.wc-mock-top b { display: block; font-size: 20px; } .wc-mock-top span { color: var(--muted-2); font-size: 13px; }
.wc-mock-bars { display: grid; gap: 10px; margin: 18px 0; }
.wc-mock-bars div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; font-size: 13px; font-weight: 600; }
.wc-mock-bars i { height: 8px; border-radius: 8px; background: var(--paper-2); overflow: hidden; }
.wc-mock-bars em { display: block; height: 100%; border-radius: 8px; background: #E9C9A3; }
.wc-mock-list { border-top: 1px solid var(--paper-line); padding-top: 14px; }
.wc-mock-list b { font-size: 13px; }
.wc-mock-list p { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.wc-mock-list p i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #E9C9A3; flex: none; }
.wc-mock-list s { display: block; height: 8px; border-radius: 8px; background: var(--paper-2); text-decoration: none; }
.wc-mock-cap { margin: 16px 0 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); }
.wc-intro { padding: 64px 0 80px; }
.wc-intro[hidden] { display: none; }
.wc-how ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.wc-how li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--paper-line); border-radius: 16px; }
.wc-how li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; }
.wc-how b { font-size: 16px; } .wc-how span { font-size: 14px; color: var(--muted); }
.wc-h2 { margin: 48px 0 18px; font-size: 30px; }
.wc-check4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wc-check4 > div { padding: 22px; background: #fff; border: 1px solid var(--paper-line); border-radius: 16px; }
.wc-ci { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--orange); margin-bottom: 14px; }
.wc-ci svg { width: 22px; height: 22px; }
.wc-check4 h3 { margin: 0 0 6px; font-size: 17px; }
.wc-check4 p { margin: 0; font-size: 14px; color: var(--muted); }
.wc-faq3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--paper-line); }
.wc-faq3 b { font-size: 15.5px; } .wc-faq3 p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.wc-wait { max-width: none; text-align: left; display: grid; grid-template-columns: 1.3fr .9fr; gap: 32px; align-items: start; }
.wc-wait-l h2 { margin: 6px 0 6px; font-size: 28px; }
.wc-wait-s { margin: 0 0 18px; color: var(--muted); }
.wc-wait .pp-steplist { margin-top: 18px; background: #fff; }
.wc-wait-r { padding: 24px; border-radius: 16px; background: var(--navy); color: var(--on-navy); }
.wc-wait-r b { color: #fff; font-size: 17px; }
.wc-wait-r ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 12px; font-size: 14.5px; color: var(--on-navy-muted); }
.wc-wait-r strong { color: #fff; }
@media (max-width: 960px) {
  .wc-hero-in { grid-template-columns: 1fr; gap: 32px; }
  .wc-hero-r { display: none; }
  .wc-check4 { grid-template-columns: 1fr 1fr; }
  .wc-wait { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wc-hero h1 { font-size: 34px; }
  .wc-how ol, .wc-check4, .wc-faq3 { grid-template-columns: 1fr; }
}
.wc-mock-bars em { transition: width .8s ease; } #wc-mk-n { font-size: 30px; }
.wc-wait .wc-wait-s { font-size: 15px; font-weight: 400; margin: 0 0 18px; }
.btn-call svg { color: var(--orange); }
/* "Not sure what your website needs?" banner: soft peach, navy button */
.sv-wc { background: #FCEBD9; color: var(--ink); border: 1px solid #F5D3AC; box-shadow: none; }
.sv-wc h3 { color: var(--ink); }
.sv-wc p { color: #5A4730; }
.sv-ic { background: var(--navy); color: var(--orange); }
.sv-wc .wcx { border: 1px solid #F0CFA6; }
.sv-wc .wcx .btn { background: var(--navy); color: #fff; }
.sv-wc .wcx .btn:hover { background: var(--navy-2); color: #fff; }
/* website check: site sections & links */
#wc-st-box[hidden] { display: none; }
.wc-subs.five { grid-template-columns: repeat(5, 1fr); }
.wc-p b { color: var(--ink); }
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.st-grid > div { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--paper-line); border-radius: 14px; }
.st-grid .wi { grid-row: span 2; padding: 0; }
.st-grid b { font-size: 14px; }
.st-grid em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.st-grid .st-bad { background: #FFF6F1; border-color: #F6D5C4; }
.st-grid .st-bad em { color: #C2410C; font-weight: 700; }
@media (max-width: 860px) { .st-grid { grid-template-columns: 1fr 1fr; } .wc-subs.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .st-grid { grid-template-columns: 1fr; } }
.st-grid b i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); background: var(--paper-2); padding: 2px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 1px; }
.st-grid .st-bonus { border-style: dashed; }
/* website check: PDF button */
.wc-head-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.wc-pdf { min-height: 42px; }
.wc-pdf[disabled] { opacity: .7; cursor: wait; }
@media (max-width: 860px) { .wc-head-r { justify-content: flex-start; } .wc-pdf { width: 100%; } }
/* report: live demo card */
.wc-demo { position: relative; display: block; text-decoration: none; }
.wc-demo-go { position: absolute; right: 14px; bottom: 14px; background: var(--navy); color: #fff; font-size: 14px; padding: 9px 14px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.wc-demo:hover .wc-demo-go { background: var(--orange); color: var(--navy); }

/* ===== service + case study pages ===== */
.sp-hero, .cs-hero { padding: 40px 0 64px; }
.sp-hero-in, .cs-hero-in { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.sp-hero .crumbs, .cs-hero .crumbs { margin-bottom: 26px; }
.sp-hero h1, .cs-hero h1 { margin-bottom: 14px; }
.sp-hero .lead, .cs-hero .lead { font-size: 18px; max-width: 560px; margin: 0 0 24px; }
.sp-hero .btn-row { margin-bottom: 18px; }
.sp-proof { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); border-top: 4px solid var(--orange); }
.sp-proof-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); background: #FCEBD9; padding: 4px 10px; border-radius: 999px; }
.sp-proof-logo { height: 34px; width: auto; margin: 16px 0 6px; }
.sp-proof-n { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 10px; }
.sp-proof-n b { display: block; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.sp-proof-n span { font-size: 13px; color: var(--muted); }
.sp-proof-src { font-size: 12px; color: var(--muted-2); margin: 0 0 14px; }
.sp-proof-go { font-weight: 700; text-decoration: none; }
.sp-sec { padding: 64px 0; }
.sp-head { max-width: 640px; margin-bottom: 30px; }
.sp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sp-tile { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 22px; }
.sp-tile h3 { font-size: 17px; margin: 12px 0 6px; }
.sp-tile p { margin: 0; font-size: 14px; color: var(--muted); }
.sp-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #FCEBD9; color: var(--orange-text); }
.sp-ic svg { width: 22px; height: 22px; }
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.sp-steps li { background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 22px; }
.sp-steps li > span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; }
.sp-steps h3 { font-size: 17px; margin: 14px 0 6px; }
.sp-steps p { margin: 0; font-size: 14px; color: var(--on-navy-muted); }
.sp-sec .sv-wc { margin-top: 48px; }
.sp-more, .cs-used { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.sp-more b, .cs-used b { margin-right: 6px; font-size: 14px; }
.cs-used { margin-top: 0; }
.cs-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 28px; margin: 6px 0 14px; }
.cs-stats b { display: block; font-size: 34px; line-height: 1; color: var(--white); letter-spacing: -.03em; }
.cs-stats span { display: block; max-width: 110px; font-size: 13px; color: var(--on-navy-muted); margin-top: 6px; }
.cs-src { font-size: 13px; color: var(--on-navy-muted); margin: 0; }
.cs-src a { color: var(--orange); }
.cs-shots { position: relative; padding: 0 0 30px 0; }
.cs-desk { border-radius: 12px; box-shadow: var(--shadow); border: 6px solid var(--navy-2); }
.cs-phone { position: absolute; right: -10px; bottom: 0; width: 28%; border-radius: 16px; border: 5px solid #0B1530; box-shadow: var(--shadow); }
.cs-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-three > div { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 24px; }
.cs-three h3 { font-size: 19px; margin: 8px 0 10px; }
.cs-three p { margin: 0; color: var(--muted); font-size: 14px; }
.cs-three .ticks { grid-template-columns: 1fr; }
.cs-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.cs-quote blockquote { margin: 0 auto; max-width: 860px; text-align: center; }
.cs-quote blockquote p { font-size: 22px; line-height: 1.5; color: var(--white); margin: 0 0 24px; }
.cs-quote footer { display: inline-flex; align-items: center; gap: 14px; text-align: left; font-size: 14px; color: var(--on-navy-muted); }
.cs-quote footer img { border-radius: 50%; width: 56px; height: 56px; object-fit: cover; }
.cs-quote footer b { display: block; color: var(--white); }
.cs-next { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.cs-next > a { display: flex; gap: 18px; align-items: center; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--ink); }
.cs-next > a:hover { border-color: var(--ink); color: var(--ink); }
.cs-next > a img { width: 46%; border-radius: 8px; }
.cs-next small { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-text); }
.cs-next > a b { display: block; font-size: 20px; margin: 4px 0; }
.cs-next > a span { font-size: 14px; color: var(--muted); }
.cs-cta { background: #FCEBD9; border-radius: var(--radius); padding: 24px 26px; }
.cs-cta h3 { font-size: 22px; margin-bottom: 6px; }
.cs-cta p { margin: 0 0 16px; color: var(--muted); }
@media (max-width: 900px) {
  .sp-hero-in, .cs-hero-in, .cs-next { grid-template-columns: 1fr; gap: 32px; }
  .sp-tiles, .cs-three { grid-template-columns: 1fr; }
  .sp-steps { grid-template-columns: 1fr 1fr; }
  .cs-stats { grid-template-columns: 1fr 1fr; gap: 18px; }
  .sp-sec { padding: 44px 0; }
  .cs-quote blockquote p { font-size: 18px; }
}
@media (max-width: 560px) { .sp-steps { grid-template-columns: 1fr; } .sp-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .sp-tile { padding: 16px; } .sp-tile p { font-size: 13px; } }
.cs-desk { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.cs-phone { aspect-ratio: 9 / 18; object-fit: cover; object-position: top; }
.cs-next > a img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.cs-next { align-items: stretch; }
.cs-cta { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 560px) { .sp-steps { grid-template-columns: 1fr 1fr; gap: 10px; } .sp-steps li { padding: 16px; } .sp-steps h3 { font-size: 15px; margin-top: 10px; } .sp-steps p { font-size: 13px; } }
.sp-proof-img { display: block; margin: 14px 0 12px; border-radius: 10px; overflow: hidden; border: 1px solid var(--paper-line); }
.sp-proof-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.sp-proof-t { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.sp-proof-t b { color: var(--ink); }
.sp-proof .sp-proof-t:first-of-type { margin-top: 14px; }
.sp-wcx { margin: 0; }
.sp-faq a { color: var(--orange-text); }

/* header: Services and Projects sub-menus (desktop only) */
.nav .has-sub { position: relative; }
.nav .sub { display: none; }
@media (min-width: 1081px) {
  .nav .sub { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 260px; flex-direction: column; gap: 0; padding: 8px; margin-top: 6px; background: #fff; border: 1px solid var(--paper-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(19, 33, 63, .16); }
  .nav .sub::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub { display: flex; }
  .nav .sub li { display: block; }
  .nav .sub li::before { display: none !important; }
  .site-header .nav .sub a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: #3B4763; }
  .site-header .nav .sub a::after { display: none; }
  .site-header .nav .sub a:hover, .site-header .nav .sub a[aria-current="page"] { background: var(--paper-2); color: var(--navy); }
}

/* homepage: link from each project slide to its case study */
.rw2-case { display: inline-block; margin-left: 14px; font-weight: 700; color: var(--orange); text-decoration: none; }
.rw2-case:hover { color: #fff; }

/* footer: service and case study links */
.fm-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 13.5px; }
.fm-links b { color: var(--white); font-weight: 600; margin-right: 2px; }
.fm-links a { color: var(--on-navy-muted); text-decoration: none; }
.fm-links a:hover { color: var(--white); }
.fm-links span { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
@media (min-width: 1081px) { .nav .sub { align-items: stretch; } .site-header .nav .sub a { text-align: left; } }

/* ===== about + contact pages ===== */
.ab-hero { overflow: hidden; }
.ab-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 620px; }
.ab-txt { padding: 40px max(24px, calc((100vw - 1132px) / 2)) 64px; padding-right: 56px; display: flex; flex-direction: column; justify-content: center; }
.ab-txt .crumbs { margin-bottom: 26px; }
.ab-txt h1 { margin-bottom: 14px; }
.ab-txt .lead { font-size: 18px; margin: 0 0 12px; max-width: 580px; }
.ab-p { color: var(--on-navy-muted); margin: 0 0 20px; max-width: 580px; }
.ab-txt .st-stats { margin: 0 0 26px; }
.ab-img { position: relative; background: #000; }
.ab-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.ab-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, rgba(19, 33, 63, 0) 30%); }
.ab-people { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-person { display: flex; gap: 22px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 22px; }
.ab-person img { width: 132px; height: 132px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.ab-person h3 { font-size: 20px; }
.ab-role { margin: 2px 0 10px; font-size: 13px; font-weight: 700; color: var(--orange-text); }
.ab-person p:not(.ab-role) { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.ab-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ab-skills li { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); }
.ab-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ab-values li { display: flex; gap: 14px; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 20px; }
.ab-ck { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: var(--navy); }
.ab-ck svg { width: 16px; height: 16px; }
.ab-values h3 { font-size: 16px; margin: 3px 0 6px; }
.ab-values p { margin: 0; font-size: 14px; color: var(--on-navy-muted); }
.ab-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ab-logos a { display: flex; flex-direction: column; gap: 4px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 20px; text-decoration: none; color: var(--ink); }
.ab-logos a:hover { border-color: var(--ink); color: var(--ink); }
.ab-logos img { height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: left; margin-bottom: 12px; }
.ab-logos b { font-size: 16px; }
.ab-logos span { font-size: 13px; color: var(--muted); }
.ct-hero { padding: 40px 0 56px; }
.ct-hero .crumbs { margin-bottom: 26px; }
.ct-hero h1 { margin-bottom: 12px; }
.ct-hero .lead { font-size: 18px; margin: 0 0 28px; }
.ct-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ct-way { display: flex; gap: 14px; align-items: center; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--white); }
.ct-way:hover { border-color: var(--orange); color: var(--white); }
.ct-way small { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange); }
.ct-way b { display: block; font-size: 17px; word-break: break-word; }
.ct-way em { font-style: normal; font-size: 13px; color: var(--on-navy-muted); }
.ct-steps { grid-template-columns: repeat(3, 1fr); }
.ct-next .sp-steps li { background: var(--white); border-color: var(--paper-line); }
.ct-next .sp-steps p { color: var(--muted); }
.ct-area { margin: 22px 0 0; color: var(--muted); }
@media (max-width: 900px) {
  .ab-in { grid-template-columns: 1fr; min-height: 0; }
  .ab-img { order: -1; min-height: 360px; }
  .ab-img::after { background: linear-gradient(0deg, var(--navy) 0%, rgba(19, 33, 63, 0) 40%); }
  .ab-txt { padding: 8px 20px 48px; }
  .ab-people, .ab-values, .ct-ways, .ct-steps { grid-template-columns: 1fr; }
  .ab-logos { grid-template-columns: 1fr 1fr; }
  .ab-person { flex-direction: column; }
}
.ab-logos img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--paper-line); margin-bottom: 12px; width: 100%; }
.kc-nodirect .kc-direct { display: none; }

/* ===== about / contact variants (company first) ===== */
.kc-noteam .kc-team { display: none; }
.abx-hero { padding: 40px 0 64px; }
.abx-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.abx-hero .crumbs { margin-bottom: 26px; }
.abx-hero h1 { margin-bottom: 14px; }
.abx-hero .lead { font-size: 18px; margin: 0 0 24px; max-width: 580px; }
.abx-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transform: rotate(-2deg); }
.abx-collage img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; border: 4px solid var(--navy-2); box-shadow: var(--shadow); }
.abx-collage img:nth-child(2n) { transform: translateY(22px); }
.abx-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
.abx-story p:not(.eyebrow) { margin: 0 0 14px; font-size: 16px; color: var(--muted); }
.abx-stats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.abx-stats li { border-left: 3px solid var(--orange); padding: 2px 0 2px 12px; }
.abx-stats b { display: block; font-size: 20px; line-height: 1.2; }
.abx-stats span { font-size: 13px; color: var(--muted); }
.sec-dark .abx-stats b { color: var(--white); }
.sec-dark .abx-stats span { color: var(--on-navy-muted); }
.abx-hero-b .abx-stats { grid-template-columns: 1fr 1fr; max-width: 520px; gap: 18px; }
.abx-svc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.abx-svc a { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--ink); }
.abx-svc a:hover { border-color: var(--ink); color: var(--ink); }
.abx-svc b { font-size: 15.5px; }
.abx-svc a > span:last-child { font-size: 13.5px; color: var(--muted); }
.abx-team { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px 20px; border-radius: var(--radius); background: var(--paper-2); }
.abx-team p { margin: 0; font-size: 14.5px; color: var(--muted); }
.abx-team b { color: var(--ink); }
.abx-team .kc-faces img { width: 40px; height: 40px; }
.abx-brand { display: grid; place-items: center; text-align: center; gap: 12px; padding: 48px 24px; border-radius: 24px; background: radial-gradient(420px 260px at 50% 40%, rgba(242, 140, 40, .14), transparent 70%), var(--navy-2); border: 1px solid var(--navy-line); color: var(--white); }
.abx-mark { width: min(240px, 60%); height: auto; }
.abx-brand p { margin: 0; color: var(--on-navy-muted); font-weight: 600; }
.abx-steps { grid-template-columns: repeat(3, 1fr); }
.abx-steps li { background: var(--white); border-color: var(--paper-line); }
.abx-steps p { color: var(--muted); }
/* contact */
.cx-hero { padding: 40px 0 48px; }
.cx-hero .crumbs { margin-bottom: 26px; }
.cx-hero h1 { margin-bottom: 12px; }
.cx-hero .lead { font-size: 18px; margin: 0; max-width: 620px; }
.cx-body { padding: 56px 0 72px; }
.cx-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.cx-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-info li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--paper-line); }
.cx-info small { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-text); }
.cx-info b { display: block; font-size: 17px; }
.cx-info b a { color: var(--ink); text-decoration: none; }
.cx-info em { font-style: normal; font-size: 13.5px; color: var(--muted); }
.cx-nextbox { margin-top: 24px; padding: 20px 22px; border-radius: var(--radius); background: #FCEBD9; }
.cx-nextbox h3 { font-size: 17px; margin-bottom: 8px; }
.cx-next { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--muted); }
.cx-next b { color: var(--ink); }
.sec-dark .cx-next { color: var(--on-navy-muted); margin-top: 22px; }
.sec-dark .cx-next b { color: var(--white); }
.cx-form .kc-form { margin: 0; box-shadow: 0 20px 50px -24px rgba(19, 33, 63, .35); border: 1px solid var(--paper-line); }
.cx-hero-b { padding-bottom: 64px; }
.cx-hero-b .cx-grid { align-items: center; }
.cx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cx-tile { display: flex; flex-direction: column; gap: 4px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 18px; }
.cx-tile .sp-ic { margin-bottom: 8px; }
.cx-tile small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-text); }
.cx-tile b { font-size: 15.5px; word-break: break-word; }
.cx-tile b a { color: var(--ink); text-decoration: none; }
.cx-tile em { font-style: normal; font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .abx-svc { grid-template-columns: repeat(2, 1fr); } .cx-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .abx-hero-in, .abx-story, .cx-grid { grid-template-columns: 1fr; gap: 32px; }
  .abx-stats { grid-template-columns: 1fr 1fr; }
  .abx-steps { grid-template-columns: 1fr; }
  .abx-collage { transform: none; }
  .abx-brand { padding: 32px 20px; }
}
@media (max-width: 560px) { .abx-svc, .cx-tiles { grid-template-columns: 1fr; } .abx-team { flex-direction: column; align-items: flex-start; } }

/* ===== services + projects hub pages ===== */
.hb-hero .wrap { max-width: 1180px; }
.hb-hero .lead { max-width: 640px; }
.hb-rows { display: grid; gap: 12px; }
.hb-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 28px; align-items: center; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 22px 26px; }
.hb-row-l { display: flex; gap: 16px; align-items: flex-start; }
.hb-row-l .sp-ic { flex: 0 0 auto; }
.hb-row small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.hb-row h3 { font-size: 20px; margin: 2px 0 6px; }
.hb-row h3 a { color: var(--ink); text-decoration: none; }
.hb-row h3 a:hover { color: var(--orange-text); }
.hb-row p { margin: 0; font-size: 14px; color: var(--muted); }
.hb-row .ticks { grid-template-columns: 1fr 1fr; font-size: 13.5px; gap: 6px 16px; }
.hb-stats { grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 36px; margin-top: 26px; }
.hb-pjs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hb-pj { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.hb-pj-img { position: relative; display: block; background: var(--navy); padding: 22px 22px 0; }
.hb-pj-img img:first-child { width: 86%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px 8px 0 0; }
.hb-pj-ph { position: absolute; right: 18px; bottom: -18px; width: 22%; aspect-ratio: 9 / 18; object-fit: cover; object-position: top; border-radius: 12px; border: 4px solid #0B1530; box-shadow: var(--shadow); }
.hb-pj-txt { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hb-pj-txt small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.hb-pj-txt h3 { font-size: 22px; }
.hb-pj-txt h3 a { color: var(--ink); text-decoration: none; }
.hb-pj-txt .ticks { grid-template-columns: 1fr; margin: 4px 0 10px; }
.hb-pj-links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hb-visit { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.hb-visit:hover { color: var(--ink); }
.hb-demo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hb-demo-img img { border-radius: 12px; border: 6px solid var(--navy-2); box-shadow: var(--shadow); }
.hb-demo h2 { margin-bottom: 12px; }
.hb-demo .lead { margin: 0 0 22px; }
.hb-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hb-cta p { margin: 0; }
.hb-cta .btn-row { margin: 0; }
@media (max-width: 1000px) { .hb-row { grid-template-columns: 1fr; gap: 14px; } .hb-row .btn { justify-self: start; } }
@media (max-width: 900px) { .hb-pjs, .hb-demo { grid-template-columns: 1fr; } .hb-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hb-row .ticks { grid-template-columns: 1fr; } .hb-row { padding: 18px; } }
.cs-cta.hb-cta { flex-direction: row; text-align: left; }
.post-svc { margin-top: 28px; padding: 14px 18px; border-radius: 12px; background: #FCEBD9; font-weight: 600; }

/* ===== blog list variants ===== */
.bx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.bx-tabs button { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--paper-line); background: var(--white); color: var(--ink); cursor: pointer; }
.bx-tabs button span { color: var(--muted-2); font-weight: 500; margin-left: 2px; }
.bx-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bx-tabs button.on span { color: var(--on-navy-muted); }
.bx-rows { display: grid; gap: 10px; }
.bx-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 40px; gap: 20px; align-items: center; padding: 12px 18px 12px 12px; background: var(--white); border: 1px solid var(--paper-line); border-radius: 14px; text-decoration: none; color: var(--ink); }
.bx-row:hover { border-color: var(--ink); color: var(--ink); }
.bx-row img { width: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.bx-row-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bx-row-t .bc-tag { font-size: 11px; padding: 2px 8px; }
.bx-row-t b { font-size: 17px; line-height: 1.3; }
.bx-row-t > span:last-child { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-row-m { font-size: 13px; color: var(--muted-2); white-space: nowrap; }
.bx-group { padding: 26px 0; border-top: 1px solid var(--paper-line); }
.bx-group:first-child { border-top: 0; padding-top: 0; }
.bx-gh { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.bx-gh h2 { font-size: 24px; }
.bx-n { margin-left: auto; font-size: 13px; color: var(--muted-2); }
.bx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bx-card { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--paper-line); border-radius: 14px; padding: 10px 10px 16px; text-decoration: none; color: var(--ink); }
.bx-card:hover { border-color: var(--ink); color: var(--ink); }
.bx-card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 8px; }
.bx-card b { font-size: 16px; line-height: 1.3; padding: 0 6px; }
.bx-card span { font-size: 13px; color: var(--muted-2); padding: 0 6px; }
.bx-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 36px; }
.bx-big { display: flex; flex-direction: column; gap: 10px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 12px 12px 24px; text-decoration: none; color: var(--ink); }
.bx-big img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.bx-big .bc-tag, .bx-big b, .bx-big > span:last-child { margin: 0 12px; }
.bx-big b { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.bx-big > span:last-child { color: var(--muted); font-size: 15px; }
.bx-side { display: grid; gap: 16px; }
.bx-mid { display: grid; grid-template-columns: 44% 1fr; gap: 16px; align-items: center; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 12px; text-decoration: none; color: var(--ink); }
.bx-mid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.bx-mid > span { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bx-mid b { font-size: 18px; line-height: 1.25; }
.bx-mid em { font-style: normal; font-size: 13px; color: var(--muted-2); }
.bx-big:hover, .bx-mid:hover { border-color: var(--ink); color: var(--ink); }
.bx-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.bx-index li { border-top: 1px solid var(--paper-line); }
.bx-index a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; text-decoration: none; color: var(--ink); }
.bx-index a:hover b { color: var(--orange-text); }
.bx-c { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.bx-index b { font-size: 17px; line-height: 1.3; }
.bx-index a > span:last-child { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .bx-cards { grid-template-columns: 1fr 1fr; }
  .bx-top, .bx-index { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bx-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 18px; padding: 0 0 4px; }
  .bx-tabs button { flex: 0 0 auto; }
  .bx-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .bx-row img { width: 96px; }
  .bx-row-m, .bx-row .bf-arr, .bx-row-t > span:last-child { display: none; }
  .bx-row-t b { font-size: 15px; }
  .bx-cards { grid-template-columns: 1fr; }
  .bx-card { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding: 10px; }
  .bx-card img { grid-row: span 2; aspect-ratio: 16 / 9; }
  .bx-card b { font-size: 15px; padding: 0; }
  .bx-card span { padding: 0; }
  .bx-mid { grid-template-columns: 96px 1fr; }
  .bx-mid b { font-size: 15px; }
  .bx-big b { font-size: 21px; }
}
.bx-row[hidden] { display: none; }

/* ===== thank-you pages ===== */
.ty-hero { padding: 56px 0 60px; }
.ty-in { max-width: 860px; text-align: center; }
.ty-ok { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: var(--navy); margin-bottom: 18px; box-shadow: 0 0 0 10px rgba(242, 140, 40, .15); }
.ty-ok svg { width: 32px; height: 32px; }
.ty-hero h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 14px; }
.ty-hero .lead { font-size: 18px; max-width: 640px; margin: 0 auto 30px; }
.ty-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.ty-steps li { background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.ty-steps span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: var(--navy); font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.ty-steps b { color: var(--white); font-size: 15.5px; }
.ty-steps em { font-style: normal; font-size: 14px; color: var(--on-navy-muted); }
.ty-call { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; color: var(--on-navy-muted); font-size: 15px; }
.ty-call a { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; text-decoration: none; }
.ty-call a:hover { color: var(--orange); }
.ty-call svg { width: 18px; height: 18px; color: var(--orange); }
.ty-more { padding: 48px 0 56px; }
.ty-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ty-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); }
.ty-card:hover { border-color: var(--ink); color: var(--ink); }
.ty-card img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: top; }
.ty-card span { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.ty-card small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.ty-card b { font-size: 16px; line-height: 1.3; }
.ty-home { margin: 22px 0 0; }
@media (max-width: 760px) { .ty-steps, .ty-cards { grid-template-columns: 1fr; } .ty-card { flex-direction: row; } .ty-card img { width: 120px; aspect-ratio: 16 / 10; } .ty-hero { padding: 40px 0 44px; } }

/* ===== starting prices ===== */
.scard-price, .hb-price { margin: 14px 0 0; display: flex; flex-direction: column; gap: 2px; }
.scard-price span, .hb-price span { font-size: 14px; color: var(--muted); }
.scard-price b, .hb-price b { font-size: 22px; letter-spacing: -.02em; color: var(--ink); margin-right: 2px; }
.scard-price small, .hb-price small { font-size: 12.5px; color: var(--muted-2); }
.scard-price { padding-top: 14px; border-top: 1px solid var(--paper-line); margin-top: auto; }
.hb-price { margin-top: 10px; }
.hb-price b { font-size: 19px; }
.hb-note { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.sp-price { margin: 0 0 14px; font-size: 14.5px; color: var(--on-navy-muted); }
.sp-price b { color: var(--white); font-size: 17px; }
.sp-price span { color: var(--on-navy-muted); }
.scard .scard-price { margin-top: auto; }
.scard .scard-price + .scard-foot { margin-top: 14px; min-height: 104px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.hb-price small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-2); font-size: 12.5px; }

/* contact strip (option A, Nov 2026) */
section#contact.kc.kc-strip { padding: 56px 0; background: var(--orange); border: 0; }
.kcs-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.kc-strip .eyebrow { color: var(--navy); opacity: .75; }
.kc-strip h2 { margin: 6px 0 10px; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; color: var(--navy); }
.kcs-txt p { margin: 0; max-width: 480px; font-size: 17px; color: #2A1A12; }
.kcs-txt a { color: var(--navy); font-weight: 700; }
.kcs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kcs-f span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kcs-f input { width: 100%; height: 52px; box-sizing: border-box; padding: 0 16px; border: 2px solid transparent; border-radius: 12px; background: #FFFBF6; font: inherit; font-size: 16px; color: var(--ink); }
.kcs-f input:focus { outline: 0; border-color: var(--navy); }
.kcs-form .btn { grid-column: 1 / -1; width: 100%; height: 52px; }
.kcs-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: #3B2414; }
.kcs-note a { color: var(--navy); }
.kcs-form .form-status { grid-column: 1 / -1; margin: 0; color: var(--navy); font-weight: 600; }
.kcs-form .form-status:empty { display: none; }
.kc-strip + .site-footer { padding-top: 56px; }
@media (max-width: 900px) { .kcs-in { grid-template-columns: minmax(0, 1fr); gap: 22px; } .kcs-form { grid-template-columns: minmax(0, 1fr); } section#contact.kc.kc-strip { padding: 44px 0; } }

/* footer option A: columns (Nov 2026) */
.f2 { padding: 56px 0 24px; }
.f2-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr .8fr; gap: 36px; }
.f2-brand p { margin: 14px 0 18px; max-width: 340px; color: var(--on-navy-muted); font-size: 15px; }
.f2 .fm-msgs { gap: 6px; }
.f2 .fm-btn { padding: 8px 11px; gap: 8px; font-size: 13.5px; }
.f2 .f2-meta { margin: 14px 0 0; font-size: 13.5px; color: #7F8BA6; }
.f2-meta a { color: var(--on-navy-muted); text-decoration: none; }
.f2-meta a:hover { color: var(--white); }
.f2-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.f2-col b { margin-bottom: 4px; color: var(--white); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.f2-col a { color: var(--on-navy-muted); text-decoration: none; font-size: 15px; }
.f2-col a:hover { color: var(--orange); }
.f2-bot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--navy-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; font-size: 13px; color: #7F8BA6; }
.f2-bot a { color: var(--on-navy-muted); }
@media (max-width: 900px) { .f2-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .f2-brand { grid-column: 1 / -1; } .f2-bot { flex-direction: column; } }

/* carousel: never scroll up/down inside the strip (it was catching the mouse wheel) */
.rq-track, .rq-grid, .rw-grid, .journey { overflow-y: hidden; }

/* homepage: four promises (replaces the 4 steps, Nov 2026) */
.pm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.pm-head h2 { margin: 6px 0 0; }
.pm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pm-c { padding: 22px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.pm-c span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(242, 140, 40, .14); color: var(--orange); }
.pm-c svg { width: 22px; height: 22px; }
.pm-c h3 { margin: 14px 0 6px; color: var(--white); font-size: 18px; }
.pm-c p { margin: 0; color: #B9C2D6; font-size: 15px; }
.pm-how { margin: 22px 0 0; color: #B9C2D6; font-size: 15px; }
.pm-how b { color: var(--white); }
@media (max-width: 900px) { .pm-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pm-c { padding: 16px; } }
@media (max-width: 520px) { .pm-grid { grid-template-columns: minmax(0, 1fr); } }

/* website check: magnifier looking for weak spots (replaces the moving orange line, Nov 2026) */
.scan { position: relative; width: 240px; max-width: 100%; aspect-ratio: 8 / 5; margin: 0 auto; border-radius: 12px; background: var(--paper); border: 1px solid var(--paper-line); overflow: hidden; }
.scan-bar { position: absolute; left: 0; right: 0; top: 0; height: 11%; background: #EFE9DE; }
.scan-bar::before { content: ''; position: absolute; left: 8px; top: 50%; translate: 0 -50%; width: 6px; height: 6px; border-radius: 50%; background: #D9D1C3; box-shadow: 10px 0 #D9D1C3, 20px 0 #D9D1C3; }
.scan-b { position: absolute; background: #E4DDD0; border-radius: 4px; }
.scan-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #E5484D; opacity: 0; }
.scan-dot.d1 { left: 16%; top: 29%; animation: scanPop 6s infinite 1.1s; }
.scan-dot.d2 { left: 75%; top: 46%; animation: scanPop 6s infinite 2.6s; }
.scan-dot.d3 { left: 40%; top: 78%; animation: scanPop 6s infinite 4.1s; }
@keyframes scanPop { 0% { opacity: 0; transform: scale(.3); } 6% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); } 12% { transform: scale(1); box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }
.scan-lens { position: absolute; left: 0; top: 0; width: 24%; aspect-ratio: 1; animation: scanHunt 6s ease-in-out infinite; }
.scan-lens svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(19, 33, 63, .25)); }
@keyframes scanHunt { 0%, 100% { left: 4%; top: 13%; } 18%, 25% { left: 9%; top: 16%; } 43%, 50% { left: 67%; top: 33%; } 68%, 75% { left: 32%; top: 65%; } }
.pp-wait { padding: 4px 0 0; }
.pp .pp-pane[data-pp="wait"] { justify-content: flex-start; }
.pp .pp-pane[data-pp="wait"] .pp-soon { margin-top: auto; }
.wc-wait .scan { margin: 18px 0 0; }
@media (prefers-reduced-motion: reduce) { .scan-lens, .scan-dot { animation: none; } .scan-dot { opacity: 1; } .scan-lens { left: 9%; top: 16%; } }
.pp-wait .scan { width: 180px; }
.pp-wait p { margin-top: 12px; }

/* phone screenshots are 390x700: match the frame so nothing is cut off */
.hb-pj-ph, .cs-phone { box-sizing: content-box; aspect-ratio: 39 / 70; object-fit: cover; object-position: top center; }

/* report: searches you target + Google rankings (Nov 2026) */
.kw-sec { margin: 34px 0; }
.wc-subs.six { grid-template-columns: repeat(4, 1fr); }
.ss-lock { text-decoration: none; }
.ss-lock .lk { width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%; border: 7px solid #E7E0D4; display: grid; place-items: center; color: var(--muted-2); }
.ss-lock:hover .lk { color: var(--orange-text); }
.kw-scroll { overflow-x: auto; }
.kw-tab { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--paper-line); border-radius: 14px; overflow: hidden; font-size: 15px; }
.kw-tab th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 12px 16px; background: var(--paper-2); }
.kw-tab td { padding: 12px 16px; border-top: 1px solid var(--paper-line); }
.kw-tab td:not(:first-child), .kw-tab th:not(:first-child) { text-align: center; width: 120px; }
.kw-m { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: 13px; }
.kw-ok { background: #E3F4EA; color: #1E8E5A; } .kw-bad { background: #FCE8E1; color: #C2410C; } .kw-mid { background: #FBF0D9; color: #B7791F; }
.kw-sum { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--white); border: 1px solid var(--paper-line); }
.kw-sum b { flex: none; font-size: 28px; color: var(--navy); }
.kw-sum span { color: var(--muted); }
.kw-note { font-size: 13px; color: var(--muted-2); margin: 10px 0 0; }
.kw-loc { font-style: normal; }
.kw-rank td:last-child, .kw-rank th:last-child { width: 260px; text-align: left; }
.kw-pos { display: inline-block; min-width: 44px; padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: 14px; text-align: center; }
.kw-p1 { background: #E3F4EA; color: #1E8E5A; } .kw-p2 { background: #FBF0D9; color: #B7791F; } .kw-p3, .kw-pno { background: #FCE8E1; color: #C2410C; } .kw-pna { background: var(--paper-2); color: var(--muted-2); }
.kw-pos + small { margin-left: 8px; color: var(--muted-2); font-size: 13px; }
.kw-wrap { position: relative; }
.kw-wrap.locked .kw-pos { filter: blur(5px); user-select: none; }
.kw-gate { position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 340px; padding: 22px; border-radius: 16px; background: var(--navy); color: var(--white); box-shadow: 0 24px 60px -20px rgba(19, 33, 63, .6); }
.kw-gate[hidden] { display: none; }
.kw-gate h4 { margin: 8px 0 6px; font-size: 19px; color: var(--white); }
.kw-gate p { margin: 0 0 14px; font-size: 14px; color: #B9C2D6; }
.kw-gate .lk { color: var(--orange); }
.kw-gate form { display: grid; gap: 8px; }
.kw-gate input[type="email"] { height: 46px; border-radius: 10px; border: 0; padding: 0 14px; font: inherit; font-size: 15px; }
.kw-gate small { display: block; margin-top: 8px; font-size: 12.5px; color: #B9C2D6; }
.kw-new { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--navy); color: var(--white); }
.kw-new[hidden] { display: none; }
.kw-new b { flex: none; font-size: 30px; }
.kw-new span { color: #B9C2D6; font-size: 14.5px; }
.kw-new em { font-style: normal; color: var(--orange); font-weight: 700; }
.pp-rank { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #FFF4E8; border: 1px solid #F7D2AA; font-size: 14px; color: var(--ink); text-decoration: none; }
.pp-rank[hidden] { display: none; }
.pp-rank .lk { color: #C2410C; flex: none; display: grid; }
.pp-rank:hover { border-color: var(--orange); color: var(--ink); }
@media (max-width: 760px) {
  .kw-gate { position: static; translate: none; width: auto; margin-top: 12px; }
  .kw-tab { font-size: 13.5px; } .kw-tab th, .kw-tab td { padding: 10px 8px; }
  .kw-tab td:not(:first-child), .kw-tab th:not(:first-child), .kw-rank td:last-child, .kw-rank th:last-child { width: auto; }
  .kw-pos + small { display: block; margin: 4px 0 0; }
  .wc-subs.six { grid-template-columns: repeat(3, 1fr); }
}

/* report part scores in two groups (Nov 2026) */
.wc-subs.grp { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
.ssg-h { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-text); }
.ssg-h em { font-style: normal; color: var(--muted-2); margin-left: 4px; }
.ssg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ssg + .ssg { padding-top: 14px; border-top: 1px solid var(--paper-line); }
@media (max-width: 860px) { .ssg-row { grid-template-columns: repeat(4, 1fr); gap: 8px; } .ssg-row .ss span { font-size: 11.5px; } }
@media (max-width: 420px) { .ssg-row { gap: 4px; } .ssg-row .ss > svg { width: 58px; height: 58px; } .ssg-row .ss b { top: 18px; font-size: 16px; } .ssg-row .ss-lock .lk { width: 58px; height: 58px; } .ssg-row .ss span { font-size: 11px; } }

/* rankings fill in one by one */
.kw-wait { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-2); color: var(--muted); font-weight: 600; }
.kw-spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: ppSpin .8s linear infinite; flex: none; }
.kw-spin-l { width: 26px; height: 26px; border-width: 3px; color: var(--orange); }
.kw-prog { font-size: 15px !important; color: var(--white); }
@media (prefers-reduced-motion: reduce) { .kw-spin { animation-duration: 2.4s; } }

/* report in side tabs (Nov 2026) */
.rt { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 24px; }
.rt-bar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--white); border: 1px solid var(--paper-line); border-radius: 16px; }
.rt-btn { -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; border: 0; border-radius: 10px; background: none; font: 600 14.5px var(--font); color: var(--muted); text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.rt-btn:hover { background: var(--paper); color: var(--ink); }
.rt-btn.on { background: var(--navy); color: var(--white); }
.rt-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rt-l { margin-right: auto; }
.rt-s { display: inline-flex; gap: 4px; }
.rt-plan { margin-top: 6px; background: #FFF4E8; color: var(--ink); }
.rt-plan:hover { background: #FFE9D2; }
.rt-plan.on { background: var(--orange); color: var(--navy); }
.tb { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.tb-bad { background: #FCE8E1; color: #C2410C; } .tb-mid { background: #FBF0D9; color: #B7791F; } .tb-ok { background: #E3F4EA; color: #1E8E5A; }
.tb-lock { background: #F1ECE3; color: var(--muted-2); } .tb-lock svg { width: 13px; height: 13px; }
.tb-go { background: var(--orange); color: var(--navy); }
.rt-plan.on .tb-go { background: var(--navy); color: var(--white); }
.rt-p[hidden] { display: none; }
.rt-p > :first-child, .rt-p > :first-child .wc-h3:first-child { margin-top: 0; }
.rt-p .kw-sec { margin: 0 0 32px; }
.rt-p #wc-g-box, .rt-p #wc-top3 { margin-bottom: 28px; }
.rt-p .wc-cta { margin-top: 24px; }
.plan-steps { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-steps li { display: flex; gap: 14px; padding: 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--paper-line); }
.plan-steps li > span { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: var(--navy); display: grid; place-items: center; font-weight: 800; }
.plan-steps b { display: block; color: var(--ink); font-size: 16px; }
.plan-steps p { margin: 4px 0 6px; color: var(--muted); font-size: 14.5px; }
.plan-steps small { color: var(--orange-text); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.plan-price { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.plan-price span { padding: 8px 12px; border-radius: 999px; background: var(--paper-2); font-size: 14px; color: var(--ink); }
.plan-price .plan-free { background: #E3F4EA; color: #1E8E5A; font-weight: 700; }
@media (max-width: 900px) {
  .rt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rt-bar { position: sticky; top: 76px; z-index: 5; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px; border-radius: 14px; }
  .rt-bar::-webkit-scrollbar { display: none; }
  .rt-btn { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 9px 12px; font-size: 14px; }
  .rt-plan { margin-top: 0; }
  .plan-steps { grid-template-columns: minmax(0, 1fr); }
}

/* report tabs across the top (option A, replaces the side layout) */
.rt { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.rt-bar { position: sticky; top: 69px; z-index: 5; flex-direction: row; gap: 4px; padding: 0; overflow-x: auto; scrollbar-width: none; background: var(--paper); border: 0; border-bottom: 1px solid var(--paper-line); border-radius: 0; }
.rt-bar::-webkit-scrollbar { display: none; }
.rt-btn { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 14px 14px 12px; border-radius: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.rt-btn:hover { background: none; color: var(--ink); }
.rt-btn.on { background: none; color: var(--ink); border-bottom-color: var(--orange); }
.rt-l { margin-right: 0; }
.rt-plan { margin: 0 0 0 auto; background: #FFF4E8; border-radius: 10px 10px 0 0; }
.rt-plan:hover { background: #FFE9D2; }
.rt-plan.on { background: #FFE9D2; color: var(--ink); border-bottom-color: var(--orange); }
.rt-plan.on .tb-go { background: var(--orange); color: var(--navy); }
@media (max-width: 900px) {
  .rt { gap: 18px; }
  .rt-bar { top: 69px; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--paper-line); }
  .rt-btn { padding: 9px 12px; border: 1px solid var(--paper-line); border-radius: 999px; margin: 0; background: var(--white); }
  .rt-btn.on { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .rt-plan { margin: 0; border-radius: 999px; background: #FFF4E8; }
  .rt-plan.on { background: var(--orange); color: var(--navy); border-color: var(--orange); }
}

/* report tabs: thin lines between tabs, small status dots instead of count bubbles */
.rt-btn { position: relative; padding: 14px 20px 12px; }
.rt-btn:not(:last-child):not(.rt-plan)::after { content: ''; position: absolute; right: 0; top: 14px; bottom: 14px; width: 1px; background: #E3DCCF; }
.rt-s .tb { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; }
.rt-s .tb-ok { background: #1E8E5A; } .rt-s .tb-bad { background: #C2410C; } .rt-s .tb-mid { background: #D4A017; }
.rt-s .tb-lock { width: auto; height: auto; background: none; }
.rt-s .tb-lock svg { width: 13px; height: 13px; color: var(--muted-2); }
.rt-s .tb-go { width: auto; height: auto; padding: 0; font-size: 14px; background: none; color: inherit; }
.rt-plan.on .rt-s .tb-go { background: none; color: inherit; }
@media (max-width: 900px) {
  .rt-btn { padding: 9px 14px; }
  .rt-btn::after { display: none; }
  .rt-btn.on .tb-lock svg { color: var(--white); }
}

/* report: one column, sections that open and close (Nov 2026) */
#wc-out { max-width: 820px; margin: 0 auto; }
#wc-out .wc-head { flex-wrap: wrap; }
#wc-out .wc-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
#wc-out .wc-subs.grp { border-left: 0; padding-left: 0; border-top: 1px solid var(--paper-line); padding-top: 20px; }
.sxs { margin-top: 18px; }
.sx { border-top: 1px solid var(--paper-line); }
.sx > summary { list-style: none; cursor: pointer; padding: 20px 0; }
.sx > summary::-webkit-details-marker { display: none; }
.sx > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 8px; }
.sx-h { display: flex; align-items: center; gap: 12px; }
.sx-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.sx-t { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.sx-st { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.sx-st .tb { height: auto; padding: 4px 10px; font-size: 13px; font-weight: 700; border-radius: 999px; }
.sx-st .tb-lock { padding: 4px 8px; } .sx-st .tb-lock svg { width: 13px; height: 13px; }
.sx-tg { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--paper-line); background: var(--white); position: relative; }
.sx-tg::before, .sx-tg::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: var(--muted); translate: -50% -50%; border-radius: 2px; }
.sx-tg::after { rotate: 90deg; transition: rotate .2s; }
.sx[open] .sx-tg::after { rotate: 0deg; }
.sx > summary:hover .sx-tg { border-color: var(--orange); }
.sx-sub { display: block; margin: 4px 0 0 42px; color: var(--muted); font-size: 14.5px; }
.sx-body { padding: 0 0 30px; }
.sx-body .sx-dup { display: none; }
.sx-body .kw-sec { margin: 0 0 26px; }
.sx-body #wc-g-box { margin-bottom: 22px; }
.sx-body .g-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sx-body .st-grid { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--white); border: 1px solid var(--paper-line); border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.sx-body .st-grid > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; min-height: 0; padding: 12px 18px; border: 0; border-top: 1px solid #EEE8DD; border-radius: 0; background: var(--white); }
.sx-body .st-grid > div:first-child { border-top: 0; }
.sx-body .st-grid > div em { grid-column: 3; grid-row: 1; font-style: normal; }
.sx-body .wc-ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sx-body .wc-arrow { display: none; }
.sx-body .wc-ba .br img { height: 240px; width: 100%; object-fit: cover; object-position: top; aspect-ratio: auto; }
.sx-body .plan-steps { grid-template-columns: minmax(0, 1fr); }
.sx-body .wc-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.sx-body .kw-gate { width: 300px; }
@media (max-width: 700px) {
  .sx-t { font-size: 18px; }
  .sx-h { flex-wrap: wrap; row-gap: 8px; }
  .sx-sub { margin-left: 42px; }
  .sx-body .kw-gate { width: auto; }
}
/* section headers: fixes */
.sxs .sx-h { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 30px; align-items: center; gap: 12px; }
.sxs .rt-s.sx-st { margin: 0; }
.sxs .rt-s .tb { width: auto; min-width: 0; height: auto; padding: 4px 10px; font-size: 13px; font-weight: 700; border-radius: 999px; line-height: 1.3; }
.sxs .rt-s .tb-ok { background: #E3F4EA; color: #1E8E5A; } .sxs .rt-s .tb-bad { background: #FCE8E1; color: #C2410C; } .sxs .rt-s .tb-mid { background: #FBF0D9; color: #B7791F; }
.sxs .rt-s .tb-lock { background: #F1ECE3; padding: 4px 8px; display: inline-grid; place-items: center; }
#wc-plan > .wc-h3:first-child { display: none; }
.sx-body #wc-top3 { margin-bottom: 0; }
.sx-body .wc-lead { align-items: stretch; }
.sx-body .wc-lead input { height: 48px; min-height: 0; }
@media (max-width: 700px) {
  .sxs .sx-h { grid-template-columns: 30px minmax(0, 1fr) 30px; row-gap: 6px; }
  .sxs .sx-st { grid-column: 2; grid-row: 2; justify-self: start; }
  .sxs .sx-tg { grid-column: 3; grid-row: 1; }
  .sx-sub { margin-left: 42px; }
  .sx-body .wc-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

.sx { scroll-margin-top: 84px; }
#wc-rk-box { scroll-margin-top: 90px; }
/* section 7: the two sites side by side on wider screens */
@media (min-width: 701px) {
  .sx-body .wc-ba { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 14px; align-items: start; }
  .sx-body .wc-arrow { display: grid; place-items: center; align-self: center; margin-top: 28px; }
  .sx-body .wc-ba .br img { height: 230px; }
  .sx-body .wc-ba .wc-stats { flex-wrap: wrap; gap: 4px 14px; }
}
/* report back to the full page width; score and part scores side by side again */
#wc-out { max-width: none; }
@media (min-width: 901px) {
  #wc-out .wc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; }
  #wc-out .wc-subs.grp { border-top: 0; padding-top: 0; border-left: 1px solid var(--paper-line); padding-left: 24px; }
}

/* results in the top section (Nov 2026) */
.wc-hero.res .wc-hero-in { display: block; }
.wc-hero.res .wc-hero-l, .wc-hero.res .wc-hero-r { display: none; }
.wc-hres .eyebrow { margin: 0 0 6px; }
.wc-hres-h { margin: 0 0 26px; color: var(--white); font-size: 44px; overflow-wrap: anywhere; }
.wc-hres .wc-top { background: none; border: 0; box-shadow: none; padding: 0; color: var(--white); }
.wc-hres .wc-score p b, .wc-hres .wc-num b, .wc-hres .ss b { color: var(--white); }
.wc-hres .wc-score p, .wc-hres .ss span { color: #B9C2D6; }
.wc-hres .wc-num span, .wc-hres .ssg-h em { color: #8C97B0; }
.wc-hres .ssg-h { color: var(--orange); }
.wc-hres .wc-subs.grp { border-left-color: rgba(255, 255, 255, .12); border-top-color: rgba(255, 255, 255, .12); }
.wc-hres .ssg + .ssg { border-top-color: rgba(255, 255, 255, .12); }
.wc-hres svg circle:first-child { stroke: rgba(255, 255, 255, .12); }
.wc-hres .ss-lock .lk { border-color: rgba(255, 255, 255, .14); color: #8C97B0; }
.wc-hero.res + .wc-rep, .wc-hero.res ~ .wc-rep { padding-top: 26px; }
/* action bar under the top section */
.wc-hero.res ~ .wc-rep .wc-head > div:first-child { display: none; }
.wc-hero.res ~ .wc-rep .wc-head { justify-content: flex-end; margin-bottom: 10px; }
.wc-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-hero.res ~ .wc-rep .wc-src { margin-right: auto; }
.wc-hero.res ~ .wc-rep .wc-head-r { width: 100%; }
.wc-again-b { gap: 8px; }
.wc-again { display: flex; gap: 8px; max-width: 520px; margin: 0 0 16px auto; padding: 6px; background: var(--white); border: 1px solid var(--paper-line); border-radius: 14px; }
.wc-again[hidden] { display: none; }
.wc-again input { flex: 1; min-width: 0; border: 0; outline: 0; font: 500 16px var(--font); color: var(--ink); padding: 0 10px; background: none; }
.sxs .sx:first-child { border-top: 0; }
@media (max-width: 700px) {
  .wc-hres-h { font-size: 28px; margin-bottom: 20px; }
  .wc-hero.res ~ .wc-rep .wc-src { width: 100%; }
  .wc-hero.res ~ .wc-rep .wc-head-r .btn { flex: 1; }
}
@media (max-width: 700px) {
  .wc-hres-h { font-size: 26px; margin-bottom: 26px; }
  .wc-hero.res ~ .wc-rep .wc-head-r .btn { padding: 0 10px; font-size: 14px; white-space: nowrap; gap: 6px; }
  .wc-hero.res ~ .wc-rep .wc-src { display: none; }
}
@media (max-width: 700px) { .wc-hres .wc-top { margin-top: 18px; } }

/* "i" explanations next to the part scores */
.ss > span { position: relative; }
.ss-i { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; vertical-align: 1px; border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit; opacity: .7; font: 700 10px/1 var(--font); font-style: italic; cursor: help; padding: 0; }
.ss-i:hover, .ss-i:focus-visible { opacity: 1; outline: none; }
.ss-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; z-index: 30; width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: 0 14px 34px -12px rgba(10, 20, 40, .45); font: 500 13px/1.45 var(--font); font-style: normal; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, translate .15s; }
.ss-tip::after { content: ''; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 6px solid transparent; border-top-color: var(--white); }
.ss-i:hover .ss-tip, .ss-i:focus .ss-tip { opacity: 1; visibility: visible; translate: -50% 0; }
.ss-lockw .ss-lock { display: grid; place-items: center; }
@media (max-width: 700px) { .ss-tip { width: 200px; } .ssg-row .ss:first-child .ss-tip { left: 0; translate: 0 4px; } .ssg-row .ss:first-child .ss-i:focus .ss-tip, .ssg-row .ss:first-child .ss-i:hover .ss-tip { translate: 0 0; } .ssg-row .ss:first-child .ss-tip::after { left: 18px; } .ssg-row .ss:nth-child(4) .ss-tip { left: auto; right: 0; translate: 0 4px; } .ssg-row .ss:nth-child(4) .ss-i:focus .ss-tip, .ssg-row .ss:nth-child(4) .ss-i:hover .ss-tip { translate: 0 0; } .ssg-row .ss:nth-child(4) .ss-tip::after { left: auto; right: 10px; } }
/* "How to read this report" link + pop-up */
.wc-howto { display: inline-flex; align-items: center; gap: 8px; margin: -14px 0 24px; padding: 0; border: 0; background: none; color: #B9C2D6; font: 600 15px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wc-howto:hover { color: var(--white); }
.wc-howto svg { color: var(--orange); }
.hw-mhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px 0; }
.hw-mhead h2 { margin: 0; font-size: 24px; }
.hw-modal section p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.hw-modal .modal-h3 em { font-style: normal; font-weight: 600; color: var(--orange-text); font-size: 13px; margin-left: 6px; }
.hw-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.hw-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.hw-list b { color: var(--ink); font-size: 15px; } .hw-list span { color: var(--muted); font-size: 14.5px; }
.hw-keys { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.hw-keys li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--muted); }
.hw-keys b { color: var(--ink); margin-right: 4px; }
.hw-keys i { flex: none; width: 10px; height: 10px; border-radius: 50%; translate: 0 1px; }
.k-ok { background: #1E8E5A; } .k-mid { background: #D4A017; } .k-bad { background: #C2410C; }
.hw-foot { padding-top: 16px; border-top: 1px solid var(--paper-line); }
.hw-foot .btn-row { margin-top: 12px; }
@media (max-width: 700px) { .hw-mhead { padding: 18px 16px 0; } .wc-howto { margin: -10px 0 20px; font-size: 14px; } }
.ss-i { display: inline-block; width: 15px; height: 15px; border: 0; opacity: .75; vertical-align: -2px; line-height: 0; }
.ss-i .ss-ig { display: block; }
.ss .ss-i .ss-tip, .wc-hres .ss .ss-i .ss-tip { color: var(--ink); font-size: 13px; line-height: 1.45; font-weight: 500; }
.wc-hres .ss-i .ss-ig circle:first-child { stroke: currentColor; }
.ss .ss-i .ss-tip { position: absolute; display: block; white-space: normal; }
.wc-howto { margin: -16px 0 30px; }

/* action bar: how-to link on the left; search field + PDF on the right */
.wc-hero.res ~ .wc-rep .wc-head-r { display: flex; align-items: center; gap: 10px; }
.wc-head-r .wc-howto { margin: 0 auto 0 0; color: var(--ink); font-size: 15px; }
.wc-head-r .wc-howto:hover { color: var(--orange-text); }
.wc-again { display: flex; align-items: center; gap: 6px; width: 360px; max-width: 100%; margin: 0; padding: 4px 4px 4px 12px; background: var(--white); border: 1px solid var(--paper-line); border-radius: 12px; }
.wc-again:focus-within { border-color: var(--orange); }
.wc-again svg { flex: none; color: var(--muted-2); }
.wc-again input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; padding: 0 4px; font: 500 15px var(--font); color: var(--ink); background: none; }
.wc-again .btn { min-height: 38px; padding: 0 14px; }
.hw-src { margin: 0; font-size: 13px; color: var(--muted-2); }
@media (max-width: 900px) {
  .wc-hero.res ~ .wc-rep .wc-head-r { flex-wrap: wrap; }
  .wc-again { flex: 1 1 100%; width: auto; order: 2; }
  .wc-head-r .wc-pdf { order: 3; flex: 1 1 100%; }
  .wc-head-r .wc-howto { order: 1; }
}
@media (max-width: 900px) { .wc-again .btn { flex: none; width: auto; padding: 0 16px; } .wc-again input { font-size: 15px; } }
.wc-hero.res ~ .wc-rep .wc-head-r .wc-again .btn { flex: none; }

/* part scores as bars (Nov 2026) */
.wc-subs.grp .ssg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.sb { display: grid; grid-template-columns: 175px minmax(0, 1fr) 38px; align-items: center; gap: 14px; }
.sb-n { font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.sb-bar { display: block; height: 7px; border-radius: 7px; background: var(--paper-2); position: relative; overflow: hidden; }
.sb-bar em { position: absolute; inset: 0 auto 0 0; border-radius: 7px; transition: width 1s cubic-bezier(.2, .7, .2, 1); }
.sb b { justify-self: end; font-size: 16px; color: var(--ink); }
.sb-dots { background: repeating-linear-gradient(90deg, var(--paper-line) 0 6px, transparent 6px 10px); }
.sb-lk { justify-self: end; display: grid; place-items: center; color: var(--muted-2); }
.sb-lk svg { width: 16px; height: 16px; }
.sb-lk:hover { color: var(--orange); }
.wc-subs.grp .ssg-h { margin-bottom: 14px; }
.wc-subs.grp .ssg + .ssg { padding-top: 18px; }
.sb .ss-tip { left: 0; translate: 0 4px; } .sb .ss-i:hover .ss-tip, .sb .ss-i:focus .ss-tip { translate: 0 0; }
.sb .ss-tip::after { left: 12px; translate: 0 0; }
.sb .ss-i { margin-left: 6px; }
/* on navy */
.wc-hres .sb-n { color: #DCE2EE; }
.wc-hres .sb b { color: var(--white); }
.wc-hres .sb-bar { background: rgba(255, 255, 255, .1); }
.wc-hres .sb-dots { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 6px, transparent 6px 10px); }
.wc-hres .sb-lk { color: #8C97B0; }
.wc-hres .sb .ss-i { color: #B9C2D6; }
@media (max-width: 700px) { .sb { grid-template-columns: 140px minmax(0, 1fr) 32px; gap: 10px; } .sb-n { font-size: 13.5px; } }
.wc-hres .sb-bar em { filter: brightness(1.3) saturate(1.1); }
.sb .ss-i .ss-tip { white-space: normal; width: 250px; left: -8px; }
.sb .ss-tip::after { left: 14px; }
.wc-hres .sb-bar em { filter: brightness(1.15); }
@media (max-width: 700px) { .sb .ss-i .ss-tip { width: 220px; } }

/* free tools pages (Nov 2026) */

.tl-hero{padding:60px 0 64px}.tl-hero h1{max-width:760px}.tl-hero .lead{max-width:640px}
.tl-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;color:#DCE2EE;font-size:14.5px}.tl-trust li::before{content:'✓';color:#F28C28;font-weight:800;margin-right:7px}
.tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tl-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:18px;background:#fff;border:1px solid #E8E1D5;text-decoration:none;color:#13213F;transition:border-color .2s,transform .2s}
.tl-card:hover{border-color:#F28C28;transform:translateY(-3px)}
.tl-card:first-child{grid-column:span 2;background:#13213F;color:#fff;border-color:#13213F}
.tl-card:first-child h3,.tl-card:first-child .tl-foot b{color:#fff}.tl-card:first-child p,.tl-card:first-child em{color:#B9C2D6}
.tl-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#FFF1E2;color:#C2610C}.tl-ic svg{width:24px;height:24px}
.tl-card:first-child .tl-ic{background:rgba(242,140,40,.16);color:#F28C28}
.tl-tag{position:absolute;top:22px;right:22px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.tl-live{background:#F28C28;color:#13213F}.tl-new{background:#E3F4EA;color:#1E8E5A}.tl-soon .tl-tag{background:#F1ECE3;color:#6B7280}
.tl-card h3{margin:6px 0 0;font-size:20px}.tl-card p{margin:0;color:#5A6378;font-size:15px;flex:1}
.tl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:14px;border-top:1px solid rgba(127,127,127,.18)}
.tl-foot em{font-style:normal;font-size:13px;color:#8A8F99}.tl-foot b{font-size:14.5px;color:#A44F08}
.tl-soon{background:#FBF9F5}.tl-soon .tl-ic{background:#F1ECE3;color:#8A8F99}
.tl-how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tl-how div{padding:20px;border-radius:16px;background:#F1ECE3}.tl-how b{display:block;color:#13213F;font-size:16px;margin:8px 0 4px}.tl-how span{color:#5A6378;font-size:14.5px}
.tl-how i{font-style:normal;width:30px;height:30px;border-radius:50%;background:#13213F;color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
/* maps check */
.mp-form{box-sizing:border-box;display:grid;grid-template-columns:1.2fr 1fr .9fr auto;gap:8px;max-width:820px;margin-top:22px;padding:8px;background:#fff;border-radius:16px}
.mp-form label{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-right:1px solid #EEE8DD}.mp-form label:nth-child(3){border-right:0}
.mp-form small{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8A8F99}.mp-form input{border:0;outline:0;font:500 16px Onest,sans-serif;color:#13213F;padding:2px 0}
.mp-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.mp-map{position:relative;border-radius:18px;overflow:hidden;border:1px solid #E8E1D5;background:#E9EEE6;aspect-ratio:4/3}
.mp-map svg.bg{position:absolute;inset:0;width:100%;height:100%}
.mp-pin{position:absolute;translate:-50% -100%;display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#C2410C;color:#fff;box-shadow:0 6px 14px -4px rgba(0,0,0,.4)}
.mp-pin b{rotate:45deg;font-size:13px}.mp-pin.you{background:#F28C28;width:40px;height:40px}.mp-pin.you b{color:#13213F}
.mp-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #E8E1D5;border-radius:18px;overflow:hidden}
.mp-list li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid #EEE8DD}.mp-list li:first-child{border-top:0}
.mp-list .n{width:28px;height:28px;border-radius:50%;background:#13213F;color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.mp-list b{display:block;color:#13213F}.mp-list small{color:#6B7280;font-size:13px}.mp-list .rv{text-align:right;font-size:14px;color:#13213F;font-weight:700}.mp-list .rv span{color:#E2A02B}
.mp-list li.you{background:#FFF4E8}.mp-list li.you .n{background:#F28C28;color:#13213F}
.mp-list li.lock{filter:blur(4px);user-select:none}
.mp-gap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.mp-gap div{padding:16px;border-radius:14px;background:#fff;border:1px solid #E8E1D5}.mp-gap b{display:block;font-size:26px;color:#13213F}.mp-gap span{font-size:13.5px;color:#5A6378}
.mp-gate{display:grid;grid-template-columns:1fr auto;gap:10px 10px;align-items:center;padding:16px 18px;border-radius:14px;background:#13213F;color:#fff;margin-top:12px}.mp-gate p{margin:0;grid-column:1/-1;color:#B9C2D6;font-size:14.5px}.mp-gate p b{color:#fff}
.mp-gate input{height:42px;border:0;border-radius:10px;padding:0 12px;font:inherit;width:100%;box-sizing:border-box}
.mp-next{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px;padding:20px 22px;border-radius:16px;background:#F1ECE3}
.mp-next b{color:#13213F}.mp-next span{color:#5A6378;font-size:14.5px;display:block}
@media(max-width:900px){.tl-grid{grid-template-columns:1fr}.tl-card:first-child{grid-column:auto}.tl-how{grid-template-columns:1fr}.mp-form{grid-template-columns:1fr}.mp-form label{border-right:0;border-bottom:1px solid #EEE8DD}.mp-wrap{grid-template-columns:1fr}.mp-gap{grid-template-columns:1fr}.mp-gate{flex-wrap:wrap}.mp-gate input{width:100%}.mp-next{flex-direction:column;align-items:flex-start}}

.tl-card.tl-soon:hover { transform: none; border-color: #E8E1D5; }
.tl-notify { border: 0; background: none; padding: 0; font: 700 14.5px var(--font); color: #A44F08; cursor: pointer; }
.tl-notify:hover { text-decoration: underline; }
.nt-form { display: flex; gap: 8px; } .nt-form input[type=email] { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--paper-line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 16px; }
.nt-msg { margin: 0; color: var(--green, #1E8E5A); font-weight: 600; } .nt-msg:empty { display: none; }
.mp-sec { padding: 48px 0 72px; }
.mp-wait { text-align: center; padding: 30px 0; } .mp-wait .scan { width: 200px; } .mp-wait p { font-weight: 700; font-size: 18px; margin: 16px 0 0; }
.mp-err { text-align: center; padding: 30px 0; } .mp-err h2 { font-size: 24px; margin: 0 0 8px; }
.mp-gap b { overflow-wrap: anywhere; }
.mp-gate-f { display: contents; }
.mp-gate small { grid-column: 1 / -1; color: #B9C2D6; font-size: 12.5px; } .mp-gate small:empty { display: none; }
.mp-gate[hidden] { display: none; }
.mp-list li.mp-more { grid-template-columns: 1fr; text-align: center; color: var(--muted); font-size: 14px; }
.mp-none { padding: 18px; color: var(--muted); }
.mp-cta { margin-top: 24px; } .mp-cta .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wc-note + .mp-x { display: none; }
.wc-next { margin: 18px 0 0; }
.mp-cta .btn-line { color: var(--white); border-color: rgba(255,255,255,.4); }
.mp-cta .btn-line:hover { border-color: var(--white); color: var(--white); }

/* "More free tools" strip + crumbs in the website-check hero */
.tl-more { margin-top: 44px; }
.tl-more-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tl-mini { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--paper-line); text-decoration: none; color: var(--ink); transition: border-color .2s; }
.tl-mini:hover { border-color: var(--orange); color: var(--ink); }
.tl-mini .tl-ic { flex: none; width: 42px; height: 42px; }
.tl-mini b { display: block; font-size: 16px; } .tl-mini small { color: var(--muted); font-size: 14px; }
.tl-mini em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--orange-text); }
.wc-hero .crumbs { margin: 0 0 6px; }
@media (max-width: 700px) { .tl-more-row { grid-template-columns: minmax(0, 1fr); } }
.mp-form + .wc-note { margin-top: 12px; }
/* one breadcrumb position on every page: same top padding and spacing as the service pages */
.tl-hero, .wc-hero { padding-top: 40px; }
.wc-hero .wc-hero-in { align-items: start; }
.wc-hero .crumbs { margin: 0 0 26px; }
.wc-hero .wc-hero-l { gap: 0; }
.wc-hero .wc-hero-l > .eyebrow { margin-bottom: 14px; }
.wc-hero .wc-hero-l > h1 { margin-bottom: 14px; }
.wc-hero .wc-hero-l > .lead { margin: 0 0 8px; }
.wc-hero .wc-hero-l > .wc-note { margin-top: 14px; }
.wc-hero .wc-hero-r { align-self: center; }
.post-hero { padding-top: 40px; }

/* tool pages: same hero on every tool, with a smaller sample card */
@media (min-width: 901px) {
.wc-hero .wc-hero-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; }
.wc-hero .wc-hero-r { align-self: center; justify-self: end; width: 100%; max-width: 390px; }
}
.wc-mock { padding: 20px 22px; border-radius: 18px; }
.wc-mock-top { gap: 14px; } .wc-mock-top b { font-size: 18px; } #wc-mk-n { font-size: 34px; }
.wc-mock-bars { gap: 8px; margin: 14px 0; } .wc-mock-bars div { grid-template-columns: 128px 1fr; font-size: 12.5px; }
.wc-mock-list { padding-top: 10px; } .wc-mock-list p { margin-top: 8px; }
.wc-mock-cap { margin-top: 12px; font-size: 11.5px; }
/* Maps check sample card */
.mm-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--paper-line); border-radius: 999px; }
.mm-g { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0); }
.mm-q { font-size: 14px; font-weight: 600; color: var(--ink); }
.mm-map { position: relative; height: 150px; margin: 12px 0; border-radius: 12px; overflow: hidden; }
.mm-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-pin { position: absolute; translate: -50% -100%; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #C2410C; display: grid; place-items: center; box-shadow: 0 4px 10px -3px rgba(0,0,0,.4); }
.mm-pin b { rotate: 45deg; color: #fff; font-size: 11px; }
.mm-pin.mm-you { background: var(--orange); width: 28px; height: 28px; } .mm-you b { color: var(--navy); }
.mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mm-list li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.mm-list i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.mm-list s { display: block; height: 8px; border-radius: 8px; background: var(--paper-2); text-decoration: none; }
.mm-list em { font-style: normal; color: #E2A02B; letter-spacing: 1px; font-size: 11px; }
.mm-me { padding: 6px 8px; margin: 0 -8px; border-radius: 10px; background: #FFF4E8; }
.mm-me i { background: var(--orange); color: var(--navy); } .mm-me span { font-weight: 700; color: var(--ink); } .mm-me em { color: var(--orange-text); font-weight: 700; letter-spacing: 0; }
/* Maps form fits the left column: firm on its own row */
.tool-hero .mp-form { grid-template-columns: 1fr 1fr auto; max-width: 620px; }
.tool-hero .mp-form label:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #EEE8DD; }
.tool-hero .mp-form label:nth-child(2) { border-right: 1px solid #EEE8DD; }
@media (max-width: 900px) { .tool-hero .mp-form { grid-template-columns: 1fr; } .tool-hero .mp-form label:nth-child(2) { border-right: 0; border-bottom: 1px solid #EEE8DD; } }
@media (min-width: 901px) {
  .wc-hero { padding-bottom: 56px; }
  .wc-hero .wc-hero-r { align-self: start; margin-top: 4px; }
}
/* Maps check: the search fits on one line, like the website check */
@media (min-width: 901px) {
  .tool-hero .mp-form { grid-template-columns: 1.35fr 1fr .85fr auto; gap: 0; padding: 6px; max-width: 640px; border-radius: 14px; }
  .tool-hero .mp-form label, .tool-hero .mp-form label:first-child, .tool-hero .mp-form label:nth-child(2) { grid-column: auto; border: 0; border-right: 1px solid #EEE8DD; padding: 2px 12px; }
  .tool-hero .mp-form label:nth-child(3) { border-right: 0; }
  .tool-hero .mp-form small { font-size: 10.5px; }
  .tool-hero .mp-form input { font-size: 15px; width: 100%; min-width: 0; }
  .tool-hero .mp-form .btn { min-height: 46px; padding: 0 18px; }
}
.mm-map { height: 146px; }
@media (min-width: 901px) { .wc-hero .wc-form, .tool-hero .mp-form { max-width: 640px; } }

/* tools: ad rules, AI mention, missed cases (Nov 2026) */
.tl-more-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .tl-more-3 { grid-template-columns: minmax(0, 1fr); } }
/* sample cards */
.ar-top, .mc-top { display: flex; align-items: center; gap: 12px; }
.ar-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #FFF1E2; color: #C2610C; } .ar-ic svg { width: 24px; height: 24px; }
.ar-top b { display: block; font-size: 18px; } .ar-top span { font-size: 13px; color: var(--muted-2); }
.ar-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.ar-list li { display: flex; align-items: center; gap: 12px; }
.ar-list s { display: block; height: 9px; border-radius: 9px; background: var(--paper-2); text-decoration: none; }
.ck { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; }
.ck.ok { background: #E3F4EA; color: #1E8E5A; } .ck.no { background: #FCE8E1; color: #C2410C; }
.ai-top { display: flex; align-items: center; gap: 8px; } .ai-top b { font-size: 15px; }
.ai-spark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #4285F4, #9B72CB 60%, #D96570); color: #fff; } .ai-spark svg { width: 17px; height: 17px; }
.ai-q { margin: 14px 0 12px; padding: 9px 14px; border: 1px solid var(--paper-line); border-radius: 999px; font-size: 14px; font-weight: 600; }
.ai-lines { display: grid; gap: 9px; padding: 14px; border-radius: 14px; background: #F4F1FB; }
.ai-lines s { display: block; height: 9px; border-radius: 9px; background: #DCD5EE; text-decoration: none; }
.ai-src { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.ai-src i { width: 62px; height: 26px; border-radius: 8px; background: var(--paper-2); }
.ai-src i.ai-you { width: auto; padding: 4px 10px; background: #FFF4E8; color: var(--orange-text); font-style: normal; font-weight: 700; height: auto; border: 1px dashed var(--orange); }
.mc-top { justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--paper-line); }
.mc-top span { font-size: 14px; font-weight: 700; color: var(--muted); } .mc-top b { font-size: 34px; color: var(--ink); }
.mc-rows { display: grid; gap: 14px; margin-top: 16px; }
.mc-rows div { display: grid; grid-template-columns: 74px 1fr 18px; gap: 12px; align-items: center; font-size: 13px; font-weight: 600; }
.mc-rows i { height: 10px; border-radius: 10px; background: var(--paper-2); overflow: hidden; } .mc-rows em { display: block; height: 100%; border-radius: 10px; background: #E9C9A3; }
.mc-rows b { color: var(--muted-2); }
/* forms */
.tool-hero .mp-form select { border: 0; outline: 0; background: none; font: 500 15px var(--font); color: var(--ink); padding: 2px 0; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
@media (min-width: 901px) { .tool-hero .mc-form { grid-template-columns: 1.2fr 1fr 1fr auto; } }
/* results */
.ar-res { margin-top: 4px; }
.ar-res .ar-found { display: block; margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--orange); background: #FFF8F0; border-radius: 0 8px 8px 0; font-size: 13.5px; color: var(--ink); }
.ar-res .ar-found em { display: block; font-style: normal; font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.ar-legal { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); font-size: 13.5px; color: var(--muted); }
.tl-gate { margin: 18px 0 0; }
.ai-tab td:not(:first-child), .ai-tab th:not(:first-child) { width: 150px; }
.ai-srcs { margin-top: 16px; display: grid; gap: 10px; }
.ai-srcs div { padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--paper-line); font-size: 14px; }
.ai-srcs b { display: block; margin-bottom: 6px; color: var(--ink); }
.ai-chip { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); font-size: 13px; color: var(--ink); }
.mc-big { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; padding: 24px 26px; border-radius: 18px; background: var(--navy); color: var(--white); }
.mc-big small { display: block; color: #B9C2D6; font-size: 14px; } .mc-big b { display: block; font-size: 46px; line-height: 1.1; color: var(--white); } .mc-big span { color: #DCE2EE; font-size: 15px; }
.mc-year { text-align: right; } .mc-year b { font-size: 28px; color: var(--orange); }
.mc-adj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.mc-adj label { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--white); border: 1px solid var(--paper-line); font-size: 14px; color: var(--muted); }
.mc-adj label b { color: var(--ink); } .mc-adj select { font: inherit; color: var(--ink); padding: 8px; border-radius: 8px; border: 1px solid var(--paper-line); background: var(--white); }
.mc-adj input[type=range] { accent-color: var(--orange); width: 100%; }
.mc-math { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: m; }
.mc-math li { counter-increment: m; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--white); border: 1px solid var(--paper-line); font-size: 14.5px; color: var(--muted); }
.mc-math li::before { content: counter(m); width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--ink); }
.mc-math b { color: var(--ink); font-size: 16px; }
.mc-break { margin-top: 16px; } .mc-break[hidden] { display: none; }
@media (max-width: 760px) { .mc-adj { grid-template-columns: minmax(0, 1fr); } .mc-big { grid-template-columns: minmax(0, 1fr); } .mc-year { text-align: left; } .mc-big b { font-size: 36px; } .ai-tab td:not(:first-child), .ai-tab th:not(:first-child) { width: auto; } }
/* every tool card is the same height, so every tool page's top section ends at the same spot */
@media (min-width: 901px) {
  .wc-hero .wc-mock { box-sizing: border-box; min-height: 407px; display: flex; flex-direction: column; }
  .wc-hero .wc-mock > .wc-mock-cap { margin-top: auto; padding-top: 12px; }
  .ar-list { gap: 15px; margin-top: 20px; }
  .ai-lines { gap: 12px; padding: 18px 16px; }
  .mc-rows { gap: 20px; margin-top: 22px; }
}
.ar-res .ar-found .ar-pg { display: block; margin-top: 3px; font-size: 12px; color: var(--muted-2); }
@media (min-width: 901px) { .ar-list { gap: 11px; margin-top: 16px; } }
.blog-hero { padding-top: 40px; }
.blog-hero .page-hero-text { gap: 0; }
.blog-hero .crumbs { margin: 0 0 26px; }
.blog-hero .page-hero-text > .eyebrow, .blog-hero .page-hero-text > h1 { margin-bottom: 16px; }
.blog-hero .page-hero-text > .lead { margin: 0 0 16px; }

/* Tools page: one row per tool */
.tlr { display: grid; gap: 12px; }
.tlr-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--paper-line); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.tlr-row:hover { border-color: var(--orange); transform: translateX(4px); color: var(--ink); }
.tlr-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; }
.tlr-ic svg { width: 26px; height: 26px; }
.tlr-t b { display: block; font-size: 18px; color: var(--ink); }
.tlr-t small { font-size: 14.5px; color: var(--muted); }
.tlr-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #E3F4EA; color: #1E8E5A; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.tlr-row em { font-style: normal; font-size: 13px; color: var(--muted-2); white-space: nowrap; }
.tlr-go { padding: 10px 16px; border-radius: 10px; background: var(--navy); color: var(--white); font-weight: 700; font-size: 14px; white-space: nowrap; }
.tlr-row:hover .tlr-go { background: var(--orange); color: var(--navy); }
@media (max-width: 700px) {
  .tlr-row { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .tlr-ic { width: 48px; height: 48px; border-radius: 14px; }
  .tlr-row em, .tlr-go { display: none; }
  .tlr-tag { display: none; }
}

/* rich dropdowns: icon box, name, one line; a line between items */
@media (min-width: 1081px) {
  .nav .sub.sub-rich { min-width: 330px; padding: 6px; }
  .nav .sub-rich li + li { border-top: 1px solid #EEE8DC; }
  .site-header .nav .sub-rich a { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 10px; }
  .sub-rich .sr-i { width: 38px; height: 38px; border-radius: 10px; background: #FFF1E2; color: #C2610C; display: grid; place-items: center; }
  .sub-rich b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
  .sub-rich small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.35; }
  .site-header .nav .sub-rich a:hover .sr-i, .site-header .nav .sub-rich a[aria-current="page"] .sr-i { background: var(--orange); color: var(--navy); }
}

@media (min-width: 1081px) {
  .sub-rich .sr-i.sr-logo { background: var(--navy); padding: 5px; box-sizing: border-box; }
  .sub-rich .sr-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .site-header .nav .sub-rich a:hover .sr-logo, .site-header .nav .sub-rich a[aria-current="page"] .sr-logo { background: var(--navy); box-shadow: 0 0 0 2px var(--orange); }
}
/* last dropdown item ("All services" / "All free tools"): navy footer bar */
@media (min-width: 1081px) {
  .nav .sub.sub-rich { padding-bottom: 0; overflow: hidden; }
  .nav .sub-rich li:last-child { border-top: 0; }
  .site-header .nav .sub-rich li:last-child a { grid-template-columns: 24px 1fr; margin: 6px -6px 0; padding: 14px 16px; border-radius: 0; background: var(--navy); }
  .sub-rich li:last-child .sr-i { width: 24px; height: 24px; background: none; color: var(--orange); }
  .sub-rich li:last-child b { color: var(--orange); }
  .sub-rich li:last-child small { color: #B9C2D6; }
  .site-header .nav .sub-rich li:last-child a:hover, .site-header .nav .sub-rich li:last-child a[aria-current="page"] { background: #1C2D52; }
  .site-header .nav .sub-rich li:last-child a:hover .sr-i, .site-header .nav .sub-rich li:last-child a[aria-current="page"] .sr-i { background: none; color: var(--orange); }
}
/* keep the hover bridge above the dropdown working (overflow must stay visible) */
@media (min-width: 1081px) {
  .nav .sub.sub-rich { overflow: visible; }
  .nav .sub::before { top: -24px; height: 24px; }
  .site-header .nav .sub-rich li:last-child a { border-radius: 0 0 11px 11px; }
}

/* dropdowns: refined look (Nov 2026) */
@media (min-width: 1081px) {
  .nav .sub.sub-rich { min-width: 340px; padding: 8px 8px 0; border-radius: 16px; border: 1px solid rgba(19, 33, 63, .08); box-shadow: 0 30px 60px -20px rgba(19, 33, 63, .35), 0 8px 18px -10px rgba(19, 33, 63, .18); margin-top: 14px; }
  .nav .has-sub:hover > .sub.sub-rich, .nav .has-sub:focus-within > .sub.sub-rich { animation: ddIn .18s ease-out; }
  .nav .sub.sub-rich::after { content: ''; position: absolute; top: -7px; left: 34px; width: 14px; height: 14px; background: #fff; border-left: 1px solid rgba(19, 33, 63, .08); border-top: 1px solid rgba(19, 33, 63, .08); transform: rotate(45deg); border-radius: 3px 0 0 0; }
  .nav .sub::before { top: -28px; height: 28px; }
  .nav .sub-rich li + li { border-top: 0; position: relative; }
  .nav .sub-rich li:not(:last-child) + li:not(:last-child)::after { content: ''; position: absolute; top: 0; left: 62px; right: 12px; height: 1px; background: #F1ECE3; }
  .site-header .nav .sub-rich a { grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 12px; padding: 11px 12px; border-radius: 12px; transition: background .15s; }
  .site-header .nav .sub-rich a::after { content: '→'; display: block !important; position: static !important; width: auto !important; height: auto !important; background: none !important; opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s; color: #C2610C; font-weight: 700; }
  .site-header .nav .sub-rich a:hover { background: var(--paper); }
  .site-header .nav .sub-rich a:hover::after, .site-header .nav .sub-rich a[aria-current="page"]::after { opacity: 1; transform: none; }
  .sub-rich .sr-i { border-radius: 11px; transition: background .15s, color .15s; }
  .sub-rich b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  .sub-rich small { font-size: 13px; margin-top: 1px; }
  /* "All …" bar: icon and text line up with the rows above (same 38px icon column, same left edge) */
  .site-header .nav .sub-rich li:last-child a { grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 12px; margin: 8px -8px 0; padding: 15px 20px; border-radius: 0 0 15px 15px; }
  .sub-rich li:last-child .sr-i { width: 38px; height: 24px; display: grid; place-items: center; }
  .site-header .nav .sub-rich li:last-child a::after { opacity: 1; transform: none; color: var(--orange); }
}
@keyframes ddIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav .has-sub:hover > .sub.sub-rich { animation: none; } }

/* Ara, the araRank owl (Nov 2026) */
#services .scards { position: relative; }
.ara-perch { position: absolute; right: 18px; top: -128px; z-index: 3; display: flex; align-items: flex-start; gap: 12px; }
.ara-perch img { pointer-events: none; width: 120px; height: auto; display: block; animation: araBob 4s ease-in-out infinite; transform-origin: 50% 100%; }
.ara-say { margin-top: 24px; max-width: 230px; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--navy); color: var(--white); font-weight: 600; font-size: 14px; line-height: 1.4; }
.ara-say { position: relative; z-index: 4; max-width: none; white-space: nowrap; }
#services .ara-say a, #services .ara-say a:visited { color: #FFB36B; text-decoration: none; white-space: nowrap; cursor: pointer; }
#services .ara-say a:hover { color: #FFC98F; text-decoration: underline; }
@keyframes araBob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@media (max-width: 1100px) { .ara-say { display: none; } }
@media (max-width: 900px) { .ara-perch { display: none; } }
.scan-w { display: flex; align-items: flex-end; justify-content: center; }
.scan-w .scan { margin: 0; flex: none; }
.ara-scan { width: 72px; flex: none; margin: 0 0 -4px -14px; position: relative; z-index: 1; }
.pp-wait .ara-scan, .mp-wait .ara-scan { width: 58px; margin-left: -12px; }
.wc-wait .scan-w { justify-content: flex-start; margin: 18px 0 0; }
.ara-eyes { animation: araLook 6s ease-in-out infinite; }
@keyframes araLook { 0%, 100% { transform: translate(-6px, -2px); } 18%, 25% { transform: translate(-6px, -1px); } 43%, 50% { transform: translate(-2px, 1px); } 46% { transform: translate(-2px, 1px) scaleY(.15); } 68%, 75% { transform: translate(-5px, 3px); } }
.ara-eyes { transform-box: view-box; transform-origin: 100px 80px; }
.ty-ara { display: block; width: 128px; height: auto; margin: 0 auto 10px; }
.nf-row { display: flex; align-items: center; gap: 22px; }
.nf-ara { width: 150px; height: auto; flex: none; }
@media (max-width: 520px) { .nf-row { flex-direction: column; align-items: flex-start; } .nf-ara { width: 110px; } }
@media (prefers-reduced-motion: reduce) { .ara-perch img, .ara-eyes { animation: none; } }