/* Homepage (markup in tools/content/home-intro.html and home-work.html): a compact intro,
   case-study cards with the original Webflow hover (tilt + glow + button fill), and
   gallery tiles. The hero above stays Webflow's. Old design: /legacy-homepage. */
.hm {
  --ink: #fff; --muted: #afaead; --line: rgba(255,255,255,.09); --card: #2a2928; --accent: #e16a08;
  box-sizing: border-box; padding: 0 48px; color: var(--ink); font-family: Font, sans-serif;
}
.hm *, .hm *::before, .hm *::after { box-sizing: inherit; }
.hm a { color: inherit; text-decoration: none; }
.hm-wrap { max-width: 1200px; margin: 0 auto; }
.hm-label { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hm-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-tag { font-size: 12px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: #d8d6d4; }
.hm-year { align-self: center; margin-right: 6px; font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 99px;
  font-size: 15px; font-weight: 600; border: 1px solid rgba(255,255,255,.22); transition: background .2s, border-color .2s;
}
.hm-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.hm-btn.is-solid { background: var(--accent); border-color: var(--accent); }
.hm-btn.is-solid:hover { background: #f07a1a; }
.hm-btn svg, .hm-go svg { width: 18px; height: 18px; }

/* Hero circle. Webflow drew it with a white SVG laid over the video (.overcircle), which
   left two flaws: where its edge fell on a fractional pixel the video showed through as a
   grey hairline, and the box sits below the name block (which scales with width), so on
   wide screens it started below the top and left a white gap. Instead, mask .picture to
   the same circle (radius 1.359 x the original 66svh box, touching its bottom) and grow
   the box 20svh upward. Margin and height change by the same amount, so the bottom edge,
   the portrait and the text don't move. */
.overcircle { display: none; }
.picture {
  --r: 89.69svh;
  margin-top: -26.5svh; height: 86svh;
  -webkit-mask: radial-gradient(circle var(--r) at 50% calc(100% - var(--r)), #000 calc(var(--r) - .75px), transparent var(--r));
  mask: radial-gradient(circle var(--r) at 50% calc(100% - var(--r)), #000 calc(var(--r) - .75px), transparent var(--r));
}
.picture .video { height: 100%; }

/* Hero name block as orange glass: translucent, so the video moves through it blurred
   and warmed. The nav pill is a little lighter and clearer here (its old 71% tint turned
   the orange beneath it a muddy brown); 60% keeps its white links readable when it
   passes over the white band below the circle. */
.div-block-69 {
  background: linear-gradient(180deg, rgba(225,106,8,.55), rgba(225,106,8,.78));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,190,130,.35), inset 0 -40px 60px -30px rgba(255,140,40,.4);
}
.section.is--nav {
  background: rgba(40,38,36,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
/* The bar and dot row under the role, in the same glass. The dots are an <img> of the
   pattern SVG: its own pixels are pushed out of view and the SVG becomes a mask, so each
   dot is cut out of a glass fill. */
.div-block-70, .image-52 {
  background: linear-gradient(180deg, rgba(240,122,26,.5), rgba(225,106,8,.75));
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
}
.div-block-70 { box-shadow: inset 0 0 0 1px rgba(255,190,130,.35); }
.image-52 {
  object-position: -9999px 0;
  --dots: url("/_wf/cdn/5f0bc1d0d3ce59ff61f41ec9/665aa98248d6857b997b0c9b_pattern.svg");
  -webkit-mask: var(--dots) center / 100% 100% no-repeat; mask: var(--dots) center / 100% 100% no-repeat;
}

/* Hero: the "Currently" line sat straight on the busy circle video; give it a pill,
   tinted to match the glass block. */
.text-block-4-copy {
  width: fit-content; margin: .9svw auto 0; padding: .45em 1em; border-radius: 99px;
  font-weight: 400; line-height: 1.4; white-space: nowrap;
  background: rgba(225,106,8,.22); box-shadow: inset 0 0 0 1px rgba(255,160,80,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Intro (replaces "What do I do?") */
.hm-intro {
  padding: 120px 0 96px; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end;
}
.hm-intro h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; margin: 16px 0 32px; }
.hm-intro h2 em { font-style: normal; color: var(--accent); white-space: nowrap; }
/* Facts: what I do now, then three proof numbers. */
.hm-now { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.hm-now i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
.hm-now a { border-bottom: 1px solid rgba(255,255,255,.3); }
.hm-now svg { width: 12px; height: 12px; vertical-align: 1px; opacity: .7; }
.hm-stat { display: block; padding: 18px 0; border-top: 1px solid var(--line); }
.hm-stat b { display: block; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.hm-stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); transition: color .2s; }
a.hm-stat:hover span { color: var(--ink); }

.hm-head { display: flex; justify-content: space-between; align-items: end; margin: 96px 0 28px; }
.hm-head h3 { font-size: 28px; font-weight: 600; margin: 8px 0 0; letter-spacing: -.01em; }
.hm-head p { color: var(--muted); margin: 0; font-size: 15px; max-width: 340px; text-align: right; }

/* Case-study cards. The hover is the old homepage's Webflow "transform card": the front
   tilts toward the cursor (±4deg) while the brand-colour glow behind it tilts the other
   way (script in home-work.html). */
.hm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.hm-card { position: relative; display: flex; perspective: 1000px; }
.hm-card.is-feature { grid-column: 1 / -1; }
.hm-glow {
  position: absolute; inset: -6px; border-radius: 34px; background: var(--c); filter: blur(5px);
  opacity: 0; transform: scale(.98); transition: opacity .4s;
}
.hm-card:hover .hm-glow { opacity: 1; }
.hm-front {
  position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 28px; will-change: transform;
}
.hm-media { aspect-ratio: 16 / 10; overflow: hidden; }
.hm-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; }
.hm-card h4 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.hm-card p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: #d0cecc; }
.hm-badge {
  align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: var(--c); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.hm-card.is-feature .hm-split { flex: 1; display: flex; min-height: 420px; }
.hm-card.is-feature .hm-media { flex: 1.5; order: 2; aspect-ratio: auto; }
.hm-card.is-feature .hm-body { flex: 1; justify-content: center; padding: 44px; }
.hm-card.is-feature h4 { font-size: 34px; letter-spacing: -.01em; }
.hm-card.is-feature p { font-size: 17px; }
/* The old "View Case Study" button: a brand-colour circle sweeps down through it while the
   card is hovered and carries on out of the bottom when the pointer leaves. */
.hm-btnbar {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 56px;
  border-top: 2px solid var(--c); font-size: 15px; font-weight: 700;
}
.hm-fill {
  position: absolute; top: 0; left: -1%; width: 102%; padding-top: 102%; border-radius: 50%;
  background: var(--c); transform: translateY(-100%);
}
.hm-btnbar span { position: relative; }

/* Thumbnails, composed from each case study's own screens, photos and films. */
.tn {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(130% 110% at 78% -10%, color-mix(in srgb, var(--c) 80%, #000) 0%,
              color-mix(in srgb, var(--c) 28%, #121212) 45%, #121212 85%);
}
.tn::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.2px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(170deg, #000 10%, transparent 75%); mask-image: linear-gradient(170deg, #000 10%, transparent 75%);
}
.tn img, .tn video { display: block; }
.tn-win, .tn-film {
  position: absolute; border-radius: 10px;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1);
}
/* Baxter: the case study's own hero mockup (letter screen in front). */
.ccp-mock { position: absolute; left: 50%; top: 50%; width: 102%; transform: translate(-50%, -48%);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
/* Markdown Made Simple. Its screenshots and films have a backdrop around the app window;
   stills: window at 5.06%/6.8% of the frame; films: 72-1991 x 72-1111 of 2064x1184. */
.tn-win, .tn-film { overflow: hidden; }
.tn-win { aspect-ratio: 1438 / 1032; }
.tn-win img { position: absolute; width: 111.2%; max-width: none; left: -5.63%; top: -7.87%; }
.tn-film { aspect-ratio: 1920 / 1040; }
.tn-film video { position: absolute; width: 107.5%; max-width: none; height: auto; left: -3.75%; top: -6.92%; }
.mms-dark { right: -6%; top: 8%; width: 62%; }
.mms-live { left: 5%; bottom: 8%; width: 74%; }
/* Advocate: the clinic photo framed top right, the journey map overlapping it, personas top left. */
.adv-photo {
  position: absolute; right: 5%; top: 9%; width: 56%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 10px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.75);
}
.adv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.adv-map {
  position: absolute; z-index: 2; left: 5%; bottom: 9%; width: 62%; padding: 1.4%;
  background: #fff; border-radius: 10px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.75);
}
.adv-map img { width: 100%; }
.adv-faces { position: absolute; z-index: 2; left: 7%; top: 12%; width: 26%; display: flex; }
.adv-faces img { width: 58%; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 14px 24px -8px rgba(0,0,0,.6); }
.adv-faces img + img { margin-left: -16%; }
/* SD Drive-Through and Laundry Loop: three phones, as at the top of each case study. */
.tn-phone {
  position: absolute; aspect-ratio: 9 / 19.5; border-radius: 16% / 7.4%; overflow: hidden; background: #0b0b0b;
  box-shadow: 0 0 0 4px #0b0b0b, 0 0 0 5px rgba(255,255,255,.2), 0 30px 60px -12px rgba(0,0,0,.75);
}
.tn-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ph-l { left: 15%; bottom: -20%; height: 86%; transform: rotate(-9deg); }
.ph-r { right: 15%; bottom: -20%; height: 86%; transform: rotate(9deg); }
.ph-c { left: 50%; bottom: -18%; height: 98%; transform: translateX(-50%); }

/* Galleries */
.hm-gal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 140px; }
.hm-tile {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; border: 1px solid var(--line);
  transition: border-color .3s, transform .3s;
}
.hm-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,.92)); }
.hm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hm-tile span { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.hm-tile small { display: block; margin-top: 4px; font-size: 13px; font-weight: 300; color: #cfcdcb; }
.hm-tile:hover { border-color: var(--c); transform: translateY(-4px); }
.hm-tile:hover img { transform: scale(1.06); }

@media (max-width: 991px) {
  .hm-intro { grid-template-columns: 1fr; gap: 32px; }
  .hm-card.is-feature .hm-split { flex-direction: column; min-height: 0; }
  .hm-card.is-feature .hm-media { order: 0; flex: none; aspect-ratio: 16 / 10; }
  .hm-card.is-feature .hm-body { padding: 28px; }
  .hm-gal { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .hm { padding: 0 16px; }
  .hm-intro { padding: 72px 0 56px; }
  .hm-head { flex-direction: column; align-items: start; gap: 8px; }
  .hm-head p { text-align: left; }
  .hm-grid { grid-template-columns: 1fr; }
  .hm-card.is-feature h4 { font-size: 26px; }
  .hm-gal { grid-template-columns: 1fr 1fr; margin-bottom: 88px; }
}