/* Phone / tablet polish shared by every page.
   Loaded last so it can refine the page-level styles. */
a, button{ -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img, video, canvas, svg{ max-width:100%; }

@media (max-width:820px){
  /* ---- Home hero: one bright film strip along the bottom, text on top ---- */
  .hero{ align-items:flex-start; padding-top:124px; padding-bottom:230px; }
  .hero-reel{ opacity:1; }
  .hero-reel .reel-skew{
    top:auto; bottom:calc(88px + env(safe-area-inset-bottom));
    left:-15%; right:-15%; transform:rotate(-5deg); gap:0;
  }
  .hero-reel .reel-row.rev{ display:none; }
  .hero-reel .reel-row{ padding:14px 0; animation-duration:75s; }
  .hero-reel .reel-row::before, .hero-reel .reel-row::after{ height:6px; }
  .hero-reel .reel-row::before{ top:4px; } .hero-reel .reel-row::after{ bottom:4px; }
  .reel-frame{ width:148px; margin-right:12px; filter:saturate(.85) brightness(.78); }
  .hero-media-vignette{
    background:linear-gradient(180deg, var(--ink) 0%, rgba(12,11,8,.15) 14%, transparent 70%, var(--ink) 100%) !important;
  }

  /* ---- Tablet: stack the intro copy and buttons ---- */
  .hero-sub-row{ grid-template-columns:1fr; gap:26px; margin-top:30px; }
  .hero p.lede{ max-width:52ch; }

  /* ---- Big faint marquee words must not fight with body copy ---- */
  .hm-track span, .whm-track span{ font-size:clamp(46px,14vw,72px) !important; opacity:.07 !important; }

  /* ---- Lighter GPU load: smaller blurs, static grain ---- */
  .hero-aurora span{ filter:blur(55px); }
  .hero-grain{ animation:none; opacity:.05; }
  .cs-bg span{ filter:blur(55px); }
  .site-footer .beam{ filter:blur(9px); }
  .site-footer .beam.b3{ display:none; }

  /* ---- Footer: compact two-column grid ---- */
  .ft-top{ grid-template-columns:1fr 1fr !important; gap:30px 18px !important; padding-bottom:36px !important; }
  .ft-brand, .ft-top > .ft-col:last-child{ grid-column:1 / -1; }
  .ft-col h4{ margin-bottom:12px; }
  .ft-col a, .ft-col span{ font-size:14.5px; margin-bottom:2px; }
  .ft-col span{ padding:8px 0; }
  .ft-col a{ padding:8px 0; }
  .ft-mark{ margin-top:6px; }
  .ft-bottom{ gap:16px; padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* Tablets */
@media (min-width:601px) and (max-width:1000px){
  .ft-top{ grid-template-columns:1fr 1fr 1fr !important; }
  .ft-brand{ grid-column:1 / -1; }
}

/* Small phones */
@media (max-width:380px){
  .reel-frame{ width:128px; }
  .hero{ padding-bottom:210px; }
}

/* Landscape phones: don't force a full-height hero */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:0; padding:96px 0 150px; }
}

/* Seventh mobile-menu item (Services added to nav) */
@media (max-width:820px){
  .mobile-menu.open nav a:nth-child(7){ transition-delay:.35s; }
}

/* Comfortable tap target for the logo link */
.brandmark{ min-height:44px; }