/* ---- responsive layer (added at compile time; the design was drawn at 1440px) ---- */
@media (max-width:1023px){
  [data-screen-label="Nav"] nav,[data-screen-label="Nav"] .ds-btn{display:none!important}
  .nav-burger{display:inline-flex}
}
@media (max-width:900px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns"]>*{min-width:0}
  select,textarea{max-width:100%}
  footer [style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important}
  [style*="position:sticky;top:100px"],[style*="position:sticky;top:96px"]{position:relative!important;top:auto!important}
  .svc-panel{height:420px!important}
  /* Our Guarantee (v3): promise rows, agreement clauses and the remedy box are row grids, not column layouts */
  [data-screen-label="The Guarantee"] [style*="grid-template-columns:auto 40px 1fr auto"]{grid-template-columns:auto 40px 1fr auto!important}
  [data-screen-label="The Guarantee"] [style*="grid-template-columns:34px 1fr"]{grid-template-columns:34px 1fr!important}
  [data-screen-label="The Guarantee"] [style*="grid-template-columns:auto 1fr;"]{grid-template-columns:auto 1fr!important}
  [data-screen-label="The Guarantee"] [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  [data-screen-label="Final CTA"]>div[style*="display:grid"]{padding-top:96px!important;padding-bottom:72px!important}
}
/* reviews carousel on phones (every page; the design only wrote a phone branch for the Homepage) */
@media (max-width:759px){
  [data-sty="revWrapStyle"]{display:flex!important;flex-direction:column!important;position:static!important}
  [data-sty="revPanelStyle"]{position:static!important;transform:none!important;width:auto!important;padding:24px var(--container-pad) 6px!important;text-align:center!important;background:transparent!important;z-index:auto!important}
  [data-sty="revViewportStyle"]{margin-left:0!important;padding:10px 0 10px var(--container-pad)!important;position:relative!important}
  [data-sty="revPrevBtnStyle"]{left:4px!important}
  [data-sty="revNextBtnStyle"]{right:8px!important}
  [data-sty="revCardStyle"]{width:max(240px,min(300px,calc(100vw - 96px)))!important}
}
/* master service pages on phones: desktop compositions re-flowed (2026-09-16) */
@media (max-width:900px){
  /* split-background sections: the angled colour panel, the tinted right strip and the giant watermark word are desktop composition */
  [style*="width:46%"][style*="clip-path"]{display:none!important}
  [style*="font-size:200px"]{display:none!important}
  [style*="width:38%"][style*="linear-gradient(90deg,rgba(236,248,254,0)"]{display:none!important}
  /* floating badges pinned outside a photo card sit inside it */
  [style*="top:-22px;left:-22px"]{top:12px!important;left:12px!important}
  [style*="right:-22px;top:38%"]{right:12px!important}
  /* gallery: a taller slide so the caption fits, thumbnails three-up */
  [style*="aspect-ratio:21/9"]{aspect-ratio:auto!important;min-height:400px}
  [style*="aspect-ratio:21/9"] [style*="left:36px;right:36px;bottom:32px"]{left:18px!important;right:18px!important;bottom:18px!important}
  [style*="aspect-ratio:21/9"] h3{font-size:22px!important}
  [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  /* design process: the ten phase tabs become a swipeable row, the phase panel stacks photo over text */
  [style*="grid-template-columns:repeat(10,minmax(0,1fr))"]{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:calc(-1 * var(--container-pad));margin-right:calc(-1 * var(--container-pad));padding:0 var(--container-pad) 8px}
  [style*="grid-template-columns:repeat(10,minmax(0,1fr))"]::-webkit-scrollbar{display:none}
  [style*="grid-template-columns:repeat(10,minmax(0,1fr))"]>button{flex:0 0 132px;scroll-snap-align:start}
  [style*="min-height:440px"]{min-height:260px!important}
  [style*="padding:52px 56px"]{padding:28px 20px!important}
  /* feature explorer: shorter photo, no pin labels, caption stacked, tighter rows */
  [data-ft] [style*="min-height:620px"]{min-height:440px!important}
  [data-ft-pin] [data-sty="labelStyle"]{display:none!important}
  [data-ft] [style*="left:28px;right:28px;bottom:26px"]{left:16px!important;right:16px!important;bottom:16px!important;flex-direction:column;align-items:flex-start!important;gap:10px!important}
  [data-ft] [style*="left:28px;right:28px;bottom:26px"]>div[style*="text-align:right"]{text-align:left!important}
  [data-ft-row]{padding:12px 16px!important}
  [data-ft] [style*="left:28px;right:28px;bottom:26px"] p:last-child{display:none}
  [data-ft] [style*="left:28px;right:28px;bottom:26px"]{flex-direction:row;align-items:flex-end!important;justify-content:space-between}
  [data-ft-pin] [data-sty="ringStyle"],[data-ft-pin] [data-sty="dotStyle"]{width:32px!important;height:32px!important}
  [data-ft] [style*="min-height:620px"]{min-height:400px!important}
  /* warranty: term tiles two-up, the cross-section diagram is desktop-only, its coverage panel and note flow in the page */
  [data-screen-label="Warranty"] [style*="grid-template-columns:repeat(5,minmax(0,1fr))"]{grid-template-columns:1fr 1fr!important}
  [data-screen-label="Warranty"] [style*="min-height:170px"]{min-height:0!important}
  [data-screen-label="Warranty"] [style*="font-size:34px"]{font-size:26px!important}
  [data-screen-label="Warranty"] [style*="margin-top:-36px"]>svg,[data-screen-label="Warranty"] [style*="margin-top:-36px"]>button{display:none!important}
  [data-screen-label="Warranty"] [style*="margin-top:-36px"]{margin-top:0!important;padding:28px var(--container-pad) 0}
  [data-screen-label="Warranty"] [style*="margin-top:-36px"]>div[style*="position:absolute"]{position:static!important;width:auto!important}
  [data-screen-label="Warranty"] [style*="margin-top:-36px"]>p[style*="position:absolute"]{position:static!important;padding:14px 0 28px;text-align:center}
  /* logo strips: capped logo height and a tighter gap so a row holds two or three marks */
  img[src*="/assets/logo-"]:not([src*="kingfisher-mark"]){max-height:52px!important;width:auto}
  div[style*="gap:72px"]{gap:24px 36px!important}
  /* row grids (icon | text): these are rows, not column layouts - the broad collapse above must not stack them */
  [style*="grid-template-columns:44px 1fr"]{grid-template-columns:44px 1fr!important}
  [style*="grid-template-columns:40px 1fr"]{grid-template-columns:40px 1fr!important}
  [style*="grid-template-columns:14px 1fr auto"]{grid-template-columns:14px 1fr auto!important}
  /* pricing's cost-driver table (icon | factor | level | note): level and note wrap under the factor */
  [style*="grid-template-columns:40px 1.15fr .9fr 1fr"]{grid-template-columns:40px 1fr!important;row-gap:2px!important}
  [style*="grid-template-columns:40px 1.15fr .9fr 1fr"]>:nth-child(n+3){grid-column:2}
  /* section rhythm: desktop paddings of 88-120px read as dead space on a phone */
  [data-screen-label][style*="padding:112px 0"],[data-screen-label][style*="padding:120px 0"],[data-screen-label][style*="padding:96px 0"],[data-screen-label][style*="padding:88px 0"]{padding-top:64px!important}
  [data-screen-label][style*="padding:112px 0;"],[data-screen-label][style*="padding:120px 0;"],[data-screen-label][style*="padding:96px 0;"],[data-screen-label][style*="padding:88px 0;"],[data-screen-label][style$="padding:112px 0"],[data-screen-label][style$="padding:120px 0"],[data-screen-label][style$="padding:96px 0"],[data-screen-label][style$="padding:88px 0"]{padding-bottom:64px!important}
  [data-screen-label][style*="padding:88px 0 104px"],[data-screen-label][style*="padding:96px 0 120px"],[data-screen-label][style*="padding:88px 0 96px"]{padding-bottom:72px!important}
  /* service areas: the region panel sits below the map instead of covering it */
  div:has(>iframe[src="/service-areas/map"]){height:auto!important;display:flex;flex-direction:column}
  iframe[src="/service-areas/map"]{position:relative!important;height:340px!important;flex:none}
  iframe[src="/service-areas/map"]+div{position:static!important;width:auto!important;box-shadow:none!important;border-radius:0!important}
  /* services explorer: the side-by-side table stays a table; panel paddings tighten */
  [style*="grid-template-columns:1.2fr 1fr 1fr 1fr"]{grid-template-columns:1.2fr 1fr 1fr 1fr!important;font-size:11.5px!important}
  [style*="grid-template-columns:1.2fr 1fr 1fr 1fr"]>div{padding:8px 7px!important}
  [style*="padding:28px 32px 8px"],[style*="padding:24px 32px 6px"],[style*="padding:24px 32px 32px"]{padding-left:18px!important;padding-right:18px!important}
  [style*="left:32px;right:32px;bottom:24px"]{left:18px!important;right:18px!important}
}
@media (max-width:979px){
  [style*="width:880px;margin:0 auto;position:relative;height:480px"]{width:100%!important;height:auto!important;aspect-ratio:880/480}
  input[type=range][style*="width:880px"]{width:100%!important}
}
@media (max-width:640px){
  :root{--container-pad:20px;--text-h1:36px;--text-h2:30px;--text-h3:22px;--text-h4:19px;--section-pad:64px}
  footer [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [data-screen-label="Top Bar"]>div{font-size:12px!important;padding-left:14px!important;padding-right:14px!important}
  [data-screen-label="Nav"]>div{height:64px!important;gap:12px!important}
  [data-screen-label="Nav"]>div>a:first-child{font-size:17px!important;gap:8px!important}
  [data-screen-label="Nav"]>div>a:first-child img{width:32px!important;height:32px!important}
  [data-screen-label="Hero"]>div[style*="z-index:1"]{padding-top:56px!important;padding-bottom:56px!important}
  [data-screen-label="Hero"] .eyebrow{font-size:11px!important;letter-spacing:.12em!important;white-space:nowrap} /* one line on phones (John, 2026-09-08) */
  [data-sty="ansWrapStyle"] p{padding:0 4px 24px 0!important}
  [data-action="faqToggle"]{gap:14px!important;padding:20px 2px!important}
  [data-action="faqToggle"] h3{font-size:17px!important}
  [data-action="faqToggle"]>span:nth-child(2){display:none!important}
  [data-screen-label="Final CTA"] [style*="padding:82px 26px 24px"]{padding:74px 16px 18px!important}
  [style*="right:-22px"]{right:6px!important}
  /* large buttons and button pairs: full width, one per line */
  .ds-btn-lg{padding:14px 22px!important;font-size:16px!important}
  div[style*="display:flex"]:has(>.ds-btn+.ds-btn),div[style*="display:flex"]:has(>.ds-btn+a[style*="height:54px"]){flex-direction:column;align-items:stretch}
  div[style*="display:flex"]:has(>.ds-btn+.ds-btn)>.ds-btn,div[style*="display:flex"]:has(>.ds-btn+a[style*="height:54px"])>a{width:100%;text-align:center}
}/* project gallery lightbox on tablets and phones: photo over the details, the whole sheet scrolls, arrows sit on the photo */
@media (max-width:900px){
  #galLightbox>div{padding:76px 14px 24px!important;align-items:flex-start!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #galLightbox [data-gal-bg]{height:42vh!important}
  #galLightbox [data-gal="prev"],#galLightbox [data-gal="next"]{top:calc(76px + 21vh)!important;width:44px!important;height:44px!important;background:rgba(10,26,43,.55)!important;z-index:2}
  #galLightbox [data-gal="prev"]{left:20px!important}
  #galLightbox [data-gal="next"]{right:20px!important}
  #galLightbox>div>button[data-gal="close"]{top:16px!important;right:14px!important;z-index:3}
}

/* ---- client brand layer (tools/brand/lcp.js) ---- */
:root{
  --brand-water:#1A56B0;--aqua-400:#54CCF0;--lcp-accent:#6E3C14;
  --text-heading:#0A1A2B;--text-body:#384759;--text-muted:#5A697B;
  --surface-tint:#FFF9F0;--grad-surface:linear-gradient(180deg,#FFF9F0 0%,#FFFFFF 100%);
  --border-default:#E2EAF2;--border-strong:#C8D5E3;
  --radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;
  --shadow-sm:0 1px 2px rgba(10,26,43,.06),0 1px 3px rgba(10,26,43,.08);
  --shadow-md:0 4px 12px rgba(10,26,43,.10),0 1px 3px rgba(10,26,43,.06);
  --shadow-lg:0 12px 32px rgba(10,26,43,.14),0 2px 6px rgba(10,26,43,.06);
  --shadow-focus:0 0 0 3px rgba(84,204,240,.5);
}
/* accent text flips to Pool Water inside dark sections (they all carry one of these inline backgrounds) */
[style*="background:#0A1A2B"],[style*="background:var(--surface-dark)"],[style*="background:var(--grad-hero)"],[data-screen-label="Hero"]{--lcp-accent:#54CCF0}
/* the top bar's guarantee link sat in the primary blue, which is too dark on Ink */
[data-screen-label="Top Bar"] [style*="--brand-water"]{color:#54CCF0!important}
/* dial: buttons solid + subtle shadow */
.ds-btn-cta,.ds-btn-primary{box-shadow:0 2px 6px rgba(10,26,43,.16)}
/* dial: headings sentence case bold */
h1,h2,h3,h4{text-transform:none!important;letter-spacing:-.005em}
/* photos carry the vibe: lighter shade on the service tiles, a soft shadow behind hero text instead of a heavy wash */
.svc-shade{background:rgba(10,26,43,.10)!important}
[data-screen-label="Hero"] h1,[data-screen-label="Hero"] p{text-shadow:0 2px 16px rgba(10,26,43,.55)}
[data-screen-label="Nav"] img[src*="lcp-logo"]{width:48px!important;height:48px!important}
/* the roundel is a circle; the template mark was a square glyph */
img[src*="lcp-logo"]{border-radius:50%}
/* ---- the Coconut Crew mascots ---- */
.lcp-mascots{display:block;width:min(300px,62vw);height:auto;margin:28px 0 0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));pointer-events:none;user-select:none}
.form-thanks .lcp-mascots{width:170px;margin:0 auto 6px;filter:none}
@media (max-width:900px){.lcp-mascots{width:220px;margin:22px auto 0}}
/* ---- floaters: one character bobbing in a ripple of pool water ---- */
[data-screen-label="Investment Ranges"],[data-screen-label="Pricing"],[data-screen-label="The Team"],[data-screen-label="Contact"]{position:relative}
.lcp-float{position:absolute;z-index:2;width:168px;pointer-events:none;user-select:none;padding-bottom:17px}
.lcp-float--girl{width:200px}
.lcp-float svg{position:absolute;left:-9%;bottom:0;width:118%;height:34px;display:block;overflow:visible}
.lcp-float-in{position:relative;display:block;overflow:hidden;padding-top:10px}
.lcp-float-in img{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:lcp-bob 4.6s ease-in-out infinite}
.lcp-float .lcp-rip-front{z-index:1}
.lcp-float .lcp-rip{transform-origin:50% 50%;animation:lcp-rip 4.6s ease-in-out infinite}
@keyframes lcp-bob{0%,100%{transform:translateY(2px) rotate(-1.6deg)}50%{transform:translateY(11px) rotate(1.6deg)}}
@keyframes lcp-rip{0%,100%{transform:scaleX(.97)}50%{transform:scaleX(1.04)}}
@media (prefers-reduced-motion:reduce){.lcp-float-in img,.lcp-float .lcp-rip{animation:none}}
/* the boy drifting back and forth along the top edge of the homepage form card, as if the card were the pool wall.
   The seal stays in its corner (z-index 2 in the template), so he slips behind it at the end of each lap. */
.lcp-swim{position:absolute;left:22px;right:22px;bottom:100%;height:0;pointer-events:none;user-select:none;z-index:1}
.lcp-swim-lane{position:absolute;left:0;bottom:0;overflow:hidden;padding-top:16px;width:var(--lcp-swim-w,224px);animation:lcp-lap 26s ease-in-out infinite alternate}
.lcp-swim-lane img{display:block;width:100%;height:auto;margin-bottom:-6%;transform-origin:50% 60%;animation:lcp-drift 4.6s ease-in-out infinite} /* the negative margin sinks his back under the waterline */
@keyframes lcp-drift{0%,100%{transform:translateY(1px) rotate(-1.4deg)}50%{transform:translateY(6px) rotate(1.4deg)}}
.lcp-swim svg{position:absolute;left:0;bottom:-4px;width:100%;height:16px;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
@keyframes lcp-lap{from{left:0}to{left:calc(100% - var(--lcp-swim-w,224px))}} /* left, not transform: a full-width lane pushed sideways made the page scroll sideways */
@media (prefers-reduced-motion:reduce){.lcp-swim-lane{animation:none;left:12%}.lcp-swim-lane img{animation:none}}
/* once the card stacks under the text column, he needs headroom of his own so he never covers the buttons above */
@media (max-width:900px){[data-screen-label="Lead Form"]{margin-top:var(--lcp-swim-room,104px)}.lcp-swim{--lcp-swim-w:164px}}
@media (max-width:1099px){.lcp-float{display:none}}
@media (max-width:1279px){.lcp-float--wide{display:none}}
/* ---- hero opening: the plan, the 3D design, then the pool itself.
   Built to the exact recipe on gandcoutdoorkitchens.com, read off their live page 2026-09-21,
   and extended from their two stages to our three. Their numbers, unchanged:
     wipe      clip-path inset(0 100% 0 0) -> inset(0), 2.4s cubic-bezier(.65,0,.35,1)
     reveal    opacity 0->1, blur(14px) saturate(.6) -> none, scale(1.04) -> 1,
               1.4s cubic-bezier(.22,1,.36,1)
     fade out  1.2s ease-in, holding full until 60% of it
     grid      48px cyan rule at 25 percent, mix-blend screen
     dwell     0.8s of stillness between one stage landing and the next starting
   Nothing drifts. The only travel is the 4 percent settle inside each reveal, which is why the
   reference never looks choppy. Their scan line ships broken: 3px wide, animating translateX
   -100% to 100%, so it travels 6px and ends off the left edge. Ours rides the wipe the whole
   way across, which is plainly what it was drawn to do. */
.lcp-hero-seq{position:absolute;inset:0;overflow:hidden}
.lcp-hero-img{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}

/* stage 1, the plan: draws itself on left to right, holds, then hands off */
.lcp-hero-plan{position:absolute;inset:0;
  animation:lcp-hero-wipe 2.4s cubic-bezier(.65,0,.35,1) forwards,
    lcp-hero-out 1.2s ease-in 3.2s forwards}
.lcp-hero-plan .lcp-hero-img{background-image:url(/assets/lcp-hero-stage-1-blueprint.webp);
  background-position:center 45%}
.lcp-hero-grid{position:absolute;inset:0;opacity:.25;mix-blend-mode:screen;pointer-events:none;
  background-image:linear-gradient(rgba(71,213,235,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,213,235,.25) 1px,transparent 1px);
  background-size:48px 48px,48px 48px}

/* the drawing edge: a lit rule travelling with the wipe */
.lcp-hero-scan{position:absolute;top:0;left:-2px;width:3px;height:100%;pointer-events:none;
  background:linear-gradient(transparent,rgba(110,229,247,.9),transparent);
  box-shadow:0 0 32px 8px rgba(61,220,245,.65);
  animation:lcp-hero-scan 2.4s cubic-bezier(.65,0,.35,1) forwards}

/* stage 2, the 3D design: resolves out of a blur, holds, then hands off */
.lcp-hero-render{background-image:url(/assets/lcp-hero-stage-2-render.webp);background-position:center 50%;
  animation:lcp-hero-reveal 1.4s cubic-bezier(.22,1,.36,1) 3.2s both,
    lcp-hero-out 1.2s ease-in 5.4s forwards}

/* stage 3, the finished pool */
.lcp-hero-final{background-image:url(/assets/lcp-hero-stage-3-final.webp);background-position:center 58%;
  animation:lcp-hero-reveal 1.4s cubic-bezier(.22,1,.36,1) 5.4s both}

@keyframes lcp-hero-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes lcp-hero-scan{from{opacity:0;transform:translateX(0)}
  10%{opacity:.9}90%{opacity:.9}
  to{opacity:0;transform:translateX(100vw)}}
@keyframes lcp-hero-reveal{from{opacity:0;filter:blur(14px) saturate(.6);transform:scale(1.04)}
  to{opacity:1;filter:none;transform:scale(1)}}
@keyframes lcp-hero-out{0%,60%{opacity:1}to{opacity:0}}

/* anyone who asked for less motion gets the finished pool straight away */
@media (prefers-reduced-motion:reduce){
  .lcp-hero-plan,.lcp-hero-render{animation:none;opacity:0}
  .lcp-hero-scan{display:none}
  .lcp-hero-final{animation:none;opacity:1;filter:none;transform:none}
}

/* the template's own container reveal only ever shipped on the homepage, and fading a whole band
   under a text reveal double-animates it. The copy reveal below supersedes it site-wide. */
[data-rv].rv-init{opacity:1!important;transform:none!important;transition:none!important}

/* ---- copy reveal on scroll (client ask 2026-09-21), site-wide.
   Three treatments by role so the page is not one repeated entrance: headings rise line by line
   out from behind their own mask, body copy fades up a short distance a beat later, and supporting
   rows fade with a capped stagger. Everything is visible by default; the runtime adds .cr only to
   what it is about to reveal, so a failed script cannot hide the page. */
.cr{transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)}
.cr--body{opacity:0;transform:translateY(14px)}
.cr--support{opacity:0;transform:translateY(10px);transition-duration:.44s}
.cr--head:not(.cr--lines){opacity:0;transform:translateY(18px)}
.cr-in{opacity:1!important;transform:none!important}

/* headings: one mask per line, the line rides up from under it */
.cr--lines{opacity:1;transform:none}
.cr-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cr-line-i{display:block;transform:translateY(105%);transition:transform .78s cubic-bezier(.16,1,.3,1)}
.cr-in .cr-line-i{transform:none}

/* reduced motion: keep the fade so the reveal still reads, drop every bit of travel */
@media (prefers-reduced-motion:reduce){
  .cr{transition-duration:.25s!important}
  .cr--body,.cr--support,.cr--head{transform:none!important}
  .cr-line{overflow:visible}
  .cr-line-i{transform:none!important;transition:none!important}
}

/* ---- hero copy entrance. Above the fold, so it runs on load, not on scroll. The words arrive
   first and the plan / design / finished pool resolve behind them; all of it is finished by ~1.6s,
   well before the design stage lands at 4.2s, so the two sequences never fight. */
.cr-hero > *{opacity:0;transform:translateY(16px)}
.cr-hero-in > *{animation:cr-cue .62s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.25s + var(--cue) * .22s)}
.cr-hero-in > h1{animation:none;opacity:1;transform:none}
.cr-hero-h .cr-line-i{transform:translateY(105%);animation:cr-line .8s cubic-bezier(.16,1,.3,1) both;transition:none}
@keyframes cr-cue{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cr-line{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .cr-hero-in > *{animation:cr-cue .3s ease both;animation-delay:calc(var(--cue) * .06s)}
  @keyframes cr-cue{from{opacity:0}to{opacity:1;transform:none}}
  .cr-hero-h .cr-line-i{animation:none;transform:none}
}