/* =============================================================================
   page-contact.css — /contact/ only.

   Shared elements (.container, .band, .btn/.btn--solid, .eyebrow, .t-script,
   .social/.social__btn, header, footer) come from site.css and are used
   verbatim; only the genuinely Contact-specific pieces live here, all prefixed
   `contact-` / `contact__` / `cf-` (the enquiry form).

   Every number is measured off design/Contact/mockup.png (3204x2512 = @2x, so
   every raw value is HALVED) via notes/spec-contact.md. Ink positions quoted in
   comments are mockup CSS-px y values.

   Page skeleton (CSS px):
     0    – 1     1px full-bleed #D8C2A8 hairline   (unique to this page)
     0    – 112   header (overlays; the hairline is out of flow)
     1    – 851   contact band, cream
     851  – 1209  footer
   ============================================================================= */

.page-contact {
  /* Display scale — re-derived for Young Serif 400 (notes/typography.md).
     The old 53px/700 value was fitted to Fraunces AND synthesised bold; Young
     Serif ships one weight, so 700 was faking a stroke the face does not have
     and inflated line 1 from 435.5 to 483 ink px.
     48px / weight 400 / tracking 0 is fixed by three independent measurements
     against the mockup, all in CSS px:
       ink width  "Share your vision."  435.7 rendered vs 435.5 measured (+0.2)
       ink width  "Check your date."    391   rendered vs 390   measured (+1.0)
       word starts L1  0 / 157.0 / 278.9 vs mockup 0 / 156.0 / 278.0 (max 1.0)
                   L2  0 / 156.3 / 278.2 vs mockup 0 / 155.0 / 278.0 (max 1.3)
     Cap 'S' renders 36.8 vs the mockup's 37.5 at the true 50% crossing (-0.7);
     heights are threshold-sensitive on these exports and widths are not
     (typography.md, "Reproducing this"), so the widths are the anchor. */
  --ct-h1:      48px;
  --ct-h1-lh:   55px;   /* measured pitch: L1 ink top 237.5 -> L2 ink top 292.5 */
  /* Script accent — Great Vibes 400, not Pinyon. The spec's acceptance test is a
     229 x 24 ink box at x217.5. Great Vibes at 23.5px renders 228.8 x 22.3;
     at typography.md's 25px inline-accent step it would be 243.5 (+6.3%). */
  --ct-script:  23.5px;
  /* Lede measure. Body is 14px now, and at 14px Jost reproduces the comp's own
     line widths almost exactly — L1 324.6 vs 324.0, L2 351.4 vs 349.5,
     L3 338.4 vs 336.5 (advances vs measured ink) — so the comp's own 352px
     measure works verbatim. The old 404px was the +14% compensation for 16px. */
  --ct-measure: 352px;

  /* Enquiry-form rhythm. Measured from each label's cap-top G:
       +0  label cap-top   ·  +34 placeholder cap-top  ·  +45 placeholder baseline
       +61 the 1px rule (textarea +124)  ·  +89 next label cap-top
     Group pitch is a constant 88.75 (spec: 88.5/89/89/88.5 across four gaps). */
  --cf-pitch:      88.75px;
  --cf-lh:           26px;   /* placeholder / value line box */
  --cf-pad-top:      19px;   /* label box bottom -> text line box top */
  --cf-pad-bottom:  8.5px;   /* text line box bottom -> the rule */
  --cf-area-extra:   63px;   /* textarea rule is at +124 instead of +61 */
}

/* ------------------------------------------------------- page-top hairline ---
   1px, #D8C2A8, full-bleed x0…1602, sitting ABOVE the header. Taken out of flow
   so the header still begins at y0 and the nav CTA lands at y38 as measured — in
   normal flow it would push every measurement on the page down by 1px. */
.contact-toprule {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--tan);
  z-index: 30;
}

/* ==================================================== the contact section === */
/* Band y1–851. Header is 112 tall, first ink (both columns) is at y~196, last
   ink is the submit button's bottom edge at y759, band ends y851.5. */
.contact {
  padding-top: 82.3px;     /* 112 + 82.3 = 194.3 = grid top */
  padding-bottom: 92.5px;  /* 759 -> 851.5 */
}

/* 1168 content box at x217 (.container) split into two 536px tracks, gap 96.
   (1168 - 96) / 2 = 536 exactly, so 1fr 1fr is the measured grid.
   `.contact-split` is the SAME grid, reused by every copy section added below,
   so column edges stay on x217 / x849 / x1385 the whole way down the page. */
.contact__inner,
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}

/* ----------------------------------------------------------- left column --- */
/* Vertical rhythm, ink-to-ink: eyebrow->H1 34 · H1->script 20.5 ·
   script->body 44 · body->first contact row 49 · last row->social 43. */
.contact__eyebrow {
  line-height: 1;          /* site.css .eyebrow inherits the 27px body leading */
  padding-top: 1.5px;      /* measured correction: lands the cap top on y196.5 */
  margin: 0 0 27.2px;      /* lands H1 line-1 ink top on y238 (mockup 237.5) */
}

.contact__title {
  margin: 0;
  font-size: clamp(34px, 3vw, var(--ct-h1));
  line-height: calc(var(--ct-h1-lh) / var(--ct-h1));
  font-weight: 400;        /* Young Serif has ONE weight — 700 synthesises a fake stroke */
  letter-spacing: 0;
  color: var(--brown);
}

/* out-specifies site.css .t-script (clamp 24…32px) */
.contact__script {
  margin: 16.6px 0 0;
  font-size: var(--ct-script);
  line-height: 1;
}

/* The intro is now the approved copy's three opening beats rather than the comp's
   single condensed paragraph, so it is a block of <p>s. The measured 352px measure
   and 26px leading are kept verbatim — only the number of lines changes. */
.contact__lede {
  margin: 40.3px 0 0;
  max-width: var(--ct-measure);
  font-size: 18px;         /* site body size; measured 14.0 on this page (see :root note) */
  line-height: 31px;       /* measured 26 on this page; About measures 27 */
  color: var(--body);
}
.contact__lede p { margin: 0 0 18px; }
.contact__lede p:last-child { margin-bottom: 0; }

/* contact details — icon + text, row pitch 33.5, icon->text gap 13.
   13px, NOT the 14px body: measured ink widths are 165.0 / 83.0 / 249.0 against
   Jost-at-16px renders of 201 / 101 / 304, i.e. 16 x 0.821 = 13.13px. 13px is the
   site's footer-body step; it renders 163.3 / 83.6 / 245.8 (max residual -3.2). */
.contact__details { margin-top: 36.5px; }
.contact__details li {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 26px;
  font-size: 18px;
  line-height: 31px;
  color: var(--body);
}
.contact__details li + li { margin-top: 7.5px; }   /* 26 + 7.5 = 33.5 pitch */
.contact__details a { text-decoration: none; transition: color .18s ease; }
.contact__details a:hover { color: var(--brown); }
.contact__icon {
  flex: 0 0 13px;
  width: 13px; height: 13px;
  color: var(--burgundy);
}

/* social pair — the shared component at this page's size/colour:
   36x36 (footer is 32), 1px tan border, #7A6A5F icons at 14px. */
.contact__social { margin-top: 36.7px; gap: 12px; }
.contact__social .social__btn {
  width: 36px; height: 36px;
  border-color: var(--tan);
  color: var(--body);
}
.contact__social .social__btn:hover { border-color: var(--burgundy); color: var(--burgundy); }
.contact__social .social__btn svg { width: 14px; height: 14px; }

/* ------------------------------------------------------- form column head ---
   The approved copy heads the form "Send Your Message". It is a SUB-head inside
   the hero band, so it takes the shared small display step (.t-display-sm, 23px)
   and the shared .eyebrow-rule — one tier under the 43px section heads used by
   the copy sections lower down, and well under the 48px H1 beside it. */
.contact__formtitle { margin: 0; }
.contact__formcol .eyebrow-rule { margin-top: 14px; }

/* Carries the comp's lede sentence verbatim, at the page's measured 14/26 body.
   Full 536 track, not the intro column's 352 measure. */
.contact__formlede {
  margin: 24px 0 40px;
  font-size: 18px;
  line-height: 31px;
  color: var(--body);
}

/* ================================================= the enquiry form (right) ==
   Five stacked full-track fields. The controls are NOT boxes: no background, no
   padding-inline, radius 0, and a 1px #D8C2A8 rule on the bottom edge only.
   Rules measured at y257 / 346 / 434.5 / 523.5 / 675, all spanning x849–1385. */
.contact-form { margin: 0; }

.cf-field { margin-bottom: calc(var(--cf-pitch) - 63.5px); }  /* 9 label + 54.5 control */

.cf-label {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .2em;    /* tuned to the five acceptance ink widths, not 0.16 */
  text-transform: uppercase;
  color: var(--body);
}

.cf-control {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--cf-pad-top) 0 var(--cf-pad-bottom);
  font-family: var(--font-body);
  /* 400, not the 300 body weight. Fixed by word-start drift against the mockup:
     for the textarea placeholder, Jost 400 @14px puts the ten word starts at
     37.8/67.7/110.3/140.2/183.1/209.4/231.5/273.5/298.5/339.1 vs the mockup's
     37.5/67.5/110/140/183/209/231.5/273/299/339.5 — max residual 0.5px over
     339px, no drift. Jost 300 @14px drifts to -10.3px by the last word; 300 at
     any size that fixes the end (14.4px) then breaks the middle. Confirmed on a
     second string ("Barton Creek Resort, " 125.9 vs 125.0). */
  font-weight: 400;
  font-size: 18px;
  line-height: var(--cf-lh);
  color: var(--brown);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tan);
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  transition: border-color .18s ease;
}
.cf-control::placeholder { color: #C5BDB5; opacity: 1; }
.cf-control:focus { outline: 0; border-bottom-color: var(--burgundy); }
.cf-control:focus-visible { outline: 0; border-bottom-color: var(--burgundy); }

/* textarea rule sits at label-cap-top +124 instead of +61 — 63px taller */
.cf-control--area {
  height: calc(var(--cf-pad-top) + var(--cf-lh) + var(--cf-area-extra) + var(--cf-pad-bottom) + 1px);
  /* resize:none, not vertical — Chrome paints a diagonal grip in the bottom-right
     corner of any resizable textarea, and that grip is ink the comp does not have
     (it would sit on the tan rule). The field still scrolls when it overflows.
     One-line reversal if the client prefers the drag handle. */
  resize: none;
  overflow: auto;
}

/* button top = the textarea rule + 40 (= label cap-top +164) */
.cf-field--story { margin-bottom: 39.2px; }

/* 180x44 at x849, left-aligned in the track — not full width. Reuses .btn.btn--solid;
   display:flex (not inline-flex) so it is block-level and its top edge is the
   measured y715, with no line-box baseline leading underneath it. */
.contact-form__submit {
  display: flex;
  width: 180px;
  min-height: 44px;
  padding: 0 0 0 3px;      /* 3px left pad offsets the trailing letter-space so the
                              INK centres on x939.5 as measured, not the text box */
  /* The two buttons in this comp are NOT tracked alike: at the shared .btn's
     11px/.14em our render gives CHECK YOUR DATE 115 ink px (mockup 113, +2) but
     SEND ENQUIRY 92 (mockup 97.5, -5.5). Same size, same face, opposite errors —
     so the submit label carries its own tracking. .185em renders 97.6. */
  letter-spacing: .185em;
}

/* ======================================================== copy sections =====
   The comp carried only the intro + form; the approved copy adds five further
   sections. They are built with the SAME band rhythm the rest of the site uses:
   full-bleed .band, the 1168 .container, this page's own 536 / 96 / 536 grid,
   heading + .eyebrow-rule in the left track, body in the right. No new type
   step, no new colour, no new component — the headings are the shared
   .t-display-s h2 tier, the rules the shared .eyebrow-rule.

   Band padding is the site's section-padding step: /services/ band 1 measures
   92.25 top and bottom, so 92 is used here. */
.contact-sec { padding: 92px 0; }

.contact-split__head { min-width: 0; }
.contact-split__body { min-width: 0; }
.contact-split__head h2 { margin: 0; }

/* body prose — the page's measured 14/26, paragraph gap 18 (About's step) */
.contact-prose,
.contact-lead,
.contact-listhead,
.contact-list,
.contact-email { font-size: 18px; line-height: 31px; }

.contact-prose p { margin: 0 0 18px; }
.contact-prose p:last-child { margin-bottom: 0; }

/* inline prose link — same underline treatment as the shared .textlink, at body
   size, because .textlink itself is an 11px uppercase micro-label and cannot sit
   inside a sentence. See the shared-library request in the build report. */
.contact-prose a {
  color: var(--burgundy);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 13, 26, .35);
  transition: border-color .18s ease;
}
.contact-prose a:hover { border-bottom-color: var(--burgundy); }
.band--burgundy .contact-prose a {
  color: var(--cream);
  border-bottom-color: rgba(247, 244, 239, .4);
}
.band--burgundy .contact-prose a:hover { border-bottom-color: var(--cream); }

/* section lead line — the first, slightly larger beat under a section heading.
   Same relationship as /services/ .services-lead: display serif, one step down. */
.contact-lead {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.4vw, 22.5px);   /* the site's h3 display step (About h3) */
  line-height: 32px;
  font-weight: 400;                        /* Young Serif ships ONE weight */
  color: var(--brown);
}
.band--burgundy .contact-lead,
.band--brown    .contact-lead { color: var(--tan); }

/* section closing couplet — display serif, matching /services/ .services-closing
   and About's .about-closing */
.contact-closing {
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.21vw, 19.2px);
  line-height: 31px;
  font-weight: 400;
  color: var(--burgundy);
}
.band--burgundy .contact-closing,
.band--brown    .contact-closing { color: var(--tan); }

/* the eyebrow-rule is burgundy; on the dark band it needs the tan variant
   (/services/ solves the same problem with .services-rule--light — see the
   shared-library request) */
.band--burgundy .eyebrow-rule,
.band--brown    .eyebrow-rule { background: var(--tan); }

.contact-split__head .eyebrow-rule { margin-top: 20px; }

/* --------------------------------------------------- what happens next ------
   Three numbered steps. The marker is the shared .eyebrow + .eyebrow-rule pair
   — the same two components the section heads use — so nothing new is invented
   for the numerals. */
/* site.css resets `ul` only, so the ordered list needs its own reset — otherwise
   Chrome paints "1. 2. 3." markers next to the 01/02/03 eyebrows. */
.contact-steps { margin: 0; padding: 0; list-style: none; }
.contact-step + .contact-step { margin-top: 34px; }
.contact-step p:last-child { margin: 0; font-size: 18px; line-height: 31px; }
.contact-step__num {
  margin: 0;
  line-height: 1;
  color: var(--burgundy);
}
.contact-step__rule { margin: 12px 0 14px; }
.band--burgundy .contact-step__num { color: var(--tan); }

/* ------------------------------------------------------------ bullet list ---
   "Typical details couples include" — same 4px burgundy square marker
   /services/ uses. Square, because nothing on this site is rounded. */
.contact-listhead { margin: 24px 0 0; color: var(--brown); }

.contact-list { margin: 14px 0 0; }
.contact-list li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.contact-list li:last-child { margin-bottom: 0; }
.contact-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 4px; height: 4px;
  background: var(--burgundy);
}
.band--burgundy .contact-list li::before { background: var(--tan); }

/* ------------------------------------------------------- direct contact ---- */
.contact-email { margin: 30px 0 0; }
.contact-email a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 244, 239, .4);
  transition: border-color .18s ease;
}
.contact-email a:hover { border-bottom-color: var(--cream); }

/* ----------------------------------------------------------- still deciding - */
.contact-ctarow { margin: 32px 0 0; }
.contact-still__more { margin: 32px 0 0; }

/* ============================================================== responsive ==
   The mockup is a single 1602px desktop frame; everything below this line is our
   design call, following the site-wide 1200 / 900 / 600 breakpoints. */
@media (max-width: 1200px) {
  .contact { padding-top: 72px; padding-bottom: 80px; }
  .contact__inner,
  .contact-split { gap: 64px; }
  .contact-sec { padding: 72px 0; }
}

@media (max-width: 900px) {
  /* single column: intro above form, in source order; headings above bodies */
  .contact__inner,
  .contact-split { grid-template-columns: 1fr; gap: 40px; }
  .contact { padding-top: 56px; padding-bottom: 72px; }
  .contact__lede { max-width: none; }
  .contact-sec { padding: 72px 0; }
  .contact-split__head .eyebrow-rule { margin-top: 16px; }
}

@media (max-width: 600px) {
  .contact { padding-top: 44px; padding-bottom: 56px; }
  .contact__inner,
  .contact-split { gap: 32px; }
  .contact__details li { align-items: flex-start; line-height: 24px; }
  .contact__icon { margin-top: 5.5px; }
  .contact-form__submit { width: 100%; }
  .contact-sec { padding: 56px 0; }
  .contact-step + .contact-step { margin-top: 28px; }
  .contact-ctarow .btn { width: 100%; }
  /* 15/25 body at this step (site.css) — keep the added copy on the same strut */
  .contact__formlede,
  .contact__lede,
  .contact-prose,
  .contact-listhead,
  .contact-list,
  .contact-email,
  .contact-step p:last-child { font-size: 15px; line-height: 25px; }
  .contact-list li::before { top: 10.5px; }
}

/* ================================================== third-party form embed ===
   The enquiry form can be a form hosted elsewhere (LeadConnector) instead of the
   built-in one — see Contact -> "the enquiry form" -> Form source.

   Height is a two-stage thing. hrf_kses_form_embed() strips the vendor's inline
   `height:100%` (it would collapse against an auto-height parent), so --embed-h
   below reserves space on first paint. The vendor's script then measures the
   real form and writes a pixel height inline, which beats these rules — that is
   why nothing here uses !important: an !important height would win against the
   vendor's inline value and freeze the form at the reserved height forever. */
.contact-embed {
  width: 100%;
}
.contact-embed iframe {
  display: block;
  width: 100%;
  height: var(--embed-h, 1250px);
  border: none;
  border-radius: 3px;
  background: transparent;
}