/* ==========================================================================
   What We Do — the screen.

   Every service tile is a live, branded window that plays like a screen
   recording: a pointer moves, things appear, numbers move, it loops. None
   of it is video. Everything inside the window is sized in container units
   (cqw), so the same markup is legible in a 900px preview and a 380px tile.

   The scheduler that drives it is wd.js. The markup contract is small:
     data-loop="20"        on .rec   — seconds per loop
     data-t="3.2"          on any    — turn on (.is-on) at that second
     data-group="s"        on any    — siblings in the group turn off first
     data-cx="40" data-cy="30"       — walk the pointer here (% of body) first
     data-count="90" data-from="38"  — run the number up when it turns on
     data-clone="#id"      on .rec   — copy another window's contents (tiles)
   ========================================================================== */

.rec{
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-family: var(--body);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(18,36,58,.05), 0 30px 60px -30px rgba(18,36,58,.28);
}
.rec--big{  aspect-ratio: 16/10; --bodyh: 56cqw; }
.rec--tile{ aspect-ratio: 4/3;   --bodyh: 68.5cqw; border: 0; border-radius: 0; box-shadow: none; }

/* the window bar: mark, title, collaborators, one action */
.rec__bar{
  height: 6.5cqw;
  display: flex; align-items: center; gap: 1.5cqw;
  padding: 0 2.4cqw;
  background: #FAFBFD;
  border-bottom: 1px solid #E6ECF3;
  font-size: 1.9cqw;
}
.rec__mark{
  width: 3cqw; height: 3cqw; background: var(--ink);
  -webkit-mask: url(/assets/logo-mark-only.png) center/contain no-repeat;
          mask: url(/assets/logo-mark-only.png) center/contain no-repeat;
}
.rec__title{ font-weight: 600; letter-spacing: -.01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rec__title span{ color: var(--ink-2); font-weight: 500; }
.rec__meta{ margin-left: auto; display: flex; align-items: center; flex: none; }
.rec__av{ width: 3.1cqw; height: 3.1cqw; border-radius: 50%; border: .35cqw solid #FAFBFD; margin-left: -.9cqw; background: #C9D5E3; }
.rec__av:nth-child(2){ background: var(--coral); }
.rec__av:nth-child(3){ background: #12243A; }
.rec__share{
  margin-left: 1.6cqw; font-size: 1.6cqw; font-weight: 600; color: #fff;
  background: var(--ink); border-radius: 99cqw; padding: .55cqw 1.5cqw;
}

.rec__body{
  position: relative;
  height: var(--bodyh);
  overflow: hidden;
  font-size: 2cqw; line-height: 1.35;
  transition: opacity .45s;
}
/* the loop's cut: a short fade to white, then everything resets */
.rec.is-done .rec__body{ opacity: 0; transition: opacity .9s; }

/* the pointer — the thing that makes it read as a recording */
.cur{
  position: absolute; z-index: 20;
  width: 2.4cqw; height: 3.3cqw; left: 50%; top: 50%;
  transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1), transform .12s;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M4 2 L4 26 L10 20 L14 30 L18 28 L14 18 L21 18 Z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  pointer-events: none;
}
.cur.is-click{ transform: scale(.82); }

/* anything scheduled starts hidden and rises in */
[data-t]{ opacity: 0; transform: translateY(.6cqw); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
[data-t].is-on{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .cur{ display: none; }
  [data-t]{ opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   The section: a grid that becomes a rail.

   Desktop: all ten windows at once — the whole offer in one look, which is
   the "under one roof" claim made visible. Phones: the same cards flow
   sideways instead, scroll-snapped, with the next card peeking in from the
   right; swiping costs no page height, so the section is one screen tall
   instead of ten. The words are deliberately down to a number, a name and
   one line — the depth lives on the service pages.
   ========================================================================== */
.wg__wrap{ max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 2.5rem); }
.wg__head{ max-width: 64ch; margin: 0 0 clamp(1.8rem, 4vw, 2.8rem); }
.wg__head h2{ max-width: 18ch; }
.what .wg__head .lede{ margin-bottom: 0; }   /* styles.css loads after this file */
.wg__nl{ margin: .55rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2); opacity: .85; }
.wg__all{
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.3rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: .72rem 1.4rem;
  transition: border-color .25s, background .25s;
}
.wg__all:hover{ border-color: var(--ink); }
.wg__all span{ transition: transform .25s; }
.wg__all:hover span{ transform: translateX(3px); }

.wg__rail{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.4rem); }

.wg__c{
  position: relative;
  border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; background: #fff;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.wg__c:hover{ box-shadow: 0 20px 44px -24px rgba(18,36,58,.4); transform: translateY(-3px); border-color: #C9D5E3; }
.wg__win{ border-bottom: 1px solid var(--line); }
.wg__win .rec{ border: 0; border-radius: 0; box-shadow: none; }
.wg__b{ display: flex; align-items: baseline; gap: .7rem; padding: .85rem 1rem 1rem; }
.wg__n{ font-family: ui-monospace, Menlo, monospace; font-size: .68rem; letter-spacing: .14em; color: var(--coral); font-weight: 600; }
.wg__b h3{ font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.02em; margin: 0 0 .15rem; }
.wg__b p{ margin: 0; font-size: .85rem; line-height: 1.45; color: var(--ink-2); }
.wg__hit{ position: absolute; inset: 0; z-index: 8; }
.wg__hit span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wg__cta{
  grid-column: span 2;
  display: flex; flex-direction: column; justify-content: center; gap: .35rem;
  background: var(--ink); color: #fff; border-radius: 16px;
  padding: 1.5rem 1.7rem; text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.wg__cta:hover{ transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(18,36,58,.55); }
.wg__cta span{ color: #9DB2CA; font-size: .92rem; }
.wg__cta b{ font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -.02em; }
.wg__cta i{ font-style: normal; display: inline-block; transition: transform .25s; }
.wg__cta:hover i{ transform: translateX(4px); }

.wg__dots{ display: none; }

@media (max-width: 1000px) and (min-width: 761px){
  .wg__rail{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg__cta{ grid-column: span 2; }
}

/* ---- phones: the same cards, flowing sideways ---- */
@media (max-width: 760px){
  .wg{ margin: 0 calc(-1 * clamp(1.2rem, 5vw, 2.5rem)); }   /* full-bleed rail */
  .wg__rail{
    display: flex; gap: .8rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .25rem clamp(1.2rem, 5vw, 2.5rem) .9rem;
    scrollbar-width: none;
  }
  .wg__rail::-webkit-scrollbar{ display: none; }
  .wg__c{ flex: none; width: min(78vw, 320px); scroll-snap-align: center; }
  .wg__cta{ flex: none; width: min(78vw, 320px); scroll-snap-align: center; }
  .wg__dots{ display: flex; justify-content: center; gap: .3rem; }
  .wg__dots i{ width: 5px; height: 5px; border-radius: 3px; background: var(--line); transition: width .3s, background .3s; }
  .wg__dots i.on{ width: 16px; background: var(--ink); }
}