:root {
  --orange: #FC5003;
  --ink: #141414;
  --white: #FFFFFF;
  --neutral: #F8F7F6;
  --stone: #E4E1DF;
  --body-light: #54504D;
  --body-dark: #DDDDDD;
  --line: #D6D6D6;
  --display: 'Montserrat', sans-serif;
  --text: 'Inter', sans-serif;
  --h1: clamp(2.5rem, 4vw, 4rem);
  --h2: clamp(2.1rem, 3.2vw, 3.25rem);
  --h3: 1.35rem;
  --body: 1rem;
  --small: .875rem;
  --label: .8125rem;
  --space-band: clamp(5rem, 8vw, 8rem);
  --space-tight: 2.5rem;
  --gap-head: 1.5rem;
  --ease: cubic-bezier(.22, .7, .25, 1);
  --elastic: cubic-bezier(.34, 1.25, .5, 1);
  --sticky-height: calc(3.25rem + 1rem + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.75rem; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--text); font-size: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button, summary { cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; }
a, button { min-height: 2.75rem; }
button { border-radius: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.045em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -.035em; line-height: 1.3; }
p { color: var(--body-light); font-size: var(--body); }
p + p { margin-top: 1.1rem; }
h1 + p, h2 + p, h3 + p { margin-top: var(--gap-head); }
a, button, input, select, textarea, summary, [tabindex] { outline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { width: min(82rem, calc(100% - 5rem)); margin-inline: auto; }
.section { padding-block: var(--space-band); }
.small-label { font-size: var(--label); font-weight: 500; margin-bottom: var(--gap-head); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3.5rem; padding: 1.1rem 1.4rem; border: 1px solid transparent; border-radius: 0; background: var(--orange); color: var(--white); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-align: center; text-transform: uppercase; text-decoration: none; transition: box-shadow 200ms, transform 200ms; }
.button:hover, .button:focus-visible { box-shadow: 0 .5rem 1.25rem rgba(20,20,20,.18); transform: translateY(-2px); }
.button img, .text-link img, .start-button img { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; object-fit: contain; transition: transform 200ms; }
.button:hover img, .button:focus-visible img, .text-link:hover img, .text-link:focus-visible img, .start-button:hover img, .start-button:focus-visible img { transform: translateX(4px); }
.icon-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 3rem; width: 3rem; height: 3rem; }
.icon-box img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.text-link { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding-block: .5rem; font-size: var(--small); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.skip-link { position: fixed; top: -8rem; left: 1rem; z-index: 100; display: flex; align-items: center; background: var(--white); padding: 1rem; }
.skip-link:focus { top: 1rem; }

/* Content remains visible until the script opts into motion. */
.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 700ms var(--elastic), transform 700ms var(--elastic); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: translateY(0); }
.js [data-hero-reveal] { transition-delay: var(--hero-delay, 0ms); }

/* Shared header and dialog. */
.header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--stone); }
.header-inner { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.5rem); height: 5.75rem; }
.brand { display: flex; align-items: center; width: clamp(6.5rem, 12vw, 12rem); flex: 0 0 auto; }
.brand img { width: 100%; }
.desktop-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.desktop-nav a { display: inline-flex; align-items: center; position: relative; white-space: nowrap; font-size: var(--label); font-weight: 500; text-decoration: none; }
.desktop-nav a::after { content: ''; position: absolute; bottom: .35rem; left: 0; width: 0; height: 2px; background: var(--ink); transition: width 200ms; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { width: 100%; }
.header-phone { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; margin-left: auto; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.header-phone span { color: var(--body-light); font-size: var(--label); }
.header-phone strong { font-size: var(--small); font-weight: 600; }
.header-quote { flex: 0 0 auto; min-height: 3.1rem; padding: .9rem 1rem; gap: .75rem; white-space: nowrap; }
.menu-open, .menu-close { flex: 0 0 auto; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 0; background: transparent; padding: .5rem; }
.menu-open { display: none; }
.menu-close { display: flex; }
.menu-open img, .menu-close img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.mobile-menu { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 1.5rem; border: 0; background: var(--white); transform: translateX(100%); transition: transform 400ms var(--ease); }
.mobile-menu[open] { display: flex; flex-direction: column; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu::backdrop { background: #14141466; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menu-head > img { width: 12rem; }
.mobile-menu nav { display: flex; flex-direction: column; margin-top: 3rem; }
.mobile-menu nav a { display: flex; align-items: center; min-height: 2.75rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: var(--h3); letter-spacing: -.035em; text-decoration: none; }
.mobile-menu nav a:hover { text-decoration: underline; }
.menu-bottom { margin-top: auto; padding-block: 2rem; }
.menu-bottom .button { width: 100%; }
.menu-phone { display: flex; align-items: center; margin-top: 1.5rem; font-size: 1.4rem; text-decoration: none; }
.menu-bottom p { margin-top: .35rem; font-size: var(--small); }

/* The doorstep photo carries the copy and job ticket. */
.hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 46rem; padding-block: var(--space-band); overflow: hidden; background: var(--ink); color: var(--white); isolation: isolate; }
.hero-image, .hero-shade, .care-image, .care-shade, .area-image, .area-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image, .care-image, .area-image { object-fit: cover; z-index: -2; }
.hero-shade, .care-shade, .area-shade { z-index: -1; pointer-events: none; }
.hero-image { object-position: 72% center; }
.js .hero-image { scale: 1.06; transition: scale 1.6s ease-out; }
.js.is-loaded .hero-image { scale: 1; }
.hero-shade { background: linear-gradient(90deg, rgba(10,13,11,.83) 0%, rgba(10,13,11,.59) 31%, rgba(10,13,11,.13) 66%, rgba(10,13,11,0) 100%), linear-gradient(0deg, rgba(10,13,11,.3), transparent 40%); }
.hero-content { padding-bottom: var(--space-tight); }
.hero-copy-column { width: min(100%, 36rem); }
.hero-location { margin-bottom: var(--gap-head); color: var(--white); font-size: var(--label); font-weight: 500; }
.hero h1 { max-width: 16ch; }
.hero-copy { color: var(--body-dark); }
.ticket { position: relative; display: grid; grid-template-columns: 1.25fr 1fr 1fr .95fr; align-items: stretch; min-height: 7.2rem; border-left: 6px solid transparent; background: var(--white); color: var(--ink); box-shadow: 0 1rem 3rem rgba(0,0,0,.18); }
.ticket::before { content: ''; position: absolute; top: 0; bottom: 0; left: -6px; width: 6px; background: var(--orange); transform-origin: top; }
.js .ticket::before { transform: scaleY(0); transition: transform 350ms var(--elastic); transition-delay: calc(700ms + var(--hero-delay, 0ms)); }
.js .ticket.is-in::before { transform: scaleY(1); }
.ticket-intro { display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: 1.4rem 1.5rem; }
.ticket-intro span { color: var(--body-light); font-size: var(--small); }
.ticket-intro strong { font-size: var(--body); font-weight: 600; letter-spacing: -.025em; }
.ticket label { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 1rem 1.5rem; border-left: 1px solid var(--stone); font-size: var(--label); font-weight: 500; }
.ticket select { width: 100%; min-width: 0; min-height: 2.75rem; padding: .4rem 0; border: 0; border-radius: 0; background: var(--white); color: var(--ink); font-size: var(--body); }
.ticket-action { display: flex; align-items: center; padding: 1.2rem; border-left: 1px solid var(--stone); }
.start-button { display: flex; align-items: center; justify-content: space-between; gap: .65rem; width: 100%; min-height: 3.5rem; padding: 1rem; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: .04em; transition: box-shadow 200ms, transform 200ms; }
.start-button:hover, .start-button:focus-visible { box-shadow: 0 .5rem 1.25rem rgba(20,20,20,.18); transform: translateY(-2px); }

/* Four facts share one photographic frame and its ink foot. */
.proof { background: var(--white); }
.proof-frame { position: relative; height: clamp(24rem, 36vw, 32rem); isolation: isolate; overflow: hidden; background: var(--ink); }
.proof-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
.proof-frame::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(0deg, var(--ink) 0%, rgba(20,20,20,.92) 55%, transparent 100%); z-index: -1; }
.proof-ledger { position: absolute; inset: auto 2.5rem 2.25rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 0; margin: 0; list-style: none; color: var(--white); }
.proof-ledger > li { min-width: 0; }
.proof-copy { min-width: 0; margin-top: .75rem; }
.proof-title { display: block; color: var(--white); font-family: var(--display); font-size: var(--h3); font-weight: 600; line-height: 1.3; letter-spacing: -.035em; text-wrap: balance; }
.proof-copy p { margin-top: var(--gap-head); color: var(--body-dark); }
.js .proof-ledger > li.is-in .icon-box img { animation: proof-icon-settle 450ms var(--elastic) both; animation-delay: calc(700ms + var(--i, 0) * 90ms); }
@keyframes proof-icon-settle { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }

/* Three service chapters share a full-bleed frame, with copy on the page rail. */
.services { background: var(--ink); padding-block: 0; }
.services-stage { position: relative; min-height: 0; }
.services-frame { position: sticky; top: 5.75rem; height: calc(100vh - 5.75rem); min-height: 56rem; width: 100%; overflow: hidden; isolation: isolate; background: var(--ink); }
.services-photos { position: absolute; inset: 0; z-index: -2; }
.services-photos .services-image { position: absolute; inset: 0; width: 100%; height: 136%; top: -18%; object-fit: cover; object-position: center; opacity: 0; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); transition: opacity 700ms ease, transform 900ms var(--ease); }
.services-photos .services-image.is-active { opacity: 1; transform: translate3d(0, var(--py, 0px), 0) scale(1); }
.services-frame::after { content: ''; position: absolute; inset: 45% 0 0; z-index: -1; background: linear-gradient(0deg, var(--ink) 0%, rgba(20,20,20,.96) 62%, transparent 100%); pointer-events: none; }
.services-inner { position: relative; height: 100%; }
.services-head { position: absolute; top: 3rem; left: 0; width: min(100%, 40rem); padding: 2.5rem 6rem 4rem 2.5rem; background: linear-gradient(105deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.93) 55%, rgba(255,255,255,0) 100%), linear-gradient(0deg, transparent, rgba(255,255,255,.96) 15%); mask-image: linear-gradient(0deg, transparent, #000 15%); }
.services-head h2 { max-width: 18ch; }
.service-ledger { position: absolute; left: 0; right: 0; bottom: 2.5rem; margin: 0; padding: 0; list-style: none; }
.services-head, .service-ledger { transform: translate3d(0, var(--dy, 0px), 0); will-change: transform; }
.ledger { position: relative; display: grid; grid-template-columns: 12rem minmax(0, 1fr) max-content; align-items: center; gap: 1.5rem; min-height: 5.5rem; padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.22); color: var(--white); opacity: .55; transition: opacity 400ms ease; }
.ledger.is-active { opacity: 1; }
.js .ledger[data-reveal].is-in { opacity: .55; transition: opacity 400ms ease, transform 700ms var(--elastic); transition-delay: 0s; }
.js .ledger[data-reveal].is-in.is-active { opacity: 1; }
.ledger::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--elastic); }
.ledger:hover::after, .ledger:focus-within::after, .ledger.is-active::after { transform: scaleX(1); }
.service-title { display: flex; align-items: center; gap: .5rem; }
.service-index { flex: 0 0 auto; color: #DDDDDD; font-size: var(--label); }
.service-name { color: var(--white); font-family: var(--display); font-size: var(--h3); font-weight: 600; letter-spacing: -.035em; }
.ledger p { color: var(--body-dark); }
.services-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.18); }
.services-progress span { display: block; height: 100%; width: var(--progress, 0%); background: var(--orange); }

@media (min-width: 900px) {
  .services-stage { min-height: 260vh; }
}
@media (width < 900px) {
  .services-stage { min-height: 0; }
  .services-frame { position: static; height: auto; min-height: 0; }
  .services-photos { height: 18rem; overflow: hidden; }
  .services-photos .services-image { height: 100%; top: 0; object-position: 56% center; }
  .services-photos .services-image, .services-photos .services-image.is-active, .services-head, .service-ledger { transform: none; will-change: auto; }
  .services-frame::after { display: none; }
  .services-inner { height: auto; width: 100%; }
  .services-head { position: relative; top: auto; left: auto; width: 100%; min-height: 18rem; padding: 1.25rem 1.25rem 4rem; background: linear-gradient(105deg, rgba(255,255,255,.97), rgba(255,255,255,.88) 62%, rgba(255,255,255,.48)), linear-gradient(0deg, transparent, rgba(255,255,255,.96) 15%); }
  .service-ledger { position: static; padding: 0 1.25rem .5rem; background: var(--ink); }
  .services .ledger { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 1.75rem; }
  .services .ledger, .js .services .ledger[data-reveal].is-in { opacity: 1; }
  .ledger p { margin-top: var(--gap-head); }
  .services .ledger .text-link { grid-column: auto; justify-content: space-between; margin-top: 1rem; }
  .services-progress { display: none; }
}
/* The phone photo leads into its heading and compact rows on ink. */
@media (max-width: 640px) {
  .services-photos { height: 22rem; }
  .services-frame::after { display: block; inset: 15rem 0 auto; height: 7rem; background: linear-gradient(0deg, var(--ink) 0%, transparent 100%); }
  .services-head { margin: 22rem 0 0; min-height: 0; padding: 1rem 1.25rem 0; background: none; -webkit-mask-image: none; mask-image: none; }
  .services-head h2 { color: var(--white); max-width: 14ch; }
  .services-head p { color: var(--body-dark); margin-top: .75rem; }
  .service-ledger { margin: 1.25rem 0 0; padding: 0 1.25rem 1.25rem; }
  .services .ledger { gap: .25rem; padding-block: 1.1rem; min-height: 0; }
  .ledger p { margin-top: .35rem; font-size: .95rem; line-height: 1.55; }
  .services .ledger .text-link { margin-top: .35rem; min-height: 2.75rem; }
  .service-title { gap: .35rem; }
  .service-title .icon-box { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; margin-left: -.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .services-photos .services-image, .services-photos .services-image.is-active, .services-head, .service-ledger { transform: none; will-change: auto; transition: none; }
  .ledger::after { transform: none; width: 0; }
  .ledger:hover::after, .ledger:focus-within::after, .ledger.is-active::after { transform: none; width: 100%; }
}

/* A photo and household scope list sit on the stone surface. */
.who { background: var(--stone); }
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; }
.who-photo { position: relative; min-height: 34rem; overflow: hidden; background: var(--ink); }
.who-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.who-photo figcaption { position: absolute; inset: auto 0 0; padding: 3rem 1.5rem 1.5rem; background: linear-gradient(0deg, rgba(20,20,20,.95), rgba(20,20,20,.7) 55%, transparent); color: var(--white); font-size: var(--label); }
.who-copy { min-width: 0; background: var(--white); padding: 3rem; position: relative; z-index: 1; }
.who-copy h2 { position: relative; max-width: 16ch; padding-top: 1.5rem; }
.who-copy h2::before { content: ''; position: absolute; top: 0; left: 0; width: 3rem; height: 3px; background: var(--orange); }
.who-list { margin: var(--space-tight) 0; padding: 0; list-style: none; border-top: 1px solid rgba(84,80,77,.22); }
.who-list li { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding-block: .25rem; border-bottom: 1px solid rgba(84,80,77,.22); color: var(--body-light); }
.who-list li > span:last-child { min-width: 0; }
.storage-aside { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: .75rem; padding: 1.5rem; background: var(--ink); color: var(--white); }
.storage-aside > .icon-box { grid-column: 1; grid-row: 1 / span 3; }
.storage-aside h3, .storage-aside p, .storage-aside .text-link { grid-column: 2; }
.storage-aside h3 { padding-top: .45rem; }
.storage-aside p { color: var(--body-dark); }
.storage-aside .text-link { justify-self: start; margin-top: 1rem; color: var(--white); }

/* Pack, store and return share the blanket photograph. */
.care { position: relative; min-height: 38rem; isolation: isolate; background: var(--ink); color: var(--white); }
.care-image { object-position: center; }
.care-shade { background: linear-gradient(90deg, #14141403 0%, #14141415 35%, #141414e8 59%, #141414f5 100%); }
.care-inner { display: flex; align-items: center; justify-content: flex-end; }
.care-copy { width: 52%; }
.care h2, .sheet-intro h2 { max-width: 22ch; }
.care p { color: var(--body-dark); }
.stages { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: var(--space-tight) 0; border-bottom: 1px solid rgba(255,255,255,.3); }
.stages li { position: relative; padding-bottom: .75rem; font-size: var(--small); }
.stages li::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 1.25rem; height: 2px; background: var(--orange); transform-origin: left; }
.js .stages li::after { transform: scaleX(0); transition: transform 400ms var(--elastic); transition-delay: calc(700ms + var(--i, 0) * 250ms); }
.js .care.is-in .stages li::after, .js .care .is-in .stages li::after, .js .care .stages.is-in li::after { transform: scaleX(1); }
.button-light { background: var(--white); color: #141414; }
.button-light:hover, .button-light:focus-visible { box-shadow: 0 .5rem 1.25rem rgba(20,20,20,.18); }

/* A move plan is a document, with unfilled ruled fields. */
.planning { background: var(--neutral); }
.sheet { width: 100%; max-width: 64rem; margin-inline: auto; padding: 3rem; background: var(--white); border: 1px solid var(--stone); box-shadow: 0 1.5rem 4rem rgba(20,20,20,.10); }
.sheet-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: var(--space-tight); border-bottom: 1px solid var(--stone); }
.sheet-header img { width: 9rem; }
.sheet-header > span { font-size: var(--label); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sheet-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-tight); align-items: end; padding-block: var(--space-tight); }
.sheet-intro p { margin-top: var(--gap-head); }
.sheet-sections { list-style: none; padding: 0; margin: 0; }
.sheet-section { display: grid; grid-template-columns: 2rem minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; padding-block: var(--space-tight); border-top: 1px solid var(--stone); }
.step-index { padding-top: .2rem; color: var(--ink); font-family: var(--display); font-size: var(--small); }
.step-copy h3 { max-width: 20ch; }
.sheet-fields { display: flex; flex-direction: column; justify-content: space-between; gap: 1.3rem; }
.sheet-field { position: relative; display: block; min-height: 2.75rem; padding-bottom: 1rem; font-size: var(--label); font-weight: 500; color: var(--body-light); }
.sheet-field::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--stone); transform-origin: left; }
.js .sheet-field::after { transform: scaleX(0); transition: transform 400ms var(--elastic); transition-delay: calc(700ms + var(--field-i, 0) * 60ms); }
.js .sheet.is-in .sheet-section.is-in .sheet-field::after { transform: scaleX(1); }
.sheet-footer { display: flex; align-items: center; gap: 2.5rem; border-top: 1px solid var(--stone); padding-top: var(--space-tight); }
.sheet-contact { display: flex; flex-direction: column; }
.sheet-contact span { color: var(--body-light); font-size: var(--label); }
.sheet-contact a { display: flex; align-items: center; font-size: var(--body); font-weight: 600; text-decoration: none; }
.sheet-contact a:hover { text-decoration: underline; }

/* The place index sits in the landscape's gradient foot. */
.area { position: relative; display: flex; align-items: flex-end; min-height: 34rem; isolation: isolate; background: var(--ink); color: var(--white); }
.area-image { object-position: center 45%; }
.area-shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(20,20,20,.94) 42%, rgba(20,20,20,.8) 60%, transparent 100%); }
.area-content { padding-top: 5rem; }
.area-copy { width: min(100%, 34rem); }
.area-copy h2 { max-width: 14ch; }
.area p { color: var(--body-dark); }
.places { position: relative; display: flex; align-items: stretch; flex-wrap: wrap; gap: .75rem; width: 100%; margin: var(--space-tight) 0 1rem; padding: 0 0 1.5rem; list-style: none; color: var(--white); font-size: var(--body); }
.places li { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.35); white-space: nowrap; }
.places li img { flex: 0 0 auto; width: 1rem; height: 1rem; object-fit: contain; }
.places .home-city { background: var(--white); color: var(--ink); }
.places::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--orange); transform-origin: left; }
.js .places::after { transform: scaleX(0); transition: transform 400ms var(--elastic) 1240ms; }
.js .places.is-in::after { transform: scaleX(1); }

/* One FAQ list with an explicit close. */
.questions { background: var(--white); }
.question-heading { text-align: center; margin-bottom: var(--space-tight); }
.question-heading h2 { margin-inline: auto; }
.question-heading > p:last-child { text-wrap: balance; }
.faq-list { width: 100%; max-width: 56rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.5rem; padding: 1.35rem 0; list-style: none; font-size: var(--body); font-weight: 500; line-height: 1.5; }
summary::-webkit-details-marker { display: none; }
summary:hover { text-decoration: underline; text-underline-offset: .25em; }
.faq-icons { position: relative; display: block; flex: 0 0 3rem; width: 3rem; height: 3rem; }
.faq-icons img { position: absolute; top: .75rem; left: .75rem; width: 1.5rem; height: 1.5rem; object-fit: contain; transition: opacity 250ms ease, transform 250ms var(--elastic); }
.faq-plus { opacity: 1; transform: rotate(0); }
.faq-minus { opacity: 0; }
details[data-expanded="true"] .faq-plus, details[open]:not([data-expanded]) .faq-plus { opacity: 0; transform: rotate(90deg); }
details[data-expanded="true"] .faq-minus, details[open]:not([data-expanded]) .faq-minus { opacity: 1; }
.answer { overflow: hidden; }
.answer p { padding-bottom: 1.7rem; }
.questions-close { display: flex; flex-direction: column; align-items: center; gap: var(--gap-head); margin-top: var(--space-tight); }
.questions-contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem 1.5rem; color: var(--body-light); font-size: var(--small); }
.questions-contact a { display: flex; align-items: center; color: var(--ink); font-weight: 500; text-decoration: none; }
.questions-contact a:hover { text-decoration: underline; }

/* The form card is the final object's light surface. */
.quote { background: var(--ink); color: var(--white); }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 5rem; align-items: start; }
.quote-copy { min-width: 0; }
.quote-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 18rem; margin-bottom: var(--space-tight); overflow: hidden; background: var(--ink); }
.quote-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.quote-photo::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(0deg, rgba(20,20,20,.95), transparent); pointer-events: none; }
.quote-photo .small-label { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; margin: 0; padding: 1.5rem; color: var(--body-dark); }
.quote-copy h2 { max-width: 12ch; }
.quote-copy p { color: var(--body-dark); }
.contact-block { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--space-tight); padding-top: var(--space-tight); border-top: 1px solid rgba(255,255,255,.25); }
.contact-block > span { color: var(--body-dark); font-size: var(--label); }
.contact-block > a { display: flex; align-items: center; margin-block: .4rem; color: var(--white); font-size: 1.5rem; font-weight: 500; letter-spacing: -.035em; text-decoration: none; }
.contact-block > a:hover { text-decoration: underline; }
.contact-block p { font-size: var(--small); }
.quote-card { min-width: 0; border: 1px solid var(--stone); padding: 2.5rem; background: var(--white); color: var(--ink); }
.form-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-head); padding-bottom: var(--gap-head); margin-bottom: var(--space-tight); border-bottom: 1px solid var(--line); }
.form-heading > span { color: var(--body-light); font-size: var(--label); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.fields label { min-width: 0; font-size: var(--label); font-weight: 500; }
.fields label > span { color: var(--ink); }
.fields input, .fields select, .fields textarea { display: block; width: 100%; min-width: 0; min-height: 3.1rem; margin-top: .45rem; padding: .8rem .85rem; border: 1px solid var(--stone); border-radius: 0; background: var(--neutral); color: var(--ink); font-size: var(--body); transition: border-color 200ms; }
.fields textarea { resize: vertical; min-height: 6rem; }
.fields input:hover, .fields select:hover, .fields textarea:hover { border-color: var(--body-light); }
.fields input::placeholder, .fields textarea::placeholder { color: var(--body-light); opacity: 1; }
.full-width { grid-column: 1 / -1; }
.form-submit { width: 100%; margin-top: var(--space-tight); justify-content: space-between; }
#form-status { margin-top: var(--gap-head); padding: 1rem; border-left: 2px solid var(--ink); background: var(--neutral); font-size: var(--small); }
.form-footer { margin-top: .75rem; }
.form-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--small); }

/* Quiet footer with the same rail and band rhythm. */
.footer { background: var(--neutral); }
.footer-top { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; align-items: center; gap: 3rem; padding-bottom: var(--space-tight); }
.footer-brand { display: flex; align-items: center; width: 12rem; }
.footer-brand img { width: 100%; filter: grayscale(1); mix-blend-mode: multiply; }
.footer-top p { font-size: var(--small); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.footer-contact a { display: flex; align-items: center; font-size: 1.25rem; font-weight: 500; text-decoration: none; }
.footer-contact span { color: var(--body-light); font-size: var(--small); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: var(--gap-head); border-top: 1px solid var(--line); color: var(--body-light); font-size: var(--small); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.mobile-action { display: none; }
.legal { min-height: 70vh; }
.legal-copy { width: 100%; }
.legal h1 { max-width: 19ch; }
.legal .text-link { margin-top: var(--space-tight); }

@media (min-width: 1600px) {
  :root { --h2: clamp(2.1rem, 3.2vw, 3rem); }
  .hero { min-height: 51rem; }
  .hero-image { object-position: center 53%; }
}

@media (max-width: 1200px) {
  .desktop-nav { display: none; }
  .menu-open { display: flex; }
  .ticket { grid-template-columns: 1.2fr 1fr 1fr; }
  .ticket-action { grid-column: 1 / -1; padding: 1rem 1.5rem; border-top: 1px solid var(--stone); border-left: 0; }
  .start-button { justify-content: center; gap: 1.5rem; }
  .hero { gap: var(--space-tight); }
  .ledger { grid-template-columns: 12rem minmax(0, 1fr); }
  .ledger .text-link { grid-column: 2; }
  .who-grid { gap: 0; }
  .care-copy { width: 49%; }
  .quote-grid { gap: 3rem; }
  .footer-top { gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  .hero-copy-column { width: min(100%, 36rem); }
  .who-grid { grid-template-columns: minmax(0, 1fr); }
  .who-photo { min-height: 34rem; }
  .care-copy { width: 60%; }
  .care-shade { background: linear-gradient(90deg, #14141422, #141414e8 40%, #141414f5); }
  .sheet { padding: 2rem; }
  .sheet-intro { grid-template-columns: 1fr; gap: 0; }
  .sheet-section { grid-template-columns: 2rem minmax(0, 1fr); }
  .sheet-fields { grid-column: 2; }
  .sheet-footer { flex-wrap: wrap; }
  .quote-grid, .fields { grid-template-columns: 1fr; }
  .quote-copy h2 { max-width: 12ch; }
  .footer-top { grid-template-columns: 12rem minmax(0, 1fr); }
  .footer-contact { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
}

@media (min-width: 900px) {
  .who-grid { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 0; }
  .who-photo { align-self: stretch; }
  .who-copy { margin-left: -6rem; }
}

@media (min-width: 641px) and (max-width: 760px) {
  .header-inner { gap: .5rem; }
  .brand { width: 6.5rem; }
  .header-quote { padding-inline: .5rem; gap: .5rem; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 5.7rem; }
  .header-inner { height: 4.7rem; }
  .brand { width: 10.8rem; }
  .header-phone, .header-quote { display: none; }
  .menu-open { margin-left: auto; }
  .hero { display: block; min-height: 0; padding-top: 0; padding-bottom: var(--sticky-height); }
  .hero-image { height: 34rem; object-position: 78% 20%; }
  .hero-shade { height: 34rem; background: linear-gradient(0deg, var(--ink) 0%, rgba(20,20,20,.96) 30%, rgba(20,20,20,.65) 52%, transparent 76%); }
  .hero-content { display: flex; align-items: flex-end; min-height: 34rem; padding-block: 2rem; }
  .hero-copy-column { width: 100%; }
  .ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-intro { grid-column: 1 / -1; padding: 1.25rem 1rem; border-bottom: 1px solid var(--stone); }
  .ticket label { padding: .75rem .6rem; border-left: 0; }
  .ticket label + label { border-left: 1px solid var(--stone); }
  .ticket select { font-size: var(--small); }
  .ticket-action { padding: 1rem; }
  .proof-frame { height: auto; }
  .proof-image { position: relative; height: 16rem; }
  .proof-frame::after { display: none; }
  .proof-ledger { position: static; grid-template-columns: 1fr; padding: 1.25rem; background: var(--ink); }
  .who-grid { gap: 0; }
  .who-photo { min-height: 34rem; }
  .who-copy { padding: 1.25rem; }
  .storage-aside { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .storage-aside > .icon-box, .storage-aside h3, .storage-aside p, .storage-aside .text-link { grid-column: 1; grid-row: auto; }
  .storage-aside h3 { padding-top: .75rem; }
  .care { padding-block: var(--space-band); }
  .care-image { height: 30rem; object-position: 37% top; }
  .care-shade { height: 30rem; background: linear-gradient(180deg, transparent 35%, var(--ink) 70%); }
  .care-inner { padding-top: 16rem; }
  .care-copy { width: 100%; }
  .sheet { padding: 1.25rem; }
  .sheet-header { flex-wrap: wrap; }
  .sheet-section { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sheet-fields { grid-column: auto; margin-top: .5rem; }
  .step-index { padding-top: 0; }
  .sheet-footer { flex-direction: column; align-items: stretch; gap: var(--gap-head); }
  .sheet-footer .button { padding-inline: .75rem; gap: .75rem; }
  .sheet-contact { align-items: flex-start; }
  .area-content { padding-top: 15rem; }
  .area-image { object-position: center 28%; }
  .area-shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(20,20,20,.97) 58%, rgba(20,20,20,.55) 70%, transparent 82%); }
  .question-heading { text-align: left; }
  .question-heading > p:last-child { text-wrap: wrap; }
  .questions-close { align-items: stretch; }
  .questions-close .button { gap: .5rem; padding-inline: .75rem; }
  .questions-contact { flex-direction: column; gap: .25rem; text-align: center; }
  summary { gap: 1rem; }
  .quote-card { padding: 1.25rem; }
  .form-heading { flex-direction: column; align-items: flex-start; gap: var(--gap-head); }
  .form-submit { padding-inline: .6rem; gap: .5rem; }
  .footer { padding-bottom: calc(var(--space-band) + var(--sticky-height)); }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--gap-head); }
  .footer-contact { grid-column: auto; }
  .footer-bottom nav { gap: .25rem 1.25rem; }
  .mobile-action { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--white); visibility: hidden; transform: translateY(100%); pointer-events: none; transition: transform 200ms var(--ease), visibility 0s 200ms; }
  .mobile-action.is-visible { visibility: visible; transform: translateY(0); pointer-events: auto; transition: transform 200ms var(--ease), visibility 0s; }
  .mobile-action a { display: flex; justify-content: center; align-items: center; min-height: 3.25rem; padding: .25rem .4rem; gap: .45rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-align: center; text-decoration: none; }
  .mobile-call { background: var(--white); color: var(--ink); }
  .mobile-call img, .mobile-action .button img { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; object-fit: contain; }
  .mobile-action .button:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero-image, .js .hero-image, .js.is-loaded .hero-image { transform: none; scale: 1; }
  .js .ticket::before { transform: scaleY(1); }
  .js .stages li::after, .js .sheet-field::after, .js .places::after { transform: scaleX(1); }
  .button:hover, .button:focus-visible, .start-button:hover, .start-button:focus-visible, .button:hover img, .button:focus-visible img, .start-button:hover img, .start-button:focus-visible img, .text-link:hover img, .text-link:focus-visible img, .proof-ledger .icon-box img, .faq-icons img, details[data-expanded="true"] .faq-plus, details[open]:not([data-expanded]) .faq-plus { transform: none; }
}


/* Review fixes, September 22, 2026 */
.who h2, .who-copy h2 { max-width: 22ch; }
@media (min-width: 1600px) { .hero-copy-column { width: min(100%, 54rem); } }

/* Parallax photos: oversized so the glide never shows an edge; --py is set by script.js */
@media (min-width: 900px) {
  [data-parallax] { height: 136%; top: -18%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none; }
}
/* Parallax hosts clip their oversized photos so a glide never pokes into the neighbouring band */
.hero, .proof-frame, .services-frame, .care, .area { overflow: hidden; }
/* Owner tweak, September 22, 2026: the hero ticket sits about 30px lower on desktop */
@media (min-width: 641px) { .hero { padding-bottom: calc(var(--space-band) - 3.75rem); } }
/* Owner ruling, September 22, 2026: "page gets stuck on scroll". No pinning. The frame scrolls with the page, fits one screen so the photo and all three rows are visible together, and the photo still glides. */
@media (min-width: 900px) {
  .services-stage { min-height: 0 !important; }
  .services-frame { position: relative !important; top: auto !important; height: clamp(40rem, calc(100vh - 5.75rem), 56rem) !important; min-height: 0 !important; }
  .services-progress { display: none; }
  .ledger { opacity: 1; }
}
/* Owner ruling, September 22, 2026: tablet widths (641 to 899px) use the phone composition with a wider rail, never the collapsed desktop panel */
@media (min-width: 641px) and (max-width: 899px) {
  .services-frame { display: flex; flex-direction: column; min-height: 0; height: auto; }
  .services-inner { height: auto; width: 100%; margin: 0; }
  .services-photos { position: relative; height: 28rem; }
  .services-image { position: absolute; inset: 0; height: 100%; top: 0; object-position: 56% center; transform: none; }
  .services-frame::after { display: block; inset: 21rem 0 auto; height: 7rem; background: linear-gradient(0deg, var(--ink) 0%, transparent 100%); }
  .services-head { position: static; margin: 0; min-height: 0; width: 100%; padding: 1.5rem 2.5rem 0; background: none; -webkit-mask-image: none; mask-image: none; transform: none; }
  .services-head h2 { color: var(--white); max-width: 16ch; }
  .services-head p { color: var(--body-dark); margin-top: .75rem; }
  .service-ledger { position: static; margin: 1.5rem 0 0; padding: 0 2.5rem 2rem; transform: none; }
  .ledger { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding-block: 1.1rem; min-height: 0; opacity: 1; }
  .ledger p { margin-top: .35rem; font-size: .95rem; line-height: 1.55; }
  .ledger .text-link { margin-top: .35rem; min-height: 2.75rem; justify-content: space-between; }
  .services-progress { display: none; }
}
/* Specificity guard: below 900px the photos never carry the desktop oversize or glide */
@media (max-width: 899px) {
  .services-photos { position: relative; inset: auto; z-index: auto; }
  .services-photos .services-image, .services-photos .services-image.is-active { height: 100%; top: 0; transform: none; }
}
@media (max-width: 640px) { .services-photos { height: 22rem; } .services-image { height: 100%; } }
/* Owner ruling, September 22, 2026: on phones and tablets every service carries ITS OWN photo directly above its title, so the picture is always next to what you tap. The shared swapping photo is desktop only. */
@media (max-width: 899px) {
  .services-photos, .services-frame::after { display: none; }
  .services-head { padding-top: 2.5rem; }
  .service-ledger { margin-top: 1.5rem; }
  .ledger { padding-block: 1.5rem 1.25rem; }
  .ledger::before { content: ''; display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 1.1rem; background-position: center; background-size: cover; background-repeat: no-repeat; }
  .ledger[data-photo="moving"]::before { background-image: url("assets/photos/move-complete-local-16x10.webp"); }
  .ledger[data-photo="packing"]::before { background-image: url("assets/photos/packing-kitchen.webp"); background-position: 50% 40%; }
  .ledger[data-photo="storage"]::before { background-image: url("assets/photos/storage-packed.webp"); }
  .ledger::after { display: none; }
  .ledger.is-active .service-title { color: var(--white); }
}
@media (max-width: 640px) { .services-head { padding: 2rem 1.25rem 0; } .service-ledger { padding: 0 1.25rem 1.5rem; } }
@media (max-width: 899px) { .services-head { margin-top: 0; } .services-frame { min-height: 0; height: auto; } }
/* Owner ruling, September 25, 2026: wider rail on phones (1rem gutters), wider form card, and the native date field can never exceed the form width */
@media (max-width: 640px) {
  .wrap { width: calc(100% - 2rem); }
  .quote-card { padding: 1.25rem 1rem; }
  .fields label { display: block; min-width: 0; }
  .fields input, .fields select, .fields textarea { width: 100%; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
  .fields input[type="date"] { display: block; min-width: 0; text-align: left; -webkit-min-logical-width: calc(100% - 1.7rem); }
  .fields input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  .fields select { background-image: url("assets/icons/fa/chevron-down-ink.svg"); background-repeat: no-repeat; background-position: right .85rem center; background-size: .9rem; padding-right: 2.5rem; }
}

/* Honeypot field: off-screen for people, present for bots */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.thanks { min-height: 60vh; }
.thanks-card { max-width: 46rem; }
.thanks .contact-block { margin-top: 2rem; }
/* Thank-you page: the contact block sits on white here, so it takes ink, not the quote band's white */
.thanks .contact-block { border-top-color: var(--stone); }
.thanks .contact-block > span, .thanks .contact-block p { color: var(--body); }
.thanks .contact-block > a { color: var(--ink); }
.thanks .legal h1, .thanks h1 { max-width: 24ch; }
/* Owner ruling, September 25, 2026: ONE rail on phones. Every band's content edge sits at 1rem; full-bleed bands pad their text to the same 1rem. */
@media (max-width: 640px) {
  :root { --gutter: 1rem; }
  .wrap, .header-inner { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
  .services-frame.wrap { width: 100%; margin: 0; }
  .services-head, .service-ledger { padding-left: var(--gutter); padding-right: var(--gutter); }
  .proof-ledger { padding-left: var(--gutter); padding-right: var(--gutter); }
  .mobile-action { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero-content, .care-copy, .area-content, .quote-grid { padding-left: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  /* Full-bleed services band: its rail is the page rail, not a nested wrap */
  .services-inner.wrap { width: 100%; margin: 0; }
  /* Cards (proof foot, who sheet, move plan sheet, quote card) share one inner padding so all card text sits 2rem from the screen edge */
  .who-copy, .sheet, .quote-card { padding-left: var(--gutter); padding-right: var(--gutter); }
  .proof-ledger { padding-left: var(--gutter); padding-right: var(--gutter); }
}