/* ============================================================================
   Resources — the editorial layer.
   ----------------------------------------------------------------------------
   Six pages hang off /resources: technical documents, shipping, FAQs, how we
   started, the blog index and the gallery. They share one visual language,
   built on the tokens already in site.css and type.css rather than a second
   palette — the point of the redesign was to stop the site reading as several
   sites stitched together, so nothing here invents a colour or a type step.

   Motion rules this file follows, throughout:
     · enter/exit           ease-out          cubic-bezier(.33,1,.68,1)
     · on-screen movement   ease-in-out       cubic-bezier(.65,0,.35,1)
     · duration             160-280ms; nothing in the UI exceeds 300ms
     · animated properties  transform and opacity only
     · hover                gated behind (hover:hover) and (pointer:fine)
     · reduced motion       every transition and animation collapses to none
   The one deliberate exception is the hero sequence, which is scroll-linked:
   its "duration" is the reader's scroll, so an easing curve does not apply.
   ========================================================================== */

/* The palette, stated once.
   ---------------------------------------------------------------------------
   These pages do not load site.css — nothing does except the visualizer — so
   site.css's :root never reaches them and the fallbacks in var(--x) were
   silently acting as the palette. That left two copies to keep in step, and
   they had already drifted: site.css says --navy:#16283e, while the header
   above every one of these pages and all sixteen guide pages actually render
   #163A5D. The body background was off by a shade too, which showed as a seam
   where the header met the page.

   So the values below are the ones the rest of the site really paints, and
   they are declared rather than defaulted. */
:root{
  --navy:#163A5D; --navy-2:#0E2740; --navy-3:#2C4D74;
  --ink:#20242B; --ink-2:#4A535E; --ink-3:#6A7280; --ink-4:#9AA1AC;
  --cream:#FAF8F5; --paper:#FFFFFF; --sand:#EFEAE1;
  --rule:#E5E0D8; --rule-2:#EDE8E0;
  --cargo:#C4581A; --cargo-2:#A34712; --cargo-light:#FBEEE4;
  --gulf:#1A6B4A; --gulf-light:#E4F2EC;
  --shadow-md:0 6px 24px rgba(22,40,62,.12);

  --rs-ease-out:cubic-bezier(.33,1,.68,1);
  --rs-ease-both:cubic-bezier(.65,0,.35,1);
  --rs-fast:160ms;
  --rs-base:240ms;
  --rs-slow:280ms;
  --rs-pad:clamp(56px,7vw,104px);
  --rs-gut:clamp(20px,4vw,40px);
}

.rs-wrap{max-width:1180px;margin:0 auto;padding:0 var(--rs-gut)}
/* The handful of images that sit bare in the flow rather than inside a
   clipped component box. */
.rs-figure{border-radius:12px}
.rs-narrow{max-width:780px;margin:0 auto;padding:0 var(--rs-gut)}
.rs-sec{padding:var(--rs-pad) 0}
.rs-sec + .rs-sec{border-top:1px solid var(--rule-2)}
.rs-lede{font-size:19px;line-height:1.7;color:var(--ink-2);max-width:62ch}
.rs-eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cargo);margin:0 0 14px;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Full-bleed image, copy sitting on a gradient scrim rather than a flat
   overlay — a flat tint at the opacity needed for AA contrast at the bottom
   washes out the top of the photograph. */
.rs-hero{position:relative;isolation:isolate;background:var(--navy);overflow:hidden}
.rs-hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;
}
.rs-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(12,22,36,.86) 0%,rgba(12,22,36,.66) 42%,rgba(12,22,36,.22) 100%);
}
.rs-hero-in{
  position:relative;max-width:1180px;margin:0 auto;
  padding:clamp(84px,13vw,168px) var(--rs-gut) clamp(60px,9vw,116px);
  color:#fff;
}
.rs-hero h1{color:#fff;font-size:var(--t-display));line-height:1.05;margin:0 0 20px;max-width:16ch}
.rs-hero p{color:rgba(255,255,255,.9);font-size:19px;line-height:1.65;max-width:52ch;margin:0}
.rs-hero .rs-eyebrow{color:rgba(255,255,255,.72)}
.rs-crumb{font-size:14px;color:rgba(255,255,255,.72);margin:0 0 22px}
.rs-crumb a{color:rgba(255,255,255,.9);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.rs-crumb a:hover{color:#fff;border-bottom-color:#fff}

/* ── Buttons ───────────────────────────────────────────────────────────────
   scale(.97) on :active is the whole reason a button feels connected to the
   finger. 44px minimum height is the tap target, not a style choice. */
.rs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:13px 26px;border-radius:999px;border:1px solid transparent;
  font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background var(--rs-base) var(--rs-ease-out),
             color var(--rs-base) var(--rs-ease-out),
             border-color var(--rs-base) var(--rs-ease-out),
             transform var(--rs-fast) var(--rs-ease-out);
}
.rs-btn-primary{background:var(--cargo);color:#fff}
.rs-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.rs-btn-navy{background:var(--navy);color:#fff}
.rs-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .rs-btn-primary:hover{background:var(--cargo-2);color:#fff}
  .rs-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
  .rs-btn-navy:hover{background:var(--navy-2);color:#fff}
}
.rs-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── Hub cards ─────────────────────────────────────────────────────────────
   The lift is on the card; the zoom is on the image inside its own clipped
   box, so the hover never re-lays-out the grid and never flickers between
   parent and child hover states. */
.rs-cards{
  display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  list-style:none;margin:0;padding:0;
}
.rs-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;
  transition:transform var(--rs-base) var(--rs-ease-out),
             box-shadow var(--rs-base) var(--rs-ease-out),
             border-color var(--rs-base) var(--rs-ease-out);
}
.rs-card-shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.rs-card-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--rs-slow) var(--rs-ease-out);
}
.rs-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.rs-card h3{font-size:23px;margin:0}
.rs-card h3 a{color:var(--navy);text-decoration:none}
/* The whole card is the hit area; the heading link stretches to fill it so
   there is one target and one focus ring rather than several. */
.rs-card h3 a::after{content:"";position:absolute;inset:0}
.rs-card p{margin:0;font-size:16px;line-height:1.62;color:var(--ink-2)}
.rs-card-more{
  margin-top:auto;padding-top:14px;font-size:15px;font-weight:600;
  color:var(--cargo);display:inline-flex;align-items:center;gap:7px;
}
.rs-card-more svg{transition:transform var(--rs-base) var(--rs-ease-out)}
.rs-card:focus-within{border-color:var(--navy)}
@media (hover:hover) and (pointer:fine){
  .rs-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md));border-color:var(--rule)}
  .rs-card:hover .rs-card-shot img{transform:scale(1.045)}
  .rs-card:hover .rs-card-more svg{transform:translateX(3px)}
}

/* ── Application slider ────────────────────────────────────────────────────
   One panel per audience. Panels are stacked in the grid and cross-faded, so
   the container height is the tallest panel and nothing jumps on switch. The
   inactive panels are inert: visibility:hidden keeps them out of the tab
   order without the display:none that would kill the transition. */
.rs-app{background:var(--cream)}
/* Hidden until the script that gives them behaviour is running. The flag goes
   on the slider root, which is an ancestor of both the tabs and the stack — a
   sibling combinator cannot work here because the stack follows the tabs, and
   :has() alone would leave older engines with a collapsed stack and no tab
   bar to open it with. */
.rs-app-tabs{display:none}
[data-app-slider][data-js] .rs-app-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;margin:0 0 30px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rs-app-tabs::-webkit-scrollbar{display:none}
.rs-app-tab{
  flex:0 0 auto;min-height:44px;padding:11px 20px;border-radius:999px;
  border:1px solid var(--rule);background:var(--paper);
  color:var(--ink-2);font-size:15.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;
  transition:background var(--rs-base) var(--rs-ease-out),
             color var(--rs-base) var(--rs-ease-out),
             border-color var(--rs-base) var(--rs-ease-out),
             transform var(--rs-fast) var(--rs-ease-out);
}
.rs-app-tab:active{transform:scale(.97)}
.rs-app-tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){
  .rs-app-tab:hover:not([aria-selected="true"]){border-color:var(--navy-3);color:var(--navy)}
}
/* Without JS every panel is ordinary stacked content: five audiences, one
   after another, all readable. The collapse into a single cross-faded stack
   only happens once resources.js has marked the container [data-js] — i.e.
   once something exists that can switch between them. Hiding four fifths of a
   section behind a script that might not load is not a fallback. */
.rs-app-stack{display:block}
.rs-app-panel{
  display:grid;gap:clamp(22px,3.4vw,48px);align-items:center;
  grid-template-columns:1.05fr .95fr;
  margin:0 0 clamp(34px,5vw,64px);
}
[data-app-slider][data-js] .rs-app-stack{display:grid}
[data-app-slider][data-js] .rs-app-panel{
  grid-area:1/1;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--rs-base) var(--rs-ease-out),
             transform var(--rs-base) var(--rs-ease-out),
             visibility 0s linear var(--rs-base);
}
[data-app-slider][data-js] .rs-app-panel[data-active]{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.rs-app-shot{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.rs-app-shot img{width:100%;height:100%;object-fit:cover;display:block}
.rs-app-copy h3{font-size:clamp(26px,2.6vw,34px);margin:0 0 12px;color:var(--navy)}
.rs-app-copy p{margin:0 0 18px;font-size:17px;line-height:1.68;color:var(--ink-2)}
.rs-app-picks{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.rs-app-picks li{display:flex;gap:11px;align-items:baseline;font-size:16px;color:var(--ink-2)}
.rs-app-picks b{color:var(--navy);font-weight:600}
.rs-app-picks .rs-spec{font-size:14.5px;color:var(--ink-3)}
@media (max-width:820px){
  .rs-app-panel{grid-template-columns:1fr}
  .rs-app-shot{order:-1}
}

/* ── Accordion ─────────────────────────────────────────────────────────────
   <details>/<summary>. The panel animates on grid-template-rows, which is the
   only way to transition to an unknown content height without measuring it in
   JS. Chrome/Safari/Firefox all interpolate 0fr→1fr now. */
.rs-acc{border-top:1px solid var(--rule)}
.rs-acc details{border-bottom:1px solid var(--rule)}
.rs-acc summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  min-height:44px;padding:22px 4px;cursor:pointer;list-style:none;
  font-family:var(--serif);
  font-size:20px;line-height:1.35;color:var(--navy);
  transition:color var(--rs-fast) var(--rs-ease-out);
}
.rs-acc summary::-webkit-details-marker{display:none}
/* The technical page wraps each summary's text in an <h3> so the eleven
   collections are reachable by heading navigation. It must not reintroduce
   h3's block box or its own type step — the <summary> already sets both. */
.rs-acc-h{font:inherit;margin:0;display:inline}
.rs-acc summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){
  .rs-acc summary:hover{color:var(--cargo)}
}
.rs-acc-ico{
  flex:0 0 auto;width:22px;height:22px;margin-top:3px;position:relative;
  transition:transform var(--rs-base) var(--rs-ease-both);
}
.rs-acc-ico::before,.rs-acc-ico::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
}
.rs-acc-ico::before{width:13px;height:1.8px;transform:translate(-50%,-50%)}
.rs-acc-ico::after{
  width:1.8px;height:13px;transform:translate(-50%,-50%);
  transition:transform var(--rs-base) var(--rs-ease-both),opacity var(--rs-fast) var(--rs-ease-out);
}
.rs-acc details[open] .rs-acc-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.rs-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--rs-base) var(--rs-ease-both)}
.rs-acc details[open] .rs-acc-panel{grid-template-rows:1fr}
/* resources.js holds [open] through the closing transition and marks the
   element [data-closing]; these two rules are what it animates back to. */
.rs-acc details[data-closing] .rs-acc-panel{grid-template-rows:0fr}
.rs-acc details[data-closing] .rs-acc-ico::after{transform:translate(-50%,-50%);opacity:1}
.rs-acc-panel > div{overflow:hidden}
.rs-acc-panel p,.rs-acc-panel ul,.rs-acc-panel ol{
  margin:0 0 14px;font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:70ch;
}
.rs-acc-panel > div > :last-child{margin-bottom:24px}

/* ── Spec tables ───────────────────────────────────────────────────────────
   Wide tables scroll inside their own box rather than making the page scroll
   sideways on a phone. */
.rs-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 24px}
.rs-table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
.rs-table th,.rs-table td{
  text-align:left;padding:11px 16px 11px 0;border-bottom:1px solid var(--rule-2);
  vertical-align:top;
}
.rs-table th{
  font-family:var(--sans);font-weight:600;
  color:var(--navy);white-space:nowrap;
}
.rs-table td{color:var(--ink-2)}
.rs-table tbody tr:last-child th,.rs-table tbody tr:last-child td{border-bottom:0}
.rs-table .rs-num{font-variant-numeric:tabular-nums}

/* ── Numbered steps ────────────────────────────────────────────────────────*/
.rs-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:26px}
.rs-step{position:relative;padding-left:60px;counter-increment:s}
.rs-step::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;
  font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
}
.rs-step h3{font-size:21px;margin:0 0 7px;color:var(--navy)}
.rs-step p{margin:0;font-size:16.5px;line-height:1.68;color:var(--ink-2);max-width:64ch}
@media (min-width:760px){
  .rs-steps-3{grid-template-columns:repeat(3,1fr);gap:34px}
  .rs-steps-3 .rs-step{padding-left:0;padding-top:54px}
  .rs-steps-3 .rs-step::before{top:0}
}

/* ── Callout ───────────────────────────────────────────────────────────────*/
.rs-note{
  background:var(--cargo-light);border-left:3px solid var(--cargo);
  padding:20px 24px;border-radius:0 10px 10px 0;margin:0 0 24px;
}
.rs-note p{margin:0;font-size:16.5px;line-height:1.68;color:var(--ink)}
.rs-note p + p{margin-top:11px}
.rs-note b{color:var(--cargo-2)}
.rs-note-green{background:var(--gulf-light);border-left-color:var(--gulf)}
.rs-note-green b{color:var(--gulf)}

/* ── Timeline (how we started) ─────────────────────────────────────────────*/
.rs-time{list-style:none;margin:0;padding:0;position:relative}
.rs-time::before{
  content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:var(--rule);
}
.rs-time li{position:relative;padding:0 0 34px 40px}
.rs-time li:last-child{padding-bottom:0}
.rs-time li::before{
  content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:2px solid var(--cargo);
}
.rs-time time{
  display:block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cargo);margin-bottom:6px;
}
.rs-time h3{font-size:21px;margin:0 0 7px;color:var(--navy)}
.rs-time p{margin:0;font-size:16.5px;line-height:1.68;color:var(--ink-2);max-width:60ch}

/* ── Gallery ───────────────────────────────────────────────────────────────
   Columns rather than grid: the photos are a mix of 4:5, 3:4 and phone
   portrait, and a masonry column keeps their real proportions instead of
   cropping every one to a common box. */
.rs-gal{columns:3;column-gap:clamp(14px,1.8vw,22px)}
@media (max-width:900px){.rs-gal{columns:2}}
@media (max-width:520px){.rs-gal{columns:1}}
.rs-gal figure{
  /* Safari's multicol only honours the -webkit- form; without it a portrait
     figure fragments across columns and the absolutely-positioned caption
     anchors to one fragment, detaching the tag from its image. */
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 clamp(14px,1.8vw,22px);position:relative;
  border-radius:12px;overflow:hidden;background:var(--sand);
}
.rs-gal img{
  width:100%;height:auto;display:block;
  transition:transform var(--rs-slow) var(--rs-ease-out);
}
/* The descriptive half of the caption reveals on hover. The provenance tag
   does NOT — see .rs-gal-tag below. */
.rs-gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;
  font-size:14px;line-height:1.45;color:#fff;
  background:linear-gradient(to top,rgba(12,22,36,.82),rgba(12,22,36,0));
}
.rs-gal-desc{
  display:block;opacity:0;transform:translateY(6px);
  transition:opacity var(--rs-base) var(--rs-ease-out),transform var(--rs-base) var(--rs-ease-out);
}
@media (hover:hover) and (pointer:fine){
  .rs-gal figure:hover img{transform:scale(1.04)}
  .rs-gal figure:hover .rs-gal-desc{opacity:1;transform:none}
}
/* Touch has no hover, so the description is simply always legible there. */
@media (hover:none),(pointer:coarse){
  .rs-gal-desc{opacity:1;transform:none}
}

/* Whether a picture is a photograph of a real job or a rendering is the one
   thing on this page a buyer must not have to work for. It was previously
   inside the hover-revealed caption, which on a desktop mouse meant the label
   only existed under the cursor — the page claimed to disclose and did not.
   It is always visible, at every pointer type, and it never animates. */
.rs-gal-tag{
  display:inline-block;margin:0 0 4px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:rgba(12,22,36,.72);backdrop-filter:blur(3px);
}

/* The honesty band that sits above the rendered section. It is not decoration
   — a buyer needs to know which pictures are photographs of real jobs and
   which are visualisations, and the answer should be on the page, not in a
   disclaimer at the bottom. */
.rs-disclose{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--cream);border:1px solid var(--rule);
  border-radius:12px;padding:17px 20px;margin:0 0 32px;max-width:74ch;
}
.rs-disclose svg{flex:0 0 auto;margin-top:2px;color:var(--navy-3)}
.rs-disclose p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* ── Blog index ────────────────────────────────────────────────────────────*/
.rs-posts{display:grid;gap:clamp(18px,2.2vw,26px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));list-style:none;margin:0;padding:0}
.rs-post{
  position:relative;background:var(--paper);border:1px solid var(--rule);
  border-radius:14px;padding:24px 26px 26px;display:flex;flex-direction:column;gap:9px;
  transition:transform var(--rs-base) var(--rs-ease-out),
             box-shadow var(--rs-base) var(--rs-ease-out);
}
.rs-post-cat{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cargo);
}
.rs-post h3{font-size:21px;margin:0;line-height:1.3}
.rs-post h3 a{color:var(--navy);text-decoration:none}
.rs-post h3 a::after{content:"";position:absolute;inset:0}
.rs-post p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.rs-post:focus-within{border-color:var(--navy)}
@media (hover:hover) and (pointer:fine){
  .rs-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-md))}
}

/* ── Scroll-scrubbed sequence ──────────────────────────────────────────────
   The stand-in for a video. The section is several screens tall; the frame
   inside it is sticky, so scrolling the section scrubs through the stack of
   photographs the way a scrubbed video would — with no file to download, no
   codec to decode and no play button to ignore.

   Height is set in vh per frame by the markup's inline --rs-seq-len so the
   travel matches the number of frames rather than being a magic number here.
   Frame 1 is opaque in CSS, so with JS off the section is one still picture. */
.rs-seq{position:relative;background:var(--navy);height:var(--rs-seq-len)}
.rs-seq-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;
}
.rs-seq-frames{position:absolute;inset:0;z-index:-2}
.rs-seq-frames img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
}
/* No will-change here. Six images at 100vw x 100vh, permanently promoted to
   their own compositor layers, is tens of megabytes of GPU texture held for
   the whole life of the page — including while the sequence is several
   screens away. Opacity composites without the hint. */
.rs-seq-frames img:first-child{opacity:1}
.rs-seq-sticky::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,22,36,.88) 0%,rgba(12,22,36,.5) 42%,rgba(12,22,36,.16) 100%);
}
.rs-seq-copy{
  position:relative;width:100%;max-width:1180px;margin:0 auto;
  padding:0 var(--rs-gut) clamp(46px,7vh,84px);color:#fff;
}
.rs-seq-copy h2{color:#fff;margin:0 0 14px;max-width:17ch}
.rs-seq-cap{
  margin:0;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.9);
  max-width:46ch;min-height:2.9em;
}
/* Progress pips: which frame of the sequence the reader is on. */
.rs-seq-pips{display:flex;gap:7px;margin-top:26px}
.rs-seq-pip{
  width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.28);
  transition:background var(--rs-base) var(--rs-ease-out);
}
.rs-seq-pip[data-on]{background:#fff}
/* Short viewports: a 100vh sticky panel on a landscape phone leaves no room
   for the copy. Let it size to content instead of clipping the caption. */
@media (max-height:520px){
  .rs-seq-sticky{height:auto;min-height:440px}
}

@media (prefers-reduced-motion:reduce){
  /* `*` covers every class; the pseudo-elements have to be named because it
     does not match them. */
  *,.rs-acc-ico::after,.rs-gal-tag{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .rs-gal-desc{opacity:1;transform:none}
  .rs-app-panel{transition:none}
  /* No scrub, so the section has no reason to be four screens tall. */
  .rs-seq{height:auto}
  .rs-seq-sticky{position:relative;height:auto;min-height:74vh}
}

/* ── Print ─────────────────────────────────────────────────────────────────
   The FAQ page is 100% <details>, and the UA hides the content of a closed
   one — so printing it, or saving it as the PDF a contractor actually wants,
   produced thirty questions and zero answers. Force every panel open on
   paper, and drop the chrome that only makes sense on screen. */
@media print{
  .rs-acc details .rs-acc-panel{grid-template-rows:1fr!important}
  .rs-acc details .rs-acc-panel > div{overflow:visible!important}
  .rs-acc details:not([open]) > *:not(summary){display:block!important}
  .rs-acc-ico,.rs-seq-pips,.rs-app-tabs{display:none!important}
  /* A scrubbed sequence is one frame on paper. */
  .rs-seq{height:auto!important}
  .rs-seq-sticky{position:relative!important;height:auto!important;min-height:0!important}
  .rs-seq-frames{display:none!important}
  .rs-seq-copy{color:#000!important}
  .rs-seq-copy h2,.rs-seq-cap{color:#000!important}
  /* Every audience panel prints, not just the selected one. */
  [data-app-slider][data-js] .rs-app-stack{display:block!important}
  [data-app-slider][data-js] .rs-app-panel{
    grid-area:auto!important;opacity:1!important;visibility:visible!important;
    transform:none!important;margin:0 0 24px!important;
  }
  .rs-gal-desc{opacity:1!important;transform:none!important}
  .rs-hero{background:none!important}
  .rs-hero-img,.rs-hero::after{display:none!important}
  .rs-hero-in,.rs-hero h1,.rs-hero p,.rs-crumb{color:#000!important}
}