/* ============ Grimm Construction Engineering: website concept ============
   One page. Black and gold, the gold sampled from the supplied logo.
   Type: Oxanium for display (its chamfered corners echo the GRIMM lettering),
   Barlow for reading.
   The scroll stage (the city goes from golden hour to night while the hero shrinks
   into the centre tile and the six tiles arrive) is driven by js/app.js and only
   switches on under html.motion. Without JS, or with reduced motion, the same markup
   is a normal hero followed by a grid. */

@font-face {
  font-family: "Oxanium";
  src: url("../assets/fonts/oxanium-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --black: #000;
  --panel: #12110f;
  --line: #2c2921;
  --gold: #c5a367;       /* logo gold */
  --gold-hi: #e2c489;    /* highlights, hover */
  --gold-deep: #8f7443;
  --mist: #b4aea2;
  --white: #f4f1ea;

  --display: "Oxanium", "Eurostile", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --m: 3vw;              /* page margin */
  --g: 1.3vw;            /* gap between tiles */
  --nav-h: 108px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color-scheme: dark; scroll-behavior: smooth; }
html.motion { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--m), 1280px); margin-inline: auto; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 99; padding: 10px 14px; background: var(--gold); color: #000; }
.skip:focus { top: 12px; }

h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .005em;
  text-wrap: balance;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--display); font-size: 15.5px; font-weight: 700; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  /* the chamfered corner of the GRIMM lettering */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background-color .2s, color .2s;
}
.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover { background: var(--gold-hi); }
.btn-line { clip-path: none; background: rgba(0, 0, 0, .55); color: var(--white); border-color: rgba(244, 241, 234, .5); }
.btn-line:hover { background: rgba(244, 241, 234, .14); }
.btn:focus-visible { clip-path: none; }

/* ---------- top bar ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--nav-h); padding: 0 var(--m);
  transition: background-color .3s, height .3s;
}
.nav::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line); opacity: 0; transition: opacity .3s;
}
.nav-solid .nav { background: rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); height: 72px; }
.nav-solid .nav::after { opacity: 1; }
/* while the menu is open the bar is just the logo and the button, floating over the panel */
.menu-open .nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-open .nav::after { opacity: 0; }
.nav-logo { flex: none; display: block; }
.logo-full { width: clamp(150px, 14.5vw, 212px); height: auto; }
.logo-word { display: none; width: 148px; height: auto; }
.nav-solid .logo-full { display: none; }
.nav-solid .logo-word { display: block; }
.nav-actions { display: flex; align-items: center; gap: 24px; }
.nav-phone {
  padding: 8px 0;
  font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: .06em;
  text-decoration: none; color: var(--gold-hi);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}
.nav-phone:hover { color: #fff; }
.menu-open .nav-phone { visibility: hidden; }

/* ---------- menu button ---------- */
.menu-btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 20px; cursor: pointer;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(226, 196, 137, .55); border-radius: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--display); font-size: 15.5px; font-weight: 700; letter-spacing: .08em; line-height: 1; color: var(--white);
  transition: border-color .25s, background-color .25s;
}
.menu-btn:hover, .menu-btn:focus-visible { border-color: var(--gold-hi); }
.menu-open .menu-btn { background: transparent; border-color: var(--gold-hi); }
.menu-btn i { position: relative; display: block; width: 24px; height: 12px; }
.menu-btn i::before, .menu-btn i::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--gold-hi); transition: transform .35s var(--ease);
}
.menu-btn i::before { top: 1px; }
.menu-btn i::after { bottom: 1px; }
.menu-open .menu-btn i::before { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn i::after { transform: translateY(-4px) rotate(-45deg); }

/* ---------- menu panel ---------- */
.menu-shade {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.menu-open .menu-shade { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 65;
  width: min(640px, 100%);
  padding: clamp(110px, 16vh, 160px) clamp(24px, 5vw, 72px) 40px;
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(130% 62% at 100% 0%, rgba(226, 196, 137, .5) 0%, rgba(197, 163, 103, .3) 24%, rgba(143, 116, 67, .1) 54%, transparent 74%),
    #050403;
  border-left: 1px solid var(--gold-deep);
  transform: translateX(102%); visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s linear .55s;
}
.menu-open .menu-panel { transform: none; visibility: visible; transition-delay: 0s; }
html.menu-open { overflow: hidden; }

.menu-main li { opacity: 0; transform: translateY(20px); transition: opacity .3s ease, transform .3s ease; }
.menu-open .menu-main li {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .6s var(--ease);
  transition-delay: calc(.14s + var(--i, 0) * .05s);
}
.menu-main li:nth-child(2) { --i: 1; }
.menu-main li:nth-child(3) { --i: 2; }
.menu-main li:nth-child(4) { --i: 3; }
.menu-main li:nth-child(5) { --i: 4; }
.menu-main a { display: block; padding: 2px 0; color: var(--white); text-decoration: none; }
.menu-word {
  display: inline-block;
  font-family: var(--display); font-size: clamp(34px, min(7.4vh, 10.5vw), 74px); font-weight: 700; line-height: 1.12;
  transition: color .2s, transform .4s var(--ease);
}
.menu-main a:hover .menu-word, .menu-main a:focus-visible .menu-word { color: var(--gold-hi); transform: translateX(12px); }

.menu-more {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px;
  margin-top: clamp(26px, 5vh, 52px); padding-top: clamp(22px, 3.5vh, 36px);
  border-top: 1px solid rgba(226, 196, 137, .3);
  opacity: 0; transition: opacity .3s ease;
}
.menu-open .menu-more { opacity: 1; transition: opacity .6s ease .45s; }
.menu-head { margin-bottom: 12px; font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: .12em; color: var(--gold); }
.menu-more a:not(.btn) { display: block; padding: 5px 0; font-size: 18px; font-weight: 500; color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.menu-more a:not(.btn):hover, .menu-more a:not(.btn):focus-visible { color: var(--gold-hi); }

/* ---------- stage: static layout first (no JS / reduced motion) ---------- */
.stage { position: relative; }
.stage-pin { position: relative; }
.hero-frame { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #0a0806; }
.hero-day, .hero-night, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-night { opacity: 0; }
.hero-video { opacity: 0; }
.hero-video.on { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .35) 18%, transparent 34%),
    linear-gradient(to top, rgba(0, 0, 0, .94), rgba(0, 0, 0, .5) 36%, transparent 62%);
}
.hero-copy {
  position: absolute; z-index: 3; left: var(--m); right: var(--m); top: 0;
  height: 100vh; height: 100svh; min-height: 520px;
  display: grid; grid-template-columns: 1fr auto; align-content: end; align-items: end; gap: clamp(12px, 1.6vw, 24px) 40px;
  padding-bottom: clamp(34px, 6.5vh, 68px);
  pointer-events: none;
}
.motion .hero-copy { padding-bottom: clamp(84px, 11vh, 104px);   /* clears the scroll hint */
}
.hero-copy > * { pointer-events: auto; }
.hero-copy h1 {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: clamp(44px, 7.6vw, 124px);
  font-weight: 700;
  line-height: .95; letter-spacing: -.005em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.hero-sub {
  max-width: 24em;
  font-size: clamp(19px, 2vw, 30px);
  font-weight: 400; line-height: 1.25; color: var(--white);
}
.hero-side { max-width: 400px; }
.hero-side p { font-size: 16.5px; color: #ddd8cd; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.scroll-hint { display: none; }

.mosaic {
  display: grid;
  grid-template-columns: 26fr 19.6fr 19.6fr 26fr;
  grid-template-rows: 45fr 10fr 5fr 40fr;
  height: min(88vh, 760px);
  margin: calc(var(--g) / 2) calc(var(--m) - var(--g) / 2);
}
.tile {
  position: relative; display: block; overflow: hidden;
  margin: calc(var(--g) / 2);
  background: var(--panel); color: #fff; text-decoration: none;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile::before {   /* caption backdrop */
  content: ""; position: absolute; inset: 35% 0 0 0; z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .45) 45%, transparent);
}
.tile::after {    /* a gold rule draws in under the tile */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px;
  background: var(--gold-hi);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
.tile:hover::after, .tile:focus-visible::after { transform: scaleX(1); }
.tile:focus-visible { outline-offset: -4px; }
.tile-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(12px, 1.3vw, 20px); display: grid; gap: 3px; }
.tile-cap strong { font-family: var(--display); font-size: clamp(17px, 1.6vw, 25px); font-weight: 700; line-height: 1.1; letter-spacing: .01em; color: var(--gold-hi); }
.tile-cap em { font-style: normal; font-size: clamp(13.5px, 1.02vw, 15.5px); line-height: 1.3; color: #e4dfd4; }

.tile-a { grid-area: 1 / 1 / 2 / 2; }
.tile-b { grid-area: 2 / 1 / 5 / 2; }
.tile-center { grid-area: 1 / 2 / 4 / 4; }
.tile-e { grid-area: 4 / 2 / 5 / 3; }
.tile-f { grid-area: 4 / 3 / 5 / 4; }
.tile-c { grid-area: 1 / 4 / 3 / 5; }
.tile-d { grid-area: 3 / 4 / 5 / 5; }

/* ---------- stage: scroll-driven (html.motion, set before first paint) ---------- */
.motion .stage { height: 340vh; }
.motion .stage-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.motion .hero-frame {
  position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; min-height: 0;
  will-change: transform, width, height;
}
.motion .hero-copy { height: 100%; min-height: 0; will-change: transform, opacity; }
.motion .mosaic {
  position: absolute; z-index: 2;
  inset: max(var(--nav-h), 11.5svh) calc(var(--m) - var(--g) / 2) max(14px, 2.4svh);
  height: auto; margin: 0;
  pointer-events: none;
}
.motion .tile { pointer-events: auto; }
/* parked off screen by app.js; they stay focusable, and focusing one jumps to the finished grid */
.motion .tile[data-from] { opacity: 0; will-change: transform; }
.motion .tile-center { background: transparent; pointer-events: none; }
.motion .tile-center img { display: none; }          /* the hero frame lands here */
.motion .tile-center .tile-cap, .motion .tile-center::before { opacity: var(--cap, 0); }
.motion .tile-center.landed { pointer-events: auto; }
.motion .scroll-hint {
  display: block; position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #ddd8cd;
}
.motion .scroll-hint::after {
  content: ""; display: block; width: 1px; height: 26px; margin: 6px auto 0; background: var(--gold-hi);
  animation: hint 1.8s ease-in-out infinite; transform-origin: top;
}
@keyframes hint { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* one load moment: the headline rises once */
.motion .hero-copy h1, .motion .hero-sub, .motion .hero-side { animation: rise 1s var(--ease) both; }
.motion .hero-sub { animation-delay: .12s; }
.motion .hero-side { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- statement ---------- */
.statement { padding: clamp(90px, 15vw, 210px) 0 clamp(70px, 10vw, 140px); }
.statement p {
  max-width: 20em;
  font-family: var(--display);
  font-size: clamp(27px, 4vw, 60px);
  font-weight: 600;
  line-height: 1.12;
}
.statement .w { transition: opacity .25s linear; }

/* ---------- drawing to building ---------- */
.proof { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding-bottom: clamp(80px, 12vw, 170px); }
.wipe { --x: 38%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); cursor: ew-resize; touch-action: pan-y; }
.wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.wipe-top { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.wipe-handle {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px;
  background: var(--gold-hi); box-shadow: 0 0 22px 3px rgba(226, 196, 137, .55);
  pointer-events: none;
}
.wipe-handle::after {   /* grip */
  content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #000; border: 2px solid var(--gold-hi);
}
.wipe-tag {
  position: absolute; bottom: 14px; padding: 6px 12px;
  background: rgba(0, 0, 0, .78);
  font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: .1em; color: var(--gold-hi);
  pointer-events: none;
}
.wipe-tag-l { left: 14px; }
.wipe-tag-r { right: 14px; }
/* keyboard only: pointers go to the panel itself, so a finger can still scroll the page past it */
.wipe-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.wipe:focus-within { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.wipe-wrap { min-width: 0; }
.wipe-note { margin-top: 12px; font-size: 15px; color: var(--mist); }
.wipe-note .for-touch { display: none; }
@media (hover: none) { .wipe-note .for-hover { display: none; } .wipe-note .for-touch { display: inline; } }
.proof-text p { margin-top: 20px; max-width: 30em; color: #ddd8cd; }
.facts { margin-top: 30px; border-top: 1px solid var(--line); }
.facts li { padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; }

/* ---------- process: a real sequence, so it is numbered ---------- */
.process { padding-bottom: clamp(80px, 12vw, 170px); }
.section-head { margin-bottom: clamp(22px, 3vw, 40px); }
.steps { border-top: 1px solid var(--gold-deep); }
.steps li {
  display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; gap: 10px 32px;
  padding: clamp(20px, 2.6vw, 38px) 0;
  border-bottom: 1px solid var(--line);
}
.step-n { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--gold); }
.steps h3 { font-family: var(--display); font-size: clamp(30px, 4.4vw, 64px); font-weight: 700; line-height: 1; }
.steps p { max-width: 32em; color: #ddd8cd; }

/* ---------- showcase band ---------- */
.band { position: relative; }
.band-pin { position: relative; display: flex; align-items: center; min-height: min(82vh, 760px); overflow: hidden; }
.band-art { position: absolute; inset: 0 0 0 auto; width: 72%; }
.band-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-pin::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, #000 30%, rgba(0, 0, 0, .8) 46%, transparent 76%); }
/* static: one finished picture is all that's needed */
.band-before, .band-strip ~ .band-strip, .band-edge { display: none; }

/* scroll-driven: the section pins, the bare shell shows, and four strips of the finished room wipe in */
.motion .band { height: 260vh; }
.motion .band-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.motion .band-before, .motion .band-strip ~ .band-strip { display: block; }
.motion .band-strip { clip-path: inset(100% 0 0 0); will-change: clip-path; }   /* app.js opens each strip */
.motion .band-edge {
  display: block; position: absolute; width: 25%; height: 2px; margin-top: -1px; opacity: 0;
  background: var(--gold-hi); box-shadow: 0 0 20px 3px rgba(226, 196, 137, .65);
}
.band-text { position: relative; z-index: 2; padding-block: 80px; }
.band-text p { margin: 20px 0 28px; max-width: 26em; color: #ddd8cd; }

/* ---------- quote ---------- */
.quote { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); padding-block: clamp(80px, 11vw, 150px) clamp(90px, 12vw, 170px); }
.quote-text p { margin-top: 20px; max-width: 28em; color: #ddd8cd; }
.contact { margin-top: 30px; border-top: 1px solid var(--line); }
.contact div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact dt { color: var(--mist); font-size: 15.5px; }
.contact dd { font-weight: 600; overflow-wrap: anywhere; }
.contact a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
.contact a:hover { color: var(--gold-hi); }
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.quote-form label { display: grid; gap: 7px; font-size: 15px; font-weight: 600; }
.quote-form .full { grid-column: 1 / -1; }
.quote-form input, .quote-form textarea {
  width: 100%; padding: 13px 14px;
  background: #0b0a09; border: 1px solid #45402f; border-radius: 0;
  font-size: 17px; font-weight: 400;
}
.quote-form textarea { resize: vertical; }
.quote-form ::placeholder { color: #8c867a; }
.quote-form input:focus-visible, .quote-form textarea:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 0; border-color: transparent; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-status { font-size: 15.5px; color: var(--mist); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 48px 0 40px; }
.footer-in { display: grid; grid-template-columns: auto 1fr; gap: 24px 64px; align-items: center; }
.footer-in > img { width: 220px; height: auto; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.footer nav a { font-size: 16px; color: #ddd8cd; text-decoration: none; }
.footer nav a:hover { color: var(--gold-hi); }
.footer-note { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--mist); }

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: 80; left: 50%; bottom: 26px;
  max-width: calc(100% - 32px); padding: 12px 18px;
  background: var(--white); color: #000; border-left: 4px solid var(--gold-deep);
  font-size: 15.5px; font-weight: 600;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), opacity .25s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  :root { --m: 18px; --g: 10px; --nav-h: 84px; }
  body { font-size: 17px; }
  .nav { gap: 12px; }
  .logo-full { width: 150px; }
  .logo-word { width: 124px; }
  .nav-actions { gap: 14px; }
  .menu-btn { height: 44px; padding: 0 16px; gap: 10px; font-size: 14.5px; }
  .menu-btn i { width: 20px; }
  .menu-panel { border-left: 0; }
  .menu-more { grid-template-columns: 1fr; }

  .hero-copy { grid-template-columns: 1fr; row-gap: 10px; padding-bottom: 88px; }
  .hero-side { margin-top: 8px; max-width: none; }
  .hero-side p { max-width: 30em; }

  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 30fr 23fr 23fr 23fr; height: 178vw; }
  .tile-center { grid-area: 1 / 1 / 2 / 3; }
  .tile-a { grid-area: 2 / 1 / 3 / 2; }
  .tile-c { grid-area: 2 / 2 / 3 / 3; }
  .tile-b { grid-area: 3 / 1 / 4 / 2; }
  .tile-d { grid-area: 3 / 2 / 4 / 3; }
  .tile-e { grid-area: 4 / 1 / 5 / 2; }
  .tile-f { grid-area: 4 / 2 / 5 / 3; }
  .tile-cap em { display: none; }
  .tile-center .tile-cap em { display: block; }
  .motion .stage { height: 300vh; }
  .motion .mosaic { inset: var(--nav-h) calc(var(--m) - var(--g) / 2) 10px; height: auto; }

  .proof, .quote { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 36px 1fr; }
  .steps p { grid-column: 2; }
  .band-pin { align-items: flex-end; min-height: 620px; }
  .band-art { width: 100%; height: 62%; inset: 0 0 auto 0; }
  .band-pin::before { background: linear-gradient(to top, #000 40%, transparent 72%); }
  .band-text { padding-block: 40px 56px; }
  .quote-form { grid-template-columns: 1fr; }
  .footer-in { grid-template-columns: 1fr; }
}

@media (max-width: 560px) { .nav-phone { display: none; } }   /* the number is in the menu */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}