/* ======================================================================
   Porta Productions — site restyle layer.
   One file, loaded last on every page, so the treatment is defined once and
   the city pages cannot drift away from the homepage.

   The approved treatment, restated so this file is self-describing:

     1. Filled surfaces with real corner radius. No hairline borders
        anywhere. The only 1px in this file is an *inset* top highlight — a
        catch-light, which is a lighting effect a fill cannot do, and it
        costs no layout space.
     2. Depth is a tone step plus two soft shadows plus that catch-light.
        Separation by tone, never by a line.
     3. Navy, white and grey. No accent hue. A "colour change" here is a
        value change: --s1 to --s2, or a catch-light going .06 to .16.
     4. Motion is scale, lift and compress. Nothing draws, sweeps or
        retracts. Colour fast (260ms), geometry slow (600-660ms), and every
        transition names its properties. Never `transition:all`.
     5. No backdrop-filter. Measured at up to +193% render cost, and it
        ignores prefers-reduced-motion.
     6. One bloom on the whole page, on the reviews section. Scarcity is
        what makes it mean "this one".

   Type is untouched: Cinzel wordmark, Cormorant Garamond headings, Lato
   body and labels, exactly as they already are.

   This layer overrides; it does not replace. Every page keeps its own
   markup and its own content. Nothing here changes a word of copy.
   ====================================================================== */

:root{
  /* ---- the ground and the surfaces above it ------------------------
     Every surface is brand navy stepped up in lightness. There is no
     second hue anywhere in this file. */
  --ink0:#0A0F16;   /* below the ground: recesses, footer            */
  --ink1:#121A25;   /* brand navy, the ground                        */
  --s1:#1A2330;     /* card surface        (+5L)                     */
  --s2:#222E3D;     /* raised / hover      (+10L)                    */
  --s3:#2C3A4B;     /* pressed / selected  (+15L)                    */

  --r-lg:22px;      /* cards, plates, big surfaces                   */
  --r-md:16px;      /* tiles, buttons, media                         */
  --r-sm:14px;      /* rows, small fills                             */
  --r-pill:999px;

  --lift:0 16px 38px rgba(0,0,0,.48), 0 3px 8px rgba(0,0,0,.34);
  --lift-hi:0 26px 58px rgba(0,0,0,.56), 0 4px 10px rgba(0,0,0,.38);
  --lift-lo:0 8px 20px rgba(0,0,0,.34);
  --edge:inset 0 1px 0 rgba(255,255,255,.06);
  --edge-hot:inset 0 1px 0 rgba(255,255,255,.16);

  --std:cubic-bezier(.4,0,.2,1);
  --wt:cubic-bezier(.8,-.3,.2,1.3);   /* mobile-softened anticipate    */

  /* Hairlines are switched off at the source. Every rule on the site is
     drawn from one of these four variables, and several grids draw them
     as a 1px gap over a --line background, so emptying the variables kills
     the lot in one move. Doing it here rather than with a long list of
     `border:0` overrides is also the cheap way: four custom properties
     cost nothing to match, forty selectors cost a style recalc. */
  --line:transparent;
  --line-d:transparent;
  --hairline:transparent;
  --hairline-inv:transparent;
}

/* ---- text tones -----------------------------------------------------
   The existing silver, #7C828A, does not clear 4.5:1 against navy at the
   sizes it is used at: attributions, kickers, hints and fine print all
   measured between 3.5 and 4.1. These are value changes inside the same
   navy-white-grey palette, not new colours, and they are the same values
   the approved rebuild already uses. Measured after the change: 5.2:1 and
   6.4:1 against the ground at its brightest. */
:root{
  --silver:#9BA6B2;    /* small grey text on navy                       */
  --platinum:#BCC3CB;  /* labels and secondary text on navy             */
  --accent:#AAB2BB;    /* markers and kickers on navy                   */
}

/* The light-key sections (`.paper`) get the same material logic in a
   light register: filled surfaces, radius, softer shadows, no lines.
   `[data-key="light"]` is the same thing for a whole page: restyle.js
   measures the page's own ground and sets it, so a light page such as
   /prepare/ never has a dark card forced onto it. */
.paper,[data-key="light"] body{
  --silver:#5F6873;
  --platinum:#4E5762;
  --accent:#5A636D;
}
.paper,[data-key="light"]{
  --s1:#FFFFFF;
  --s2:#F0F2F4;
  --s3:#E4E8EC;
  --lift:0 12px 30px rgba(18,26,37,.10), 0 2px 5px rgba(18,26,37,.07);
  --lift-hi:0 20px 46px rgba(18,26,37,.14), 0 3px 7px rgba(18,26,37,.09);
  --lift-lo:0 6px 16px rgba(18,26,37,.08);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --edge-hot:inset 0 1px 0 rgba(255,255,255,1);
}
/* A dark band inside a light page goes back to the navy set. Listed
   explicitly rather than guessed, because /prepare/ alternates light and
   dark down its length and each band has its own class. */
[data-key="light"] header,
[data-key="light"] footer,
[data-key="light"] .hero,
[data-key="light"] .big-three,
[data-key="light"] .progress-shell,
[data-key="light"] section.dark,
[data-key="light"] .dark{
  --s1:#1A2330; --s2:#222E3D; --s3:#2C3A4B;
  --silver:#9BA6B2; --platinum:#BCC3CB; --accent:#AAB2BB;
  --lift:0 16px 38px rgba(0,0,0,.48), 0 3px 8px rgba(0,0,0,.34);
  --lift-hi:0 26px 58px rgba(0,0,0,.56), 0 4px 10px rgba(0,0,0,.38);
  --lift-lo:0 8px 20px rgba(0,0,0,.34);
  --edge:inset 0 1px 0 rgba(255,255,255,.06);
  --edge-hot:inset 0 1px 0 rgba(255,255,255,.16);
}

/* ----------------------------------------------------------------------
   1 · no hairlines
   The four variables above take out every border drawn from a hairline
   token, which is most of them. What is left is the handful drawn from a
   real colour, and those are listed here and only here. `border:0` rather
   than a transparent border, because a transparent border still occupies
   layout space and the padding was drawn around a line that is no longer
   there.
   ---------------------------------------------------------------------- */
.btn,.navbtn,.pbtn,.btn-solid,.btn-ghost,.toplink,.addon-badge,
.svc-feat li,.pkg li,.ba-knob,.ba-line,.tl-dot,.box,.play,.ytlite .play,
.filterbar button,.filterbar button.active,.quote,
[data-key="light"] section[style],[data-key="light"] .contact a{
  border:0 !important;
}
/* The selected gallery filter used to be marked by a lit border. It is
   marked by a tone step now: the chosen pill is simply the raised one. */
.filterbar button.active,.filterbar button[aria-pressed="true"]{
  background:#FFFFFF !important;color:var(--ink1) !important;font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.42);
}
.paper .filterbar button.active{background:var(--ink1) !important;color:#fff !important;}
/* A link underline is type, not a separator, so it stays — drawn as an
   underline rather than as a border. */
[data-key="light"] .contact a{text-decoration:underline;text-underline-offset:3px;}
/* The kicker rule and the 62px hairline under headings are type
   furniture built out of a line. The section head now separates by space
   alone, which is what the approved homepage does. */
.rule{display:none !important;}

/* Grids that drew their dividers as a 1px gap over a coloured background
   become real gaps between real surfaces. */
.why-grid,.svc-grid,.stats,.logowall,.pkg-grid,.alc{
  background:transparent !important;
  gap:12px !important;
}
.foot-grid{background:transparent !important;}

/* ----------------------------------------------------------------------
   2 · no backdrop-filter
   Replaced with a solid fill of the same visual weight. This is the single
   biggest render saving in the file.
   ---------------------------------------------------------------------- */
header.scrolled,.toplink,.lb,.mcurl.on,#gs-book,nav.links,body.menu-open header{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
header.scrolled{background:var(--ink1) !important;}
/* Only the mobile menu is a surface. Above the burger breakpoint nav.links is
   an inline row inside the header, so a fill here paints an opaque slab across
   the top right of every page. Scoped to the breakpoint that owns the overlay. */
@media(max-width:1080px){
  nav.links{background:var(--ink0) !important;}
}
.lb{background:rgba(8,11,16,.97) !important;}
#gs-book{background:var(--ink0) !important;box-shadow:0 -14px 34px rgba(0,0,0,.5);}

/* ----------------------------------------------------------------------
   3 · the shared surface
   One recipe, applied to every component that is a card. Tone step, radius,
   two shadows, catch-light.
   ---------------------------------------------------------------------- */
.svc-feat,.addon,.tile,.ytlite,.igt,.why,.svc,.step,.stat,.quote,.qa,
.card,.tl-item,.after,.logowall,.pkg,.alc-row,.room-art{
  background:var(--s1);
  border-radius:var(--r-md);
  box-shadow:var(--lift-lo),var(--edge);
  overflow:hidden;
}
/* `.box` is a 19px checkbox, not a surface. It gets the material without
   the card geometry: filled, small radius, and it fills solid when ticked
   rather than growing a border. */
.box{
  border-radius:6px !important;
  background:var(--s3) !important;
  box-shadow:var(--edge) !important;
  transition:background-color .2s ease,transform .3s var(--wt);
}
.check input:checked ~ .box{background:var(--ink1) !important;}
[data-key="light"] .check input:checked ~ .box{background:var(--ink1) !important;}
.check:active .box{transform:scale(.88);}
/* A 9px control label at #414851 on navy measured 1.67:1. It is a tap
   target, so it takes the same grey every other small label on navy uses. */
.dark .item-na{color:var(--silver) !important;}
.svc-feat,.addon,.why,.card,.after,.room-art{border-radius:var(--r-lg);}
.quote,.step,.stat,.svc{border-radius:var(--r-lg);}

/* A section that is already dark gets its cards a step lighter so they
   still separate from the ground by tone. */
.darker .svc-feat,.darker .addon,.darker .tile,.darker .ytlite,
.darker .quote,.darker .step,.darker .why,.darker .svc,.darker .card{
  background:var(--s2);
}

/* The quote lost its left rule and became a filled card, the way the
   approved homepage does it. The words are untouched. */
.quote{padding:20px 19px 21px !important;}
.quote p{color:#E9ECEF;}
.paper .quote p{color:#1B2430;}

/* Steps, stats and service blocks were separated by rules; they are now
   separated by their own edges. */
.step{padding:22px 20px 24px !important;}
.stat{padding:26px 22px !important;}
.svc{padding:24px 20px !important;}

/* These grids used to be columns of text separated by rules, so two narrow
   columns on a phone was survivable. As filled cards with padding and a
   radius it is not: the words run out of room. Phone-first, they stack. */
@media(max-width:600px){
  .steps,.stats,.svc-grid,.why-grid,.addon-grid,.rev-grid,.films{
    grid-template-columns:1fr !important;
  }
}
.steps,.stats{gap:12px;}

/* Media surfaces: radius has to clip the image too. */
.tile,.ytlite,.igt,.addon-img,.ba{border-radius:var(--r-md);overflow:hidden;}
.svc-feat img,.addon-img img,.tile img,.ytlite .yt-thumb,.igt img{border-radius:inherit;}

/* Lists inside cards used a top border per row. Space does that job now. */
.svc-feat li,.pkg li{padding:7px 0 !important;}

/* ----------------------------------------------------------------------
   4 · buttons — filled objects that compress
   ---------------------------------------------------------------------- */
.btn,.navbtn,.pbtn,.filterbar button,.areas a,.btn-solid,.btn-ghost,.bt{
  background:var(--s2);
  color:#F3F6F9;
  border-radius:var(--r-md);
  box-shadow:var(--lift-lo),var(--edge);
  transform:translateZ(0);
  transition:transform .6s var(--wt),
             background-color .26s ease,
             box-shadow .26s ease,
             color .26s ease;
}
.btn{min-height:52px;padding:15px 26px !important;display:inline-flex;
  align-items:center;justify-content:center;}
.navbtn{min-height:42px;padding:11px 18px !important;}
.areas a{border-radius:var(--r-pill);padding:12px 20px !important;}
.filterbar button{border-radius:var(--r-pill);padding:11px 20px !important;}

/* In a light section the same logic inverts: the fill steps DOWN from the
   white ground and the ink goes dark. Separation is still tone, never a
   line, and the text keeps its contrast. */
.paper .btn,.paper .navbtn,.paper .pbtn,.paper .filterbar button,
.paper .areas a,.paper .btn-ghost,
[data-key="light"] .btn,[data-key="light"] .btn-ghost,
[data-key="light"] .na-toggle,[data-key="light"] .bt{
  background:var(--s3);color:var(--ink1);
}
/* …and back to the navy recipe inside a dark band on a light page. */
[data-key="light"] .hero .btn,[data-key="light"] .dark .btn,
[data-key="light"] .big-three .btn,[data-key="light"] header .btn,
[data-key="light"] footer .btn{
  background:var(--s2);color:#F3F6F9;
}
@media(hover:hover){
  .paper .btn:hover,.paper .navbtn:hover,.paper .filterbar button:hover,
  .paper .areas a:hover,[data-key="light"] .btn:hover{
    background:#DADFE5;color:var(--ink1);
  }
}

/* White is the emphasis colour. `.solid` is the one thing on a page asking
   to be pressed, so it is the one thing that gets it. */
.btn.solid,.btn-solid,.pkg.featured .pbtn{
  background:#FFFFFF;color:var(--ink1);font-weight:700;
  box-shadow:0 12px 28px rgba(0,0,0,.46);
}
.paper .btn.solid,.paper .btn-solid{
  background:var(--ink1);color:#FFFFFF;
  box-shadow:0 12px 26px rgba(18,26,37,.22);
}

/* Press compresses. Every interactive surface, same gesture. */
.btn:active,.navbtn:active,.pbtn:active,.filterbar button:active,
.areas a:active,.tile:active,.ytlite:active,.svc-feat:active,
.addon:active,.igt:active,.qa button:active,.card:active,
.btn-solid:active,.btn-ghost:active,.bt:active{
  transform:scale(.972);
  transition:transform .12s var(--std);
}

@media(hover:hover){
  .btn:hover,.navbtn:hover,.pbtn:hover,.filterbar button:hover,.areas a:hover{
    background:var(--s3);color:#fff;transform:translateY(-3px);
    box-shadow:var(--lift),var(--edge-hot);
  }
  .btn.solid:hover,.btn-solid:hover{
    background:#fff;color:var(--ink1);
    box-shadow:0 18px 38px rgba(0,0,0,.52);
  }
  .paper .btn.solid:hover{background:var(--ink1);color:#fff;}
  .tile:hover,.ytlite:hover,.svc-feat:hover,.addon:hover,.why:hover,
  .card:hover,.igt:hover{
    transform:translateY(-4px);
    box-shadow:var(--lift-hi),var(--edge-hot);
  }
}

/* Nothing draws. The sweeping highlight inside buttons and the nav
   underline that grew from the middle are both draw effects; they are
   replaced by the lift and the tone step above. */
.btn::before{display:none !important;}
nav.links a:not(.btn)::after{display:none !important;}
.tile::before{animation:none !important;opacity:0 !important;}

/* Focus stays loud and stays square to the shape it is on. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.tile:focus-visible,
.ytlite:focus-visible{
  outline:3px solid #fff !important;outline-offset:4px !important;
  border-radius:var(--r-sm);
}
.paper a:focus-visible,.paper button:focus-visible,.paper input:focus-visible,
.paper select:focus-visible,.paper textarea:focus-visible{
  outline-color:var(--ink1) !important;
}

/* ----------------------------------------------------------------------
   5 · form fields — filled, never outlined
   ---------------------------------------------------------------------- */
/* `form input` is every input, and a checkbox is an input. Left unqualified
   it handed the 54px text-field recipe to the SMS consent tick, which then
   rendered as a 36x54 rounded slab with no mark in it, because the same
   rule also zeroes the native appearance. Checkboxes and radios are drawn
   below, on their own terms. */
form input:not([type=checkbox]):not([type=radio]),form select,form textarea,
input[type=text],input[type=email],input[type=tel],input[type=date],
select,textarea{
  background:var(--s1) !important;
  color:#fff;
  border-radius:var(--r-sm) !important;
  min-height:54px;
  padding:16px 17px !important;
  font-size:16px !important;          /* 16px: anything less zooms on iOS */
  box-shadow:var(--lift-lo),var(--edge);
  -webkit-appearance:none;appearance:none;
  transition:background-color .26s ease,box-shadow .26s ease;
}
textarea,form textarea{min-height:120px;line-height:1.55;}
form input:not([type=checkbox]):not([type=radio]):focus,
form select:focus,form textarea:focus,
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  background:var(--s2) !important;
  box-shadow:var(--lift),var(--edge-hot);
}
.paper form input:not([type=checkbox]):not([type=radio]),
.paper form select,.paper form textarea{
  background:#fff !important;color:var(--ink1);
}

/* ---- the consent tick ------------------------------------------------
   An 18px filled square, sized against the 12px disclosure beside it, with
   the same material as every other surface here: tone step, small radius,
   catch-light. The mark is drawn in CSS — two borders on a rotated block —
   so there is no icon font, no sprite and no library.

   The square is 18px to look at and 44px to hit: the ::before is an
   invisible pad centred on the box, and the label around it is a target in
   its own right, so a thumb has the full row plus this.

   Ticking wipes the mark in along its own stroke over 190ms, then the fill
   settles. Geometry, not colour, and nothing sweeps or bounces. Under
   prefers-reduced-motion the same checked state arrives with no travel. */
input[type=checkbox]#sms-consent{
  -webkit-appearance:none;appearance:none;
  position:relative;
  flex:0 0 auto;
  width:18px;height:18px;margin:2px 0 0;padding:0;
  border:0;border-radius:5px;
  background:var(--s3);
  box-shadow:var(--edge);
  cursor:pointer;
  transition:background-color .16s ease,box-shadow .16s ease;
}
/* the 44px tap pad, centred on an 18px square */
input[type=checkbox]#sms-consent::before{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
/* the mark: right and bottom edges of a block, turned 45 degrees */
input[type=checkbox]#sms-consent::after{
  content:"";position:absolute;top:1px;left:6px;
  width:5px;height:10px;
  border:2px solid #FFFFFF;border-top:0;border-left:0;
  transform:rotate(45deg);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .19s cubic-bezier(.4,0,.2,1);
}
input[type=checkbox]#sms-consent:checked{
  background:var(--ink1);
  box-shadow:var(--edge-hot);
}
input[type=checkbox]#sms-consent:checked::after{
  clip-path:inset(0);
}
@media(prefers-reduced-motion:reduce){
  input[type=checkbox]#sms-consent,
  input[type=checkbox]#sms-consent::after{transition:none;}
}

/* ----------------------------------------------------------------------
   6 · the faq — rows that expand, no rules between them
   ---------------------------------------------------------------------- */
.faq{display:flex;flex-direction:column;gap:10px;}
.qa{
  background:var(--s1);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--lift-lo),var(--edge);
  transition:background-color .26s ease,box-shadow .26s ease;
}
.qa.open{background:var(--s2);box-shadow:var(--lift),var(--edge-hot);}
.qa button{min-height:62px;padding:17px 18px !important;}
.qa .ans p{padding:0 18px 19px !important;}
.qa .pm{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;color:#F3F6F9;
  box-shadow:var(--edge-hot);
  transition:transform .5s var(--wt),background-color .26s ease;
}
.qa.open .pm{transform:rotate(45deg);background:#fff;color:var(--ink1);}
.paper .qa .pm{background:var(--ink1);color:#fff;}
.paper .qa.open .pm{background:var(--ink1);color:#fff;}

/* ----------------------------------------------------------------------
   7 · header, top link, lightbox — filled, radiused, no lines
   ---------------------------------------------------------------------- */
header{border-bottom:0 !important;}
header.scrolled{box-shadow:0 10px 26px rgba(0,0,0,.34);}
.toplink{
  background:var(--s2) !important;border-radius:50% !important;
  box-shadow:var(--lift),var(--edge-hot);
  transition:transform .5s var(--wt),opacity .4s ease;
}
.toplink:active{transform:scale(.9);transition:transform .12s var(--std);}
.lb button{
  background:var(--s2) !important;box-shadow:var(--lift-lo),var(--edge-hot);
}
.lb img{border-radius:var(--r-md);}
.addon-badge{
  background:var(--ink1) !important;border-radius:var(--r-pill) !important;
  padding:7px 13px !important;box-shadow:var(--lift-lo),var(--edge);
}
.pkg .tag{border-radius:var(--r-pill);}
.ba-knob{background:#fff !important;color:var(--ink1) !important;
  box-shadow:var(--lift),0 0 0 6px rgba(18,26,37,.35);}
.ba-line{background:rgba(255,255,255,.92) !important;}
.ba-tag{border-radius:var(--r-pill);background:var(--ink1) !important;
  box-shadow:var(--lift-lo),var(--edge);padding:6px 12px !important;}

/* The play control is a filled object, never an outlined ring. */
.ytlite .play,.play{
  background:#fff !important;border:0 !important;
  box-shadow:0 0 24px rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.45);
  transition:transform .5s var(--wt);
}
/* The disc went white (above) but the triangle inside stayed white, so
   every play button on the site was a blank circle. Found 2026-09-25. */
.ytlite .play svg,.play svg{fill:var(--ink1) !important;margin-left:3px;}
.ytlite:active .play{transform:translate(-50%,-50%) scale(.9);
  transition:transform .12s var(--std);}

/* ----------------------------------------------------------------------
   8 · substantial tap targets
   Phone-first: nothing a thumb has to find is smaller than 44px.
   ---------------------------------------------------------------------- */
.areas a,.filterbar button,nav.links a,.foot-grid a,.foot-bottom a,
.qa button,.btn,.navbtn,.pbtn{min-height:44px;}
nav.links a,.foot-grid a{display:flex;align-items:center;}
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center;}

/* ----------------------------------------------------------------------
   9 · the one bloom, on the reviews section
   Two layers cross-fading on OPACITY. A gradient lives in background-image
   and its animation type is discrete: it snaps, it cannot tween. Centres
   sit near the top edge because the cards below are opaque and a glow
   centred deeper is paid for and never seen.

   The reviews section also fills its own ground, which is what keeps the
   moving background out of it. One section on the site has a bloom and no
   drift; every other section has drift and no bloom. That is the whole
   rule.
   ---------------------------------------------------------------------- */
[data-bloom]{position:relative;overflow:hidden;background:var(--ink1);}
[data-bloom].paper{background:#F5F6F7;}
.amb{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.amb span{position:absolute;left:50%;pointer-events:none;opacity:0;
  will-change:opacity;}
.amb .g1{top:6%;width:560px;height:330px;margin-left:-280px;filter:blur(52px);
  background:radial-gradient(ellipse at center,rgba(186,210,236,.34) 0%,
             rgba(18,26,37,0) 70%);}
.amb .g2{top:14%;width:340px;height:210px;margin-left:-170px;filter:blur(36px);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.26) 0%,
             rgba(18,26,37,0) 62%);}
.paper .amb .g1{background:radial-gradient(ellipse at center,
  rgba(18,26,37,.10) 0%,rgba(245,246,247,0) 70%);}
.paper .amb .g2{background:radial-gradient(ellipse at center,
  rgba(18,26,37,.07) 0%,rgba(245,246,247,0) 62%);}
[data-bloom].lit .amb .g1{animation:bloomA 1.5s var(--std) forwards;}
[data-bloom].lit .amb .g2{animation:bloomB 1.9s var(--std) forwards;}
@keyframes bloomA{0%{opacity:0}40%{opacity:1}100%{opacity:.72}}
@keyframes bloomB{0%{opacity:0}30%{opacity:1}100%{opacity:.4}}
[data-bloom] > *:not(.amb){position:relative;z-index:1;}

/* ----------------------------------------------------------------------
   10 · reduced motion
   The light stays. The movement does not.
   ---------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .btn:active,.tile:active,.areas a:active,.card:active,.ytlite:active{
    transform:none !important;
  }
  [data-bloom].lit .amb .g1{animation:none;opacity:.6;}
  [data-bloom].lit .amb .g2{animation:none;opacity:.32;}
}