/* Leave your details, register interest and the links to Thomas's other work. See connect.mjs.
   Loaded with the footer on every public page. Text takes the colour of whatever it sits on, so the
   same blocks work on the stone footer and on page grounds in light and dark. Fields stay readable
   in both: the footer is always stone, page sections follow the theme tokens. Some colour rules
   start with :root to outrank refinement.css, which sets every footer p, a and span to inherit. */

/* == The form == */
.connect-form{--cn-field:var(--paper,#fff);--cn-ink:var(--ink,#101113);--cn-line:color-mix(in srgb,currentColor 34%,transparent);--cn-muted:color-mix(in srgb,currentColor 76%,transparent);--cn-focus:#622338;--cn-error:#9b2c1f;display:grid;gap:14px;min-width:0}
:root[data-theme="dark"] .connect-form{--cn-focus:var(--blue,#7c9aff);--cn-error:#ff9d8a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .connect-form{--cn-focus:var(--blue,#7c9aff);--cn-error:#ff9d8a}}
/* The footer keeps its stone ground in both themes, so its fields do too. */
:root .site-footer .connect-form{--cn-field:#fff;--cn-ink:#171816;--cn-focus:#622338;--cn-error:#9b2c1f;color-scheme:light}
.connect-fields{display:grid;gap:14px;min-width:0}
.connect-fields[hidden]{display:none}
.connect-chips{min-width:0;margin:0;padding:0;border:0}
.connect-chips legend{padding:0;margin:0 0 10px;font-size:14px;font-weight:600}
.connect-chips>div{display:flex;flex-wrap:wrap;gap:8px}
.connect-chips label{position:relative;display:block;cursor:pointer}
.connect-chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
:root .connect-chips label>span{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--cn-line);border-radius:999px;background:var(--cn-field);color:var(--cn-ink);font-size:14px;font-weight:500;line-height:1.25;transition:border-color .2s,background-color .2s,color .2s}
.connect-chips label:hover>span{border-color:var(--cn-ink)}
:root .connect-chips input:checked+span{background:var(--cn-ink);border-color:var(--cn-ink);color:var(--cn-field)}
.connect-chips input:focus-visible+span{outline:3px solid var(--cn-focus);outline-offset:2px}
.connect-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.connect-field{display:grid;gap:7px;min-width:0;font-size:14px;font-weight:600}
:root .connect-field em{font-style:normal;font-weight:400;color:var(--cn-muted)}
/* Fields inside <main> use the site's shared controls (marketing-interface.css). The footer sits
   outside <main>, so the same underlined field is repeated for it here. */
.site-footer .connect-form .connect-field input{box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:14px 3px;border:0;border-bottom:1px solid #817a73;border-radius:0;background:transparent;color:inherit;font:400 16px/1.5 Inter,Arial,sans-serif;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.site-footer .connect-form .connect-field input:focus-visible{border-bottom-color:#622338;box-shadow:0 2px 0 #622338;outline:2px solid #622338;outline-offset:5px}
.site-footer .connect-form .connect-field input:user-invalid{border-bottom-color:#a22735}
/* Burgundy focus is too faint on a dark ground; there the theme's blue takes over. */
:root[data-theme="dark"] main .connect-form .connect-field input:focus-visible{border-bottom-color:var(--cn-focus);box-shadow:0 2px 0 var(--cn-focus);outline-color:var(--cn-focus)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main .connect-form .connect-field input:focus-visible{border-bottom-color:var(--cn-focus);box-shadow:0 2px 0 var(--cn-focus);outline-color:var(--cn-focus)}}
.connect-form .connect-submit{min-height:48px;margin:0;padding-inline:22px;font-size:14px;white-space:nowrap}
.connect-form .connect-submit:focus-visible{outline:3px solid var(--cn-focus);outline-offset:3px}
.connect-form.is-sending .connect-submit{cursor:progress;opacity:.75}
:root .connect-form .connect-note{margin:0;font-size:13px;line-height:1.55;color:var(--cn-muted)}
.connect-note a,.connect-error a,.connect-done a{color:inherit;text-decoration:underline;text-underline-offset:3px}
:root .connect-form .connect-error{margin:0;font-size:14px;line-height:1.5;color:var(--cn-error)}
.connect-done{display:grid;gap:6px}
.connect-done[hidden]{display:none}
.connect-done:focus{outline:none}
.connect-done:focus-visible{outline:3px solid var(--cn-focus);outline-offset:4px}
.connect-done p{margin:0;font-size:15px;line-height:1.6}
.connect-done .connect-done-title{font:500 clamp(22px,2vw,28px)/1.15 Aventa,Arial,sans-serif;letter-spacing:-.03em}
@media (max-width:760px){
  .connect-row{grid-template-columns:1fr}
  .connect-form .connect-submit{width:100%;justify-content:center}
  :root .connect-chips label>span{padding-inline:13px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.connect-chips label>span{transition:none}}

/* == Footer == */
/* One aligned frame for the capture, navigation and small print on every page.
   A restrained link row keeps Thomas's other work easy to find without another pitch. */
body .site-footer[data-connect-footer]{padding:clamp(48px,5vw,72px) max(clamp(24px,5vw,80px),calc((100vw - 1440px)/2)) 20px;background:#f1eeea;color:#171816}
body .site-footer[data-connect-footer]>.wrap{width:100%;max-width:none;margin-inline:0;padding-inline:0}
body .site-footer[data-connect-footer] .footer-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(40px,5vw,72px);width:100%;max-width:none;margin:0;padding:0 0 40px;align-items:start}
body .site-footer[data-connect-footer] .footer-brand>p{max-width:28ch;margin:22px 0 0;color:#625c57;font-size:14px;line-height:1.65}
body .site-footer[data-connect-footer] nav.footer-links{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;background:transparent}
body .site-footer[data-connect-footer] .footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;grid-column:auto}
body .site-footer[data-connect-footer] .footer-column>span{margin:0 0 14px;color:#625c57;font:400 12px/1.5 Inter,Arial,sans-serif}
body .site-footer[data-connect-footer] .footer-column>a{display:flex;align-items:center;min-height:30px;padding:4px 0;font:400 14px/1.45 Inter,Arial,sans-serif;text-decoration:none;color:#171816}
body .site-footer[data-connect-footer] .footer-column>a:hover{color:#622338}
.connect-capture{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(40px,5vw,72px);align-items:start;padding:0 0 40px;margin:0 0 40px;border-bottom:1px solid #d9d4ce}
.site-footer .connect-intro h2{margin:0 0 14px;font:500 clamp(32px,3vw,42px)/1.08 Aventa,Arial,sans-serif;letter-spacing:-.04em;color:inherit}
.site-footer .connect-intro p{margin:0;max-width:29ch;font-size:15px;line-height:1.65;color:#625c57}
/* The old mobile-menu rules position every nav absolutely. Keep this one in the flow. */
body .site-footer[data-connect-footer] .connect-family-row{width:100%;max-width:none;margin:0;padding:0}
body .site-footer[data-connect-footer] .connect-family{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;margin:0;padding:14px 0;border:0;border-top:1px solid #d9d4ce;background:transparent}
:root .site-footer .connect-family-label{margin:0;font:400 12px/1.5 Inter,Arial,sans-serif;color:#625c57}
.site-footer .connect-family ul{display:flex;flex-wrap:wrap;align-items:center;gap:0 30px;margin:0;padding:0;list-style:none}
.site-footer .connect-family li{display:block;min-width:0;margin:0;padding:0}
.site-footer .connect-family a{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:#171816;font:400 13px/1.5 Inter,Arial,sans-serif;text-decoration:none}
.site-footer .connect-family a:hover{color:#622338;text-decoration:none}
.site-footer .connect-family a>span{font-size:12px}
.connect-family a:focus-visible,.site-footer .footer-links a:focus-visible{outline:2px solid #622338;outline-offset:4px}
body .site-footer[data-connect-footer] .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;width:100%;max-width:none;margin:0;padding:0;border:0;color:#625c57;font:400 12px/1.6 Inter,Arial,sans-serif}
body .site-footer[data-connect-footer] .footer-bottom a{display:inline-flex;align-items:center;min-height:44px;margin:0;color:inherit;text-decoration:none}
body .site-footer[data-connect-footer] .footer-bottom a:hover{color:#622338}
/* PropertyMe partner mark under the tagline. The footer is always stone, so the supplied navy logo reads in both themes. */
body .site-footer[data-connect-footer] .footer-partner{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;line-height:0;text-decoration:none}
body .site-footer[data-connect-footer] .footer-partner img{display:block;height:60px;width:auto}
body .site-footer[data-connect-footer] .footer-partner:focus-visible{outline:2px solid #622338;outline-offset:4px}
/* The reveal only runs while the footer fits the window (connect.js measures it). */
.fx-reveal-foot.connect-static{position:static}
@media (max-width:1100px){
  .connect-capture{grid-template-columns:1fr;gap:24px}
  body .site-footer[data-connect-footer] .footer-top{grid-template-columns:1fr;gap:32px}
  body .site-footer[data-connect-footer] .footer-brand{display:flex;align-items:center;gap:24px}
  body .site-footer[data-connect-footer] .footer-brand>p{margin:0;max-width:32ch}
  body .site-footer[data-connect-footer] .footer-brand{flex-wrap:wrap}
  body .site-footer[data-connect-footer] .footer-partner{flex:0 0 100%;margin-top:0}
  body .site-footer[data-connect-footer] .footer-partner img{flex:none}
}
@media (max-width:760px){
  body .site-footer[data-connect-footer]{padding-top:40px;padding-bottom:16px}
  body .site-footer[data-connect-footer] .footer-top{padding-bottom:28px}
  body .site-footer[data-connect-footer] nav.footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  body .site-footer[data-connect-footer] .footer-column>span{margin-bottom:8px}
  body .site-footer[data-connect-footer] .footer-column>a{min-height:44px}
  .connect-capture{padding-bottom:32px;margin-bottom:32px}
  .site-footer .connect-intro h2{font-size:32px}
  body .site-footer[data-connect-footer] .connect-family{display:block;padding:20px 0 8px}
  .site-footer .connect-family ul{gap:0 24px;margin-top:6px}
}

/* == Not ready to talk? (services, pricing and products) == */
.connect-slim-wrap{margin-block:clamp(40px,4vw,56px)}
.connect-slim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(24px,4vw,64px);align-items:start;padding-block:clamp(26px,3vw,36px);border-block:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.connect-slim h2{margin:0 0 10px;font:500 clamp(28px,2.8vw,40px)/1.05 Aventa,Arial,sans-serif;letter-spacing:-.04em}
.connect-slim-copy p{margin:0;max-width:40ch;font-size:16px;line-height:1.6}
@media (max-width:1100px){.connect-slim{grid-template-columns:1fr;gap:22px}}

/* == Register interest (coming soon, planned, early release) == */
.connect-register{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(36px,4vw,56px);padding-top:clamp(26px,3vw,36px);border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);scroll-margin-top:110px}
.connect-register h2{margin:0 0 10px;font:500 clamp(28px,2.8vw,40px)/1.05 Aventa,Arial,sans-serif;letter-spacing:-.04em}
.connect-register-copy p{margin:0;max-width:40ch;font-size:16px;line-height:1.6}
.connect-register .connect-kicker{margin:0 0 12px;font-size:13px;line-height:1.4}
@media (max-width:1100px){.connect-register{grid-template-columns:1fr;gap:22px}}

/* == About: the four places == */
.about-places{display:grid;gap:20px;margin:28px 0 0;padding:0}
.about-places>div{display:grid;gap:6px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.about-places dt{font-size:16px;font-weight:600}
.about-places dd{margin:0;max-width:56ch;font-size:16px;line-height:1.6}
.about-places dd .text-link{display:flex;width:fit-content;margin-top:8px}

/* == Contact: leave your details or find the right door == */
.contact-option .connect-form{margin-top:16px}
/* The contact column is narrow: email gets its own line, then first name and Send. */
.contact-option .connect-row{grid-template-columns:minmax(0,1fr) auto}
.contact-option .connect-row .connect-field:first-child{grid-column:1/-1}
.contact-doors .section-head p{max-width:46ch}
.contact-door-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3vw,44px)}
.contact-door-list article{display:grid;align-content:start;gap:10px;padding-top:20px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.contact-door-list h3{margin:0;font:500 clamp(21px,1.8vw,25px)/1.15 Aventa,Arial,sans-serif;letter-spacing:-.025em}
.contact-door-list p{margin:0;font-size:15px;line-height:1.6}
.contact-door-list .text-link{justify-self:start;margin-top:6px}
@media (max-width:1100px){.contact-door-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.contact-door-list{grid-template-columns:1fr}}