/* Services page. Page-specific layer on top of site/css/base.css (d1 "Survey").
   Gold stays a fill: the datum, the eyebrow square, the chip. Type on navy is cream; secondary type on navy is slate-60. */

/* ---------------------------------------------------------------- shared on this page */
.sec-head { align-items: end; row-gap: 20px; margin-bottom: 56px; }
.sec-head .eyebrow { margin: 0 0 22px; }
.sec-head .h1 { max-width: 15em; text-wrap: balance; }
.svc-hero .display, .svc-contact .h1, .part-head h3 { text-wrap: balance; }
.sec-head p.muted { margin: 0; font-size: 18px; line-height: 28px; max-width: 36em; padding-bottom: 6px; }

/* photo holder: the crop ticks hang 0.5d outside each corner (L arms 1.5d, pointing away) */
.ph { position: relative; }
.ph > img { width: 100%; height: auto; }
.tk { position: absolute; width: calc(var(--d) * 1.5); height: calc(var(--d) * 1.5); border: 0 solid var(--slate); pointer-events: none; }
.tk.tl { left: calc(var(--d) * -2); top: calc(var(--d) * -2); border-right-width: 1px; border-bottom-width: 1px; }
.tk.tr { right: calc(var(--d) * -2); top: calc(var(--d) * -2); border-left-width: 1px; border-bottom-width: 1px; }
.tk.bl { left: calc(var(--d) * -2); bottom: calc(var(--d) * -2); border-right-width: 1px; border-top-width: 1px; }
.tk.br { right: calc(var(--d) * -2); bottom: calc(var(--d) * -2); border-left-width: 1px; border-top-width: 1px; }

/* numbered sub-heads: 04.1, Track A ... */
.n { font-family: var(--font-cond); font-weight: 500; font-feature-settings: var(--tnum); color: var(--slate); }

/* ---------------------------------------------------------------- hero */
.svc-hero { padding: 64px 0 0; }
.svc-hero > .grid { align-items: stretch; }
.svc-hero .intro { grid-column: 1 / span 7; display: flex; flex-direction: column; padding-bottom: 33px; }   /* CTAs land on the photo baseline (caption is 33px) */
.svc-hero .eyebrow { margin: 0 0 28px; }
.svc-hero .display { margin: 0 0 30px; max-width: 9.6em; }
.svc-hero .lede { margin: 0 0 36px; max-width: 31em; }
.svc-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

.hero-plate { grid-column: 8 / span 5; margin: 0; }
.hero-plate .ph > img { aspect-ratio: 1052 / 1132; object-fit: cover; }
.hero-plate .callout { margin-left: -5px; }
.cap-line { display: flex; gap: 14px; align-items: baseline; margin: 0; padding: 14px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.cap-line span { flex: none; font-size: 12px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--navy); }

/* sheet index: the title-block strip, used as the page's table of contents */
.sheet-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--slate-30); }
.sheet-index a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; border-left: 1px solid var(--slate-30); text-decoration: none; color: var(--navy); transition: background .15s ease; }
.sheet-index a:first-child { border-left: 0; padding-left: 0; }
.sheet-index .k { font-family: var(--font-cond); font-weight: 500; font-size: 14px; line-height: 18px; font-feature-settings: var(--tnum); color: var(--slate); }
.sheet-index .v { font-size: 17px; line-height: 24px; font-weight: 500; }
.sheet-index .d { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.sheet-index a:hover .v, .sheet-index a:focus-visible .v { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- 01 who we represent: the schedule */
.svc-who { padding-top: 104px; }
.mx-head { padding-bottom: 12px; border-bottom: 1px solid var(--navy); }
.mx-row { padding: 30px 0 32px; border-bottom: 1px solid var(--slate-30); row-gap: 24px; scroll-margin-top: 24px; }
.mx-side { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-content: start; }
.mx-side .ico { grid-row: 1 / span 2; width: 40px; height: 40px; }
.mx-side .no { margin: 0; font-family: var(--font-cond); font-weight: 500; font-size: 14px; line-height: 16px; font-feature-settings: var(--tnum); color: var(--slate); }
.mx-side h3 { margin: 2px 0 0; font-family: var(--font-cond); font-weight: 500; font-size: 28px; line-height: 30px; }
.mx-side .who { grid-column: 1 / -1; margin: 14px 0 14px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.mx-side .go { grid-column: 1 / -1; justify-self: start; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mx-side .go span { font-family: var(--font-sans); }
.mx-svc { border-left: 1px solid var(--slate-30); padding-left: 20px; }
.mx-svc h4 { margin: 4px 0 8px; font-size: 18px; line-height: 24px; font-weight: 600; }
.mx-svc p { margin: 0; font-size: 16px; line-height: 24px; }

/* ---------------------------------------------------------------- 02 property types */
.types { row-gap: 48px; }
.type { border-top: 1px solid var(--navy); padding-top: 24px; display: flex; flex-direction: column; }
.type .ico { width: 56px; height: 56px; margin: 0 0 18px; }
.type h3 { font-family: var(--font-cond); font-weight: 500; font-size: 36px; line-height: 40px; margin: 0 0 8px; }
.type .what { margin: 0 0 22px; font-size: 16px; line-height: 24px; min-height: 48px; }
.type .label { margin: 0 0 6px; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; padding: 11px 0 10px; border-top: 1px solid var(--slate-30); }
.facts li img { grid-row: 1 / span 2; width: 24px; height: 24px; margin-top: 1px; }
.facts b { font-size: 15px; line-height: 20px; font-weight: 600; }
.facts span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.onmarket { display: flex; align-items: center; gap: 24px; margin-top: 48px; padding: 20px 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--slate-30); }
.onmarket .chip-gold { flex: none; }
.onmarket p { margin: 0; font-size: 17px; line-height: 26px; }
.onmarket p b { font-weight: 600; }
.onmarket .link-arrow { flex: none; margin-left: auto; }

/* ---------------------------------------------------------------- 03 process and timeline */
.track + .track { margin-top: 72px; }
.track-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.track-head .label { margin: 0; color: var(--navy); }
.track-head h3 { font-family: var(--font-cond); font-weight: 500; font-size: 32px; line-height: 36px; }
.track-head .for { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.track .ruler { border-top-color: var(--navy); }
.stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); }
.stations li { position: relative; padding-top: 16px; }
.stations li::before { content: ""; position: absolute; left: 0; top: -7px; height: 12px; border-left: 1px solid var(--navy); }   /* station peg: the ruler tick carried down */
.stations .when { margin: 0 0 10px; font-family: var(--font-cond); font-weight: 500; font-size: 20px; line-height: 24px; font-feature-settings: var(--tnum); }
.stations h4 { display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px; font-size: 18px; line-height: 24px; font-weight: 600; }
.stations h4 .n { font-size: 15px; }
.stations p:last-child { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink); }

/* ---------------------------------------------------------------- 04 what you get */

.kit-part + .kit-part { margin-top: 104px; }
.part-head { align-items: baseline; row-gap: 12px; margin-bottom: 40px; }
.part-head h3 { font-family: var(--font-cond); font-weight: 500; font-size: 30px; line-height: 34px; }
.part-head h3 .n { display: block; font-size: 16px; line-height: 20px; margin-bottom: 6px; }
.part-head p { margin: 0; font-size: 18px; line-height: 28px; max-width: 40em; }

.pair figure, .set figure, .aerial { margin: 0; }
.pair .ph > img { aspect-ratio: 3 / 2; object-fit: cover; }
.tag { position: absolute; left: 16px; top: 16px; background: var(--cream); color: var(--navy); padding: 7px 12px 6px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.set { margin-top: 48px; align-items: start; }
.set .ph > img { aspect-ratio: 3 / 2; object-fit: cover; }
.set figcaption { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.spec-list { margin: 0; border-top: 1px solid var(--navy); }
.spec-list > div { padding: 10px 0 9px; border-bottom: 1px solid var(--slate-30); }
.spec-list dt { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.spec-list dd { margin: 3px 0 0; font-size: 15px; line-height: 22px; }

.aerial .ph > img { aspect-ratio: 2592 / 1458; }
.notes { margin-top: 32px; }
.notes > div { border-top: 1px solid var(--navy); padding-top: 12px; }
.notes .label { margin: 0 0 6px; }
.notes p:last-child { margin: 0; font-size: 16px; line-height: 24px; }

/* the print kit on a cream field: three sheets standing on one baseline */
.svc-print { padding-top: 96px; }
.shelf { align-items: end; }
.shelf figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.shelf .frame { flex: 1; display: flex; align-items: flex-end; padding-top: 24px; }
.shelf .ph { width: 100%; outline: 1px solid var(--slate-30); }
.shelf figcaption { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--navy); }
.shelf figcaption b { display: block; font-size: 18px; line-height: 24px; font-weight: 600; margin-bottom: 4px; }
.shelf figcaption span { display: block; font-size: 15px; line-height: 23px; }
.present { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; column-gap: 24px; margin-top: 56px; padding: 20px 0; border-top: 1px solid var(--slate-30); border-bottom: 1px solid var(--slate-30); }
.present .qr { background: var(--white); padding: 12px; width: 120px; height: 120px; }
.present .qr img { width: 96px; height: 96px; }
.present .label { margin: 0 0 6px; color: var(--navy); }
.present .txt p:last-child { margin: 0; font-size: 17px; line-height: 26px; }

/* ---------------------------------------------------------------- 05 contact */
.svc-contact { padding-bottom: 0; }
.svc-contact .c-rule { margin-top: 96px; }
.svc-contact .eyebrow { margin: 0 0 22px; }
.svc-contact .h1 { color: var(--cream); margin: 0 0 20px; }
.c-sub { margin: 0 0 36px; font-size: 18px; line-height: 28px; color: var(--slate-60); max-width: 30em; }
.c-card { display: flex; gap: 24px; align-items: flex-end; padding-top: 24px; border-top: 1px solid var(--slate); }
.c-card .shot { width: 144px; height: 144px; flex: none; background: var(--cream); overflow: hidden; }
.c-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.c-id .nm { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--cream); }
.c-id .role { margin: 2px 0 10px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--slate-60); }
.c-phone { display: block; font-family: var(--font-cond); font-weight: 500; font-size: 44px; line-height: 48px; font-feature-settings: var(--tnum); letter-spacing: -0.005em; color: var(--cream); text-decoration: none; }
.c-mail { display: inline-block; margin-top: 4px; font-size: 17px; line-height: 24px; color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--slate); }
.c-phone:hover, .c-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.starters { align-self: end; }
.starters .label { margin: 0 0 12px; color: var(--slate-60); }
.starter { display: grid; grid-template-columns: 40px 1fr 32px; align-items: baseline; column-gap: 12px; padding: 20px 4px 20px 0; border-top: 1px solid var(--slate); color: var(--cream); text-decoration: none; transition: background .15s ease; }
.starter:last-child { border-bottom: 1px solid var(--slate); }
.starter .n { font-size: 16px; color: var(--slate-60); }
.starter b { display: block; font-size: 20px; line-height: 26px; font-weight: 600; }
.starter .t > span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--slate-60); }
.starter .arr { justify-self: end; font-size: 22px; line-height: 26px; }
.starter:hover, .starter:focus-visible { background: rgba(243, 239, 231, 0.06); }
.starter:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .sheet-index .v { font-size: 15px; line-height: 21px; }
  .mx-svc { padding-left: 16px; }
  .stations { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .track .ruler { display: none; }
  .stations li { border-top: 1px solid var(--navy); }
  .stations li::before { top: 0; height: 12px; }
  .c-phone { font-size: 38px; line-height: 42px; }
}
@media (max-width: 900px) {
  .svc-hero .intro { padding-bottom: 40px; }
  .svc-hero .display { max-width: none; }
  .hero-plate .ph > img { aspect-ratio: 4 / 3; object-position: 50% 0; }
  .hero-plate .callout { top: 22.4% !important; }   /* 4:3 window from the top of the 1052 x 1132 frame */
  .sheet-index { grid-template-columns: 1fr 1fr; }
  .sheet-index a { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--slate-30); }
  .sheet-index a:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--slate-30); }
  .sheet-index a:last-child { border-bottom: 0; }
  .mx-head { display: none; }
  .mx-row { border-top: 0; }
  .mx-svc { border-left: 0; padding-left: 0; border-top: 1px solid var(--slate-30); padding-top: 14px; }
  .types { row-gap: 40px; }
  .type .what { min-height: 0; }
  .onmarket { flex-wrap: wrap; gap: 14px; }
  .onmarket .link-arrow { margin-left: 0; }
  .kit-part + .kit-part { margin-top: 72px; }
  .pair { row-gap: 40px; }
  .set { row-gap: 32px; }
  .shelf { row-gap: 48px; }
  .present { grid-template-columns: 120px 1fr; row-gap: 16px; }
  .present .btn { grid-column: 1 / -1; justify-self: start; }
  .starters { margin-top: 48px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .types > .type { grid-column: span 6 !important; }
  .set > figure { grid-column: span 6 !important; }
  .set > .spec-list { grid-column: span 6 !important; }
}
@media (max-width: 640px) {
  .sec-head { margin-bottom: 40px; }
  .sec-head .eyebrow { margin-bottom: 16px; }
  .svc-hero { padding-top: 40px; }
  .cap-line { flex-direction: column; gap: 2px; }
  .hero-plate .callout .plate { padding: 7px 10px 6px; font-size: 11px; }
  .hero-plate .callout .plate b { font-size: 12px; }
  .hero-plate .callout .line { width: 28px; }
  .sheet-index { grid-template-columns: 1fr; }
  .sheet-index a, .sheet-index a:nth-child(2n) { padding: 12px 0; border-left: 0; flex-direction: row; flex-wrap: wrap; gap: 0 14px; align-items: baseline; }
  .sheet-index .d { flex-basis: 100%; padding-left: 30px; }
  .mx-side .who { margin-top: 10px; }
  .stations { grid-template-columns: 1fr; row-gap: 28px; }
  .track-head { flex-wrap: wrap; gap: 6px 16px; }
  .part-head h3 { font-size: 26px; line-height: 30px; }
  .tag { left: 10px; top: 10px; }
  .c-card { flex-direction: column; align-items: flex-start; }
  .c-card .shot { width: 112px; height: 112px; }
  .c-phone { font-size: 34px; line-height: 40px; }
  .starter { grid-template-columns: 32px 1fr 24px; }
  .starter b { font-size: 18px; line-height: 24px; }
}