/* Midcoast Clinic — shared design template v4.2.15
   SoT: scrape/clean-20260920 (shots + pages + form-computed.json + TEMPLATE.md)
   Architecture (one template; pages supply content only):
     1. tokens          — ink/fonts/grid/spacing (dump-locked)
     2. chrome          — announcement, header/nav (desk+mobile sticky), hairlines
     3. page shell      — .main / .page
     4. type            — headings, body, links
     5. grid/rows       — .row / .col-media / .col-text (598/34/598)
     6. components      — quote, profile, content-group, contact, form
     7. footer
     8. responsive      — bp 640px
   Do NOT copy /test/ brand/nav/spacing approximations.
   Typekit lzv1dxo. No Squarespace CDN. Breakpoint 640px.
*/

/* ========== 1. Design tokens ========== */
:root {
  --bg: #f7f7f7; /* dump shots: canvas; meta bodyBg white = content/chrome */
  --ink: #222;
  --link: rgba(82, 82, 82, 0.6);
  --link-hover: rgba(82, 82, 82, 0.36);
  --link-border: rgba(82, 82, 82, 0.18);
  --link-border-hover: rgba(82, 82, 82, 0.09);
  --rule: rgba(0, 0, 0, 0.12);
  --line: #ddd; /* dump hairlines */
  --chrome: #fff;
  --side-border: 10px;

  --font-title: "trajan-pro-3", "Times New Roman", Times, serif;
  --font-ui: "franklin-gothic-urw-cond", "Helvetica Neue", Arial, sans-serif;
  --font-body: "minion-pro", "Times New Roman", Times, serif;

  --fs-body: 13px;
  --lh-body: 26px;
  --track-body: 0.26px;
  --p-margin: 13px;

  --fs-heading: 16px;
  --lh-heading: 34.56px;
  --track-heading: 1.6px;

  --fs-nav: 11px;
  --track-nav: 0.27em;
  --fs-tagline: 11px;
  --track-tagline: 0.44em;
  --fs-brand: 21px;
  --track-brand: 0.19em;

  --col: 598px; /* was 608; −10 per side (Yves) */
  --col-gap: 34px;
  --content: 1230px;          /* 598 + 34 + 598 */
  --content-mobile: 425px;

  --main-pad-top-desktop: 48px; /* was 53; −5 under upper hairline (Yves) */
  --main-pad-top-mobile: 100px;
  --main-pad-x-desktop: 65px;
  --main-pad-x-mobile: 20px;
  --main-pad-bottom-desktop: 35px; /* was 52; −⅓ above footer hairline */
  --main-pad-bottom-mobile: 35px;  /* was 52; −⅓ above footer hairline */

  --row-gap-desktop: 150px;   /* About inter-row after first-row pad fix */
  --row-gap-mobile: 150px;    /* same as desktop; interview spacer supplies the rest */
  --profile-interview-spacer: 39px; /* 3×13 — with p-margin = 52 gap before interview */

  --nav-margin-top: 40px;     /* was 45; Yves try 40px tagline→nav */
  --header-pad-top: 45px; /* dump: logo lower (~45px under ann) */
  --header-rule-gap: 42px;    /* was 32; +10 hairline lower; main-pad-top −10 keeps content */

  /* Content-group (Research + Forms + future subpages) */
  --content-groups-top: 52px;    /* intro → first group */
  --content-group-gap: 13px;     /* between consecutive groups */
  --content-group-lh: 26px;      /* title + links; no margins */

  /* Contact layout (section wrappers + form row) */
  --stack-h2-bottom: 16px;       /* heading → copy inside contact-section */
  --contact-section-gap: 50px;   /* Hours → Appointments */
  --contact-section-gap-alt: 47px; /* Appointments → Directions */
  --contact-form-row-gap: 218px; /* Directions → Contact Form (desk + mob) */

  --map-w: 598px; /* track --col */
  --map-h: 408px;

  --quote-pad-x: calc(6% + 2px); /* ~71.9 → ~73.9 */
  --quote-pad-y-mobile: 40px;    /* was 52; mobile height 207 → ~184 */
  --quote-pad-y-desktop: 92px;
  --quote-fs: 18px;
  --quote-lh: 1.25;
  --attr-fs: 11px;
  --attr-track: 1.1px;
  --attr-lh: 4.8em;

  --input-h: 40px;
  --textarea-h: 100px;
  --select-h: 40px;
  --submit-w: 115px;
  --submit-h: 56px;
  --field-fs: 13px;
  --name-stack-bp: 440px;     /* keep First/Last side-by-side at 500px viewport */

  /* Shared form rhythm (control tops relative to form; desk targets) */
  --form-label-mb: 1.7em;        /* was 0.73em; +~blank line under each input (Yves) */
  --form-control-mt: 0.35em;     /* ~4.55px under label text */
  --form-name-legend-lh: 16px;
  --form-name-legend-mb: 4px;
  --form-name-sub-lh: 12px;
  --form-name-input-mt: 4px;     /* legend+sub+mt → Name inputs at 36 */
  --form-name-mb: 18px;          /* was 5.5; blank line under Name block (Yves) */
  --form-message-label-mb: 4px;  /* Message label → privacy */
  --form-textarea-mb: 14.5px;    /* Message→Provider control tops 145 */
  --form-submit-mt: 44px;        /* was 31; +a little (Yves 4.3.41) — Invisible Turnstile sits after Submit, zero height */

  --bp: 640px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: subpixel-antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--link);
  text-decoration: none;
  font-style: normal;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  padding-bottom: 0.05em;
  border-bottom: 1px solid var(--link-border);
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-border-hover);
}
a[href^="tel"] { color: var(--link); }

.site {
  min-height: 100vh;
  background: var(--bg);
  border: var(--side-border) solid var(--chrome); /* dump/www: white page frame */
  display: flex;
  flex-direction: column;
}

/* ========== 2. Chrome — announcement ========== */
.announcement {
  position: relative;
  z-index: 1;
  background: #1d1d1d;
  color: #fff;
  text-align: center;
}
.announcement.is-hidden { display: none; }
.announcement-text {
  margin: 0;
  padding: 0.8em 3em;
  font-family: var(--font-ui);
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.2em;
  text-transform: uppercase;
}
.announcement-text a {
  color: #fff !important;
  text-decoration: underline !important;
  border-bottom: 0 !important;
  padding-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.announcement-close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 2.8em;
  height: 2.78em;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 11px;
  text-align: center;
  line-height: 0;
}
.announcement-close::after {
  content: "×";
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 100;
  line-height: 2.7em;
  letter-spacing: normal;
  padding: 0;
  text-align: center;
}

/* ========== 2. Chrome — desktop header / nav ========== */
.header-desktop {
  display: none;
  text-align: center;
  padding: var(--header-pad-top) 45px 0;
  background: var(--bg);
}
.brand {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  text-rendering: optimizeLegibility;
  border-bottom: 0;
  padding-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.brand:hover { color: var(--ink); border-bottom: 0; }
.brand-title {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-style: normal;
  font-size: var(--fs-brand);
  letter-spacing: var(--track-brand);
  line-height: 0.9em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-tagline {
  display: block;
  margin-top: 20px; /* was 25; −5px OF HYPNOTHERAPY up (Yves FF) */
  font-family: var(--font-ui);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-tagline);
  letter-spacing: var(--track-tagline);
  line-height: 1em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-desktop {
  margin-top: var(--nav-margin-top);
  white-space: nowrap;
  line-height: 1em;
  font-family: var(--font-body); /* Minion Pro — not Franklin/tagline */
  font-weight: 600;
  font-style: normal;
  font-size: var(--fs-nav);
  letter-spacing: var(--track-nav); /* 0.27em ≈ 2.97px at 11px */
  text-transform: uppercase;
}
.nav-desktop a {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1.225em; /* was 1.15em (~423px); aim Home→Contact ~430px */
  padding: 0.618em 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  transition: color 170ms ease-in-out;
}
.nav-desktop a:hover { color: rgba(34, 34, 34, 0.4); border-bottom: 0; }
.nav-desktop a.is-active { color: var(--ink); }
/* Shared hairline primitive (dump shots: thin gray #ddd) */
.rule,
.header-rule,
.chrome-rule,
.footer-rule {
  margin: 0;
  height: 0;
  border: 0;
  border-top: 1px solid var(--line);
  max-width: 100%;
  background: transparent;
}
.header-rule {
  display: none; /* mobile: chrome-rule; desktop: shown in min-width 640 */
  margin-top: var(--header-rule-gap); /* space under nav — not glued */
}
.chrome-rule {
  display: none; /* mobile hairline is .content-top-rule in gray above photo */
}
.content-top-rule {
  display: none;
  height: 1px;
  border: 0;
  margin: 0;
  padding: 0;
  background: var(--line);
  max-width: 100%;
}

/* ========== 2. Chrome — mobile (dump: logo → announcement → hairline) ========== */
.mobile-chrome {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--chrome);
}
.header-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 72px; /* 10 above title + title~16 + 15 + OF~11 + 20 under (+5 from 15) */
  padding: 0;
  background: var(--chrome);
  -webkit-font-smoothing: subpixel-antialiased;
}
/* Title centered between left/right sides of the bar (not in leftover space beside hamburger) */
.brand-mobile {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 56px); /* leave room for hamburger */
  white-space: normal;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
  padding: 10px 0 0; /* Yves: 10px above Midcoast Clinic */
  text-align: center;
  text-rendering: optimizeLegibility;
  border-bottom: 0;
  font-size: inherit;
  letter-spacing: inherit;
  z-index: 1;
}
.brand-mobile:hover { border-bottom: 0; color: var(--ink); }
.brand-mobile .brand-title {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: var(--track-brand);
  line-height: 0.9em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.brand-mobile .brand-tagline {
  display: block;
  margin-top: 15px; /* Yves: match space under OF */
  margin-bottom: 20px; /* Yves: +5px under OF (was 15) */
  font-family: var(--font-ui);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-tagline); /* 11px — same as desk */
  letter-spacing: var(--track-tagline);
  line-height: 1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.menu-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.hamburger {
  display: block;
  width: 24px;
  height: 18px;
  overflow: visible;
  flex-shrink: 0;
}

/* ========== 2. Chrome — mobile overlay ========== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--chrome);
  padding: 36px;
  -webkit-font-smoothing: subpixel-antialiased;
}
.mobile-overlay[hidden] { display: none !important; }
.overlay-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(82, 82, 82, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.overlay-close .icon-close {
  width: 16px;
  height: 16px;
  display: block;
}
.nav-mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-nav);
  letter-spacing: var(--track-nav);
  line-height: 2.2em;
  text-transform: uppercase;
}
.nav-mobile a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0;
  padding: 11px 0 6.8px;
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}
.nav-mobile a + a { padding: 0 0 6.8px; }
.nav-mobile a:hover { color: rgba(34, 34, 34, 0.5); border-bottom: 0; }
body.nav-open { overflow: hidden; }

/* ========== 3. Page shell ========== */
.main {
  flex: 1;
  /* dump/www: body text sits on gray canvas (#f7f7f7), not a white card */
  background: transparent;
  margin: 0;
  padding: var(--main-pad-top-mobile) var(--main-pad-x-mobile) var(--main-pad-bottom-mobile);
}
/* Normal pages: no trailing margin under last block (pad-bottom owns the gap) */
.main > :last-child,
.content-group:last-child {
  margin-bottom: 0;
}
/* Flush trailing child margin before shared page pad (About +13 fix, etc.) */
.flow > :last-child {
  margin-bottom: 0;
}
/* Home keeps 35px bottom (desk + mob) */
.main.page-home {
  --main-pad-bottom-desktop: 3px; /* was 13; −10 under Erickson (Yves) */
  --main-pad-bottom-mobile: 3px;
}
.page {
  width: 100%;
  max-width: var(--content-mobile);
  margin: 0 auto;
}

/* ========== 4. Type ========== */
.col-text h1,
.page-heading,
.heading {
  font-family: var(--font-ui);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-heading);
  letter-spacing: var(--track-heading);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
/* Shared stacked-section h2 (Contact + future subpages) */
.col-text h2 {
  font-family: var(--font-ui);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-heading);
  letter-spacing: var(--track-heading);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--stack-h2-bottom);
}
.col-text h2:first-child {
  margin-top: 0;
}
.col-text p,
.prose p {
  margin: var(--p-margin) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}

/* ========== 5. Grid / rows ========== */
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px; /* mobile image → heading */
  align-items: start;
  width: 100%;
}
.row + .row {
  margin-top: var(--row-gap-mobile);
}
.col-media {
  background: transparent; /* photo white border is in the JPEG */
  padding: 0;
  width: 100%;
}
.col-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.col-text {
  min-width: 0;
}

/* ========== 6. Component — profile ========== */
/* After .col-text p / .flow rules so this wins. 52 = 13 + 39 spacer. */
.profile-row .col-text.flow > .profile-interview {
  margin-top: 52px;
  margin-bottom: 0;
}
.profile-row + .profile-row {
  margin-top: 150px;
}

/* ========== 6. Component — quote (dump: hairlines frame quote) ========== */
/* Paragraph immediately before a quote: flush bottom (fixes quote Y −12/−13) */
.row:has(+ .quote) .col-text > p:last-of-type {
  margin-bottom: 0;
}
.quote {
  /* Bleed ±17 past content edge; do not use row-gap as quote margin */
  /* Yves: no hairlines on quote — only above picture + above copyright */
  width: calc(100% + 34px);
  max-width: calc(100% + 34px);
  margin: 17px -17px 0;
  padding: calc(var(--quote-pad-y-mobile) - 10px) var(--quote-pad-x) max(0px, calc(var(--quote-pad-y-mobile) - 50px)); /* −10 above quote; −50 under */
  text-align: center;
  box-sizing: border-box;
  border: 0;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--quote-fs);
  letter-spacing: normal;
  line-height: var(--quote-lh);
  color: var(--ink);
  border: 0;
}
.quote cite,
.quote .quote-attr {
  display: block;
  margin-top: 0;
  padding-top: 0.5em; /* was 0.5em+5; another −5 above Milton (Yves) */
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 400;
  font-size: var(--attr-fs);
  letter-spacing: var(--attr-track);
  line-height: var(--attr-lh);
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}

/* ========== 6. Component — content-group ========== */
/* Intro → groups: sole top on wrapper (kill intro p bottom margin stacking) */
.col-text > p:has(+ .content-groups),
.prose > p:has(+ .content-groups) {
  margin-bottom: 0;
}
.content-groups {
  margin: var(--content-groups-top) 0 0;
  padding: 0;
}
.content-group {
  margin: 0;
  padding: 0;
}
.content-group + .content-group {
  margin-top: var(--content-group-gap);
}
.content-group:last-child {
  margin-bottom: 0;
}
/* Reset every child margin so lh alone controls title↔link (26) */
.content-group p,
.content-group ul,
.content-group li,
.content-group__title,
.content-group__links {
  margin: 0;
  padding: 0;
}
.content-group a {
  margin: 0;
}
.content-group__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  font-style: normal;
  letter-spacing: var(--track-body);
  line-height: var(--content-group-lh);
  text-transform: none;
  color: var(--ink);
}
.content-group__links {
  line-height: var(--content-group-lh);
}
.content-group__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.content-group__links li {
  margin: 0;
  padding: 0;
  line-height: var(--content-group-lh);
  font-size: var(--fs-body);
}
.content-group__links a {
  font-style: normal;
  font-size: var(--fs-body);
  line-height: var(--content-group-lh);
  letter-spacing: var(--track-body);
}

/* ========== 6. Component — contact map ========== */
.contact-map {
  width: 100%;
  height: var(--map-h);
  background: #e5e3df; /* Google tiles load into this box */
  border: 1px solid #ddd;
  position: relative;
  overflow: hidden;
  padding: 0;
}
/* Undo only the site rules that crush Google tiles — do NOT override width/height/display (Maps sets those) */
.contact-map img,
.col-media .contact-map img {
  max-width: none !important;
  aspect-ratio: unset !important;
  object-fit: unset !important;
}
/* Site-wide `a` (body size + letter-spacing + underline) squashes Terms / Report a map error */
.contact-map a,
.contact-map .gm-style a {
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  color: #5f6368 !important; /* Google attribution gray — not site link blue */
}
.contact-map .gm-style-cc,
.contact-map .gm-style .gm-style-cc {
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 14px !important;
  letter-spacing: normal !important;
}
/* Hide only control buttons; leave attribution alone */
.contact-map .gm-bundled-control,
.contact-map .gm-fullscreen-control,
.contact-map button.gm-control-active,
.contact-map button[aria-label*="Camera" i],
.contact-map button[aria-label*="Map camera" i],
.contact-map button[aria-label*="Fullscreen" i],
.contact-map button[aria-label*="Toggle fullscreen" i],
.contact-map button[aria-label*="Zoom" i] {
  display: none !important;
}
.col-text .addr,
.col-text .hours {
  margin: var(--p-margin) 0;
  line-height: var(--lh-body);
}

/* ========== 6. Component — contact sections ========== */
.contact-layout,
.page-contact,
.main.page-contact {
  --contact-form-row-gap: 218px;
}
.contact-section {
  margin: 0;
  padding: 0;
}
.contact-section h1,
.contact-section h2 {
  margin: 0 0 var(--stack-h2-bottom);
}
.contact-section h1:first-child,
.contact-section h2:first-child {
  margin-top: 0;
}
/* Contact → Hours: spacer inside first section (preserve prior rhythm) */
.contact-layout .spacer {
  margin: var(--p-margin) 0;
  min-height: var(--lh-body);
}
/* Contact → Hours: spacer in first section + 16 (was .spacer + h2) */
.contact-layout > .contact-section:nth-of-type(2) {
  margin-top: 16px;
}
/* Hours → Appointments: 50px (end copy → next heading) */
.contact-layout > .contact-section:nth-of-type(3) {
  margin-top: var(--contact-section-gap);
}
/* Appointments → Directions: 47px */
.contact-layout > .contact-section:nth-of-type(4) {
  margin-top: var(--contact-section-gap-alt);
}
/* Flush last contact-section bottom (form-row gap owns Directions→Form) */
.contact-section:last-child {
  margin-bottom: 0;
}
.contact-section:last-child > p:last-child {
  margin-bottom: 0;
}

/* Hairline between Directions and Contact form (dump <hr>) —
   keep full Directions→Form gap; padding avoids margin-collapse eating space */
.contact-form-rule {
  display: block;
  width: 100%;
  max-width: var(--content-mobile);
  margin: 0 auto;
  padding: calc(var(--contact-form-row-gap) / 2) 0;
  box-sizing: border-box;
  border: 0;
  height: auto;
  /* 1px hairline centered in the preserved gap */
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}
/* Form row gap — Directions → Contact Form = 218 when no rule */
.row + .row.row-form {
  margin-top: var(--contact-form-row-gap);
}
.contact-form-rule + .row.row-form {
  margin-top: 0; /* gap owned by .contact-form-rule padding (full 218) */
}
.row.row-form {
  gap: 34px; /* mobile: intro paragraph → form begins 34px */
}
.row.row-form .form-intro > p:last-child {
  margin-bottom: 0;
}
.contact-form > form {
  margin: 0;
  padding: 0;
}
.contact-form > form > :first-child {
  margin-top: 0;
  padding-top: 0;
}

/* ========== 6. Component — contact form (form-computed.json) ========== */
.contact-form {
  width: 100%;
}
.contact-form .form-intro {
  margin-bottom: 16px;
}
.contact-form label,
.contact-form .field-label,
.contact-form legend {
  display: block;
  margin: 0 0 var(--form-label-mb);
  /* form-computed.json: minion 13px, #222, not uppercase, letter-spacing 0.26px */
  font-family: "minion-pro", "Times New Roman", Times, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.26px;
  line-height: normal;
  text-transform: none;
  color: #222;
}
/* Name block: legend + 12px sub-labels → inputs at 36; mb → Phone Δ76 */
.contact-form fieldset.field-name {
  border: 0;
  margin: 0 0 var(--form-name-mb);
  padding: 0;
  min-width: 0;
}
.contact-form fieldset.field-name legend {
  padding: 0;
  margin: 0 0 var(--form-name-legend-mb);
  line-height: var(--form-name-legend-lh);
  float: left;
  width: 100%;
}
.contact-form fieldset.field-name .name-row {
  clear: both;
}
.contact-form .req {
  font-family: "minion-pro", "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26px;
  text-transform: none;
  color: #222; /* dump: same ink */
  opacity: 0.7;
}
.contact-form .name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form .sub-label {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--form-name-sub-lh);
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--ink);
}
.contact-form .sub-label input {
  margin-top: 0;
  margin-bottom: 0;
}
/* Dump form HTML + form-screenshot: caption ABOVE the box (label then input) */
.contact-form .sub-label .caption {
  display: block;
  margin: 0 0 4px;
  font-family: "minion-pro", "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26px;
  line-height: var(--form-name-sub-lh);
  text-transform: none;
  color: #222;
}
.contact-form .hint {
  display: block;
  margin: 0.25em 0 0.65em;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: #666;
  line-height: 1.5;
  font-weight: 400;
}
/* Privacy: 12px Minion, ink, normal lh; pad 6 0; mb 4 → Message at 384/400 */
.contact-form .privacy-note {
  display: block;
  font-family: "minion-pro", "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26px;
  line-height: normal;
  text-transform: none;
  color: #222;
  opacity: 0.7;
  padding: 6px 0;
  margin: 0 0 4px;
}
/* Message label sits between Subject and privacy; tight mb into privacy */
.contact-form label[for="message"] {
  margin-bottom: var(--form-message-label-mb);
}
.contact-form .privacy-note + textarea {
  margin-top: 0; /* privacy mb 4 owns the gap → Message at 384/400 */
}
/* Callback label: no trailing mb so submit mt alone sets Callback→Submit 58 */
.contact-form form > label:last-of-type {
  margin-bottom: 0;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  display: block;
  width: 100%;
  margin-top: var(--form-control-mt);
  /* form-computed.json: padding 10px; border 1px #a9a9a9; bg #fafafa; color #000; radius 0; minion 13px */
  padding: 10px;
  border: 1px solid #a9a9a9;
  background: #fafafa;
  font-family: "minion-pro", "Times New Roman", Times, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  color: #000;
  border-radius: 0;
  line-height: normal;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: #222;
}
.contact-form input,
.contact-form select {
  height: 40px;
}
.contact-form select {
  height: 40px;
  padding: 10px 28px 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23222' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: #fafafa;
}
.contact-form textarea {
  height: 100px;
  min-height: 100px;
  margin-top: var(--form-control-mt);
  margin-bottom: var(--form-textarea-mb);
  padding: 10px;
  resize: vertical;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--form-submit-mt);
  width: auto;
  min-width: var(--submit-w);
  height: 56px;
  padding: 13px 32.5px;
  border: 2px solid #222;
  background: transparent;
  color: #222;
  font-family: "franklin-gothic-urw-cond", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.3px;
  line-height: 26px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.1s linear, color 0.1s linear;
  box-sizing: border-box;
}
a.button {
  border-bottom: 2px solid var(--ink);
  line-height: var(--submit-h);
  font-size: 13px;
}
.button:hover {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-color: var(--ink);
}
/* Thank-you uses .form-intro (same h2/p as Contact form) — no box */
.form-error {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.form-error p {
  margin: 0 0 var(--p-margin);
}
.form-error p:last-child {
  margin-bottom: 0;
}

/* ========== 7. Footer ========== */
.site-footer {
  padding: 0;
  text-align: center;
  min-height: 208px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.footer-inner {
  padding: 27px 20px 38px; /* was 43; another −5 under copyright (Yves) */
}
.footer-rule {
  /* border from shared .rule; spacing only */
  margin: 0 0 28px;
}
.copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--track-body);
  line-height: 1.6;
  color: rgba(29, 29, 29, 0.3);
}
.copyright em { font-style: italic; }

/* ========== 8. Responsive — mobile (< 640px) ========== */
@media (max-width: 639px) {
  .mobile-chrome { display: block; }
  .header-mobile { display: flex; }
  .header-desktop { display: none !important; }
  .chrome-rule { display: none !important; }
  .content-top-rule { display: block; }
  .main { padding-top: 59px; }
  .content-top-rule { margin-bottom: 40px; }
  .copyright { font-size: 11px; } /* was 12; keep one line on iPhone */

  .contact-map {
    height: var(--map-h); /* 408 — not 280 */
  }

  /* Keep First/Last side-by-side down to ~440px (Yves: side-by-side at 500) */
  .contact-form .name-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}


/* ========== 8. Responsive — desktop (≥ 640px) ========== */
@media (min-width: 640px) {
  .mobile-chrome {
    position: relative; /* desktop: announcement first, not sticky */
    z-index: auto;
    background: transparent; /* announcement sits on canvas; logo hidden */
  }
  .header-mobile { display: none !important; }
  .header-desktop { display: block; }
  .header-rule { display: block; } /* under nav with --header-rule-gap; not glued */
  .chrome-rule { display: none !important; }
  .mobile-overlay { display: none !important; }

  .main {
    margin: 0;
    padding: var(--main-pad-top-desktop) var(--main-pad-x-desktop) var(--main-pad-bottom-desktop);
  }
  .page {
    max-width: var(--content);
  }
  .contact-form-rule {
    max-width: var(--content);
  }

  .site-footer { min-height: 157px; }
  .footer-inner { padding: 27px var(--main-pad-x-desktop) 38px; } /* was 43; another −5 */

  /* Fluid equal columns — shrink with viewport (match www mid-width scale) */
  .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--col-gap);
    max-width: var(--content);
    width: 100%;
  }
  .row + .row {
    margin-top: var(--row-gap-desktop);
  }

  .col-media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .col-media img {
    width: 100%;
    max-width: 100%;
  }

  /* Map fills media column at fluid width × --map-h (fixed height — Maps needs a real height) */
  .col-media .contact-map {
    width: 100%;
    max-width: 100%;
    height: var(--map-h);
  }

  .quote {
    width: calc(100% + 34px);   /* 1230 + 17*2 = 1264 */
    max-width: calc(100% + 34px);
    margin: 17px -17px 0; /* was 28; desktop quote Y only — pad unchanged */
    padding: calc(var(--quote-pad-y-desktop) - 10px) var(--quote-pad-x) calc(var(--quote-pad-y-desktop) - 50px); /* −10 above quote; −50 under */
  }

  /* Contact: first-row ~17px higher than other pages */
  .main.page-contact {
    --main-pad-top-desktop: 66px;
  }

  /* Form row: ~⅓ intro | ~⅔ fields; gap 34 → --content */
  .row + .row.row-form {
    margin-top: var(--contact-form-row-gap);
  }
  .row.row-form {
    grid-template-columns: minmax(0, 377fr) minmax(0, 787fr);
    gap: var(--col-gap);
    align-items: start;
  }
  .row.row-form .form-intro {
    max-width: none;
  }
  .row.row-form .contact-form {
    max-width: none;
    width: 100%;
  }
  .row.row-form.row-form-success {
    grid-template-columns: minmax(0, 377fr) minmax(0, 787fr);
  }
  .row.row-form.row-form-success .form-intro {
    max-width: none;
  }
}

@media (min-width: 768px) {
  .header-desktop { padding: var(--header-pad-top) 65px 0; }
  .main {
    margin: 0;
    padding: var(--main-pad-top-desktop) var(--main-pad-x-desktop) var(--main-pad-bottom-desktop);
  }
  .footer-inner { padding: 27px 65px 38px; } /* was 43; another −5 */
}

@media (min-width: 1024px) {
  .main {
    margin: 0;
    padding: var(--main-pad-top-desktop) var(--main-pad-x-desktop) var(--main-pad-bottom-desktop);
  }
}

/* Narrow desktop: shrink equal columns; form stacks */
@media (min-width: 640px) and (max-width: 900px) {
  .row {
    grid-template-columns: 1fr 1fr;
  }
  .col-media {
    width: 100%;
    max-width: 100%;
  }
  .col-media img {
    width: 100%;
  }
  .col-media .contact-map {
    width: 100%;
  }
  .row.row-form {
    grid-template-columns: 1fr;
  }
  .row.row-form .form-intro,
  .row.row-form .contact-form {
    max-width: 100%;
  }
}

/* Contact honeypot — off-screen; keep in DOM for bots */
.contact-form .cf-turnstile {
  height: 0;
  margin: 0;
  overflow: hidden;
}
.contact-form .hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}