/* Webfonts. One Suisse family with five weights, so the weights below resolve
   to the right face everywhere; swap keeps text visible while they load. */
@font-face { font-family: "Suisse Intl"; font-weight: 250; font-style: normal; font-display: swap; src: url("./files/fonts/SuisseIntl-Thin.woff2") format("woff2"); }
@font-face { font-family: "Suisse Intl"; font-weight: 300; font-style: normal; font-display: swap; src: url("./files/fonts/SuisseIntl-Light.woff2") format("woff2"); }
@font-face { font-family: "Suisse Intl"; font-weight: 400; font-style: normal; font-display: swap; src: url("./files/fonts/SuisseIntl-Regular.woff2") format("woff2"); }
@font-face { font-family: "Suisse Intl"; font-weight: 450; font-style: normal; font-display: swap; src: url("./files/fonts/SuisseIntl-Book.woff2") format("woff2"); }
@font-face { font-family: "Suisse Intl"; font-weight: 500; font-style: normal; font-display: swap; src: url("./files/fonts/SuisseIntl-Medium.woff2") format("woff2"); }
@font-face { font-family: "Forevs Demo"; font-weight: 400; font-style: normal; font-display: swap; src: url("./files/fonts/ForevsDemo-Regular.otf") format("opentype"); }

:root {
  --page: #f9f9f9;
  --ink: #242424;
  --mid: #a0a0a0;
  --line: #dadada;
  --white: #fff;
}

* { box-sizing: border-box; }

/* Anchor jumps from the footer glide rather than snap. */
html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  min-height: var(--page-height, 4536px);
  background: var(--page);
}

body {
  color: var(--ink);
  font-family: "Suisse Intl", Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.page {
  position: relative;
  width: 1440px;
  height: 4536px;
  margin: 0;
  overflow: hidden;
  background: var(--page);
  /* zoom, not transform: a transform scales the paint but leaves the layout box
     at full height, which reserves scroll space below the visible page. */
  zoom: var(--page-scale, 1);
}

.skeleton-light { background: rgba(255, 255, 255, .7); }
.skeleton-mid { background: rgba(160, 160, 160, .5); }
.skeleton-dark { background: #858782; }
.line { border-radius: 999px; }

.hero {
  position: absolute;
  inset: 0 0 auto;
  height: 1464px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--page);
}

.hero-media {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 1416px;
  height: 1000px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(160deg, #a4a69f 0%, #858782 48%, #343735 100%);
}

.hero-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  pointer-events: none;
}

/* The nav lives outside .page so it can pin to the viewport, and matches the
   page's 1440px canvas with zoom rather than transform — a transformed
   ancestor would clip the bar's backdrop-filter to its own backdrop root. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 1440px;
  height: 160px;
  color: white;
  pointer-events: none;
  zoom: var(--page-scale, 1);
}

.nav-bar {
  position: absolute;
  top: var(--bar-top, 0px);
  right: var(--bar-inset, 0px);
  left: var(--bar-inset, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-height, 117px);
  padding-right: var(--bar-pad-right, 36px);
  padding-left: var(--bar-pad-left, 40px);
  border-radius: var(--bar-radius, 0px);
  background: rgba(0, 0, 0, var(--bar-alpha, 0));
  backdrop-filter: var(--bar-blur, none);
  -webkit-backdrop-filter: var(--bar-blur, none);
  pointer-events: auto;
}

.brand { display: block; width: 149px; height: 18px; }

.nav-bar nav {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 36px;
  transform: translateX(-50%);
}
.nav-bar nav span {
  display: block;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
}
.button-skeleton { width: 121px; height: 45px; border-radius: 24px; }

.quote-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 12px 16px;
  color: #000;
  border: 0;
  border-radius: 24px;
  background: #fff;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
  cursor: pointer;
}

.quote-button--nav {
  flex: 0 0 auto;
  height: auto;
  padding-block: var(--nav-button-pad, 12px);
}

.hero-copy {
  position: absolute;
  top: 417px;
  left: 429px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 582px;
  color: #fff;
  text-align: center;
}

.hero-copy h1 {
  width: 100%;
  margin: 0;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 62px;
}

.hero-copy p {
  width: 314px;
  margin: 20px 0 0;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 21px;
}

.quote-button--hero { margin-top: 32px; }
.hero-wordmark {
  position: absolute;
  top: 829px;
  left: 28px;
  display: block;
  width: 1384px;
  height: 167px;
}

.rating {
  position: absolute;
  top: 1072px;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Figma's three stops, squeezed onto the glyphs rather than the whole line box,
   so the letters get their full dark-to-light run instead of sampling only the
   middle of the ramp. The negative margin lifts the wheels so the centre tyre's
   top sits 76px below this box's top, overlapping the word. */
.rating-title {
  margin: 0 0 -48px;
  background: linear-gradient(#727272 5%, #999999 50%, #fefefe 77%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 96px;
  font-weight: 250;
  line-height: 124px;
}

/* tire.svg is 210 square, so the centre runs true to size and the rest halve.
   The outermost pair drops by half the radius difference — (210 - 105) / 2 —
   which lands their bottoms on the centre wheel's. */
.wheels { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* Own compositor layer each: the scroll sway then rotates a cached bitmap
   instead of repainting the wheel every frame. */
.wheels img { display: block; will-change: transform; }
.wheels img:first-child,
.wheels img:last-child { position: relative; top: 52.5px; }

/* Fixed resting angles rather than runtime-random, so the composition is the
   same every load. Centre stays at 0. The tyres are circular, so this only
   turns the wordmark and spokes — spacing and the shared bottom edge are
   untouched. --spin is layered on top by wheels.js. */
.wheels img { transform: rotate(calc(var(--base-rot, 0deg) + var(--spin, 0deg))); }
/* The centre tyre is static and not grabbable, so it gets no grab affordance. */
/* touch-action: a finger on a wheel turns it; otherwise the browser would
   claim the touch for scrolling and cancel the drag. */
.wheels img:not(:nth-child(3)) { cursor: grab; touch-action: none; }
.wheels img:not(:nth-child(3)):active { cursor: grabbing; }
.wheels img:nth-child(1) { --base-rot: -18deg; }
.wheels img:nth-child(2) { --base-rot: 27deg; }
.wheels img:nth-child(4) { --base-rot: -34deg; }
.wheels img:nth-child(5) { --base-rot: 12deg; }

/* The relative-shifted outer wheels still bottom out level with the centre, so
   the row's own box bottom is the lowest tyre and this margin is true to it. */
.rating-caption {
  margin: 20px 0 0;
  color: #000;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}

.services { position: absolute; top: 1464px; left: 0; width: 1440px; height: 1278px; background: white; }
.services-panel {
  position: absolute;
  top: 120px;
  left: 60px;
  width: 1320px;
  height: 368px;
  border-radius: 20px;
  background: linear-gradient(
    var(--panel-top, #727272) 0%,
    var(--panel-mid, #999999) 50%,
    var(--panel-bottom, #fefefe) 100%
  );
}

/* Figma's inner stroke: a full-size gradient with its middle masked out, so the
   2px ring draws inside the frame without the box model shift a border would
   cause. The gradient runs bottom-to-top in Figma, so its 100% stop is the top
   here, and the transparent 50% stop carries on down to the bottom edge. */
.services-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(
    rgba(63, 63, 63, var(--panel-stroke, .5)),
    rgba(63, 63, 63, 0) 50%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.services-panel h2 {
  position: absolute;
  top: 60px;
  left: 120px;
  margin: 0;
  color: var(--white);
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 47px;
}
/* Anchor targets clear the pinned nav, which sits 68px deep in its pill state. */
.service-card,
.more-title { scroll-margin-top: 100px; }

.service-grid { position: absolute; top: 307px; left: 180px; display: grid; grid-template-columns: repeat(3, 344px); gap: 24px; }
/* A card and its "Learn more" row, stacked; the row sits flush under the card. */
.service-item { display: grid; }
.service-card { position: relative; width: 344px; height: 413px; overflow: hidden; color: white; background: var(--ink); }
/* Aave-style glass badge (see glass.js). The label sits on top; the refract
   layer beneath it is the "highlighted copy" of the card the lens bends, and
   glass.js paints it and runs the SVG displacement/specular filter on it. */
.glass-pill {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
}
.glass-refract { position: absolute; inset: 0; background: var(--glass-fill, #363636); }
.glass-label {
  position: relative;
  color: #fff;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 18px;
  white-space: nowrap;
}
.card-copy {
  position: absolute;
  top: 78px;
  right: 24px;
  left: 24px;
  margin: 0;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 26px;
}
/* Anchored to the card’s bottom edge, so the hover growth opens upward into
   the gap under the copy. */
.card-media { position: absolute; left: 0; bottom: 0; width: 344px; height: calc(235px + var(--media-grow, 0px)); overflow: hidden; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, #747474, #d4d4d4 45%, #676767); }
.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-x, 50%) var(--img-y, 50%);
  transform: scale(var(--img-zoom, 1));
}
.service-link { position: relative; height: 49px; }
/* Colour lives on the row so the label and the arrow darken together on card
   hover — the arrow is a mask of the icon painted with currentColor. */
.service-link { color: var(--mid); }
.service-link span {
  position: absolute;
  top: 28px;
  left: 20px;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 21px;
}
.link-arrow {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("./files/icon/Arrow-Corner-Left%20Streamline%20Ultimate.svg") no-repeat center / 18px 18px;
  mask: url("./files/icon/Arrow-Corner-Left%20Streamline%20Ultimate.svg") no-repeat center / 18px 18px;
}
/* 60px under the "Learn more" line, which ends at 769. */
.more-title {
  position: absolute;
  top: 829px;
  left: 180px;
  margin: 0;
  color: #000;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
}

/* 48px under the heading's line box. Separators sit between rows only, with
   20px of air on each side of the rule. */
.service-rows { position: absolute; top: 908px; left: 180px; width: 1080px; }
.service-rows div {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.service-rows div + div { margin-top: 20px; padding-top: 20px; border-top: 1px solid #dcdcdc; }
.service-rows span:first-child { color: #000; }
.service-rows span:last-child { color: #5f5f5f; text-align: right; }
/* Shared by the services CTA and the footer newsletter. */
.gradient-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 12px 16px;
  border: 0;
  border-radius: 24px;
  /* Figma's 0/50/100% stops sit on a ramp stretched to twice the button's
     height, so 999999 lands exactly on the bottom edge and fefefe — a whole
     button-height further down — never renders. */
  background: linear-gradient(#727272 0%, #999999 100%, #fefefe 200%);
  color: var(--white);
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 21px;
  white-space: nowrap;
  cursor: pointer;
}

/* 60px under the last row's text, which ends at 1053. */
.center-button { position: absolute; top: 1113px; left: 50%; transform: translateX(-50%); }

/* Inner stroke, opaque at the top and fading out by the bottom. */
.gradient-button::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(#3f3f3f, rgba(63, 63, 63, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.location { position: absolute; top: 2742px; left: 0; width: 1440px; height: 492px; color: white; background: linear-gradient(#727272 0%, #bcbcbc 100%); }

.location-title {
  position: absolute;
  top: 60px;
  left: 180px;
  margin: 0;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 47px;
}

/* 60px under the title's line box, which ends at 107. */
.address-block { position: absolute; top: 167px; left: 180px; width: 227px; }

/* FEFEFE fading to nothing down the line box. The box's ascender space puts the
   opaque stop well above the digits themselves. */
.address-number {
  margin: 0;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 96px;
  font-weight: 300;
  line-height: 124px;
  background: linear-gradient(
    #fefefe var(--fill-opaque-at, 0%),
    rgba(254, 254, 254, 0) var(--fill-clear-by, 80%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* The negative margin closes the slack under the number's 124px line box. */
.address-street {
  margin: -33px 0 0;
  font-family: "Forevs Demo", "Times New Roman", Times, serif;
  font-size: 32px;
  white-space: nowrap;
  font-weight: 400;
  line-height: 41px;
  letter-spacing: .38em;
}

.address-codes, .address-place { display: flex; justify-content: space-between; gap: 16px; }

.address-codes {
  margin-top: 16px;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
}

.address-place {
  margin-top: 8px;
  font-family: "Forevs Demo", "Times New Roman", Times, serif;
  font-size: 20px;
  white-space: nowrap;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .1em;
}
/* Centred on the address block (spans 167 → 372) and right-aligned to the
   page’s 180px content margin. Anchoring by `right` keeps that edge true
   whatever the frames measure — their 8px stroke sits inside the 135px box. */
.photo-strip { position: absolute; top: 269.5px; right: 180px; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 135px); gap: 60px; }
.photo-strip div { width: 135px; height: 180px; border: 8px solid white; box-shadow: 0 8px 12px rgba(0,0,0,.2); }
/* Landscape photos in a portrait mat, so cover crops the sides. */
.photo-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }

.reviews { position: absolute; top: 3234px; left: 0; width: 1440px; height: 728px; background: var(--page); }
.reviews-eyebrow {
  position: absolute;
  top: 120px;
  left: 180px;
  margin: 0;
  color: #5f5f5f;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}
.reviews-eyebrow a { color: #5493f6; text-decoration: none; }

/* 12px under the eyebrow's 16px line box. The width is what breaks the line
   after "client". */
.reviews-title {
  position: absolute;
  top: 148px;
  left: 180px;
  width: 371px;
  margin: 0;
  color: #000;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 47px;
}
/* Drag carousel. The scroll viewport is the full canvas so cards bleed off both
   edges once dragged; the 180px padding is what holds the first and last card
   on the content margin at either end of the scroll. Scrollbar hidden — the
   grab cursor is the affordance. */
.review-track {
  position: absolute;
  top: 302px;
  right: 0;
  left: 0;
  display: flex;
  gap: 20px;
  padding-right: 180px;
  padding-left: 180px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* Opted out of the smooth scrolling above: the drag sets scrollLeft on every
     pointer move, and easing each one would make the cards lag the cursor. */
  scroll-behavior: auto;
  scrollbar-width: none;
  cursor: grab;
}
.review-track::-webkit-scrollbar { display: none; }
.review-track.is-dragging { cursor: grabbing; user-select: none; }
/* Decorative, and this stops them becoming native drag sources mid-swipe. */
.review-track img { pointer-events: none; }
.review-card { position: relative; flex: 0 0 351px; width: 351px; height: 306px; padding: 24px; background: white; }
/* Five 20px stars, 4px apart, from the card's 24px padding box. */
.stars { display: flex; gap: 4px; }
.stars img { display: block; }
.review-heading {
  margin: 24px 0 0;
  color: #000;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}
.review-copy {
  margin: 8px 0 0;
  color: #5f5f5f;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 18px;
}
.person { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; }
.person img { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.person-text { display: grid; gap: 4px; }
.person-name {
  color: #000;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 17px;
}
.person-role {
  color: #5f5f5f;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 16px;
}

.footer { position: absolute; top: 3962px; left: 0; width: 1440px; height: 574px; background: white; }
.footer-brand { position: absolute; top: 100px; left: 60px; width: 397px; }
.brand-mark { display: block; width: 60px; height: 60px; }
/* wordmark.svg is filled white for the nav, so the black footer copy is the
   same file used as a mask. */
.brand-word {
  width: 299px;
  height: 36px;
  margin-top: 24px;
  background: #000;
  -webkit-mask: url("./files/wordmark.svg") no-repeat center / 299px 36px;
  mask: url("./files/wordmark.svg") no-repeat center / 299px 36px;
}
.newsletter { width: 397px; height: 50px; margin-top: 40px; padding: 4px; border: 1px solid var(--line); border-radius: 28.5px; display: flex; align-items: center; justify-content: space-between; }
.newsletter input {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.newsletter input:focus { outline: none; }
.newsletter input::placeholder { color: var(--mid); }
/* Shorter than the services CTA to sit inside the 50px field's 4px padding. */
.newsletter .gradient-button { height: auto; padding-block: 10.5px; }
.ai-label {
  margin: 54px 0 0;
  color: var(--mid);
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.ai-buttons { display: flex; gap: 8px; margin-top: 16px; }
.ai-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ebebeb;
  /* Figma's two inner shadows: a soft white lip along the top, a hard dark one
     along the bottom — what gives the tiles their pressed-in look. */
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .5),
    inset 0 -2px 0 rgba(0, 0, 0, .1);
}
.ai-buttons img { display: block; }
/* Columns 4 and 5 of the same 6-column stretch grid the nav pill uses:
   (1440 - 5x20) / 6 = 223.33 wide, so column n starts at (n-1) x 243.33. */
.footer-column { position: absolute; top: 184px; display: grid; justify-items: start; gap: 12px; }
.footer-column b {
  margin-bottom: 4px;                       /* 12 + 4 = the 16px under the heading */
  color: var(--mid);
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}
.footer-column span,
.footer-column a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}
.footer-column a { text-decoration: none; }
.footer-column span img,
.footer-column a img { display: block; }
.services-column { left: 730px; }
.connect-column { left: 973.33px; }
.footer-rule { position: absolute; top: 500px; left: 60px; width: 1320px; height: 1px; background: #dcdcdc; }
.legal-left, .legal-right {
  position: absolute;
  top: 528px;
  margin: 0;
  color: var(--mid);
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.legal-right a { color: inherit; text-decoration: none; }
.legal-left { left: 60px; }
.legal-right { right: 60px; }


/* ---------------------------------------------------------------------------
   Phone and small tablet. One breakpoint (script.js shares it): the canvas
   stops zooming, every section drops its absolute geometry and stacks in
   flow, and widths become fluid. Type sizes and spacings step down once
   rather than by viewport, so the layout is the same on every phone.
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
  :root { --gutter: 20px; }

  html, body { min-height: 0; }
  .page { width: auto; height: auto; zoom: 1; }
  .page > section, .page > footer, .footer { position: static; width: auto; height: auto; }
  /* Tablets get the phone layout on a centred column rather than a stretched one. */
  .hero-copy, .rating, .services > *, .location > *, .reviews > *, .footer > * { max-width: 600px; margin-left: auto; margin-right: auto; }

  /* Nav: the wordmark and the button; the centre links come with the full site. */
  .site-nav { width: 100%; height: 100px; zoom: 1; }
  .nav-bar nav { display: none; }

  /* Hero */
  .hero { height: auto; padding-bottom: 60px; }
  .hero { --hero-h: min(78vh, 720px); --wm-w: calc(100vw - 16px - 24px); }
  .hero-media { position: relative; top: auto; left: auto; width: auto; height: var(--hero-h); margin: 8px 8px 0; }
  .hero-copy { position: absolute; top: calc(8px + var(--hero-h) / 2); left: var(--gutter); right: var(--gutter); width: auto; transform: translateY(-60%); }
  .hero-copy h1 { font-size: 36px; line-height: 44px; }
  .hero-copy p { width: auto; max-width: 314px; }
  /* 12px in from the media's edges and bottom; the height is the SVG's own
     167/1384 ratio, which is what lets the top be computed without a query. */
  .hero-wordmark { top: calc(8px + var(--hero-h) - 12px - var(--wm-w) * 0.1207); left: 20px; width: var(--wm-w); height: auto; }
  .rating { position: static; margin-top: 48px; }
  .rating-title { font-size: 56px; line-height: 72px; margin-bottom: -20px; }
  /* Same composition at half size: the wheels are a raster, so zoom is crisp. */
  .wheels { zoom: .5; }
  .rating-caption { font-size: 16px; line-height: 21px; }

  /* Services */
  .services { padding: 60px var(--gutter) 60px; }
  .services-panel { position: relative; top: auto; left: auto; width: auto; height: auto; padding: 40px 24px 100px; }
  .services-panel h2 { position: static; font-size: 28px; line-height: 36px; }
  .service-grid { position: static; grid-template-columns: 1fr; gap: 24px; margin-top: -60px; }
  .service-card { width: auto; }
  .card-media { width: 100%; }
  .more-title { position: static; margin-top: 60px; }
  .service-rows { position: static; width: auto; margin-top: 32px; }
  .service-rows div { flex-direction: column; gap: 4px; }
  .service-rows span:last-child { text-align: left; }
  .center-button { position: static; display: flex; width: max-content; margin-top: 40px; transform: none; }

  /* Location */
  .location { padding: 60px var(--gutter); }
  .location-title { position: static; font-size: 28px; line-height: 36px; }
  /* Left on the content edge like the title, not centred on its own width. */
  .address-block { position: static; margin-top: 32px; margin-right: 0; margin-left: max(0px, (100% - 600px) / 2); }
  /* minmax(0, …) and min-width: 0 — Safari otherwise sizes the tracks from the
     photos' intrinsic width and runs the row off the page. */
  .photo-strip { position: static; margin-top: 40px; transform: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .photo-strip div { width: auto; min-width: 0; height: auto; aspect-ratio: 135 / 180; }

  /* Reviews */
  .reviews { padding: 60px 0; }
  .reviews-eyebrow, .reviews-title { position: static; padding: 0 var(--gutter); }
  .reviews-title { width: auto; margin-top: 12px; font-size: 28px; line-height: 36px; }
  /* Tablets centre the copy but the track still runs edge to edge; its padding
     lines the first card up with that column. */
  .reviews > .review-track { max-width: none; }
  .review-track { position: static; margin-top: 32px; padding-left: max(var(--gutter), (100% - 600px) / 2); padding-right: max(var(--gutter), (100% - 600px) / 2); }
  .review-card { flex-basis: min(351px, 100vw - 2 * var(--gutter)); width: auto; }

  /* Footer */
  .footer { padding: 60px var(--gutter) 40px; }
  .footer-brand { position: static; width: auto; }
  .newsletter { width: auto; max-width: 397px; }
  .footer-column { position: static; }
  .services-column { margin-top: 48px; }
  .connect-column { margin-top: 32px; }
  .footer-rule { position: static; width: auto; margin-top: 48px; }
  .legal-left, .legal-right { position: static; margin-top: 16px; }
  .legal-right { margin-top: 4px; }
}