/* ==========================================================================
   Victoria Estate Liquidation & Downsizing - site styles
   Intro, on a first visit or a refresh: the house draws itself at night, its windows light up, and we fly in.
   Home hero: moving-out footage under a navy tint, everything centred.
   Below it, Estate Services: eight photo cards and a walkthrough tile.
   Then Commercial Services on navy: a paragraph, an edge-to-edge ticker of businesses, how to reach us.
   Then About Us: a big title, the story, and the logo branching out to three pillars.
   Then Contact on navy, which is also the free estimate: a big phone number, the email, and the footer.
   ========================================================================== */

:root {
  --navy: #012D44;
  --ink: #10293A;
  --muted: #46606E;
  --sage: #5FA091;
  --sage-deep: #3B7D6E;   /* sage that passes AA as text on white */
  --sage-light: #A9DCCD;  /* sage for text on dark */
  --mist-soft: #EDF3F2;
  --line: rgba(1, 45, 68, .09);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 84px;

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Nav ---------- */

.nav {
  --logo-ink: var(--navy);
  --logo-key: var(--sage);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px -22px rgba(1, 45, 68, .45);
  transition: background-color .4s, box-shadow .4s, border-color .4s;
}
/* Over the footage the nav goes clear and the logo turns white. */
.nav--over:not(.is-scrolled) {
  --logo-ink: #fff;
  --logo-key: #7CC2B1;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.brand { flex: none; display: block; border-radius: 6px; }
.brand:focus-visible { outline: 3px solid var(--sage); outline-offset: 6px; }
.brand svg { display: block; height: 58px; width: auto; overflow: visible; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav__links a:not(.btn) {
  position: relative;
  display: block;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color .25s;
}
.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn):focus-visible { color: var(--sage-deep); outline: none; }
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn):focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-left: 4px; }
/* the nav button is the phone number, so its handset rings on hover like the big one in Contact */
.nav__cta .btn:hover svg { transform: none; animation: ct-ring .9s var(--ease); }

@media (min-width: 961px) {
  .nav--over:not(.is-scrolled) .nav__links a:not(.btn) { color: #fff; }
  .nav--over:not(.is-scrolled) .nav__links a:not(.btn):hover,
  .nav--over:not(.is-scrolled) .nav__links a:not(.btn):focus-visible { color: #BFE6DA; }
}

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border: 0; border-radius: 12px;
  background: var(--mist-soft);
  color: var(--navy);
  cursor: pointer;
}
.nav--over:not(.is-scrolled) .nav__toggle { background: rgba(255, 255, 255, .14); color: #fff; }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .2s;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Logo ---------- */

.logo .lg-ink { fill: var(--logo-ink); transition: fill .4s; }
.logo .lg-ink-s { stroke: var(--logo-ink); transition: stroke .4s; }
.logo .lg-key { fill: var(--logo-key); transition: fill .4s; }
.logo .lg-key-s { fill: none; stroke: var(--logo-key); transition: stroke .4s; }

/* The mark builds itself: roof draws, chimney rises, panes pop, key slides in and turns. */
.mk-chim, .mk-pane, .mk-key, .mk-turn, .mk-word { transform-box: fill-box; }
.mk-roof { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.mk-chim { transform-origin: 50% 100%; }
.mk-pane, .mk-turn { transform-origin: 50% 50%; }

.js .mk-roof { stroke-dashoffset: 1; }
.js .mk-chim { transform: scaleY(0); }
.js .mk-pane { transform: scale(0); }
.js .mk-key { opacity: 0; transform: translateX(-120px); }
.js .mk-word { opacity: 0; transform: translateY(14px); }

.is-ready .mk-roof { animation: mk-draw 1.1s var(--ease) .15s both; }
.is-ready .mk-chim { animation: mk-rise .55s var(--spring) .95s both; }
.is-ready .mk-pane { animation: mk-pop .5s var(--spring) both; }
.is-ready .mk-pane:nth-child(1) { animation-delay: 1.05s; }
.is-ready .mk-pane:nth-child(2) { animation-delay: 1.13s; }
.is-ready .mk-pane:nth-child(3) { animation-delay: 1.21s; }
.is-ready .mk-pane:nth-child(4) { animation-delay: 1.29s; }
.is-ready .mk-key { animation: mk-key-in .9s var(--ease) 1.15s both; }
.is-ready .mk-turn { animation: mk-turn 9s ease-in-out 2.4s infinite; }
.is-ready .mk-word { animation: rise-in .9s var(--ease) both; }
.is-ready .mk-word:nth-of-type(1) { animation-delay: .45s; }
.is-ready .mk-word:nth-of-type(2) { animation-delay: .6s; }
.is-ready .mk-word:nth-of-type(3) { animation-delay: .7s; }

@keyframes mk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mk-rise { from { transform: scaleY(0); } to { transform: none; } }
@keyframes mk-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes mk-key-in { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
/* A full turn of the key about its shaft, then a long rest. */
@keyframes mk-turn {
  0%, 15%, 100% { transform: none; }
  3.75% { transform: scaleY(0); }
  7.5% { transform: scaleY(-1); }
  11.25% { transform: scaleY(0); }
}

/* ---------- Buttons ---------- */

.btn {
  --b: var(--navy);
  --f: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 26px;
  border: 0;
  border-radius: 8px;
  background: var(--b);
  color: var(--f);
  font: 700 15px/1 var(--f-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(1, 45, 68, .14), 0 10px 22px -8px rgba(1, 45, 68, .45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(1, 45, 68, .14), 0 18px 34px -12px rgba(1, 45, 68, .5); }
.btn:hover::before { transform: translateX(110%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { padding: 14px 18px; font-size: 13.5px; }
.btn--sage { --b: var(--sage); --f: var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 10px 24px -10px rgba(0, 0, 0, .5); }
.btn--glass {
  --b: rgba(255, 255, 255, .08);
  --f: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.btn--glass:hover { box-shadow: inset 0 0 0 2px #fff, 0 16px 32px -14px rgba(0, 0, 0, .5); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 32px) 24px 140px;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.hero__center { position: relative; z-index: 3; max-width: 940px; }
.hero h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(44px, 6.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -.016em;
  font-variation-settings: "opsz" 84;
}
.hero h1 em { font-style: italic; font-weight: 500; color: var(--sage-light); }
.hero h1 .ln { display: block; overflow: hidden; padding: 0 .1em .12em; margin-bottom: -.12em; }
.hero h1 .ln > span { display: inline-block; }
.hero__lede {
  max-width: 680px;
  margin: 26px auto 0;
  font-size: 20.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .9);
  text-wrap: pretty;
}
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }

/* footage */
.media { position: absolute; inset: -24px; z-index: 0; }
.scene { position: absolute; inset: 0; margin: 0; opacity: 0; overflow: hidden; transition: opacity 1.4s ease; }
.scene.is-on { opacity: 1; z-index: 2; }
.scene.was-on { opacity: 1; z-index: 1; transition: none; }
.scene__kb { position: absolute; inset: 0; transform-origin: var(--o, 50% 50%); }
.scene__img, .scene__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene__vid { opacity: 0; transition: opacity .7s ease; }
.scene__vid.is-playing { opacity: 1; }
.scene.is-on .scene__kb, .scene.was-on .scene__kb { animation: kb var(--kb, 8s) linear both; }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1.01); } }

/* navy shade: dark up top for the nav, deeper behind the words, dark at the foot for the reel */
.shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 58% 46% at 50% 50%, rgba(1, 26, 40, .5), rgba(1, 26, 40, 0) 72%),
    linear-gradient(180deg, rgba(1, 26, 40, .78) 0%, rgba(1, 26, 40, .36) 26%, rgba(1, 26, 40, .4) 64%, rgba(1, 26, 40, .86) 100%);
}

/* the reel: the steps of the job, filling as each plays, plus a pause button */
.reel {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 30px;
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  width: min(900px, calc(100% - 40px));
}
.reel ol {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--steps, 6), 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reel ol button {
  display: block;
  width: 100%;
  padding: 8px 0 2px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 500 14px/1.2 var(--f-body);
  color: rgba(255, 255, 255, .62);
  transition: color .3s;
}
.reel ol button:hover, .reel li.is-on button { color: #fff; }
.reel ol button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
.reel .bar { display: block; height: 3px; margin-bottom: 9px; border-radius: 3px; background: rgba(255, 255, 255, .26); overflow: hidden; }
.reel .bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.reel li.is-done .bar i { transform: none; }
.reel li.is-on .bar i { animation: reel-fill var(--dur, 6.5s) linear forwards; }
.reel.is-paused li.is-on .bar i { animation-play-state: paused; }
@keyframes reel-fill { to { transform: none; } }
.reel__pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: -4px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4);
  transition: background-color .25s;
}
.reel__pause:hover { background: rgba(255, 255, 255, .22); }
.reel__pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.reel__pause svg { width: 18px; height: 18px; }
.reel__pause .i-play, .reel.is-paused .reel__pause .i-pause { display: none; }
.reel.is-paused .reel__pause .i-play { display: block; }

/* ---------- Estate services ---------- */

.svc {
  position: relative;
  padding: clamp(96px, 10vw, 136px) 0 clamp(88px, 9vw, 128px);
  background: #fff;
}
.svc__in { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.svc__head { max-width: 1160px; margin: 0 auto; text-align: center; }
/* the same size as the About Us title */
.svc h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(64px, 8.6vw, 124px);
  line-height: .92;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
  color: var(--navy);
  text-wrap: balance;
}
.svc h2 em { font-style: italic; font-weight: 500; color: var(--sage-deep); }
.svc__lede {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.svc h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 36;
  color: var(--navy);
}
.svc .btn:focus-visible { outline-color: var(--sage-deep); }

/* three across: eight services, then the walkthrough tile */
.sa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 64px 0 0; padding: 0; list-style: none; }
.sa > li { display: flex; }
.sa-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -34px rgba(1, 45, 68, .5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sa-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(1, 45, 68, .14), 0 34px 56px -34px rgba(1, 45, 68, .6); }
.sa-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-soft); }
.sa-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sa-card:hover .sa-card__img img { transform: scale(1.06); }
.sa-card__body { flex: 1; display: flex; flex-direction: column; padding: 24px 26px 28px; }
.sa-card h3 { font-size: 27px; line-height: 1.12; }
.sa-card p { margin: 10px 0 20px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.sa-card__inc {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 16px;
  font-weight: 500;
}
.sa-card__inc li { position: relative; padding-left: 26px; }
.sa-card__inc li::before {
  content: "";
  position: absolute;
  left: 3px; top: .36em;
  width: 11px; height: 6px;
  border: solid var(--sage-deep);
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
}
.sa-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 36px 34px;
  border-radius: 18px;
  background: var(--navy);
  color: #fff;
}
.sa-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 85% 0%, rgba(95, 160, 145, .38), transparent 70%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(95, 160, 145, .16), transparent 70%);
}
.sa-cta h3 { color: #fff; font-size: 34px; line-height: 1.08; }
.sa-cta h3 em { font-style: italic; font-weight: 500; color: var(--sage-light); }
.sa-cta p { margin: 14px 0 28px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.sa-cta .btn { align-self: flex-start; }
.sa-cta .btn:focus-visible { outline-color: #fff; }

/* ---------- Commercial services ---------- */

/* One screen over its own photo: the paragraph, a ticker of business types from edge to edge, how to reach us. */
.cx {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 48px) 0 96px;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.cx__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(1, 26, 40, .45), rgba(1, 26, 40, 0) 75%),
    linear-gradient(180deg, rgba(1, 26, 40, .66) 0%, rgba(1, 26, 40, .56) 55%, rgba(1, 26, 40, .9) 100%);
}
.cx__text { max-width: 1240px; padding: 0 24px; }
/* the same size as the About Us title */
.cx h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(64px, 8.6vw, 124px);
  line-height: .92;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.cx h2 em { font-style: italic; font-weight: 500; color: var(--sage-light); }
.cx__lede { max-width: 860px; margin: 24px auto 0; font-size: 21px; line-height: 1.6; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.cx__lede + .cx__lede { margin-top: 16px; }

/* the ticker: no pause control, by Ash's call; it only stands still for reduced motion */
.cx-ticker {
  align-self: stretch;
  margin: 52px 0 48px;
  padding: 18px 0;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .16);
  background: rgba(1, 26, 40, .3);
  font: italic 500 24px/1.3 var(--f-display);
  color: rgba(255, 255, 255, .88);
}
.cx-ticker__track { display: flex; width: max-content; animation: cx-ticker var(--dur, 70s) linear infinite; }
.cx-ticker__list { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.cx-ticker__list li { display: flex; align-items: center; white-space: nowrap; }
/* a small roof from the logo between names */
.cx-ticker__list li::after {
  content: "";
  flex: none;
  width: .3em; height: .3em;
  margin: .2em .8em 0;
  border: solid var(--sage);
  border-width: .085em 0 0 .085em;
  transform: rotate(45deg);
}
@keyframes cx-ticker { to { transform: translateX(-50%); } }

.cx-reach { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0 24px; }
.cx-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 26px 16px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  text-align: left;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .3s, box-shadow .3s, transform .4s var(--ease);
}
.cx-link:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px var(--sage-light); transform: translateY(-2px); }
.cx-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cx-link__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sage); color: var(--navy); }
.cx-link__icon svg { width: 22px; height: 22px; }
.cx-link small { display: block; font-size: 15px; color: var(--sage-light); }
.cx-link b { display: block; margin-top: 2px; font: 600 clamp(19px, 1.9vw, 24px)/1.2 var(--f-display); letter-spacing: -.005em; overflow-wrap: anywhere; }

/* ---------- About us ---------- */

/* A big title and four sentences, then the logo with a line out to each of the three things we hold to.
   site.js splits the title into letters and adds .is-on when the section scrolls in, which plays it in order:
   title, story, logo, lines, badges, words. After that, sparks run down the lines (site.js). */
.ab { --ab-bg: #F3F7F6; position: relative; overflow: hidden; padding: clamp(72px, 7.5vw, 108px) 32px; background: var(--ab-bg); }
.ab__in { max-width: 1120px; margin: 0 auto; text-align: center; }
.ab__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(64px, 8.6vw, 124px);
  line-height: .92;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
  color: var(--navy);
}
.ab__title em { font-style: italic; font-weight: 400; color: var(--sage-deep); }
.ab__title .ch { display: inline-block; }
.ab__story { max-width: 880px; margin: 22px auto 0; font-size: 20px; line-height: 1.65; text-wrap: pretty; }

.ab-hub { display: flex; flex-direction: column; align-items: center; margin-top: 40px; }
.ab-logo {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 11px #fff, 0 0 0 12.5px rgba(1, 45, 68, .12), 0 26px 40px -22px rgba(1, 45, 68, .6);
}
.ab-logo svg { width: 70%; height: auto; margin-top: -4px; overflow: visible; }
/* a ripple goes out from the logo every few seconds */
.ab-logo::before, .ab-logo::after { content: ""; position: absolute; inset: -12px; border: 2px solid var(--sage); border-radius: 50%; opacity: 0; pointer-events: none; }

/* the lines start under the logo's centre and end under each badge's centre */
.ab-lines { display: block; width: 100%; max-width: 1080px; height: auto; margin-top: -64px; overflow: visible; }
.ab-lines .track { fill: none; stroke: rgba(1, 45, 68, .16); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ab-lines .ln { fill: none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; transition: stroke .3s, stroke-width .3s; }
.ab-lines .ln.is-lit { stroke: var(--sage-deep); stroke-width: 4.5; }
.ab-spark .halo { fill: rgba(95, 160, 145, .28); }
.ab-spark .core { fill: #fff; stroke: var(--sage); stroke-width: 2.5; }

.ab-pls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 1080px; margin: -50px 0 0; padding: 0; list-style: none; }
.ab-pl { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.ab-pl__badge {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 6px var(--ab-bg), 0 0 0 8px rgba(95, 160, 145, .5), 0 22px 34px -18px rgba(1, 45, 68, .7);
  transition: translate .45s var(--spring), scale .45s var(--spring);
}
/* hover uses translate/scale so it stacks on the transform animations below */
.ab-pl:hover .ab-pl__badge { translate: 0 -5px; scale: 1.05; }
.ab-pl__text { max-width: 340px; margin-top: 24px; }
.ab-pl h3 { margin: 0; font: 600 27px/1.12 var(--f-display); letter-spacing: -.01em; font-variation-settings: "opsz" 36; color: var(--navy); }
.ab-pl p { margin: 10px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* the icons: white line art with sage accents */
.ab-ic { width: 60%; height: auto; overflow: visible; }
.ab-ic * { transform-box: fill-box; }
.ab-ic .w { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ab-ic .sg { fill: var(--sage-light); }
.ab-ic .sg-s { fill: none; stroke: var(--sage-light); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ab-ic .nv { fill: var(--navy); }
.ab-ic .bx { fill: rgba(169, 220, 205, .26); }
.ab-ic__heart { transform-origin: 50% 100%; }
.ab-ic__glass { transform-origin: 70% 70%; }
.ab-ic__truck { transform-origin: 20% 92%; }
.ab-ic__speed path { stroke-dasharray: 9 30; }

/* the sequence, once site.js adds .is-on */
.js .ab__title .ch { opacity: 0; transform: translateY(.42em) rotate(6deg); }
.is-on .ab__title .ch { animation: ab-hop .8s var(--spring) calc(var(--i) * 55ms) both; }
.js .ab__story { opacity: 0; transform: translateY(16px); }
.is-on .ab__story { animation: rise-in .9s var(--ease) .45s both; }

.js .ab-logo { opacity: 0; transform: scale(.4); }
.is-on .ab-logo { opacity: 1; transform: none; animation: ab-pop .8s var(--spring) .55s backwards; }
.is-on .ab-logo::before { animation: ab-ripple 4.2s var(--ease) 2.6s infinite; }
.is-on .ab-logo::after { animation: ab-ripple 4.2s var(--ease) 3.1s infinite; }

/* the mark builds itself, like the one in the nav */
.ab-mk-chim, .ab-mk-pane, .ab-mk-key, .ab-mk-turn { transform-box: fill-box; }
.ab-mk-roof { stroke-dasharray: 1 1; }
.ab-mk-chim { transform-origin: 50% 100%; }
.ab-mk-pane, .ab-mk-turn { transform-origin: 50% 50%; }
.js .ab-mk-roof { stroke-dashoffset: 1; }
.js .ab-mk-chim { transform: scaleY(0); }
.js .ab-mk-pane { transform: scale(0); }
.js .ab-mk-key { opacity: 0; transform: translateX(-120px); }
.is-on .ab-mk-roof { animation: mk-draw .9s var(--ease) .8s both; }
.is-on .ab-mk-chim { animation: mk-rise .5s var(--spring) 1.4s both; }
.is-on .ab-mk-pane { animation: mk-pop .45s var(--spring) both; }
.is-on .ab-mk-pane:nth-child(1) { animation-delay: 1.5s; }
.is-on .ab-mk-pane:nth-child(2) { animation-delay: 1.57s; }
.is-on .ab-mk-pane:nth-child(3) { animation-delay: 1.64s; }
.is-on .ab-mk-pane:nth-child(4) { animation-delay: 1.71s; }
.is-on .ab-mk-key { animation: mk-key-in .8s var(--ease) 1.55s both; }
.is-on .ab-mk-turn { animation: mk-turn 7s ease-in-out 3s infinite; }

.js .ab-lines .ln { stroke-dashoffset: 1; }
.is-on .ab-lines .ln { animation: mk-draw 1s var(--ease) calc(1.9s + var(--i, 0) * .14s) both; }

.js .ab-pl__badge { opacity: 0; transform: scale(.3); }
.is-on .ab-pl__badge { opacity: 1; transform: none; animation: ab-pop .7s var(--spring) calc(2.6s + var(--i, 0) * .14s) backwards; }
.is-on .ab-pl.is-hit .ab-pl__badge { animation: ab-hit .65s var(--spring); }
.js .ab-pl__text { opacity: 0; transform: translateY(14px); }
.is-on .ab-pl__text { animation: rise-in .8s var(--ease) calc(2.85s + var(--i, 0) * .14s) both; }

/* each icon's own little loop: steam rises, the glass sweeps the receipt, the hand truck tips and rolls */
.is-on .ab-ic__heart { animation: ab-steam 3.2s ease-in-out 3.2s infinite; }
.is-on .ab-ic__glass { animation: ab-scan 4.6s ease-in-out 3.3s infinite; }
.is-on .ab-ic__truck { animation: ab-tip 3.4s var(--ease) 3.4s infinite; }
.is-on .ab-ic__speed path { animation: ab-dash 1.1s linear 3.4s infinite; }
.is-on .ab-ic__speed path:nth-child(2) { animation-delay: 3.6s; }
.is-on .ab-ic__speed path:nth-child(3) { animation-delay: 3.8s; }
/* and any badge wiggles when you hover or tap it */
.ab-pl:hover .ab-ic, .ab-pl.is-hit .ab-ic { animation: ab-wiggle .6s var(--ease); }

@keyframes ab-hop { from { opacity: 0; transform: translateY(.42em) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes ab-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ab-ripple { 0% { opacity: .7; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes ab-hit { 0%, 100% { transform: none; } 35% { transform: scale(1.14); box-shadow: 0 0 0 6px var(--ab-bg), 0 0 0 11px var(--sage), 0 22px 34px -18px rgba(1, 45, 68, .7); } }
@keyframes ab-steam { 0%, 100% { transform: translateY(3px) scale(.86); opacity: .5; } 50% { transform: translateY(-5px) scale(1.06); opacity: 1; } }
@keyframes ab-scan { 0%, 100% { transform: none; } 45%, 60% { transform: translate(-9px, -12px) rotate(-10deg); } }
@keyframes ab-tip { 0%, 100% { transform: none; } 30%, 62% { transform: rotate(-11deg) translateX(3px); } }
@keyframes ab-dash { from { stroke-dashoffset: 39; } to { stroke-dashoffset: 0; } }
@keyframes ab-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 60% { rotate: 7deg; } }
@keyframes ab-spine { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- Contact ---------- */

/* Contact and the free estimate are the same: the phone number, big enough to be the sign,
   and the email under it with a Copy button. Then a slim footer ends the page. */
.ct { padding: clamp(88px, 9vw, 128px) 32px clamp(80px, 8vw, 112px); background: var(--navy); color: #fff; text-align: center; }
/* #estimate sits on this block, so keep it clear of the fixed nav when a button jumps here */
.ct__in { max-width: 1120px; margin: 0 auto; scroll-margin-top: calc(var(--nav-h) + 40px); }
.ct h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 84;
  text-wrap: balance;
}
.ct h2 em { font-style: italic; font-weight: 500; color: var(--sage-light); }

.ct-big {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .2em;
  margin-top: 30px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(40px, 10.4vw, 138px);
  line-height: 1;
  letter-spacing: -.028em;
  font-variation-settings: "opsz" 144;
  white-space: nowrap;
  transition: color .3s;
}
.ct-big:hover { color: var(--sage-light); }
.ct-big:focus-visible { outline: 3px solid #fff; outline-offset: 8px; border-radius: 8px; }
.ct-big__icon { flex: none; display: grid; place-items: center; width: .62em; height: .62em; border-radius: 50%; background: var(--sage); color: var(--navy); }
.ct-big__icon svg { width: 46%; height: 46%; }
/* a sage swoosh draws itself under the number when it scrolls in */
/* an SVG keeps its own aspect ratio between left and right, so it gets an explicit width */
.ct-big__line { position: absolute; left: .7em; bottom: -.12em; width: calc(100% - .7em); height: .16em; overflow: visible; }
/* the stroke keeps its width however far the swoosh stretches, so the dash is a plain length
   longer than the line can ever get (pathLength doesn't mix with non-scaling strokes) */
.ct-big__line path { fill: none; stroke: var(--sage); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1600; }
.js .ct-big__line path { stroke-dashoffset: 1600; }
.ct-big.is-in .ct-big__line path { animation: ct-draw 1.3s var(--ease) .5s both; }
@keyframes ct-draw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }

.ct-mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin: 40px 0 0; font: 500 clamp(17px, 2.5vw, 32px)/1.2 var(--f-display); color: var(--sage-light); }
.ct-mail a { display: inline-flex; align-items: center; gap: .4em; border-bottom: 2px solid rgba(169, 220, 205, .3); transition: border-color .25s, color .25s; }
.ct-mail a:hover { color: #fff; border-color: var(--sage-light); }
.ct-mail a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ct-mail svg { flex: none; width: 1em; height: 1em; }
.ct-copy { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 13.5px/1 var(--f-body); letter-spacing: .03em; cursor: pointer; transition: background-color .25s, color .25s; }
.ct-copy svg { width: 15px; height: 15px; }
.ct-copy:hover { background: rgba(255, 255, 255, .2); }
.ct-copy:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ct-copy.is-done { background: var(--sage); color: var(--navy); }
.ct__lede { max-width: 640px; margin: 34px auto 0; font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, .86); text-wrap: pretty; }

/* the phone rings and the envelope's flap lifts when you point at them */
.ct-ic-mail .flap { transform-box: fill-box; transform-origin: 50% 0; transition: transform .45s var(--spring); }
.ct-big:hover .ct-ic-phone { animation: ct-ring .9s var(--ease); }
.ct-mail a:hover .flap { transform: scaleY(-1); }
@keyframes ct-ring { 0%, 100% { rotate: 0deg; } 15% { rotate: -16deg; } 30% { rotate: 13deg; } 45% { rotate: -10deg; } 60% { rotate: 7deg; } 75% { rotate: -3deg; } }

/* the slim footer that ends the page */
.site-foot { --logo-ink: #fff; --logo-key: #7CC2B1; padding: 0 32px; background: var(--navy); color: rgba(255, 255, 255, .6); }
.site-foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; max-width: 1120px; margin: 0 auto; padding: 28px 0 34px; border-top: 1px solid rgba(255, 255, 255, .14); }
.site-foot .logo { display: block; height: 44px; width: auto; overflow: visible; }
.site-foot p { margin: 0; font-size: 15px; }
/* the contact block sits beside the logo and pushes the copyright to the end; when the row wraps, the copyright starts on the left */
.site-foot__nap { flex: 1 1 auto; }
/* each link stays whole, so the email never splits before "@gmail.com" */
.site-foot a { white-space: nowrap; color: rgba(255, 255, 255, .82); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; transition: color .25s, text-decoration-color .25s; }
.site-foot a:hover { color: #fff; text-decoration-color: currentColor; }
.site-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Intro ---------- */
/* On a first visit and on every refresh: the head script adds .with-intro and site.js (introPlay) runs it.
   Night: the house draws itself, its windows light up with the footage inside, and the camera flies in
   through the window. The art is the stacked logo, in the nav logo's units. Its sky spills past the art's
   box to cover the screen, with the four panes cut out so the hero shows through. If no script ever runs,
   the overlay hides itself after 8 seconds. */

.intro { display: none; }
.with-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  animation: intro-failsafe .3s ease 8s forwards;
}
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
.intro__art {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(600px, 46vw, 73.5vh);
  width: min(600px, 46vw, 73.5svh);
  height: auto;
  overflow: visible;
}
/* phones: the logo takes most of the width */
@media (max-width: 760px) {
  .intro__art { width: min(80vw, 73.5vh); width: min(80vw, 73.5svh); }
}
.intro__glass rect { fill: #0B4262; } /* the sky's own colour, until the panes darken */
.intro__frames rect { fill: none; stroke: #fff; stroke-width: 4px; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.intro__sill { fill: none; stroke: #fff; stroke-width: 2.5px; vector-effect: non-scaling-stroke; opacity: 0; }
.intro__glow { opacity: 0; }
.intro__roof { fill: none; stroke: #fff; stroke-width: 43.5px; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.intro__chim { fill: #fff; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.intro__key { fill: #7CC2B1; opacity: 0; transform: translateX(-340px); }
.intro__key circle { fill: none; stroke: #7CC2B1; stroke-width: 33.5px; }
.intro__line { fill: #fff; font-family: Cinzel, "Trajan Pro", Georgia, serif; transform: translateY(120px); }
.intro__line--big { transform: translateY(300px); }

/* Under the intro the footage fades in straight away, ready to show through the windows, and the navy shade
   stays light until the words come in. html. keeps these ahead of the Entrance rules below. */
html.with-intro .media { animation: fade .9s var(--ease) .1s both; }
html.with-intro .shade { opacity: .35; transition: opacity 1.2s var(--ease); }
html.with-intro.is-ready .shade { opacity: 1; }

/* ---------- Entrance ---------- */

.js .media { opacity: 0; }
.is-ready .media { animation: fade 1.6s var(--ease) both; }
.js .rv { opacity: 0; transform: translateY(22px); }
.is-ready .rv { animation: rise-in 1s var(--ease) var(--d, 0s) both; }
.js .hero h1 .ln > span { transform: translateY(112%); }
.is-ready .hero h1 .ln > span { animation: line-up 1.1s var(--ease) var(--d, 0s) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translateY(112%); } to { transform: none; } }

/* Below the hero, blocks fade up as they scroll in (site.js adds .is-in).
   translate, not transform, so a card's hover lift still works afterwards. */
.js [data-rv] { opacity: 0; translate: 0 28px; }
.js [data-rv].is-in {
  opacity: 1;
  translate: none;
  transition: opacity .9s var(--ease) var(--rd, 0s), translate 1s var(--ease) var(--rd, 0s);
}

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .nav__links { gap: 22px; }
  .nav__links a:not(.btn) { font-size: 13px; letter-spacing: .08em; }
  .sa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .sa > li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --nav-h: 72px; }
  .nav__in { padding: 0 20px; }
  .brand svg { height: 48px; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 20px 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 40px -28px rgba(1, 45, 68, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .nav__links a:not(.btn) { padding: 17px 4px; font-size: 15px; border-bottom: 1px solid var(--line); }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__cta { margin: 18px 0 0; }
  .nav__cta .btn { width: 100%; }

  .hero { padding: calc(var(--nav-h) + 24px) 20px 108px; }
  .hero h1 { font-size: clamp(38px, 10vw, 56px); }
  .hero__lede { font-size: 18.5px; }
  .hero__ctas { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .reel { bottom: 22px; gap: 14px; }
  .reel ol { gap: 8px; }
  .reel ol button { font-size: 0; padding-top: 14px; }
  .reel .bar { margin-bottom: 0; }

  .svc__in { padding: 0 20px; }
  .svc__lede { font-size: 18.5px; }

  .cx { padding: calc(var(--nav-h) + 40px) 0 80px; }
  .cx__text { padding: 0 20px; }
  .cx__lede { font-size: 18.5px; }
  .cx-ticker { margin: 40px 0 36px; padding: 14px 0; font-size: 19px; }
}

/* About us on phones: the pillars stack down a sage line that runs from the logo. */
@media (max-width: 760px) {
  .ab { padding: 72px 20px 76px; }
  .ab__in { text-align: left; }
  .ab__story { margin-left: 0; font-size: 18.5px; }
  .ab-hub { display: block; margin-top: 36px; }
  .ab-lines { display: none; }
  .ab-logo { width: 96px; height: 96px; }
  .ab-pls { position: relative; grid-template-columns: minmax(0, 1fr); gap: 34px; margin: 40px 0 0; }
  .ab-pls::before {
    content: "";
    position: absolute;
    left: 47px; top: -40px; bottom: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--sage);
    transform-origin: top;
  }
  .js .ab-pls::before { transform: scaleY(0); }
  .is-on .ab-pls::before { animation: ab-spine 1.2s var(--ease) 1.7s both; }
  /* the line stops at the last badge */
  .ab-pl:last-child::after { content: ""; position: absolute; left: 40px; top: 96px; bottom: -2px; width: 17px; background: var(--ab-bg); }
  .ab-pl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; padding: 0; }
  .ab-pl__badge { width: 96px; height: 96px; }
  .ab-pl__text { margin: 0; padding-top: 10px; }
  .ab-pl h3 { font-size: 24px; }
  .ab-pl p { font-size: 16.5px; }
}

/* Phones: each service becomes a row with a small photo, and buttons may wrap. */
@media (max-width: 640px) {
  .svc .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
  .cx-reach { flex-direction: column; align-items: stretch; width: 100%; max-width: 440px; padding: 0 20px; }
  .cx-link { gap: 12px; padding-right: 18px; }
  /* small enough that the email only breaks before "@gmail.com", even on a 320px phone */
  .cx-link__icon { width: 44px; height: 44px; }
  .cx-link b { font-size: clamp(15px, 4.6vw, 19px); }
  .sa { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
  .sa-card { flex-direction: row; }
  .sa-card__img { flex: none; width: 112px; aspect-ratio: auto; }
  .sa-card__body { padding: 16px 18px 18px; }
  .sa-card h3 { font-size: 22px; }
  .sa-card p { margin: 6px 0 0; font-size: 17px; }
  .sa-card__inc { display: none; }
  .sa-cta { padding: 30px 24px; }
  .sa-cta h3 { font-size: 30px; }
  .ct { padding: 72px 20px 64px; }
  .ct__lede { font-size: 18.5px; }
  .site-foot { padding: 0 20px; }
  /* phone and email stack, one tap target per line, with no stray dot */
  .site-foot__sep { display: none; }
  .site-foot__nap a { display: block; width: fit-content; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reel__pause { display: none; }
  /* no intro (the head script checks this too) */
  .intro { display: none !important; }
  /* the business ticker stands still: one copy, wrapped and centred */
  .cx-ticker__track { width: auto; animation: none; }
  .cx-ticker__list { flex-wrap: wrap; justify-content: center; row-gap: .25em; padding: 0 20px; }
  .cx-ticker__list + .cx-ticker__list { display: none; }
}