/* ==========================================================================
   Creatio Construction: Contact page styles
   Loaded only by contact.html, after style.css. Every class here starts with
   "contact-" (or sits under .page-contact), so no other page is affected.
   The look is "project desk": the same graphite, stone and brass family as
   the FAQ field manual, turned into a site office. A dark drawing sheet with
   a framed photo plate and a title block opens the page, a brass tape runs
   along its lower edge, the direct lines are punched field tags, the form is
   an intake sheet with a margin scale, the map sits in a survey frame and
   the service area is drawn as a schematic route.

   CONTENTS
   01  Page tokens and helpers
   02  Hero: drawing sheet, breadcrumb, title, photo plate, title block
   03  Brass tape
   04  Section heads and kickers
   05  Direct lines (field tags)
   06  Project intake: field note and intake sheet
   07  Form fields, validation and status panels
   08  Map
   09  Service area route
   10  What happens next
   11  FAQ
   12  Footer band
   13  Motion preferences
   14  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND HELPERS ================================================ */
.page-contact {
  --ct-black: #08090a;
  --ct-ink: #111214;
  --ct-panel: #16171a;
  --ct-line: rgba(255, 255, 255, .12);
  --ct-stone: #ece5d8;
  --ct-paper: #fbf9f4;
  --ct-desk: #f5f1e9;
  --ct-rule: rgba(40, 32, 18, .14);
  --ct-rule-strong: rgba(40, 32, 18, .32);
  --ct-brass: #c4a874;
  --ct-brass-hi: #e2cd9d;
  --ct-brass-text: #6f5830; /* darker brass for small text and rules on light surfaces */
  --ct-alert: #a1361f;
  --ct-ok: #2f6b3a;
  --ct-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --ct-ease: cubic-bezier(.2, .7, .2, 1);
  --ct-pad: clamp(64px, 8vw, 120px);
  background: var(--ct-stone);
}
.page-contact [hidden] { display: none !important; }
.contact-mono { font-family: var(--ct-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.contact-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* 02 HERO =================================================================== */
.contact-hero {
  position: relative;
  padding: 18px 0 calc(40px + clamp(56px, 7vw, 96px));
  overflow: hidden;
  color: rgba(255, 255, 255, .76);
  background:
    radial-gradient(55% 65% at 90% 0%, rgba(196, 168, 116, .13), rgba(196, 168, 116, 0) 70%),
    var(--ct-black);
}
/* faint drafting grid: fine squares with a heavier line every fifth */
.contact-hero__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(196, 168, 116, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(196, 168, 116, .09) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
}
.contact-hero > .container { position: relative; }

.contact-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.contact-crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .62); font-size: .85rem; }
.contact-crumbs li + li::before { content: "/"; color: var(--ct-brass); }
.contact-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .8); text-decoration: none; }
.contact-crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--ct-brass); text-underline-offset: 4px; }
.contact-crumbs [aria-current] { color: var(--white); }

.contact-hero__grid { display: grid; gap: 48px; }
.contact-hero__head { min-width: 0; }
.contact-hero__title {
  max-width: 17ch; margin: 0 0 24px;
  color: var(--white); font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -.03em;
}
.contact-hero__pre {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  color: var(--ct-brass); font: 500 clamp(.76rem, 1vw, .88rem) / 1.4 var(--ct-mono); letter-spacing: .16em; text-transform: uppercase;
}
.contact-hero__pre::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--ct-brass); }
/* "in Los Cabos" carries a brass dimension line with end ticks */
.contact-hero__place {
  position: relative; display: inline-block; padding-bottom: .16em; color: var(--ct-brass-hi);
  background:
    linear-gradient(var(--ct-brass), var(--ct-brass)) left bottom / 100% 2px no-repeat,
    linear-gradient(var(--ct-brass), var(--ct-brass)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--ct-brass), var(--ct-brass)) right bottom / 2px 14px no-repeat;
}
.contact-hero__lead { max-width: 56ch; margin: 0 0 32px; font-size: var(--fs-lead); line-height: 1.6; }
.contact-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.contact-hero__actions .btn { flex: 1 1 240px; }
.contact-hero__call { margin: 22px 0 0; font-size: .95rem; color: rgba(255, 255, 255, .66); }
.contact-hero__call a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--white); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ct-brass); text-underline-offset: 5px;
}
.contact-hero__call a:hover { color: var(--ct-brass-hi); }

/* photo plate: framed print with corner marks, two dimension lines and a title block */
.contact-plate { position: relative; margin: 0; min-width: 0; }
.contact-plate__frame {
  position: relative; padding: 8px;
  border: 1px solid rgba(196, 168, 116, .38); border-radius: 2px;
  background: rgba(255, 255, 255, .02);
}
.contact-plate__frame::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  --c: var(--ct-brass);
  background:
    linear-gradient(var(--c), var(--c)) top left / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 22px no-repeat;
}
.contact-plate__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1px; background: var(--ct-panel); }
.contact-plate__dim { display: none; }
.contact-plate__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 14px 0 0; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .64);
}
.contact-plate__caption .contact-mono { color: var(--ct-brass); font-size: .68rem; font-weight: 700; }

.contact-titleblock {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 0; border: 1px solid var(--ct-line); border-radius: 2px;
}
.contact-titleblock > div { padding: 12px 14px; border-top: 1px solid var(--ct-line); }
.contact-titleblock > div:nth-child(-n+2) { border-top: 0; }
.contact-titleblock > div:nth-child(even) { border-left: 1px solid var(--ct-line); }
.contact-titleblock dt { margin: 0 0 4px; color: var(--ct-brass); font-size: .64rem; font-weight: 700; }
.contact-titleblock dd { margin: 0; color: var(--white); font: 500 .92rem / 1.35 var(--font-head); }


/* 03 BRASS TAPE ============================================================= */
.contact-tape {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; overflow: hidden;
  background: linear-gradient(180deg, #e0c88f 0%, #c9ad74 55%, #b89a60 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .25);
}
/* the hook at the start of the tape */
.contact-tape::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; z-index: 1;
  background: linear-gradient(90deg, #5b4a2a, #8a7246);
}
.contact-tape__svg { display: block; width: 2400px; max-width: none; height: 40px; }
.contact-tape__svg path { fill: none; stroke: #1d1609; stroke-width: 1.4; }
.contact-tape__svg text { fill: #1d1609; font: 700 13px var(--ct-mono); }


/* 04 SECTION HEADS AND KICKERS ============================================== */
.contact-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 18px; color: var(--gray-700); }
.contact-kicker b { padding: 4px 9px; border: 1px solid var(--ct-brass-text); border-radius: 2px; color: var(--ct-brass-text); font-weight: 700; }
.contact-kicker--dark { color: rgba(255, 255, 255, .64); }
.contact-kicker--dark b { border-color: var(--ct-brass); color: var(--ct-brass-hi); }

.contact-head { display: grid; gap: 0; max-width: 780px; margin-bottom: clamp(36px, 5vw, 60px); }
.contact-head__title { margin: 0 0 16px; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.03em; }
.contact-head__intro { max-width: 62ch; margin: 0; color: var(--gray-700); }
.contact-head__intro a { color: var(--ct-ink); font-weight: 700; text-decoration-color: var(--ct-brass-text); text-underline-offset: 3px; }
.contact-head__intro a:hover { color: var(--ct-brass-text); }


/* 05 DIRECT LINES (FIELD TAGS) ============================================== */
.contact-lines { padding: var(--ct-pad) 0; background: var(--ct-stone); }
.contact-tags { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.contact-tag {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 22px 24px;
  background: var(--ct-paper); border: 1px solid var(--ct-rule); border-radius: 4px;
  box-shadow: 0 18px 40px -34px rgba(40, 32, 18, .55);
}
/* a fine scale printed along the top edge of each tag */
.contact-tag::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--ct-brass-text) 0 1px, transparent 1px 40px) left top / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, rgba(111, 88, 48, .55) 0 1px, transparent 1px 8px) left top / 100% 5px no-repeat;
  opacity: .7;
}
/* the punched eyelet of a field tag */
.contact-tag::after {
  content: ""; position: absolute; top: 18px; right: 18px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ct-stone);
  box-shadow: inset 0 1px 2px rgba(40, 32, 18, .35), 0 0 0 3px var(--ct-paper), 0 0 0 4px var(--ct-rule-strong);
}
.contact-tag__label { margin: 0 0 18px; color: var(--gray-700); font-size: .68rem; }
.contact-tag__label span { color: var(--ct-brass-text); font-weight: 700; margin-right: 6px; }
.contact-tag__icon { font-size: 22px; color: var(--ct-brass-text); margin-bottom: 14px; }
.contact-tag__title { margin: 0 0 6px; color: var(--ct-ink); font-size: 1.15rem; }
.contact-tag__value { margin: 0 0 12px; }
.contact-tag__value a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ct-ink); font: 600 1.1rem / 1.35 var(--font-head); letter-spacing: -.01em;
  text-decoration: underline; text-decoration-color: var(--ct-brass); text-decoration-thickness: 2px; text-underline-offset: 6px;
  overflow-wrap: anywhere;
}
.contact-tag__value--address a { font-size: .98rem; font-weight: 500; letter-spacing: 0; }
.contact-tag__value a:hover { color: var(--ct-brass-text); }
.contact-tag__text { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--ct-rule-strong); font-size: .95rem; line-height: 1.6; color: var(--gray-700); }


/* 06 PROJECT INTAKE ========================================================= */
.contact-intake {
  position: relative; padding: var(--ct-pad) 0;
  background-color: var(--ct-desk);
  background-image:
    linear-gradient(to right, rgba(40, 32, 18, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40, 32, 18, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  border-top: 1px solid var(--ct-rule);
}
.contact-intake__grid { display: grid; gap: 28px; align-items: start; }

/* field note: dark panel with a brass ruler down one edge */
.contact-note {
  position: relative; padding: 32px 24px 24px;
  background: var(--ct-ink); color: rgba(255, 255, 255, .74); border-radius: 4px;
}
.contact-note__title { margin: 0 0 12px; color: var(--white); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; }
.contact-note__text { margin: 0 0 22px; }
.contact-note__list { display: grid; gap: 0; margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--ct-line); }
.contact-note__list li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ct-line); color: var(--white); line-height: 1.5; }
.contact-note__list .contact-mono {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px;
  border: 1px solid var(--ct-brass); border-radius: 2px; color: var(--ct-brass-hi); font-size: .7rem; font-weight: 700; letter-spacing: 0;
}
.contact-note__lines { display: grid; gap: 4px; }
.contact-note__lines a {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  color: var(--white); font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
}
.contact-note__lines .icon { flex: none; color: var(--ct-brass); }
.contact-note__lines a:hover span { text-decoration: underline; text-decoration-color: var(--ct-brass); text-underline-offset: 4px; }

/* intake sheet */
.contact-sheet {
  position: relative; min-width: 0;
  margin-top: 34px; padding: 30px 20px 26px;
  background: var(--ct-paper); border: 1px solid var(--ct-rule); border-radius: 0 6px 6px 6px;
  box-shadow: 0 30px 60px -40px rgba(40, 32, 18, .55);
}
.contact-sheet__tab {
  position: absolute; top: -34px; left: -1px; display: flex; align-items: center; gap: 8px;
  height: 34px; margin: 0; padding: 0 16px;
  background: var(--ct-brass); color: var(--ct-black); border-radius: 6px 6px 0 0;
  font-size: .68rem; font-weight: 700;
}
.contact-sheet__tab b { font-size: .8rem; letter-spacing: .08em; }
.contact-sheet__head { padding-bottom: 20px; margin-bottom: 26px; border-bottom: 2px solid var(--ct-ink); }
.contact-sheet__title { margin: 0 0 10px; color: var(--ct-ink); font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12; letter-spacing: -.025em; }
.contact-sheet__title:focus { outline: none; }
.contact-sheet__title:focus-visible { outline: 2px solid var(--ct-brass-text); outline-offset: 4px; }
.contact-sheet__intro { margin: 0; max-width: 60ch; color: var(--gray-700); }
.contact-req { color: var(--ct-alert); font-weight: 700; }


/* 07 FORM FIELDS, VALIDATION AND STATUS PANELS ============================== */
.contact-form__grid { display: grid; gap: 22px 20px; }
.contact-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.contact-field__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; color: var(--ct-ink); font: 600 .98rem / 1.35 var(--font-head); }
.contact-field__n { margin-right: 8px; color: var(--ct-brass-text); font-size: .68rem; font-weight: 700; letter-spacing: .06em; }
.contact-field__opt { color: var(--gray-500); font: 400 .88rem var(--font-body); }
.contact-field__input {
  width: 100%; min-height: 54px; padding: 13px 15px;
  background: var(--white); color: var(--ct-ink);
  border: 1px solid var(--ct-rule-strong); border-radius: 3px;
  font: 400 1rem / 1.5 var(--font-body);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.contact-field__input:hover { border-color: rgba(40, 32, 18, .5); }
.contact-field__input:focus { outline: none; border-color: var(--ct-ink); box-shadow: 0 0 0 3px rgba(196, 168, 116, .55); }
.contact-field__textarea { min-height: 200px; resize: vertical; }
.contact-field__hint { margin: 0; font-size: .88rem; line-height: 1.5; color: #5d6168; }
.contact-field__error { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .9rem; font-weight: 700; line-height: 1.45; color: var(--ct-alert); }
.contact-field__error::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: var(--ct-alert); color: var(--white); font: 700 .72rem / 1 var(--font-head);
}
.contact-field__input[aria-invalid="true"] { border-color: var(--ct-alert); box-shadow: inset 4px 0 0 var(--ct-alert); }
.contact-field__input[aria-invalid="true"]:focus { box-shadow: inset 4px 0 0 var(--ct-alert), 0 0 0 3px rgba(161, 54, 31, .25); }

.contact-select { position: relative; }
.contact-select .contact-field__input { padding-right: 48px; cursor: pointer; }
.contact-select__icon { position: absolute; right: 18px; top: 50%; margin-top: -.5em; font-size: 14px; color: var(--ct-brass-text); pointer-events: none; }

.contact-form__foot { display: grid; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px dashed var(--ct-rule-strong); }
.contact-form__submit { width: 100%; }
.contact-form__submit[aria-disabled="true"] { opacity: .7; cursor: progress; }
.contact-form__privacy { margin: 0; font-size: .88rem; line-height: 1.55; color: #5d6168; }
.contact-form__privacy a { color: var(--ct-ink); font-weight: 700; text-decoration-color: var(--ct-brass-text); text-underline-offset: 3px; }

.contact-summary { margin: 0 0 26px; padding: 18px 20px; background: #fbefe9; border-left: 4px solid var(--ct-alert); border-radius: 2px; }
.contact-summary:focus { outline: 2px solid var(--ct-alert); outline-offset: 3px; }
.contact-summary__title { margin: 0 0 8px; color: var(--ct-ink); font: 600 1.05rem var(--font-head); }
.contact-summary__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.contact-summary__list a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ct-alert); font-weight: 700; text-underline-offset: 3px; }

.contact-status { margin-top: 28px; padding: 22px 22px 18px; border-radius: 2px; color: var(--ct-ink); }
.contact-status:focus { outline: 2px solid var(--ct-brass-text); outline-offset: 3px; }
.contact-status__title { margin: 0 0 8px; font: 600 1.2rem / 1.3 var(--font-head); }
.contact-status p { margin: 0 0 12px; }
.contact-status a { color: var(--ct-ink); font-weight: 700; text-decoration-color: var(--ct-brass-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact-status--error { background: #fbefe9; border-left: 4px solid var(--ct-alert); }
.contact-status--success { margin-top: 0; background: #eef4ec; border-left: 4px solid var(--ct-ok); }
.contact-status__lines { display: grid; gap: 2px; margin: 0 0 12px; padding: 0; list-style: none; }
.contact-status__lines a { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.contact-status__lines a:hover span { text-decoration: underline; }
.contact-status__lines .icon { flex: none; color: var(--ct-alert); }
.contact-status__copy {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--ct-rule-strong); border-radius: 3px; background: var(--white);
  color: var(--ct-ink); font: 600 .9rem var(--font-head); cursor: pointer;
}
.contact-status__copy:hover { border-color: var(--ct-ink); }
.contact-status__copy:focus-visible { outline: 2px solid var(--ct-brass-text); outline-offset: 2px; }
.contact-status__copied { min-height: 1.4em; margin: 8px 0 0 !important; font-size: .9rem; color: var(--ct-ok); font-weight: 700; }


/* 08 MAP ==================================================================== */
.contact-map { padding: var(--ct-pad) 0; background: var(--ct-black); color: rgba(255, 255, 255, .74); }
.contact-map__grid { display: grid; gap: 40px; }
.contact-map__title { margin: 0 0 22px; color: var(--white); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.03em; }
.contact-map__address {
  margin: 0 0 20px; padding: 18px 0 18px 18px;
  border-left: 2px solid var(--ct-brass);
  font-style: normal; color: var(--white); font-size: 1.05rem; line-height: 1.7;
}
.contact-map__address .contact-mono { display: block; margin-bottom: 6px; color: var(--ct-brass); font-size: .68rem; font-weight: 700; }
.contact-map__text { max-width: 44ch; margin: 0 0 26px; }
.contact-map__sheet { position: relative; min-width: 0; }
.contact-map__label { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: var(--ct-brass); font-size: .66rem; font-weight: 700; }
.contact-map__frame {
  position: relative; aspect-ratio: 4 / 3; padding: 8px;
  border: 1px solid rgba(196, 168, 116, .4); border-radius: 2px; background: var(--ct-panel);
}
.contact-map__iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 1px; background: #e8e6df; }


/* 09 SERVICE AREA ROUTE ===================================================== */
.contact-area { padding: var(--ct-pad) 0; background: var(--ct-stone); }
.contact-route { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* vertical route line on small screens */
.contact-route::before {
  content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 0;
  border-left: 2px dashed var(--ct-brass-text); opacity: .6;
}
.contact-route__stop { position: relative; display: grid; gap: 2px; padding: 12px 0 12px 42px; }
.contact-route__pin {
  position: absolute; left: 3px; top: 16px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ct-paper); border: 2px solid var(--ct-ink);
}
.contact-route__name { color: var(--ct-ink); font: 600 1.12rem / 1.3 var(--font-head); }
.contact-route__note { color: var(--ct-brass-text); font-size: .66rem; font-weight: 700; }
.contact-route__stop--base .contact-route__pin {
  left: -1px; top: 12px; width: 24px; height: 24px;
  background: var(--ct-brass); border-color: var(--ct-ink); box-shadow: 0 0 0 4px rgba(196, 168, 116, .3);
}
.contact-route__stop--base .contact-route__name { font-size: 1.3rem; }
.contact-area__more {
  max-width: 62ch; margin: 28px 0 0; padding: 14px 18px;
  background: var(--ct-paper); border: 1px dashed var(--ct-rule-strong); border-radius: 3px;
  color: var(--ct-ink); font-size: .98rem;
}


/* 10 WHAT HAPPENS NEXT ====================================================== */
.contact-steps { padding: var(--ct-pad) 0; background: var(--ct-ink); color: rgba(255, 255, 255, .72); }
.contact-steps .contact-head__title { color: var(--white); }
.contact-steps__list { position: relative; display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
.contact-step { position: relative; padding-top: 26px; border-top: 1px solid rgba(196, 168, 116, .5); }
/* a brass marker standing on the measured line */
.contact-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 2px; height: 18px; background: var(--ct-brass); }
.contact-step::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(196, 168, 116, .35) 0 1px, transparent 1px 12px);
}
.contact-step__n { margin: 0 0 12px; color: var(--ct-brass); font-size: .7rem; font-weight: 700; }
.contact-step__title { margin: 0 0 10px; color: var(--white); font-size: 1.25rem; }
.contact-step p:last-child { margin: 0; line-height: 1.65; }


/* 11 FAQ ==================================================================== */
.contact-faq { padding: var(--ct-pad) 0; background: var(--ct-stone); }
.contact-faq__grid { display: grid; gap: 36px; }
.contact-faq__head .contact-head__title { margin-bottom: 16px; }
.contact-faq__list {
  min-width: 0; padding: 8px 18px;
  background: var(--ct-paper); border: 1px solid var(--ct-rule); border-radius: 4px;
  box-shadow: 0 18px 40px -32px rgba(40, 32, 18, .45);
}
.contact-q { border-bottom: 1px solid var(--ct-rule); }
.contact-q:last-child { border-bottom: 0; }
.contact-q summary {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 34px; align-items: start; gap: 10px;
  min-height: 60px; padding: 18px 0;
  cursor: pointer; list-style: none;
}
.contact-q summary::-webkit-details-marker { display: none; }
.contact-q summary::marker { content: ""; }
.contact-q summary:focus-visible { outline: 2px solid var(--ct-brass-text); outline-offset: 3px; border-radius: 2px; }
.contact-q__num { padding-top: 4px; color: var(--ct-brass-text); font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.contact-q__text { margin: 0; color: var(--ct-ink); font: 500 1.04rem / 1.45 var(--font-head); overflow-wrap: break-word; transition: color .2s; }
/* round brass gauge with a plus that turns into a minus */
.contact-q__mark {
  position: relative; width: 34px; height: 34px;
  border: 1px solid var(--ct-rule-strong); border-radius: 50%; background: var(--white);
  transition: background-color .25s, border-color .25s;
}
.contact-q__mark::before,
.contact-q__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: var(--ct-ink); transition: transform .25s var(--ct-ease), background-color .25s;
}
.contact-q__mark::after { transform: rotate(90deg); }
.contact-q summary:hover .contact-q__text { color: var(--ct-brass-text); }
.contact-q summary:hover .contact-q__mark { border-color: var(--ct-ink); }
.contact-q[open] > summary .contact-q__mark { background: var(--ct-ink); border-color: var(--ct-ink); }
.contact-q[open] > summary .contact-q__mark::before,
.contact-q[open] > summary .contact-q__mark::after { background: var(--ct-brass); }
.contact-q[open] > summary .contact-q__mark::after { transform: rotate(0deg); }
.contact-q__a { padding: 0 0 22px; }
.contact-q[open] .contact-q__a { animation: contact-open .3s var(--ct-ease); }
.contact-q__a p { margin: 0; padding-left: 16px; border-left: 2px solid var(--ct-brass); color: var(--gray-700); line-height: 1.7; }
.contact-q__a a { color: var(--ct-ink); font-weight: 700; text-decoration-color: var(--ct-brass-text); text-underline-offset: 3px; }
.contact-q__a a:hover { color: var(--ct-brass-text); }
@keyframes contact-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* 12 FOOTER BAND ============================================================ */
.contact-explore { padding-top: 44px; padding-bottom: 8px; }
.contact-explore__title { margin-bottom: 20px; }
.contact-explore__list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; }
.contact-explore__list a { display: grid; align-content: start; gap: 4px; min-height: 44px; height: 100%; padding: 16px 18px; background: var(--black); text-decoration: none; }
.contact-explore__list strong { color: var(--white); font: 600 .98rem var(--font-head); }
.contact-explore__list span { font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.contact-explore__list a:hover { background: #151619; }
.contact-explore__list a:hover strong { color: var(--accent); }


/* 13 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .contact-q[open] .contact-q__a { animation: none; }
  .contact-q__mark, .contact-q__mark::before, .contact-q__mark::after,
  .contact-q__text, .contact-field__input { transition: none; }
}


/* 14 RESPONSIVE ============================================================= */
@media (max-width: 479px) {
  .contact-q summary { grid-template-columns: minmax(0, 1fr) 34px; }
  .contact-q__num { grid-column: 1 / -1; padding-top: 0; margin-bottom: -4px; }
  .contact-faq__list { padding: 4px 14px; }
  .contact-sheet__tab { left: 12px; }
  .contact-sheet { border-radius: 6px; padding: 28px 16px 22px; }
  .contact-tape, .contact-tape__svg { height: 32px; }
  .contact-tape__svg { width: 1920px; }
  .contact-hero { padding-bottom: calc(32px + 56px); }
  .contact-titleblock dd { font-size: .86rem; }
}
@media (min-width: 480px) {
  .contact-q__a { padding-left: 56px; padding-right: 44px; }
}
@media (min-width: 640px) {
  .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-field--full { grid-column: 1 / -1; }
  .contact-form__foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
  .contact-form__submit { width: auto; }
  .contact-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (min-width: 768px) {
  .contact-titleblock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-titleblock > div { border-top: 0; }
  .contact-titleblock > div + div { border-left: 1px solid var(--ct-line); }
  /* dimension lines above and beside the plate */
  .contact-plate { padding: 22px 0 0 22px; }
  .contact-plate__dim { display: block; position: absolute; pointer-events: none; }
  .contact-plate__dim--top {
    left: 22px; right: 0; top: 0; height: 12px;
    background:
      linear-gradient(rgba(196, 168, 116, .6), rgba(196, 168, 116, .6)) left 50% / 100% 1px no-repeat,
      linear-gradient(rgba(196, 168, 116, .9), rgba(196, 168, 116, .9)) left top / 1px 100% no-repeat,
      linear-gradient(rgba(196, 168, 116, .9), rgba(196, 168, 116, .9)) right top / 1px 100% no-repeat;
  }
  .contact-plate__dim--side {
    left: 0; top: 22px; width: 12px; height: calc(100% - 22px - var(--ct-plate-foot, 0px));
    background:
      linear-gradient(rgba(196, 168, 116, .6), rgba(196, 168, 116, .6)) 50% top / 1px 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(196, 168, 116, .45) 0 1px, transparent 1px 16px) left top / 6px 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(196, 168, 116, .8) 0 1px, transparent 1px 80px) left top / 12px 100% no-repeat;
  }
  .contact-plate__frame .contact-plate__dim--side { top: 0; left: -22px; height: 100%; }
  .contact-plate__frame .contact-plate__dim--top { top: -22px; left: 0; right: 0; }

  .contact-sheet { padding: 38px 40px 32px 76px; }
  /* margin scale down the left edge of the intake sheet */
  .contact-sheet::before {
    content: ""; position: absolute; top: 28px; bottom: 28px; left: 22px; width: 18px;
    background:
      repeating-linear-gradient(180deg, var(--ct-brass-text) 0 1px, transparent 1px 40px) left top / 18px 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(111, 88, 48, .5) 0 1px, transparent 1px 8px) left top / 9px 100% no-repeat;
    opacity: .7;
  }
  .contact-sheet::after { content: ""; position: absolute; top: 0; bottom: 0; left: 52px; width: 1px; background: rgba(196, 168, 116, .55); }

  .contact-map__frame { aspect-ratio: 16 / 11; }
  /* scale ticks along the top and left edges of the map frame */
  .contact-map__frame::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 10px;
    background:
      repeating-linear-gradient(90deg, rgba(196, 168, 116, .8) 0 1px, transparent 1px 60px) left bottom / 100% 10px no-repeat,
      repeating-linear-gradient(90deg, rgba(196, 168, 116, .4) 0 1px, transparent 1px 12px) left bottom / 100% 5px no-repeat;
  }
  .contact-map__frame::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 10px;
    background:
      repeating-linear-gradient(180deg, rgba(196, 168, 116, .8) 0 1px, transparent 1px 60px) right top / 10px 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(196, 168, 116, .4) 0 1px, transparent 1px 12px) right top / 5px 100% no-repeat;
  }
  .contact-map__sheet { padding-left: 14px; }

  .contact-explore__list { grid-template-columns: repeat(2, 1fr); }
  .page-contact .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  /* the route runs left to right with the dashed line through the pins */
  .contact-route { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .contact-route::before { left: 8px; right: 8px; top: 21px; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 2px dashed var(--ct-brass-text); }
  .contact-route__stop { padding: 52px 8px 0 0; }
  .contact-route__pin { left: 0; top: 14px; }
  .contact-route__stop--base .contact-route__pin { left: -4px; top: 10px; }
}
@media (min-width: 1024px) {
  .contact-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 64px; }
  .contact-head--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: end; max-width: none; }
  .contact-head--split .contact-head__title { margin-bottom: 0; }
  .contact-intake__grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: 40px; }
  .contact-note { position: sticky; top: 96px; margin-top: 34px; padding: 40px 52px 28px 34px; }
  /* brass ruler along the right edge of the field note */
  .contact-note::after {
    content: ""; position: absolute; top: 24px; bottom: 24px; right: 12px; width: 12px;
    background:
      repeating-linear-gradient(180deg, rgba(196, 168, 116, .85) 0 1px, transparent 1px 40px) right top / 12px 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(196, 168, 116, .4) 0 1px, transparent 1px 8px) right top / 6px 100% no-repeat;
  }
  .contact-sheet { padding: 44px 48px 36px 84px; }
  .contact-map__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: 64px; }
  .contact-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .contact-faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
  .contact-faq__head { position: sticky; top: 96px; }
  .contact-faq__list { padding: 10px 30px; }
  .contact-explore__list { grid-template-columns: repeat(4, 1fr); }
  .page-contact .footer__grid { grid-template-columns: 1.5fr 1.4fr 1fr 1fr; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* narrow desktops: keep the title block and the field tags in two columns */
  .contact-titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-titleblock > div:nth-child(n+3) { border-top: 1px solid var(--ct-line); }
  .contact-titleblock > div:nth-child(3) { border-left: 0; }
  .contact-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-intake__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 28px; }
  .contact-sheet { padding: 40px 32px 32px 76px; }
}
@media (min-width: 1440px) {
  .contact-hero__grid { gap: 88px; }
  .contact-tag { padding: 38px 26px 26px; }
}