/* Static-site layer over the REbuilder Tenor Field template (template.css).
   template.css is the platform's compiled stylesheet with its self-hosted
   fonts removed; the two faces Tenor Field uses load from Google Fonts and
   are bound to the variables the template expects. Everything below is what
   the static site needs that the Next app does with React: the phone menu,
   the lead forms and the hero address autocomplete. */
:root {
  --font-tenor-sans: "Tenor Sans";
  --font-montserrat: "Montserrat";
  --font-open-sans: "Montserrat";
}

html, body { margin: 0; }
body { background: #f4f1ec; -webkit-font-smoothing: antialiased; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: #1b1a1b; padding: 10px 14px; }
.skip-link:focus { left: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status[hidden] { display: none; }

/* --- phone menu ------------------------------------------------------------ */
.tf-menu { position: fixed; inset: 0; z-index: 60; background: #1b1a1b; color: #f4f1ec; padding: 96px 28px 40px; overflow-y: auto; }
.tf-menu[hidden] { display: none; }
.tf-menu nav { display: grid; gap: 6px; }
.tf-menu a { color: inherit; text-decoration: none; font-family: "Tenor Sans", sans-serif; font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid rgba(244, 241, 236, 0.2); }
body.tf-menu-open { overflow: hidden; }
body.tf-menu-open .site-nav { position: fixed; inset: 0 0 auto 0; z-index: 70; }

/* Keep the service labels and arrows inside their tiles on narrow screens. */
@media (max-width: 639px) {
  .template-palm-court .pc-intents { grid-template-columns: minmax(0, 1fr); }
  .template-palm-court.family-tenor-field .pc-intent-media,
  .template-palm-court.family-tenor-field .pc-intent:nth-child(2) .pc-intent-media { aspect-ratio: 16 / 9; }
  .template-palm-court .pc-intent-label { inset-inline: clamp(16px, 3vw, 40px); }
}

/* --- hero address field ---------------------------------------------------- */
.pc-hero-address { position: relative; }
.pc-hero-address-input { width: 100%; box-sizing: border-box; }
.pc-hero-google { margin: 0; text-align: center; font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 0.04em; color: rgba(244, 241, 236, 0.86); }
.pc-hero-google b { font-weight: 600; color: #f4f1ec; }
/* The credit sits inside the address form, centred under the address box (not the box + button). */
@media (min-width: 640px) { .pc-hero-search .pc-hero-google { grid-column: 1; } }

/* --- lead forms ------------------------------------------------------------ */
.tf-form { display: grid; gap: 16px; font-family: "Montserrat", sans-serif; color: #1b1a1b; }
.tf-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .tf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-field label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #5a5758; }
.tf-opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.tf-field :is(input, select, textarea) { width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 14px; border: 1px solid rgba(27, 26, 27, 0.22); border-radius: 0; background: #fbfaf7; font: inherit; font-size: 16px; color: #1b1a1b; }
.tf-field textarea { min-height: 120px; resize: vertical; }
.tf-field :is(input, select, textarea):focus { outline: 2px solid #1b1a1b; outline-offset: -1px; }
.tf-note { margin: 0; font-size: 12px; line-height: 1.6; color: #5a5758; }
.tf-note a { color: inherit; }
.tf-submit { justify-self: start; min-height: 56px; padding: 0 32px; border: 0; border-radius: 0; background: #1b1a1b; color: #f4f1ec; cursor: pointer; font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.tf-submit:hover { background: #000; }
.tf-submit:focus-visible { outline: 2px solid #1b1a1b; outline-offset: 3px; }
.tf-submit[disabled] { opacity: 0.55; cursor: default; }
[data-form-status] { margin: 0; font-size: 14px; line-height: 1.5; }
.form__status--error { color: #8d302b; }

/* On the deep ground (the "Work with Stuart" band) the form goes light. */
.pc-ground-deep .tf-form { color: #f4f1ec; }
.pc-ground-deep .tf-field label, .pc-ground-deep .tf-note { color: rgba(244, 241, 236, 0.78); }
.pc-ground-deep .tf-field :is(input, select, textarea) { background: rgba(244, 241, 236, 0.96); border-color: transparent; }
.template-palm-court .pc-ground-deep .tf-form .tf-submit { background: #f4f1ec; color: #1b1a1b; }
.template-palm-court .pc-ground-deep .tf-form .tf-submit:hover { background: #fff; }
.template-palm-court .pc-ground-deep .tf-form .tf-submit:focus-visible { outline-color: #f4f1ec; }

/* --- pages that keep their own copy (legal, towns, utility) ---------------- */
.tf-prose { max-width: 46rem; font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 1.75; color: #3b393a; }
.tf-prose :is(h2, h3) { font-family: "Tenor Sans", sans-serif; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #1b1a1b; line-height: 1.25; margin: 2.2em 0 0.6em; }
.tf-prose h2 { font-size: 22px; }
.tf-prose h3 { font-size: 18px; }
.tf-prose p, .tf-prose ul, .tf-prose ol { margin: 0 0 1.1em; }
.tf-prose a { color: #1b1a1b; }
.tf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tf-button { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; background: #1b1a1b; color: #f4f1ec; text-decoration: none; font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.tf-button--quiet { background: transparent; color: #1b1a1b; border: 1px solid rgba(27, 26, 27, 0.3); }

.pac-container { font-family: "Montserrat", sans-serif; border: 0; border-radius: 0; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); z-index: 9999; }
.pac-item { padding: 10px 16px; font-size: 15px; line-height: 22px; cursor: pointer; }
.pac-matched { font-weight: 600; }

/* Section labels ("For sellers", "How it works"). The template sets them at
   11px, which is too small to read, especially over a photograph (Will,
   2026-09-24). They go up to 13px, and 14px on photo headers. */
.template-palm-court .pc-eyebrow { font-size: 0.8125rem; }
.template-palm-court :is(.pc-hero--media, .pc-subhero--media) .pc-eyebrow { font-size: 0.875rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 0, 0, 0.35); }

/* Platform credit (Will, 2026-10-13): "Site by REbuilder" with only the brand
   name linked to velocity-builders.com, as Luxury Presence credits its sites.
   Underlined inside the sentence so the link is not told apart by colour. */
.template-palm-court .pc-footer-credit a {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* Email typo / deliverability hint under any form's email box (lead-form-v1.js) */
.email-hint { margin: 8px 0 0; font-family: "Montserrat", sans-serif; font-size: 12px; line-height: 1.5; color: inherit; opacity: 0.85; text-align: left; text-shadow: none; }
.email-hint[hidden] { display: none; }
.email-hint--error { color: #b4402f; opacity: 1; }
.email-hint-fix { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.email-hint-fix:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }