/* ------------------------------------------------------------------
   Homepage — Figma frame 175:2489 "Frame 427321768", 1512 x 3563.
   Desktop values below are the literal Figma numbers; the media queries
   at the bottom are the only place anything is allowed to deviate.
   ------------------------------------------------------------------ */

/* The hero and the footer must reach the window edges at every width
   (Figma's mobile frame draws them that way: the hero image is 390 wide on a
   390 frame and the footer is 392, i.e. deliberately past both edges).
   So .page is full width and the 1512 column is re-applied per band, which
   keeps every desktop offset identical to before. */
.page {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* ---------------------------------------------------------- header
   Figma 175:2493 "menu/Default" — 1452x58 at (30,28), floating over the hero.
   Note: both nav link groups inside this component are visible:false in
   Figma, so the bar carries the wordmark only.                        */
.masthead {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - var(--gutter) * 2, var(--canvas) - var(--gutter) * 2);
  height: 58px;
  z-index: 50;
  background: var(--off-white);
  border-radius: 10px;
  box-shadow: 0 0 12px var(--menu-shadow);
  display: flex;
  align-items: center;
  padding: 0 24px;              /* Figma 175:2493 padding 16/24 */
  transition: height .18s ease, border-radius .18s ease,
              background-color .18s ease, box-shadow .18s ease,
              padding .18s ease;
}

/* ---- stuck state -------------------------------------------------------
   The bar is out of document flow in BOTH states (absolute -> fixed), so
   sticking it cannot shift a single pixel of page content; there is no
   placeholder to collapse. The padding expression below resolves to the
   same content x in both states, so the links do not slide sideways
   either: at 1512 it is 30 + 24 = 54px, which is exactly where the
   floating pill puts them.                                             */
.masthead.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: none;
  height: 52px;
  border-radius: 0;
  padding-inline: calc(
    max(var(--gutter), (100% - (var(--canvas) - var(--gutter) * 2)) / 2) + 24px);
  background: rgba(253, 253, 253, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(18, 21, 25, 0.13);
  animation: mhead-drop .22s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes mhead-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* the pill must be fully off-screen before the stuck bar drops in, or the
   two states overlap for a frame: 28 top + 58 tall + slack */
.mhead-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 96px;
  pointer-events: none;
}
/* Figma centres the wordmark in the bar (x=682.7 of 1452, exactly centre)
   while the link group sits at the left, so the mark is centred absolutely
   rather than by the flex distribution. */
.masthead__home {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
}
.masthead__logo { width: 86.635px; height: 24px; }

/* ---------------------------------------------------------- hero
   Figma 175:2490 "image 67" — 1512x606, bottom corners 18px,
   photo under a rgba(0,0,0,.43) scrim (see figma-fills.css).          */
.hero {
  position: relative;
  height: 606px;
  border-radius: 0 0 18px 18px;
  display: flex;
  justify-content: center;
  color: var(--white);
  overflow: hidden;
}
.hero__inner {
  width: 100%;
  max-width: var(--canvas);
  padding: 127px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__partner {                 /* Ace Hardware mark, Figma 175:2733 */
  width: 98.884px;
  height: 59.538px;
}
.hero__title {
  margin-top: 16.462px;
  width: 834px;
  max-width: 100%;
  font-weight: 700;
  font-size: var(--h1);
  line-height: var(--h1-lh);
  letter-spacing: -1.56px;
}
.hero__sub {
  margin-top: 41px;
  /* Figma box is 431px; Chrome needs 433 to keep the designed 2-line break */
  width: 433px;
  max-width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 26.35px;
}

/* glass stat card — Figma 175:2726, 429x122 at (542,432) */
.stats {
  margin-top: 75px;
  width: 429px;
  height: 122px;
  border-radius: 21px;
  border: 1px solid rgba(236, 241, 245, 0.66);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  padding-left: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 45px;
}
.stat { position: relative; width: 156.744px; height: 88.908px; text-align: left; }
.stat__num {
  position: absolute;
  inset: 0 auto auto 0;
  font-weight: 800;
  font-size: 53.531px;
  line-height: 69.425px;
}
.stat__label {
  position: absolute;
  inset: auto auto 0 0;
  font-weight: 600;
  font-size: 13.326px;
  line-height: 1.3;
}

/* ---------------------------------------------------------- generic band */
.band {
  max-width: var(--canvas);
  margin-inline: auto;
  padding: 0 var(--gutter);
}
.band--products { padding-top: 73px; }      /* hero 606 -> heading 679 */

/* Figma places the four heading blocks at different x: 378 / 372 / 372 / 337.
   Reproduced verbatim -- see the report, the compat one is 35px off centre. */
.shead { margin-right: auto; }
.shead--products { margin-left: 348px; }
.shead--videos   { margin-left: 342px; }
.shead--cases    { margin-left: 342px; }
.shead--compat   { margin-left: 307px; }
.band--videos   { padding: 50px 0 0; }   /* .videos carries the 30px pad */      /* tiles end 1131; .videos carries the 30px pad */
.band--cases    { padding-top: 89px; }      /* videos end 1814 -> heading 1903 */
.band--compat   { padding-top: 164px; }     /* cases end 2509 -> heading 2673 */

/* ---------------------------------------------------------- category tiles
   Figma 175:2494 — row 1389x306 at (56,825), 5 x 261 with 21px gaps.     */
.cats {
  width: 1389px;
  max-width: 100%;
  margin: 49.2px auto 0 26px;   /* Figma row starts at x=56 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 21px;
}
.cat {
  height: 306px;          /* 213 image + 76 label + 17px of slack, as in Figma */
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 0.204px 3.148px rgba(0, 0, 0, 0.017);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cat__img {
  height: 213px;
  border-radius: 18px 18px 0 0;
}
.cat__label {
  height: 76px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--tile);
  line-height: 24px;
  text-align: center;
  color: var(--ink);
}

/* ---------------------------------------------------------- videos
   Figma 175:2520 "product series - text with img": 1512x633, pad 80/30,
   card row 1452x347 at (30,1387), 4 x 354 with 12px gaps.               */
.videos { padding: 80px var(--gutter); }
.videos__grid {
  width: 1452px;
  max-width: 100%;
  margin: 29.2px auto 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.vid {
  height: 347px;
  background: var(--white);
  border-radius: 18px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.vid__media { padding: 8px; }
.vid__frame {
  position: relative;
  aspect-ratio: 338 / 228;
  border-radius: 16px;
  overflow: hidden;
}
.vid__img { position: absolute; inset: 0; }
/* facade button — nothing is requested from YouTube until this is pressed */
.vid__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.vid__disc {                     /* Figma 175:2530 "Frame 2270", 60x60 */
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--page);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  transition: scale 0.18s ease, background-color 0.18s ease;
}
.vid__play:hover .vid__disc,
.vid__play:focus-visible .vid__disc { scale: 1.06; background: rgba(255, 255, 255, 0.22); }
.vid__disc img { position: absolute; top: 22px; left: 27px; width: 11.144px; height: 16.097px; }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__title {
  padding: 16px 18px;
  font-weight: 700;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  color: var(--ink);
}

/* ---------------------------------------------------------- use cases
   Figma cards 175:2618 (475x451), 175:2576 and 175:2596 (474x460).
   The three cards genuinely differ in height in the source file.        */
.cases {
  width: 1451px;
  max-width: 100%;
  margin: 49.2px auto 0 0;
  display: grid;
  grid-template-columns: 475fr 474fr 474fr;
  gap: 14px;
  align-items: start;
}
.uc {
  position: relative;
  background: var(--white);
  border-radius: 18px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.uc--internet { height: 451px; }
.uc--comfort, .uc--lighting { height: 460px; }
.uc__media { padding: 8px; }
.uc__frame {
  position: relative;
  aspect-ratio: 458 / 228;
  border-radius: 16px;
  overflow: hidden;
}
.uc__img { position: absolute; inset: 0; }

/* in-photo automation chip — Figma "Frame 3731" at (19,18) inside the photo */
.ucbadge {
  position: absolute;
  top: 18px;
  left: 19px;
  height: 45px;
  border-radius: 7.686px;
  background: linear-gradient(143.3deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 0 0 3.475px rgba(255, 255, 255, 0.3);
  padding: 2.329px 2.329px 2.329px 8.151px;
  display: flex;
  align-items: center;
  gap: 7.041px;
  color: var(--white);
  white-space: nowrap;
}
.uc--internet .ucbadge { width: 180.865px; }
.uc--comfort  .ucbadge { width: 169px; }
/* card 3's pill has no auto-layout in Figma: 210 wide, icon 31.918, text at x=56 */
.uc--lighting .ucbadge { width: 210px; gap: 15.931px; }
.uc--lighting .ucbadge__icon { width: 31.918px; height: 31.918px; }

.ucbadge__icon {
  width: 31.258px;
  height: 31.258px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.ucbadge__icon img { width: auto; height: auto; }
.ucbadge__l1 { display: block; font-weight: 700; font-size: 12.161px; line-height: 16.417px; letter-spacing: -0.14px; }
.ucbadge__l2 { display: block; font-weight: 400; font-size: 11.521px; line-height: 15.553px; }

/* product cut-outs sitting across the photo edge, with Figma's 3 stacked shadows */
.uc__cut {
  position: absolute;
  z-index: 2;
  filter:
    drop-shadow(0.384px 0.625px 0.652px rgba(0, 0, 0, 0.043))
    drop-shadow(1.817px 2.952px 2.548px rgba(0, 0, 0, 0.067))
    drop-shadow(4.717px 7.665px 8px rgba(0, 0, 0, 0.11));
}
.uc__cut--internet      { left: 159px; top: 177px; width: 162px; height: 110px; }
.uc__cut--comfort-plug  { left: 114px; top: 196px; width: 132px; height: 80px; }
.uc__cut--comfort-ht    { left: 243px; top: 176px; width: 116.769px; height: 121px; }
.uc__cut--comfort-p1    { left: 288px; top: 216px; width: 16px; height: 24px; }
.uc__cut--comfort-p2    { left: 271px; top: 216px; width: 16px; height: 24px; }
.uc__cut--comfort-p3    { left: 273px; top: 227px; width: 12px; height: 2px; }
.uc__cut--light-plug    { left: 114px; top: 199px; width: 132px; height: 80px; }
.uc__cut--light-motion  { left: 249px; top: 185px; width: 96.8px; height: 101.895px; }

.uc__text {
  margin-top: 53px;                /* Figma itemSpacing between photo and copy */
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uc__title { font-weight: 700; font-size: var(--h3); line-height: var(--h3-lh); color: var(--ink); }
.uc__copy  { font-weight: 500; font-size: var(--copy); line-height: var(--copy-lh); color: var(--body); }

/* ---------------------------------------------------------- compatibility
   14 logo cells, 184x101, pitch 201x129 -> 17px column gap, 28px row gap. */
.compat {
  width: 1390px;
  max-width: 100%;
  margin: 56.2px auto 0 18px;   /* Figma grid starts at x=48 */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: 17px;
  row-gap: 28px;
}
.compat__cell { aspect-ratio: 184 / 101; display: grid; place-items: center; }
.compat__cell img { width: 100%; height: 100%; }

/* ---------------------------------------------------------- footer
   Figma 175:2725 — 1512x343 #121519. The link columns, the newsletter
   form and the copyright row are all visible:false in the source.      */
.footer {
  margin-top: 135px;
  height: 343px;
  background: var(--ink);
  display: flex;
  justify-content: center;
}
.footer__inner {
  width: 100%;
  max-width: var(--canvas);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.footer__logo { width: 110px; height: 28px; }
.footer__social { display: flex; align-items: center; gap: 24px; }
.footer__social img { width: auto; }
.footer__social img:nth-child(1) { width: 14px; height: 14px; }
.footer__social img:nth-child(2) { width: 15.26px; height: 15.26px; }
.footer__social img:nth-child(3) { width: 16px; height: 16px; }
.footer__social img:nth-child(4) { width: 15px; height: 16px; }

/* ================================================================
   Responsive. 1512px is the design width; below it the grids drop
   columns and the fixed card heights are released.
   ================================================================ */
@media (max-width: 1511px) {
  .cats, .videos__grid, .cases, .compat { width: 100%; margin-left: auto; margin-right: auto; }
  .shead, .shead--products, .shead--videos, .shead--cases, .shead--compat {
    margin-left: auto; margin-right: auto;
  }
}

@media (max-width: 1240px) {
  .compat { grid-template-columns: repeat(5, 1fr); }
  .cases { grid-template-columns: 1fr 1fr; }
  .uc--internet, .uc--comfort, .uc--lighting { height: auto; }
  .uc__text { margin-top: 40px; }
}

@media (max-width: 1100px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .cat__img { height: auto; aspect-ratio: 261 / 213; }
  .videos__grid { grid-template-columns: repeat(2, 1fr); }
  .vid { height: auto; }
  .hero { height: auto; }
  .hero__inner { padding-bottom: 60px; }
  .band--compat { padding-top: 90px; }
  .band--cases { padding-top: 60px; }
}

@media (max-width: 860px) {
  .compat { grid-template-columns: repeat(3, 1fr); }
  .cases { grid-template-columns: 1fr; }
  .stats { width: 100%; max-width: 429px; }
}

@media (max-width: 720px) {
  .hero__inner { padding-top: 104px; }
  .hero__title { margin-top: 14px; }
  .hero__sub { margin-top: 20px; }
  .stats { margin-top: 36px; height: 104px; padding-left: 20px; gap: 20px; }
  .stat { width: auto; height: auto; text-align: center; }
  /* they are absolutely placed on desktop; once static they must still stack */
  .stat__num { position: static; display: block; font-size: 34px; line-height: 44px; }
  .stat__label { position: static; display: block; font-size: 12px; white-space: nowrap; }
  .cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .videos__grid { grid-template-columns: 1fr; }
  .videos { padding: 56px var(--gutter); }
  .band--products { padding-top: 48px; }
  .band--videos { padding-top: 24px; }
  .footer { margin-top: 72px; height: auto; padding: 56px 0; gap: 40px; }
  /* the cut-outs are positioned for the 458px-wide desktop photo */
  .uc__cut { display: none; }
}

@media (max-width: 560px) {
  .compat { grid-template-columns: repeat(2, 1fr); }
  .cats { grid-template-columns: 1fr; }
  .cat__img { aspect-ratio: 261 / 150; }
}

/* ================================================================
   Navigation.

   Figma's desktop bar (175:2493 "menu/Default") does contain a link
   group, but it is visible:false and its labels are the corporate set
   (Products / Solutions / Shelly App / Shelly X, then Partners /
   Corporate / Help & Resources). The owner asked for the five product
   categories instead, so the LAYOUT and TYPE below are Figma's desktop
   nav; only the labels are the requested five. The mobile panel is
   Figma 124:1124 reproduced as-is.
   ================================================================ */
/* Figma's bar carries TWO nav groups of identical width (471.00px each,
   nodes I175:2493;1596:94102 and ;1596:94107) flanking the centred
   wordmark, with different item counts (4 and 3). That equal-width rule is
   what is reproduced here: the list spans the bar and breaks after the
   second item, which splits the five labels 174px / 247px -- closer to
   equal than a 3/2 break would be (264px / 157px). See the report. */
.mnav { flex: 1 1 auto; min-width: 0; }
.mnav__list {
  display: flex;
  align-items: center;
  gap: 18px;                       /* Figma Frame 2051 itemSpacing */
  list-style: none;
  margin: 0;
  padding: 0;
}
.mnav__item--split { margin-right: auto; }
.mnav__link {
  display: inline-block;
  font-weight: 600;                /* Manrope SemiBold */
  font-size: 16px;
  line-height: 19.2px;
  color: var(--ink);               /* #121519 */
  text-decoration: none;
  white-space: nowrap;
}
.mnav__link:hover { color: var(--brand); }
.mnav__link:focus-visible,
.mmenu__link:focus-visible,
.masthead__home:focus-visible,
.mmenu__home:focus-visible,
.mtoggle:focus-visible,
.mmenu__close:focus-visible,
.vmodal__close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* hamburger — Figma 119:2789: 36x36, #ECF1F5, radius 3, three 16px
   rules 4px apart, 1px stroke with round caps */
.mtoggle {
  display: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 3px;
  background: var(--page);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}

/* ---- mobile panel, Figma 124:1124 ---- */
.mmenu {
  margin: 0;
  padding: 0 0 40px;               /* Frame 1195 paddingBottom 40 */
  border: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  background: var(--off-white);    /* #FDFDFD */
  color: var(--ink);
}
.mmenu {
  animation: mmenu-in .24s cubic-bezier(.22, .61, .36, 1) both;
  box-shadow: 0 18px 44px rgba(18, 21, 25, 0.18);
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}
.mmenu::backdrop {
  background: rgba(18, 21, 25, 0.5);
  animation: mmenu-fade .24s ease both;
}
@keyframes mmenu-in {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes mmenu-fade { from { opacity: 0; } to { opacity: 1; } }

/* the five rows arrive just behind the panel, 34ms apart */
.mmenu__list li {
  animation: mmenu-item .26s ease both;
  animation-delay: calc(80ms + var(--i) * 34ms);
}
@keyframes mmenu-item {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.mmenu__bar {
  height: 46px;                    /* Figma 124:1126 "menu" 362x46 */
  margin: 14px;
  border-radius: 5px;
  padding: 5px;
  display: flex;
  align-items: center;
  position: relative;
}
.mmenu__close {                    /* Figma 124:1129: 36x36 #4594D1 radius 3 */
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 3px;
  background: var(--brand);
  color: var(--off-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mmenu__home {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}
.mmenu__home img { width: 73px; height: 20px; }   /* Figma 124:1132 */
.mmenu__list {
  list-style: none;
  margin: 0;
  padding: 24px 20px 0;            /* Frame 2783 padTop 24, Frame 1195 pad 20 */
}
/* Figma draws these rows 40px tall. Raised to 48 because this panel is
   touch-only: 40px is under the 44px minimum in WCAG 2.5.8 and Apple's
   HIG, and a menu that is hard to hit with a thumb is a worse defect than
   an 8px deviation. Type, colour and left offset stay Figma's. */
.mmenu__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  line-height: 18.2px;
  color: #353638;                  /* Figma 124:1138 fill */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, color .14s ease;
}
.mmenu__link:hover { color: var(--brand); }
.mmenu__link:active { background: rgba(69, 148, 209, 0.12); color: var(--brand); }

/* the hamburger and the X are thumb targets too */
.mtoggle, .mmenu__close {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .14s ease, transform .14s ease;
}
.mtoggle::after, .mmenu__close::after {
  content: "";
  position: absolute;
  inset: -6px;                     /* 36px box -> 48px hit area */
}
.mtoggle:active, .mmenu__close:active { transform: scale(.94); }

/* below this width the five links no longer clear the centred wordmark,
   so the bar switches to Figma's mobile pattern */
@media (max-width: 1180px) {
  .mnav { display: none; }
  .mtoggle { display: flex; }
  /* Figma 119:2786 "mobile-menu" closed state: 46px tall, radius 5, pad 5 */
  .masthead { height: 46px; border-radius: 5px; padding: 5px; }
  .masthead__logo { width: 73px; height: 20px; }

  /* the stuck bar must be shorter than the resting one here too, and it
     has to clear a notch: 42px of bar plus whatever the device reserves */
  .masthead.is-stuck {
    height: 42px;
    padding-top: env(safe-area-inset-top);
    height: calc(42px + env(safe-area-inset-top));
    /* same expression as the desktop rule, but with the 5px inner pad the
       mobile bar uses, so the logo does not shift sideways either */
    padding-inline: calc(
      max(var(--gutter), (100% - (var(--canvas) - var(--gutter) * 2)) / 2) + 5px);
  }
}

/* ================================================================
   Video lightbox
   ================================================================ */
.vmodal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.vmodal::backdrop { background: rgba(0, 0, 0, 0.82); }
.vmodal__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100% - 96px));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.vmodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vmodal__close:hover { background: rgba(255, 255, 255, 0.26); }

@media (max-width: 560px) {
  .vmodal__frame { width: calc(100% - 24px); }
  .vmodal__close { top: 8px; right: 8px; }
}

/* scroll lock while any dialog is open */
/* Scroll lock for the open menu. overflow:hidden stops wheel and touch
   scrolling; --sbw (set in menu.js) replaces the width the vanishing
   scrollbar would otherwise take with it. */
.is-locked, .is-locked body { overflow: hidden; }
.is-locked body { padding-right: var(--sbw, 0px); }


/* ================================================================
   Reduced motion: keep every state change, drop the movement.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .masthead,
  .mmenu__link,
  .mtoggle,
  .mmenu__close { transition: none; }
  .masthead.is-stuck,
  .mmenu,
  .mmenu::backdrop,
  .mmenu__list li { animation: none; }
  .vid__play:hover .vid__disc,
  .vid__play:focus-visible .vid__disc { scale: 1; }
  html { scroll-behavior: auto; }
}