/* Digital Practice Solutions
   Brand: COBALT + SKY (DPS LOGO 2026). Cobalt #1336C9, Sky #8CC8FF, White.
   Cobalt carries the hero, header, selected feature sections, and the consultation close.
   Reading sections are white or very light. Text on light: deep ink #0F1E4A.
   Contrast (WCAG): white on cobalt 8.75, sky on cobalt 4.93 (AA), #DCEBFF on cobalt 7.24,
   cobalt on white 8.75, ink on white 16.1, muted #46516E on white 7.9.
   Shape: buttons and inputs 10px, cards and media 16px, no pill tags.
   Theme: light page with cobalt bands, by brand direction. */

@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --cobalt: #1336C9;
  --cobalt-deep: #0E2A9E;
  --cobalt-hover: #0F2DAD;
  --sky: #8CC8FF;
  --sky-soft: #EAF4FF;
  --on-cobalt: #FFFFFF;
  --on-cobalt-muted: #DCEBFF;
  --bg: #FFFFFF;
  --tint: #F4F7FD;
  --line: #DDE4F2;
  --ink: #0F1E4A;
  --text: #26324F;
  --muted: #46516E;
  --link: #1336C9;
  --danger: #B42318;
  --r-ctl: 10px;
  --r-card: 16px;
  --shadow: 0 1px 2px rgba(15, 30, 74, .06), 0 14px 32px -18px rgba(19, 54, 201, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --body: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --z-header: 50; --z-skip: 100;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
picture { display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, .h-sm, .h-xs { font-family: var(--display); color: var(--ink); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 .55em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
.h-sm { font-size: 1.25rem; }
.h-xs { font-size: .95rem; letter-spacing: .01em; }
p { margin: 0 0 1em; max-width: 66ch; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
.cobalt :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .utility :focus-visible, .lp-header :focus-visible { outline-color: #FFFFFF; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: var(--z-skip); background: #fff; color: var(--cobalt); padding: 10px 16px; border-radius: var(--r-ctl); font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.section { padding: clamp(64px, 9vw, 112px) 0; }
.tint { background: var(--tint); }
.sec-h { margin-bottom: clamp(28px, 4vw, 44px); max-width: 24ch; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.55; }
.lede-dark { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); line-height: 1.6; }
.small { font-size: .95rem; color: var(--muted); }
.small-light { font-size: .95rem; color: var(--on-cobalt-muted); margin-top: 28px; }
.small-light a { color: #fff; }
.kicker { font: 500 .95rem/1.4 var(--body); margin: 0 0 16px; color: var(--sky); }
.kicker-dark { font: 500 .9rem/1.4 var(--body); color: var(--muted); display: block; margin-bottom: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--link); }
.text-link:hover { text-decoration: underline; }

/* Cobalt sections */
.cobalt { background: var(--cobalt); color: var(--on-cobalt-muted); }
.cobalt h1, .cobalt h2, .cobalt h3 { color: #fff; }
.cobalt .lede { color: var(--on-cobalt-muted); }
.cobalt a:not(.btn) { color: #fff; }
.sky { color: var(--sky); }
.text-link-light { color: #fff; }

/* Icons */
.ico { width: 1.4em; height: 1.4em; flex: none; }
.ico-sm { width: 1.05em; height: 1.05em; }
.ico-xs { width: .8em; height: .8em; }
.ico-lg { width: 32px; height: 32px; color: var(--cobalt); }
.ico-check { color: var(--cobalt); width: 1.15em; height: 1.15em; margin-top: .22em; }

/* Buttons */
.btn { --bg: var(--cobalt); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-ctl); border: 1.5px solid transparent; background: var(--bg); color: var(--fg); font: 600 1rem/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, box-shadow .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { --bg: var(--cobalt); --fg: #fff; }
.btn-primary:hover { --bg: var(--cobalt-hover); box-shadow: 0 8px 20px -10px rgba(19, 54, 201, .7); }
.btn-ghost { --bg: transparent; --fg: var(--cobalt); border-color: #B8C6EC; }
.btn-ghost:hover { border-color: var(--cobalt); }
.btn-light { --bg: #fff; --fg: var(--cobalt); }
.btn-light:hover { --bg: var(--sky-soft); box-shadow: 0 8px 22px -10px rgba(5, 16, 70, .55); }
.btn-outline-light { --bg: transparent; --fg: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: .95rem; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Utility bar */
.utility { background: var(--cobalt-deep); color: var(--on-cobalt-muted); font-size: .875rem; }
.utility-in { display: flex; justify-content: flex-end; align-items: center; min-height: 38px; gap: 16px; }
.utility-links { display: flex; gap: 22px; align-items: center; }
.utility a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.utility a:hover { text-decoration: underline; }

/* Header (cobalt, logo as on the 2026 sheet) */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--cobalt); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.header-in { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { text-decoration: none; display: inline-flex; flex: none; }
.lockup { display: inline-flex; align-items: center; gap: 14px; }
.mono { height: 32px; width: auto; }
.mono .m-top { fill: var(--cobalt); } .mono .m-split { fill: var(--sky); } .mono .m-s { stroke: var(--cobalt); }
.lockup-div { width: 1.5px; height: 32px; background: var(--sky); opacity: .6; }
.lockup-text { display: flex; flex-direction: column; line-height: 1.15; }
.lockup-name { font: 600 .8rem/1.2 var(--display); letter-spacing: .17em; text-transform: uppercase; color: var(--ink); }
.lockup-desc { font: 400 .66rem/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.brand-light .mono .m-top { fill: #fff; } .brand-light .mono .m-s { stroke: #fff; }
.brand-light .lockup-name { color: #fff; } .brand-light .lockup-desc { color: var(--on-cobalt-muted); }

.nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; gap: 2px; align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: block; padding: 10px; color: #fff; text-decoration: none; font-weight: 500; font-size: .98rem; white-space: nowrap; }
.nav-link:hover { text-decoration: underline; }
.nav-link[data-active] { box-shadow: inset 0 -2px 0 var(--sky); }
.nav-toggle { border: 0; background: none; padding: 6px 4px; margin-left: -6px; color: var(--on-cobalt-muted); cursor: pointer; border-radius: 6px; display: flex; }
.nav-toggle .ico { transition: transform .2s var(--ease); }
.nav-toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.subnav { list-style: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; }
.has-sub:hover .subnav, .has-sub:focus-within .subnav, .has-sub.open .subnav { opacity: 1; visibility: visible; transform: none; }
.subnav a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.subnav a:hover, .subnav a[aria-current] { background: var(--sky-soft); color: var(--cobalt); }
.subnav a.indent { padding-left: 28px; color: var(--muted); }
.header-cta { flex: none; }
.header-cta .btn-primary { --bg: #fff; --fg: var(--cobalt); }
.header-cta .btn-primary:hover { --bg: var(--sky-soft); }
.menu-btn { display: none; margin-left: auto; border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; border-radius: var(--r-ctl); width: 46px; height: 46px; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.mobile-menu { border-top: 1px solid rgba(255, 255, 255, .14); background: #fff; max-height: calc(100dvh - 110px); overflow-y: auto; }
.mobile-menu .wrap { padding-top: 12px; padding-bottom: 24px; }
.mm-group { border-bottom: 1px solid var(--line); padding: 12px 0; }
.mm-top { font: 600 1.1rem var(--display); color: var(--ink); text-decoration: none; display: block; padding: 4px 0; }
.mm-group ul { list-style: none; display: grid; gap: 2px; margin-top: 6px; }
.mm-group li a { display: block; padding: 8px 0; color: var(--text); text-decoration: none; }
.mm-actions { display: grid; gap: 10px; margin-top: 20px; }
.mm-support { text-align: center; padding: 8px; font-weight: 600; }

@media (max-width: 1140px) { .nav, .header-cta { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 640px) {
  .utility-cov { display: none; }
  .utility-in { justify-content: flex-end; }
  .lockup-div { height: 26px; }
  .lockup-desc { font-size: .54rem; letter-spacing: .16em; margin-top: 3px; }
  .mono { height: 26px; }
  .lockup { gap: 10px; }
  .lockup-name { font-size: .64rem; letter-spacing: .12em; }
  .header-in { min-height: 64px; }
}

/* Reveal motion: content visible by default; JS only hides elements that start below the fold. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.pre { opacity: 0; transform: translateY(16px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--delay, 0s); }
}

/* Home hero */
.hero { position: relative; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(52px, 7vw, 92px); }
.hero h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); max-width: 13ch; }
.hero .lede { max-width: 40ch; }
.film { position: relative; }
.film-stage { position: relative; aspect-ratio: 16 / 9; background: var(--cobalt); }
.film-stage img, .film-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film video { opacity: 0; transition: opacity .8s var(--ease); }
.film.is-playing video { opacity: 1; }
/* Feather the edges so the animation dissolves into the cobalt hero instead of reading as a card. */
.film-blend .film-stage {
  --fade-x: linear-gradient(to right, transparent 0%, #000 30%, #000 78%, transparent 100%);
  --fade-y: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-image: var(--fade-x), var(--fade-y); -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y); mask-composite: intersect;
}
.film-toggle { position: absolute; right: 8%; bottom: 10%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); background: rgba(14, 42, 158, .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.film-toggle:hover { background: rgba(14, 42, 158, .85); border-color: #fff; }
.film-toggle .film-play { display: none; }
.film-toggle[aria-pressed="true"] .film-play { display: inline-flex; }
.film-toggle[aria-pressed="true"] .film-pause { display: none; }
.film-toggle span { display: inline-flex; }
@media (min-width: 901px) {
  .hero-media { margin-right: calc(-1 * var(--gutter)); }
  .hero-media .film { transform: scale(1.12); transform-origin: 40% 50%; }
}
@media (max-width: 900px) {
  .hero-media { margin: -8px calc(-1 * var(--gutter)) -24px; }
  .film-stage { aspect-ratio: 4 / 3; }
  .film-blend .film-stage { --fade-x: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%); }
  .film-stage img, .film-stage video { object-position: 42% 50%; }
}

/* Credibility strip */
.cred { border-bottom: 1px solid var(--line); }
.cred-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; padding-top: 26px; padding-bottom: 26px; }
.cred-lead { font: 600 1.2rem var(--display); color: var(--ink); margin: 0; }
.cred-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 36px; }
.cred-facts li { position: relative; padding-left: 18px; color: var(--text); font-weight: 500; }
.cred-facts li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--cobalt); box-shadow: 4px 4px 0 var(--sky); }
.cred-sys { width: 100%; margin: 0; color: var(--muted); font-size: .95rem; }

/* Photos */
.photo img { width: 100%; height: auto; border-radius: var(--r-card); }
.photo-tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Home: services list beside photography */
.svc-home-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.svc-home-media { position: sticky; top: 110px; }
.svc-lines { list-style: none; border-top: 1px solid var(--line); margin-top: 28px; }
.svc-lines a { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 18px; row-gap: 2px; padding: 20px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .2s; }
.svc-lines a:hover { background: var(--tint); }
.svc-lines-ic { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--r-ctl); background: var(--sky-soft); color: var(--cobalt); display: grid; place-items: center; }
.svc-lines-t { font: 600 1.2rem var(--display); color: var(--ink); }
.svc-lines-d { grid-column: 2; color: var(--muted); font-size: 1rem; }
.svc-lines-arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--cobalt); transition: transform .2s var(--ease); }
.svc-lines a:hover .svc-lines-arrow { transform: translateX(4px); }

/* Cobalt feature with photo */
.feature-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.feature-list { list-style: none; display: grid; gap: 14px; margin: 24px 0 28px; }
.feature-list li { position: relative; padding-left: 28px; color: #fff; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 3px; background: var(--sky); }
.feature-media .photo img { box-shadow: 0 30px 60px -30px rgba(3, 10, 50, .7); }

/* Protection */
.protect-head { max-width: 640px; }
.protect-head p { color: var(--muted); }
.protect-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 3px solid var(--cobalt); }
.protect-cols > div { padding: 28px 28px 8px 0; }
.protect-cols > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.protect-cols p { color: var(--muted); }
.protect-note { margin-top: 28px; font-size: .95rem; color: var(--muted); }

/* Process */
.track { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.track-step { border-top: 2px solid var(--line); padding-top: 20px; position: relative; }
.track-step::before { content: ''; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--cobalt); }
.track-n { display: block; font: 600 2.2rem/1 var(--display); color: var(--cobalt); margin-bottom: 14px; }
.track-step p { color: var(--muted); font-size: 1rem; margin: 0; }

/* Switching */
.switching-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); }
.switching-head p { color: var(--muted); }
.numgrid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.numgrid li { padding: 24px; border-radius: var(--r-card); background: var(--tint); }
.numgrid-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--cobalt); color: #fff; font: 600 1rem var(--display); margin-bottom: 14px; }
.numgrid p { color: var(--muted); margin: 0; }

/* Consultation (cobalt) */
.consult-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.consult-copy p { color: var(--on-cobalt-muted); }
.consult-phone { margin: 28px 0; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.consult-phone-l { display: block; color: var(--on-cobalt-muted); font-size: .95rem; margin-bottom: 4px; }
.cobalt .consult-phone-n { display: inline-flex; align-items: center; gap: 10px; font: 600 1.7rem var(--display); color: #fff; text-decoration: none; }
.consult-phone-n .ico { color: var(--sky); }
.consult-small { font-size: .95rem; }
.consult-form-wrap { background: #fff; color: var(--text); border-radius: var(--r-card); padding: clamp(22px, 3.5vw, 36px); box-shadow: 0 30px 60px -30px rgba(3, 10, 50, .6); }
.consult-form-wrap a, .lp-form a { color: var(--link) !important; }

/* Form */
.form-h { font-size: 1.4rem; color: var(--ink) !important; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 400 1rem/1.4 var(--body); color: var(--ink); background: #fff; border: 1.5px solid #AEBBD8; border-radius: var(--r-ctl); padding: 12px 14px; min-height: 48px; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field textarea:hover { border-color: #7F8DB0; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(19, 54, 201, .22); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field-err { color: var(--danger); font-size: .9rem; margin: 0; font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; }
.form-note { font-size: .9rem; color: var(--muted); margin: 0; flex: 1 1 240px; }
.form-status { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-ctl); font-weight: 500; }
.form-status:focus { outline: none; }
.form-status.is-error { background: #FDECEA; color: #7A1A12; border: 1px solid #F3B8B1; }
.form-status.is-success { background: #E7F5EE; color: #0E5A37; border: 1px solid #A9DCC2; }
.form-status.is-info { background: var(--sky-soft); color: var(--ink); border: 1px solid #BCD8FA; }
.form-status a { color: inherit !important; font-weight: 700; }
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.btn[aria-busy="true"] .btn-label::after { content: '...'; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } }

/* CTA band */
.cta-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 52px; padding-bottom: 52px; }
.cta-band-t { font: 600 clamp(1.4rem, 2.4vw, 1.9rem)/1.2 var(--display); margin: 0; max-width: 28ch; color: #fff; }
.cta-band .actions { margin: 0; }

/* Interior hero (cobalt) */
.phero { padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.phero-in { display: grid; gap: clamp(28px, 5vw, 64px); }
.phero-img .phero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.phero h1 { max-width: 20ch; }
.phero .lede { max-width: 56ch; }
.phero-media .photo img { box-shadow: 0 30px 60px -30px rgba(3, 10, 50, .7); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; color: var(--muted); margin-bottom: 22px; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.cobalt .crumbs ol { color: var(--on-cobalt-muted); }
.cobalt .crumbs a { color: var(--on-cobalt-muted); }

/* Service page */
.incl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 56px; }
.incl-h { font: 600 1rem var(--display); color: var(--cobalt); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--sky); }
.incl { list-style: none; display: grid; gap: 20px; margin-top: 14px; }
.incl strong { display: block; color: var(--ink); font-weight: 600; }
.incl span { color: var(--muted); font-size: 1rem; }
.diagram-sec { padding-top: 0; }
.diagram-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 72px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-card); background: var(--sky-soft); }
.diagram-fig { margin: 0; }
.scenes-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); }
.scenes { list-style: none; display: grid; }
.scene { padding: 22px 0; border-bottom: 1px solid var(--line); }
.scene:first-child { border-top: 1px solid var(--line); }
.scene-s { font: 600 1.15rem/1.35 var(--display); color: var(--ink); margin-bottom: 6px; }
.scene-h { margin: 0; color: var(--muted); }
.scope-in { border-left: 4px solid var(--cobalt); padding: 4px 0 4px 24px; }
.scope-in p { margin: 0; color: var(--muted); }
.loc-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.loc-row a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-ctl); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.loc-row a:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* Illustrations */
.illus { width: 100%; height: auto; }
.illus .zone { fill: #fff; stroke: #BCD8FA; stroke-dasharray: 5 6; }
.illus .zone-label, .illus .lbl { font: 600 14px var(--display); fill: var(--ink); }
.illus .sub { font: 400 12px var(--body); fill: var(--muted); }
.illus .card { fill: #fff; stroke: var(--line); }
.illus .card-offsite { stroke: var(--cobalt); }
.illus .pipe { fill: none; stroke: #C9D6F2; stroke-width: 3; }
.illus .pipe-flow { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 14; }
.illus .tag { fill: var(--cobalt); }
.illus .tag-t { font: 600 13px var(--body); fill: #fff; }
.illus .shield-col { fill: var(--cobalt); }
.illus .line { fill: var(--tint); }
.illus .mfa { fill: var(--sky-soft); }
.illus .ok-pill { fill: var(--cobalt); }
.illus .ok-t { font: 600 12px var(--body); fill: #fff; }
.si.ic-navy { color: var(--ink); } .si.ic-accent { color: var(--cobalt); } .si.ic-white { color: #fff; } .si.ic-muted { color: #8C97B3; }
.illus .badge .si.ic-accent { color: var(--sky); }
@media (prefers-reduced-motion: no-preference) { .illus .pipe-flow { animation: flow 2.4s linear infinite; animation-delay: var(--d, 0s); } }
@keyframes flow { to { stroke-dashoffset: -42; } }

/* FAQ */
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; cursor: pointer; font: 600 1.1rem/1.35 var(--display); color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { color: var(--cobalt); transition: transform .25s var(--ease); }
.faq-item[open] .faq-ico { transform: rotate(45deg); }
.faq-a p { color: var(--muted); padding-bottom: 8px; }

/* Related */
.related { padding-top: 0; }
.related-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.tint .related-in, .section.tint.related { padding-top: 0; }
.linklist ul { list-style: none; border-top: 1px solid var(--line); }
.linklist li { border-bottom: 1px solid var(--line); padding: 14px 0; }
.linklist a { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-weight: 600; text-decoration: none; color: var(--ink); }
.linklist a:hover { color: var(--cobalt); }
.linklist a .ico { color: var(--cobalt); transition: transform .2s var(--ease); }
.linklist a:hover .ico { transform: translateX(3px); }
.linklist span { display: block; font-size: .95rem; color: var(--muted); margin-top: 2px; }

/* Situations */
.steps-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); }
.vsteps { list-style: none; display: grid; }
.vstep { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.vstep-n { width: 42px; height: 42px; border-radius: 10px; background: var(--cobalt); color: #fff; display: grid; place-items: center; font: 600 1.05rem var(--display); }
.vstep p { margin: 0; color: var(--muted); }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.point { padding-top: 18px; border-top: 2px solid var(--cobalt); }
.point p { color: var(--muted); }

/* Locations */
.loc-body-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.prose-block + .prose-block { margin-top: 44px; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.loc-side { position: sticky; top: 110px; padding: 28px; border-radius: var(--r-card); background: var(--sky-soft); }
.loc-side .ticks { margin-bottom: 24px; }
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.loc-big { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.loc-big a { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 clamp(1.4rem, 2.4vw, 1.9rem) var(--display); color: var(--ink); }
.loc-big a:hover { color: var(--cobalt); }
.loc-big .ico { color: var(--cobalt); }
.loc-more { margin-top: 28px; }

/* Index pages */
.svc-index { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.svc-index a { display: grid; grid-template-columns: 52px 1fr auto; grid-template-rows: auto auto; gap: 4px 18px; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.svc-ic { grid-row: span 2; width: 52px; height: 52px; border-radius: var(--r-ctl); background: var(--sky-soft); color: var(--cobalt); display: grid; place-items: center; }
.svc-t { font: 600 1.25rem var(--display); color: var(--ink); }
.svc-d { color: var(--muted); grid-column: 2; }
.svc-arrow { grid-row: 1 / span 2; grid-column: 3; align-self: center; color: var(--cobalt); transition: transform .2s var(--ease); }
.svc-index a:hover .svc-t { color: var(--cobalt); }
.svc-index a:hover .svc-arrow { transform: translateX(4px); }
.split-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.split-note p { color: var(--muted); }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.role { border-top: 3px solid var(--cobalt); padding-top: 20px; }
.role p { color: var(--muted); }
.sit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sit { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s; }
.sit:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sit .ico-lg { margin-bottom: 18px; }
.sit p { color: var(--muted); }
.more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cobalt); font-size: .95rem; }
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.reason { border-top: 2px solid var(--line); padding-top: 18px; position: relative; }
.reason::before { content: ''; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--cobalt); }
.reason p { color: var(--muted); }
.expect { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 40px; margin-top: 24px; }
.expect li { display: flex; gap: 12px; align-items: flex-start; color: #fff; font-size: 1.1rem; }
.expect .ico { color: var(--sky); margin-top: .3em; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.value { border-top: 2px solid var(--cobalt); padding-top: 18px; }
.value p { color: var(--muted); margin: 0; }
.about-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.about-year-block { position: sticky; top: 110px; display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-card); background: var(--cobalt); }
.about-year { font: 600 clamp(4rem, 9vw, 6.5rem)/1 var(--display); color: #fff; letter-spacing: -0.03em; }
.about-year-l { color: var(--sky); font-weight: 600; font-size: 1rem; margin-top: 10px; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.res-card { display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s; min-height: 260px; }
.res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.res-card p { color: var(--muted); }

/* Contact and support */
.contact-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.contact-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(22px, 3.5vw, 36px); box-shadow: var(--shadow); }
.contact-side { display: grid; gap: 16px; }
.contact-big { font: 600 1.5rem var(--display); color: var(--ink); text-decoration: none; }
.side-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; background: #fff; }
.side-card-alt { background: var(--sky-soft); border-color: #CFE3FB; }
.support-hero { background: var(--sky-soft); }
.support-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 28px; max-width: 900px; }
.support-tile { display: flex; gap: 16px; align-items: center; padding: 22px; border-radius: var(--r-card); background: #fff; border: 1.5px solid #CFE3FB; text-decoration: none; color: var(--muted); transition: border-color .2s, transform .2s var(--ease); }
.support-tile:hover { border-color: var(--cobalt); transform: translateY(-1px); }
.support-tile strong { display: block; color: var(--ink); font: 600 1.1rem var(--display); }
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.urgent { border-color: #F3B8B1; background: #FFF7F6; }
.urgent .ico-lg { color: var(--danger); margin-bottom: 12px; }

/* Article */
.article-hero h1 { max-width: 24ch; }
.article-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 110px; }
.toc ol { list-style: none; display: grid; gap: 10px; border-left: 2px solid var(--sky); padding-left: 16px; }
.toc a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.toc a:hover { color: var(--cobalt); }
.article { max-width: 720px; }
.article h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-top: 1.8em; }
.article ul:not(.checklist) { padding-left: 1.2em; display: grid; gap: 10px; margin-bottom: 1.2em; }
.checklist { list-style: none; display: grid; gap: 12px; margin: 8px 0 24px; padding: 24px; background: var(--tint); border-radius: var(--r-card); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .ico { color: var(--cobalt); margin-top: .15em; }
.note { display: flex; gap: 12px; padding: 18px 20px; border-radius: var(--r-card); background: var(--sky-soft); color: var(--ink); }
.note .ico { color: var(--cobalt); margin-top: .15em; }
.article-meta { color: var(--muted); font-size: .9rem; margin-top: 40px; }

/* Landing */
.lp-header { background: var(--cobalt); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.lp-header-in { display: flex; justify-content: space-between; align-items: center; min-height: 76px; gap: 16px; }
.lp-hero { padding: clamp(40px, 6vw, 80px) 0; }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.lp-copy h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.lp-points { list-style: none; display: grid; gap: 16px; margin: 28px 0; }
.lp-points li { display: flex; gap: 12px; }
.lp-points .ico { color: var(--sky); margin-top: 2px; }
.lp-points strong { display: block; color: #fff; }
.lp-points span { color: var(--on-cobalt-muted); }
.lp-call { color: var(--on-cobalt-muted); }
.lp-call-n { font-weight: 700; }
.lp-form { background: #fff; color: var(--text); border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px); }
.lp-about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.lp-about-in p { color: var(--muted); }
.lp-footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: .9rem; color: var(--muted); }

/* Footer */
.site-footer { background: var(--cobalt-deep); color: var(--on-cobalt-muted); padding: 72px 0 32px; }
.f-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.f-brand .mono { height: 30px; }
.f-cov { margin-top: 22px; font-size: .95rem; }
.f-contact { font-size: .95rem; }
.f-contact a, .f-phone { color: #fff; text-decoration: none; }
.f-phone { font: 600 1.2rem var(--display); }
.f-h { font: 600 .85rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; }
.f-col ul { list-style: none; display: grid; gap: 10px; }
.f-col a { color: var(--on-cobalt-muted); text-decoration: none; font-size: .95rem; }
.f-col a:hover, .f-contact a:hover { color: #fff; text-decoration: underline; }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .85rem; }
.f-bottom p { margin: 0; }

/* ===== Type-led homepage (no photography or video) ===== */
.hero-type { position: relative; overflow: hidden; background:
  radial-gradient(120% 90% at 100% 0%, #1A44E0 0%, rgba(26, 68, 224, 0) 55%),
  radial-gradient(90% 80% at 0% 100%, #0F2DAD 0%, rgba(15, 45, 173, 0) 60%),
  var(--cobalt); }
.hero-mark { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); width: min(30vw, 420px); height: auto; fill: rgba(255, 255, 255, .045); pointer-events: none; }
.hero-mark .hm-split { fill: rgba(140, 200, 255, .09); }
.hero-type .hero-in { position: relative; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.hero-type h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); max-width: 14ch; letter-spacing: -0.035em; line-height: 1.02; }
.hero-type .lede { max-width: 44ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.hero-panel { border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 22px; }
.hero-panel-k { margin: 0; color: var(--on-cobalt-muted); font-size: .95rem; }
.hero-year { margin: 2px 0 22px; font: 600 clamp(4rem, 7vw, 6rem)/1 var(--display); letter-spacing: -0.04em; color: #fff; }
.hero-points { list-style: none; display: grid; gap: 14px; }
.hero-points li { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 500; }
.hero-points .ico { color: var(--sky); width: 1.3em; height: 1.3em; }

.sec-head { display: grid; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); max-width: 720px; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.sec-head-light p { color: var(--on-cobalt-muted); }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bento-cell { display: flex; flex-direction: column; padding: 30px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.bento-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #C6D3EE; }
.b-lead:hover { border-color: var(--cobalt); }
.bento-cell h3 { font-size: 1.3rem; margin: 0 0 8px; }
.bento-cell p { color: var(--muted); margin: 0 0 22px; }
.bento-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-soft); color: var(--cobalt); margin-bottom: 26px; }
.bento > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
.bento > :nth-child(2) { grid-column: span 5; }
.bento > :nth-child(3) { grid-column: span 5; }
.bento > :nth-child(4) { grid-column: span 4; }
.bento > :nth-child(5) { grid-column: span 4; }
.bento > :nth-child(6) { grid-column: span 4; }
.b-lead { background: var(--cobalt); border-color: var(--cobalt); justify-content: flex-end; min-height: 340px; position: relative; overflow: hidden; }
.b-lead::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 80% at 100% 0%, rgba(140, 200, 255, .28), rgba(140, 200, 255, 0) 60%); }
.b-lead > * { position: relative; }
.b-lead h3 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 14ch; }
.b-lead p { color: var(--on-cobalt-muted); max-width: 38ch; font-size: 1.05rem; }
.b-lead .bento-ic { background: rgba(140, 200, 255, .16); color: var(--sky); margin-bottom: auto; }
.b-lead .more { color: #fff; }
.b-soft { background: var(--sky-soft); border-color: #CFE3FB; }

.imaging-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.imaging-h { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; margin: 0; }
.imaging-body > p { color: var(--muted); font-size: 1.1rem; }
.imaging-list { list-style: none; counter-reset: im; display: grid; margin: 26px 0 30px; border-top: 1px solid var(--line); }
.imaging-list li { counter-increment: im; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.imaging-list li::before { content: counter(im, decimal-leading-zero); font: 600 .95rem/1.6 var(--display); color: var(--cobalt); }

.protect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.protect-grid > div { padding: 28px; border-radius: var(--r-card); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; }
.protect-grid h3 { margin: 18px 0 8px; }
.protect-grid p { color: var(--on-cobalt-muted); margin-bottom: 20px; }
.protect-grid a { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.protect-grid a:hover { text-decoration: underline; }
.pg-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(140, 200, 255, .16); color: var(--sky); }
.protect-band .protect-note { color: var(--on-cobalt-muted); margin-top: 28px; font-size: .95rem; }

@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > :nth-child(n) { grid-column: span 1; grid-row: auto; }
  .bento > :nth-child(1) { grid-column: 1 / -1; min-height: 300px; }
  .protect-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-type .hero-in, .imaging-in { grid-template-columns: 1fr; }
  .hero-mark { width: 70vw; right: -18%; top: auto; bottom: -6%; transform: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento > :nth-child(n) { grid-column: 1 / -1; }
  .hero-type h1 { font-size: 2.5rem; }
  .bento-cell { padding: 24px; }
}

/* Hero background video (optional) */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img, .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg .hero-tint { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(19, 54, 201, .9) 0%, rgba(19, 54, 201, .7) 45%, rgba(19, 54, 201, .3) 100%),
  linear-gradient(0deg, rgba(14, 42, 158, .35), rgba(14, 42, 158, 0) 40%); }
.has-video .hero-in { position: relative; z-index: 1; }
.has-video .hero-panel { background: rgba(14, 42, 158, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-card); padding: 26px 28px 28px; }
.hero-bg .film-toggle { right: 24px; bottom: 20px; z-index: 2; }
@media (max-width: 900px) {
  .hero-bg .hero-tint { background: linear-gradient(180deg, rgba(19, 54, 201, .9) 0%, rgba(19, 54, 201, .8) 60%, rgba(19, 54, 201, .7) 100%); }
  .hero-bg .film-toggle { right: 16px; bottom: 16px; }
}

/* ===== Homepage copy layout (Astra draft) ===== */
.eyebrow { font: 600 .8rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 14px; }
.eyebrow-light { color: var(--sky); }
.hero-type .hero-in { align-items: center; padding-bottom: clamp(40px, 5vw, 64px); }
.hero-type h1 { max-width: 17ch; }
.hero-type h1 .sky { display: block; }
.hero-panel-h { margin: 0 0 14px; font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--display); letter-spacing: -0.02em; color: #fff; max-width: 14ch; }
.hero-panel-k { margin: 0; color: var(--on-cobalt-muted); font-size: 1rem; }
.hero-row-wrap { position: relative; z-index: 1; padding-bottom: clamp(32px, 4vw, 48px); }
.hero-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid rgba(255, 255, 255, .24); padding-top: 24px; }
.hero-row li { display: flex; gap: 14px; align-items: center; }
.hero-row .ico { color: var(--sky); width: 30px; height: 30px; }
.hero-row strong { display: block; color: #fff; font: 600 1.1rem/1.3 var(--display); }
.hero-row span { color: var(--on-cobalt-muted); font-size: .95rem; }
.cred-facts li { color: var(--muted); }

.bento-n { font: 600 .95rem var(--display); color: var(--cobalt); margin-bottom: 18px; }
.b-lead .bento-n { color: var(--sky); margin-bottom: auto; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.tags li { font-size: .82rem; font-weight: 500; color: var(--cobalt); background: var(--sky-soft); border-radius: 6px; padding: 4px 9px; }
.b-lead .tags li { color: #fff; background: rgba(255, 255, 255, .14); }
.b-callout { justify-content: flex-start; }
.b-callout .more { margin-top: auto; text-decoration: none; }
.b-callout:hover { transform: none; box-shadow: none; }

.why-sub { color: var(--muted); font-size: 1.1rem; margin-top: 18px; }
.why-year { margin-top: 28px; display: flex; flex-direction: column; color: var(--muted); font-size: .95rem; }
.why-year span { font: 600 clamp(3.4rem, 6vw, 5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--cobalt); }
.why-list { list-style: none; counter-reset: wy; display: grid; border-top: 1px solid var(--line); }
.why-list li { counter-increment: wy; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.why-list li::before { content: counter(wy, decimal-leading-zero); grid-row: span 2; font: 600 1rem/1.5 var(--display); color: var(--cobalt); }
.why-list h3 { margin: 0 0 6px; font-size: 1.2rem; }
.why-list p { margin: 0; color: var(--muted); }

.pg-k { margin: 18px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.protect-grid .pg-k + h3 { margin-top: 6px; }

.where-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 88px); align-items: start; border-top: 3px solid var(--cobalt); padding-top: clamp(28px, 4vw, 44px); }
.where-in h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; }
.where-body p { color: var(--muted); font-size: 1.1rem; }
.where-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.where-links a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem; }
.where-links a:hover { border-color: var(--cobalt); color: var(--cobalt); }

.notebook-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.notebook-card { padding: 30px; border-radius: var(--r-card); background: #fff; border-top: 3px solid var(--cobalt); box-shadow: var(--shadow); }
.notebook-card h3 { font-size: 1.45rem; margin: 0 0 10px; }
.notebook-card p:not(.eyebrow) { color: var(--muted); }
.notebook .faq-list { background: transparent; }

.consult-email { display: block; margin-top: 8px; color: var(--on-cobalt-muted) !important; text-decoration: none; }
.consult-email:hover { color: #fff !important; text-decoration: underline; }

@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; gap: 16px; }
  .where-in, .notebook-in { grid-template-columns: 1fr; }
}

/* ===== Homepage revision (credibility strip, plan, dental tech) ===== */
.hero-solo { grid-template-columns: 1fr; padding-bottom: clamp(64px, 8vw, 112px); }
.hero-solo .hero-copy { max-width: 760px; }
.hero-solo .lede { max-width: 60ch; }
.cred-strip { background: #fff; }
.cred-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.cred-row li { display: flex; align-items: center; gap: 12px; padding: 24px 24px 24px 0; font: 600 1.05rem/1.3 var(--display); color: var(--ink); }
.cred-row li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.cred-row .ico { width: 26px; height: 26px; color: var(--cobalt); flex: none; }
.bento-5 > :nth-child(1) { grid-column: span 7; grid-row: auto; min-height: 340px; }
.bento-5 > :nth-child(2) { grid-column: span 5; }
.bento-5 > :nth-child(3), .bento-5 > :nth-child(4), .bento-5 > :nth-child(5) { grid-column: span 4; }
.plan-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.plan-copy h2 { margin: 0 0 18px; }
.plan-copy p:not(.eyebrow) { color: var(--on-cobalt-muted); font-size: 1.1rem; max-width: 58ch; margin: 0 0 30px; }
.plan-list { list-style: none; display: grid; gap: 14px; }
.plan-list li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-card); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: var(--on-cobalt-muted); }
.plan-list strong { display: block; color: #fff; font: 600 1.15rem/1.3 var(--display); margin-bottom: 4px; }
.plan-list .ico { width: 26px; height: 26px; color: var(--sky); flex: none; margin-top: 2px; }
.tech-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tech-card { padding: 30px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.tech-card h3 { font-size: 1.25rem; margin: 0 0 8px; }
.tech-card p { color: var(--muted); margin: 0; }
.tech-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; color: var(--muted); }
.tech-brands p { margin: 0; font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tech-brands ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; color: var(--ink); }
.where-cta { display: inline-flex; margin-top: 24px; }
.faq-narrow { max-width: 880px; }
.loc-also-h { font-size: 1.3rem; margin: 40px 0 12px; }
.loc-also { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.loc-also li { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); font-weight: 500; }
@media (max-width: 960px) {
  .bento-5 > :nth-child(n) { grid-column: span 1; grid-row: auto; }
  .bento-5 > :nth-child(1) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .cred-row, .tech-grid, .plan-in { grid-template-columns: 1fr; }
  .cred-row li { padding: 14px 0; }
  .cred-row li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .bento-5 > :nth-child(n) { grid-column: 1 / -1; }
}

/* ===== Dental IT Support page ===== */
.it-hero { position: relative; overflow: hidden; }
.it-hero .phero-in { position: relative; z-index: 1; }
.it-hero h1 { max-width: 18ch; }
.it-hero .lede { max-width: 62ch; }
.it-since { display: flex; align-items: center; gap: 8px; margin: 26px 0 0; color: var(--on-cobalt-muted); font-size: .95rem; }
.it-since .ico { color: var(--sky); }
.scope-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pro-in, .exp-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.exp-in { align-items: start; }
.pro-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 30px; }
.pro-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.pro-list strong { display: block; color: var(--ink); font: 600 1.05rem/1.3 var(--display); margin-bottom: 2px; }
.pro-list .ico { width: 22px; height: 22px; color: var(--cobalt); flex: none; margin-top: 2px; }
.cycle-fig { margin: 0; justify-self: center; width: 100%; max-width: 360px; }
.cycle { width: 100%; height: auto; display: block; overflow: visible; }
.cyc-ring { fill: none; stroke: #C6D3EE; stroke-width: 2; stroke-dasharray: 6 8; }
.cyc-dot { fill: var(--sky); stroke: var(--cobalt); stroke-width: 2; }
.cyc-node circle { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.cyc-node text { font: 600 13px var(--display); fill: var(--cobalt); text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .cyc-dot { display: none; } }
.it-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.it-steps li { padding: 28px 24px; border-top: 3px solid var(--cobalt); background: var(--tint, #F3F6FD); border-radius: 0 0 var(--r-card) var(--r-card); }
.it-step-n { display: block; font: 600 1rem var(--display); color: var(--cobalt); margin-bottom: 14px; }
.it-steps h3 { font-size: 1.15rem; margin: 0 0 8px; }
.it-steps p { margin: 0; color: var(--muted); }
.it-hours { margin-top: 24px; color: var(--muted); }
.plan-note { font-size: .98rem !important; }
.plan-checks { list-style: none; display: grid; gap: 10px; }
.plan-checks li { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: var(--r-card); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font: 600 1.05rem/1.3 var(--display); }
.plan-checks a { color: #fff; text-decoration: underline; text-decoration-color: rgba(140, 200, 255, .6); text-underline-offset: 4px; }
.plan-checks a:hover { text-decoration-color: #fff; }
.plan-checks .ico { width: 24px; height: 24px; color: var(--sky); flex: none; }
.exp-in .text-link { display: inline-flex; margin-top: 22px; }
.exp-groups { display: grid; gap: 16px; }
@media (max-width: 960px) {
  .scope-6 { grid-template-columns: 1fr 1fr; }
  .it-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .pro-in, .exp-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scope-6, .it-steps, .pro-list { grid-template-columns: 1fr; }
}

.opt-tag { margin-left: auto; font: 600 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); background: var(--sky); border-radius: 6px; padding: 5px 8px; }

/* ===== Dental Cybersecurity page ===== */
.cy-hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.cy-hero h1 { max-width: 16ch; }
.cy-hero .lede { max-width: 58ch; }
.cy-visual { position: relative; justify-self: center; width: min(100%, 380px); aspect-ratio: 320 / 270; }
.cy-glow { position: absolute; inset: 8% 4% 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 200, 255, .38), rgba(140, 200, 255, 0)); }
.cy-monitor { position: relative; width: 100%; height: auto; display: block; }
.cym-frame { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.cym-screen { fill: rgba(8, 30, 140, .55); }
.cym-line { fill: rgba(140, 200, 255, .75); }
.cym-line-soft { fill: rgba(255, 255, 255, .22); }
.cym-stand { fill: rgba(255, 255, 255, .22); }
.cy-shield { position: absolute; right: 2%; bottom: 14%; width: 38%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 18px 40px -16px rgba(3, 10, 60, .7); }
.cy-shield .ico { width: 58%; height: 58%; color: var(--cobalt); }
@media (prefers-reduced-motion: no-preference) {
  .cy-glow { animation: cyGlow 7s ease-in-out infinite; }
  @keyframes cyGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
}
.cy-why { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cy-why-copy h2 { max-width: 20ch; margin-bottom: 22px; }
.cy-why-copy p { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.cy-why-copy .cy-why-close { color: var(--ink); font-weight: 600; }
.cy-risks { list-style: none; display: grid; gap: 0; border-left: 3px solid var(--cobalt); padding-left: 24px; margin-top: 8px; }
.cy-risks li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; color: var(--muted); }
.cy-risks li + li { border-top: 1px solid var(--line); }
.cy-risks strong { display: block; color: var(--ink); font: 600 1.1rem/1.3 var(--display); margin-bottom: 2px; }
.cy-risks .ico { width: 26px; height: 26px; color: var(--cobalt); flex: none; margin-top: 2px; }
.cy-ai { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.cy-compare { display: grid; gap: 14px; }
.cy-cmp { padding: 26px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.cy-cmp .bento-ic { margin-bottom: 16px; }
.cy-cmp-k { margin: 0 0 4px; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cy-cmp-q { margin: 0; font: 500 1.2rem/1.35 var(--display); color: var(--ink); }
.cy-cmp-on { background: var(--cobalt); border-color: var(--cobalt); }
.cy-cmp-on .bento-ic { background: rgba(140, 200, 255, .16); color: var(--sky); }
.cy-cmp-on .cy-cmp-k { color: var(--sky); }
.cy-cmp-on .cy-cmp-q { color: #fff; }
.cy-resp-h { max-width: 24ch; margin-bottom: clamp(28px, 4vw, 44px); }
.cy-resp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cy-steps { list-style: none; counter-reset: cs; display: grid; gap: 0; }
.cy-steps li { counter-increment: cs; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.cy-steps li::before { content: counter(cs, decimal-leading-zero); grid-row: span 2; font: 600 1rem/1.5 var(--display); color: var(--cobalt); }
.cy-steps h3 { margin: 0 0 4px; font-size: 1.2rem; }
.cy-steps p { margin: 0; color: var(--muted); }
.contain { margin: 0; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-card); background: var(--tint); border: 1px solid var(--line); position: sticky; top: 100px; }
.contain-svg { width: 100%; height: auto; display: block; }
.contain .net { stroke: #9FB3E6; stroke-width: 3; stroke-linecap: round; }
.ws-screen { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.ws-glass { fill: #DCEBFF; }
.ws-stand, .ws-base { fill: #9FB3E6; }
.ws-link { stroke: #9FB3E6; stroke-width: 3; }
.ws-ring { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-dasharray: 7 6; opacity: 0; }
.contain figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.contain-toggle { display: inline-flex; align-items: center; border: 1px solid var(--line); background: #fff; color: var(--cobalt); border-radius: var(--r-ctl); padding: 7px 12px; font: 600 .88rem var(--body); cursor: pointer; }
.contain-toggle:hover { border-color: var(--cobalt); }
.contain-toggle span { display: inline-flex; align-items: center; gap: 6px; }
.contain-toggle .ct-play, .contain-toggle[aria-pressed="true"] .ct-pause { display: none; }
.contain-toggle[aria-pressed="true"] .ct-play { display: inline-flex; }
.contain-note { margin: 12px 0 0; color: var(--muted); font-size: .95rem; }
/* Contained end state: used as the static (reduced-motion) version */
.ws-hit .ws-glass { fill: #FFE2A8; }
.ws-hit .ws-screen { stroke: #B7791F; }
.ws-hit .ws-ring { opacity: 1; }
.ws-hit .ws-link { stroke-dasharray: 4 7; opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .contain .ws-hit .ws-glass { animation: ctAmber 12s ease-in-out infinite; }
  .contain .ws-hit .ws-screen { animation: ctStroke 12s ease-in-out infinite; }
  .contain .ws-hit .ws-ring { animation: ctRing 12s ease-in-out infinite; }
  .contain .ws-hit .ws-link { animation: ctLink 12s ease-in-out infinite; }
  .contain.is-paused * { animation-play-state: paused !important; }
  @keyframes ctAmber { 0%, 14% { fill: #DCEBFF; } 24%, 86% { fill: #FFE2A8; } 96%, 100% { fill: #DCEBFF; } }
  @keyframes ctStroke { 0%, 14% { stroke: #1336C9; } 24%, 86% { stroke: #B7791F; } 96%, 100% { stroke: #1336C9; } }
  @keyframes ctRing { 0%, 30% { opacity: 0; } 40%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
  @keyframes ctLink { 0%, 44% { opacity: 1; stroke-dasharray: 60 0; } 54%, 86% { opacity: .35; stroke-dasharray: 4 7; } 96%, 100% { opacity: 1; stroke-dasharray: 60 0; } }
}
@media (prefers-reduced-motion: reduce) { .contain-toggle { display: none; } }
.cy-diff { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cy-diff-mark { display: flex; flex-direction: column; color: var(--muted); font-size: .95rem; padding-top: 6px; }
.cy-diff-mark span { font: 600 clamp(3.4rem, 6vw, 5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--cobalt); }
.cy-diff h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); letter-spacing: -0.03em; max-width: 20ch; }
.cy-layers-h { margin-bottom: clamp(24px, 3vw, 36px); }
.cy-layers { list-style: none; border-top: 1px solid var(--line); }
.cy-layers li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cy-l-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-soft); color: var(--cobalt); }
.cy-l-ic .ico { width: 24px; height: 24px; }
.cy-l-t h3 { margin: 0 0 4px; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-l-t p { margin: 0; color: var(--muted); }
.cy-layers .is-opt .cy-l-ic { background: #fff; border: 1px dashed #9FB3E6; }
.cy-layers .opt-tag { margin-left: 0; background: var(--sky-soft); }
.cy-eval { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.cy-q { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.cy-q li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-weight: 500; }
.cy-q .ico { width: 22px; height: 22px; color: var(--cobalt); flex: none; margin-top: 1px; }
.cy-eval-cta { padding: 30px; border-radius: var(--r-card); background: #fff; border-top: 3px solid var(--cobalt); box-shadow: var(--shadow); }
.cy-eval-cta p { font: 500 1.2rem/1.4 var(--display); color: var(--ink); margin: 0 0 22px; }
.cy-faq-h { margin-bottom: 24px; }
@media (max-width: 900px) {
  .cy-hero-in, .cy-why, .cy-ai, .cy-resp, .cy-diff, .cy-eval { grid-template-columns: 1fr; }
  .cy-visual { width: min(70%, 300px); justify-self: start; }
  .contain { position: static; }
}
@media (max-width: 640px) {
  .cy-layers li { grid-template-columns: 46px 1fr; }
  .cy-layers li > :last-child { grid-column: 2; }
  .cy-visual { display: none; }
  .cy-box { width: 100%; aspect-ratio: 16 / 10; }
}

.cy-box { position: relative; justify-self: end; width: min(100%, 440px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #0b2a8f; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 30px 60px -30px rgba(3, 10, 50, .75); }
.cy-box img, .cy-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cy-box .film-toggle { right: 14px; bottom: 14px; }
@media (max-width: 900px) { .cy-box { justify-self: start; width: min(100%, 420px); } }

/* ===== Email Security & Encryption page ===== */
.em-visual { position: relative; justify-self: center; width: min(100%, 380px); }
.em-visual svg { position: relative; width: 100%; height: auto; display: block; }
.emv-l3 { fill: rgba(140, 200, 255, .06); stroke: rgba(140, 200, 255, .28); stroke-width: 1.5; }
.emv-l2 { fill: rgba(140, 200, 255, .1); stroke: rgba(140, 200, 255, .5); stroke-width: 1.5; }
.emv-env { fill: #fff; }
.emv-flap { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.emv-fold { fill: none; stroke: #BFD3F5; stroke-width: 2.5; stroke-linecap: round; }
.em-intro { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.em-intro h2 { margin-bottom: 14px; }
.em-three { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--cobalt); }
.em-three li { padding: 28px 28px 8px 0; }
.em-three li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.em-three h3 { margin: 18px 0 8px; font-size: 1.25rem; }
.em-three p { margin: 0; color: var(--muted); }
.em-three .is-opt .cy-l-ic { background: #fff; border: 1px dashed #9FB3E6; }
.em-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.em-checks { list-style: none; display: grid; gap: 10px; margin: 22px 0 0; }
.em-checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-weight: 500; }
.em-checks .ico { width: 22px; height: 22px; color: var(--cobalt); flex: none; margin-top: 1px; }
.em-work { display: grid; justify-items: center; gap: 22px; padding: 36px 24px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.em-domain { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--sky-soft); color: var(--cobalt); font: 600 1rem var(--display); }
.em-domain .ico { width: 20px; height: 20px; }
.em-hub { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: var(--cobalt); color: #fff; box-shadow: 0 18px 36px -18px rgba(19, 54, 201, .7); }
.em-hub .ico { width: 36px; height: 36px; }
.em-devices { display: flex; gap: 14px; position: relative; padding-top: 20px; }
.em-devices::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 20px; border: 2px solid #C6D3EE; border-bottom: 0; border-radius: 10px 10px 0 0; }
.em-devices span { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--tint); color: var(--cobalt); border: 1px solid var(--line); }
.em-devices .ico { width: 26px; height: 26px; }
.em-note { color: var(--ink) !important; font-weight: 600; }
.em-note a { color: var(--cobalt); }
.em-flow { position: static; }
.flow-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); }
.flow-k { margin: 0 0 10px; font: 600 1.1rem var(--display); color: var(--ink); }
.flow-svg { width: 100%; height: auto; display: block; overflow: visible; }
.flow-line { fill: none; stroke: #C6D3EE; stroke-width: 2; stroke-dasharray: 5 6; }
.flow-line-q { stroke: #E7C27A; }
.flow-gate { fill: var(--cobalt); }
.flow-inbox { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.flow-quar { fill: #FFF6E5; stroke: #B7791F; stroke-width: 2; stroke-dasharray: 5 4; }
.flow-t { font: 600 12px var(--body); fill: var(--ink); text-anchor: middle; }
.flow-t-q { fill: #8A5A12; }
.flow-node { fill: var(--sky); stroke: var(--cobalt); stroke-width: 2; }
.flow-rcpt { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.flow-rcpt-i { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-linecap: round; }
.env-body { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.env-flap { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linejoin: round; }
.env-layer { fill: none; stroke: var(--sky); stroke-width: 3; }
/* Static positions (also the reduced-motion version) */
.env-ok { transform: translate(489px, 55px); }
.env-bad { transform: translate(487px, 121px); }
.env-bad .env-body { stroke: #B7791F; fill: #FFF6E5; }
.env-bad .env-flap { stroke: #B7791F; }
.env-out { transform: translate(380px, 45px); }
.flow-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; counter-reset: fs; }
.flow-steps li { counter-increment: fs; font-size: .92rem; color: var(--muted); padding-top: 8px; border-top: 2px solid var(--line); }
.flow-steps li::before { content: counter(fs) ". "; color: var(--cobalt); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .em-flow .env-ok { animation: envOk 12s ease-in-out infinite; }
  .em-flow .env-bad { animation: envBad 12s ease-in-out infinite; }
  .em-flow .env-bad .env-body { animation: envBadBody 12s ease-in-out infinite; }
  .em-flow .env-bad .env-flap { animation: envBadFlap 12s ease-in-out infinite; }
  .em-flow .env-out { animation: envOut 10s ease-in-out infinite; }
  .em-flow .env-layer { animation: envLayer 10s ease-in-out infinite; }
  .em-flow.is-paused * { animation-play-state: paused !important; }
  @keyframes envOk { 0% { transform: translate(10px, 55px); opacity: 0; } 5% { opacity: 1; } 25% { transform: translate(241px, 55px); } 45% { transform: translate(489px, 55px); opacity: 1; } 52%, 100% { transform: translate(489px, 55px); opacity: 0; } }
  @keyframes envBad { 0%, 44% { transform: translate(10px, 55px); opacity: 0; } 49% { opacity: 1; } 69% { transform: translate(241px, 55px); } 88% { transform: translate(487px, 121px); opacity: 1; } 95%, 100% { transform: translate(487px, 121px); opacity: 0; } }
  @keyframes envBadBody { 0%, 68% { fill: #fff; stroke: #1336C9; } 74%, 100% { fill: #FFF6E5; stroke: #B7791F; } }
  @keyframes envBadFlap { 0%, 68% { stroke: #1336C9; } 74%, 100% { stroke: #B7791F; } }
  @keyframes envOut { 0% { transform: translate(10px, 45px); opacity: 0; } 6% { opacity: 1; } 40% { transform: translate(241px, 45px); } 82% { transform: translate(430px, 45px); opacity: 1; } 90%, 100% { transform: translate(430px, 45px); opacity: 0; } }
  @keyframes envLayer { 0%, 40% { opacity: 0; } 52%, 100% { opacity: 1; } }
}
.em-enc { background: var(--sky-soft); }
.em-enc .btn { margin-top: 10px; }
.em-enc-side { padding: 30px; border-radius: var(--r-card); background: #fff; border: 1px solid #C6D3EE; }
.em-enc-k { margin: 0; font: 600 1.05rem var(--display); color: var(--ink); }
.em-distinct { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
.em-hipaa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.em-hipaa h2 { max-width: 18ch; }
.em-why { grid-template-columns: 1fr; margin-top: 24px; }
@media (max-width: 960px) { .flow-lanes { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .em-split, .em-hipaa { grid-template-columns: 1fr; }
  .em-three { grid-template-columns: 1fr; }
  .em-three li, .em-three li + li { padding: 24px 0; border-left: 0; }
  .em-three li + li { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) { .em-visual { display: none; } }

/* ===== Backup & Disaster Recovery page ===== */
.bk-visual { position: relative; justify-self: center; width: min(100%, 400px); display: grid; gap: 22px; justify-items: center; padding: 8px 0; }
.bk-node { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font: 600 1rem var(--display); position: relative; }
.bk-node .ico { width: 26px; height: 26px; color: var(--sky); }
.bk-server { background: #fff; color: var(--ink); border-color: #fff; }
.bk-server .ico { color: var(--cobalt); }
.bk-copies { display: flex; gap: 14px; position: relative; }
.bk-env { border-style: dashed; border-color: rgba(140, 200, 255, .7); background: rgba(140, 200, 255, .08); }
.bk-visual::before { content: ''; position: absolute; top: 56px; bottom: 56px; left: 50%; border-left: 2px dashed rgba(140, 200, 255, .5); z-index: 0; }
.bk-visual > * { z-index: 1; }
.bk-intro { max-width: 820px; }
.bk-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.bk-col { padding: 30px; }
.bk-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.25rem; }
.bk-col h3 .ico { width: 24px; height: 24px; color: var(--cobalt); }
.bk-col ul { list-style: none; display: grid; gap: 12px; }
.bk-col li { padding-left: 18px; position: relative; color: var(--text); }
.bk-col li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--cobalt); }
.bk-col-dr { background: var(--cobalt); }
.bk-col-dr h3, .bk-col-dr li { color: #fff; }
.bk-col-dr h3 .ico { color: var(--sky); }
.bk-col-dr li::before { background: var(--sky); }
.bk-stack { position: relative; justify-self: center; width: 260px; height: 260px; }
.bk-file { position: absolute; width: 170px; height: 200px; border-radius: 14px; background: #fff; border: 1px solid #C6D3EE; }
.bk-file.f4 { left: 72px; top: 0; opacity: .45; }
.bk-file.f3 { left: 50px; top: 16px; opacity: .65; }
.bk-file.f2 { left: 28px; top: 32px; opacity: .85; }
.bk-file.f1 { left: 6px; top: 48px; display: grid; place-items: center; background: var(--cobalt); border-color: var(--cobalt); box-shadow: 0 24px 40px -22px rgba(19, 54, 201, .7); }
.bk-file.f1 .ico { width: 64px; height: 64px; color: var(--sky); }
.bk-callouts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid #C6D3EE; }
.bk-callouts li { display: flex; gap: 14px; padding: 24px 24px 0 0; }
.bk-callouts li + li { padding-left: 24px; border-left: 1px solid #C6D3EE; }
.bk-callouts .ico { width: 26px; height: 26px; color: var(--cobalt); flex: none; margin-top: 2px; }
.bk-callouts h3 { margin: 0 0 6px; font-size: 1.12rem; }
.bk-callouts p { margin: 0; color: var(--muted); }
.bk-approach { list-style: none; counter-reset: ba; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.bk-approach li { counter-increment: ba; padding-top: 18px; border-top: 2px solid var(--line); }
.bk-approach li::before { content: counter(ba, decimal-leading-zero); display: block; font: 600 .95rem var(--display); color: var(--cobalt); margin-bottom: 10px; }
.bk-approach li:nth-child(-n+3) { border-top-color: var(--cobalt); }
.bk-approach h3 { margin: 0 0 6px; font-size: 1.15rem; }
.bk-approach p { margin: 0; color: var(--muted); }
.bk-links { margin-top: 32px; color: var(--muted); max-width: 70ch; }
.bk-links a { color: var(--cobalt); font-weight: 600; }
.bk-lc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bk-lc > div { padding: 30px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.bk-lc h3 { margin: 18px 0 8px; font-size: 1.25rem; }
.bk-lc p { margin: 0; color: var(--muted); }
.bk-lc-close { margin-top: 24px; font: 500 1.15rem/1.45 var(--display); color: var(--ink); max-width: 60ch; }
.bk-test { align-items: start; }
.bk-qs { display: grid; gap: 16px; margin: 24px 0; }
.bk-qs > div { padding: 18px 20px; border-left: 3px solid var(--cobalt); background: #fff; border-radius: 0 12px 12px 0; }
.bk-qs dt { font: 600 1.08rem var(--display); color: var(--ink); margin-bottom: 4px; }
.bk-qs dd { margin: 0; color: var(--muted); }
.bk-prio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.rv-t { font-size: 13px; }
.rv-fig { background: #fff; }
.rv-svg { width: 100%; height: auto; display: block; }
.rv-ws { fill: #DCEBFF; stroke: var(--cobalt); stroke-width: 2; }
.rv-ws-stand { fill: #9FB3E6; }
.rv-link { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-dasharray: 6 6; }
.rv-primary rect, .rv-env rect, .rv-copy rect:not(.rv-copy-glow) { stroke-width: 2; }
.rv-primary line, .rv-env line, .rv-copy line { stroke-width: 2.5; stroke-linecap: round; }
.rv-t { font: 600 12px var(--body); fill: var(--ink); text-anchor: middle; }
.rv-check circle { fill: var(--cobalt); }
.rv-check path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rv-copy rect:not(.rv-copy-glow) { fill: #fff; stroke: var(--cobalt); }
.rv-copy line { stroke: #9FB3E6; }
.rv-copy-glow { fill: rgba(140, 200, 255, .35); stroke: none; }
/* End state, also the reduced-motion version */
.rv-primary rect { fill: #F2F4F8; stroke: #B7791F; stroke-dasharray: 5 4; }
.rv-primary line { stroke: #D3D9E6; }
.rv-env rect { fill: #fff; stroke: var(--cobalt); }
.rv-env line { stroke: var(--cobalt); }
.rv-a { opacity: .15; }
.rv-b, .rv-c { opacity: 1; }
.rv-check { opacity: 1; }
.rv-stages { list-style: none; counter-reset: rs; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; }
.rv-stages li { counter-increment: rs; font-size: .9rem; color: var(--muted); padding-top: 8px; border-top: 3px solid var(--line); }
.rv-stages li::before { content: counter(rs) ". "; color: var(--cobalt); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .rv-fig .rv-primary rect { animation: rvPrimRect 16s ease-in-out infinite; }
  .rv-fig .rv-primary line { animation: rvPrimLine 16s ease-in-out infinite; }
  .rv-fig .rv-a { animation: rvA 16s ease-in-out infinite; }
  .rv-fig .rv-copy-glow { animation: rvGlow 16s ease-in-out infinite; }
  .rv-fig .rv-c { animation: rvC 16s ease-in-out infinite; }
  .rv-fig .rv-env rect { animation: rvEnvRect 16s ease-in-out infinite; }
  .rv-fig .rv-env line { animation: rvEnvLine 16s ease-in-out infinite; }
  .rv-fig .rv-check { animation: rvCheck 16s ease-in-out infinite; }
  .rv-fig .rv-b { animation: rvB 16s ease-in-out infinite; }
  .rv-fig .rv-stages li { animation: 16s ease-in-out infinite; }
  .rv-fig .rv-stages li:nth-child(1) { animation-name: rvS1; }
  .rv-fig .rv-stages li:nth-child(2) { animation-name: rvS2; }
  .rv-fig .rv-stages li:nth-child(3) { animation-name: rvS3; }
  .rv-fig .rv-stages li:nth-child(4) { animation-name: rvS4; }
  .rv-fig.is-paused * { animation-play-state: paused !important; }
  @keyframes rvPrimRect { 0%, 12% { fill: #fff; stroke: #1336C9; stroke-dasharray: 0; } 20%, 94% { fill: #F2F4F8; stroke: #B7791F; stroke-dasharray: 5 4; } 100% { fill: #fff; stroke: #1336C9; stroke-dasharray: 0; } }
  @keyframes rvPrimLine { 0%, 12% { stroke: #1336C9; } 20%, 94% { stroke: #D3D9E6; } 100% { stroke: #1336C9; } }
  @keyframes rvA { 0%, 12% { opacity: 1; } 20%, 94% { opacity: .15; } 100% { opacity: 1; } }
  @keyframes rvGlow { 0%, 28% { opacity: 0; } 36%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes rvC { 0%, 44% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes rvEnvRect { 0%, 50% { fill: #F7F9FD; stroke: #9FB3E6; stroke-dasharray: 5 4; } 60%, 94% { fill: #fff; stroke: #1336C9; stroke-dasharray: 0; } 100% { fill: #F7F9FD; stroke: #9FB3E6; stroke-dasharray: 5 4; } }
  @keyframes rvEnvLine { 0%, 50% { stroke: #D3D9E6; } 60%, 94% { stroke: #1336C9; } 100% { stroke: #D3D9E6; } }
  @keyframes rvCheck { 0%, 66% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes rvB { 0%, 76% { opacity: 0; } 84%, 94% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes rvS1 { 0%, 12%, 30%, 100% { border-top-color: #DDE4F2; color: #46516E; } 14%, 28% { border-top-color: #1336C9; color: #0F1E4A; } }
  @keyframes rvS2 { 0%, 28%, 46%, 100% { border-top-color: #DDE4F2; color: #46516E; } 30%, 44% { border-top-color: #1336C9; color: #0F1E4A; } }
  @keyframes rvS3 { 0%, 44%, 64%, 100% { border-top-color: #DDE4F2; color: #46516E; } 46%, 62% { border-top-color: #1336C9; color: #0F1E4A; } }
  @keyframes rvS4 { 0%, 64%, 96%, 100% { border-top-color: #DDE4F2; color: #46516E; } 66%, 94% { border-top-color: #1336C9; color: #0F1E4A; } }
}
@media (max-width: 900px) {
  .bk-compare, .bk-lc, .bk-prio { grid-template-columns: 1fr; }
  .bk-callouts { grid-template-columns: 1fr; }
  .bk-callouts li, .bk-callouts li + li { padding: 20px 0; border-left: 0; }
  .bk-callouts li + li { border-top: 1px solid #C6D3EE; }
  .bk-approach { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bk-approach { grid-template-columns: 1fr; }
  .cy-eval { grid-template-columns: minmax(0, 1fr); }
  .cy-eval-cta .btn { white-space: normal; text-align: center; width: 100%; }
  .bk-visual { display: none; }
  .rv-stages { grid-template-columns: 1fr 1fr; }
}

/* ===== Dental Software & Imaging Integration page ===== */
.im-visual { position: relative; justify-self: center; width: min(100%, 420px); }
.im-visual svg { position: relative; width: 100%; height: auto; display: block; }
.imv-frame { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .4); stroke-width: 2; }
.imv-screen { fill: #0A2585; }
.imv-gum { fill: none; stroke: rgba(140, 200, 255, .35); stroke-width: 16; stroke-linecap: round; }
.imv-teeth ellipse { fill: #EAF4FF; stroke: var(--sky); stroke-width: 1.5; }
.imv-stand { fill: rgba(255, 255, 255, .28); }
.imv-wand > rect:first-child { fill: #fff; }
.imv-tip { fill: #DCEBFF; stroke: #fff; stroke-width: 2; }
.imv-btn { fill: var(--cobalt); }
.imv-cradle { fill: rgba(255, 255, 255, .22); }
.im-examples { padding: 26px; border-radius: var(--r-card); background: var(--tint); border: 1px solid var(--line); margin-top: 8px; }
.im-ex-k { margin: 0 0 14px; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.im-examples ul { list-style: none; display: grid; gap: 12px; }
.im-examples li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: #fff; font: 500 1.05rem/1.35 var(--display); color: var(--ink); }
.im-examples .ico { width: 22px; height: 22px; color: #B7791F; flex: none; }
.im-tech { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #C6D3EE; }
.im-tech li { display: flex; gap: 16px; padding: 28px 24px 28px 0; border-bottom: 1px solid #C6D3EE; }
.im-tech li:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid #C6D3EE; }
.im-tech .cy-l-ic { flex: none; background: #fff; }
.im-tech h3 { margin: 0 0 6px; font-size: 1.15rem; }
.im-tech p { margin: 0; color: var(--muted); }
.im-flow { margin: 0; }
.im-flow ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.im-flow li { position: relative; padding: 0 22px 0 0; }
.im-flow li:not(:last-child)::after { content: ''; position: absolute; top: 27px; left: 64px; right: 10px; border-top: 2px dashed #9FB3E6; }
.im-flow li:not(:last-child)::before { content: ''; position: absolute; top: 22px; right: 8px; width: 10px; height: 10px; border-top: 2px solid #9FB3E6; border-right: 2px solid #9FB3E6; transform: rotate(45deg); }
.im-flow-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--cobalt); color: #fff; position: relative; z-index: 1; }
.im-flow li:first-child .im-flow-ic { background: var(--sky); color: var(--cobalt); }
.im-flow-ic .ico { width: 26px; height: 26px; }
.im-flow h3 { margin: 18px 0 6px; font-size: 1.2rem; }
.im-flow p { margin: 0; color: var(--muted); }
.im-flow figcaption { margin-top: 24px; font-size: .92rem; color: var(--muted); font-style: italic; }
.im-actions li { grid-template-columns: 44px 1fr; }
.im-actions h3 { font-size: 1.12rem; font-weight: 600; margin: 0; align-self: center; }
.im-scope { margin-top: 18px; color: var(--ink); font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.im-scope .text-link { font-weight: 600; }
@media (max-width: 960px) {
  .im-tech { grid-template-columns: 1fr 1fr; }
  .im-tech li, .im-tech li:not(:nth-child(3n+1)) { padding: 24px 20px 24px 0; border-left: 0; }
  .im-tech li:nth-child(2n) { padding-left: 20px; border-left: 1px solid #C6D3EE; }
  .im-flow ol { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .im-flow li:nth-child(2)::after, .im-flow li:nth-child(2)::before { display: none; }
}
@media (max-width: 640px) {
  .im-tech { grid-template-columns: 1fr; }
  .im-tech li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .im-flow ol { grid-template-columns: 1fr; }
  .im-flow li::after, .im-flow li::before { display: none; }
  .im-visual { display: none; }
}

/* Responsive collapse */
@media (max-width: 1024px) {
  .f-top { grid-template-columns: 1fr 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .reasons { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: 1fr 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-in, .svc-home-in, .feature-in, .switching-in, .consult-in, .phero-img .phero-in, .steps-in, .loc-body-in, .contact-in, .lp-hero-in, .article-in, .scenes-in, .faq-in, .diagram-in, .about-in, .split-note, .lp-about-in { grid-template-columns: 1fr; }
  .svc-home-media, .loc-side, .toc, .about-year-block { position: static; }
  .svc-home-media .photo-tall img { aspect-ratio: 16 / 10; }
  .toc { display: none; }
  .svc-index { grid-template-columns: 1fr; }
  .protect-cols { grid-template-columns: 1fr; }
  .protect-cols > div { padding: 24px 0 4px; }
  .protect-cols > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .f-top { grid-template-columns: 1fr 1fr; }
  .numgrid, .track { grid-template-columns: 1fr; }
  .reasons, .values { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.2rem; }
  .actions .btn { flex: 1 1 100%; }
  .cta-band .actions .btn { flex: 1 1 auto; }
  .lp-header .btn span { display: none; }
  .loc-big { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .utility, .site-header, .site-footer, .consult, .cta-band, .film video { display: none; } }
.bento-5 .b-lead .bento-n { margin-bottom: 28px; }
@media (max-width: 767px) { .hero-solo { padding-bottom: 76px; } }

/* ===== Startup Practices page (/consulting/) =====
   Architectural, plan-led. Illustrations are conceptual, never a client project. */
.sp-hero-in { grid-template-columns: minmax(0, 1fr); }
.sp-hero .phero-copy { max-width: 760px; }
.sp-hero h1 { max-width: 21ch; font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.sp-hero h1 .sky { color: var(--sky); display: block; }
.sp-hero .lede { max-width: 54ch; }
.sp-hero-fig { position: relative; margin: 0; justify-self: end; width: min(100%, 520px); }
.sp-hero-fig .cy-glow { inset: 6% 0 14%; }
.sp-hero-svg { position: relative; width: 100%; height: auto; }
.sp-hero-fig figcaption { position: relative; margin-top: 10px; font-size: .85rem; color: var(--on-cobalt-muted); text-align: right; }
.bp-out { fill: rgba(255, 255, 255, .05); stroke: rgba(140, 200, 255, .85); stroke-width: 4; }
.bp-wall { fill: none; stroke: rgba(140, 200, 255, .7); stroke-width: 2.5; }
.bp-door { fill: none; stroke: rgba(140, 200, 255, .45); stroke-width: 1; }
.bp-chair rect { fill: none; stroke: rgba(140, 200, 255, .45); stroke-width: 1.2; }
.bp-counter { stroke: rgba(140, 200, 255, .8); stroke-width: 6; stroke-linecap: round; }
.bp-lbl text { font: 600 9px var(--body); letter-spacing: .14em; fill: rgba(220, 235, 255, .75); }
.bp-run { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-dasharray: 3 5; }
.bp-disp rect { fill: var(--sky); }
.bp-drop circle { fill: #fff; }
.bp-ap circle { fill: none; stroke: #fff; stroke-width: 1.5; opacity: .7; }
.bp-ap-dot circle { fill: #fff; }
.bp-rack { fill: var(--sky); }
.bp-focus { fill: #fff; stroke: var(--sky); stroke-width: 4; }
.sp-link { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.room-shadow { fill: rgba(3, 10, 50, .35); }
.room-card { fill: #fff; }
.room-ceil, .room-floor { stroke: var(--line); stroke-width: 2; }
.room-ap { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.room-wifi { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; }
.room-cam { fill: var(--sky-soft); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.room-tv { fill: var(--sky-soft); stroke: var(--ink); stroke-width: 2; }
.room-tv-mount, .room-stand { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.room-mon { fill: #DCEBFF; stroke: var(--ink); stroke-width: 2; }
.room-top { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.room-desk { fill: var(--cobalt); }
.room-port { fill: var(--sky); stroke: var(--ink); stroke-width: 1.5; }
.room-printer { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .sp-link, .bp-run { animation: flow 2.8s linear infinite; }
  .sp-hero-fig .room { animation: spRise .9s var(--ease) .25s both; }
  .bp-ap circle { animation: spPulse 3.2s ease-in-out infinite; }
}
@keyframes spRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spPulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* Early planning: copy beside the annotated layout */
.sp-early { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sp-early-copy h2 { max-width: 18ch; }
.sp-early-copy p { color: var(--muted); font-size: 1.08rem; }
.sp-early-copy .sp-strong { color: var(--ink); font-weight: 600; }
.sp-q { list-style: none; display: grid; gap: 10px; margin: 22px 0 24px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-q li { display: flex; gap: 12px; align-items: flex-start; font: 500 1.08rem/1.4 var(--display); color: var(--ink); }
.sp-q .ico { width: 22px; height: 22px; color: var(--cobalt); flex: none; margin-top: 1px; }
.sp-aside-link { margin-top: 26px; font-size: .98rem; color: var(--muted); }
.sp-plan { margin: 0; padding: clamp(18px, 2.5vw, 28px); border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.sp-plan-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-plan-k { font: 600 1rem var(--display); color: var(--ink); }
.sp-plan-n { font-size: .85rem; color: var(--muted); }
.sp-plan-svg { width: 100%; height: auto; }
.pl-corr { fill: var(--tint); }
.pl-out { fill: none; stroke: var(--ink); stroke-width: 5; }
.pl-wall { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.pl-door { fill: none; stroke: #8C97B3; stroke-width: 1; }
.pl-furn rect, .pl-furn circle { fill: none; stroke: #B7C3DD; stroke-width: 1.2; }
.pl-counter { fill: var(--sky-soft); stroke: var(--ink); stroke-width: 1.5; }
.pl-lbl text { font: 600 9.5px var(--body); letter-spacing: .12em; fill: var(--muted); text-anchor: middle; }
.pl-lbl .pl-lbl-faint { fill: #9AA5BF; }
.pl-run { fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: .55; }
.pl-disp rect { fill: var(--sky); stroke: var(--cobalt); stroke-width: 1.2; }
.pl-drop circle, .pl-ap-dot circle { fill: var(--cobalt); }
.pl-ap circle { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.pl-cam rect { fill: var(--ink); }
.pl-pwr rect { fill: #fff; stroke: var(--cobalt); stroke-width: 2; }
.pl-rack { fill: var(--cobalt); }
.pl-spk-s { fill: var(--sky); stroke: var(--cobalt); stroke-width: 1.4; stroke-linejoin: round; }
.pl-badge circle { fill: var(--cobalt); stroke: #fff; stroke-width: 3; }
.pl-badge-n text { font: 700 13px var(--display); fill: #fff; text-anchor: middle; }
.sp-legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 18px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sp-legend ul { list-style: none; display: grid; gap: 8px; font-size: .92rem; color: var(--text); }
.sp-legend li { display: flex; align-items: center; gap: 10px; }
.sp-legend .lg-n { width: 22px; height: 22px; border-radius: 50%; background: var(--cobalt); color: #fff; display: inline-grid; place-items: center; font: 700 .78rem var(--display); flex: none; }
.sp-legend-sym { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.lg-s { width: 20px; height: 20px; flex: none; }
.lg-wide { width: 28px; }
.lg-drop { fill: var(--cobalt); } .lg-disp { fill: var(--sky); stroke: var(--cobalt); stroke-width: 1.2; }
.lg-ap { fill: #fff; stroke: var(--cobalt); stroke-width: 2; } .lg-cam { fill: var(--ink); }
.lg-spk { fill: var(--sky); stroke: var(--cobalt); stroke-width: 1.4; stroke-linejoin: round; }
.lg-pwr { fill: #fff; stroke: var(--cobalt); stroke-width: 2; } .lg-run { stroke: var(--cobalt); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
@media (prefers-reduced-motion: no-preference) { .sp-plan .pl-run { animation: flow 3s linear infinite; } }

/* Process: vertical timeline */
.sp-proc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.sp-proc-head { position: sticky; top: 120px; }
.sp-proc-head h2 { max-width: 16ch; }
.sp-proc-head p { color: var(--muted); }
.sp-phases { list-style: none; display: grid; gap: 10px; margin-top: 26px; }
.sp-phases li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; }
.sp-phases b { display: inline-block; min-width: 44px; font: 600 .9rem var(--display); color: var(--cobalt); }
.sp-time { list-style: none; position: relative; counter-reset: sp; }
.sp-time li:not(:last-child)::after { content: ''; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: linear-gradient(var(--cobalt), var(--sky)); }
.sp-time li { counter-increment: sp; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding-bottom: 34px; }
.sp-time li:last-child { padding-bottom: 0; }
.sp-time li::before { content: counter(sp, decimal-leading-zero); position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cobalt); color: #fff; font: 600 1rem var(--display); box-shadow: 0 0 0 6px var(--tint); }
.sp-time li.is-final::before { background: #fff; color: var(--cobalt); border: 2px solid var(--cobalt); }
.sp-time .sp-ph { display: block; font: 600 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.sp-time h3 { font-size: 1.3rem; margin: 0 0 8px; }
.sp-time p { margin: 0; color: var(--muted); }
.sp-time-note { margin-top: 30px; padding: 18px 20px; border-radius: var(--r-ctl); background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .98rem; }

/* Coordination: planning areas as a plan sheet */
.sp-coord-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-bottom: clamp(28px, 4vw, 44px); }
.sp-coord-top h2 { max-width: 16ch; margin-bottom: 0; }
.sp-coord-top p { color: var(--muted); font-size: 1.08rem; }
.sp-coord-top p:last-child { margin-bottom: 0; }
.sp-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--ink); border-radius: 4px; background:
  linear-gradient(rgba(19, 54, 201, .045) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, rgba(19, 54, 201, .045) 1px, transparent 1px) 0 0 / 24px 24px, #fff; }
.sp-sheet > div { padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; }
.sp-sheet > div:nth-child(odd) { border-right: 1px solid #C6D3EE; }
.sp-sheet > div:nth-child(-n+2) { border-bottom: 1px solid #C6D3EE; }
.sp-sheet h3 { margin: 4px 0 8px; font-size: 1.2rem; }
.sp-sheet p { margin: 0; color: var(--muted); }
.sp-scope { margin-top: 24px; display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-left: 4px solid var(--cobalt); background: var(--sky-soft); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; color: var(--ink); }
.sp-scope .ico { width: 22px; height: 22px; color: var(--cobalt); margin-top: 2px; }
.sp-scope p { margin: 0; max-width: 90ch; }

/* Low-voltage: cable rows */
.sp-lv-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.sp-lv-head p { color: var(--muted); font-size: 1.08rem; }
.sp-cables { list-style: none; border-top: 1px solid #C6D3EE; }
.sp-cables li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 4fr) minmax(0, 7fr); gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid #C6D3EE; }
.sp-cables h3 { margin: 0; font-size: 1.25rem; }
.sp-cables p { margin: 0; color: var(--muted); }
.sp-cable { width: 100%; height: auto; }
.cb-net { stroke: var(--cobalt); stroke-width: 4; fill: none; }
.cb-vid { stroke: var(--ink); stroke-width: 2; fill: none; }
.cb-spk { stroke: var(--cobalt); stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; fill: none; }
.cb-end { fill: var(--cobalt); }
.cb-end-o { fill: #fff; stroke: var(--cobalt); stroke-width: 2.5; }
.sp-lv-note { margin-top: 24px; color: var(--muted); max-width: 80ch; }

/* Network and Wi-Fi */
.sp-net { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.sp-net h2 { max-width: 17ch; }
.sp-net-copy p { color: var(--muted); font-size: 1.08rem; }
.sp-net-list { list-style: none; border-top: 3px solid var(--cobalt); }
.sp-net-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font: 500 1.1rem/1.35 var(--display); color: var(--ink); }
.sp-net-fine { margin-top: 18px; font-size: .95rem; color: var(--muted); }

/* Cameras, sound, door access (cobalt) */
.sp-sys-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-bottom: clamp(28px, 4vw, 44px); }
.sp-sys-head h2 { margin: 0; max-width: 20ch; }
.sp-sys-head p { padding-top: 8px; }
.sp-sys-head p { margin: 0; color: var(--on-cobalt-muted); }
.sp-sys { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 16px; }
.sp-sys article { border-radius: var(--r-card); padding: clamp(22px, 3vw, 34px); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); }
.sp-sys .sp-sys-lead { grid-row: span 2; display: flex; flex-direction: column; background: #fff; border-color: #fff; }
.sp-sys .sp-sys-lead h3 { color: var(--ink); }
.sp-sys .sp-sys-lead p { color: var(--muted); }
.sp-sys h3 { font-size: 1.35rem; margin: 18px 0 10px; }
.sp-sys p { margin: 0; color: var(--on-cobalt-muted); }
.sp-sys-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(140, 200, 255, .16); color: var(--sky); }
.sp-sys-lead .sp-sys-ic { background: var(--sky-soft); color: var(--cobalt); }
.sp-sys-ic .ico { width: 26px; height: 26px; }
.sp-cam-svg { width: 100%; height: auto; margin-top: auto; padding-top: 26px; }
.cm-room { fill: none; stroke: var(--ink); stroke-width: 3; }
.cm-cone { fill: rgba(140, 200, 255, .35); }
.cm-edge { stroke: var(--cobalt); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.cm-cam { fill: var(--cobalt); }
.cm-desk { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.cm-door { fill: none; stroke: #8C97B3; stroke-width: 1.5; }
.sp-cam-cap { margin-top: 8px; font-size: .85rem; color: var(--muted) !important; }
.sp-sys-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; color: #fff; font-weight: 500; }
.sp-sys-note .ico { color: var(--sky); margin-top: 1px; }

/* Follow-through */
.sp-follow-side { padding: 30px; border-radius: var(--r-card); background: #fff; border: 1px solid #C6D3EE; }
.sp-follow-side .em-checks li { font-weight: 500; }
.sp-follow-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); }

/* Opening and ongoing support */
.sp-open { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sp-open h2 { max-width: 19ch; }
.sp-open p { color: var(--muted); font-size: 1.08rem; }
.sp-open .linklist { margin-top: 26px; }
.sp-open .linklist ul { border-top-color: #C6D3EE; }
.sp-open .linklist li { border-bottom-color: #C6D3EE; padding: 16px 0; }
.sp-open-scope { margin-top: 26px; padding: 20px 22px; border-radius: var(--r-ctl); background: #fff; border: 1px solid #C6D3EE; }
.sp-open-scope p { margin: 0; font-size: .98rem; color: var(--ink); }
.sp-open-scope p + p { margin-top: 8px; color: var(--muted); }

/* Form: select field (shared .field styling) */
.field select { width: 100%; font: 400 1rem/1.4 var(--body); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%231336C9' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; border: 1.5px solid #AEBBD8; border-radius: var(--r-ctl); padding: 12px 42px 12px 14px; min-height: 48px; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.field select:hover { border-color: #7F8DB0; }
.field select:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(19, 54, 201, .22); }
.field.has-error select { border-color: var(--danger); }

@media (max-width: 960px) {
  .sp-hero-in, .sp-early, .sp-proc, .sp-coord-top, .sp-net, .sp-sys-head, .sp-open { grid-template-columns: 1fr; }
  .sp-hero-fig { justify-self: start; width: min(100%, 460px); }
  .sp-proc-head { position: static; }
  .sp-cables li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 24px; }
  .sp-cables li .sp-cable { grid-row: span 2; }
  .sp-cables li p { grid-column: 2; }
  .sp-sys { grid-template-columns: 1fr; }
  .sp-sys .sp-sys-lead { grid-row: auto; }
}
@media (max-width: 640px) {
  .sp-hero-fig figcaption { text-align: left; }
  .sp-sheet { grid-template-columns: 1fr; }
  .sp-sheet > div:nth-child(odd) { border-right: 0; }
  .sp-sheet > div:not(:last-child) { border-bottom: 1px solid #C6D3EE; }
  .sp-sheet > div { grid-template-columns: 1fr; gap: 12px; }
  .sp-legend, .sp-legend-sym { grid-template-columns: 1fr; }
  .sp-cables li { grid-template-columns: 1fr; gap: 12px; }
  .sp-cables li .sp-cable { grid-row: auto; max-width: 200px; }
  .sp-cables li p { grid-column: auto; }
  .sp-time li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .sp-time li:not(:last-child)::after { left: 19px; top: 40px; }
  .sp-time li::before { width: 40px; height: 40px; border-radius: 12px; font-size: .9rem; }
  .sp-plan { padding: 14px; }
}

/* ===== Existing Practices page (/who-we-help/switching-it-providers/) ===== */
.ep-hero .phero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }
.ep-hero h1 { max-width: 19ch; font-size: clamp(2.1rem, 3.5vw, 3.1rem); }
.ep-hero .lede { max-width: 58ch; }
.ep-peek { margin: 0; padding: 26px; border-radius: var(--r-card); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.ep-peek-k { margin: 0 0 14px; font: 600 1rem var(--display); color: #fff; }
.ep-peek ul { list-style: none; display: grid; gap: 8px; }
.ep-peek li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 500; }
.ep-peek li .ico { width: 22px; height: 22px; color: var(--sky); }
.ep-peek a { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; font-size: .95rem; font-weight: 600; text-decoration: none; }
.ep-peek a:hover { text-decoration: underline; }

/* Difference */
.ep-diff { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ep-diff h2 { max-width: 20ch; }
.ep-diff p { color: var(--muted); font-size: 1.08rem; }
.ep-state { margin: 0; padding: 32px 0 32px 28px; border-left: 4px solid var(--cobalt); font: 500 clamp(1.35rem, 2.2vw, 1.7rem)/1.35 var(--display); color: var(--ink); letter-spacing: -0.01em; }

/* Onboarding: timeline beside the sticky system overview */
.ep-onb-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.ep-onb-head p { color: var(--muted); font-size: 1.08rem; }
.ep-onb { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ep-time { list-style: none; counter-reset: ep; }
.ep-time > li { counter-increment: ep; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding-bottom: 38px; }
.ep-time > li:last-child { padding-bottom: 0; }
.ep-time > li::before { content: counter(ep); position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cobalt); color: #fff; font: 600 1.1rem var(--display); box-shadow: 0 0 0 6px var(--tint); }
.ep-time > li:not(:last-child)::after { content: ''; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: linear-gradient(var(--cobalt), var(--sky)); }
.ep-time h3 { font-size: 1.3rem; margin: 10px 0 8px; }
.ep-time p { color: var(--muted); margin: 0 0 10px; }
.ep-time ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 14px 0 6px; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.ep-time ul li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; color: var(--ink); }
.ep-time ul .ico { width: 18px; height: 18px; color: var(--cobalt); margin-top: 3px; flex: none; }
.ep-time .ep-fine { font-size: .93rem; color: var(--muted); padding-left: 14px; border-left: 2px solid var(--sky); }
.ep-time-note { margin-top: 30px; padding: 18px 20px; border-radius: var(--r-ctl); background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 500; display: flex; gap: 12px; }
.ep-time-note .ico { color: var(--cobalt); width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* System overview */
.ep-sys-wrap { position: sticky; top: 100px; }
.ep-sys { margin: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ep-sys-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ep-sys h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); margin: 0 0 14px; max-width: 18ch; }
.ep-pause { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: var(--r-ctl); border: 1.5px solid #B8C6EC; background: #fff; color: var(--cobalt); font: 600 .88rem var(--body); cursor: pointer; }
.ep-pause:hover { border-color: var(--cobalt); }
.ep-pause .ico { width: 16px; height: 16px; }
.ep-pause .i-play { display: none; }
.ep-pause[aria-pressed="true"] .i-play { display: block; }
.ep-pause[aria-pressed="true"] .i-pause { display: none; }
.ep-approach { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0 0 20px; font: 600 .9rem var(--display); color: var(--cobalt); }
.ep-approach li { display: inline-flex; align-items: center; gap: 4px; }
.ep-approach li span { padding: 5px 10px; border-radius: 8px; background: var(--sky-soft); }
.ep-approach .ico { width: 14px; height: 14px; color: #8C97B3; }
.ep-groups { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "c d" "e e"; gap: 26px; }
.ep-g { position: relative; padding: 16px 16px 14px; border-radius: 14px; background: var(--tint); border: 1.5px solid var(--line); transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease); }
.ep-g[data-g="a"] { grid-area: a; } .ep-g[data-g="b"] { grid-area: b; } .ep-g[data-g="c"] { grid-area: c; } .ep-g[data-g="d"] { grid-area: d; } .ep-g[data-g="e"] { grid-area: e; }
.ep-g.is-active { border-color: var(--cobalt); background: #fff; box-shadow: 0 0 0 4px rgba(19, 54, 201, .12); }
.ep-g h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1rem; }
.ep-g-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--cobalt); color: #fff; flex: none; }
.ep-g-ic .ico { width: 18px; height: 18px; }
.ep-g ul { list-style: none; display: grid; gap: 6px; }
.ep-g li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink); }
.ep-g li .ico { width: 18px; height: 18px; color: var(--cobalt); }
.ep-g[data-g="e"] ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.ep-g-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
/* A few connections only: network to servers, network to workstations, workstations to clinical technology. */
.ep-g[data-g="a"]::after { content: ''; position: absolute; top: 50%; right: -28px; width: 28px; border-top: 2px solid #9FB3E6; }
.ep-g[data-g="a"]::before { content: ''; position: absolute; left: 50%; bottom: -28px; height: 28px; border-left: 2px solid #9FB3E6; }
.ep-g[data-g="c"]::after { content: ''; position: absolute; top: 50%; right: -28px; width: 28px; border-top: 2px dashed #9FB3E6; }
.ep-sys-extra { display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px dashed #9FB3E6; font-size: .88rem; color: var(--ink); }
.ep-sys-extra .ico { width: 18px; height: 18px; color: var(--cobalt); flex: none; margin-top: 2px; }
.ep-sys figcaption { margin-top: 12px; font-size: .85rem; color: var(--muted); }

/* Recurring issues */
.ep-rec { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ep-rec h2 { max-width: 18ch; }
.ep-rec p { color: var(--muted); font-size: 1.08rem; }
.ep-rec-box { padding: 28px; border-radius: var(--r-card); background: var(--sky-soft); }
.ep-rec-k { margin: 0 0 8px; font: 600 1rem var(--display); color: var(--ink); }
.ep-rec-box ul { list-style: none; }
.ep-rec-box li { display: flex; gap: 14px; align-items: center; padding: 16px 0; font: 500 1.12rem/1.35 var(--display); color: var(--ink); }
.ep-rec-box li + li { border-top: 1px solid #C6D8F5; }
.ep-rec-box .cy-l-ic { background: #fff; flex: none; }

/* Standards */
.ep-std-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.ep-std-head p { color: var(--muted); font-size: 1.08rem; }
.ep-std .value h3 { font-size: 1.15rem; margin: 14px 0 8px; }
.ep-std .value .cy-l-ic { background: #fff; }
.ep-std-note { margin-top: 28px; font-size: .95rem; color: var(--muted); }

/* Complexity */
.ep-cx-links { padding: 28px; border-radius: var(--r-card); background: #fff; border: 1px solid #C6D3EE; }
.ep-cx-links .linklist ul { border-top: 0; }
.ep-cx-links .linklist li:last-child { border-bottom: 0; }

/* Backup band */
.ep-bk { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ep-bk h2 { max-width: 20ch; margin: 0; }
.ep-bk p { color: var(--muted); }
.ep-bk .text-link { margin-top: 6px; }

/* Ongoing plan */
.ep-plan { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.ep-plan h2 { max-width: 18ch; }
.ep-plan p { color: var(--muted); font-size: 1.08rem; }
.ep-plan-side { padding: 30px; border-radius: var(--r-card); background: var(--cobalt); color: var(--on-cobalt-muted); }
.ep-plan .ep-plan-side p { color: var(--on-cobalt-muted); margin: 0; }
.ep-plan-side a { color: #fff; text-underline-offset: 3px; }
.ep-plan-side h3 { color: #fff; font-size: 1.2rem; margin: 0 0 6px; }
.ep-plan-side ul { list-style: none; display: grid; gap: 12px; margin: 16px 0 0; }
.ep-plan-side li { display: flex; gap: 12px; color: #fff; font-weight: 500; }
.ep-plan-side li .ico { color: var(--sky); width: 22px; height: 22px; flex: none; }
.ep-plan-scope { margin-top: 22px; padding: 18px 20px; border-radius: var(--r-ctl); background: var(--tint); border: 1px solid var(--line); }
.ep-plan-scope p { margin: 0; font-size: .98rem; color: var(--ink); }
.ep-plan-scope p + p { margin-top: 6px; color: var(--muted); }

@media (max-width: 1024px) {
  .ep-onb { grid-template-columns: 1fr; }
  .ep-sys-wrap { position: static; max-width: 640px; }
}
@media (max-width: 900px) {
  .ep-hero .phero-in, .ep-diff, .ep-rec, .ep-bk, .ep-plan { grid-template-columns: 1fr; }
  .ep-peek { max-width: 460px; }
}
@media (max-width: 640px) {
  .ep-peek { display: none; }
  .ep-groups { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; gap: 14px; }
  .ep-g::before, .ep-g::after { display: none; }
  .ep-g[data-g="e"] ul { grid-template-columns: 1fr; }
  .ep-time ul { grid-template-columns: 1fr; }
  .ep-time > li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .ep-time > li::before { width: 40px; height: 40px; border-radius: 12px; }
  .ep-time > li:not(:last-child)::after { left: 19px; top: 40px; }
  .ep-sys-top { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .ep-pause { display: none; } }

/* Where We Serve is a single link (no submenu); footer has three link columns. */
@media (min-width: 1025px) { .f-top { grid-template-columns: 1.6fr repeat(3, 1fr); } }

/* ===== Where We Serve page (/locations/) ===== */
.loc-hero .phero-in { grid-template-columns: minmax(0, 1fr); }
.loc-hero .phero-copy { max-width: 760px; }
.loc-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 3.5vw, 3.1rem); }
.loc-areas-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 40px); }
.loc-areas-head p { color: var(--muted); font-size: 1.08rem; }
.loc-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.loc-grid li { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 112px; padding: 18px 18px 16px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cobalt); cursor: default; }
.loc-grid .loc-n { font: 600 1.15rem/1.25 var(--display); color: var(--ink); }
.loc-grid .loc-k { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.loc-more { margin-top: 24px; color: var(--ink); font-weight: 500; }
.loc-svc-head { max-width: 720px; margin-bottom: clamp(20px, 3vw, 32px); }
.loc-svc-head p { color: var(--muted); font-size: 1.08rem; }
.loc-svc-note { margin-top: 24px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-left: 4px solid var(--cobalt); background: var(--sky-soft); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; color: var(--ink); }
.loc-svc-note .ico { color: var(--cobalt); width: 22px; height: 22px; flex: none; margin-top: 1px; }
.loc-svc-note p { margin: 0; }
.loc-start { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.loc-start h2 { max-width: 16ch; }
.loc-start-links { display: grid; gap: 8px; margin-top: 18px; }
.loc-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: ls; }
.loc-steps li { counter-increment: ls; padding: 24px 22px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.loc-steps li::before { content: counter(ls); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--cobalt); color: #fff; font: 600 1rem var(--display); margin-bottom: 16px; }
.loc-steps h3 { font-size: 1.15rem; margin: 0 0 8px; }
.loc-steps p { margin: 0; color: var(--muted); }
@media (max-width: 1024px) { .loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .loc-start { grid-template-columns: 1fr; } .loc-steps { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .loc-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .loc-grid li { min-height: 96px; padding: 14px; } .loc-grid .loc-n { font-size: 1.02rem; } }

/* ===== Assessment request page (QR code landing) ===== */
.qr-hero .phero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.qr-hero h1 { max-width: 15ch; font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.qr-points { list-style: none; display: grid; gap: 14px; margin: 26px 0 0; }
.qr-points li { display: flex; gap: 12px; align-items: flex-start; color: #fff; font-weight: 500; }
.qr-points .ico { color: var(--sky); width: 22px; height: 22px; flex: none; margin-top: 2px; }
.qr-call { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); color: var(--on-cobalt-muted); }
.qr-call a { display: inline-flex; align-items: center; gap: 10px; font: 600 1.5rem var(--display); color: #fff; text-decoration: none; margin-top: 4px; }
.qr-call a .ico { color: var(--sky); }
.qr-call a.consult-email { display: block; font: 400 1rem var(--body); margin-top: 8px; }
.qr-hero .consult-form-wrap { margin-top: 4px; }
.qr-next-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.qr-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: q; }
.qr-steps li { counter-increment: q; padding: 24px 22px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.qr-steps li::before { content: counter(q); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--cobalt); color: #fff; font: 600 1rem var(--display); margin-bottom: 16px; }
.qr-steps h3 { font-size: 1.15rem; margin: 0 0 8px; }
.qr-steps p { margin: 0; color: var(--muted); }
.qr-links { display: grid; gap: 8px; margin-top: 18px; }
@media (max-width: 640px) { .qr-points { display: none; } }
@media (max-width: 900px) { .qr-hero .phero-in, .qr-next-in { grid-template-columns: 1fr; } .qr-steps { grid-template-columns: 1fr; } .qr-hero .qr-call { display: none; } }

/* ===== About DPS page (/about/) ===== */
.ab-hero .phero-in { grid-template-columns: minmax(0, 1fr); }
.ab-hero .phero-copy { max-width: 780px; }
.ab-hero h1 { max-width: 20ch; font-size: clamp(2.2rem, 3.8vw, 3.3rem); }
.ab-rel h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); letter-spacing: -0.03em; max-width: 18ch; margin-bottom: clamp(28px, 4vw, 48px); }
.ab-rel-body { margin-left: auto; width: min(100%, 640px); }
.ab-rel-body p { font-size: 1.15rem; line-height: 1.7; color: var(--muted); }
.ab-rel-body p:first-child { font: 500 clamp(1.25rem, 2vw, 1.5rem)/1.45 var(--display); color: var(--ink); }
.ab-founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ab-id { position: sticky; top: 110px; padding: clamp(26px, 3vw, 36px); border-radius: var(--r-card); background: var(--cobalt); color: var(--on-cobalt-muted); }
.ab-id-mark { width: 54px; height: auto; fill: #fff; margin-bottom: 28px; }
.ab-id-mark .hm-split { fill: var(--sky); }
.ab-id-name { font: 600 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 var(--display); color: #fff; letter-spacing: -0.02em; margin: 0; }
.ab-id-role { margin: 8px 0 0; color: var(--sky); font-weight: 600; }
.ab-id ul { list-style: none; display: grid; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); }
.ab-id li { display: flex; gap: 12px; align-items: flex-start; color: #fff; }
.ab-id li .ico { color: var(--sky); width: 20px; height: 20px; flex: none; margin-top: 3px; }
.ab-story h2 { max-width: 18ch; margin-bottom: 26px; }
.ab-story p { font-size: 1.1rem; line-height: 1.75; color: var(--muted); }
.ab-story .ab-story-close { color: var(--ink); font-weight: 600; border-left: 4px solid var(--cobalt); padding-left: 20px; margin-top: 28px; }
.ab-persp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.ab-persp h2 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 14ch; }
.ab-persp p { color: var(--on-cobalt-muted); font-size: 1.1rem; line-height: 1.7; }
.ab-persp p:last-child { color: #fff; font-weight: 500; }
.ab-team-head { max-width: 680px; margin-bottom: clamp(30px, 4vw, 48px); }
.ab-team-head p { color: var(--muted); font-size: 1.12rem; }
.ab-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.ab-traits > div { border-top: 3px solid var(--cobalt); padding-top: 22px; }
.ab-traits h3 { font-size: 1.45rem; margin: 0 0 10px; }
.ab-traits p { color: var(--muted); margin: 0; }
.ab-plain { margin-top: clamp(32px, 4vw, 48px); padding: 22px 26px; border-radius: var(--r-card); background: var(--sky-soft); font: 500 clamp(1.1rem, 1.7vw, 1.3rem)/1.45 var(--display); color: var(--ink); max-width: 860px; }
.ab-diff h2 { max-width: 20ch; margin-bottom: clamp(30px, 4vw, 48px); }
.ab-points { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px) clamp(32px, 6vw, 88px); }
.ab-points > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; }
.ab-points .cy-l-ic { background: #fff; }
.ab-points h3 { font-size: 1.25rem; margin: 6px 0 8px; }
.ab-points p { color: var(--muted); margin: 0; }
.ab-stages h2 { max-width: 22ch; margin-bottom: clamp(28px, 4vw, 44px); }
.ab-stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-stage { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); border-radius: var(--r-card); background: var(--tint); border: 1px solid var(--line); }
.ab-stage .cy-l-ic { background: #fff; margin-bottom: 20px; }
.ab-stage h3 { font-size: 1.4rem; margin: 0 0 10px; }
.ab-stage p { color: var(--muted); }
.ab-stage .text-link { margin-top: auto; padding-top: 8px; }
@media (max-width: 900px) {
  .ab-founder, .ab-persp { grid-template-columns: 1fr; }
  .ab-id { position: static; }
  .ab-traits, .ab-points, .ab-stage-grid { grid-template-columns: 1fr; }
  .ab-rel-body { margin-left: 0; }
}

/* Service areas are informational labels, not links. */
.where-list li { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); font-weight: 500; font-size: .95rem; background: #fff; cursor: default; }
.where-view { display: inline-flex; margin-top: 22px; margin-right: 28px; }

/* Large split-D brand mark on heroes without other artwork (same treatment as Dental IT Support). */
.has-mark { position: relative; overflow: hidden; }
.has-mark .phero-in { position: relative; z-index: 1; }
/* Footer legal links (existing live pages). */
.f-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.f-legal a { color: var(--on-cobalt-muted); text-decoration: none; }
.f-legal a:hover { color: #fff; text-decoration: underline; }

/* ===== Supporting pages: Contact, Client Support, Resources, Multi-Location, legal, 404 ===== */
.xp-hero .phero-in { grid-template-columns: minmax(0, 1fr); }
.xp-hero .phero-copy { max-width: 760px; }
.xp-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.xp-hero-short { padding-bottom: clamp(40px, 5vw, 64px); }
.ct-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.ct-side { display: grid; gap: 16px; }
.ct-card { padding: 24px; border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; }
.ct-card h2 { font-size: 1.15rem; margin: 0 0 8px; }
.ct-card p { color: var(--muted); margin: 0 0 12px; font-size: .98rem; }
.ct-card p:last-child { margin-bottom: 0; }
.ct-card-alt { background: var(--sky-soft); border-color: #CFE3FB; }
.ct-big { display: inline-flex; align-items: center; gap: 10px; font: 600 1.4rem var(--display); color: var(--ink); text-decoration: none; }
.ct-big .ico { color: var(--cobalt); }
.cs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-tile { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-card); background: #fff; border: 1.5px solid var(--line); text-decoration: none; color: var(--muted); transition: border-color .2s, transform .2s var(--ease); }
.cs-tile:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.cs-tile .cy-l-ic { background: var(--sky-soft); }
.cs-tile strong { font: 600 1.25rem var(--display); color: var(--ink); }
.cs-tile span.cs-v { color: var(--cobalt); font-weight: 600; }
.cs-help { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cs-help h2 { max-width: 16ch; }
.cs-help p { color: var(--muted); }
.cs-urgent { margin-top: 24px; display: flex; gap: 14px; padding: 20px 22px; border-radius: var(--r-ctl); background: #FFF7F6; border: 1px solid #F3B8B1; color: var(--ink); }
.cs-urgent .ico { color: var(--danger); width: 24px; height: 24px; flex: none; margin-top: 2px; }
.cs-urgent p { margin: 0; color: var(--ink); }
.cs-list { list-style: none; display: grid; gap: 12px; padding: 26px; border-radius: var(--r-card); background: var(--tint); }
.cs-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.cs-list .ico { color: var(--cobalt); width: 22px; height: 22px; flex: none; margin-top: 1px; }
.rs-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rs-guides a { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--muted); transition: border-color .2s, transform .2s var(--ease); }
.rs-guides a:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.rs-guides strong { font: 600 1.2rem var(--display); color: var(--ink); }
.rs-guide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; scroll-margin-top: 110px; }
.rs-guide h2 { max-width: 16ch; }
.rs-guide > div > p { color: var(--muted); font-size: 1.08rem; }
.rs-guide .checklist { margin: 0 0 18px; background: #fff; border: 1px solid var(--line); }
.tint .rs-guide .checklist { background: #fff; }
.ml-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.ml-intro h2 { max-width: 16ch; }
.ml-intro p { color: var(--muted); font-size: 1.08rem; }
.ml-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ml-grid > div { padding: 28px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); }
.ml-grid .cy-l-ic { margin-bottom: 16px; }
.ml-grid h3 { font-size: 1.25rem; margin: 0 0 8px; }
.ml-grid p { margin: 0; color: var(--muted); }
.ml-grid a { display: inline-flex; margin-top: 12px; }
.ml-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: ml; }
.ml-steps li { counter-increment: ml; padding-top: 18px; border-top: 3px solid var(--cobalt); }
.ml-steps li::before { content: counter(ml); display: block; font: 600 2rem/1 var(--display); color: var(--cobalt); margin-bottom: 12px; }
.ml-steps h3 { font-size: 1.15rem; margin: 0 0 8px; }
.ml-steps p { margin: 0; color: var(--muted); }
.lg-body { max-width: 760px; }
.lg-body h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 1.9em; }
.lg-body p, .lg-body li { color: var(--text); }
.lg-body ul { padding-left: 1.2em; display: grid; gap: 8px; margin: 0 0 1.2em; }
.lg-meta { color: var(--muted); font-size: .95rem; }
.nf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 760px; }
@media (max-width: 900px) {
  .ct-in, .cs-help, .rs-guide, .ml-intro { grid-template-columns: 1fr; }
  .cs-tiles, .rs-guides, .ml-steps { grid-template-columns: 1fr; }
  .ml-grid, .nf-links { grid-template-columns: 1fr; }
}

@media (max-width: 370px) { .lockup-div { display: none; } .lockup { gap: 8px; } .lockup-name { font-size: .6rem; letter-spacing: .1em; } .lockup-desc { font-size: .5rem; letter-spacing: .12em; } }