/* ==========================================================================
   Vigorous Software Inc. · "Blue Field" design system
   Tokens follow docs/redesign-brief.md §2; look matches the Claude Design export.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
}
/* Heading typefaces (OFL, @fontsource). Only the one in use is downloaded; HEADING_FONT picks it (html[data-head-font]). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist-latin-var.woff2") format("woff2"); }

:root {
  --blue: #2A6FDB;          /* white text 4.78:1 */
  --blue-deep: #1E56B5;     /* 6.88:1 on white, 6.18:1 on pale */
  --ink: #111214;           /* 18.74:1 with white */
  --ink-2: #1B1C1F;
  --pale: #EEF3FC;
  --surface: #EEF0F3;       /* ink on it 16.4:1 */
  --white: #FFFFFF;
  --muted: #4B5058;         /* 7.9:1 on white, 7.0:1 on surface */
  --muted-on-ink: #B8BDC4;  /* 10.1:1 on ink */
  --line: #E6E8EC;
  --line-strong: #CDD2D9;
  --line-ink: #34373C;
  --line-pale: #C5D3EC;
  --placeholder: #E3E7ED;
  --error: #B42318;         /* 6.0:1 on white */
  --focus: var(--ink);

  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Heading tracking: 0 to -0.01em, never tighter. */
  --track-head: -0.01em;

  --fs-h1: clamp(38px, 0.952vw + 34.3px, 48px);   /* Plus Jakarta 700: 48px keeps the 3-line hero headline in the 536px column */
  --fs-h2: clamp(26px, 0.667vw + 23.4px, 33px);
  --fs-h3: clamp(21px, 0.19vw + 20.3px, 23px);
  --fs-lead: clamp(18px, 0.19vw + 17.3px, 20px);
  --fs-page-title: clamp(34px, 0.952vw + 30.3px, 44px);   /* inner-page H1: 44px desktop */
  --fs-inner-h2: clamp(24px, 0.381vw + 22.5px, 28px);     /* inner-page H2: 28px desktop */

  --gutter: 64px;
  --section-y: 72px;
  --head-gap: 32px;
  --content: 1040px;
  --radius-card: 32px;
  --radius-md: 24px;
  --radius-field: 10px;
  --shadow-float: 0 1px 2px rgba(8, 24, 60, .18), 0 28px 56px -18px rgba(8, 24, 60, .55);
}

[data-head-font="manrope"], .hf-manrope { --font-head: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif; }
[data-head-font="geist"], .hf-geist { --font-head: "Geist", "Inter", "Helvetica Neue", Arial, sans-serif; }
.hf-jakarta { --font-head: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif; }

@media (max-width: 1023px) {
  :root { --gutter: 32px; --radius-card: 28px; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --section-y: 64px; --head-gap: 32px; --radius-card: 26px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: var(--track-head); margin: 0; color: inherit; }
h1 { font-weight: 700; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
/* Links inside sentences: a subtle underline (1px, offset 3px, 40% of the text colour; full on hover), so links are
   never identified by colour alone. Standalone links (.text-link and the like) drop it at rest. */
a { color: var(--blue-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(30, 86, 181, .4); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { color: var(--blue-deep); text-decoration-color: currentColor; }
strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark, .on-blue { --focus: var(--white); }
.on-dark a:not(.btn):hover, .on-blue a:not(.btn):hover { color: var(--white); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--white); --focus: var(--blue-deep); }

.container { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--white); }
.section--blue { background: var(--blue); color: var(--white); }
.section--pale { background: var(--pale); }
.section--surface { background: var(--surface); }

.section-title { font-size: var(--fs-h2); line-height: 1.1; }
.section-intro { margin-top: 12px; font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.on-dark .section-intro, .on-blue .section-intro { color: inherit; }
.section-body { margin-top: var(--head-gap); }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.section-after { margin-top: 40px; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 28px; border-radius: 999px;
  font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn .icon { flex: none; }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--pale); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #2A2C31; color: var(--white); }
.btn--blue { background: var(--blue-deep); color: var(--white); }
.btn--blue:hover { background: var(--ink); color: var(--white); }
.btn--outline-white { border-color: var(--white); color: var(--white); background: transparent; font-weight: 600; }
.btn--outline-white:hover { background: var(--white); color: var(--ink); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; font-weight: 600; }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--header { min-height: 48px; padding: 0 22px; font-size: 16px; font-weight: 600; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 16px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Standalone links ("All work →"): no underline at rest, weight 500, ink on light surfaces and white on dark/blue;
   the arrow moves 3px right and an underline appears on hover. */
.text-link {
  display: inline-block; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.9;
  text-decoration: none; text-underline-offset: 5px;
}
.text-link .icon { display: inline-block; vertical-align: -3px; margin-left: 4px; transition: transform .15s; }
.text-link:hover .icon { transform: translateX(3px); }
.text-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; }
.on-dark .text-link:hover, .on-blue .text-link:hover { color: var(--white); }
.on-dark .text-link, .on-blue .text-link { color: var(--white); }

.icon-btn {
  width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; text-decoration: none;
}
.icon-btn--outline { border: 1.5px solid var(--ink); color: var(--ink); background: var(--white); }
.icon-btn--ink { border: 0; background: var(--ink); color: var(--white); }

.tag {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1.5px solid var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; line-height: 1.2;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tag-list--lg .tag { min-height: 40px; padding: 0 16px; font-size: 16px; white-space: normal; }

/* ---------- Header ---------- */
.site-header { background: var(--white); position: relative; z-index: 20; }
.site-header__bar { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand img { width: 32px; height: 32px; flex: none; }
.brand__name { font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.brand--on-dark { color: var(--white); }
.brand:hover { color: inherit; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.site-nav__list a { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; padding: 10px 0; display: inline-block; }
.site-nav__list a:hover { color: var(--blue-deep); }
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.site-nav__mobile-cta { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 22px; }
.header-phone:hover { color: var(--blue-deep); text-decoration: underline; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; min-height: 44px; }
.header-phone-icon, .menu-toggle { display: none; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }

@media (max-width: 1279px) {
  .site-nav__list { gap: 22px; }
  .site-header__actions { gap: 16px; }
}
@media (max-width: 1119px) {
  .header-phone { display: none; }
  .header-phone-icon { display: inline-flex; }
}
@media (max-width: 1023px) {
  .site-header__bar { height: 68px; }
  .btn--header { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu-toggle[hidden] { display: none; }
  .site-header__actions { gap: 8px; }
  .site-nav { display: none; }
  .js .site-nav {
    position: absolute; left: 0; right: 0; top: 68px; background: var(--white);
    border-top: 1px solid var(--line); box-shadow: 0 24px 40px -20px rgba(17, 18, 20, .35);
    padding: 8px var(--gutter) 24px;
  }
  .js .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 14px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .site-nav__mobile-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .site-nav__phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: var(--ink); font-weight: 600; text-decoration: none; }
  /* Without JavaScript the menu shows as a simple row under the bar. */
  html:not(.js) .site-nav { display: block; padding: 0 var(--gutter) 12px; position: static; }
  html:not(.js) .site-header__bar { flex-wrap: wrap; height: auto; min-height: 68px; }
  html:not(.js) .site-nav__list { flex-direction: row; flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) .site-nav__list a { border: 0; padding: 10px 0; font-size: 16px; }
  html:not(.js) .site-nav__mobile-cta { display: none; }
}
@media (max-width: 767px) {
  .brand img { width: 28px; height: 28px; }
  .brand__name { font-size: 15px; }
  .site-header__bar { padding-left: 20px; padding-right: 16px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
/* Text column 536px: the widest at which the headline still breaks as before (3 lines at 1280–1920). */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 464px; column-gap: 40px; align-items: center; min-height: 0; position: relative; }
/* 172px below the buttons holds the skyline's building row (146px at most), so no building ever sits behind the text. */
.hero__text { padding: 72px 0 172px; min-width: 0; position: relative; z-index: 1; }
.kicker { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; }
.hero__title { margin-top: 18px; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: var(--track-head); max-width: 720px; }
.highlight { display: inline-block; background: var(--ink); color: var(--white); line-height: 1; padding: 0.07em 0.14em 0.11em; margin-top: 0.12em; border-radius: 0.05em; }
.hero__lead { margin-top: 24px; font-size: var(--fs-lead); line-height: 1.55; max-width: 600px; }
.hero__actions { margin-top: 32px; }
.hero__actions .btn--white { padding: 0 30px; }
/* The graphic column runs the full hero height so the skyline can sit on the hero's bottom edge.
   On desktop the window overhangs the content edge by 56px into the gutter (its chips stick out 28px each side). */
.hero__graphic { --sk: .7; position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin-right: -56px; }
/* Skyline: the CN Tower (x 744 of the middle tile) stands 6px left of the graphic column, i.e. midway between the
   text column and the window; the building row is at most 146px tall at this scale. Filled with the hero blue. */
.hero__skyline { position: absolute; z-index: 0; bottom: 0; left: calc(-6px - 2184px * var(--sk)); width: calc(4320px * var(--sk)); height: auto; max-width: none; color: var(--blue); pointer-events: none; }
.hero__graphic > .motion-ctl { right: 0; bottom: 20px; }

/* Option C: one app window, with a delivery chip and a finance chip. Sizes from the design; never scaled. */
.il-hero { position: relative; z-index: 1; container: hero / inline-size; padding: 30px 28px; }
.il-hero__wrap { position: relative; }
.il-hero__plate { position: absolute; left: 24px; right: 24px; top: -14px; height: 40px; border-radius: 16px; background: rgba(255, 255, 255, .2); }
.il-hero__win, .il-hero__chip--sms, .il-hero__chip--fin { box-shadow: 0 1px 2px rgba(9, 28, 74, .22), 0 10px 20px -10px rgba(9, 28, 74, .35), 0 36px 60px -26px rgba(9, 28, 74, .65); }
.il-hero__win { position: relative; z-index: 1; height: 396px; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #FFFFFF; }
.il-hero__bar { flex: none; display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 14px; border-bottom: 1px solid #E2E8F2; white-space: nowrap; }
.il-hero__bar-icon { width: 26px; height: 26px; border-radius: 8px; background: #EEF3FC; color: #1E56B5; display: flex; align-items: center; justify-content: center; flex: none; }
.il-hero__bar-name { font-size: 14.5px; line-height: 19px; }
.il-hero__bar-org { font-size: 12.5px; color: #4F5663; }
.il-hero__body { flex: 1; min-height: 0; display: flex; }
.il-hero__side { flex: none; width: 164px; padding: 10px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid #E2E8F2; }
.il-hero__item { position: relative; display: flex; flex-direction: column; padding: 9px 10px; white-space: nowrap; }
.il-hero__item > * { position: relative; }
.il-hero__item b { font-size: 13px; line-height: 18px; }
.il-hero__item span { color: #4F5663; }
.il-hero__item > .il-hero__sel { position: absolute; inset: 0; border-radius: 10px; background: #EEF3FC; }
.il-hero__main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.il-hero__q { display: flex; align-items: center; gap: 10px; }
.il-hero__q > span:last-child { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.il-hero__muted { font-size: 12.5px; color: #4F5663; }
.il-hero__q b { font-size: 15px; line-height: 20px; font-weight: 500; }
.il-hero__avatar { width: 34px; height: 34px; border-radius: 50%; background: #EEF3FC; color: #1E56B5; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 600; }
.il-hero__avatar--staff { width: 32px; height: 32px; background: #1E56B5; color: #FFFFFF; }
.il-hero__draft { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #EEF3FC; transform-origin: top; }
.il-hero__draft-head { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #1E56B5; }
.il-hero__draft-text { margin: 0; font-size: 15px; line-height: 23px; color: #111214; text-wrap: pretty; }
.il-hero__review { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.il-hero__review > b { font-size: 13.5px; line-height: 18px; }
.il-hero__approved { margin-left: auto; }
.il-hero__sent { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: #1E56B5; color: #FFFFFF; white-space: nowrap; }
.il-hero__sent b { font-size: 13.5px; line-height: 18px; }
.il-hero__sent-icon { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; color: #1E56B5; display: flex; align-items: center; justify-content: center; flex: none; }
.il-hero__time { margin-left: auto; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.il-hero__chip { position: absolute; z-index: 2; white-space: nowrap; }
.il-hero__chip--sms { top: -30px; right: -28px; width: 168px; padding: 10px 12px; display: flex; flex-direction: column; border-radius: 14px; background: #FFFFFF; }
.il-hero__chip-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1E56B5; }
.il-hero__chip-num { font-size: 12.5px; line-height: 17px; color: #4F5663; font-variant-numeric: tabular-nums; }
.il-hero__chip--fin { left: -28px; bottom: -30px; height: 42px; padding: 0 14px; display: flex; align-items: center; gap: 6px; border-radius: 13px; background: #111214; color: #FFFFFF; }
.il-hero__chip--fin b { font-size: 13px; }
.il-hero__chip--fin b:last-child { font-size: 12.5px; }
/* Narrower window (mid widths, phones): the design's mobile layout, no request list. */
@container hero (max-width: 439px) {
  .il-hero__win { height: auto; }
  .il-hero__side, .il-hero__bar-org { display: none; }
  .il-hero__main { justify-content: flex-start; gap: 12px; padding: 14px; }
  .il-hero__q b { font-size: 14.5px; }
  .il-hero__draft-text { font-size: 14px; line-height: 20px; }
}

/* Narrowest phones (320): the question may wrap instead of running past the window edge. */
@container hero (max-width: 299px) { .il-hero__q > span:last-child { white-space: normal; } }

@media (max-width: 1279px) and (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .hero__graphic { margin-right: 0; }
}
/* Stacked: the graphic sits below the buttons and the skyline below the graphic (the design's mobile board). */
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__text { padding: 48px 0 16px; }
  /* Tablets: the tower stands to the right of the window; only the low building row sits below it. */
  .hero__graphic { --sk: .5; margin-right: 0; padding-bottom: 110px; }
  .hero__skyline { left: calc(82% - 2184px * var(--sk)); }
  .il-hero { width: 100%; max-width: 520px; }
  .hero__graphic > .motion-ctl { bottom: 16px; }
}
@media (max-width: 767px) {
  .hero__title { margin-top: 18px; line-height: 1.06; }
  .hero__lead { margin-top: 26px; }
  .hero__actions { margin-top: 28px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn { min-height: 58px; }
  .hero__text { padding: 40px 4px 20px; }
  /* Phones: a low skyline band (buildings at most ~71px) under the window, and the CN Tower (21px wide) standing
     beside the window in the strip to its right, rising about 110px alongside it. */
  .hero__graphic { --sk: .34; padding-bottom: 72px; }
  .hero__skyline { left: calc(min(100%, 520px) + 4px - 2184px * var(--sk)); }
  .hero__graphic > .motion-ctl { right: 32px; bottom: 14px; } /* clear of the tower base */
  .il-hero { padding: 24px 8px 18px 10px; }
  .il-hero__plate { display: none; }
  .il-hero__chip--sms { top: -24px; right: -8px; width: 142px; }
  .il-hero__chip--fin { left: -10px; bottom: -18px; }
}

/* ---------- Trust bar ---------- */
.trust { padding: 40px 0; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust__item { display: flex; align-items: center; gap: 14px; padding: 4px 20px; min-height: 56px; border-left: 1px solid var(--line-ink); font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--white); }
.trust__item:first-child { padding-left: 0; border-left: 0; }
.trust__item svg, .trust__item img { flex: none; }
.trust__badge { height: 48px; width: auto; }
@media (max-width: 1279px) {
  .trust__item { padding: 6px 20px; gap: 14px; font-size: 17px; }
}
@media (max-width: 1023px) {
  .trust { padding: 44px 0; }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .trust__item { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; min-height: 96px; padding: 0 18px 0 18px; }
  .trust__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust__item svg { width: 40px; height: 40px; }
  .trust__item .trust__flag { width: 48px; height: 24px; margin: 8px 0; }
  .trust__badge { height: 40px; }
}

/* ---------- Service cards ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.service-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-card); color: inherit; isolation: isolate; container: card / inline-size; }
.service-card--1, .service-card--4 { grid-column: 1 / -1; }
.service-card--1 { background: var(--blue); color: var(--white); }
.service-card--2 { background: var(--surface); color: var(--ink); }
.service-card--3 { background: var(--ink); color: var(--white); }
.service-card--4 { background: var(--blue-deep); color: var(--white); }
/* The whole card is one link: the title's link stretches over the card. No underline or colour change on hover. */
.service-card__link { color: inherit; text-decoration: none; }
.service-card__link:hover { color: inherit; text-decoration: none; }
.service-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.service-card__link:focus-visible { outline: none; }
.service-card--link { transition: transform .2s ease-out, box-shadow .2s ease-out; }
.service-card--link:hover { transform: translateY(-3px); box-shadow: 0 2px 6px -2px rgba(8, 24, 60, .14), 0 30px 60px -26px rgba(8, 24, 60, .5); }
.service-card--link:has(.service-card__link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
.service-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px 24px 0; } /* not positioned: the link overlay must cover the whole card */
.service-card__title { font-size: var(--fs-h3); line-height: 1.25; max-width: 560px; }
.service-card__corner { flex: none; display: flex; align-items: center; gap: 10px; height: 1.25em; font-size: var(--fs-h3); }
.service-card__num { font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1; }
.service-card__arrow { transition: transform .2s ease-out; }
.service-card--link:hover .service-card__arrow, .service-card--link:has(.service-card__link:focus-visible) .service-card__arrow { transform: translateX(4px); }
.service-card__body { display: none; }
.service-card__desc { font-size: 18px; line-height: 1.5; }
.service-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; }
.service-card__more svg { transition: transform .2s ease-out; }
.service-card--link:hover .service-card__more svg { transform: translateX(4px); }
.services-more { margin-top: 32px; }
/* Layout: card 1 full width; cards 2 and 3 side by side; card 4 full width (measured: 2 and 3 do not fit 5/12 columns). */
@media (max-width: 1023px) { .services-grid { grid-template-columns: minmax(0, 1fr); } }
.service-card__layout { height: 100%; display: flex; flex-direction: column; }
.service-card__art { container: art / inline-size; padding: 32px 16px 56px; flex: 1; position: relative; z-index: 1; }
@container card (min-width: 500px) {
  .service-card__head { padding: 48px 48px 0; }
  .service-card__art { padding: 40px 48px 48px; }
}
/* Full-width cards at the 1040px content width: title and number across the top; description on the left,
   illustration on the right at 1:1. The description sits level with the illustration's top, "Learn more" with its foot. */
@container card (min-width: 960px) {
  .service-card__layout { display: grid; grid-template-columns: minmax(0, 1fr) 572px; grid-template-rows: auto 1fr; column-gap: 48px; padding: 48px 48px 0; }
  .service-card__head { grid-column: 1 / -1; padding: 0; }
  .service-card__title { max-width: 520px; }
  .service-card__body { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 40px 0 48px; }
  .service-card__desc { max-width: 340px; }
  .service-card__art { grid-column: 2; grid-row: 2; padding: 40px 0 48px; }
}

/* Pause / replay control for each illustration (added by site.js; WCAG 2.2.2). */
.motion-ctl { position: absolute; z-index: 5; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 1px 3px rgba(8, 24, 60, .28); cursor: pointer; opacity: .55; transition: opacity .2s ease-out; }
.motion-ctl:hover, .motion-ctl:focus-visible { opacity: 1; }
html:not(.motion-ok) .motion-ctl { display: none; }
@media (hover: none) { .motion-ctl { opacity: 1; } }
.motion-ctl svg { display: block; }
.service-card > .motion-ctl { right: 12px; bottom: 12px; }
.service-card--4 .service-card__art { padding-bottom: 0; }
/* /services/ cards carry the illustration only (no title row), at every width. */
@container card (min-width: 960px) {
  .service-card--plain .service-card__layout { display: flex; padding: 0; }
  .service-card--plain .service-card__art { padding: 40px 48px 48px; }
}
.service-card--plain .il-sms { margin-inline: auto; }
.service-card--1 > .motion-ctl, .service-card--3 > .motion-ctl, .service-card--4 > .motion-ctl { --focus: var(--white); }
/* Bottom right of the flow, well clear of the Approved tile. */
.aiw > .motion-ctl { right: 0; bottom: 0; box-shadow: 0 0 0 1px var(--line-strong), 0 1px 3px rgba(8, 24, 60, .2); }

/* ==========================================================================
   Service illustrations (from the "Vigorous Software — Illustrations" Claude Design).
   Text keeps the design's sizes (12px minimum, 11px for avatar initials); layouts reflow, never scale.
   ========================================================================== */
.il { position: relative; font-family: var(--font-body); font-size: 12px; line-height: 16px; color: #111214; text-align: left; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.il b { font-weight: 600; }
.il svg { display: block; flex: none; }
.il-stack { display: inline-grid; }
.il-stack > * { grid-area: 1 / 1; }
.il-stack--end { justify-items: end; }
.il-x { opacity: 0; }
.il-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.il-pill--soft { background: #EEF3FC; color: #1E56B5; }
.il-pill--outline { background: #FFFFFF; color: #1E56B5; box-shadow: inset 0 0 0 1px #1E56B5; }
.il-pill--solid { background: #1E56B5; color: #FFFFFF; }
.il-dot { width: 6px; height: 6px; border-radius: 50%; background: #1E56B5; }
.il-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: #1E56B5; color: #FFFFFF; font-size: 12px; font-weight: 600; line-height: 16px; }
.il-avatar--sm { width: 22px; height: 22px; font-size: 11px; }
.il-avatar--md { width: 28px; height: 28px; }
.il-avatar--soft { width: 30px; height: 30px; background: #EEF3FC; color: #1E56B5; }
.il-avatar--xs { width: 24px; height: 24px; }
/* In-progress icon: the arc only rotates under motion; otherwise (reduced motion, no JS, paused) three dots. */
.il-spinner { display: inline-grid; flex: none; }
.il-spinner > svg { grid-area: 1 / 1; }
.il-spin { display: none; }
.motion-ok .il-spin { display: block; }
.motion-ok .il-dots { display: none; }
.il-port { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; border: 2px solid #2A6FDB; z-index: 3; }

/* 1. Online forms: Before rail, then the Requests board */
.il-forms {
  --hb-x1: calc(-200% - 48px); --hb-y1: 0px; --hb-x2: calc(-100% - 24px); --hb-y2: 0px;
  --push-x: 0px; --push-y: 83px;
  --paper-x: -148px; --paper-y: -36px; --paper-s: .43; --sheet-x: -356px; --sheet-y: 56px; --sheet-s: .3;
  --paper-a: il-forms-paper; --sheet-a: il-forms-sheet;
  display: flex; align-items: flex-start; width: 572px; max-width: 100%; height: 256px;
}
.il-forms__rail { position: relative; flex: none; width: 80px; margin: 24px 20px 0 0; display: flex; flex-direction: column; gap: 8px; }
.il-forms__rail-label { color: #FFFFFF; font-weight: 600; }
.il-forms__tile { width: 80px; height: 84px; border-radius: 14px; background: #1E56B5; color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.il-forms__arrow { position: absolute; left: 82px; top: 96px; color: #FFFFFF; }
.il-forms__board { flex: 0 0 472px; min-width: 0; height: 256px; background: #FFFFFF; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(9, 28, 74, .22), 0 20px 40px -18px rgba(9, 28, 74, .55); }
.il-forms__bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid #E2E8F2; white-space: nowrap; }
.il-forms__bar-icon { width: 24px; height: 24px; border-radius: 7px; background: #EEF3FC; color: #1E56B5; display: flex; align-items: center; justify-content: center; flex: none; }
.il-forms__bar-name { font-size: 14px; line-height: 18px; font-weight: 600; }
.il-forms__bar-org { color: #4F5663; margin-left: 2px; }
.il-forms__online { margin-left: auto; }
.il-forms__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.il-forms__col { min-width: 0; height: 188px; padding: 8px; border-radius: 12px; background: #EEF3FC; display: flex; flex-direction: column; gap: 6px; }
.il-forms__col-head { display: flex; align-items: center; gap: 6px; height: 20px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.il-forms__col-head svg { margin-left: auto; color: #1E56B5; }
.il-count { display: inline-grid; color: #1E56B5; font-size: 12px; }
.il-count > b { grid-area: 1 / 1; }
.il-forms__card { position: relative; display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 18, 20, .08); white-space: nowrap; }
.il-forms__card b { font-size: 13px; line-height: 17px; }
.il-forms__card > span { color: #4F5663; }
.il-forms__hb { height: 77px; z-index: 2; box-shadow: 0 0 0 1.5px #2A6FDB, 0 6px 14px -6px rgba(30, 86, 181, .45); }
.il-forms__ring { position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 0 5px rgba(42, 111, 219, .22); opacity: 0; }
.il-forms__hb-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.il-forms__docs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.il-forms__paper, .il-forms__sheet { position: absolute; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 2px rgba(9, 28, 74, .22), 0 20px 40px -18px rgba(9, 28, 74, .55); opacity: 0; white-space: nowrap; }
.il-forms__paper { left: 94px; top: 14px; width: 188px; height: 224px; padding: 16px; transform: rotate(-4deg); }
.il-forms__paper > b { font-size: 14px; line-height: 18px; }
.il-forms__field { display: flex; flex-direction: column; padding-bottom: 4px; border-bottom: 1px solid #B9C4D6; color: #4F5663; }
.il-forms__field em { font-style: normal; font-size: 13px; line-height: 17px; font-weight: 500; color: #1E56B5; }
.il-forms__field svg { color: #1E56B5; }
.il-forms__sheet { left: 262px; top: 40px; width: 268px; padding: 14px; transform: rotate(3deg); }
.il-forms__sheet-name { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 17px; color: #1E56B5; }
.il-forms__sheet-name b { color: #111214; }
.il-forms__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #E2E8F2; border-left: 1px solid #E2E8F2; }
.il-forms__grid > * { padding: 6px 8px; border-right: 1px solid #E2E8F2; border-bottom: 1px solid #E2E8F2; }
.il-forms__grid > b { background: #EEF3FC; }
/* No room for the rail: the board takes the full width. */
@container art (max-width: 571px) {
  /* No rail to land in: the documents shrink into the board and are gone before its text settles. */
  .il-forms { width: 100%; height: auto; --paper-x: 0px; --paper-y: -24px; --paper-s: .6; --sheet-x: 0px; --sheet-y: -24px; --sheet-s: .6; --paper-a: il-forms-paper-nr; --sheet-a: il-forms-sheet-nr; }
  .il-forms__rail { display: none; }
  .il-forms__board { flex: 1 1 auto; }
  .il-forms__paper { left: 0; }
  .il-forms__sheet { left: auto; right: 0; }
}
/* Narrow (phones): the three columns become stacked lanes; the request moves down instead of right. */
@container art (max-width: 447px) {
  .il-forms { --hb-x1: 0px; --hb-y1: -254px; --hb-x2: 0px; --hb-y2: -127px; --push-x: calc(100% + 8px); --push-y: 0px; }
  .il-forms__board { height: auto; }
  .il-forms__bar-org { display: none; }
  .il-forms__cols { grid-template-columns: minmax(0, 1fr); }
  .il-forms__col { height: 119px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 20px 77px; gap: 6px 8px; align-content: start; }
  .il-forms__col-head { grid-column: 1 / -1; }
  .il-forms__card { align-self: start; }
  .il-forms__paper { left: 8px; }
  .il-forms__sheet { top: 236px; }
}

/* 2. Connected systems */
.il-sync { width: 100%; max-width: 412px; }
.il-sync__row { display: grid; grid-template-columns: minmax(136px, 156px) minmax(40px, 1fr) minmax(136px, 156px); }
.il-sys { position: relative; z-index: 1; height: 168px; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 18, 20, .06), 0 12px 28px -16px rgba(30, 86, 181, .28); }
.il-sys__head { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: #EEF3FC; color: #1E56B5; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.il-sys--finance .il-sys__head { background: #111214; color: #FFFFFF; }
.il-sys__body { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; }
.il-sys__title { height: 20px; margin-bottom: 4px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.il-sys__field { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 28px; white-space: nowrap; color: #4F5663; }
.il-sys__field b { font-weight: 500; color: #111214; font-variant-numeric: tabular-nums; }
.il-sys--intake .il-sys__field { padding: 0 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px #C8D5EA; }
.il-sys--finance .il-sys__field + .il-sys__field { border-top: 1px solid #E2E8F2; }
.il-sys--finance .il-sys__field:last-child { border-bottom: 0; }
.il-sys__field .il-sys__empty { font-weight: 400; color: #4F5663; }
.il-sys__field > :not(.il-sys__hl) { position: relative; }
.il-sys__hl { position: absolute; left: -6px; right: -6px; top: 2px; bottom: 2px; border-radius: 7px; background: #EEF3FC; box-shadow: inset 0 0 0 1.5px #2A6FDB; }
.il-sync__links { position: relative; }
.il-sync__link { position: absolute; left: 0; right: 0; top: calc(81px + var(--i) * 32px); height: 2px; }
.il-sync__line { position: absolute; inset: 0; background: #2A6FDB; transform-origin: left; }
.il-sync__flow { position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #2A6FDB; }
.il-port--l { left: -5px; top: -4px; }
.il-port--r { right: -5px; top: -4px; }
.il-sync__chipbox { position: absolute; left: 0; top: 1px; width: 100%; height: 0; z-index: 4; }
.il-sync__chip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: #1E56B5; color: #FFFFFF; font-weight: 600; white-space: nowrap; }
.il-sync__loop { position: relative; height: 74px; }
.il-sync__seg { position: absolute; background: #2A6FDB; }
.il-sync__seg--lv { left: 36px; top: 0; width: 2px; height: 41px; transform-origin: top; }
.il-sync__seg--rv { right: 34px; top: 0; width: 2px; height: 41px; transform-origin: bottom; }
.il-sync__seg--lh { left: 52px; top: 55px; width: calc(50% - 52px); height: 2px; transform-origin: left; }
.il-sync__seg--rh { left: 50%; top: 55px; width: calc(50% - 50px); height: 2px; transform-origin: left; }
.il-sync__corner { position: absolute; top: 41px; width: 16px; height: 16px; border: 0 solid #2A6FDB; border-bottom-width: 2px; }
.il-sync__corner--l { left: 36px; border-left-width: 2px; border-bottom-left-radius: 16px; }
.il-sync__corner--r { right: 34px; border-right-width: 2px; border-bottom-right-radius: 16px; }
.il-port--top-l { left: 32px; top: -5px; }
.il-port--top-r { right: 30px; top: -5px; }
.il-sync__trail { position: absolute; top: 51px; width: 35px; height: 10px; z-index: 2; }
.il-sync__trail i { position: absolute; border-radius: 50%; background: #2A6FDB; }
.il-sync__trail--l { left: 58px; }
.il-sync__trail--l i:nth-child(1) { left: 0; top: 3px; width: 4px; height: 4px; opacity: .4; }
.il-sync__trail--l i:nth-child(2) { left: 11px; top: 2px; width: 6px; height: 6px; opacity: .7; }
.il-sync__trail--l i:nth-child(3) { left: 25px; top: 0; width: 10px; height: 10px; }
.il-sync__trail--r { right: 56px; }
.il-sync__trail--r i:nth-child(1) { left: 0; top: 0; width: 10px; height: 10px; }
.il-sync__trail--r i:nth-child(2) { left: 18px; top: 2px; width: 6px; height: 6px; opacity: .7; }
.il-sync__trail--r i:nth-child(3) { left: 31px; top: 3px; width: 4px; height: 4px; opacity: .4; }
.il-sync__pill-wrap { position: absolute; left: 0; right: 0; top: 39px; z-index: 5; display: flex; justify-content: center; }
.il-sync__pill-wrap .il-stack { justify-items: center; }
.il-sync__pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 17px; background: #FFFFFF; color: #1E56B5; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(17, 18, 20, .1), 0 8px 18px -8px rgba(30, 86, 181, .4); }
.il-sync__tick { width: 16px; height: 16px; border-radius: 50%; background: #2A6FDB; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }

/* Narrowest phones (320): tighter padding inside the two systems; type unchanged. */
@container card (max-width: 329px) { .service-card__art { padding-left: 8px; padding-right: 8px; } }
@container art (max-width: 315px) {
  .il-sync__row { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  .il-sys__head { gap: 5px; padding: 0 6px; }
  .il-sys__body { padding: 8px 6px; }
  .il-sys--intake .il-sys__field { padding: 0 5px; }
  .il-sys__field { gap: 4px; }
}

/* 3. AI with a person in the loop: the panel grows row by row (each row carries its own white slice). */
.il-loop { width: 100%; max-width: 412px; }
.il-loop__row { position: relative; padding: 10px 14px 0; background: #FFFFFF; }
.il-loop__row::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: #FFFFFF; border-radius: 0 0 14px 14px; box-shadow: 0 24px 48px -20px rgba(42, 111, 219, .45); }
.il-loop__row--first { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-radius: 14px 14px 0 0; }
.il-loop__row--last { padding-bottom: 14px; border-radius: 0 0 14px 14px; box-shadow: 0 24px 48px -20px rgba(42, 111, 219, .45); }
.il-loop__row--last::after { display: none; }
.il-loop__q { display: flex; flex-direction: column; min-width: 0; color: #4F5663; }
.il-loop__q b { font-size: 14px; line-height: 18px; font-weight: 500; color: #111214; }
.il-loop__draft { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #EEF3FC; transform-origin: top; }
.il-loop__draft-head { display: flex; align-items: center; gap: 5px; height: 18px; color: #1E56B5; font-weight: 600; }
.il-loop__status { margin-left: auto; }
.il-loop__drafting { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; white-space: nowrap; }
.il-loop__text { margin: 0; font-size: 14px; line-height: 20px; color: #111214; }
.il [data-a], .aiw [data-a] { --t: 500ms; }
.il .il-c { position: relative; --t: 80ms; }
.il-c::after { content: ""; position: absolute; right: -2px; top: 2px; width: 2px; height: 16px; background: #2A6FDB; opacity: 0; }
.il-loop__monday { position: relative; color: #4F5663; } /* the draft's colour until the strike starts (il-loop-dim) */
.il-loop__strike { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.5px; background: #4F5663; transform-origin: left; }
/* "Friday" opens its own space beside the struck word, so the sentence reflows as it is typed. */
.il-loop__open { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; }
.il-loop__friday { position: relative; margin-left: 4px; padding: 1px 4px; border-radius: 5px; background: #FFFFFF; color: #1E56B5; font-weight: 600; box-shadow: inset 0 0 0 1px #2A6FDB; }
.il-loop__review { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.il-loop__who { display: flex; flex-direction: column; min-width: 0; color: #4F5663; white-space: nowrap; }
.il-loop__who b { font-size: 13px; line-height: 16px; color: #111214; }
/* Above the next row and this row's white slice, so the button, its press ring and shadow are never cut. */
.il-loop__review > .il-stack { position: relative; z-index: 2; margin-left: auto; }
.il-loop__btn { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.il-loop__btn--approve { padding: 0 16px; background: #2A6FDB; color: #FFFFFF; }
.il-loop__btn--approved { padding: 0 12px; background: #EEF3FC; color: #1E56B5; }
.il-loop__ring { position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 0 4px rgba(42, 111, 219, .28); }
.il-loop__row--last { padding-top: 6px; }
.il-loop__sent { display: flex; align-items: center; gap: 6px; height: 20px; padding-top: 8px; border-top: 1px solid #E2E8F2; box-sizing: content-box; color: #4F5663; white-space: nowrap; }
.il-loop__sent b { font-size: 14px; line-height: 20px; font-weight: 700; color: #111214; }
.il-loop__sent > span:not(.il-loop__sent-icon):not(.il-loop__time) { font-size: 13px; }
.il-loop__sent-icon { width: 18px; height: 18px; border-radius: 50%; background: #1E56B5; color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; }
.il-loop__time { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.il-loop__audit { margin: 2px 0 0; color: #4F5663; }

/* 4. Text messaging: appointment card, connector, and the resident's phone (generic, about 9:19.5). */
/* The phone is cropped by the card's bottom edge: --phone-h is the part that shows; the rest (40px) hangs below the card and is clipped.
   --pz scales the whole handset (zoom keeps its layout, text and the measured thread scroll in step); 1.13 where there is room. */
.il-sms { --pz: 1.13; --phone-h: 330px; --appt-top: 124px; position: relative; display: flex; align-items: flex-start; width: 572px; max-width: 100%; }
.il-sms__appt { position: relative; z-index: 2; flex: none; width: 214px; margin-top: var(--appt-top); padding: 14px 16px; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 14px; box-shadow: 0 1px 2px rgba(9, 28, 74, .22), 0 20px 40px -18px rgba(9, 28, 74, .55); }
.il-sms__clinic { font-size: 13px; line-height: 18px; font-weight: 500; color: #4F5663; }
.il-sms__appt > .il-stack { align-items: start; }
.il-sms__state { display: flex; flex-direction: column; align-items: flex-start; }
.il-sms__time { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }
.il-sms__moved { color: #4F5663; white-space: nowrap; }
.il-sms__state-pill, .il-sms__confirmed { margin-top: 8px; }
.il-sms__wire { position: absolute; left: 214px; top: calc(var(--appt-top) + 63px); width: 40px; height: 2px; z-index: 1; }
.il-sms__wire-line { position: absolute; inset: 0; background: #FFFFFF; transform-origin: left; --a: il-grow-x; }
.il-sms__wire-dot { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #2A6FDB; box-shadow: inset 0 0 0 2px #FFFFFF; }
.il-sms__phone { flex: none; zoom: var(--pz); width: 248px; height: calc(var(--phone-h) + 40px); margin: 0 0 -40px calc(40px / var(--pz)); padding: 7px; background: #111214; border-radius: 40px; box-shadow: inset 0 0 0 1px #3A3D44, 0 1px 2px rgba(9, 28, 74, .22), 0 24px 44px -18px rgba(9, 28, 74, .6); }
.il-sms__screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 40px; background: #FFFFFF; border-radius: 33px; }
.il-sms__status { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 4px 22px 0 26px; color: #111214; }
.il-sms__clock { font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.il-sms__camera { position: absolute; left: 50%; top: 9px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #111214; box-shadow: inset 0 0 0 2.5px #24262B; }
.il-sms__icons { display: flex; align-items: center; gap: 5px; }
.il-sms__head { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px 0 10px; border-bottom: 1px solid #E2E8F2; color: #111214; white-space: nowrap; }
.il-sms__head b { font-size: 14px; line-height: 18px; font-weight: 600; }
.il-sms__avatar { width: 30px; height: 30px; border-radius: 50%; background: #EEF3FC; color: #1E56B5; display: flex; align-items: center; justify-content: center; flex: none; }
/* The list overflows the thread at the top (flex-end), so the end state rests on the newest message. */
.il-sms__thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.il-sms__list { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 10px 14px; }
.il-msg { max-width: 86%; padding: 7px 11px; border-radius: 16px; font-size: 12.5px; line-height: 16px; }
.il-msg--in { border-bottom-left-radius: 5px; background: #EEF0F3; color: #111214; transform-origin: bottom left; }
.il-msg--out { align-self: flex-end; border-bottom-right-radius: 5px; background: #2A6FDB; color: #FFFFFF; transform-origin: bottom right; }
/* Suggested replies, as in a rich (RCS-style) message: a grey card with one full-width option per row. */
.il-sms__card { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 10px 8px 8px; border-radius: 16px; background: #EEF0F3; }
.il-sms__card-text { padding: 0 3px 3px; font-size: 12.5px; line-height: 16px; font-weight: 600; color: #111214; }
.il-sms__opt { position: relative; display: flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 15px; background: #FFFFFF; color: #1E56B5; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.il-sms__tap { position: absolute; inset: 0; border-radius: inherit; background: rgba(42, 111, 219, .12); box-shadow: inset 0 0 0 1.5px #2A6FDB; }
.il-sms__delivered { align-self: flex-end; margin-top: -3px; padding-right: 2px; font-size: 11px; line-height: 14px; font-weight: 500; color: #4F5663; }
@container art (max-width: 571px) {
  .il-sms { --phone-h: 300px; width: 100%; flex-direction: column; align-items: flex-start; }
  .il-sms__appt { margin-top: 0; }
  .il-sms__wire { position: relative; left: 107px; top: auto; width: 2px; height: 28px; }
  .il-sms__wire-line { transform-origin: top; --a: il-grow-y; }
  .il-sms__wire-dot { left: -4px; top: -5px; }
  .il-sms__phone { margin-left: 0; }
  /* /services/: centred in its card. */
  .service-card--plain .il-sms { align-items: center; }
  .service-card--plain .il-sms__wire { left: 0; }
}
/* Narrowest phones: a slightly smaller handset so the pause/replay button keeps its own corner. */
/* Too narrow to centre the larger phone on /services/ and keep the replay button clear: align left as on the homepage. */
@container art (max-width: 355px) {
  .service-card--plain .il-sms { align-items: flex-start; }
  .service-card--plain .il-sms__wire { left: 107px; }
}
/* Smaller phones: the handset grows only as far as the button's corner allows (at least 10px clear). */
@container art (max-width: 317px) { .il-sms { --pz: 1.04; } }
@container art (max-width: 295px) { .il-sms { --pz: 1; } .il-sms__phone { width: 226px; } }

/* ---------- How AI is used here: AI draft → three steps → Approved ---------- */
.aiw { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr) 116px; align-items: start; font-family: var(--font-body); color: var(--ink); }
.aiw__draft { position: relative; z-index: 2; width: 148px; height: 148px; margin-top: 12px; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: #EEF3FC; border-radius: 16px; }
.aiw__draft-icon { width: 36px; height: 36px; border-radius: 10px; background: #FFFFFF; color: #2A6FDB; display: flex; align-items: center; justify-content: center; flex: none; }
.aiw__draft-text { display: flex; flex-direction: column; white-space: nowrap; }
.aiw__draft-text b { font-size: 16px; line-height: 22px; font-weight: 600; }
.aiw__draft-text span { font-size: 12.5px; line-height: 17px; color: #1E56B5; }
.aiw__steps { display: grid; grid-template-columns: minmax(0, 264fr) minmax(0, 256fr) minmax(0, 252fr); margin: 0; padding: 0; list-style: none; }
.aiw__step { position: relative; padding-left: 24px; }
.aiw__arrow { position: absolute; left: 0; top: 78px; width: 24px; height: 16px; display: flex; justify-content: center; color: #2A6FDB; }
.aiw__art { --fx: -16px; height: 172px; padding: 20px; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 16px; box-shadow: inset 0 0 0 1px #E2E8F2, 0 14px 28px -20px rgba(30, 86, 181, .35); font-size: 14.5px; line-height: 19px; }
.aiw__check { display: flex; align-items: center; gap: 10px; height: 44px; border-bottom: 1px solid #E2E8F2; }
.aiw__check:last-child { border-bottom: 0; }
.aiw__tick { width: 20px; height: 20px; border-radius: 50%; background: #2A6FDB; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.aiw__pending { color: #2A6FDB; }
.aiw__check-label { font-weight: 500; white-space: nowrap; }
.aiw__art--2 { justify-content: space-between; }
.aiw__reviewer { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.aiw__reviewer b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.aiw__reviewer span span { display: block; font-size: 13px; line-height: 18px; color: #4F5663; }
.aiw__avatar { width: 44px; height: 44px; border-radius: 50%; background: #1E56B5; color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; font-size: 15px; font-weight: 600; }
.aiw__btns { display: grid; }
.aiw__btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.aiw__btn--approve { background: #1E56B5; color: #FFFFFF; box-shadow: 0 0 0 4px rgba(42, 111, 219, .22); }
.aiw__btn--approved { background: #EEF3FC; color: #1E56B5; }
.aiw__log { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; white-space: nowrap; }
.aiw__log-line { position: absolute; left: 5px; top: 22px; width: 2px; height: 44px; background: #C8D5EA; transform-origin: top; }
.aiw__log-dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; flex: none; background: #FFFFFF; box-shadow: inset 0 0 0 2px #2A6FDB; }
.aiw__log--last .aiw__log-dot { background: #2A6FDB; }
.aiw__log-label { font-weight: 500; }
.aiw__log--last .aiw__log-label { font-weight: 600; }
.aiw__log-time { margin-left: auto; font-size: 13px; line-height: 17px; font-weight: 500; color: #4F5663; font-variant-numeric: tabular-nums; }
.aiw__text { margin-top: 24px; padding-right: 8px; }
.aiw__text > * { max-width: 30ch; }
.aiw__num { width: 26px; height: 26px; border-radius: 50%; background: #2A6FDB; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.aiw__title { margin-top: 12px; font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }
.aiw__desc { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.aiw__end { position: relative; padding-left: 24px; }
.aiw__approved { width: 92px; height: 100px; margin-top: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #1E56B5; color: #FFFFFF; border-radius: 16px; box-shadow: 0 16px 28px -16px rgba(30, 86, 181, .8); }
.aiw__approved b { font-size: 13.5px; line-height: 18px; font-weight: 600; }
/* Below the 1040px row: one step per row, arrows pointing down. */
@media (max-width: 1167px) {
  .aiw { --stage-a: aiw-dim; --stage-pop: aiw-dim; display: flex; flex-direction: column; align-items: stretch; }
  .aiw__draft { width: min(100%, 360px); height: auto; margin-top: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
  .aiw__steps { display: flex; flex-direction: column; }
  .aiw__step { padding: 40px 0 0; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .aiw__arrow { top: 12px; width: min(100%, 360px); }
  .aiw__arrow svg { transform: rotate(90deg); }
  .aiw__art { --fx: 0px; --fy: -12px; height: auto; min-height: 172px; }
  .aiw__text { margin-top: 0; }
  .aiw__end { padding: 40px 0 0; }
  .aiw__approved { width: min(100%, 360px); height: 64px; margin-top: 0; flex-direction: row; gap: 10px; }
}
@media (max-width: 767px) {
  .aiw__arrow { width: 100%; }
  .aiw__draft { width: 100%; }
  /* Leave 24px clear plus the 32px button beside the Approved tile. */
  .aiw__approved, .aiw__end .aiw__arrow { width: calc(100% - 56px); }
  .aiw > .motion-ctl { bottom: 16px; }
  .aiw__step { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

/* ---------- Work ---------- */
.feature-card { border-radius: var(--radius-card); background: var(--blue); color: var(--white); padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
.feature-card__title-row { display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.feature-card__title { font-size: var(--fs-h3); line-height: 1.25; }
.feature-card__title a { color: inherit; text-decoration: none; }
.feature-card__title a:hover { text-decoration: underline; }
.ext-link { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-size: 18px; font-weight: 500; text-decoration: none; text-underline-offset: 5px; min-height: 44px; }
.ext-link:hover { color: var(--white); text-decoration: underline; text-decoration-color: currentColor; }
.big-figure { margin-top: 24px; font-family: var(--font-head); font-weight: 700; letter-spacing: var(--track-head); line-height: 0.95; display: flex; align-items: baseline; gap: 12px; }
/* "26 days" stays slightly smaller than the page's H1 at every width. */
.big-figure__num { font-size: calc(var(--fs-page-title) * 0.92); font-variant-numeric: tabular-nums; }
.page-home .big-figure__num { font-size: calc(var(--fs-h1) * 0.94); }
.big-figure__unit { font-size: 0.55em; font-weight: 600; }
.big-figure__num + .big-figure__unit { font-size: calc(var(--fs-page-title) * 0.5); }
.page-home .big-figure__num + .big-figure__unit { font-size: calc(var(--fs-h1) * 0.52); }
.progress { margin-top: 24px; max-width: 680px; }
.progress__bars { display: flex; align-items: flex-end; gap: 6px; height: 28px; }
.progress__bars span { flex: 1; height: 14px; background: rgba(255, 255, 255, .5); border-radius: 2px; transform-origin: bottom center; }
.progress__bars span:first-child, .progress__bars span:last-child { height: 28px; background: var(--white); }
.progress__labels { margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; }
.progress__labels span:last-child { text-align: right; }
.feature-card__proof { margin-top: 24px; font-size: 18px; line-height: 1.6; max-width: 660px; }
.feature-card__more { margin-top: 24px; }
.feature-card__more .text-link { color: var(--white); }
.quote-card { margin: 0; align-self: end; background: var(--white); color: var(--ink); border-radius: var(--radius-md); padding: 40px; box-shadow: 0 1px 2px rgba(8, 24, 60, .12), 0 24px 48px -24px rgba(8, 24, 60, .45); }
/* Testimonial: 400 weight, about 20px, with a large opening quotation mark (the quote's own “, set large). */
.quote-card blockquote { font-size: 20px; line-height: 1.55; font-weight: 400; }
.quote-mark { display: block; height: 40px; margin: -6px 0 6px -4px; font-family: Georgia, "Times New Roman", serif; font-size: 72px; line-height: 1; font-weight: 400; color: var(--blue); }
.quote-card figcaption, .quote-by { margin-top: 24px; font-size: 15px; line-height: 1.45; }
.quote-by__name { font-weight: 600; }
.quote-by__org { font-weight: 400; color: var(--muted); }
.work-cards { margin-top: 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.work-card { border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.work-card--white { grid-column: span 5; background: var(--white); color: var(--ink); }
.work-card--blue { grid-column: span 3; background: var(--blue-deep); color: var(--white); }
.work-card--ink { grid-column: span 4; background: var(--ink-2); color: var(--white); border: 1px solid var(--line-ink); }
.work-card__label { font-size: 13px; line-height: 1.45; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.work-card--blue .work-card__label { color: var(--white); }
.work-card--ink .work-card__label { color: var(--muted-on-ink); }
.work-card__title { font-size: clamp(20px, 0.1vw + 19.6px, 21px); line-height: 1.25; }
.work-card__text { font-size: 17px; line-height: 1.55; }
.work-all { margin-top: 40px; }
.work-cards--two { margin-top: 0; }
.work-cards--two .work-card { grid-column: span 6; }
.work-cards__aside { grid-column: span 6; align-self: start; }
.on-white .work-card--white { border: 1px solid var(--line-strong); }

@media (max-width: 1279px) {
  .feature-card { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; padding: 48px; }
  .work-card--white, .work-card--blue, .work-card--ink { grid-column: span 6; }
  .work-card--ink { grid-column: span 12; }
}
@media (max-width: 1023px) {
  .feature-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .feature-card { padding: 28px 22px 22px; gap: 28px; border-radius: 26px; }
  .quote-card { padding: 24px 22px; border-radius: 20px; }
  .quote-card blockquote { font-size: 19px; }
  .work-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .work-card--white, .work-card--blue, .work-card--ink, .work-cards--two .work-card, .work-cards__aside { grid-column: auto; }
  .work-card { padding: 28px 22px; gap: 14px; border-radius: 24px; }
  .progress__labels { font-size: 14px; }
}

/* ---------- One-person company (signed note over portrait) ---------- */
.one-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "photo head" "photo body"; grid-template-rows: auto 1fr; column-gap: 88px; align-items: start; }
.one-person__photo { grid-area: photo; }
.one-person__head { grid-area: head; }
.one-person__body { grid-area: body; }
.portrait-note { position: relative; margin-left: calc(-1 * var(--gutter)); }
.portrait { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #D9E3F5; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The note overlaps only the bottom 15% of the square portrait and runs on below it (margin % = % of the photo height). */
.signed-note { position: relative; z-index: 2; width: 340px; margin: -15% 0 0 -64px; background: var(--blue-deep); color: var(--white); border-radius: var(--radius-md); padding: 28px; box-shadow: 0 40px 80px -24px rgba(8, 24, 60, .5); }
.signed-note blockquote { font-size: 18px; line-height: 1.55; font-weight: 400; }
.signed-note figcaption { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--white); font-size: 16px; font-weight: 600; }
.commitments { list-style: none; margin: var(--head-gap) 0 0; padding: 0; counter-reset: c; }
.commitments li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 20px 0; border-top: 1px solid var(--line-pale); }
.commitments li:last-child { border-bottom: 1px solid var(--line-pale); }
.commitments li::before { counter-increment: c; content: counter(c, decimal-leading-zero); font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--blue-deep); padding-top: 3px; }
.section--white .commitments li { border-color: var(--line); }

@media (max-width: 1279px) {
  .one-person { column-gap: 96px; }
  .signed-note { width: 300px; padding: 24px; margin-left: -72px; }
  .signed-note blockquote { font-size: 18px; }
}
@media (max-width: 1023px) {
  .one-person { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "body"; grid-template-rows: auto; row-gap: 32px; }
  .portrait-note { margin-left: 0; max-width: 560px; }
  .portrait { border-radius: var(--radius-md); }
  .signed-note { width: auto; margin: -15% 16px 0 32px; }
}
@media (max-width: 767px) {
  .portrait-note { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .portrait { border-radius: 0; }
  .signed-note { padding: 26px 22px; border-radius: 22px; }
  .signed-note blockquote { font-size: 18px; }
  .commitments li { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ---------- Facts panel ---------- */
.facts-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.facts-actions { margin-top: var(--head-gap); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.facts-panel { background: var(--white); border-radius: 20px; border: 1px solid #D5D9DE; box-shadow: 0 1px 2px rgba(17, 18, 20, .06), 0 30px 60px -30px rgba(17, 18, 20, .25); overflow: hidden; }
.facts-panel__head { padding: 20px 32px; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--white); font-family: var(--font-head); font-size: 16px; font-weight: 600; }
.facts-panel__head img { width: 22px; height: 22px; }
.facts-panel dl > div { padding: 16px 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: baseline; }
.facts-panel dt { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.facts-panel dd { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 400; overflow-wrap: anywhere; }
.facts-panel dd .muted { color: var(--muted); }
.facts-panel .num { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
@media (max-width: 1023px) {
  .facts-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .facts-panel__head { padding: 16px 20px; }
  .facts-panel dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 20px; }
  .facts-actions .btn { width: 100%; }
}

/* ---------- Contact band and intake form ---------- */
.contact-layout { --form-w: 440px; display: grid; grid-template-columns: minmax(0, 1fr) var(--form-w); gap: 64px; align-items: center; }
/* Wider intake form once the content column is at full width (1040px): about 560px on the homepage, 600px on /contact/. */
@media (min-width: 1168px) {
  .contact-layout { --form-w: 560px; gap: 56px; }
  .contact-layout--page { --form-w: 600px; gap: 48px; }
  .contact-layout .form-card { padding: 28px 32px 32px; }
}
.contact-lines { margin-top: var(--head-gap); display: flex; flex-direction: column; gap: 14px; }
.contact-big { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; font-family: var(--font-head); font-size: clamp(21px, 0.29vw + 19.9px, 24px); line-height: 1.2; font-weight: 600; letter-spacing: var(--track-head); width: fit-content; max-width: 100%; overflow-wrap: anywhere; min-height: 44px; }
.contact-big:hover { text-decoration: underline; text-underline-offset: 6px; }
.contact-big .icon { flex: none; }
.contact-cta { margin-top: 32px; }
.contact-cta .btn { min-height: 64px; padding: 0 34px; font-size: 19px; font-weight: 600; }
.contact-address { margin-top: 32px; font-size: 18px; }
@media (max-width: 1023px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 767px) {
  .contact-cta .btn { width: 100%; }
}

.form-card { background: var(--white); color: var(--ink); border-radius: 22px; padding: 24px; box-shadow: 0 1px 2px rgba(17, 18, 20, .1), 0 30px 60px -16px rgba(8, 24, 60, .55), 0 80px 140px -40px rgba(8, 24, 60, .55); --focus: var(--ink); }
.section--white .form-card, .form-card--flat { box-shadow: 0 1px 2px rgba(17, 18, 20, .06), 0 30px 60px -30px rgba(17, 18, 20, .25); border: 1px solid #D5D9DE; }
.form-card a:not(.btn) { color: var(--blue-deep); }
.form-card a:not(.btn):hover { color: var(--blue-deep); }
.form-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.form-top__label { font-weight: 600; color: var(--muted); }
.form-top__step { font-weight: 600; color: var(--blue-deep); }
.form-progress { height: 6px; border-radius: 6px; background: var(--line); margin: 12px 0 20px; overflow: hidden; }
.form-progress span { display: block; height: 100%; width: 100%; background: var(--blue); border-radius: 6px; transform-origin: left center; transform: scaleX(var(--p, 1)); transition: transform .3s ease-out; }
.form-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-step + .form-step { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.js-steps .form-step + .form-step { margin-top: 0; padding-top: 0; border-top: 0; }
.js-steps .form-step[hidden] { display: none; }
.form-step__legend { padding: 0; font-family: var(--font-head); font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: var(--track-head); }
.form-step__count { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--blue-deep); margin-bottom: 6px; }
.js-steps .form-step__count { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.choice-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; line-height: 1.25; border-radius: 12px; font-size: 15px; font-weight: 500; background: var(--white); border: 1.5px solid var(--line-strong); cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #6B7079; background: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--blue-deep); background: #F2F6FD; box-shadow: inset 0 0 0 1px var(--blue-deep); }
.choice input:checked + .choice__dot { border: 6px solid var(--blue-deep); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.choice--pill { min-height: 44px; padding: 6px 14px; border-radius: 999px; font-size: 15px; }
.choice--pill .choice__dot { width: 16px; height: 16px; }
.choice--pill input:checked + .choice__dot { border-width: 5px; }
.field { margin-top: 16px; }
.field > label, .field__label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.field__opt { font-weight: 400; color: var(--muted); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #8A9099; border-radius: var(--radius-field); background: var(--white); font-size: 16px; line-height: 1.4; color: var(--ink); }
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23111214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7l4.5 4.5L13.5 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--error); }
.field-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--error); line-height: 1.35; }
.field-error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: var(--white); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.field-error[hidden] { display: none; }
.form-error-summary { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--error); font-size: 15px; }
.form-error-summary:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-actions { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-actions--end { justify-content: flex-end; }
.form-btn { min-height: 48px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--blue-deep); color: var(--white); font-size: 16px; font-weight: 600; cursor: pointer; }
.form-btn:hover { background: var(--ink); }
.form-btn[disabled] { opacity: .7; cursor: progress; }
.form-btn--back { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; }
.form-btn--back:hover { background: var(--surface); color: var(--ink); }
.form-note { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.form-status { margin-top: 14px; font-size: 15px; font-weight: 600; }
.form-status--error { padding: 14px 16px; border-radius: 12px; border: 2px solid var(--error); color: var(--ink); font-weight: 500; }
.form-success { text-align: left; }
.form-success__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-deep); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.form-success__text { margin-top: 16px; font-family: var(--font-head); font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: var(--track-head); }
.form-success .btn { margin-top: 20px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--surface); font-size: 15px; line-height: 1.5; cursor: pointer; }
.consent input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--blue-deep); cursor: pointer; }
@media (max-width: 359px) {
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--white); padding: 56px 0 32px; --focus: var(--white); }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--white); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start; }
.site-footer__address { margin-top: 24px; font-size: 16px; line-height: 1.6; color: var(--muted-on-ink); }
.site-footer__contact { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 500; }
.site-footer__contact a { min-height: 32px; display: inline-flex; align-items: center; width: fit-content; }
.site-footer__heading { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-on-ink); margin-bottom: 14px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.site-footer__col a { font-size: 16px; font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; }
.site-footer__badge { display: flex; justify-content: flex-end; }
.site-footer__badge img { height: 56px; width: auto; }
.site-footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-ink); font-size: 15px; color: var(--muted-on-ink); }
@media (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__badge { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .site-footer { padding: 56px 0 32px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; }
  .site-footer__company { grid-column: 1 / -1; }
  .site-footer__badge { grid-column: 1 / -1; }
  .site-footer__bottom { margin-top: 48px; }
}

.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ink); color: var(--white); padding: 16px 0; border-top: 1px solid var(--line-ink); --focus: var(--white); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; font-size: 15px; }
.cookie-banner a { color: var(--white); }

/* ---------- Inner pages ---------- */
.page-header { padding: 64px 0 56px; }
.page-header__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.page-header--photo .page-header__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
.page-label { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.on-blue .page-label, .on-dark .page-label { color: var(--white); }
.page-title { margin-top: 14px; font-size: var(--fs-page-title); line-height: 1.1; max-width: 960px; }
/* Work's H1 is longer than one 1040px line at 44px: two even lines. */
.page-work .page-title { text-wrap: balance; }
.page-intro { margin-top: 24px; font-size: var(--fs-lead); line-height: 1.55; max-width: 720px; color: var(--muted); }
.on-blue .page-intro, .on-dark .page-intro { color: inherit; }
.page-header .btn-row { margin-top: 32px; }
.page-header__photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; max-width: 420px; justify-self: end; width: 100%; background: #D9E3F5; }
.page-header__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.page-header__cover { margin-top: 40px; border-radius: var(--radius-md); overflow: hidden; }
.page-header__cover img { width: 100%; }
@media (max-width: 1023px) {
  .page-header--photo .page-header__grid { grid-template-columns: minmax(0, 1fr); }
  .page-header__photo { justify-self: start; max-width: 360px; }
}
@media (max-width: 767px) {
  .page-header { padding: 48px 0 48px; }
  .page-title { margin-top: 14px; }
  .page-header .btn-row .btn { width: 100%; }
}

.content-narrow { max-width: 820px; }
.prose { font-size: 18px; line-height: 1.6; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: var(--fs-inner-h2); line-height: 1.2; margin-top: 40px; }
.prose h3 { font-size: 20px; line-height: 1.25; margin-top: 32px; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--blue-deep); }
.prose .lead { font-size: var(--fs-lead); }
.effective { font-size: 16px; color: var(--muted); font-weight: 500; }

.stack { display: flex; flex-direction: column; gap: 56px; }
.block-title { font-size: var(--fs-inner-h2); line-height: 1.2; }
.block-title + * { margin-top: 20px; }
.two-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
@media (max-width: 1023px) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 24px; } .stack { gap: 56px; } }

.service-section { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: start; padding: 64px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.service-section:first-child { border-top: 0; padding-top: 0; }
.service-section__title { font-size: var(--fs-inner-h2); line-height: 1.2; }
.service-section__text { margin-top: 18px; }
.service-section__examples-title { margin-top: 28px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.check-list li::before { content: ""; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: var(--blue-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.4l3 3 6-6.4'/%3E%3C/svg%3E") center / 14px no-repeat; }
.service-section__proof { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.service-section__art { position: relative; }
.service-section .work-cards--two { margin-top: 24px; grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .service-section { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 56px 0; }
}

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 24px; border-radius: 20px; background: var(--surface); }
.steps li::before { counter-increment: s; content: counter(s); width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.steps h3 { font-size: 20px; line-height: 1.25; }
.steps p { margin-top: 6px; }

.table-wrap { overflow-x: auto; border: 1px solid #D5D9DE; border-radius: 20px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.data-table caption { text-align: left; }
.data-table th, .data-table td { padding: 18px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.data-table thead th { background: var(--ink); color: var(--white); border-top: 0; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.data-table tbody th { font-weight: 600; width: 34%; }
@media (max-width: 767px) {
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100%; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tbody th { width: 100%; padding-bottom: 4px; }
  .data-table tbody td { border-top: 0; padding-top: 0; }
}

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; font-family: var(--font-head); font-size: 19px; font-weight: 600; line-height: 1.3; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; transition: transform .2s; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details > div { padding: 0 4px 24px; max-width: 760px; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; height: 3px; background: var(--blue); }
.timeline li { position: relative; padding-top: 40px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: 50%; background: var(--white); border: 4px solid var(--blue-deep); }
.timeline time { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.timeline p { margin-top: 6px; }
@media (max-width: 767px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 40px; }
  .timeline::before { left: 10px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .timeline li { padding-top: 0; }
  .timeline li::before { left: -40px; }
}

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.principles li { padding: 28px; border-radius: 20px; border: 1px solid #D5D9DE; }
.principles h3 { font-size: 20px; line-height: 1.25; }
.principles p { margin-top: 8px; }
@media (max-width: 1023px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .principles { grid-template-columns: minmax(0, 1fr); } }

.callout { padding: 32px; border-radius: var(--radius-md); background: var(--pale); }
.callout--surface { background: var(--surface); }
.partner-note { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px; border-radius: var(--radius-md); border: 1px solid #D5D9DE; }
.partner-note img { height: 64px; width: auto; }
.partner-note p { font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.35; }

.news-list { display: grid; gap: 20px; }
.news-card { display: block; padding: 32px; border-radius: var(--radius-md); border: 1px solid #D5D9DE; background: var(--white); text-decoration: none; color: inherit; transition: transform .2s ease-out, box-shadow .2s ease-out; }
/* Whole-card link: lift and a softer, deeper shadow; the arrow slides; the title does not change. */
.news-card:hover { color: inherit; text-decoration: none; transform: translateY(-3px); box-shadow: 0 2px 6px -2px rgba(8, 24, 60, .1), 0 26px 50px -26px rgba(8, 24, 60, .4); }
.news-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius-md); }
.news-card .text-link svg { transition: transform .2s ease-out; }
.news-card:hover .text-link svg, .news-card:focus-visible .text-link svg { transform: translateX(4px); }
.news-card__meta { font-size: 14px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-deep); }
.news-card__title { margin-top: 10px; font-size: clamp(21px, 0.19vw + 20.3px, 23px); line-height: 1.25; }
.news-card__text { margin-top: 10px; color: var(--muted); }
.news-card .text-link { margin-top: 8px; }
.article-cover { margin-top: 40px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); }
.breadcrumb { font-size: 15px; font-weight: 500; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--muted); }
.breadcrumb a { color: var(--blue-deep); display: inline-block; padding: 4px 0; }

.contact-band { padding: 56px 0; }
.contact-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.contact-band__title { font-size: var(--fs-h2); line-height: 1.1; }
.contact-band__sub { margin-top: 8px; font-size: 19px; }
@media (max-width: 767px) { .contact-band { padding: 56px 0; } .contact-band .btn { width: 100%; } }


/* ==========================================================================
   Motion. Default CSS is the END state, so no-JS and reduce-motion users see
   the finished vignettes. html.motion-ok (set inline in <head>) arms the stories.
   Only transform and opacity animate.
   ========================================================================== */
.motion-ok [data-story] [data-step] {
  transition: opacity var(--t) cubic-bezier(.2, .7, .2, 1) var(--d), transform var(--t) cubic-bezier(.2, .7, .2, 1) var(--d);
}
.motion-ok [data-story]:not(.is-playing) [data-step] { transition: none; }
.motion-ok [data-story]:not(.is-playing) [data-step="in"] { opacity: 0; }
.motion-ok [data-story]:not(.is-playing) [data-step="up"] { opacity: 0; transform: translateY(14px); }
.motion-ok [data-story]:not(.is-playing) [data-step="down"] { opacity: 0; transform: translateY(-16px); }
.motion-ok [data-story]:not(.is-playing) [data-step="pop"] { opacity: 0; transform: scale(.9); }
/* ---- Illustration stories: one keyframe animation per [data-a] element, timed by --d (delay) and --t (duration).
   Paused on its first frame until the story plays; the 100% keyframe always equals the default (end-state) CSS.
   The timing properties do not inherit, so a nested element never picks up its parent's timing. ---- */
@property --a { syntax: '*'; inherits: false; }
@property --e { syntax: '*'; inherits: false; }
@property --d { syntax: '<time>'; inherits: false; initial-value: 0ms; }
@property --t { syntax: '<time>'; inherits: false; initial-value: 320ms; }
@property --fx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fy { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fs { syntax: '<number>'; inherits: false; initial-value: 1; }
.motion-ok [data-story] [data-a] { animation: var(--a) var(--t) var(--e, cubic-bezier(.2, .7, .2, 1)) var(--d) both paused; }
.motion-ok [data-story] .il-spin { animation: il-rotate 1000ms linear 0ms 12 both paused; } /* 1s per turn for the whole story */
/* Typing caret: shown after each word only while it is the newest one (forwards fill, so it is hidden before). */
.motion-ok [data-story] .il-c::after { animation: il-caret var(--cw, 35ms) linear var(--cd, 0ms) forwards paused; }
.motion-ok [data-story].is-playing [data-a], .motion-ok [data-story].is-playing .il-spin,
.motion-ok [data-story].is-playing .il-c::after { animation-play-state: running; }
/* Pause control: freeze where it is (an in-progress arc becomes three dots). Stopped before it ever played: show the end state.
   The How AI step text is real content: pausing, or a hover/focus replay, shows it at once. */
.motion-ok [data-story].is-paused .il-spin { display: none; }
.motion-ok [data-story].is-paused .il-dots { display: block; }
.motion-ok [data-story].is-paused .aiw__text[data-a], .motion-ok [data-story].is-hover-replay .aiw__text[data-a] { animation: none !important; }
.motion-ok [data-story].is-paused [data-a], .motion-ok [data-story].is-paused .il-spin, .motion-ok [data-story].is-paused .il-c::after { animation-play-state: paused !important; }
.motion-ok [data-story].is-static [data-a], .motion-ok [data-story].is-static .il-spin, .motion-ok [data-story].is-static .il-c::after { animation: none !important; }
.motion-ok [data-story].is-reset [data-a], .motion-ok [data-story].is-reset .il-spin,
.motion-ok [data-story].is-reset .il-c::after { animation: none !important; }

@keyframes il-in { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(var(--fs)); } to { opacity: 1; transform: none; } }
@keyframes il-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes il-word { from { opacity: 0; } to { opacity: 1; } }
@keyframes il-blip { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes il-pop { 0% { opacity: 0; transform: scale(.6); } 65% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes il-bubble { 0% { opacity: 0; transform: scale(.7); } 65% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes il-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes il-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes il-grow-y-up { from { transform: scaleY(0); } to { transform: none; } }
@keyframes il-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes il-caret { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* Story timelines (generated from absolute times; each step 450–600ms, then a ~1–1.6s hold). */
/* 1. Online forms (9.1 s): docs 0 · into the rail 1600–2500 · drops into New 3700 · to In review 5800 · to Done 8000 */
@keyframes il-forms-paper { 0% { opacity: 0; transform: translateY(14px) rotate(-4deg); } 5.49%, 17.58% { opacity: 1; transform: rotate(-4deg); } 27.47% { opacity: .75; transform: translate(var(--paper-x), var(--paper-y)) scale(var(--paper-s)); } 30.22%, 100% { opacity: 0; transform: translate(var(--paper-x), var(--paper-y)) scale(var(--paper-s)); } }
@keyframes il-forms-sheet { 0%, 1.32% { opacity: 0; transform: translateY(14px) rotate(3deg); } 6.81%, 18.13% { opacity: 1; transform: rotate(3deg); } 28.02% { opacity: .75; transform: translate(var(--sheet-x), var(--sheet-y)) scale(var(--sheet-s)); } 30.77%, 100% { opacity: 0; transform: translate(var(--sheet-x), var(--sheet-y)) scale(var(--sheet-s)); } }
@keyframes il-forms-hb { 0%, 40.66% { opacity: 0; transform: translate(var(--hb-x1), calc(var(--hb-y1) - 14px)); } 46.15%, 63.74% { opacity: 1; transform: translate(var(--hb-x1), var(--hb-y1)); } 69.78%, 87.91% { opacity: 1; transform: translate(var(--hb-x2), var(--hb-y2)); } 93.96%, 100% { opacity: 1; transform: translate(0px, 0px); } }
@keyframes il-forms-push1 { 0%, 40.66% { transform: translate(0px, 0px); } 46.15%, 63.74% { transform: translate(var(--push-x), var(--push-y)); } 69.23%, 100% { transform: translate(0px, 0px); } }
@keyframes il-forms-push2 { 0%, 63.74% { transform: translate(0px, 0px); } 69.23%, 87.91% { transform: translate(var(--push-x), var(--push-y)); } 93.41%, 100% { transform: translate(0px, 0px); } }
@keyframes il-forms-push3 { 0%, 87.91% { transform: translate(calc(-1 * var(--push-x)), calc(-1 * var(--push-y))); } 93.41%, 100% { transform: translate(0px, 0px); } }
@keyframes il-forms-ring { 0%, 40.66% { opacity: 0; } 46.15% { opacity: 1; } 52.75% { opacity: .35; } 59.34% { opacity: 1; } 65.93% { opacity: .35; } 72.53% { opacity: 1; } 79.12% { opacity: .35; } 85.71% { opacity: 1; } 90.11%, 94.51% { opacity: 1; } 100% { opacity: 0; } }
@keyframes il-forms-p-new { 0%, 66.48% { opacity: 1; } 71.43%, 100% { opacity: 0; } }
@keyframes il-forms-p-rev { 0%, 66.48% { opacity: 0; } 71.43%, 90.66% { opacity: 1; } 95.6%, 100% { opacity: 0; } }
@keyframes il-forms-p-done { 0%, 90.66% { opacity: 0; } 95.6%, 100% { opacity: 1; } }
@keyframes il-forms-paper-nr { 0% { opacity: 0; transform: translateY(14px) rotate(-4deg); } 5.49%, 17.58% { opacity: 1; transform: rotate(-4deg); } 21.43% { opacity: .25; } 25.27%, 100% { opacity: 0; transform: translate(var(--paper-x), var(--paper-y)) scale(var(--paper-s)); } }
@keyframes il-forms-sheet-nr { 0%, 1.32% { opacity: 0; transform: translateY(14px) rotate(3deg); } 6.81%, 18.13% { opacity: 1; transform: rotate(3deg); } 21.43% { opacity: .25; } 25.27%, 100% { opacity: 0; transform: translate(var(--sheet-x), var(--sheet-y)) scale(var(--sheet-s)); } }
@keyframes il-forms-c-new1 { 0%, 41.76% { opacity: 1; transform: none; } 46.7% { opacity: 0; transform: translateY(-6px); } 64.29% { opacity: 0; transform: translateY(6px); } 69.23%, 100% { opacity: 1; transform: none; } }
@keyframes il-forms-c-new2 { 0%, 41.76% { opacity: 0; transform: translateY(6px); } 46.7% { opacity: 1; transform: none; } 64.29% { opacity: 1; transform: none; } 69.23%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes il-forms-c-rev1 { 0%, 67.03% { opacity: 1; transform: none; } 71.98% { opacity: 0; transform: translateY(-6px); } 88.46% { opacity: 0; transform: translateY(6px); } 93.41%, 100% { opacity: 1; transform: none; } }
@keyframes il-forms-c-rev2 { 0%, 67.03% { opacity: 0; transform: translateY(6px); } 71.98% { opacity: 1; transform: none; } 88.46% { opacity: 1; transform: none; } 93.41%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes il-forms-c-done2 { 0%, 91.21% { opacity: 0; transform: translateY(6px); } 96.15% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes il-forms-c-done1 { 0%, 91.21% { opacity: 1; transform: none; } 96.15% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-6px); } }
/* 2. Connected systems (8.75 s): systems 0 · lines 1550 · values 3200/3700/4200 (1.2 s each) · sync line 6050 · synced 8250 */
@keyframes il-sync-syncing { 0%, 76.57% { opacity: 0; transform: scale(.9); } 81.71%, 94.29% { opacity: 1; transform: none; } 96.57%, 100% { opacity: 0; transform: none; } }
@keyframes il-sync-chip { 0% { opacity: 0; transform: translateX(24%) scale(.85); } 7.89% { opacity: 1; transform: translateX(24%); } 71.05%, 86.84% { opacity: 1; transform: translateX(74%); } 100% { opacity: 0; transform: translateX(74%); } }
/* 3. AI with a person in the loop (10.1 s): question 0 · draft typed 1750–3700 · reviewer 4350 · strike 5450 · Friday opens 5850–6250, typed 6450–7000 (110ms/char) · approve 8000 · sent 9250 */
@keyframes il-loop-approve { 0%, 79.21% { opacity: 1; transform: none; } 80.5% { transform: scale(.95); } 82.18% { transform: none; } 83.17% { opacity: 1; } 85.15%, 100% { opacity: 0; transform: none; } }
@keyframes il-loop-ring1 { 0%, 79.21% { opacity: 0; transform: scale(.9); } 82.18% { opacity: 1; transform: none; } 83.17% { opacity: 1; } 85.15%, 100% { opacity: 0; transform: none; } }
@keyframes il-loop-ring2 { 0%, 83.17% { opacity: 0; } 85.15%, 90.59% { opacity: 1; } 95.54%, 100% { opacity: 0; } }
/* 4. Text messaging (7.5 s): reminder 500 · reply 1900 · two times 3300 · tap 4750 · reply 5100 · booked 6300 · card flips 6600 */
@keyframes il-sms-before { 0%, 88% { opacity: 1; transform: none; } 91.33%, 100% { opacity: 0; transform: perspective(400px) rotateX(90deg); } }
@keyframes il-sms-after { 0%, 91.33% { opacity: 0; transform: perspective(400px) rotateX(-90deg); } 95.33%, 100% { opacity: 1; transform: none; } }
@keyframes il-sms-sent { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes il-sms-resched { 0%, 28% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes il-sms-scroll { 0%, 24.67% { transform: translateY(var(--sy1, 0px)); } 30%, 43.33% { transform: translateY(var(--sy2, 0px)); } 48.67%, 67.33% { transform: translateY(var(--sy3, 0px)); } 72.67%, 72.67% { transform: translateY(var(--sy4, 0px)); } 78%, 83.33% { transform: translateY(var(--sy5, 0px)); } 88.67%, 100% { transform: translateY(var(--sy6, 0px)); } }
/* 5. How AI is used here (8 s): draft 0 · arrow 250 · checks 900 (resolve 1750/2150/2550) · person 3350 · log 5200 · approved 7400 */
@keyframes aiw-approve { 0%, 51.25% { opacity: 1; transform: none; } 52.75% { transform: scale(.96); } 55% { transform: none; } 65% { opacity: 1; } 68.12%, 100% { opacity: 0; transform: none; } }

/* Single-purpose motions used inside the stories */
@keyframes il-sync-trail-l { 0% { opacity: 0; transform: translateX(-28px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes il-sync-trail-r { 0% { opacity: 0; transform: translateX(28px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes il-flash { 0% { opacity: 0; } 15% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes il-loop-open { from { max-width: 0; } to { max-width: var(--fw, 80px); } } /* the one layout animation: "Friday" opens to its own width (--fw, site.js) so the sentence reflows once */
/* How AI stacked: the stages wait in place at 35% and come up to full in turn. */
@keyframes aiw-dim { from { opacity: .35; } to { opacity: 1; } }
@keyframes il-loop-dim { from { color: #111214; } to { color: #4F5663; } }
@keyframes il-loop-expand { from { opacity: 0; transform: scaleY(.35); } to { opacity: 1; transform: none; } }

/* Section headings and cards: fade up 16px on first view. */
.motion-ok [data-reveal] { transition: opacity 300ms ease-out, transform 300ms ease-out; }
.motion-ok [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1023px) { .one-person__body .commitments { margin-top: 0; } }
.sms-terms > div { padding: 16px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; }
.sms-terms > div:last-child { border-bottom: 1px solid var(--line); }
.sms-terms dt { font-weight: 600; }
.sms-terms dd { margin: 0; }
@media (max-width: 767px) { .sms-terms > div { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 359px) {
  .site-header__bar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand__name { font-size: 14px; }
  .site-header__actions { gap: 6px; }
}
.prose a, .page-intro a, .facts-panel dd a { overflow-wrap: anywhere; }
/* Header between 1024 and 1199: keep everything on one line. */
.site-nav__list a, .btn--header { white-space: nowrap; }
@media (max-width: 1199px) and (min-width: 1024px) {
  .site-header__bar { gap: 16px; }
  .site-nav__list { gap: 16px; }
  .site-nav__list a { font-size: 15px; }
  .btn--header { padding: 0 16px; font-size: 15px; }
  .site-header__actions { gap: 10px; }
}
/* reCAPTCHA v3 badge hidden; the required notice is shown beside each submit button instead. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--muted); }

@media (min-width: 1024px) {
  /* Hero buttons on one line in the narrower text column. */
  .hero__actions .btn { min-height: 56px; padding: 0 22px; font-size: 17px; }
  /* Three equal work cards at the 1040px width. */
  .work-card--white, .work-card--blue, .work-card--ink { grid-column: span 4; }
}
.btn:hover, .brand:hover, .service-card:hover, .icon-btn:hover, .skip-link:hover, .news-card:hover, .contact-big:hover .icon { text-decoration: none; }

/* ---- One-person section: commitments left, unmirrored portrait right (Igor faces left, toward the text) ---- */
@media (min-width: 1024px) {
  .one-person { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head photo" "body photo"; }
  .one-person .portrait-note, .portrait-note--note-left { margin-left: 0; margin-right: 0; }
}
@media (max-width: 1023px) {
  /* Stacked, photo first. */
  .one-person { grid-template-areas: "photo" "head" "body"; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Narrow photo column: the note spans the photo and reaches 48px toward the text. */
  .signed-note { width: auto; margin-left: -48px; }
}

/* ==========================================================================
   Inner-page rhythm (Nov 10): alternating bands, cards with icons, chips, disclosure, timeline.
   Bands: white / pale (#EEF3FC); cards are white with a subtle border and soft shadow.
   ========================================================================== */
.band-head { max-width: 720px; }
.band-head + * { margin-top: 40px; }
.band-intro { margin-top: 12px; font-size: 18px; color: var(--muted); }
.eyebrow { font-family: var(--font-body); font-size: 13px; line-height: 1.45; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.eyebrow--num { display: flex; align-items: center; gap: 12px; color: var(--blue-deep); }
.eyebrow--num::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .5; }
.eyebrow + h2, .eyebrow + h3 { margin-top: 10px; }

.card { background: var(--white); border: 1px solid #E1E6EE; border-radius: 20px; padding: 28px; box-shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 14px 32px -20px rgba(17, 30, 60, .22); }
.card__icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--pale); color: var(--blue-deep); }
.card__title { margin-top: 18px; font-size: 20px; line-height: 1.25; }
.card__title:first-child { margin-top: 0; }
.card__text { margin-top: 8px; font-size: 17px; line-height: 1.55; }
.card__note { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.card .check-list { margin-top: 14px; font-size: 17px; }
.card-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.card-grid--3 { --cols: 3; }
.card-grid--4 { --cols: 4; }
.card-grid > .card { height: 100%; }
@media (max-width: 1023px) { .card-grid--3, .card-grid--4 { --cols: 2; } }
@media (max-width: 767px) { .card-grid { --cols: 1 !important; gap: 16px; } .card { padding: 24px 22px; } }
/* Small cards: icon beside the text. */
.card--row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 24px; }
.card--row .card__text { margin-top: 0; padding-top: 9px; }
.card--row .card__title + .card__text { padding-top: 0; margin-top: 6px; }
.card--row .card__title { padding-top: 10px; }
/* Highlighted callout (one per page at most). */
.card--highlight { border: 1.5px solid var(--blue-deep); background: var(--white); }
.card--highlight .card__icon { background: var(--blue-deep); color: var(--white); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--pale); color: var(--ink); font-size: 16px; line-height: 1.35; }
.chip .lucide { color: var(--blue-deep); flex: none; }
.chip b { font-weight: 600; }

/* Disclosure (Procurement codes): native details, keyboard accessible. */
.disclosure { margin-top: 24px; border-top: 1px solid var(--line-strong); }
.disclosure summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 52px; margin: 8px -14px 0; padding: 12px 14px; border-radius: 12px; font-family: var(--font-head); font-size: 18px; font-weight: 600; transition: background-color .15s; }
.disclosure summary:hover { background: var(--pale); }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary .lucide { flex: none; color: var(--blue-deep); transition: transform .2s; }
.disclosure[open] summary .lucide { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .disclosure summary, .disclosure summary .lucide { transition: none; } }
.disclosure__body { padding: 4px 0 8px; }
.code-list > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--line); }
.code-list dt { padding-top: 3px; }
.code-list dd { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
@media (max-width: 767px) { .code-list > div { grid-template-columns: minmax(0, 1fr); } }

/* Proof quote card (Services: taking over). */
.proof-card { position: relative; background: var(--white); border: 1px solid #E1E6EE; border-radius: 20px; padding: 28px 32px 30px; box-shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 14px 32px -20px rgba(17, 30, 60, .22); }
.proof-card .quote-mark { height: 36px; margin-top: 8px; }
.proof-card blockquote { margin: 0; font-size: 19px; line-height: 1.55; }

/* Quieter proof cards on inner pages (white, bordered; label muted). */
.work-cards--quiet .work-card { background: var(--white); color: var(--ink); border: 1px solid #E1E6EE; box-shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 14px 32px -20px rgba(17, 30, 60, .22); border-radius: 20px; }
.work-cards--quiet .work-card .work-card__label { color: var(--muted); }

/* Services: one band per service. */
.svc { scroll-margin-top: 24px; }
.svc__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.svc__proof { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.svc .work-cards { margin-top: 48px; }
.svc__examples-title { margin-top: 28px; }
@media (max-width: 1023px) { .svc__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Facts panel: quiet footer row. */
.facts-panel__more { padding: 6px 28px 8px; border-top: 1px solid var(--line); }
@media (max-width: 767px) { .facts-panel__more { padding: 4px 20px 6px; } }
.facts-panel--compact dl > div { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 767px) { .facts-panel--compact dl > div { grid-template-columns: minmax(0, 1fr); } }

/* Page header with buttons below the intro (Company facts). */
.page-header .btn-row { margin-top: 28px; }
/* 404 page */
.notfound { padding-bottom: 96px; }
.notfound__links { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 18px; }
.notfound__links .text-link { min-height: 44px; display: inline-flex; align-items: center; }

/* How Vigorous Software works: hero with the portrait and signed note as one composition. */
.hvw-hero { padding: 64px 0 72px; }
.hvw-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.hvw-hero .portrait { border-radius: var(--radius-md); }
.hvw-hero .portrait-note { margin: 0; }
@media (max-width: 1023px) {
  .hvw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hvw-hero .portrait-note { max-width: 520px; }
}
@media (max-width: 767px) {
  .hvw-hero { padding: 48px 0 56px; }
  .hvw-hero .portrait-note { margin: 0 calc(-1 * var(--gutter)); max-width: none; }
  .hvw-hero .portrait { border-radius: 0; }
}

/* Process stepper: numbered markers on a connecting line, title and short description below; vertical below 1100px. */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.stepper__step { position: relative; }
.stepper__step:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: -20px; height: 2px; border-radius: 2px; background: var(--line-pale); }
.stepper__marker { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-deep); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.stepper__title { margin-top: 20px; font-size: 18px; line-height: 1.25; font-weight: 600; }
.stepper__text { margin-top: 8px; max-width: 22ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1099px) {
  .stepper { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
  .stepper__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
  .stepper__step:last-child { padding-bottom: 0; }
  .stepper__step:not(:last-child)::after { top: 56px; bottom: 12px; left: 21px; right: auto; width: 2px; height: auto; }
  .stepper__body { padding-top: 10px; }
  .stepper__title { margin-top: 0; }
  .stepper__text { max-width: 46ch; }
}
@media (max-width: 767px) { .stepper__step { gap: 16px; padding-bottom: 28px; } }

/* Icon list: two columns without boxes, icon in a soft circle, short title, sentence below. */
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; }
.icon-list__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.icon-list__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--blue-deep); box-shadow: 0 0 0 1px #DCE4F2; }
.section--white .icon-list__icon { background: var(--pale); box-shadow: none; }
.icon-list__title { padding-top: 2px; font-size: 18px; line-height: 1.25; font-weight: 600; }
.icon-list__text { margin-top: 6px; font-size: 17px; line-height: 1.55; }
@media (max-width: 767px) { .icon-list { grid-template-columns: minmax(0, 1fr); gap: 28px; } .icon-list__item { gap: 16px; } }

/* Support commitments: one card, label + standard in two columns. */
.commit-card { padding: 8px 32px; }
.commit-card > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4px 32px; padding: 20px 0; border-top: 1px solid var(--line); }
.commit-card > div:first-child { border-top: 0; }
.commit-card dt { font-family: var(--font-head); font-size: 18px; line-height: 1.35; font-weight: 600; }
.commit-card dd { margin: 0; font-size: 17px; line-height: 1.55; }
@media (max-width: 767px) { .commit-card { padding: 4px 22px; } .commit-card > div { grid-template-columns: minmax(0, 1fr); } }

/* FAQ in a card. */
.faq--card { border-top: 0; background: var(--white); border: 1px solid #E1E6EE; border-radius: 20px; padding: 4px 28px; box-shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 14px 32px -20px rgba(17, 30, 60, .22); }
.faq--card details:last-child { border-bottom: 0; }
.faq--card summary { font-size: 18px; padding: 20px 0; }
.faq--card summary .icon { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--pale); color: var(--blue-deep); }
.faq--card details > div { padding: 0 0 22px; }
@media (max-width: 767px) { .faq--card { padding: 0 20px; } }

/* How AI is used here on a pale band: the draft tile turns white so it stays visible. */
.section--pale .aiw__draft { background: var(--white); box-shadow: inset 0 0 0 1px #DCE5F4; }
.section--pale .aiw__draft-icon { background: var(--pale); }
.section--pale .aiw > .motion-ctl { background: var(--white); }

/* About: OpenAI box on the pale story band. */
.section--pale .partner-note { background: var(--white); border-color: #E1E6EE; }
.partner-note .text-link { margin-top: 4px; }

/* News: one featured item. */
.news-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 32px; }
.news-feature__media { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.news-feature__media img { width: 100%; height: auto; }
.news-feature__title { margin-top: 10px; font-size: var(--fs-inner-h2); line-height: 1.2; }
.news-feature__text { margin-top: 12px; font-size: 18px; }
.news-feature__links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 28px; }
@media (max-width: 1023px) { .news-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 767px) { .news-feature { padding: 20px; } }

/* Agencies: link under the proof card. */
.after-cards { margin-top: 24px; }
.check-list--lg { margin-top: 0; gap: 14px; font-size: 18px; line-height: 1.55; }
.check-list--lg li::before { margin-top: 5px; }
/* Compact link cards (Agencies: what Vigorous Software builds), titles only. */
.link-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.link-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px; border-radius: 16px; background: var(--white); border: 1px solid #E1E6EE; box-shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 14px 32px -20px rgba(17, 30, 60, .22); color: var(--ink); text-decoration: none; font-family: var(--font-head); font-size: 17px; line-height: 1.3; font-weight: 600; transition: border-color .15s; }
.link-card:hover { color: var(--ink); text-decoration: none; border-color: var(--blue-deep); }
.link-card .icon { flex: none; color: var(--blue-deep); transition: transform .15s; }
.link-card:hover .icon { transform: translateX(3px); }
@media (max-width: 1167px) { .link-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .link-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } .link-card { flex-direction: row; align-items: center; padding: 16px 18px; } }
.card__more { margin-top: 8px; }
.public-sector { padding: 36px; }
.public-sector__head { display: flex; align-items: center; gap: 16px; }
.public-sector__head .block-title + * { margin-top: 0; }
.public-sector__cols { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.public-sector__cols .card__title { margin-top: 0; }
@media (max-width: 767px) { .public-sector { padding: 24px 22px; } .public-sector__cols { grid-template-columns: minmax(0, 1fr); } }
.about-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.about-story .prose { font-size: 19px; }
.about-facts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.about-facts .block-title + * { margin-top: 24px; }
.about-facts__actions { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.about-facts__actions .btn { min-height: 52px; font-size: 17px; }
@media (max-width: 1023px) { .about-story, .about-facts { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.section > .container > .block-title + * { margin-top: 32px; }
.sec-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: start; padding: 32px; }
.sec-card .sec-card__title { margin-top: 8px; }
.sec-chips { margin-top: 18px; }
.sec-card__title { font-size: 22px; }
@media (max-width: 767px) { .sec-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 22px; } .sec-card .sec-card__title { margin-top: 0; } }

/* /dev/type-preview/ (local only) */
.hero__title { font-weight: 700; }
.tp-wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.tp-grid { margin-top: 32px; display: flex; gap: 24px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.tp-col { flex: none; width: 600px; zoom: .73; } /* 32px padding each side leaves the hero's real 536px text width */
.tp-name { margin-bottom: 12px; font-size: 16px; min-height: 2.9em; }
.tp-hero { padding: 40px 32px 44px; border-radius: 24px; }
.tp-hero .hero__title { margin-top: 16px; }
.tp-services { margin-top: 40px; }
.tp-card { margin-top: 24px; }
.tp-card .service-card { min-height: 0; }
/* Franklin case study: testimonial as a white card on the pale band. */
.quote-card--page { margin: 0; align-self: flex-start; max-width: 860px; border: 1px solid #E1E6EE; box-shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 14px 32px -20px rgba(17, 30, 60, .22); }