/* ============================================================
   Appraisal Valet | Home variant 1: Classic, Refined
   The current page, same order and feel, built the way the
   Cloud Nine Labs sites are built.
   Sections: 1 Tokens/base  2 Buttons  3 Header  4 Menu panel
             5 Hero  6 Trusted by  7 Why  8 Tiles  9 Footer
             10 Modal  11 Motion  12 Responsive
   ============================================================ */

/* ---------- 1. Tokens and base ---------- */
:root {
  --navy: #123854;
  --navy-dark: #0e2c43;
  --navy-deep: #0a2133;
  --blue: #359ff4;
  --blue-hover: #1f8be0;
  --blue-light: #80d6fc;
  --text: #222222;
  --muted: #5b656f;
  --line: #dde3ea;
  --pale: #f3f6f9;
  --white: #ffffff;
  --wrap: 1140px;
  --gutter: 40px;
  --header-h: 116px;
  --bar-h: 64px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-head: "Montserrat", sans-serif;
  --font-body: "Lato", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }   /* no smooth scroll: the page has no in-page anchors */
body {
  margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 400;
  line-height: 1.65; color: var(--text); background: var(--white);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s ease; }
@media (hover: hover) { a:hover { color: var(--navy); } }
h1, h2, h3 { font-family: var(--font-head); color: var(--navy); margin: 0; line-height: 1.1; }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 2. Buttons ---------- */
/* B2B buttons: 4px radius, Montserrat 600 15px, lift + darken on hover, arrow nudges */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 14px 24px; min-height: 46px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn .arw { transition: transform .2s ease; }
.btn--solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
/* the base's hero button: navy fill inside a white frame */
.btn--hero { background: var(--navy); border-color: #fff; color: #fff; }
@media (hover: hover) {
  .btn--solid:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(53,159,244,.6); }
  .btn--navy:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-1px); }
  .btn--hero:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(53,159,244,.6); }
  .btn:hover .arw { transform: translateX(4px); }
}

/* ---------- 3. Header (Pattern A: T&P v2 stickybar) ---------- */
/* Tall and transparent over the hero: utility line over the primary line.
   body.compact (scrollY > 30, or always below 1024px) drops it to a 64px navy
   bar: the utility line folds away, the primary line and CTA stay. */
.stickybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--header-h);
  background: linear-gradient(180deg, rgba(10,33,51,.55), rgba(10,33,51,0));
  transition: background-color .25s ease, box-shadow .25s ease, height .3s var(--ease);
}
.compact .stickybar { height: var(--bar-h); background: rgba(14,44,67,.97); box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.sb-inner {
  position: relative; height: 100%; max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px;
}
.sb-logo { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; }
.sb-logo img { width: 228px; height: auto; transition: width .3s var(--ease), opacity .2s ease; }
.compact .sb-logo img { width: 176px; }
@media (hover: hover) { .sb-logo:hover img { opacity: .85; } }

.sb-lines { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* Line 1: utility. 12px caps, colour change only on hover. */
.sb-utils {
  display: flex; align-items: center; gap: 28px; max-height: 24px; overflow: hidden;
  transition: max-height .3s var(--ease), opacity .2s ease, margin .3s var(--ease);
}
.compact .sb-utils { max-height: 0; opacity: 0; margin-top: -10px; visibility: hidden; }
.sb-util {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); white-space: nowrap;
}
.sb-util svg { width: 12px; height: 12px; fill: currentColor; flex: 0 0 auto; }
@media (hover: hover) { .sb-util:hover { color: var(--blue-light); } }

/* Line 2: primary nav + solid CTA */
.sb-main { display: flex; align-items: center; gap: 18px; }
.sb-nav { display: flex; align-items: stretch; height: 44px; }
.navcell { position: relative; display: flex; align-items: center; }
.sb-link {
  position: relative; display: flex; align-items: center; height: 100%; padding: 0 16px;
  font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: #fff; white-space: nowrap;
}
/* 2px accent underline grows from the left (WPA nav__link) */
.sb-link::after {
  content: ""; position: absolute; left: 16px; bottom: 6px; width: 0; max-width: calc(100% - 32px);
  height: 2px; background: var(--blue); transition: width .4s ease;
}
@media (hover: hover) {
  .sb-link:hover { color: #fff; }
  .sb-link:hover::after { width: 100%; }
}
.has-dropdown:focus-within > .sb-link::after { width: 100%; }
.caret {
  display: inline-block; width: 6px; height: 6px; margin-left: 9px; position: relative; top: -2px;
  border-right: 1.5px solid rgba(255,255,255,.85); border-bottom: 1.5px solid rgba(255,255,255,.85);
  transform: rotate(45deg); transition: transform .2s ease;
}
.has-dropdown:focus-within .caret, .has-dropdown.open .caret { transform: rotate(225deg); top: 1px; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 230px; padding: 6px 0; z-index: 40;
  background: rgba(14,44,67,.98); border: 1px solid rgba(255,255,255,.12); border-top: 2px solid var(--blue);
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a {
  display: block; padding: 11px 20px; font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: #e6edf3; white-space: nowrap; transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) {
  .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: none; }
  .has-dropdown:hover .caret { transform: rotate(225deg); top: 1px; }
  .has-dropdown:hover > .sb-link::after { width: 100%; }
  .dropdown a:hover { background: rgba(255,255,255,.07); color: var(--blue-light); }
}
.sb-cta { padding: 12px 20px; min-height: 42px; font-size: 14px; }

/* Menu button: hidden on desktop, shown below 1024px */
.sb-menu {
  display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0 8px 8px;
  background: none; border: 0; cursor: pointer; color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; }
.burger i { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; transition: background .2s ease, transform .25s ease; }
@media (hover: hover) {
  .sb-menu:hover { color: var(--blue-light); }
  .sb-menu:hover .burger i { background: var(--blue-light); }
  .sb-menu:hover .burger i:nth-child(1) { transform: translateY(-1px); }
  .sb-menu:hover .burger i:nth-child(3) { transform: translateY(1px); }
}

/* ---------- 4. Slide-in menu panel (T&P v2 + stacked-panel drill-down) ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.menu-panel {
  position: fixed; top: 0; right: 0; z-index: 310; height: 100%; width: min(380px, 88vw);
  display: flex; flex-direction: column; background: var(--navy-dark); color: #fff;
  box-shadow: -10px 0 34px rgba(0,0,0,.45); transform: translateX(100%); visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.menu-panel.open { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
.menu-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 24px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.menu-brand img { width: 160px; }
.menu-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .3s ease;
}
@media (hover: hover) { .menu-close:hover { color: var(--blue-light); background: rgba(255,255,255,.1); transform: rotate(90deg); } }
.menu-nav { position: relative; flex: 1 1 auto; display: grid; overflow: hidden; }
.menu-nav .m-root, .menu-nav .m-panel {
  grid-area: 1 / 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s linear .32s;
}
.menu-nav .m-panel { transform: translateX(100%); opacity: 0; visibility: hidden; }
.menu-nav.sub-open .m-root { transform: translateX(-30%); opacity: 0; visibility: hidden; }
.menu-nav.sub-open .m-panel.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s; }
.m-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  padding: 14px 24px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: none;
  font-family: var(--font-head); font-weight: 600; font-size: 17px; color: #fff; text-align: left; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.m-all { color: var(--blue-light); font-size: 15px; }
.m-chev {
  flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; margin-left: 12px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
.m-chev--back { transform: rotate(135deg); margin: 0 12px 0 0; }
.m-back {
  display: flex; align-items: center; min-height: 48px; padding: 14px 24px; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: left;
}
.m-sub { display: flex; flex-direction: column; padding: 6px 0 16px; }
.m-sub a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 24px 10px 36px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #e6edf3;
}
.m-util { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 28px; border-top: 1px solid rgba(255,255,255,.14); }
.m-util a:not(.btn) {
  display: flex; align-items: center; min-height: 44px; font-family: var(--font-head);
  font-weight: 600; font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.82);
}
.m-util .btn { margin-top: 12px; align-self: flex-start; }
@media (hover: hover) {
  .m-item:hover, .m-back:hover, .m-sub a:hover { background: rgba(255,255,255,.07); color: var(--blue-light); }
  .m-util a:not(.btn):hover { color: var(--blue-light); }
}
body.menu-open { overflow: hidden; }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; background: var(--navy-deep);
  min-height: min(88vh, 820px); display: flex; align-items: center;
}
.hero__media, .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* video sits on the poster, hidden until it has a frame; then swapped in, no fade */
.hero__video { visibility: hidden; }
.hero__video.is-ready { visibility: visible; }
/* the base's dark overlay, weighted to the copy side and the header */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,33,51,.82) 0%, rgba(10,33,51,.6) 48%, rgba(10,33,51,.3) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto; padding: calc(var(--header-h) + 48px) var(--gutter) 88px;
}
.hero__content { max-width: 680px; }
.hero h1 {
  color: #fff; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; letter-spacing: -.02em;
  max-width: 15ch; margin: 0 0 26px;
}
/* weight contrast inside one heading (T&P .mission, WPA heroes) */
.hero h1 .h1-light { display: block; font-weight: 300; }
.hero h1 strong { display: block; font-weight: 800; }
.hero p {
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,.9);
  max-width: 54ch; margin: 0 0 34px;
}
.hero p .accent {
  color: #fff; font-weight: 700; box-shadow: inset 0 -.14em 0 0 var(--blue);
  transition: box-shadow .25s ease, color .2s ease;
}
@media (hover: hover) { .hero p .accent:hover { color: #fff; box-shadow: inset 0 -1.2em 0 0 var(--blue); } }

/* ---------- 6. Trusted by (C9L logo strand) ---------- */
.trusted { padding: 48px 0 56px; border-bottom: 1px solid var(--line); background: var(--white); }
.strand-label {
  text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 13px; line-height: 1.2;
  letter-spacing: .28em; text-transform: uppercase; color: var(--navy); margin: 0 0 28px;
}
.strand-label::after { content: ""; display: block; width: 36px; height: 2px; background: var(--blue); margin: 14px auto 0; }
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* duration is set from the measured width in script.js so the speed is constant at every viewport */
.marquee-track {
  display: flex; align-items: center; width: max-content; will-change: transform;
  backface-visibility: hidden; animation: marquee var(--mq-dur, 110s) linear infinite;
}
.mq-set { display: flex; align-items: center; flex: 0 0 auto; }
.mq-set img { flex: 0 0 auto; height: 76px; width: auto; margin-right: 44px; object-fit: contain; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- 7. Why Appraisal Valet (HDL split + stack) ---------- */
.why { padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.split { display: grid; grid-template-columns: 56fr 44fr; gap: clamp(40px, 5vw, 64px); align-items: center; }
.split__copy h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px; }
.lead {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4;
  color: var(--navy); margin: 0 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.lead__kick { font-weight: 300; }
.split__copy p:not(.lead) { color: #3b4550; max-width: 60ch; }
.split__copy p:last-child { margin-bottom: 0; }
/* photo box with an inset photo hanging off the bottom corner (HDL .stack).
   The media column is on the right, so the inset hangs left into the column gap
   instead of out into the page gutter: no sideways scroll at any width. */
.stack { position: relative; margin-bottom: 12%; }
.stack__main { width: 100%; height: auto; aspect-ratio: 1.15; object-fit: cover; border-radius: var(--radius); }
.stack__inset {
  position: absolute; left: -10%; bottom: -14%; width: 52%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 6px solid #fff; border-radius: var(--radius); box-shadow: 0 20px 40px -18px rgba(18,56,84,.45);
}

/* ---------- 8. Quality / Service / Reliability (Weunf 2px-gap tiles) ---------- */
.tiles { background: var(--pale); padding: clamp(48px, 6vw, 72px) 0; }
.tiles__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 2px solid var(--line); }
.tile { background: #fff; padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px); }
.tile__kick {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .2em; color: var(--blue); margin: 0 0 14px;
}
.tile__word {
  display: block; font-family: var(--font-head); font-weight: 300; font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1; letter-spacing: -.01em; color: var(--navy);
}
.tile:nth-child(2) .tile__word { font-weight: 500; }
.tile:nth-child(3) .tile__word { font-weight: 800; }

/* ---------- 9. Footer (T&P / HDL dark footer, base content, blue bottom bar) ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--navy); color: #c9d5e0; }
.footer__watermark {
  position: absolute; right: -2%; bottom: 58px; width: min(62%, 760px); height: auto;
  opacity: .06; pointer-events: none; user-select: none;
}
.footer__inner { position: relative; z-index: 1; padding-top: 68px; padding-bottom: 64px; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; align-items: start; }
.footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__logo img { width: 240px; }
.footer__col { list-style: none; margin: 0; padding: 0; }
.footer__col a {
  display: inline-flex; align-items: center; min-height: 40px; font-family: var(--font-head);
  font-weight: 600; font-size: 14.5px; letter-spacing: .02em; color: #fff;
}
@media (hover: hover) { .footer__col a:hover { color: var(--blue-light); } .footer__logo:hover img { opacity: .85; } }
/* the base's blue bottom bar, kept as the brand signature */
.footer__bar { position: relative; z-index: 1; background: var(--blue); }
.footer__bar .wrap {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap;
  min-height: 52px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; line-height: 1.4; color: #fff;
}
.footer__bar a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) { .footer__bar a:hover { color: var(--navy); } }

/* ---------- 10. Login modal ---------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; padding: 16px; overflow-y: auto; }
.modal.open { display: block; }
.modal__overlay { position: fixed; inset: 0; background: rgba(9,24,38,.72); }
.modal__box {
  position: relative; z-index: 1; max-width: 640px; margin: 8vh auto 0; padding: 48px 44px 44px;
  background: #fff; border-radius: 6px; border-top: 3px solid var(--blue); text-align: center;
  box-shadow: 0 30px 60px -30px rgba(11,31,51,.45);
}
.modal__box h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; margin: 0 0 18px; }
.modal__box p { font-size: 16.5px; color: var(--muted); }
.modal__logins { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.modal__close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; background: none; border: 0;
  font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer;
}
@media (hover: hover) { .modal__close:hover { color: var(--navy); } }

/* ---------- 11. Motion ---------- */
/* Locked scroll-reveal spec (Website Ideas/Movement And Fade): fade + 16px rise,
   .7s ease-out, ~80ms stagger. script.js adds .r-in--rise then .is-in.
   The hero copy is staged before the script runs; a 2.5s failsafe shows it anyway. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero__content > * { opacity: 0; animation: rv-failsafe 0s 2.5s forwards; }
  .r-in--rise { opacity: 0; animation: none; }
  .r-in--rise.is-in { animation: fadeInRise .7s cubic-bezier(.33,1,.68,1) both; }
  html.rv-all .r-in--rise, html.rv-all .hero__content > * { opacity: 1; animation: none; }
}
@keyframes fadeInRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rv-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  /* reduced motion: the strand stops and settles into a static logo grid */
  .mq-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 28px; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
  .mq-set[aria-hidden="true"] { display: none; }
  .mq-set img { width: 100%; height: 56px; margin: 0; }
  .stickybar, .sb-logo img, .menu-panel, .menu-overlay, .menu-nav .m-root, .menu-nav .m-panel, .dropdown { transition: none; }
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 1240px) {
  .sb-link { padding: 0 12px; font-size: 14px; }
  .sb-link::after { left: 12px; max-width: calc(100% - 24px); }
  .sb-logo img { width: 196px; }
  .sb-main { gap: 12px; }
}
@media (max-width: 1100px) {
  .sb-link { padding: 0 10px; font-size: 13.5px; }
  .sb-link::after { left: 10px; max-width: calc(100% - 20px); }
  .sb-logo img { width: 176px; }
  .sb-inner { gap: 16px; }
  .sb-utils { gap: 22px; }
}
@media (max-width: 1023.98px) {
  :root { --gutter: 24px; --header-h: 64px; }
  .stickybar { height: var(--bar-h); background: rgba(14,44,67,.97); box-shadow: 0 4px 18px rgba(0,0,0,.25); }
  .sb-lines { display: none; }
  .sb-menu { display: inline-flex; }
  .sb-logo img, .compact .sb-logo img { width: 168px; }
  .hero { min-height: 0; }
  .hero__inner { padding-top: calc(var(--bar-h) + 72px); padding-bottom: 80px; }
  .footer__cols { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split__media { max-width: 560px; }
  /* single column: the inset hangs off the left edge of the photo, so pull the stack right */
  .stack { margin-left: 14%; }
}
@media (max-width: 767.98px) {
  .tiles__row { grid-template-columns: 1fr; }
  .tile { display: flex; align-items: baseline; gap: 20px; padding: 26px 24px; }
  .tile__kick { margin: 0; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__watermark { width: 120%; right: -30%; bottom: 120px; }
}
@media (max-width: 599.98px) and (prefers-reduced-motion: no-preference) {
  .mq-set img { height: 60px; margin-right: 32px; }
}
@media (max-width: 599.98px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .hero__inner { padding-top: calc(var(--bar-h) + 56px); padding-bottom: 64px; }
  .hero h1 { font-size: clamp(32px, 9vw, 38px); }
  .hero .btn { white-space: normal; text-align: left; }
  .trusted { padding: 40px 0 44px; }
  .stack { margin-left: 10%; }
  .stack__inset { left: -10%; bottom: -12%; border-width: 4px; }
  .modal__box { padding: 44px 22px 28px; margin-top: 4vh; }
  .modal__logins .btn { flex: 1 1 100%; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .footer__logo { margin-bottom: 20px; }
  .footer__logo img { width: 200px; }
  .footer__inner { padding-top: 52px; padding-bottom: 44px; }
  .footer__bar .wrap { justify-content: center; text-align: center; }
}

/* footer bottom: Terms + Cloud Nine Labs credit sit together on the right */
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: 4px 28px; }
@media (max-width: 599.98px) { .footer__legal { justify-content: center; } }