/* The hero splits in two, after the Ease Health home. On the left, a paper tile holds the headline and
   the lede. Under it, one large orange tile asks for a demo. On the right, a sky tile holds the status
   card that cycles one record at a time through its steps. The sky and the plane stay the same. The scene
   along the foot of the sky changes with the record, so a deck permit stands over a new house, a rental
   over a main street of flats, a pothole over a river town and its bridge, and a zoning permit over a
   cleared lot. On a wide screen the whole hero, the demo tile too, fits in the first screen.
   Under 960px the tiles stack, the words first. */
.ct-hero--split { padding-top: calc(72px + var(--ct-s4)); padding-bottom: 0; }
.ct-hsplit { display: grid; gap: var(--ct-s4); }
/* The one column never grows past the hero, so that wider text spacing keeps Request a Demo on screen (WCAG 1.4.12). */
.ct-hsplit-side { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--ct-s4); min-width: 0; }
.ct-hero--split .ct-hsplit-copy {
  display: grid;
  align-content: space-between;
  gap: var(--ct-s8);
  max-width: none;
  margin: 0;
  padding: clamp(24px, 3.2vw, 48px);
  border: 1px solid var(--ct-hair);
  border-radius: var(--ct-r-tile);
  background: var(--ct-ground);
  text-align: left;
}
.ct-hero--split .ct-hsplit-copy .ct-h1 { margin: 0; font-size: clamp(38px, 16px + 3vw, 60px); text-wrap: balance; }
.ct-hsplit-low { display: grid; gap: var(--ct-s4); justify-items: start; }
.ct-hero--split .ct-hsplit-copy .ct-lede { margin: 0; max-width: 30rem; color: var(--ct-body); }
.ct-hsplit-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-s4);
  min-height: clamp(80px, 8vw, 108px);
  padding: 0 clamp(24px, 3.2vw, 48px);
  border-radius: var(--ct-r-tile);
  background: var(--ct-action);
  color: #fff;
  font-size: clamp(20px, 17px + 0.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 160ms var(--cm-ease-out);
}
.ct-hsplit-cta .ct-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--cm-dur-fast) var(--cm-ease-out); }
.ct-hsplit-cta:focus-visible { outline: 2px solid var(--ct-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ct-hsplit-cta:hover { background: var(--ct-action-hi); }
  .ct-hsplit-cta:hover .ct-icon { transform: translateX(4px); }
}
.ct-hsplit-sky {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 520px;
  min-width: 0;
  padding: 140px clamp(16px, 3vw, 40px) clamp(150px, 16vw, 210px);
  border-radius: var(--ct-r-tile);
  background: var(--ct-sky-fallback);
}
.ct-hsplit-sky > .ct-sky-plate { position: absolute; z-index: -2; inset: 0; }
.ct-hsplit-sky > .ct-sky-plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ct-hero-towns {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(200px, 30vw, 380px);
  pointer-events: none;
}
.ct-hero-towns > .ct-hero-town { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms cubic-bezier(.4, 0, .2, 1); }
.ct-hero-towns > .ct-hero-town.is-on { opacity: 1; }
/* The town photo fades into the sky just above its trees and roofs. Each photo has a pale grey haze over its horizon.
   A long fade let that haze show over the blue sky as a grey band, so the fade is short and sits at the tree line.
   --town-fade and --town-solid are heights in the photo, from its top: clear above the first, solid below the second.
   The photo covers its box from the bottom, so on a wide box its top is cut off. max(100cqh, 56.25cqw) is the height
   the 16:9 photo is drawn at, so the fade stays at the tree line at every width. The first mask is for a browser
   with no container units. */
.ct-hero-towns { container-type: size; }
.ct-hero-towns img {
  --town-fade: .63;
  --town-solid: .78;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 61%, #000 77%);
  mask-image: linear-gradient(180deg, transparent 61%, #000 77%);
  -webkit-mask-image: linear-gradient(180deg, transparent calc(100% - (1 - var(--town-fade)) * max(100cqh, 56.25cqw)), #000 calc(100% - (1 - var(--town-solid)) * max(100cqh, 56.25cqw)));
  mask-image: linear-gradient(180deg, transparent calc(100% - (1 - var(--town-fade)) * max(100cqh, 56.25cqw)), #000 calc(100% - (1 - var(--town-solid)) * max(100cqh, 56.25cqw)));
}
/* The street photo has lower trees. */
.ct-hero-town[data-hero-town="sky-street-pothole"] img { --town-fade: .59; --town-solid: .73; }
.ct-hero--split .ct-hero-stage { flex-direction: column; align-items: center; gap: 0; margin: 0; }
/* On a wide screen the hero is one screen tall, less the header, so the demo tile sits above the fold.
   The headline scales with the screen height as well as its width, so a short laptop screen still fits it. */
@container ct (min-width: 960px) {
  .ct-hsplit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: clamp(540px, calc(100svh - 72px - 2 * var(--ct-s4)), 820px);
  }
  .ct-hero--split .ct-hsplit-copy .ct-h1 { font-size: clamp(36px, min(16px + 3vw, 7.2svh), 64px); }
  .ct-hsplit-cta { min-height: clamp(72px, 11svh, 104px); }
  .ct-hsplit-sky { min-height: 0; padding-block: 96px clamp(130px, 16svh, 200px); }
}
@container ct (max-width: 639px) {
  .ct-hsplit-sky { min-height: 0; padding-top: 120px; }
}

/* First load, after the Ease Health home. The header slides down from above the screen. Then the two
   tiles open out from their top left corner as they fade in, and the demo tile and the status card
   follow. Each motion holds its start only before it begins, so at rest nothing keeps a transform or a
   clip that would change how the page lays out or catches a click. Reduced motion shows the page as it is.
   Every part starts fast and settles slowly (the strong ease-out), so the page reads at once. The bar and
   the demo tile are things a visitor uses, so the whole intro settles in about 1.2s and the demo tile can
   be read by 0.5s. */
@keyframes ct-intro-drop { from { transform: translate3d(0, -100%, 0); } }
@keyframes ct-intro-open {
  from { clip-path: inset(0 10% 10% 0 round var(--ct-r-tile)); opacity: 0; }
  to { clip-path: inset(0 0 0 0 round var(--ct-r-tile)); opacity: 1; }
}
@keyframes ct-intro-rise { from { opacity: 0; transform: translate3d(0, 30px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .ct-js .ct-page:has(.ct-hero--split) .gp-nav__bar { animation: ct-intro-drop 600ms var(--cm-ease-out) backwards; }
  .ct-js .ct-hero--split .ct-hsplit-copy,
  .ct-js .ct-hero--split .ct-hsplit-sky { animation: ct-intro-open 800ms var(--cm-ease-out) 120ms backwards; }
  .ct-js .ct-hero--split .ct-hsplit-sky { animation-delay: 200ms; }
  .ct-js .ct-hero--split .ct-hsplit-cta { animation: ct-intro-open 800ms var(--cm-ease-out) 320ms backwards; }
  .ct-js .ct-hero--split .ct-hsplit-copy > * { animation: ct-intro-rise 700ms var(--cm-ease-out) backwards; }
  .ct-js .ct-hero--split .ct-hsplit-copy > .ct-h1 { animation-delay: 200ms; }
  .ct-js .ct-hero--split .ct-hsplit-copy > .ct-hsplit-low { animation-delay: 300ms; }
  .ct-js .ct-hero--split .ct-status { animation: ct-intro-rise 700ms var(--cm-ease-out) 420ms backwards; }
}

/* No label on this page is set in capitals. */
.ct-eyebrow,
.ct-menu-heading { text-transform: none; letter-spacing: normal; }
.ct-modules > .ct-h4, .ct-band > .ct-container > .ct-h4 { margin: 0; }

/* Each role ends on a link to the page about that work. */
.ct-role-text .ct-link { align-self: flex-start; margin-top: var(--ct-s1); padding-block: 4px; }

/* The Case Studies band. One featured study sits on its own photo with a white card, and three more stand
   in a list beside it. No plane flies across the photo. */
.ct-cases-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--ct-s3) var(--ct-s8); }
.ct-cases-grid { display: grid; gap: var(--ct-s4); margin-top: var(--ct-s8); }
.ct-case-feature { position: relative; overflow: hidden; border-radius: var(--ct-r-tile); background: var(--cm-sky, #cfe3f2); display: grid; align-items: end; padding: 220px var(--ct-s4) var(--ct-s4); }
.ct-case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ct-case-card { position: relative; z-index: 1; display: grid; gap: var(--ct-s4); padding: 22px 24px; max-width: 380px; }
.ct-case-head { display: flex; align-items: center; gap: var(--ct-s3); }
.ct-case-head b { display: block; font-weight: 500; color: var(--ct-ink); }
.ct-case-head b + span { display: block; font-size: var(--ct-size-small); color: var(--ct-muted); }
.ct-case-seal { flex: none; display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px var(--ct-hair); }
.ct-case-seal--lg { width: 44px; height: 44px; padding: 5px; box-sizing: border-box; }
.ct-case-seal--lg img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ct-case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ct-s3); padding-block: 14px; border-block: 1px solid var(--ct-hair); }
.ct-case-pair b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--ct-ink); }
.ct-case-pair span { display: block; margin-top: 6px; font-size: var(--ct-size-small); color: var(--ct-body); }
.ct-case-card .ct-link-arrow { justify-self: start; }
.ct-case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ct-s3); align-content: start; }
.ct-case-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 120px; overflow: hidden; border: 1px solid var(--ct-hair); border-radius: var(--ct-r-tile); background: var(--ct-canvas); color: inherit; text-decoration: none; }
.ct-case-row-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-case-row-text { display: grid; gap: 2px; align-content: center; padding: 14px 16px; }
.ct-case-town { display: flex; align-items: center; gap: var(--ct-s2); font-size: var(--ct-size-small); color: var(--ct-muted); }
.ct-case-fig { margin-top: 4px; font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--ct-ink); }
.ct-case-cap { font-size: var(--ct-size-small); color: var(--ct-body); }
@media (hover: hover) and (pointer: fine) {
  .ct-case-row:hover .ct-case-fig { text-decoration: underline; text-underline-offset: 4px; }
}
@container ct (min-width: 860px) {
  .ct-cases-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .ct-case-feature { min-height: 440px; padding: var(--ct-s6); }
  /* The three rows share the height of the photo, so the list ends where the photo ends. */
  .ct-case-list { grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
  .ct-case-list > li { display: grid; }
}
}