/* Home: Home, Work and Contact on one page. On wide windows one scroll moves one section (home.js); each
   section takes the top 85% of the window, so the last 15% shows the start of the next. Phones
   scroll freely. Sits on styles.css, the shared case-studies/case-study.css and contact/contact.css. */
:root { --head: clamp(88px, 7vw, 112px); --u: 1vw; --panel: #0C0B0E; } /* --panel: the glow image's own base, under the hero and the case-study captions */
@media (min-width: 900px) {
  :root { --head: clamp(60px, min(7vw, 11.2vh), 112px); --u: min(1vw, 1.6vh); --sec: calc(85vh - var(--head)); }
}

/* the header stays put (its WORK squares are shared, in case-study.css) */
/* the signature runs off the window's right edge: the page clips it there, so it adds no width and nothing can
   scroll the page sideways (clipping on body only hid the scrollbar; the page stayed wider than the window) */
.page { overflow-x: clip; }
.site-head { position: fixed; z-index: 20; top: 0; left: var(--gutter); right: var(--gutter); height: var(--head); background: var(--bg); transition: background-color .4s, border-color .4s; }
/* the header's band runs across the side margins too, so a laptop leaking out past the frame (Work) passes under it;
   over the hero it stays clear, as the signature runs to the window's edge */
.site-head::before, .site-head::after { content: ""; position: absolute; top: 0; bottom: -1px; width: var(--gutter); background: var(--bg); transition: background-color .4s; pointer-events: none; }
.site-head::before { right: calc(100% + 1px); } /* the margins only, outside the frame's lines */
.site-head::after { left: calc(100% + 1px); }
.at-hero .site-head::before, .at-hero .site-head::after { background-color: transparent; }

.snaps { padding-top: var(--head); }
.snap { position: relative; scroll-margin-top: var(--head); border-left: 1px solid var(--frame); border-right: 1px solid var(--frame); }

/* ---------- Home: the glow panel, the title, the statement, the signature ---------- */
.s-home { display: flex; flex-direction: column; overflow: hidden; background: var(--panel); padding: clamp(28px, calc(var(--u) * 5), 88px) var(--pad) clamp(24px, calc(var(--u) * 3), 48px); }
/* the mesh: deep blue light, three soft pools (left, a weaker one behind the phone, right), centred on the window's foot
   as the page opens: drawn by the first case study (the seam with the hero, where its phone peeks up) and reaching up
   into the hero, faded out above and below, under the hero's copy and the section's own */
.s-home > * { z-index: 1; }
/* the statement under the title, in grey sentence case; the focus line follows it */
.tagline { position: relative; margin: clamp(12px, calc(var(--u) * 1.8), 32px) 0 0; max-width: 34ch; font-size: clamp(18px, calc(var(--u) * 2.2), 40px);
  line-height: 1.35; font-weight: 400; color: var(--text-2); font-variation-settings: "opsz" 14; }
.tagline + .focus { margin-top: clamp(16px, calc(var(--u) * 2), 32px); }
@media (min-width: 900px) { .tagline { white-space: nowrap; max-width: none; } } /* one line beside the frame's wide columns */
/* the focus areas, as labels under the statement: outlined pills in the body grey */
.focus { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(20px, calc(var(--u) * 3), 56px) 0 0; padding: 0; list-style: none; }
.focus li { padding: .5em 1.05em .52em; border: 1px solid #2E3034; border-radius: 999px; background: rgba(255, 255, 255, .02);
  font-size: clamp(14px, calc(var(--u) * 1.2), 20px); line-height: 1.2; letter-spacing: -0.005em; color: var(--text-body); font-variation-settings: "opsz" 14; }
/* "Selected work", centred at the hero's foot, above the first case study's phone peeking up below it */
.s-home .down { position: absolute; left: 50%; translate: -50% 0; margin: 0; bottom: clamp(24px, calc(var(--u) * 2.4), 40px); }
.hero-title { position: relative; margin: 0; max-width: 11.5ch; font-weight: 400; line-height: 1.18; letter-spacing: 0; font-variation-settings: "opsz" 14; } /* Inter's text cut, open, as in the reference */
.down { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-size: var(--t-lead); color: var(--text-2); text-decoration: none; transition: color .2s; }
.down svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
.down:hover { color: var(--text); }
.down:hover svg { transform: translateY(3px); }

/* ---------- Work: every case study on one system ----------
   On the frame's thirds. In the first, the copy: the headline on the top line, one description standing on the
   bottom line. In the other two, the device: the supplied frames (assets/devices/, their screens see-through, the
   screen placed behind by the frame's own measurements), a laptop spanning them, its base on the Next bar, or a
   phone with its prototype control under it. No eyebrow, no arrow: a link is the whole section (the cursor's pill
   says it); a case study still to come (.soon) is not a link and has a "Case study soon" chip above its headline. */
.s-work { position: relative; overflow: hidden; background: var(--panel); border-top: 1px solid var(--frame);
  --py: clamp(28px, calc(var(--u) * 3.6), 64px); --t-work: clamp(32px, calc(var(--u) * 4.2), 84px); }
.s-work h2 { margin: 0; font-size: var(--t-work); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.s-work h2 a { color: inherit; text-decoration: none; }
.s-work h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole section is the link */
.s-work p { position: relative; z-index: 2; pointer-events: none; margin: 0; }
.s-work p .term { pointer-events: auto; }
.cs-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: clamp(14px, calc(var(--u) * 1.4), 22px);
  font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cs-soon { padding: 5px 10px 4px; border: 1px solid #2E3034; border-radius: 999px; font-size: 11px; letter-spacing: .1em; color: var(--text-body); }
.cs-desc { max-width: 40ch; font-size: var(--t-lead); line-height: 1.42; color: var(--text-body); text-wrap: pretty; }

/* the Next bar (wide windows): one for all the case studies, fixed at the foot of the window while one is in view
   (home.js marks it .on and points it at the next section); each section keeps its foot free, so the device
   stands on the bar's rule */
.dev-next { display: none; }
@media (min-width: 900px) {
  :root { --nb: clamp(44px, calc(var(--u) * 3.6), 56px); }
  .dev-next { position: fixed; z-index: 10; left: var(--gutter); right: var(--gutter); bottom: 0; height: var(--nb); display: flex; align-items: center; gap: 16px;
    padding: 0 var(--pad); border: 1px solid var(--frame); border-bottom: 0; background: var(--panel);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .dev-next.on { opacity: 1; visibility: visible; transition: opacity .3s; }
  .dn-go { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: -0.005em; color: var(--text-2); text-decoration: none; transition: color .2s; }
  .dn-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
  .dn-go:hover { color: var(--text); }
  .dn-go:hover svg { transform: translateY(3px); }
  .dn-go:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) { .dev-next { transition: none; } }

/* the devices */
.device { position: relative; z-index: 0; transition: transform .9s var(--ease); }
.device > .frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; }
.screen { position: absolute; z-index: 1; overflow: hidden; background: #F4F4F5; }
.screen img, .screen iframe, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border: 0; }
/* a prototype is hidden until it has loaded: the screenshot (or the light screen) shows meanwhile, and stays under it */
.screen iframe { z-index: 1; background: #fff; opacity: 0; transition: opacity .5s; }
.screen iframe.ready { opacity: 1; }
/* a video (data-video) lies over its poster, its own first frame, so it shows from the start */
.screen video { z-index: 1; pointer-events: none; }
.laptop .screen { left: calc(220 / 1885 * 100%); top: calc(31 / 1113 * 100%); width: calc(1445 / 1885 * 100%); height: calc(939 / 1113 * 100%);
  border-radius: 1% 1% 0 0 / 1.5% 1.5% 0 0; background: #fff; }
.phone .screen { left: calc(51 / 603 * 100%); top: calc(51 / 1190 * 100%); width: calc(501 / 603 * 100%); height: calc(1088 / 1190 * 100%); border-radius: 14.4% / 6.6%; }
.s-work:not(.soon):hover .device:not(.playing) { transform: translateY(-8px); }
/* a playing prototype is watched, not driven, on wide pointer screens: the pointer passes through it to the section
   (the "View case study" pill stays over the device); on touch screens it can be tapped */
@media (hover: hover) and (min-width: 900px) { .s-work .screen iframe { pointer-events: none; } }
@media not ((hover: hover) and (min-width: 900px)) { .device.playing { z-index: 3; } }

/* the prototype control, the same on every device (home.js adds it when the section has data-figma): a small dark
   pill, its round icon telling the state: a play triangle ("Play"), a turning ring ("Loading…"), pause bars ("Pause") */
.cs-proto { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; align-self: center; height: 40px; padding: 0 18px 0 7px;
  border: 0; border-radius: 999px; background: #1C1D20; font: 500 14px/1 Inter, system-ui, sans-serif; letter-spacing: -0.005em; color: var(--text);
  white-space: nowrap; cursor: pointer; transition: background .2s; }
.cs-proto:hover { background: #26272B; }
.cs-proto:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.cs-proto b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2A2C30; }
.cs-proto b svg { width: 10px; height: 10px; fill: var(--text); }
.cs-proto[data-state="idle"] b svg { margin-left: 2px; }
.cs-proto b svg.re { width: 14px; height: 14px; fill: none; stroke: var(--text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cs-proto[data-state="loading"] b { background: none; }
.cs-proto b .spin { width: 22px; height: 22px; fill: none; stroke: var(--accent-solid); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 32 48; }
.cs-proto[data-state="loading"] span { color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) { .cs-proto b .spin { animation: spin .9s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* the control's row: the pill and, beside it, a round Restart of the same height */
.cs-ctrl { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; align-self: center; }
/* a video's progress, between the phone and its button (home.js): a 2px track the phone's screen wide, fully rounded,
   its played part in the brand gradient (run along it, light to deep); no handle. Its tap area is 20px tall */
.cs-seek { position: relative; z-index: 3; flex: none; align-self: center; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.cs-seek i { position: relative; display: block; width: 100%; height: 2px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.cs-seek b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--at, 0%); border-radius: 999px; background: linear-gradient(90deg, #6BABFF 0%, #0051FF 100%); }
.cs-seek:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.cs-restart { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #1C1D20;
  color: var(--text); cursor: pointer; transition: background .2s; }
.cs-restart[hidden] { display: none; }
.cs-restart:hover { background: #26272B; }
.cs-restart:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.cs-restart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .cs-restart:hover svg { transform: rotate(-40deg); transition: transform .4s var(--ease); } }

/* Ask Me Agent's close-ups (.cs-feat), beside its phone: the chat from the section's top edge, its third card a
   little past the frame; the personalization note on the bottom line; the chat's panel (x 23–441 of its 508px)
   and the note share one width against the column's right edge, the column's or what the height leaves once the
   note has its room (--note: home.js measures it) */
.feat-note h3 { margin: 0 0 12px; font-size: clamp(14px, calc(var(--u) * 1.1), 18px); font-weight: 400; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.feat-badges { display: block; width: 129px; height: auto; margin-bottom: 12px; }
.feat-infos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.feat-infos li { display: flex; align-items: flex-start; gap: 10px; padding: clamp(10px, calc(var(--u) * .85), 14px) 14px; border-radius: 10px;
  font-size: clamp(13px, calc(var(--u) * .95), 16px); line-height: 1.4; color: #141416; }
.feat-infos svg { flex: none; width: 1.75em; height: 1.75em; margin: -.2em 0 -.2em -.15em; }
.feat-infos .growth { background: #ECE1FF; }
.feat-infos .growth svg { color: #9A6BF2; }
.feat-infos .pregnancy { background: #DCFBFF; }
.feat-infos .pregnancy svg { color: #4F8BF5; }

/* ---------- Contact: the contact page (contact.css), as the last section ---------- */
.s-contact { display: flex; flex-direction: column; min-height: 0; border: 0; }
.s-contact .contact { border-top: 1px solid var(--frame); }
.msg h2.contact-title { margin: 0; }

/* the cursor over a case study: a dark pill, the site's arrow in the brand gradient and "View case study";
   over the case study to come, a light grey pill, "Case study coming soon" */
.cs-cursor { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .s-work, .s-work a { cursor: none; } /* the link inside would bring back the hand under the pill */
  .s-work .term { cursor: help; }
  .s-work .cs-proto, .s-work .cs-restart { cursor: pointer; } /* the pill steps aside for the button (home.js), so the pointer comes back */
  .cs-cursor { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
    padding: 11px 18px 11px 14px; margin: -22px 0 0 -24px; border-radius: 999px; background: #111214;
    font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1; color: var(--text); white-space: nowrap;
    opacity: 0; scale: .6; transform-origin: 24px 22px; transition: opacity .2s, scale .3s var(--ease); }
  .cs-cursor.on { opacity: 1; scale: 1; }
  .cs-cursor svg { flex: none; width: 18px; height: 18px; }
  .cs-cursor.soon { padding: 11px 18px; background: #DCDDDF; color: var(--bg); }
  .cs-cursor.soon svg { display: none; }
}

/* ---------- wide windows: fixed proportions, so every stop lands the same way ---------- */
@media (min-width: 900px) {
  /* a case study fills the window under the header, down to its Next bar: no peek at the next one (the bar leads on) */
  .s-work { --sec-w: calc(100vh - var(--head)); height: var(--sec-w); }
  /* the hero reaches up under the header, which stays clear while the hero is in view (home.js marks it); the band
     behind the header keeps the page colour */
  /* the hero leaves the window's last 30% to the first case study, whose own phone peeks up there: while the hero is
     in view (.at-hero) only that phone shows; its copy, close-ups and control fade in as the page moves on, so the
     phone the visitor saw is the one they land on */
  :root { --peek: 30vh; }
  .s-home { height: calc(100vh - var(--peek)); margin-top: calc(-1 * var(--head)); padding-top: calc(var(--head) + clamp(24px, calc(var(--u) * 4), 72px));
    background: linear-gradient(var(--bg) var(--head), var(--panel) var(--head)); }
  .at-hero .site-head { background-color: transparent; border-color: transparent; }
  /* while the hero is in view the header's rule steps aside and the hero draws it itself, at the header's foot */
  .s-home { overflow: visible; }
  /* "Selected work" belongs to the peeking phone: 28px above its top (the first case study's top padding below the
     hero's foot), not to the focus line */
  .s-home .down { bottom: calc(28px - clamp(28px, calc(var(--u) * 3.6), 64px)); }
  .s-home .down { transition: opacity .4s var(--ease); }
  html:not(.at-hero) .s-home .down { opacity: 0; pointer-events: none; } /* gone once the case study is in view */
  .s-home::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--head) - 1px); height: 1px; background: var(--frame); }
  .s-home { --title: clamp(48px, min(calc((47.25vw - var(--pad)) / 6.33), calc(var(--u) * 8.4)), 168px); }
  .hero-title { font-size: var(--title); }
  /* the work: the copy column, then the device area; the bottom line sits on the Next bar */
  .s-work { display: grid; grid-template-rows: minmax(0, 1fr); padding: var(--py) 0 calc(var(--nb) + var(--py)); }
  /* the frame's thirds (the background's grid lines): the copy in the first, the device in the other two */
  .s-work.lap, .s-work.ph.solo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .s-work.ph { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; /* the chat's card runs past the frame */
    --ph: calc(var(--sec-w) - var(--nb) - 2 * var(--py) - 56px); }
  .cs-col { display: flex; flex-direction: column; min-height: 0; padding: 0 var(--pad); }
  .cs-left .cs-desc { margin: auto 0 calc(((1.2109375 - 1.42) / 2 - 0.2421875) * 1em); } /* its baseline on the bottom line (Inter) */
  .cs-left .cs-ctrl { align-self: flex-start; margin-top: 20px; }
  /* laptop, as marked on the reference: its lid (x 193–1690 of the image's 1885px) spans the device area exactly,
     from the one-third line to the frame's right line, its base on the Next bar, reaching a little back into the
     copy column and leaking out past the frame's border on the right, cut only by the window's edge. --lw is the
     image's width (never taller than the section above the bar); the description keeps clear of the base */
  .s-work.lap { overflow: visible; /* the laptop leaks out past the frame's border, cut only by the window's edge */
    --fw: calc(100vw - 2 * var(--gutter));
    --lw: min(calc(var(--fw) * 2 / 3 * 1885 / 1497), calc((var(--sec-w) - var(--nb) - var(--py)) * 1885 / 1104)); } /* never above the top line: air under the header */
  /* the headline's cap top on the top line (no eyebrow above it, except "Case study soon") */
  .cs-left > h2:first-child { margin-top: -0.167em; }
  .s-work.lap .cs-desc { max-width: min(40ch, 100% - var(--lw) * 160 / 1885 - 24px); }
  .cs-stage { position: relative; min-height: 0; }
  .laptop { position: absolute; left: calc(100% - var(--lw) * 1690 / 1885); /* its lid's right edge on the frame's right line; at full size its left edge lands on the one-third line */ bottom: calc(var(--py) * -1); width: var(--lw); /* its base on the Next bar */
    transform: translateY(calc(9 / 1113 * 100%)); } /* the image's 9px of air below the base */
  .s-work:not(.soon):hover .laptop:not(.playing) { transform: translateY(calc(9 / 1113 * 100% - 8px)); }
  /* phone: the phone itself (its image has 29px of air above and below, of 1190) from the top line, its control
     under it on the bottom line */
  .cs-mid { align-items: center; }
  .phone { width: calc(var(--ph) * 603 / 1132); margin: calc(var(--ph) * -29 / 1132) 0; }
  .cs-mid .cs-ctrl { margin-top: auto; }
  .cs-mid .cs-seek { margin-top: auto; width: calc(var(--ph) * 501 / 1132); }
  .cs-mid .cs-seek + .cs-ctrl { margin-top: 12px; }
  .cs-feat { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-end; margin-top: calc(var(--py) * -1); container-type: size;
    --note: clamp(250px, calc(var(--u) * 19), 340px);
    --cw: max(160px, min(100cqw, (100cqh - var(--note)) * 418 / 521)); }
  .feat-chat { display: block; flex: none; width: calc(var(--cw) * 508 / 418); height: auto; margin-right: calc(var(--cw) * -67 / 418); }
  .feat-note { width: var(--cw); margin-top: auto; padding-top: 24px; }
  @media (max-height: 760px) { .feat-note h3 { display: none; } }
  .s-contact { height: calc(100vh - var(--head)); }
  #work > .s-work:first-child { z-index: 0; border-top-color: transparent; } /* its own layer, for the mesh; no seam with the hero */
  #work > .s-work:first-child::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-.55 * 100vh + var(--peek)); height: calc(.85 * 100vh); pointer-events: none;
    background:
      radial-gradient(30% 45% at 22% 64%, rgba(28, 72, 200, .26), transparent 72%),
      radial-gradient(22% 35% at 50% 66%, rgba(40, 90, 220, .14), transparent 72%),
      radial-gradient(30% 45% at 82% 64%, rgba(28, 72, 200, .24), transparent 72%),
      radial-gradient(70% 40% at 50% 64%, rgba(12, 24, 70, .3), transparent 75%);
    opacity: 0; transition: opacity .6s var(--ease); } /* the hero's alone: gone once the case study is in view */
  .at-hero #work > .s-work:first-child::before { opacity: 1; }
  /* on each case study the mesh sits as in the reference: a large soft glow across the upper middle of the section
     (a deep-blue pool behind the copy, a weaker one behind the device, one at the right), behind everything; on the
     home page it stays at the foot (the hero's). The first case study's shows once the hero's has faded */
  .s-work { z-index: 0; }
  .s-work::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: var(--nb); pointer-events: none;
    background:
      radial-gradient(30% 42% at 22% 38%, rgba(28, 72, 200, .26), transparent 72%),
      radial-gradient(22% 32% at 50% 40%, rgba(40, 90, 220, .14), transparent 72%),
      radial-gradient(30% 42% at 82% 38%, rgba(28, 72, 200, .24), transparent 72%),
      radial-gradient(70% 38% at 50% 38%, rgba(12, 24, 70, .3), transparent 75%);
    transition: opacity .6s var(--ease); }
  .at-hero #work > .s-work:first-child::after { opacity: 0; }
  #work > .s-work:first-child > :not(.cs-mid), #work > .s-work:first-child .cs-ctrl, #work > .s-work:first-child .cs-seek { transition: opacity .6s var(--ease); }
  .at-hero #work > .s-work:first-child > :not(.cs-mid), .at-hero #work > .s-work:first-child .cs-ctrl, .at-hero #work > .s-work:first-child .cs-seek { opacity: 0; pointer-events: none; }
}

/* ---------- phones: no stepping; the sections stack and scroll freely ---------- */
@media (max-width: 899px) {
  /* phones: no peek (a case study's copy comes before its phone); "Selected work" at the foot, over the mesh */
  .s-home { min-height: calc(82svh - var(--head)); padding-top: 40px; padding-bottom: 96px; }
  .s-home::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
    background: radial-gradient(45% 70% at 20% 105%, rgba(28, 72, 200, .28), transparent 72%), radial-gradient(45% 70% at 82% 105%, rgba(28, 72, 200, .26), transparent 72%),
      linear-gradient(to top, rgba(12, 24, 70, .22), transparent 60%); }
  .focus { gap: 8px; }
  .focus li { font-size: 14px; }
  .hero-title { font-size: clamp(44px, 12vw, 64px); }
  /* the copy, then the device: the laptop standing on the panel's bottom edge, the phone with its control under it;
     Ask Me Agent's close-ups stay on wide windows */
  /* spacing tells which device is whose: 24px from a case study's copy to its device, 64px of air under the device,
     then the rule and 48px down to the next headline */
  .s-work { --py: 48px; --t-work: clamp(28px, 8vw, 36px); padding-top: var(--py); padding-bottom: 64px; }
  .cs-left { padding: 0 var(--pad); }
  /* the copy, given room: the headline a touch looser, the description a step smaller with open leading, and clear
     air between them (and under the "Coming soon" chip) */
  .s-work h2 { line-height: 1.12; letter-spacing: -0.025em; }
  .s-work .cs-left .cs-desc { margin-top: 16px; font-size: 17px; line-height: 1.6; }
  .s-work .cs-left .cs-eyebrow { margin-bottom: 16px; }
  .cs-stage { margin-top: 24px; padding: 0 var(--pad); }
  .cs-left .cs-ctrl { margin-top: 20px; }
  .cs-mid { display: flex; flex-direction: column; align-items: center; padding: 24px var(--pad) 0; }
  .phone { width: min(62%, 300px); }
  .cs-mid .cs-ctrl { margin-top: 16px; }
  .cs-mid .cs-seek { margin-top: 14px; width: calc(min(62%, 300px) * 501 / 603); }
  .cs-mid .cs-seek + .cs-ctrl { margin-top: 10px; }
  .cs-right { display: none; }
  .s-contact { min-height: calc(100svh - var(--head)); }
}
/* phones: the header is the name and the Menu button */
@media (max-width: 899px) {
  .logo { white-space: nowrap; } /* the links give way to the Menu button (site-menu.js, case-study.css) */
}


/* entrance: the title rises in, then the focus line and the label, and the peeking phone rises last */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.hero-title { animation: rise .9s var(--ease) both .1s; }
.tagline { animation: rise .9s var(--ease) both .2s; }
.focus { animation: rise .9s var(--ease) both .25s; }
.down { animation: rise .9s var(--ease) both .4s; }
@keyframes rise-in { from { opacity: 0; translate: 0 32px; } }
#work > .s-work:first-child .phone { animation: rise-in 1.1s var(--ease) both .5s; } /* the peeking phone rises in last, once (translate, so its hover lift still works) */
@media (prefers-reduced-motion: reduce) {
  .hero-title, .tagline, .focus, .down, #work > .s-work:first-child .phone { animation: none; }
  .device, .cs-cursor, .screen iframe { transition: none; }
}