/* ================================================================
   Jackson Digital — Components (Nov 2026 preview)
   ================================================================ */

[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--space-3xl) 0; }
.section-tint { background: var(--bg-tint); }
.section-head { max-width: 720px; margin-bottom: var(--space-2xl); }
.section-head h2 { margin-bottom: var(--space-md); }
.section-head p:not(.eyebrow) { color: var(--text-2); font-size: 1.125rem; }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .04em; color: var(--blue-deep); margin: 0 0 14px; }
.lede { font-size: 1.2rem; color: var(--text-2); max-width: 34em; }
.label-sm { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px; }
.fine { font-size: .85rem; color: var(--text-3); }
.muted { color: var(--text-3); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.btn-primary { background: var(--blue-deep); color: #fff; }
.btn-primary:hover { background: var(--blue-ink); color: #fff; }
.btn-ghost { background: #fff; color: var(--blue-ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-ink); background: var(--bg-tint); }
.btn-sm { min-height: 42px; padding: 8px 16px; font-size: .95rem; }
.btn:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.arrow-link { font-weight: 600; text-decoration: none; display: inline-block; padding: 10px 0; }
.arrow-link::after { content: " \2192"; }
.arrow-link:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand img { height: 38px; width: auto; }
.site-nav ul { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; font-size: .98rem; padding: 12px 0; display: inline-block; }
.site-nav a[aria-current="page"] { color: var(--blue-deep); font-weight: 700; }
.site-nav a:not(.btn):hover { color: var(--blue-deep); }
.nav-toggle { display: none; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 10px; min-height: 44px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.nav-toggle-bars { width: 18px; height: 2px; background: var(--navy); box-shadow: 0 -6px 0 var(--navy), 0 6px 0 var(--navy); }
@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .site-nav a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 16px; width: 100%; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; padding: 0; }
  html:not(.js) .site-nav a:not(.btn) { border: 0; padding: 8px 0; }
  html:not(.js) .site-nav .btn { width: auto; margin: 0; }
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 0; background: linear-gradient(180deg, var(--bg-tint) 0%, #fff 78%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hl { color: var(--blue-deep); }
.hero .lede { margin-bottom: 30px; }
.hero-note { margin-top: 18px; font-size: .95rem; color: var(--text-3); }
.tagline-band { margin-top: 80px; padding: 34px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px 56px; align-items: baseline; }
.tagline { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--navy); letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.tagline-sub { color: var(--text-2); font-size: 1.08rem; margin: 0; }

/* ---------- Demo surfaces (shared by all interface illustrations) ---------- */
.demo { margin: 0; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--bg-pale); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.demo-bar-note { font-size: .82rem; color: var(--text-2); text-align: right; }
.demo-body { background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg); }
.demo figcaption, .shot figcaption { font-size: .92rem; color: var(--text-2); margin-top: 12px; }
.tag { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.tag-live { color: var(--green); border-color: #A9D8BF; background: var(--green-soft); }
.tag-dev { color: var(--amber); border-color: #E9CD95; background: var(--amber-soft); }

.chip { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; border-radius: 999px; padding: 5px 12px; white-space: nowrap; border: 1px solid transparent; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.chip-pending { background: var(--amber-soft); color: var(--amber); border-color: #E9CD95; }
.chip-wait { background: #F1F3F7; color: var(--text-2); border-color: var(--line-strong); }
.chip-wait::before { background: transparent; border: 2px solid currentColor; width: 9px; height: 9px; }
.chip-info { background: var(--bg-pale); color: var(--blue-ink); border-color: #B9CDEA; }
.chip-done { background: var(--green-soft); color: var(--green); border-color: #A9D8BF; }
.chip-done::before { content: "\2713"; background: none; width: auto; height: auto; font-size: .8rem; line-height: 1; }
.chip-alert { background: #FDECEA; color: #A12A1E; border-color: #F0B9B2; }
.chip-alert::before { content: "!"; background: none; width: auto; height: auto; font-weight: 800; line-height: 1; }

/* Hero workflow */
.demo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.demo-kicker { font-size: .84rem; color: var(--text-3); margin: 0 0 2px; }
.demo-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy); margin: 0; }
.flow { position: relative; }
.flow-step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 0 0 18px; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.flow-step:last-child::before { display: none; }
.flow-step.is-done::before { background: #A9D8BF; }
.flow-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; font-weight: 700; border: 2px solid var(--line-strong); background: #fff; position: relative; z-index: 1; }
.is-done .flow-dot { background: var(--green); border-color: var(--green); color: #fff; }
.is-done .flow-dot::after { content: "\2713"; }
.is-current .flow-dot { border-color: var(--blue-deep); background: #fff; }
.is-current .flow-dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-deep); }
.flow-label { font-weight: 600; color: var(--navy); margin: 1px 0 1px; }
.flow-sub { font-size: .92rem; color: var(--text-2); margin: 0; }
.is-todo .flow-label { color: var(--text-3); font-weight: 500; }
.is-todo .flow-sub { color: var(--text-3); }
.is-current > div { background: var(--bg-tint); border: 1px solid #B9CDEA; border-radius: 10px; padding: 10px 14px; margin: -6px 0 0; }
.next-step { margin: 20px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--navy); color: #fff; font-size: .98rem; }
.next-step strong { display: inline-block; margin-right: 8px; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: #BFD3F2; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-demo .flow-step { opacity: 0; transform: translateY(8px); animation: stepIn .5s var(--ease-out) forwards; }
  .js .hero-demo .flow-step:nth-child(1) { animation-delay: .25s; }
  .js .hero-demo .flow-step:nth-child(2) { animation-delay: .7s; }
  .js .hero-demo .flow-step:nth-child(3) { animation-delay: 1.15s; }
  .js .hero-demo .flow-step:nth-child(4) { animation-delay: 1.45s; }
  .js .hero-demo .flow-step:nth-child(5) { animation-delay: 1.6s; }
  .is-current .flow-dot { animation: ring 2.4s ease-out 2s infinite; }
}
@keyframes stepIn { to { opacity: 1; transform: none; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(38,89,163,.35); } 70%, 100% { box-shadow: 0 0 0 10px rgba(38,89,163,0); } }

/* ---------- Friction ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.quotes li { padding: 26px 0; border-top: 2px solid var(--navy); }
.quotes p { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.3; color: var(--navy); margin: 0 0 4px; letter-spacing: -.01em; }
.quotes a { font-size: .95rem; font-weight: 600; text-decoration: none; display: inline-block; padding: 10px 0; }
.quotes a::after { content: " \2193"; }
.quotes a:hover { text-decoration: underline; }
.quotes-foot { margin-top: 28px; color: var(--text-2); max-width: 46em; }

/* ---------- How we help ---------- */
.help-rows { border-top: 1px solid var(--line-strong); }
.help-row { display: grid; grid-template-columns: 72px minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; padding: 44px 0; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 90px; }
.help-num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--blue); padding-top: 4px; }
.help-main h3 { font-size: 1.6rem; margin-bottom: 12px; }
.help-main > p { color: var(--text-2); max-width: 34em; }
.ticks { margin-top: 18px; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 28px; font-weight: 500; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }
.help-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; align-self: start; }
.help-side-h { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
.help-tags { color: var(--text-2); font-size: .98rem; margin-bottom: 12px; }
.help-side .fine { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.care { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 32px; padding: 36px 0 0; }
.care h3 { grid-column: 2; margin-bottom: -20px; }
.care p { grid-column: 2; color: var(--text-2); max-width: 44em; }
.pull { margin: 72px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.22; letter-spacing: -.02em; color: var(--navy); max-width: 22em; padding-left: 24px; border-left: 4px solid var(--blue); text-wrap: balance; }

/* ---------- Examples / tabs ---------- */
.tablist { display: none; }
.js .tablist { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.tablist [role="tab"] { min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--text); font-weight: 600; cursor: pointer; text-align: left; }
.tablist [role="tab"]:hover { border-color: var(--blue); }
.tablist [role="tab"][aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tabpanel { margin-bottom: 48px; }
.js .tabpanel { margin-bottom: 0; }
.js .panel-title { display: none; }
.panel-title { margin-bottom: 18px; }
.scenario { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.scenario-copy p:not(.label-sm) { color: var(--text-2); margin-bottom: 24px; font-size: 1.05rem; }
.attention { background: var(--amber-soft); border: 1px solid #E9CD95; color: #5F3A00; border-radius: 10px; padding: 10px 14px; font-size: .95rem; margin-bottom: 8px; }
.attention strong { margin-right: 8px; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.row-t { font-weight: 600; color: var(--navy); margin: 0; }
.row-s { font-size: .9rem; color: var(--text-3); margin: 0; }
.qa-q { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy); line-height: 1.35; }
.qa-a { background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.qa-a .label-sm { margin-top: 14px; }
.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.sources li { background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 10px; font-size: .9rem; font-weight: 500; }
.review-note { margin-top: 16px; font-size: .95rem; color: var(--text-2); padding-left: 14px; border-left: 3px solid var(--green); }
.table-scroll { overflow-x: auto; }
.report { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 440px; }
.report th, .report td { text-align: right; padding: 12px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.report th:first-child { text-align: left; padding-left: 0; }
.report thead th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-bottom-color: var(--line-strong); }
.report tbody th { font-weight: 600; color: var(--navy); }
.report td:last-child, .report thead th:last-child { background: var(--green-soft); color: #14553A; font-weight: 700; }
.report td.muted { font-size: .88rem; }
.legend { margin-top: 16px; display: grid; gap: 6px; font-size: .92rem; color: var(--text-2); }

/* ---------- Work / case studies ---------- */
.case { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 40px; overflow: hidden; scroll-margin-top: 90px; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .9rem; color: var(--text-3); margin-bottom: 14px; }
.case h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; margin-bottom: 14px; letter-spacing: -.02em; }
.case-head { position: relative; background: #EEF3FA; border-bottom: 1px solid var(--line); min-height: 340px; display: flex; align-items: center; }
.case-media-bg { position: absolute; inset: 0; overflow: hidden; }
.sweep { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); height: 100%; width: auto; max-width: none; }
.case-head-copy { position: relative; margin: 40px; padding: 28px 30px; max-width: 520px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.case-head-copy p:last-child { color: var(--text-2); }
.case-body { padding: 40px; }
.shots { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 36px; align-items: start; margin-bottom: 36px; }
.shot { margin: 0; }
.shot img { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.shot-wide img { padding: 18px; }
.shot-phone img { border-radius: 22px; border: 6px solid var(--navy); width: 100%; }
.shot figcaption strong, .demo figcaption strong { color: var(--navy); }
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.story dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 6px; }
.story dd { margin: 0; color: var(--text-2); font-size: .98rem; }
.story-stack { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
.case-foot { margin: 0; padding: 16px 40px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--text-3); background: #FBFCFE; }
.case-body .case-foot { margin: 32px -40px -40px; }
.case-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 40px; align-items: start; }
.case-split-rev .case-copy { order: 2; }
.case-copy > p:not(.case-meta):not(.try) { color: var(--text-2); }
.try { margin-top: 22px; font-weight: 600; color: var(--blue-ink); }
.case .demo-body { box-shadow: var(--shadow-md); }
.ship-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ship-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 18px 0 14px; }
.ship-steps li { font-size: .78rem; font-weight: 600; color: var(--text-3); padding-top: 8px; border-top: 4px solid var(--line); transition: border-color .3s, color .3s; }
.ship-steps li.on { border-color: var(--blue-deep); color: var(--navy); }
.ship-track { font-size: .92rem; color: var(--text-2); font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.ship-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ship-help { margin-top: 12px; font-size: .92rem; color: var(--text-2); min-height: 3.2em; }
.hist { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.hist p { margin-top: 12px; font-size: .95rem; color: var(--text-2); padding: 12px 14px; border-left: 3px solid var(--green); background: var(--bg-tint); border-radius: 0 8px 8px 0; }
.work-more { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; margin-top: 56px; }
.work-more p { max-width: 36em; color: var(--text-2); margin: 0; }
.work-more strong { color: var(--navy); display: block; font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 4px; }

/* ---------- Process + Joe ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--navy); padding-top: 18px; }
.steps li::before { content: counter(step); display: block; font-family: var(--font-display); font-weight: 800; color: var(--blue); margin-bottom: 8px; }
.steps h3 { font-size: 1.1rem; margin-bottom: 6px; }
.steps p { color: var(--text-2); font-size: .96rem; }
.joe { margin-top: 88px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: center; background: var(--bg-tint); border-radius: var(--radius-lg); padding: 40px; scroll-margin-top: 90px; }
.joe img { border-radius: var(--radius-md); aspect-ratio: 1; object-fit: cover; }
.joe h3 { font-size: 1.6rem; margin-bottom: 12px; }
.joe p { color: var(--text-2); max-width: 40em; }
.joe-line { font-weight: 600; color: var(--navy) !important; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label, .chips-field legend { display: block; font-weight: 600; margin-bottom: 6px; color: var(--navy); padding: 0; }
.opt { font-weight: 400; color: var(--text-3); font-size: .88rem; margin-left: 4px; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #8494AB; border-radius: 10px; background: #fff; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue-deep); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E; }
.field input[aria-invalid="false"] { border-color: var(--green); }
.field-msg { font-size: .9rem; margin: 6px 0 0; color: var(--text-3); }
.field-msg.is-error { color: #A12A1E; font-weight: 600; }
.field-msg.is-ok { color: var(--green); font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chips-field { border: 0; padding: 0; margin: 4px 0 20px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid #8494AB; border-radius: 999px; background: #fff; font-weight: 500; font-size: .96rem; }
.pick span::before { content: ""; width: 16px; height: 16px; border: 1.5px solid #8494AB; border-radius: 4px; flex: none; display: grid; place-items: center; font-size: .72rem; line-height: 1; }
.pick input:checked + span { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; font-weight: 600; }
.pick input:checked + span::before { content: "\2713"; background: #fff; border-color: #fff; color: var(--blue-deep); font-weight: 800; }
.pick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pick:hover span { border-color: var(--blue-deep); }

/* ---------- Contact ---------- */
.section-contact { background: var(--bg-pale); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.contact-copy h2 { margin-bottom: 16px; }
.contact-direct { margin-top: 32px; display: grid; gap: 16px; }
.contact-direct a { font-weight: 600; font-size: 1.1rem; display: inline-block; padding: 9px 0; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
.form-note { font-size: .9rem; color: var(--text-3); margin: 12px 0 0; }
.form-status { font-weight: 600; color: var(--navy); margin: 12px 0 0; }
.form-status:empty { display: none; }

/* ---------- Footer ---------- */
.site-footer { padding: 48px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.footer-logo { height: 34px; width: auto; margin-bottom: 12px; }
.footer-inner p { color: var(--text-2); margin: 0; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { display: inline-block; padding: 8px 0; font-weight: 500; }

/* ---------- Work page ---------- */
.page-hero { padding: 72px 0 48px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18em; margin-bottom: 18px; }
.project { padding: 64px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.project-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.project h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 14px; }
.project .story { grid-template-columns: 1fr; gap: 20px; }
.project .intro { color: var(--text-2); font-size: 1.08rem; }
.project .shot + .shot { margin-top: 28px; }
.shot-narrow img { width: 440px; }
.status-note { margin-top: 20px; font-size: .9rem; color: var(--text-3); padding: 12px 14px; background: var(--bg-tint); border-radius: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid, .tagline-band, .scenario, .case-split, .contact-grid, .project-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tagline-band { gap: 10px; margin-top: 56px; }
  .case-split-rev .case-copy { order: 0; }
  .help-row { grid-template-columns: 48px minmax(0, 1fr); gap: 20px; }
  .help-side { grid-column: 2; }
  .care { grid-template-columns: 48px minmax(0, 1fr); gap: 20px; }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .wrap { padding: 0 20px; }
  .hero { padding-top: 44px; }
  .brand img { height: 32px; }
  .actions .btn { width: 100%; }
  .quotes { grid-template-columns: 1fr; }
  .quotes li { padding: 20px 0; }
  .help-row, .care { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; }
  .help-side, .care h3, .care p { grid-column: 1; }
  .help-side { margin-top: 12px; }
  .care h3 { margin-bottom: 0; }
  .js .tablist { flex-direction: column; }
  .tablist [role="tab"] { border-radius: 12px; width: 100%; }
  .demo-body { padding: 16px; }
  .demo-bar { padding: 10px 14px; flex-wrap: wrap; }
  .rows li { align-items: flex-start; flex-direction: column; gap: 8px; }
  .case-head { display: block; min-height: 0; }
  .case-media-bg { position: relative; height: 190px; }
  .sweep { right: auto; left: 50%; transform: translate(-50%, -50%); height: 110%; }
  .case-head-copy { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 24px 20px; max-width: none; }
  .case-body, .case-split { padding: 24px 20px; }
  .case-body .case-foot { margin: 24px -20px -24px; }
  .case-foot { padding: 14px 20px; }
  .shots { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .shot-wide img { padding: 8px; }
  .shot-phone { max-width: 260px; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .joe { grid-template-columns: 1fr; padding: 24px 20px; gap: 24px; margin-top: 56px; }
  .joe img { max-width: 200px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 22px 18px; }
  .pull { margin-top: 48px; padding-left: 16px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}

/* ================================================================
   v2 — stages, application demos, service explorer, Deer Texas concept
   ================================================================ */
.k { display: block; font-size: .82rem; font-weight: 700; color: var(--blue-deep); margin: 0 0 4px; }
.eyebrow { letter-spacing: 0; font-size: .95rem; }
.btn { transition: background .18s, border-color .18s, color .18s, transform .12s; }
.btn-gold { background: var(--gold); color: #1B1505; }
.btn-gold:hover { background: #FFD44F; color: #1B1505; }
.btn-tps { background: var(--tps-pink); color: #fff; }
.btn-tps:hover { background: #B3125C; color: #fff; }
.header-call { font-weight: 700; color: var(--navy); text-decoration: none; margin-left: auto; padding: 10px 4px; white-space: nowrap; }
.header-call:hover { color: var(--blue-deep); }
@media (min-width: 901px) { .header-call { order: 3; margin-left: 0; } .site-nav { margin-left: auto; } }

/* ---------- Stage: a deep surface with atmosphere, holding a light application ---------- */
.stage { position: relative; border-radius: 24px; padding: 28px; background:
    radial-gradient(520px 380px at 92% 0%, rgba(124,227,139,.30), transparent 62%),
    radial-gradient(560px 420px at 0% 100%, rgba(55,102,174,.55), transparent 65%),
    var(--ink-navy); }
.stage-pink { background: radial-gradient(520px 380px at 95% 0%, rgba(255,120,180,.42), transparent 62%), radial-gradient(520px 420px at 0% 100%, rgba(55,102,174,.5), transparent 65%), #1A1230; }
.stage-blue { background: radial-gradient(520px 380px at 95% 0%, rgba(98,160,255,.45), transparent 62%), radial-gradient(520px 420px at 0% 100%, rgba(124,227,139,.20), transparent 65%), var(--ink-navy); }
.stage-green { background: radial-gradient(520px 380px at 95% 0%, rgba(124,227,139,.36), transparent 62%), radial-gradient(520px 420px at 0% 100%, rgba(242,194,48,.20), transparent 65%), #0E1F1C; }
.stage-sm { padding: 22px; }
.stage-fallback { color: #DCE6F7; margin: 0; }
.app { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(4,10,28,.45), 0 2px 6px rgba(4,10,28,.3); color: #111827; font-size: .95rem; }
.app > figcaption { background: #F5F6F8; border-top: 1px solid #E3E6EA; padding: 10px 16px; font-size: .82rem; color: #4B5563; line-height: 1.45; }
.tag-on-dark { margin-right: 6px; font-size: .68rem; padding: 2px 8px; }
.chip-new { background: #EAF0F9; color: #1E3F73; border-color: #B9CCE8; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, #F4F7FC 0%, #fff 80%); padding-top: 56px; }
.hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.hero-note a { font-weight: 700; white-space: nowrap; }
.stage-hero { padding: 26px; }
.app-frame { display: grid; grid-template-columns: 124px minmax(0, 1fr); min-height: 388px; }
.app-side { background: #12171C; color: #9AA4AE; padding: 14px 10px; font-size: .84rem; }
.app-brand { display: flex; gap: 8px; align-items: center; color: #fff; font-weight: 600; font-size: .74rem; line-height: 1.2; padding: 2px 4px 14px; border-bottom: 1px solid #2A323A; margin-bottom: 10px; }
.app-mark { background: var(--blue); color: #fff; font-weight: 800; border-radius: 7px; width: 28px; height: 28px; display: grid; place-items: center; font-size: .72rem; flex: none; }
.app-side li { padding: 7px 10px; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; }
.app-side li.on { background: var(--blue); color: #fff; font-weight: 600; }
.app-side li b { background: rgba(255,255,255,.22); border-radius: 999px; padding: 0 7px; font-size: .72rem; }
.app-main { background: #F5F6F8; padding: 16px; min-width: 0; }
.app-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.app-h { font-weight: 700; font-size: 1.15rem; color: #111827; margin: 0; }
.app-sub { font-size: .82rem; color: #6B7280; margin: 0; }
.lead-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
.lead-list { background: #fff; border: 1px solid #E3E6EA; border-radius: 10px; overflow: hidden; }
.lead-list li + li { border-top: 1px solid #EFF1F3; }
.lead-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; width: 100%; text-align: left; background: #fff; border: 0; border-left: 3px solid transparent; padding: 11px 12px 11px 10px; cursor: pointer; min-height: 60px; }
.lead-list button:hover { background: #F8FAFD; }
.lead-list button[aria-pressed="true"] { background: #EAF0F9; border-left-color: var(--blue); }
.lead-list button:focus-visible { outline-offset: -3px; }
.lead-who { font-weight: 600; color: #111827; }
.lead-biz { grid-column: 1; font-size: .8rem; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-list .chip { grid-column: 2; grid-row: 1 / span 2; font-size: .74rem; padding: 3px 9px; }
.lead-due { grid-column: 1 / -1; font-size: .76rem; font-weight: 600; color: var(--amber); }
.lead-detail { background: #fff; border: 1px solid #E3E6EA; border-radius: 10px; padding: 14px; min-height: 318px; display: flex; flex-direction: column; }
.ld-want { font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: #111827; margin: 0 0 2px; }
.ld-who { font-size: .82rem; color: #6B7280; margin: 0 0 12px; }
.ld-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 12px; }
.ld-steps li { font-size: .7rem; font-weight: 600; color: #9AA4AE; border-top: 4px solid #E3E6EA; padding-top: 5px; transition: border-color .35s, color .35s; }
.ld-steps li.past { border-color: #9DB8E3; color: #6B7280; }
.ld-steps li.now { border-color: var(--blue); color: #1E3F73; }
.ld-facts { display: grid; gap: 6px; margin: 0 0 12px; font-size: .84rem; }
.ld-facts div { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.ld-facts dt { color: #6B7280; } .ld-facts dd { margin: 0; color: #111827; }
.ld-next { margin-top: auto; background: #F5F6F8; border: 1px solid #E3E6EA; border-radius: 9px; padding: 11px 12px; }
.ld-next p { font-size: .86rem; margin: 0 0 9px; color: #374151; }
.ld-next b { display: block; color: #1E3F73; font-size: .78rem; }
.ld-next.is-flash { background: var(--green-soft); border-color: #A9D8BF; }
.ld-next.is-flash b { color: var(--signal-ink); }
.ld-next .btn { min-height: 38px; padding: 6px 14px; font-size: .88rem; width: 100%; }
@media (prefers-reduced-motion: no-preference) { .ld-next.is-flash { animation: flashIn .5s var(--ease-out); } }
@keyframes flashIn { from { transform: translateY(4px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- Friction (quotes are links into the explorer) ---------- */
.section-friction { padding-bottom: 72px; }
.quotes li { padding: 0; border-top: 2px solid var(--navy); }
.quotes li a { display: block; padding: 22px 0 26px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--navy); letter-spacing: -.01em; text-decoration: none; }
.quotes li a::after { content: "See an example"; display: block; margin-top: 8px; font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--blue-deep); letter-spacing: 0; }
.quotes li a:hover { color: var(--blue-deep); }
.quotes li a:hover::after { text-decoration: underline; }

/* ---------- Service explorer ---------- */
.explorer-nav { display: none; }
.js .explorer { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px; align-items: start; }
.js .explorer-nav { display: grid; gap: 10px; position: sticky; top: 96px; }
.explorer-nav [role="tab"] { text-align: left; background: transparent; border: 1.5px solid transparent; border-left: 4px solid var(--line-strong); border-radius: 0 14px 14px 0; padding: 16px 18px; cursor: pointer; display: grid; gap: 6px; transition: background .2s, border-color .2s; }
.explorer-nav [role="tab"]:hover { background: #fff; border-left-color: var(--blue); }
.explorer-nav [role="tab"][aria-selected="true"] { background: #fff; border-color: var(--line); border-left-color: var(--blue-deep); box-shadow: var(--shadow-md); }
.explorer-nav [data-accent="pink"][aria-selected="true"] { border-left-color: var(--tps-pink); }
.explorer-nav [data-accent="green"][aria-selected="true"] { border-left-color: #2FA75A; }
.svc-t { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--navy); line-height: 1.25; letter-spacing: -.01em; }
.svc-d { font-size: .93rem; color: var(--text-2); line-height: 1.45; }
.explorer-nav [role="tab"]:not([aria-selected="true"]) .svc-d { color: var(--text-3); }
.svc-panel { margin-bottom: 56px; }
.js .svc-panel { margin-bottom: 0; }
.js .svc-panel-title { display: none; }
.svc-panel-title { margin-bottom: 18px; font-size: 1.5rem; }
.svc-panel .stage { min-height: 452px; display: grid; align-items: center; }
.svc-panel .app { width: 100%; max-width: 620px; margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) { .svc-panel.is-in .app { animation: stageIn .45s var(--ease-out); } }
@keyframes stageIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.svc-explain { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-top: 24px; }
.svc-explain p { color: var(--text-2); font-size: .98rem; }
.svc-tags { font-size: .9rem !important; margin-bottom: 12px; }
.svc-links .fine { margin-top: 10px; font-size: .8rem; }

/* storefront example */
.shop { padding-top: 0; }
.shop-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px 10px; flex-wrap: wrap; }
.shop-name { font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; letter-spacing: -.01em; color: #1F1A1C; margin: 0; }
.shop-count { font-size: .84rem; color: #6B7280; margin: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 14px; }
.seg button { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #E5D3DC; background: #fff; font-weight: 600; font-size: .88rem; color: #4A2B3A; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.seg button:hover { border-color: var(--tps-pink); }
.seg button[aria-pressed="true"] { background: var(--tps-pink); border-color: var(--tps-pink); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 18px 18px; min-height: 248px; align-content: start; }
.shop-grid li { border: 1px solid #F0E3E9; border-radius: 10px; overflow: hidden; background: #fff; }
.shop-grid li p { margin: 8px 10px 0; font-weight: 600; font-size: .86rem; line-height: 1.3; color: #1F1A1C; }
.shop-grid .shop-meta { margin: 2px 10px 10px; font-weight: 400; font-size: .8rem; color: #7A6470; display: flex; justify-content: space-between; }
.shop-meta b { color: #1F1A1C; }
.sw { display: block; height: 62px; }
.sw1 { background: repeating-linear-gradient(135deg, #FFD1E3 0 12px, #FFE9F1 12px 24px); }
.sw2 { background: radial-gradient(circle at 30% 60%, #FFE08A 0 22px, transparent 23px), radial-gradient(circle at 70% 40%, #FF9EC4 0 18px, transparent 19px), #FFF4D6; }
.sw3 { background: linear-gradient(90deg, #BFE3FF 0 18%, #FFD1E3 18% 36%, #C9F0D1 36% 54%, #FFE08A 54% 72%, #D9C8FF 72% 100%); }
.sw4 { background: repeating-linear-gradient(0deg, #D9C8FF 0 8px, #F1EAFF 8px 16px); }
.sw5 { background: linear-gradient(135deg, #FF9EC4, #FFD18A); }
.sw6 { background: radial-gradient(circle at 25% 50%, #C9F0D1 0 20px, transparent 21px), radial-gradient(circle at 55% 45%, #BFE3FF 0 20px, transparent 21px), radial-gradient(circle at 82% 55%, #FFD1E3 0 16px, transparent 17px), #F7FBF4; }
@media (prefers-reduced-motion: no-preference) { .shop-grid li { animation: popIn .28s var(--ease-out); } }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* needs-attention example */
.bp { background: #F5F6F8; }
.bp-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid #E3E6EA; border-radius: 10px; margin: 16px 16px 14px; }
.bp-stats div { padding: 12px 14px; border-left: 1px solid #EFF1F3; }
.bp-stats div:first-child { border-left: 0; }
.bp-stats b { display: block; font-size: 1.35rem; line-height: 1.1; color: #111827; font-variant-numeric: tabular-nums; }
.bp-stats span { font-size: .76rem; color: #6B7280; }
.bp-stats .accent b { color: var(--blue); } .bp-stats .warn b { color: var(--amber); }
.bp-h { font-weight: 700; margin: 0 16px 8px; color: #111827; }
.bp-rows { background: #fff; border: 1px solid #E3E6EA; border-radius: 10px; margin: 0 16px; overflow: hidden; }
.bp-rows li + li { border-top: 1px solid #EFF1F3; }
.bp-rows button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 10px; align-items: center; text-align: left; background: #fff; border: 0; border-left: 3px solid transparent; padding: 10px 14px 10px 11px; cursor: pointer; min-height: 56px; }
.bp-rows button:hover { background: #F8FAFD; }
.bp-rows button[aria-pressed="true"] { background: #EAF0F9; border-left-color: var(--blue); }
.bp-rows button:focus-visible { outline-offset: -3px; }
.bp-rows b { display: block; font-weight: 600; color: #111827; } .bp-rows small { color: var(--blue-deep); font-size: .8rem; }
.bp-rows .chip { font-size: .74rem; padding: 3px 9px; }
.bp-rows .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bp-next { margin: 12px 16px 16px; background: #fff; border: 1px solid #B9CCE8; border-radius: 10px; padding: 11px 14px; font-size: .88rem; color: #374151; min-height: 4.6em; }
.bp-next b { display: block; font-size: .78rem; color: #1E3F73; }

/* AI example */
.qa { padding-top: 18px; }
.qa > * { margin-left: 18px; margin-right: 18px; }
.qa > figcaption { margin: 16px 0 0; }
.qa-who { font-size: .8rem; color: #6B7280; margin-bottom: 2px; }
.qa .qa-q { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.35; color: #111827; margin-bottom: 14px; }
.qa .qa-a { background: #F3FAF5; border: 1px solid #CFE8D8; border-radius: 12px; padding: 14px 16px; }
.qa .qa-a .k { margin-top: 12px; color: var(--signal-ink); }
.qa-review { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--amber-soft); border: 1px solid #E9CD95; transition: background .3s, border-color .3s; }
.qa-review p { margin: 0; font-size: .88rem; color: #5F3A00; flex: 1 1 220px; }
.qa-review .btn { min-height: 40px; }
.qa.is-approved .qa-review { background: var(--green-soft); border-color: #A9D8BF; }
.qa.is-approved .qa-review p { color: #14553A; }

/* ---------- Deer Texas platform concept ---------- */
.section-work { padding-bottom: 72px; }
.dt { position: relative; color: #fff; margin: 0 0 72px; padding: 84px 0 0; overflow: hidden; scroll-margin-top: 72px;
  background: linear-gradient(180deg, #0A1024 0%, #111A40 36%, #2B2259 62%, #6B3555 78%, #C4623C 91%, #F0A23E 100%); }
.dt-sky { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; pointer-events: none; }
.dt-ridges { position: absolute; inset: auto 0 0 0; width: 100%; height: 170px; }
.dt-inner { position: relative; z-index: 1; padding-bottom: 150px; }
.dt-head { max-width: 760px; margin-bottom: 30px; }
.dt-label { display: inline-block; font-weight: 700; font-size: .9rem; color: #1B1505; background: var(--gold); border-radius: 999px; padding: 4px 14px; margin-bottom: 18px; }
.dt-head h3 { font-family: 'Archivo', var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -.022em; color: #fff; margin-bottom: 16px; }
.dt-head p:last-child { color: #D5DBF0; font-size: 1.1rem; max-width: 40em; }
.dt-moments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dt-moments button { min-height: 46px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.dt-moments button:hover { border-color: var(--gold); }
.dt-moments button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1B1505; }
.dt :focus-visible { outline-color: var(--gold); }
.dt-app :focus-visible { outline-color: var(--dt-flag); }
.dt-why { color: #F6E7B0; font-size: 1.02rem; margin-bottom: 20px; min-height: 1.6em; }
.dt-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0; background: #F7F5EF; color: #1A2140; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(3,6,20,.55); }
.dt-map-pane { padding: 20px; border-right: 1px solid #E4DFD2; background: #FCFBF8; }
.dt-results-pane { padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.dt-pane-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; min-height: 40px; }
.dt-pane-h, .dt-count { font-weight: 700; font-size: 1.02rem; margin: 0; color: #1A2140; }
.dt-count b { font-size: 1.5rem; font-family: 'Archivo', var(--font-display); font-stretch: 112%; margin-right: 4px; }
.dt-sample { font-size: .7rem; font-weight: 600; color: #5A6078; border: 1px solid #D6D0C2; border-radius: 4px; padding: 1px 6px; background: #fff; }
.dt-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dt-regions button { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; border: 1.5px solid #D6D0C2; background: #fff; font-size: .82rem; font-weight: 600; color: #1A2140; cursor: pointer; }
.dt-regions button i { width: 9px; height: 9px; border-radius: 50%; }
.dt-regions button b { font-weight: 500; color: #5A6078; }
.dt-regions button:hover { border-color: var(--dt-flag); }
.dt-regions button[aria-pressed="true"] { background: var(--dt-flag); border-color: var(--dt-flag); color: #fff; }
.dt-regions button[aria-pressed="true"] b { color: #D5DBF0; }
.dt-map { background: #F1EEE5; border-radius: 12px; padding: 10px; }
.dt-map svg { width: 100%; height: auto; display: block; }
.dt-map-fallback { margin: 0; padding: 24px; color: #5A6078; font-size: .95rem; }
.dt-counties path { stroke: #FCFBF8; stroke-width: 1; transition: fill .28s, opacity .28s; }
.dt-counties .c0 { fill: #E4DFD0; }
.dt-counties .c1 { fill: #F1D27A; cursor: pointer; }
.dt-counties .c2 { fill: #E0A030; cursor: pointer; }
.dt-counties .c3 { fill: #A85A1A; cursor: pointer; }
.dt-counties .c0 { cursor: pointer; }
.dt-counties path:hover { stroke: #1A2140; stroke-width: 2; }
.dt-counties path.dim { opacity: .32; }
.dt-counties path.lit { fill: #7A5EA8; }
.dt-counties path.sel { fill: var(--dt-flag); stroke: #1A2140; stroke-width: 2.5; opacity: 1; }
.dt-counties path:focus-visible { outline: none; stroke: var(--dt-flag); stroke-width: 4; }
.dt-outline { fill: none; stroke: #1A2140; stroke-width: 1.6; pointer-events: none; }
.dt-map-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dt-legend { font-size: .78rem; color: #5A6078; margin: 0; display: flex; align-items: center; gap: 5px; }
.dt-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.dt-legend .l0 { background: #E4DFD0; margin-left: 0; } .dt-legend .l1 { background: #F1D27A; } .dt-legend .l2 { background: #E0A030; } .dt-legend .l3 { background: #A85A1A; }
.dt-select select { min-height: 42px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid #B9B3A3; background: #fff; font: inherit; font-size: .9rem; color: #1A2140; max-width: 100%; }
.dt-save { min-height: 40px; padding: 6px 14px; border-radius: 8px; border: 1.5px solid #B9B3A3; background: #fff; font-weight: 600; font-size: .88rem; color: #1A2140; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.dt-save:hover { border-color: var(--dt-flag); }
.dt-save[aria-pressed="true"] { background: #FBF1CC; border-color: #C99A12; color: #5B4300; }
.dt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; min-height: 372px; }
.dt-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dt-cards.n1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dt-card { position: relative; background: #fff; border: 1px solid #E4DFD2; border-radius: 12px; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .dt-card { animation: popIn .32s var(--ease-out); } }
.dt-photo { position: relative; height: 92px; background: linear-gradient(180deg, #2B2259 0%, #8A4660 55%, #E08A45 100%); overflow: hidden; }
.dt-photo .sun { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #FFE3A1; left: 62%; top: 34%; box-shadow: 0 0 24px 8px rgba(255,214,140,.5); }
.dt-photo svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 56px; }
.dt-photo path:first-child { fill: rgba(28,22,58,.6); } .dt-photo path:last-child { fill: #17132F; }
.dt-photo .dt-sample { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.9); border: 0; }
.t-brush-country .dt-photo { background: linear-gradient(180deg, #3A2A5A 0%, #B5553D 60%, #F0A23E 100%); }
.t-prairies .dt-photo { background: linear-gradient(180deg, #23408C 0%, #6E7FC0 55%, #F2C98A 100%); }
.t-piney-woods .dt-photo { background: linear-gradient(180deg, #12403A 0%, #3F8A72 60%, #E9D9A0 100%); }
.t-big-bend .dt-photo { background: linear-gradient(180deg, #2A1B4D 0%, #A33F3F 58%, #F4B55A 100%); }
.t-panhandle .dt-photo { background: linear-gradient(180deg, #1F2F6B 0%, #C78A0A 78%, #F6D77A 100%); }
.t-coastal-bend .dt-photo { background: linear-gradient(180deg, #1B4F72 0%, #5FA8C4 60%, #F3E2B8 100%); }
.dt-fav { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.dt-fav svg { width: 20px; height: 20px; fill: none; stroke: #1A2140; stroke-width: 1.8; transition: fill .2s, stroke .2s; }
.dt-fav[aria-pressed="true"] svg { fill: #C23A2B; stroke: #C23A2B; }
.dt-fav:active { transform: scale(.9); }
.dt-card h4 { font-size: 1rem; margin: 10px 12px 1px; color: #1A2140; letter-spacing: -.01em; }
.dt-where { font-size: .78rem; color: #5A6078; margin: 0 12px 8px; }
.dt-card dl { margin: 0; padding: 0 12px 12px; display: grid; gap: 0; font-size: .8rem; }
.dt-card dl div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 4px 0; border-top: 1px solid #F0ECE2; }
.dt-card dt { color: #5A6078; } .dt-card dd { margin: 0; color: #1A2140; font-weight: 500; }
.hyp { font-size: .66rem; font-weight: 600; color: #5A6078; border: 1px solid #D6D0C2; border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.dt-more-n { grid-column: 1 / -1; font-size: .88rem; color: #5A6078; margin: 2px 0 0; }
.dt-saved { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: #FBF1CC; color: #5B4300; font-size: .88rem; }
.dt-saved:empty { display: none; }
.dt-saved b { margin-right: 6px; }
.dt-reset { align-self: flex-start; margin-top: auto; padding: 12px 0 0; background: none; border: 0; color: #1E3FA6; font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.dt-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 32px; flex-wrap: wrap; margin-top: 26px; }
.dt-more { flex: 1 1 520px; }
.dt-more summary { cursor: pointer; font-weight: 600; color: #fff; padding: 12px 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.5); }
.dt-more-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 10px; }
.dt-more figure { margin: 0; }
.dt-more img { border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: #fff; }
.dt-more figcaption { font-size: .88rem; color: #D5DBF0; margin-top: 8px; }
.dt-more figcaption strong { color: #fff; }
.dt-cta { margin: 0; }

/* ---------- Compact project stories ---------- */
.case { border: 0; background: transparent; border-radius: 0; margin-bottom: 0; padding: 56px 0; border-top: 1px solid var(--line); overflow: visible; }
.case-split { padding: 0; align-items: center; gap: 56px; }
.case .app { box-shadow: 0 20px 50px rgba(4,10,28,.4); padding: 18px 18px 0; }
.case .app > figcaption { margin: 16px -18px 0; }
.case-tps .ship-steps li.on { border-color: var(--tps-pink); }
.case-tps .story dt { color: var(--tps-pink); }
.more-work { border-top: 1px solid var(--line); padding-top: 48px; }
.more-work h3 { margin-bottom: 20px; }
.more-work ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.more-work a { display: block; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: #fff; transition: border-color .18s, box-shadow .18s; }
.more-work a:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.more-work b { display: block; font-family: var(--font-display); color: var(--navy); font-size: 1.05rem; margin-bottom: 6px; }
.more-work span { color: var(--text-2); font-size: .92rem; }

/* ---------- Working alongside (navy) ---------- */
.section-navy { background: radial-gradient(700px 480px at 100% 0%, rgba(124,227,139,.16), transparent 60%), var(--ink-navy); color: #D9E2F4; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy :focus-visible { outline-color: var(--signal); }
.along { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
.along h2 { margin-bottom: 20px; }
.along p { max-width: 36em; }
.tech { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.18); }
.tech summary { cursor: pointer; font-weight: 600; color: var(--signal); padding: 14px 0; }
.tech p { color: #C4D0E8; font-size: .96rem; }
.section-navy .steps { grid-template-columns: 1fr; gap: 0; }
.section-navy .steps li { border-top: 1px solid rgba(255,255,255,.18); padding: 16px 0 16px 52px; position: relative; }
.section-navy .steps li::before { position: absolute; left: 0; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(124,227,139,.14); color: var(--signal); display: grid; place-items: center; margin: 0; }
.section-navy .steps p { color: #C4D0E8; }

/* ---------- Ownership ---------- */
.own { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: start; }
.own-main h2 { margin-bottom: 18px; }
.own-list { margin: 26px 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.own-list li { padding: 14px 0 14px 30px; border-top: 1px solid var(--line); position: relative; color: var(--text-2); }
.own-list li::before { content: "\2713"; position: absolute; left: 0; top: 14px; color: var(--signal-ink); font-weight: 800; }
.own-list b { color: var(--navy); }
.own-side { background: var(--bg-tint); border-radius: var(--radius-lg); padding: 32px; }
.own-side h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 12px; }
.own-side > p { color: var(--text-2); }
.own-side .joe { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line-strong); background: none; border-radius: 0; display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.own-side .joe img { border-radius: 50%; max-width: none; width: 84px; }
.own-side .joe p { font-size: .93rem; color: var(--text-2); margin: 0; }
.own-side .joe b { color: var(--navy); }

/* ---------- Contact v2 ---------- */
.section-contact { background: radial-gradient(640px 420px at 0% 0%, rgba(55,102,174,.16), transparent 60%), radial-gradient(520px 380px at 100% 100%, rgba(124,227,139,.20), transparent 60%), var(--bg-pale); }
.call-card { display: inline-grid; gap: 2px; margin-top: 26px; padding: 16px 22px; border-radius: 14px; background: var(--ink-navy); color: #C4D0E8; text-decoration: none; min-width: 240px; }
.call-card b { font-family: var(--font-display); font-size: 1.6rem; color: #fff; letter-spacing: -.01em; }
.call-card:hover { background: #17244A; color: #fff; }
.contact-direct { margin-top: 22px; }
.fit { margin-top: 22px; padding-left: 14px; border-left: 3px solid var(--blue); color: var(--text-2); font-size: .98rem; max-width: 30em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pick input[type="radio"] + span::before { border-radius: 50%; }
.pick input[type="radio"]:checked + span::before { content: ""; background: radial-gradient(circle, var(--blue-deep) 0 4px, #fff 5px); }
.contact-form .field textarea { min-height: 110px; }
.form-status:focus { outline: none; }

/* ---------- Responsive v2 ---------- */
@media (max-width: 1100px) {
  .js .explorer { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .js .explorer-nav { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explorer-nav [role="tab"] { border-left: 1.5px solid var(--line-strong); border-top: 4px solid var(--line-strong); border-radius: 0 0 12px 12px; padding: 12px 14px; background: #fff; }
  .explorer-nav [role="tab"][aria-selected="true"] { border-top-color: var(--blue-deep); }
  .explorer-nav [data-accent="pink"][aria-selected="true"] { border-top-color: var(--tps-pink); }
  .explorer-nav [data-accent="green"][aria-selected="true"] { border-top-color: #2FA75A; }
  .explorer-nav .svc-d { display: none; }
  .svc-t { font-size: 1rem; }
  .more-work ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hero-grid, .along, .own { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dt-app { grid-template-columns: minmax(0, 1fr); }
  .dt-map-pane { border-right: 0; border-bottom: 1px solid #E4DFD2; }
  .dt-map { max-width: 520px; margin: 0 auto; }
  .dt-cards { min-height: 0; }
  .dt-more-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .header-call { font-size: .95rem; }
  .stage { padding: 14px; border-radius: 18px; margin: 0 -8px; }
  .app-frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-side { display: none; }
  .lead-cols { grid-template-columns: minmax(0, 1fr); }
  .lead-detail { min-height: 300px; }
  .js .explorer-nav { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .explorer-nav [role="tab"] { border-top-width: 1.5px; border-left: 4px solid var(--line-strong); border-radius: 0 10px 10px 0; min-height: 48px; }
  .explorer-nav [role="tab"][aria-selected="true"] { border-left-color: var(--blue-deep); border-top-color: var(--line); }
  .explorer-nav [data-accent="pink"][aria-selected="true"] { border-left-color: var(--tps-pink); border-top-color: var(--line); }
  .explorer-nav [data-accent="green"][aria-selected="true"] { border-left-color: #2FA75A; border-top-color: var(--line); }
  .svc-panel .stage { min-height: 0; }
  .svc-explain { grid-template-columns: 1fr; gap: 16px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .bp-stats { grid-template-columns: repeat(2, 1fr); }
  .bp-stats div:nth-child(3) { border-left: 0; } .bp-stats div:nth-child(n+3) { border-top: 1px solid #EFF1F3; }
  .bp-rows button { grid-template-columns: minmax(0, 1fr) auto; }
  .bp-rows .amt { grid-column: 1 / -1; text-align: left; }
  .dt { padding-top: 56px; margin-bottom: 40px; }
  .dt-inner { padding-bottom: 120px; }
  .dt-map-pane, .dt-results-pane { padding: 14px; }
  .dt-cards, .dt-cards.n3, .dt-cards.n1 { grid-template-columns: minmax(0, 1fr); }
  .dt-moments button { flex: 1 1 auto; }
  .case { padding: 40px 0; }
  .more-work ul, .own-list { grid-template-columns: 1fr; }
  .own-side { padding: 22px 18px; }
  .call-card { display: grid; }
}

/* v2 polish after visual critique */
.hero-grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; }
.stage-hero { padding: 32px; }
.app-frame { grid-template-columns: 116px minmax(0, 1fr); }
.lead-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.lead-list button { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 10px 12px 11px 10px; }
.lead-list .chip { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 5px; }
.lead-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 0; border-top: 1px solid #EFF1F3; border-bottom: 1px solid #EFF1F3; }
.ld-facts div { display: block; }
.ld-facts dt { font-size: .74rem; }
.ld-facts dd { font-size: .84rem; font-weight: 500; }
.ld-next .btn { width: auto; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .stage-hero { padding: 14px; } .ld-facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1101px) { .js .svc-panel .stage { height: 520px; } .js .svc-explain { min-height: 190px; } }
@media (min-width: 701px) and (max-width: 1100px) { .js .svc-panel .stage { height: 540px; } .js .svc-explain { min-height: 200px; } }
.brand { flex: none; }
@media (max-width: 700px) {
  .app-frame { grid-template-columns: minmax(0, 1fr); }
  .lead-cols { grid-template-columns: minmax(0, 1fr); }
  .lead-list button { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 52px; }
  .lead-list .chip { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .lead-due { grid-column: 1 / -1; }
  .lead-detail { min-height: 286px; }
  .header-inner { gap: 10px; min-height: 64px; }
  .header-call { font-size: .9rem; padding: 10px 0; }
  .nav-toggle { padding: 8px 10px; }
  .brand img { height: 28px; }
}
@media (max-width: 380px) { .nav-toggle span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .nav-toggle { min-width: 44px; justify-content: center; } }

/* ---------- v3: Just Like Vegas, form states, case-study pages ---------- */
.form-status.is-fail { color: #A12A1E; background: #FDECEA; border: 1px solid #F0B9B2; border-radius: 10px; padding: 12px 14px; }
.form-status.is-ok { color: #14553A; background: var(--green-soft); border: 1px solid #A9D8BF; border-radius: 10px; padding: 14px 16px; font-size: 1.05rem; }
.stage-jlv { background: radial-gradient(520px 380px at 95% 0%, rgba(190,40,190,.55), transparent 62%), radial-gradient(520px 420px at 0% 100%, rgba(0,102,174,.5), transparent 65%), #0B0710; }
.case-jlv .story dt { color: #8C008B; }
.case-link { margin-top: 18px; font-weight: 600; }
.case .app.jlv { background: #12101A; color: #EDE9F5; padding: 18px 18px 0; }
.jlv-ev { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #fff; margin: 0; }
.jlv-sub { font-size: .82rem; color: #B9B1CC; margin: 0 0 14px; }
.jlv-seg { padding: 0; margin-bottom: 10px; }
.jlv-seg button { background: transparent; border-color: #4A3F63; color: #EDE9F5; min-height: 42px; }
.jlv-seg button:hover { border-color: #FFD700; }
.jlv-seg button[aria-pressed="true"] { background: #8C008B; border-color: #C24BC1; color: #fff; }
.jlv-seg button[data-pkg="B"][aria-pressed="true"] { background: #0066AE; border-color: #4DA3E0; }
.jlv-seg button[data-pkg="C"][aria-pressed="true"] { background: #FFD700; border-color: #FFD700; color: #1A1500; }
.jlv-inc { font-size: .88rem; color: #CFC8E0; margin: 0 0 10px; min-height: 2.8em; }
.jlv-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9rem; cursor: pointer; }
.jlv-check input { width: 20px; height: 20px; accent-color: #C24BC1; }
.jlv-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.jlv-pay li { border: 1px solid #3A3150; border-radius: 10px; padding: 10px 12px; display: grid; gap: 1px; transition: border-color .3s, background .3s; }
.jlv-pay span { font-size: .76rem; color: #B9B1CC; } .jlv-pay b { font-size: 1.2rem; color: #fff; font-variant-numeric: tabular-nums; } .jlv-pay i { font-style: normal; font-size: .78rem; color: #B9B1CC; }
.jlv-pay li.due { border-color: #FFD700; } .jlv-pay li.due i { color: #FFD700; }
.jlv-pay li.done { background: rgba(124,227,139,.1); border-color: #3E8F55; } .jlv-pay li.done i { color: var(--signal); }
.jlv-panel { border-radius: 10px; padding: 12px 14px; background: #2A2410; border: 1px solid #8A7400; min-height: 132px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.jlv-panel p { margin: 0; font-size: .9rem; color: #F3EBC2; } .jlv-panel b { display: block; color: #FFD700; font-size: 1rem; margin-bottom: 2px; }
.jlv-panel.ok { background: rgba(124,227,139,.1); border-color: #3E8F55; } .jlv-panel.ok p { color: #D7F5DE; } .jlv-panel.ok b { color: var(--signal); }
.jlv-btn { background: #FFD700; color: #1A1500; margin-top: auto; } .jlv-btn:hover { background: #FFE44D; color: #1A1500; }
.jlv-btn-ghost { background: transparent; color: #fff; border-color: #6B5F85; margin-top: auto; } .jlv-btn-ghost:hover { border-color: #fff; color: #fff; background: transparent; }
.case .app.jlv > figcaption { background: #1B1826; border-top-color: #3A3150; color: #B9B1CC; }
.jlv :focus-visible { outline-color: #FFD700; }
.more-work ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cs-hero { padding: 64px 0 48px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.cs-hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 20em; margin: 14px 0 18px; }
.cs-back { font-weight: 600; text-decoration: none; display: inline-block; padding: 10px 0; }
.cs-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 28px 0 0; }
.cs-facts div { min-width: 140px; } .cs-facts dt { font-size: .82rem; color: var(--text-3); } .cs-facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.cs-body { padding: 64px 0; }
.cs-body .wrap { max-width: 860px; }
.cs-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 56px 0 14px; }
.cs-body h2:first-child { margin-top: 0; }
.cs-body p, .cs-body li { color: var(--text-2); }
.cs-body ul.plain { list-style: disc; padding-left: 22px; display: grid; gap: 8px; }
.ba { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .98rem; }
.ba th, .ba td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--line); }
.ba thead th { font-size: .84rem; color: var(--text-3); border-top: 0; }
.ba td:last-child { color: var(--signal-ink); font-weight: 600; }
.ba td:first-child { color: var(--navy); font-weight: 600; width: 30%; }
.cs-note { margin-top: 40px; padding: 16px 18px; background: var(--bg-tint); border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; font-size: .95rem; }
.cs-cta { margin-top: 48px; padding: 32px; border-radius: var(--radius-lg); background: var(--ink-navy); color: #D9E2F4; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cs-cta p { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; max-width: 22em; }
@media (max-width: 1100px) { .more-work ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .more-work ul { grid-template-columns: 1fr; } .ba, .ba tbody, .ba tr, .ba td { display: block; width: 100% !important; } .ba thead { display: none; } .ba td { border: 0; padding: 2px 0; } .ba tr { border-top: 1px solid var(--line); padding: 12px 0; } .cs-cta { padding: 22px; } }
.dt-tip { display: none; font-size: .84rem; color: #5A6078; margin: 10px 0 0; }
@media (max-width: 700px) { .dt-tip { display: block; } .dt-select, .dt-select select { width: 100%; } .dt-map { padding: 4px; } }

/* ================= v4: calmer shapes, richer compositions ================= */
.btn { border-radius: 8px; }
.tag { border-radius: 4px; text-transform: none; letter-spacing: 0; font-size: .78rem; padding: 2px 8px; }
.text-link { font-weight: 600; display: inline-block; padding: 10px 0; }
.links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px; }
.link-btn { background: none; border: 0; color: var(--blue-deep); font-weight: 600; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 36px; padding: 0 4px; }
.cta-line { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.cta-line p { margin: 0; }
/* hero app v4 */
.app-brand { font-size: .78rem; }
.app-mark { background: #3D4652; }
.app-top { align-items: center; }
.app-top .link-btn { margin-left: auto; }
.lead-filters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.lead-filters button { min-height: 32px; padding: 3px 10px; border-radius: 6px; border: 1px solid #D5DAE1; background: #fff; font-size: .8rem; font-weight: 600; color: #374151; cursor: pointer; }
.lead-filters button:hover { border-color: var(--blue); }
.lead-filters button[aria-pressed="true"] { background: #1E3F73; border-color: #1E3F73; color: #fff; }
.lead-list { height: 352px; overflow-y: auto; }
.lead-list button { min-height: 58px; }
.lead-empty { padding: 18px 14px; font-size: .86rem; color: #6B7280; }
.lead-detail { min-height: 352px; height: 352px; overflow-y: auto; }
.ld-h, .vw-h { font-size: .76rem; font-weight: 700; color: #6B7280; margin: 0 0 4px; }
.ld-log { margin: 0 0 10px; font-size: .82rem; color: #374151; display: grid; gap: 3px; }
.ld-log li { padding-left: 12px; position: relative; }
.ld-log li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #9DB8E3; }
.ld-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-next p { margin-bottom: 8px; }
/* intro with illustration */
.intro-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; margin-bottom: 56px; }
.intro-split .section-head { margin: 0 0 0 auto; text-align: right; }
.intro-art svg { width: 100%; height: auto; display: block; }
/* feature compositions */
.feat { padding: 72px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.feat h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.feat-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.feat-split > div > p { color: var(--text-2); }
.site-shot { margin: 0; }
.site-shot img { width: 100%; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.site-shot figcaption { font-size: .86rem; color: var(--text-3); margin-top: 10px; }
.feat-tps .stage { margin-top: 40px; padding: 36px; }
.feat-tps .story dt { color: var(--tps-pink); }
.vendor { max-width: 860px; margin: 0 auto; }
.vw-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 4px; }
.vw-top .shop-name span { font-family: var(--font-body); font-size: .8rem; color: #7A6470; margin-left: 8px; }
.vw-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid #F0E3E9; overflow-x: auto; }
.vw-tabs [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; min-height: 44px; font-weight: 600; font-size: .92rem; color: #4A2B3A; cursor: pointer; white-space: nowrap; }
.vw-tabs [role="tab"]:hover { color: var(--tps-pink); }
.vw-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--tps-pink); color: var(--tps-pink); }
.vw-tabs i { font-style: normal; font-size: .66rem; font-weight: 600; color: #7A6470; border: 1px solid #E5D3DC; border-radius: 3px; padding: 0 4px; margin-left: 6px; vertical-align: 2px; }
.vw-body { padding: 16px 18px; height: 318px; overflow-y: auto; }
.vw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.vw-stats div { border: 1px solid #F0E3E9; border-radius: 8px; padding: 10px 12px; }
.vw-stats b { display: block; font-size: 1.4rem; line-height: 1.15; color: #1F1A1C; } .vw-stats span { font-size: .76rem; color: #7A6470; }
.vw-list { border: 1px solid #F0E3E9; border-radius: 8px; overflow: hidden; }
.vw-list li + li { border-top: 1px solid #F6ECF1; }
.vw-list button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: #fff; border: 0; border-left: 3px solid transparent; padding: 9px 12px 9px 9px; min-height: 52px; cursor: pointer; }
.vw-list button:hover { background: #FFF7FA; }
.vw-list button[aria-pressed="true"] { background: #FFF0F6; border-left-color: var(--tps-pink); }
.vw-list button:focus-visible { outline-offset: -3px; outline-color: var(--tps-pink); }
.vw-list b { display: block; font-weight: 600; color: #1F1A1C; font-size: .9rem; } .vw-list small { color: #7A6470; font-size: .8rem; }
.vw-list .chip { font-size: .72rem; padding: 2px 8px; }
.vw-empty { padding: 16px 12px; font-size: .88rem; color: #7A6470; }
.vw-prod button { justify-content: flex-start; } .vw-prod .sw { width: 40px; height: 40px; border-radius: 6px; flex: none; } .vw-prod .amt { margin-left: auto; font-weight: 600; }
.vw-note { margin: 12px 0 0; font-size: .88rem; color: #4A2B3A; background: #FFF7FA; border-radius: 8px; padding: 10px 12px; }
.vw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.vw-detail { border: 1px solid #F0E3E9; border-radius: 8px; padding: 14px; }
.vw-detail .vw-h { font-size: .95rem; color: #1F1A1C; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.vw-detail dl { margin: 0 0 12px; display: grid; gap: 5px; font-size: .86rem; } .vw-detail dl div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; } .vw-detail dt { color: #7A6470; } .vw-detail dd { margin: 0; }
.vw-detail .ship-steps li.on { border-color: var(--tps-pink); }
.vw-detail .ship-help { min-height: 3.4em; margin-bottom: 0; }
/* JLV composition */
.jlv-visual { position: relative; padding: 0 0 120px 0; }
.jlv-visual .site-shot img { border-color: #2A2238; }
.jlv-visual .stage { position: absolute; right: -12px; bottom: 0; width: min(360px, 78%); padding: 12px; border-radius: 16px; box-shadow: 0 24px 60px rgba(4,10,28,.4); }
.case .app.jlv, .app.jlv { background: #12101A; color: #EDE9F5; padding: 14px 14px 0; }
.app.jlv > figcaption { background: #1B1826; border-top-color: #3A3150; color: #B9B1CC; margin: 12px -14px 0; }
.jlv-panel { min-height: 118px; }
.duties { margin: 20px 0 0; display: grid; gap: 0; }
.duties li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: .96rem; color: var(--text-2); }
.duties b { color: #8C008B; font-family: var(--font-display); }
/* SOHT flow */
.flow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 22px 0 6px; counter-reset: f; }
.flow3 li { counter-increment: f; padding: 14px 16px 14px 0; border-top: 3px solid #5BC4CE; margin-right: 6px; font-size: .92rem; color: var(--text-2); }
.flow3 li::before { content: counter(f); display: block; font-family: var(--font-display); font-weight: 800; color: #1E7F8A; }
.flow3 b { display: block; color: var(--navy); }
.feat-glam { background: #160A2E; color: #E4DAF7; border-radius: 20px; padding: 44px; border: 0; margin: 24px 0 72px; }
.feat-glam h3 { color: #fff; } .feat-glam .feat-split > div > p { color: #CFC2EC; }
.feat-glam a { color: #D9C2FF; } .feat-glam .site-shot img { border-color: #3B2A66; }
.feat-glam ul.dots { margin-top: 14px; display: grid; gap: 6px; color: #CFC2EC; list-style: disc; padding-left: 20px; }
.feat-glam :focus-visible { outline-color: #D9C2FF; }
/* collaboration diagram */
.collab { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.collab h2 { margin-bottom: 16px; } .collab p { color: var(--text-2); max-width: 34em; }
.trio { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trio::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; border-top: 2px dashed var(--line-strong); }
.trio li { position: relative; text-align: center; padding-top: 0; }
.trio .dot { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line-strong); position: relative; }
.trio .dot svg { width: 30px; height: 30px; stroke: var(--navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trio li.us .dot { background: var(--blue-deep); border-color: var(--blue-deep); } .trio li.us .dot svg { stroke: #fff; }
.trio b { display: block; font-family: var(--font-display); color: var(--navy); margin-bottom: 4px; }
.trio span { font-size: .9rem; color: var(--text-2); display: block; }
/* handoff */
.handoff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.handoff h2 { margin-bottom: 16px; } .handoff p { color: var(--text-2); max-width: 34em; }
.folder { position: relative; padding: 26px 0 0 0; }
.folder li { background: #fff; border: 1px solid var(--line-strong); border-radius: 6px 6px 0 0; border-bottom: 0; padding: 12px 18px 16px; margin-top: -6px; position: relative; box-shadow: 0 -2px 8px rgba(20,35,59,.04); display: grid; grid-template-columns: 190px 1fr; gap: 14px; font-size: .92rem; color: var(--text-2); }
.folder li:nth-child(1) { margin-left: 0; } .folder li:nth-child(2) { margin-left: 14px; } .folder li:nth-child(3) { margin-left: 28px; } .folder li:nth-child(4) { margin-left: 42px; } .folder li:nth-child(5) { margin-left: 56px; border-bottom: 1px solid var(--line-strong); border-radius: 6px; }
.folder b { color: var(--navy); font-family: var(--font-display); }
.folder::before { content: "Your handoff package"; position: absolute; left: 0; top: 0; font-size: .8rem; font-weight: 700; color: var(--blue-deep); }
.support-line { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.support-line b { display: block; font-family: var(--font-display); font-size: 1.12rem; color: var(--navy); margin-bottom: 6px; line-height: 1.3; }
/* contact v4 */
.section-contact { background-color: #F6F9FD; background-image: linear-gradient(rgba(55,102,174,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(55,102,174,.07) 1px, transparent 1px); background-size: 32px 32px; }
.phone-big { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -.02em; color: var(--navy); text-decoration: none; margin-top: 4px; }
.phone-big:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 6px; }
.contact-form { border-radius: 10px; box-shadow: var(--shadow-md); }
.field input, .field textarea, .field select { border-radius: 6px; border: 1px solid #8A97AB; }
.field select { width: 100%; min-height: 48px; padding: 10px 12px; background: #fff; font: inherit; color: inherit; }
.field select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.field label { font-size: .95rem; }
/* footer v4 */
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; width: 100%; }
.footer-cols h2 { font-size: .9rem; font-weight: 700; margin-bottom: 8px; letter-spacing: 0; }
.footer-cols ul a { display: inline-block; padding: 6px 0; font-weight: 500; }
/* service pages */
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 12px; }
.sv-grid > div { padding: 22px 0; border-top: 1px solid var(--line); }
.sv-grid h3 { font-size: 1.12rem; margin-bottom: 6px; }
.sv-band { background: var(--bg-tint); border-radius: 12px; padding: 28px 32px; margin: 40px 0 0; }
.sv-band h2 { margin-top: 0 !important; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 18px; }
.three-col > div { border-top: 3px solid var(--blue); padding-top: 14px; }
.three-col > div:nth-child(2) { border-color: var(--gold); } .three-col > div:nth-child(3) { border-color: #2FA75A; }
.three-col h3 { font-size: 1.05rem; margin-bottom: 6px; }
.video-fig { margin: 24px 0 0; } .video-fig video { width: 100%; border-radius: 10px; background: #0A1024; display: block; } .video-fig figcaption { font-size: .9rem; color: var(--text-3); margin-top: 10px; }
.cs-body .wrap.wide { max-width: 1000px; }
@media (min-width: 1101px) { .js .svc-explain { min-height: 150px; } }
@media (max-width: 1000px) {
  .intro-split, .feat-split, .collab, .handoff { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .intro-split .section-head { text-align: left; margin: 0; } .intro-art { order: 2; max-width: 520px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .lead-list { height: auto; max-height: 250px; } .lead-detail { height: auto; min-height: 0; }
  .feat { padding: 48px 0; } .feat-tps .stage { padding: 12px; margin: 28px -8px 0; }
  .vw-stats { grid-template-columns: 1fr 1fr; } .vw-cols { grid-template-columns: minmax(0, 1fr); } .vw-body { height: auto; min-height: 300px; }
  .jlv-visual { padding-bottom: 0; } .jlv-visual .stage { position: static; width: auto; margin: 14px 0 0; }
  .duties li { grid-template-columns: 1fr; gap: 2px; } .flow3 { grid-template-columns: 1fr; } .flow3 li { margin: 0; }
  .feat-glam { padding: 24px 18px; margin: 8px -8px 48px; border-radius: 14px; }
  .trio { grid-template-columns: 1fr; gap: 22px; } .trio::before { display: none; } .trio li { text-align: left; display: grid; grid-template-columns: 68px 1fr; gap: 0 16px; align-items: center; } .trio .dot { margin: 0; grid-row: 1 / span 2; }
  .folder li { grid-template-columns: 1fr; gap: 2px; margin-left: 0 !important; }
  .sv-grid, .three-col, .footer-cols { grid-template-columns: 1fr; } .sv-band { padding: 20px; }
}
@media (min-width: 1101px) { .js .svc-explain { min-height: 186px; } }
@media (min-width: 701px) and (max-width: 1100px) { .js .svc-explain { min-height: 230px; } }
@media (max-width: 1000px), (pointer: coarse) { .lead-filters button { min-height: 40px; padding: 6px 12px; } .link-btn { min-height: 44px; } }
@media (max-width: 700px) { .vw-tabs { padding: 0 6px; } .vw-tabs [role="tab"] { padding: 8px 7px; font-size: .84rem; text-align: left; } .vw-tabs i { display: block; margin: 2px 0 0; width: max-content; } .vw-top .shop-name span { display: block; margin: 0; } }
.glam-visual { position: relative; padding: 0 9% 7% 0; }
.glam-phone { position: absolute; right: 0; bottom: 0; width: 24%; height: auto; border-radius: 14px; border: 4px solid #0B0518; box-shadow: 0 18px 44px rgba(0,0,0,.55); }
@media (max-width: 700px) { .glam-visual { padding: 0 17% 12% 0; } .glam-phone { width: 31%; border-width: 3px; border-radius: 10px; } }

/* ================= v5: one-page launch, hero scene, tagline band, process ================= */
section[id], article[id] { scroll-margin-top: 84px; }
.btn-lg { min-height: 54px; padding: 14px 30px; font-size: 1.08rem; }
.hero-v5 { padding: 64px 0 72px; background: linear-gradient(180deg, #F4F7FC 0%, #fff 100%); }
.hero-v5 .hero-grid { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: 56px; align-items: center; }
.hero-v5 h1 { font-size: clamp(2.4rem, 4.4vw, 3.5rem); margin-bottom: 22px; }
.hero-v5 .lede { margin-bottom: 32px; max-width: 30em; }
.scene { position: relative; border-radius: 22px; padding: 44px 34px 58px 34px; background: radial-gradient(420px 320px at 100% 0%, rgba(124,227,139,.22), transparent 60%), linear-gradient(140deg, #1B4487 0%, #2F62B0 52%, #4F86D6 100%); display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: start; min-height: 520px; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22px; pointer-events: none; }
.scene-site, .scene-app, .scene-quote { position: relative; background: #fff; color: #111827; }
.scene-site { z-index: 3; margin: 46px -34px 0 0; border-radius: 10px; padding: 16px 16px 12px; box-shadow: 0 18px 44px rgba(6,20,50,.35); background: linear-gradient(180deg, #FFF8EC 0%, #fff 46%); }
.ss-brand { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .76rem; color: #5B3A12; margin: 0 0 12px; }
.ss-brand span { width: 14px; height: 14px; border-radius: 3px; background: #B5651D; }
.ss-h { font-family: Georgia, 'Times New Roman', serif; font-size: 1.22rem; line-height: 1.15; color: #2A1A08; margin: 0 0 14px; }
.ss-l { font-size: .76rem; font-weight: 600; color: #6B5A45; margin: 0 0 6px; }
.ss-opts { display: grid; gap: 6px; }
.ss-opts button { text-align: left; min-height: 40px; padding: 7px 10px; border-radius: 6px; border: 1.5px solid #E4D6BF; background: #fff; font-size: .86rem; font-weight: 600; color: #2A1A08; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.ss-opts button:hover { border-color: #B5651D; }
.ss-opts button[aria-pressed="true"] { background: #B5651D; border-color: #B5651D; color: #fff; }
.ss-cap, .scene-label { font-size: .74rem; }
.ss-cap { color: #8A7A63; margin: 12px 0 0; }
.scene-app { z-index: 2; border-radius: 12px; box-shadow: 0 28px 70px rgba(6,20,50,.42); overflow: hidden; }
.sa-bar { display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 56px; background: #12171C; color: #9AA4AE; font-size: .8rem; }
.sa-bar i { width: 9px; height: 9px; border-radius: 50%; background: #7CE38B; }
.sa-bar b { color: #fff; font-weight: 600; }
.sa-bar span { margin-left: auto; }
.sa-body { padding: 24px 26px 110px 56px; min-height: 392px; }
.sa-k { font-size: .8rem; color: #6B7280; margin: 0 0 4px; }
.sa-h { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; color: #111827; margin: 0 0 16px; }
.sa-fallback { color: #374151; }
.sa-cust { display: flex; gap: 32px; margin: 0 0 18px; }
.sa-cust dt { font-size: .74rem; color: #6B7280; } .sa-cust dd { margin: 0; font-weight: 600; font-size: .95rem; }
.sa-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 18px; }
.sa-steps li { font-size: .74rem; font-weight: 600; color: #9AA4AE; border-top: 4px solid #E3E6EA; padding-top: 6px; transition: border-color .35s, color .35s; }
.sa-steps li.past { border-color: #9DB8E3; color: #6B7280; } .sa-steps li.now { border-color: var(--blue); color: #1E3F73; }
.sa-next { max-width: 300px; }
.sa-next p { font-size: .9rem; color: #374151; margin: 0 0 10px; } .sa-next b { display: block; font-size: .76rem; color: #1E3F73; }
.scene-quote { z-index: 4; position: absolute; right: 18px; bottom: 34px; width: 248px; border-radius: 10px; padding: 14px 16px; box-shadow: 0 18px 44px rgba(6,20,50,.38); }
.sq-k { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; margin: 0 0 8px; }
.sq-k .chip { font-size: .68rem; padding: 2px 8px; }
.scene-quote ul { margin: 0; font-size: .8rem; color: #374151; }
.scene-quote li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid #EFF1F3; }
.sq-t { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 0; padding-top: 8px; border-top: 2px solid #111827; font-size: .78rem; color: #6B7280; }
.sq-t b { font-size: 1.1rem; color: #111827; font-variant-numeric: tabular-nums; }
.scene-label { position: absolute; left: 34px; bottom: 16px; margin: 0; color: #DCE8FB; z-index: 5; display: flex; align-items: center; gap: 10px; }
.scene-reset { background: none; border: 0; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; padding: 0 4px; }
.scene :focus-visible { outline-color: #F2C230; }
.scene-app :focus-visible, .scene-site :focus-visible { outline-color: var(--blue-deep); }
@media (prefers-reduced-motion: no-preference) { .scene-quote, .sa-body > * { animation: flashIn .4s var(--ease-out); } }
.tagband { position: relative; background: linear-gradient(100deg, #1B4487, #2F62B0 60%, #3D74C4); color: #fff; padding: 34px 0; overflow: hidden; }
.tagband svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tagband .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px 48px; align-items: center; }
.tagband-t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; margin: 0; color: #fff; }
.tagband-s { margin: 0; color: #DCE8FB; font-size: 1rem; }
.howline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.howline::before { content: ""; position: absolute; left: 24px; right: 12%; top: 23px; border-top: 2px solid var(--line-strong); }
.howline li { position: relative; }
.hn { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue-deep); color: #fff; font-family: var(--font-display); font-weight: 800; margin-bottom: 18px; box-shadow: 0 0 0 8px #fff; }
.howline li:last-child .hn { background: #1C7C54; }
.howline h3 { font-size: 1.12rem; margin-bottom: 8px; } .howline p { color: var(--text-2); font-size: .96rem; }
.site-footer .footer-inner { align-items: flex-end; }
@media (max-width: 1000px) { .hero-v5 .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .tagband .wrap { grid-template-columns: minmax(0, 1fr); } .howline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .howline::before { display: none; } }
@media (max-width: 700px) {
  .hero-v5 { padding: 40px 0 48px; }
  .scene { display: block; padding: 18px 14px 50px; margin: 0 -8px; min-height: 0; border-radius: 16px; }
  .scene-site { margin: 0 0 14px; } .ss-opts { grid-template-columns: repeat(3, 1fr); } .ss-opts button { text-align: center; padding: 6px 4px; font-size: .8rem; }
  .ss-cap { display: none; }
  .sa-bar { padding-left: 18px; } .sa-body { padding: 18px 18px 20px; min-height: 0; } .sa-next { max-width: none; }
  .scene-quote { position: relative; right: auto; bottom: auto; width: auto; margin-top: 14px; }
  .scene-label { left: 16px; bottom: 10px; }
  .tagband { padding: 26px 0; } .howline { grid-template-columns: 1fr; gap: 24px; }
  .howline li { display: grid; grid-template-columns: 48px 1fr; gap: 0 16px; } .hn { grid-row: 1 / span 2; margin: 0; box-shadow: none; }
}
@media (min-width: 701px) { .scene { padding-bottom: 150px; min-height: 0; } .sa-body { min-height: 0; padding-bottom: 100px; } .scene-quote { bottom: 44px; } .scene-label { bottom: 20px; } }

/* ================= v6: gradient tagline text, client logo strip, legacy anchors ================= */
.anchor-alias { display: block; height: 0; scroll-margin-top: 84px; }
.tagband-t { color: #fff; }
.tagband-s { color: #fff; text-shadow: 0 0 1px #16356E, 0 0 2px #16356E, 0 0 4px #16356E, 0 0 8px rgba(22,53,110,.85); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tagband-t { background: linear-gradient(90deg, #fff 0%, #fff 30%, #DDEBFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
@media (forced-colors: active) { .tagband-t { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; } }
.clients { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0 22px; }
.clients-head { margin-bottom: 8px; }
.clients h2 { font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin: 0; }
.clients-view { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
.clients-view.is-static { justify-content: center; }
.clients-view:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: -3px; }
.clients-row { list-style: none; margin: 0; padding: 0 0 0 64px; display: flex; flex: none; align-items: center; gap: 64px; }
.clients-row:last-child { padding-right: 64px; }
.cl { flex: none; display: grid; place-items: center; height: 136px; }
.cl img { display: block; width: calc(var(--w) * var(--k, 1) * 1px); max-width: none; height: auto; filter: grayscale(1) brightness(.78); opacity: .82; transition: filter .3s ease, opacity .3s ease; }
.cl-deepen img { filter: grayscale(1) brightness(.62); opacity: .85; }
.cl-solid img { filter: grayscale(1); opacity: .88; }
.cl:hover img, .cl a:focus-visible img { filter: none; opacity: 1; }
.cl a { display: grid; place-items: center; border-radius: 6px; }
@media (hover: none) { .cl img, .cl-deepen img, .cl-solid img { filter: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl img { transition: none; } }
@media (max-width: 700px) { .clients { padding: 20px 0 16px; } .clients-row { gap: 44px; padding-left: 28px; --k: .86; } .clients-row:last-child { padding-right: 28px; } .cl { height: 118px; } }
/* ================= v7: simpler contact section ================= */
.contact-lines { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; }
.contact-line { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.01em; color: var(--navy); text-decoration: none; }
.contact-line svg { flex: none; width: 20px; height: 20px; color: var(--blue-deep); }
.contact-line span { overflow-wrap: anywhere; }
.contact-line:hover span { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 5px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ts-field { min-height: 65px; }
.ts-field #ts-widget:focus { outline: none; }
.contact-form .btn[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 700px) { .contact-line { font-size: 1.08rem; } }
/* ================= v8: industry selector, handoff viewer, hand-scrolled logo strip, footer, heading gradient ================= */
/* Logo strip: hand-scrolled, with soft edges that show there is more to see */
.clients-view { scrollbar-width: none; --fade-l: 56px; --fade-r: 56px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.clients-view::-webkit-scrollbar { display: none; }
.clients-view.at-start { --fade-l: 0px; } .clients-view.at-end { --fade-r: 0px; }
.clients-view.is-static { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 700px) { .clients-view { --fade-l: 28px; --fade-r: 28px; } }

/* Hero: industry selector and quieter note row */
.scene { container-type: inline-size; }
.scene-foot { position: absolute; left: 34px; right: 34px; bottom: 14px; z-index: 5; display: grid; gap: 4px; pointer-events: none; }
.scene-foot > * { pointer-events: auto; }
.scene-ind { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ind-l { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #DCE8FB; }
.ind-opts { display: flex; gap: 6px; }
.ind-opts button { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; }
.ind-opts button:hover { border-color: #fff; }
.ind-opts button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #1B3A6F; }
.ind-select { display: none; min-height: 40px; padding: 6px 34px 6px 12px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.6); background-color: #fff; color: #14233B; font: inherit; font-size: .9rem; font-weight: 600; }
.scene-foot .scene-label { position: static; margin: 0; font-size: .7rem; color: #C5D6F2; min-height: 30px; }
.scene-foot .scene-reset { font-size: .7rem; min-height: 30px; }
@container (max-width: 575px) { .ind-opts { display: none; } .ind-select { display: inline-block; } }
@media (min-width: 701px) { .scene { padding-bottom: 196px; } .scene-quote { bottom: 92px; } .sa-next { min-height: 128px; } .ss-h { min-height: 2.3em; } }
.scene[data-industry="dental"] .scene-site { background: linear-gradient(180deg, #E9F7F6 0%, #fff 46%); }
.scene[data-industry="dental"] .ss-brand { color: #0F4F4C; } .scene[data-industry="dental"] .ss-brand span { background: #1A8C86; } .scene[data-industry="dental"] .ss-h { color: #0B3331; } .scene[data-industry="dental"] .ss-l, .scene[data-industry="dental"] .ss-cap { color: #47625F; }
.scene[data-industry="dental"] .ss-opts button { border-color: #BFE2DF; color: #0B3331; } .scene[data-industry="dental"] .ss-opts button:hover { border-color: #15756F; } .scene[data-industry="dental"] .ss-opts button[aria-pressed="true"] { background: #15756F; border-color: #15756F; color: #fff; }
.scene[data-industry="pro"] .scene-site { background: linear-gradient(180deg, #EEF1F6 0%, #fff 46%); }
.scene[data-industry="pro"] .ss-brand { color: #26324A; } .scene[data-industry="pro"] .ss-brand span { background: #33425F; } .scene[data-industry="pro"] .ss-h { color: #141C2E; } .scene[data-industry="pro"] .ss-l, .scene[data-industry="pro"] .ss-cap { color: #55607A; }
.scene[data-industry="pro"] .ss-opts button { border-color: #CFD6E4; color: #141C2E; } .scene[data-industry="pro"] .ss-opts button:hover { border-color: #33425F; } .scene[data-industry="pro"] .ss-opts button[aria-pressed="true"] { background: #33425F; border-color: #33425F; color: #fff; }
.scene[data-industry="events"] .scene-site { background: linear-gradient(180deg, #F8EEF6 0%, #fff 46%); }
.scene[data-industry="events"] .ss-brand { color: #5A1F4F; } .scene[data-industry="events"] .ss-brand span { background: #8A2F7A; } .scene[data-industry="events"] .ss-h { color: #33102C; } .scene[data-industry="events"] .ss-l, .scene[data-industry="events"] .ss-cap { color: #6B5066; }
.scene[data-industry="events"] .ss-opts button { border-color: #E6CFE1; color: #33102C; } .scene[data-industry="events"] .ss-opts button:hover { border-color: #8A2F7A; } .scene[data-industry="events"] .ss-opts button[aria-pressed="true"] { background: #8A2F7A; border-color: #8A2F7A; color: #fff; }
.ss-brand b { font-weight: 700; }
@media (max-width: 700px) {
  .scene { padding-bottom: 14px; }
  .scene-foot { position: static; margin-top: 14px; padding: 0 2px; gap: 2px; }
  .ind-opts { display: none; } .ind-select { display: inline-block; flex: 1 1 160px; }
  .ss-opts button { min-height: 52px; line-height: 1.15; }
  .ss-h { min-height: 1.2em; } .sa-h { min-height: 2.3em; } .sa-next { min-height: 132px; }
}

/* Handoff package viewer */
.docs { background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-md); overflow: hidden; min-width: 0; }
.docs-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #2A1A08; color: #E9DCC8; font-size: .82rem; }
.docs-bar b { color: #fff; font-family: var(--font-display); font-size: .92rem; } .docs-bar span:last-child { margin-left: auto; }
.docs-mark { width: 14px; height: 14px; border-radius: 3px; background: #D98A3D; }
.docs-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #FBF7F0; }
.docs-tabs [role="tab"] { min-height: 46px; padding: 8px 6px; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: .86rem; font-weight: 600; color: #5B4A33; cursor: pointer; line-height: 1.2; }
.docs-tabs [role="tab"]:hover { color: #2A1A08; }
.docs-tabs [role="tab"][aria-selected="true"] { color: #2A1A08; border-bottom-color: #B5651D; background: #fff; }
.docs-tabs [role="tab"]:focus-visible, .docs-panel:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: -3px; }
.docs-panel { padding: 22px 24px 20px; height: 476px; overflow-y: auto; }
.docs-panel[hidden] { display: none; }
.docs:not(.is-ready) .docs-tabs { display: none; } .docs:not(.is-ready) .docs-panel { display: block; height: auto; border-top: 1px solid var(--line); }
.handoff .docs p { max-width: none; }
.docs-k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9A5A1E; margin: 0 0 6px; }
.docs h3 { font-size: 1.3rem; margin: 0 0 8px; color: #2A1A08; }
.docs-intro { font-size: .92rem; color: var(--text-2); margin: 0 0 14px; }
.guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: g; display: grid; gap: 6px; }
.guide-steps li { counter-increment: g; position: relative; padding: 9px 12px 9px 46px; border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; color: var(--text-2); line-height: 1.4; }
.guide-steps li::before { content: counter(g); position: absolute; left: 12px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: #F1E6D6; color: #6B4A1E; }
.guide-steps li b { color: var(--navy); }
.guide-steps li.is-now { border-color: #B5651D; background: #FFF8EC; } .guide-steps li.is-now::before { background: #B5651D; color: #fff; }
.guide-steps li.is-done::before { content: "\2713"; background: #DDF1E6; color: #14553A; }
.guide-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: .84rem; color: var(--text-2); }
.docs-btn { min-height: 40px; min-width: 84px; padding: 6px 14px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.docs-btn[disabled] { opacity: .45; cursor: default; }
.docs-btn-solid { background: #B5651D; border-color: #B5651D; color: #fff; } .docs-btn-solid:hover { background: #9A5417; }
.role-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.role-pick button, .sysmap button { min-height: 40px; padding: 6px 14px; border-radius: 8px; border: 1.5px solid #E4D6BF; background: #fff; color: #2A1A08; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.role-pick button[aria-pressed="true"], .sysmap button[aria-pressed="true"] { background: #2A1A08; border-color: #2A1A08; color: #fff; }
.perm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.perm-list li { border-bottom: 1px solid var(--line); }
.perm-list label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .92rem; color: var(--navy); cursor: pointer; }
.perm-list input { width: 20px; height: 20px; accent-color: #B5651D; flex: none; }
.docs-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 0; font-size: .84rem; color: var(--text-2); }
.docs-foot .link-btn { min-height: 40px; }
.sysmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 16px 0 18px; }
.sysmap button { position: relative; padding: 10px 6px; min-height: 64px; line-height: 1.2; }
.sysmap button:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 4px); top: 50%; width: 18px; height: 2px; background: #B5651D; transform: translateY(-50%); }
.sysmap button:not(:last-child)::before { content: ""; position: absolute; left: calc(100% + 16px); top: 50%; width: 7px; height: 7px; border-top: 2px solid #B5651D; border-right: 2px solid #B5651D; transform: translateY(-50%) rotate(45deg); }
.map-note { border-left: 3px solid #B5651D; background: #FFF8EC; border-radius: 0 8px 8px 0; padding: 12px 16px; min-height: 104px; }
.map-note b { color: #2A1A08; font-family: var(--font-display); } .map-note p { margin: 4px 0 0; font-size: .92rem; color: var(--text-2); }
.tech-list details { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.tech-list summary { min-height: 44px; padding: 10px 14px; font-weight: 600; font-size: .92rem; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.tech-list summary::-webkit-details-marker { display: none; }
.tech-list summary::after { content: "+"; font-size: 1.2rem; color: #9A5A1E; } .tech-list details[open] summary::after { content: "\2212"; }
.tech-list summary:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: -2px; border-radius: 8px; }
.tech-list details p { margin: 0; padding: 0 14px 12px; font-size: .88rem; color: var(--text-2); }
.tech-list pre { margin: 0 14px 14px; padding: 10px 12px; background: #1F1710; color: #F1E6D6; border-radius: 6px; font-size: .74rem; line-height: 1.5; overflow-x: auto; }
@media (max-width: 700px) {
  .docs-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-tabs [role="tab"] { border-bottom: 1px solid var(--line); border-left: 3px solid transparent; text-align: left; padding-left: 14px; }
  .docs-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--line); border-left-color: #B5651D; }
  .docs-panel { padding: 18px 16px; height: 574px; }
  .sysmap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; } .sysmap button:nth-child(2)::after, .sysmap button:nth-child(2)::before { display: none; }
}

/* Contact heading: restrained navy to blue gradient, solid navy fallback */
#contact-h { color: var(--navy); width: -moz-fit-content; width: fit-content; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #contact-h { background: linear-gradient(90deg, #14233B 0%, #14233B 20%, #2659A3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
@media (forced-colors: active) { #contact-h { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; } }

/* Footer: compact, two quiet rows */
.site-footer { padding: 36px 0 30px; border-top: 1px solid var(--line); background: #fff; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; padding-bottom: 22px; position: relative; border-bottom: 1px solid var(--line); }
.footer-top::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--blue); }
.footer-brand { display: inline-flex; } .footer-brand .footer-logo { display: block; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; list-style: none; }
.site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .95rem; color: var(--navy); text-decoration: none; }
.site-footer .footer-links a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 5px; }
.footer-base { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 32px; flex-wrap: wrap; padding-top: 16px; }
.footer-base p { margin: 0; font-size: .86rem; color: var(--text-2); }
.footer-tag { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 700px) { .footer-top { flex-direction: column; align-items: flex-start; } .site-footer .footer-links { gap: 0 22px; } }
.site-footer .footer-logo { margin: 0; }
.sq-k { flex-wrap: nowrap; } .sq-k .chip { white-space: nowrap; flex: none; }
@media (min-width: 1001px) and (max-width: 1300px) { .sa-h { min-height: 2.3em; } }
/* ================= v9: Glamories website showcase in the service explorer ================= */
.stage-glam { background: radial-gradient(520px 380px at 90% 0%, rgba(97,50,210,.55), transparent 62%), radial-gradient(520px 420px at 0% 100%, rgba(128,84,242,.28), transparent 65%), #0B0420; }
.reel { margin: 0 auto; width: 100%; max-width: 640px; }
.reel-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #0F0529; box-shadow: 0 24px 60px rgba(4,1,16,.6), 0 0 0 1px rgba(167,139,250,.28); }
.reel-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.reel-btn { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 999px; border: 1.5px solid rgba(199,181,252,.45); background: rgba(255,255,255,.06); color: #F4F0FF; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.reel-btn:hover { border-color: #C7B5FC; background: rgba(255,255,255,.12); }
.reel-btn:focus-visible { outline: 3px solid #F2C230; outline-offset: 2px; }
.reel-toggle { min-width: 68px; }
.reel-scene { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 10px; font-size: .86rem; font-weight: 600; color: #F4F0FF; }
.reel-count { font-weight: 400; font-size: .78rem; color: #C7B5FC; font-variant-numeric: tabular-nums; }
.svc-explain-story { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.svc-explain-story .links { margin-top: 10px; }
@media (min-width: 1101px) { .js .svc-panel .stage-glam { padding-top: 16px; padding-bottom: 14px; } .stage-glam .reel { max-width: 610px; } }
@media (max-width: 700px) { .svc-explain-story { grid-template-columns: 1fr; } .reel-scene { font-size: .8rem; } }
/* ================= v10: gradient lettering keeps its descenders; logo strip scrolls again ================= */
/* Clipped-background text only paints inside the element's box. Tight line-height leaves descenders (y, p, j, g)
   outside it, so the box is padded and the same amount is taken back in margin. Size, line-height, and layout are unchanged. */
#contact-h, .tagband-t { padding: .1em .06em .24em; margin-top: -.1em; margin-left: -.06em; margin-right: -.06em; }
#contact-h { margin-bottom: calc(16px - .24em); }
.tagband-t { margin-bottom: -.24em; }
.clients-head { position: relative; }
.clients-toggle { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; opacity: 0; pointer-events: none; }
.clients-toggle:focus, .clients-toggle:focus-visible { opacity: 1; pointer-events: auto; outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.clients-view.is-auto { --fade-l: 56px; --fade-r: 56px; }
@media (max-width: 700px) { .clients-view.is-auto { --fade-l: 28px; --fade-r: 28px; } .clients-toggle { right: 16px; } }
/* In-page links move focus to their section without changing the address; no focus ring on the section itself. */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus, article[tabindex="-1"]:focus { outline: none; }