/* iToolHost round 2 styles.
   Palette: blue #6798D0, deep blue #3A6A9E, red #D62828, yellow #E8C200,
   charcoal #374646, white. Color is rare and expensive: white space first.
   Type: IBM Plex Sans (SIL OFL 1.1), self-hosted. No external requests. */

@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --blue: #6798D0; --blue-deep: #3A6A9E; --blue-ink: #2B5582;
  --red: #D62828; --yellow: #E8C200;
  --ink: #374646; --ink-soft: #526565; --paper: #fff; --mist: #f5f7f8; --line: #e3e8ea;
  --max: 74rem; --radius: .5rem;
  --shadow: 0 1px 0 rgb(26 50 80 / .12), 0 18px 40px -22px rgb(26 50 80 / .35);
  /* Vertical rhythm. Standard sections ~36% tighter than r2 first pass.
     Hero-to-next join is the tightest. Color bands stay compact. */
  --section-y: clamp(2rem, 4.5vw, 3.5rem);
  --section-tight-y: clamp(1.5rem, 3.2vw, 2.25rem);
  --hero-y-top: clamp(2rem, 4.5vw, 3.25rem);
  --hero-y-bottom: clamp(1rem, 2vw, 1.5rem);
  --page-hero-y-top: clamp(1.85rem, 4.2vw, 3.1rem);
  --page-hero-y-bottom: clamp(.6rem, 1.4vw, .9rem);
  --after-hero-y: clamp(.85rem, 1.8vw, 1.25rem);
  --band-y: clamp(.7rem, 1.75vw, 1.15rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--paper); }
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-underline-offset: .15em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.skip { position: absolute; left: .75rem; top: -3rem; background: var(--ink); color: #fff; padding: .4rem .75rem; z-index: 50; }
.skip:focus { top: .75rem; }
.wrap { width: min(100% - 2rem, var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Floating header: white > blue, thin red line underneath ---------- */
.site-header {
  position: sticky; top: .6rem; z-index: 30;
  width: min(100% - 1.25rem, calc(var(--max) + 2rem)); margin: .6rem auto 0;
  border-radius: .7rem; border-bottom: 3px solid var(--red);
  background: linear-gradient(90deg, #fff 0, #fff 12.25rem, var(--blue) 14.5rem, var(--blue-deep) 16.5rem, var(--blue-deep) 100%);
  box-shadow: var(--shadow);
}
.header-inner { display: flex; align-items: center; gap: .75rem 1rem; padding: .55rem .9rem .55rem 1rem; }
.logo { display: block; flex: none; }
.logo img { height: 2.15rem; width: auto; }
@media (min-width: 480px) { .logo img { height: 2.9rem; } }
.nav-desktop { display: none; margin-left: auto; }
.nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.nav-desktop a, .header-phone {
  display: block; color: #fff; text-decoration: none; font-weight: 500;
  padding: .4rem .7rem; border-radius: .35rem; transition: background .15s, color .15s;
}
.nav-desktop a:hover, .header-phone:hover, .nav-desktop a:focus-visible { background: #fff; color: var(--red); }
.nav-desktop a[aria-current="page"] { box-shadow: inset 0 -2px 0 #fff; }
.nav-desktop a[aria-current="page"]:hover { box-shadow: none; }
.header-phone { margin-left: auto; font-weight: 600; white-space: nowrap; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: .4rem .75rem; border: 1px solid rgb(255 255 255 / .8); border-radius: .35rem; color: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: #fff; color: var(--red); }
.menu nav { position: absolute; right: 0; top: calc(100% + .7rem); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: .4rem; min-width: 15rem; padding: .4rem 0; box-shadow: var(--shadow); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu nav a { display: block; padding: .55rem 1rem; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu nav a:hover { background: var(--mist); color: var(--red); }
@media (min-width: 1000px) {
  .nav-desktop { display: block; }
  .menu { display: none; }
  .header-phone { margin-left: .25rem; border: 1px solid rgb(255 255 255 / .55); }
}

/* ---------- Type helpers, short rules ---------- */
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.12; font-weight: 600; }
h2 { margin: 0 0 .9rem; font-size: clamp(1.65rem, 3.2vw, 2.35rem); }
h2::after, .rule::after { content: ""; display: block; width: 2.75rem; height: 3px; margin-top: .65rem; background: var(--blue); border-radius: 2px; }
.center h2::after, h2.center::after { margin-inline: auto; }
.no-rule::after { display: none !important; }
h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.eyebrow { display: inline-block; margin: 0 0 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow::after { content: ""; display: block; width: 2rem; height: 2px; margin-top: .35rem; background: var(--yellow); }
.lead { margin: 0 0 1.5rem; max-width: 38rem; font-size: 1.18rem; color: var(--ink-soft); }
.section { padding: var(--section-y) 0; }
.section.tight { padding: var(--section-tight-y) 0; }
.hero + .section, .page-hero + .section { padding-top: var(--after-hero-y); }
.mist { background: var(--mist); }

/* ---------- Buttons ---------- */
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin: 0; }
.btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; padding: .85rem 1.3rem; border-radius: .4rem; border-bottom: 3px solid var(--red); line-height: 1.2; transition: background .15s; }
.btn:hover { background: var(--red); color: #fff; border-bottom-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); border-bottom-color: var(--yellow); }
.btn-light:hover { background: var(--yellow); color: var(--ink); }
.btn-text { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--blue); padding-bottom: .1rem; }
.btn-text:hover { color: var(--red); border-bottom-color: var(--red); }
.on-dark .btn-text { color: #fff; border-bottom-color: var(--yellow); }
.on-dark .btn-text:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- Home hero ---------- */
.hero { padding: var(--hero-y-top) 0 var(--hero-y-bottom); overflow: hidden; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 3.5rem; } }
.hero h1 { margin: 0 0 1.1rem; font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
.hero h1 .second { color: var(--blue-deep); }
.hook { margin: 0 0 1rem; font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.35; font-weight: 500; max-width: 34rem; }
.hook strong { color: var(--red); font-weight: 600; }
.hero-art { position: relative; justify-self: center; width: min(100%, 30rem); aspect-ratio: 9 / 11; }
.arch { position: absolute; inset: 0 0 0 12%; border-radius: 999px 999px 1rem 1rem; overflow: hidden; box-shadow: var(--shadow); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.orbit .o-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2s .3s ease-out forwards; }
.orbit .o-tip, .orbit .o-stars { opacity: 0; animation: fadein .5s 2.1s ease-out forwards; }
@keyframes fadein { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.phone-mock { position: absolute; left: 0; bottom: 6%; width: 34%; border: .45rem solid #1d2526; border-radius: 1.4rem; overflow: hidden; background: #1d2526; box-shadow: 0 24px 40px -18px rgb(0 0 0 / .55); animation: rise .9s .5s both ease-out; }
.phone-mock img { border-radius: .9rem; }
@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }
.chip { position: absolute; right: -2%; top: 18%; background: #fff; border-radius: 2rem; padding: .5rem .9rem; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow); display: flex; align-items: center; gap: .45rem; }
.chip .dot { width: .6rem; height: .6rem; border-radius: 50%; background: #2fa36b; box-shadow: 0 0 0 .25rem rgb(47 163 107 / .2); }
.tag { display: inline-block; background: var(--red); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .45rem; border-radius: .2rem; }
.phone-tag { position: absolute; left: 1%; bottom: calc(6% - 1.7rem); }

/* ---------- Handoff board (label the time problem) ---------- */
.label-head { max-width: 46rem; }
.handoff { display: grid; gap: 1.25rem; margin-top: 2rem; align-items: stretch; }
@media (min-width: 860px) { .handoff { grid-template-columns: .8fr auto 1.2fr; } }
.pile { border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.pile h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem; }
.pile.yours { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); }
.pile.ours { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); }
.pile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pile.yours li { font-size: 1.25rem; font-weight: 600; }
.pile.ours ul { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1.25rem; }
.pile.ours li { display: flex; gap: .55rem; align-items: baseline; }
.pile.ours li::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--blue); transform: translateY(-.1rem); }
.handoff-arrow { display: grid; place-items: center; color: var(--red); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; text-align: center; }
.handoff-arrow svg { width: 4.5rem; height: auto; }
@media (max-width: 859px) { .handoff-arrow svg { transform: rotate(90deg); width: 3rem; } }
.thats-right { margin: 1.5rem 0 0; font-weight: 500; color: var(--ink-soft); }

/* ---------- You run the ... ribbon ---------- */
.ribbon { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 1fr); gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-top: 1.75rem; }
.ribbon li { scroll-snap-align: start; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; list-style: none; }
.ribbon ul, ul.ribbon { padding: 0; margin-left: 0; }
.ribbon img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ribbon li:hover img { transform: scale(1.04); }
.ribbon p { position: absolute; inset: auto 0 0 0; margin: 0; padding: 2.5rem 1rem 1rem; color: #fff; font-size: 1.3rem; font-weight: 600; background: linear-gradient(transparent, rgb(20 28 30 / .82)); }
.ribbon .we { background: #fff; border: 2px solid var(--blue); display: grid; place-content: center; text-align: center; padding: 1rem; }
.ribbon .we img { width: 5rem; height: auto; margin: 0 auto 1rem; }
.ribbon .we p { position: static; background: none; color: var(--blue-deep); padding: 0; font-size: 1.55rem; }
.ribbon .we p::after { content: ""; display: block; width: 2rem; height: 3px; background: var(--red); margin: .6rem auto 0; }

/* ---------- Concept samples ---------- */
.samples { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2.75rem 2rem; }
@media (min-width: 860px) { .samples { grid-template-columns: 1fr 1fr; } }
.sample a.device-link { display: block; text-decoration: none; color: inherit; }
.devices { position: relative; padding: 0 0 1.5rem 0; }
.laptop { margin-right: 14%; border: .55rem solid #1d2526; border-bottom-width: .9rem; border-radius: .7rem .7rem .3rem .3rem; background: #1d2526; box-shadow: var(--shadow); transition: transform .3s; }
.laptop img { border-radius: .2rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.laptop::after { content: ""; display: block; height: .55rem; margin: .45rem -9% -1.35rem; background: #cfd6d8; border-radius: 0 0 .7rem .7rem; }
.mini-phone { position: absolute; right: 0; bottom: 0; width: 23%; border: .35rem solid #1d2526; border-radius: 1rem; background: #1d2526; overflow: hidden; box-shadow: 0 20px 30px -18px rgb(0 0 0 / .6); transition: transform .3s; }
.mini-phone img { border-radius: .65rem; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; width: 100%; }
.sample a.device-link:hover .laptop { transform: translateY(-4px); }
.sample a.device-link:hover .mini-phone { transform: translateY(-8px) rotate(2deg); }
.sample-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; margin-top: 1.1rem; }
.sample-meta h3 { margin: 0; }
.sample-meta p { margin: .2rem 0 0; flex-basis: 100%; color: var(--ink-soft); }
.sample-meta .open { font-weight: 600; text-decoration: none; }
.sample-meta .open:hover { color: var(--red); }
.fine { font-size: .9rem; color: var(--ink-soft); }

/* ---------- Services orbit ---------- */
.orbit-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .orbit-grid { grid-template-columns: .9fr 1.1fr; } }
.orbit-diagram { width: min(100%, 28rem); justify-self: center; }
.orbit-diagram text { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc li { border-bottom: 1px solid var(--line); }
.svc a { display: grid; grid-template-columns: 2.75rem 1fr auto; gap: .25rem 1rem; align-items: baseline; padding: 1.15rem .25rem; text-decoration: none; color: var(--ink); transition: background .15s; }
.svc a:hover { background: var(--mist); }
.svc a:hover h3, .svc a:hover .arrow { color: var(--red); }
.svc .num { font-weight: 600; color: var(--blue-deep); font-size: .9rem; }
.svc h3 { margin: 0; font-size: 1.35rem; }
.svc p { grid-column: 2; margin: 0; color: var(--ink-soft); }
.svc .arrow { grid-row: 1; grid-column: 3; font-size: 1.3rem; color: var(--blue); }

/* ---------- Real person ---------- */
.person { display: grid; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
@media (min-width: 900px) { .person { grid-template-columns: 1fr 1.1fr; } }
.person-photo { min-height: 15rem; position: relative; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.person-body { padding: clamp(1.5rem, 4vw, 2.75rem); }
.bubbles { display: grid; gap: .9rem; margin: 1.25rem 0 1.5rem; }
.bubble { border-radius: 1rem; padding: .85rem 1.1rem; max-width: 30rem; }
.bubble small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; }
.bubble.old { background: var(--mist); color: #6c7b7b; border-bottom-left-radius: .2rem; }
.bubble.old span { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.bubble.new { background: var(--blue-deep); color: #fff; justify-self: end; border-bottom-right-radius: .2rem; }
.bubble.new small { color: #dbe8f6; }
.big-phone { display: inline-block; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.big-phone:hover { color: var(--red); }
.placeholder { background: #fff8d6; color: var(--ink); border: 1px dashed #b89a00; padding: 0 .3rem; border-radius: .2rem; font-weight: 600; }

/* ---------- AI chat ---------- */
.ai-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .ai-grid { grid-template-columns: 1fr 1fr; } }
.chat { background: #fff; border: 1px solid var(--line); border-radius: .9rem; padding: 1.25rem; box-shadow: var(--shadow); }
.chat-top { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-soft); font-weight: 600; padding-bottom: .75rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.chat-top i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); display: inline-block; }
.q, .a { border-radius: 1rem; padding: .75rem 1rem; margin: 0 0 .8rem; max-width: 88%; }
.q { margin-left: auto; background: var(--mist); border-bottom-right-radius: .2rem; }
.a { background: #eef4fb; border-bottom-left-radius: .2rem; }
.a b { color: var(--blue-ink); }
.cite { display: inline-block; font-size: .78rem; background: #fff; border: 1px solid #c9d9ec; border-radius: 1rem; padding: .05rem .55rem; margin-top: .35rem; color: var(--blue-ink); }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: s; position: relative; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } .steps::before { content: ""; position: absolute; top: 1.2rem; left: 1.2rem; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 .6rem, transparent .6rem 1rem); } }
.steps li { counter-increment: s; position: relative; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue-deep); font-weight: 600; margin-bottom: .8rem; position: relative; }
.steps li:last-child::before { border-color: var(--red); color: var(--red); }
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- Compact color bands ---------- */
.band-dark { background: var(--ink); color: #fff; padding: var(--band-y) 0; }
.band-dark h2 { margin-bottom: .4rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.band-dark h2::after { background: var(--yellow); }
.band-dark p { margin: 0 0 1.1rem; max-width: 40rem; color: #dfe6e6; }
.band-inner { display: grid; gap: 1rem 2rem; align-items: center; }
@media (min-width: 900px) { .band-inner { grid-template-columns: 1fr auto; } .band-dark p { margin-bottom: 0; } }

.site-footer { background: var(--red); color: #fff; padding: 1.1rem 0; font-size: .95rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #FFF6B0; }
.footer-brand { font-weight: 600; margin: 0; }
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.footer-contact { margin: 0; }
.copyright { margin: 0 0 0 auto; opacity: .9; }

/* ---------- Inner pages ---------- */
.page-hero { padding: var(--page-hero-y-top) 0 var(--page-hero-y-bottom); }
.page-hero h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 5.4vw, 3.7rem); line-height: 1.04; letter-spacing: -.03em; max-width: 52rem; }
.page-hero-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: 1.3fr .7fr; } }
.page-hero .arch-sm { border-radius: 999px 999px .8rem .8rem; overflow: hidden; aspect-ratio: 4 / 5; max-width: 19rem; justify-self: center; box-shadow: var(--shadow); }
.page-hero .arch-sm img { width: 100%; height: 100%; object-fit: cover; }
.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 17rem; align-items: start; gap: 3.5rem; } .callout { position: sticky; top: 7rem; } }
.prose { max-width: 44rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: .35rem 0; }
.ticks { list-style: none; padding: 0 !important; display: grid; gap: .9rem; }
.ticks li { display: block; position: relative; padding-left: 2rem; margin: 0 !important; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--blue); background: radial-gradient(circle, var(--blue) 0 35%, transparent 38%); }
.ticks b { display: block; }
.callout { border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius); padding: 1.25rem 1.3rem; background: #fff; }
.callout p { margin: 0 0 .75rem; }
.callout .phone { display: inline-block; font-size: 1.35rem; font-weight: 600; color: var(--ink); text-decoration: none; margin-bottom: .35rem; }
.callout .reach-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0 0 .35rem; }
.callout .reach-pair .phone { margin-bottom: 0; }
.callout .phone:hover, .callout a.mail:hover, .callout .text-us:hover { color: var(--red); }
.callout a.mail { color: var(--blue-deep); font-weight: 600; text-decoration: none; word-break: break-word; }
.callout .who { font-size: .9rem; color: var(--ink-soft); }
.compare { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1rem; }
.compare th, .compare td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.compare td:last-child { font-weight: 600; }
.compare thead th:last-child { color: var(--red); }
.dial-wrap { display: grid; gap: 1.5rem; align-items: center; margin: 1.75rem 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 700px) { .dial-wrap { grid-template-columns: 12rem 1fr; } }
.dial-wrap svg { width: 100%; max-width: 12rem; }
.dial-wrap p { margin: 0; }
.dial-needle { transform-origin: 100px 100px; animation: sweep 3.5s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-60deg); } to { transform: rotate(60deg); } }
.questions { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; counter-reset: q; }
.questions li { counter-increment: q; padding: .9rem 1rem .9rem 3.1rem; position: relative; background: var(--mist); border-radius: var(--radius); font-weight: 500; }
.questions li::before { content: counter(q); position: absolute; left: 1rem; top: .85rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--blue-deep); color: #fff; font-size: .8rem; font-weight: 600; }
.contact-details { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: 1.1rem; }
.page-hero .lead:has(+ .contact-details) { margin-bottom: .7rem; }
.page-hero .contact-details { margin: 0; }
.contact-details div { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.contact-details a { font-weight: 600; font-size: 1.4rem; color: var(--ink); text-decoration: none; }
.contact-details a:hover { color: var(--red); }
.reach-pair { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.text-us { font-weight: 600; font-size: 1rem; color: var(--blue-ink); text-decoration: none; }
.text-us:hover { color: var(--red); text-decoration: underline; }
.contact-details .text-us { font-size: 1rem; }
.footer-contact a[href^="sms:"] { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .orbit .o-draw { stroke-dashoffset: 0; } .orbit .o-tip, .orbit .o-stars { opacity: 1; } }

/* ---------- Jargon translator ---------- */
.jt-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .jt-grid { grid-template-columns: .9fr 1.1fr; } }
.proud { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; color: var(--blue-deep); }
.translator { border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: var(--radius); background: #fff; padding: 1.1rem 1.25rem; margin: 1.25rem 0 2rem; box-shadow: var(--shadow); }
.jt-title { margin: 0 0 .75rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.jt-title span { color: var(--red); font-size: 1rem; }
.translator ul { list-style: none; margin: 0; padding: 0 !important; }
.translator li { display: grid; gap: .3rem .9rem; align-items: center; padding: .8rem 0 !important; margin: 0 !important; border-top: 1px dashed var(--line); }
.translator li:first-child { border-top: 0; }
@media (min-width: 640px) { .translator li { grid-template-columns: 1fr auto 1.15fr; } }
.translator small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .15rem; }
.jargon { color: #6c7b7b; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92rem; }
.jargon small { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.plain { font-weight: 500; }
.plain small { color: var(--red); }
.plain b { color: var(--ink); }
.jt-arrow { color: var(--red); font-weight: 600; }
@media (max-width: 639px) { .jt-arrow { display: none; } }
@media (max-width: 999px) {
  .site-header { background: linear-gradient(90deg, #fff 0, #fff 9.3rem, var(--blue) 10.6rem, var(--blue-deep) 12rem, var(--blue-deep) 100%); }
  .header-phone { background: #fff; color: var(--ink); padding: .35rem .6rem; font-size: .95rem; }
  .header-phone:hover { color: var(--red); }
}
.arch picture, .arch-sm picture { display: block; width: 100%; height: 100%; }
.arch img { object-position: 62% 50%; }
.hero-art { margin-top: 1.75rem; }

.footer-tag { font-weight: 400; opacity: .92; margin-left: .4rem; padding-left: .55rem; border-left: 1px solid rgb(255 255 255 / .55); }
@media (min-width: 480px) and (max-width: 999px) { .site-header { background: linear-gradient(90deg, #fff 0, #fff 12.25rem, var(--blue) 14rem, var(--blue-deep) 15.5rem, var(--blue-deep) 100%); } }

/* ---------- Lead form (Contact) ---------- */
button.btn { font: inherit; cursor: pointer; appearance: none; border: 0; border-bottom: 3px solid var(--red); }
.lead-form-card { max-width: 40rem; padding: 1.15rem 1.2rem 1.2rem; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius); background: #fff; }
.lead-form-card h2 { margin-bottom: .55rem; }
.lead-form-card .lead { margin-bottom: 1.05rem; }
.lead-form { display: grid; gap: .85rem; }
.lead-form .field { display: grid; gap: .3rem; }
.lead-form label, .lead-form legend { font-weight: 600; color: var(--ink); }
.lead-form .req { font-weight: 500; color: var(--ink-soft); font-size: .85em; }
.lead-form input[type="text"], .lead-form input[type="email"], .lead-form input[type="tel"],
.lead-form textarea {
  width: 100%;
  max-width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .75rem;
  line-height: 1.4;
}
.lead-form textarea { min-height: 5rem; resize: vertical; }
.lead-form input:not([type="hidden"]):hover,
.lead-form textarea:hover { border-color: var(--blue); }
.lead-form input:not([type="hidden"]):focus-visible,
.lead-form textarea:focus-visible { border-color: var(--blue-deep); }
.choices { border: 0; margin: 0; padding: 0; display: grid; gap: .2rem; }
.choices legend { margin: 0 0 .25rem; padding: 0; }
.choice { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; cursor: pointer; padding: .4rem 0; }
.choice input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--blue-deep); flex: none; cursor: pointer; }
.choice:hover { color: var(--red); }
.choices .field { margin-top: .45rem; }
.lead-form .actions { margin-top: .25rem; }
.form-note, .form-fallback { margin: .6rem 0 0; font-size: .95rem; color: var(--ink-soft); max-width: 36rem; }
.form-fallback { margin-top: .35rem; }
.form-note a, .form-fallback a { font-weight: 600; color: var(--ink); text-decoration: none; }
.form-note a:hover, .form-fallback a:hover { color: var(--red); }
@media (max-width: 639px) {
  .lead-form-card { padding: 1rem .9rem 1.05rem; }
  .lead-form input, .lead-form textarea { font-size: 1rem; }
  .choice { padding: .5rem 0; }
}
/* Lead form: honeypot, server-side error messages */
.form-errors { margin: 0; }
.form-error { display: none; margin: 0 0 .85rem; padding: .7rem .9rem; border-left: 4px solid var(--red); background: #fdf1f1; border-radius: .3rem; color: var(--ink); font-weight: 500; }
.form-error:target, .form-error.is-shown { display: block; }
.form-error a { font-weight: 600; color: var(--ink); }
.form-error a:hover { color: var(--red); }
.lead-form-card { position: relative; }
/* Thanks page */
.thanks-card { max-width: 40rem; }
.thanks-card h1 { margin-bottom: .6rem; }
.thanks-card .lead { margin-bottom: 1rem; }
.thanks-card .back { display: inline-block; margin-top: .4rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.thanks-card .back:hover { color: var(--red); }
.thanks-card .lead a { font-weight: 600; color: var(--ink); text-decoration: none; }
.thanks-card .lead a:hover { color: var(--red); }
/* Simplified lead form */
.field-pair { display: grid; gap: .85rem; }
@media (min-width: 560px) { .field-pair { grid-template-columns: 1fr 1fr; } }
.field-hint { margin: -.45rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.lead-form .req { color: var(--red); font-weight: 600; }
/* Privacy notice (cookie-notice.js; no cookies, localStorage dismissal only) */
.privacy-notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgb(33 41 42 / .94); border-top: 2px solid var(--red); color: #fff; }
.privacy-notice-inner { max-width: 72rem; margin: 0 auto; padding: .7rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.privacy-notice p { margin: 0; flex: 1 1 22rem; font-size: .95rem; line-height: 1.45; }
.privacy-notice strong { color: var(--yellow); font-weight: 600; }
.privacy-notice button { font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; border: 0; border-bottom: 3px solid var(--red); border-radius: .3rem; background: #fff; color: var(--ink); padding: .45rem 1.1rem; }
.privacy-notice button:hover, .privacy-notice button:focus-visible { background: var(--yellow); }
@media (max-width: 559px) { .privacy-notice-inner { padding: .65rem 1rem; } .privacy-notice button { width: 100%; } }