/* Homepage hero (A133): Lanes' tilted band of tiles, made from our own work. Two rows of portrait tiles cut from nine client
   sites lean at −15°, the top row drifting left and the bottom row right (about 46px a second): our device photos (laptops,
   phones, an iMac), slices of the client sites, and four tiles that scroll through a whole client site in place of video.
   A dark shade over the band (darkest behind the words) keeps the cards
   visible but makes the heading the thing you read: the H1 "Edmonton web design" as the small line on top (as on
   /drivenos/), our outcome statement big with its last line Pine, the lead and the button. Tiles stay sharp
   (WEBSITE-RULES 7): the only soft parts are the edge fades, the glow and the shade. */
.hh {
  --hh-accent: var(--accent);
  --tw: clamp(140px, 14vw, 230px);              /* tile width: 202px at 1440 (Ryan: "a tad smaller") */
  --th: calc(var(--tw) * 1.289);                 /* 246 × 317 */
  --tg: calc(var(--tw) * .0976);                 /* 24px gap */
  --dur: calc(22 * 4.8s);                        /* one set of 22 tiles per pass: ~46px a second at 1440 */
  position: relative; isolation: isolate; display: grid; place-items: center;
  height: 100vh; height: 100svh; min-height: 640px; padding: 0; overflow: hidden; background: var(--bg, #0a0a0a);
}

/* The band, clipped inside the page gutter and faded at the edges (sides as on Lanes; top and bottom so the nav and the
   section below sit on the plain canvas) */
.hh-stage { position: absolute; inset: 0 var(--gutter); z-index: 0; overflow: hidden; pointer-events: none; }
.hh-stage::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg, #0a0a0a), transparent 6%, transparent 94%, var(--bg, #0a0a0a)),
    linear-gradient(180deg, var(--bg, #0a0a0a), transparent 120px, transparent calc(100% - 96px), var(--bg, #0a0a0a)); }
.hh-band { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; gap: var(--tg); width: calc(100vw + 600px);
  transform: translate(-50%, -50%) rotate(-15deg); }
.hh-track { display: flex; width: max-content; animation: hh-left var(--dur) linear infinite; will-change: transform; }
.hh-row--2 .hh-track { animation-name: hh-right; animation-delay: calc(var(--dur) * -.37); }
.hh-row--3 { display: none; }   /* a third row fills tall portrait screens */
.hh-row--3 .hh-track { animation-delay: calc(var(--dur) * -.7); }
@keyframes hh-left { to { transform: translate3d(-50%, 0, 0); } }
@keyframes hh-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* Our picture shape (DESIGN.md radius.md, as on the service-row pictures) with the project cards' 1px line, not Lanes' shapes */
.hh-tile { position: relative; flex: none; width: var(--tw); height: var(--th); margin-right: var(--tg); overflow: hidden;
  border: 1px solid #2d2d38; border-radius: 16px; background: #16161a; }
.hh-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A whole client site scrolling inside the tile, top to bottom and back (the 2px is the tile's border) */
.hh-tile--scroll img { height: auto; object-fit: fill; animation: hh-page 16s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes hh-page { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(-100% + var(--th) - 2px)); } }

/* Glow behind the type: our green, Pine and amber (Lanes uses three blurred circles in hard-light) */
.hh-glow { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(40vw, 560px); aspect-ratio: 1; translate: -50% -52%;
  filter: blur(80px); mix-blend-mode: hard-light; opacity: .55; pointer-events: none; }
.hh-glow span { position: absolute; width: 76%; aspect-ratio: 1; border-radius: 50%; }
.hh-glow span:nth-child(1) { left: 24%; top: 0; background: rgb(44 221 127); }
.hh-glow span:nth-child(2) { left: 19%; top: 24%; background: var(--hh-accent); }
.hh-glow span:nth-child(3) { left: 0; top: 4%; background: rgb(249 164 58); }

/* The shade: an even dark layer over the band, deeper behind the words */
.hh-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 50% 56%, rgb(10 10 10 / .72), rgb(10 10 10 / 0) 100%), rgb(10 10 10 / .44); }   /* A146: reaches down to the lead line so it passes AA over the tiles */

/* The type */
.hh-copy { position: relative; z-index: 3; width: 100%; padding: 96px var(--gutter) 72px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hh-eyebrow { margin-bottom: clamp(18px, 2vw, 28px); }   /* the site eyebrow: star + white caps (was grey, no star) */
#hero .hh-eyebrow h1 { margin: 0; font: inherit !important; letter-spacing: inherit; text-transform: inherit; color: inherit; }
#hero .hh-mark { margin: 0; color: #fff; font: 800 clamp(42px, 7.2vw, 128px)/.88 "Sofia Sans Extra Condensed", "Satoshi", sans-serif !important;
  letter-spacing: -.005em; text-transform: uppercase; }
.hh-mark__line { display: block; }
#hero .hh-mark .v3-em { color: var(--hh-accent); }
#hero .hh-line { max-width: 36em; margin: clamp(22px, 2.4vw, 34px) 0 0; color: #d0d0d6; font: 400 clamp(17px, 1.4vw, 21px)/1.55 Inter, system-ui, sans-serif !important;
  text-transform: none; text-wrap: balance; }
.hh .roll { --b-ink: var(--on-accent); --b-acc: #fff; --b-on: #0b0b0d; margin-top: clamp(24px, 2.6vw, 36px); background: var(--hh-accent); color: var(--on-accent); box-shadow: none;
  font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }

/* One pause control for everything that moves (WCAG 2.2.2), in place of Lanes' pause chip on every video */
.hh-pause { position: absolute; z-index: 3; right: calc(var(--gutter) + 20px); bottom: 24px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; background: rgb(12 12 16 / .72); color: #fff; cursor: pointer; transition: border-color .2s, color .2s; }
.hh-pause:hover { border-color: var(--hh-accent); color: var(--hh-accent); }
.hh-pause:focus-visible { outline: 2px solid var(--hh-accent); outline-offset: 3px; }
.hh-pause svg { width: 16px; height: 16px; fill: currentColor; }
.hh-pause .hh-play, .hh-pause[aria-pressed="true"] .hh-stop { display: none; }
.hh-pause[aria-pressed="true"] .hh-play { display: block; }
.hh.is-paused .hh-track, .hh.is-paused .hh-tile--scroll img, .hh.is-off .hh-track, .hh.is-off .hh-tile--scroll img { animation-play-state: paused; }

@media (max-aspect-ratio: 4 / 5) {
  .hh { --tw: clamp(140px, 22vw, 240px); }
  .hh-row--3 { display: block; }
}
@media (max-width: 600px) {
  .hh { --tw: 38vw; }
  .hh-copy { padding: 88px var(--gutter) 80px; }
  #hero .hh-mark { font-size: clamp(38px, 11.5vw, 64px) !important; }   /* "Websites that turn" on one line, with room */
  .hh-glow { width: 90vw; filter: blur(60px); }
  .hh-pause { right: 20px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-track, .hh-tile--scroll img { animation: none; }
  .hh-pause { display: none; }
}