/* hero title: two fixed lines, one size. The slot reserves the longest ending so
     nothing ever moves; endings rise in and fade out like the page's own reveals.
     JS shrinks the whole title until the widest line fits the column. */
  /* The shared h1 rule carries text-box:trim-both, which assumes a heading whose lines are
     plain inline content. This one is built from two block-level children, and WebKit
     answers that by trimming BOTH edges of the first child - collapsing line 1 to its
     cap-to-baseline box and pulling line 2 up into it (reported on iPhone, 6 Aug 2026).
     Blink applies no trim here at all, which is what the two lines were spaced against, so
     turning it off is what both engines were already meant to render. The hand trims below
     take over. */
  .ht-hero{text-box:normal;margin-bottom:0}
  .ht-l1{display:block;white-space:nowrap}
  /* sr-only: keeps the full sentence in the H1's own text for raw fetch/AT, invisible on screen -
     the rotating .ht-line2 below (a sibling, not a child, so a raw H1 text read stays clean) is
     what sighted users see for line two. */
  .ht-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* the metric trim on h1 cannot reach text inside the slot, so trim the descent by hand.
     .ht-line2 now sits outside the H1 (see .ht-sr above), so it carries its own typography
     matching .hero h1 (font, size, weight, case, colour inherits from .hero). */
  .ht-line2{display:grid;justify-items:center;margin-inline:calc(50% - 50vw + 16px);
    margin-top:-0.16em;margin-bottom:14px;font-family:var(--font-display);
    font-size:min(var(--text-hero),11.5vw);font-weight:700;line-height:0.94;
    letter-spacing:-0.01em;text-transform:uppercase}
  /* trim lives on the grid items: the container holds no inline text, so trim-both on it is inert */
  .ht-size,.ht-alt{text-box:trim-both cap alphabetic}
  .ht-size{grid-area:1/1;visibility:hidden;white-space:nowrap}
  .ht-alt{grid-area:1/1;white-space:nowrap}
  .ht-alt .w{display:inline-block;opacity:0;will-change:opacity,transform;
    animation:htCycle 14s cubic-bezier(0.16,1,0.3,1) infinite both;
    animation-delay:calc(var(--hd) + var(--wd,0ms))}
  @keyframes htCycle{0%{opacity:0;transform:translateY(0.24em)}
    5%,22%{opacity:1;transform:translateY(0)}
    26%,100%{opacity:0;transform:translateY(-0.12em)}}
  @media (prefers-reduced-motion:reduce){
    .ht-alt .w{animation:none;opacity:1}
    .ht-line2 .ht-alt{display:none}
    .ht-line2 .ht-alt:first-of-type{display:inline-block}
  }

  @media (max-width:900px){
    .media.media--text-first{gap:var(--space-2xl)}
    .media.media--text-first .media-visual{order:2}
  }
  /* one optical size for every mark: capped on BOTH axes, then trimmed per logo */
  .cw-meta{font-family:var(--font-brand);font-weight:700;font-size:21px;line-height:1;color:#0866FF;letter-spacing:-0.02em}
  /* hero rhythm: title hugs its paragraph; the pause sits before the CTA */
  .hero h1{margin-bottom:10px}
  .hero .hero-sub{margin-bottom:46px;max-width:none;font-size:1.0625rem}
@media(max-width:760px){.hero .hero-sub{font-size:0.9375rem}}
  /* hero: the small faces under the CTA - a real person answers */
  .hero-who{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}
  .hero-who__faces{display:flex}
  .hero-who__faces img{width:26px;height:26px;border-radius:50%;object-fit:cover;
    border:2px solid rgba(255,255,255,0.9);margin-left:-8px}
  .hero-who__faces img:first-child{margin-left:0}
  /* scales with the viewport so the line never wraps beside the faces */
  .hero-who__txt{font-size:clamp(0.5625rem,2.8vw,0.875rem);font-weight:500;color:var(--white);opacity:.78;white-space:nowrap}
  @media (max-width:520px){ .hero-who{gap:8px} }
  /* team portraits: neutral dark scrim, not green */
  
  /* the hero filmstrip keeps running under the cursor (logo rails: shared rule) */
  .hero-strip:hover .hero-strip__track,.hero-strip:focus-within .hero-strip__track{animation-play-state:running}
  /* approach comparison: the pricing-card system (Figma "A model that suits you"),
     three equal white cards - crosses for the retainer, ticks for the two Pronto models */
  /* team intro: three facts across, not a paragraph */
  .team-points{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px}
  .team-points li{display:flex;align-items:center;gap:10px;font-weight:500;font-size:1.0625rem;line-height:1.3;color:var(--green-deep)}
  .team-points li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--green,#f2a2d6)}
  /* Homepage rhythm: content determines height; feature moments get the larger beat. */
  @media (min-width:900px){
    body.home-page .section:not(.section--tight){min-height:0;justify-content:initial;padding-block:clamp(72px,6vw,88px)}
    body.home-page #what-we-offer,
    body.home-page #approach,
    body.home-page .prontoai{padding-block:clamp(88px,7vw,112px)}
    body.home-page .prontoai{min-height:0}
  }
  @media (max-width:640px){
    .team-points{gap:10px 18px}
  }