/*
 * Woodard Associates — shared site styles.
 * Recreates the selected homepage/header/footer study (website-study-v2-footer-headers)
 * and resale study (resale-study-v2). Study override layers are consolidated
 * into their final computed values; see the implementation report.
 */

@font-face {
  font-family: 'Woodard Original';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/SortsMillGoudy-Regular.ttf) format('truetype');
}

:root {
  --paper: #f6f3eb;
  --ink: #244839;
  --green: #224936;
  --muted: #637064;
  --line: #ccd0bf;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Optima, 'Segoe UI', Arial, sans-serif;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;text-align:left}
img{display:block;width:100%;height:auto}
figure,p{margin:0}
h1,h2,h3{font:400 44px/1.1 var(--serif);letter-spacing:-.04em;margin:0;text-wrap:pretty}
h1{font-size:clamp(52px,5.4vw,79px)}
h1 em{font-weight:400;color:#64795a}
h2{font-size:clamp(34px,3.5vw,51px)}
h3{font-size:31px}
.wrap{width:min(1296px,calc(100% - 96px));margin-inline:auto}
.eyebrow{font:11px/1.5 var(--sans);letter-spacing:.13em;margin-bottom:21px;font-weight:600}
.skip{position:absolute;left:10px;top:-100px;background:white;padding:15px;z-index:10}
.skip:focus{top:0}
:focus-visible{outline:3px solid #ac7735;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
main:focus{outline:none}

/* ─── Header ───────────────────────────────────────────────────────────── */
.site-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:35px;align-items:center;padding-block:18px 20px;border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:center;gap:13px;width:max-content}
.brand img{width:58px;height:58px;background:var(--green);border-radius:50%;padding:3px}
/* Selected lockup: original Sorts Mill Goudy "Woodard"; second line spans the word
   and is optically centred against the goose. */
.brand>span{position:relative;display:inline-block;font:36px/.9 'Woodard Original',serif;letter-spacing:-.045em;padding-bottom:22px;transform:translateY(8.5px)}
.brand small{display:block;position:absolute;left:0;bottom:7px;width:100%;height:24px;margin:0;font:10px/1 var(--sans);letter-spacing:normal}
.brand small svg{display:block;width:100%;height:24px;overflow:visible}
/* Desktop: utility row (phone | Resident portal) above primary nav + Resale documents. */
.site-header .brand{flex:none}
.site-header .header-right{justify-self:end;display:grid;gap:13px;min-width:0}
.site-header .header-utility{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0 19px;font-size:12px;min-height:32px;color:var(--muted)}
.site-header .header-utility a{display:inline-flex;align-items:center;min-height:32px}
.site-header .utility-divider{width:1px;height:13px;background:var(--line)}
.site-header .header-portal{color:var(--ink);border-bottom:1px solid #a4ad98}
.site-header .header-primary{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 40px}
.site-header nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0 32px;font-size:16px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px}
.site-header nav [aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.site-header .header-order{display:inline-flex;align-items:center;background:var(--green);color:var(--paper);padding:12px 20px;min-height:48px;font-size:15px}
.site-header .menu,.site-header .nav-phone,.site-header .header-utility .order-compact{display:none}
.site-header a:not(.brand):hover{text-decoration:underline;text-underline-offset:5px}
.pathways a:hover,.site-footer a:not(.brand):hover{text-decoration:underline;text-underline-offset:4px}
/* The header's bottom rule is the only divider at the top of interior pages: the first
   section's own top border would sit directly beneath it. Kept transparent (not removed)
   so the page content does not move. */
.site-header+main>:is(.page-intro,.status-page):first-child{border-top-color:transparent}

/* ─── Homepage ─────────────────────────────────────────────────────────── */
.hero{position:relative;padding-top:25px}
.hero-photo{width:80%;margin-left:20%;height:570px;position:relative}
.hero-photo picture,.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-copy{position:absolute;left:0;bottom:49px;width:48%;background:var(--paper);padding:40px 44px 28px 0}
.hero-copy h1{margin-bottom:23px}
.hero-copy>p:not(.eyebrow){max-width:420px;font-size:18px;margin-bottom:23px;line-height:1.65}
.text-link{display:inline-flex;gap:32px;align-items:center;min-height:44px;border-bottom:1px solid #819378;padding-bottom:3px;font-size:15px}
.hero-foot{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;padding-block:19px;border-bottom:1px solid var(--line)}
/* Above the phone layout the copy overlaps the photo. It is laid out as a grid overlay rather
   than absolutely positioned, so the same bottom anchoring (49px above the hero's end) holds
   while copy that outgrows the photo (enlarged text, narrow tablets) extends the hero
   downward instead of escaping upward over the header. The photo keeps its fixed height. */
@media(min-width:601px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .hero-photo{grid-area:1/1;align-self:start}
  .hero-copy{position:relative;left:auto;bottom:auto;grid-area:1/1/3/2;align-self:end;justify-self:start;margin-bottom:49px}
  .hero-foot{grid-area:2/1;align-self:end}
}
.pathways{display:grid;grid-template-columns:1fr 1fr 1fr;padding:34px 0 43px;border-bottom:1px solid var(--line);gap:28px}
.pathways article+article{border-left:1px solid var(--line);padding-left:28px}
.pathways .eyebrow{font-size:10px;margin-bottom:12px}
.pathways h2{font-size:25px;letter-spacing:-.025em;margin-bottom:12px;max-width:290px}
.pathways article>a,.pathways article>div a{font-size:13px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.pathways article>div{display:flex;flex-wrap:wrap;column-gap:24px}
/* Homepage "Find your next step": full-width pale sage band (pathway-icons-v2 study).
   Scoped to .pathway-band so the services page's .pathways navigation is unaffected. */
.pathway-band{background:#e9ede2;border-bottom:1px solid #c6cebd}
.pathway-band .home-pathways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px;padding-block:38px 34px}
.pathway-band .home-pathways article{display:grid;grid-template-rows:auto 1fr auto;align-content:start;min-width:0}
.pathway-band .home-pathways article+article{border-left:1px solid #c6cebd;padding-left:36px}
.pathway-band .pathway-label{display:flex;align-items:center;gap:13px;min-height:32px;margin-bottom:18px}
.pathway-band .pathway-label svg{flex:0 0 30px;width:30px;height:30px;color:var(--green)}
.pathway-band .pathway-label .eyebrow{margin:0;min-width:0;font-size:11px;letter-spacing:.1em;line-height:1.6}
.pathway-band .home-pathways h2{font-size:29px;line-height:1.15;letter-spacing:-.025em;max-width:290px;margin-bottom:22px}
/* Link text is top-aligned in its 44px target so first lines share one line across columns,
   even when a link wraps. */
.pathway-band .pathway-actions{display:flex;flex-direction:column;align-items:flex-start;min-height:88px}
.pathway-band .pathway-actions a{display:inline-flex;align-items:flex-start;max-width:100%;font-size:16px;line-height:1.45;min-height:44px;padding-block:10px;text-decoration:underline;text-decoration-color:#8b9c83;text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}
.pathway-band .pathway-actions a+a{font-size:14px;color:#566451;text-decoration-color:transparent}
.pathway-band .pathway-actions a:hover{color:#142f21;text-decoration-color:currentColor}
/* Columns share label / heading / action rows, so headings and primary links stay aligned
   across columns however each heading wraps. Without subgrid: the study's per-column rows. */
@supports (grid-template-rows:subgrid){
  .pathway-band .home-pathways{grid-template-rows:auto auto auto}
  .pathway-band .home-pathways article{grid-row:span 3;grid-template-rows:subgrid}
}
@media(max-width:1000px) and (min-width:761px){
  .pathway-band .home-pathways{column-gap:24px}
  .pathway-band .home-pathways article+article{padding-left:24px}
  .pathway-band .home-pathways h2{font-size:26px}
}
/* Phones: three stacked signposts, icon as the left-hand anchor. */
@media(max-width:760px){
  .pathway-band .home-pathways{grid-template-columns:1fr;grid-template-rows:none;padding-block:8px}
  .pathway-band .home-pathways article{position:relative;display:block;grid-row:auto;padding:26px 0 24px 49px}
  .pathway-band .home-pathways article+article{padding-left:49px;border-left:0;border-top:1px solid #c6cebd}
  .pathway-band .pathway-label{display:block;min-height:0;margin-bottom:10px}
  .pathway-band .pathway-label svg{position:absolute;left:0;top:27px}
  .pathway-band .pathway-label .eyebrow{font-size:10px}
  .pathway-band .home-pathways h2{font-size:28px;max-width:none;margin-bottom:12px}
  .pathway-band .pathway-actions{min-height:0}
}
.services{padding-block:92px}
.section-heading{display:grid;grid-template-columns:1.2fr 1fr;column-gap:13%;align-items:end;margin-bottom:45px}
.section-heading .eyebrow{grid-column:1/-1}
.section-heading>p:last-child{max-width:415px;color:var(--muted);padding-bottom:3px}
.service-story{display:grid;grid-template-columns:1.05fr 1fr;gap:9%}
.service-story figure img{height:520px;object-fit:cover;object-position:42% 50%}
.service-story figcaption{font:italic 19px/1.4 var(--serif);padding-top:15px}
.service-text article{padding:24px 0 31px}
.service-text article+article{border-top:1px solid var(--line)}
.service-text .eyebrow{margin-bottom:13px}
.service-text h3{margin-bottom:18px}
.service-text article>p:not(.eyebrow){color:var(--muted);margin-bottom:16px}
.people{padding-block:72px;background:#e8ebdf}
.people-heading{display:grid;grid-template-columns:1fr 1fr;gap:13%;align-items:end;margin-bottom:42px}
.people-heading>div>p:not(.eyebrow){max-width:440px;margin-bottom:15px}
.portraits{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.portraits img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;filter:saturate(.88)}
.portraits figcaption{padding-top:15px;line-height:1.4}
.portraits strong{display:block;font:24px/1.2 var(--serif);letter-spacing:-.03em;margin-bottom:7px}
.portraits span{font-size:12px;display:block}
.region{display:grid;grid-template-columns:1fr 1.2fr;gap:9%;padding-block:90px;align-items:center}
.region h2{margin-bottom:23px}
.region p:not(.eyebrow){color:var(--muted);max-width:380px;margin-bottom:25px}
.region img{aspect-ratio:1.4;object-fit:cover}
.button{display:inline-flex;align-items:center;gap:32px;background:var(--green);color:var(--paper);padding:15px 20px;min-height:50px;font-size:14px}
.button-secondary{background:transparent;color:var(--ink);border:1px solid var(--green)}

/* ─── Footer (selected: deep green, sage rule, small sans column headings) ─ */
.site-footer{background:#193c2f;color:var(--paper);padding-top:72px;position:relative}
.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:#9aa98b}
.footer-main{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:7%;padding-bottom:58px;align-items:start}
.footer-main h2{font:600 11px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#b9c7b6;margin:0 0 18px}
.footer-identity>p{font:italic 26px/1.35 var(--serif);color:#e0e3d1;margin-top:30px;margin-bottom:23px}
.footer-local{display:block;font:13px/1.8 var(--sans);color:#b9c7b6}
.footer-office p{font-size:15px;line-height:1.6;margin-bottom:10px}
.footer-help a,.footer-office a{display:flex;width:fit-content;align-items:center;min-height:44px;font:14px/1.6 var(--sans)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #b9c7b633;align-items:center;padding-block:20px;font:12px/1.5 var(--sans);letter-spacing:0;color:#b9c7b6}
.footer-bottom nav{display:flex;gap:28px;flex-wrap:wrap}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;font:12px/1.5 var(--sans)}

/* ─── Dialog (resale review) ───────────────────────────────────────────── */
dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:35px}
dialog::backdrop{background:#122b24a6}
dialog h2{font-size:36px;margin-block:20px}
dialog p{margin-bottom:18px}
.close{display:block;margin-left:auto;min-height:44px}
.dialog-note{font-size:13px;color:var(--muted)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:8px}

/* ─── Shared interior page components ─────────────────────────────────── */
.page-intro{border-top:1px solid var(--line);padding-block:25px 48px}
.breadcrumb{display:inline-block;font-size:12px;color:var(--muted);margin-bottom:36px;min-height:44px;line-height:44px}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.page-intro .eyebrow{margin-bottom:16px}
.page-intro h1{font-size:clamp(43px,4.7vw,67px);line-height:1.08;max-width:850px}
.page-lead{font-size:18px;line-height:1.65;max-width:730px;margin-top:24px}
.page-section{padding-block:56px;border-top:1px solid var(--line)}
.page-section>.eyebrow{margin-bottom:12px}
.page-section h2{font-size:clamp(30px,3vw,42px);margin-bottom:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.split-text>p{margin-bottom:16px;max-width:620px}
.split-text h3{font-size:25px;margin:28px 0 10px}
.split-text ul{padding-left:20px;margin:0 0 12px}
.split-text li{margin-bottom:6px}
.split img{aspect-ratio:4/3;object-fit:cover}
.split-reverse>figure{order:2}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.card-grid.two{grid-template-columns:repeat(2,1fr)}
.card-grid article{border-top:1px solid var(--line);padding:22px 0 26px}
.card-grid h3{font-size:25px;letter-spacing:-.025em;margin-bottom:10px}
.card-grid p{color:var(--muted);font-size:16px}
.callout{background:#e8ebdf;padding:30px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-top:36px}
.callout p{max-width:620px}
.callout .status-actions{margin-top:0}
.page-pathways{border-top:1px solid var(--line)}
.page-section.flush{border-top:0}
.card-grid.spaced{margin-top:44px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
.team-grid img{aspect-ratio:4/5;object-fit:cover;object-position:center 30%;filter:saturate(.88)}
.team-grid h3{font-size:26px;margin:16px 0 4px}
.team-grid .role{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.team-grid p:not(.role){color:var(--muted);font-size:16px}
.prose{max-width:780px}
.prose h2{font-size:28px;letter-spacing:-.025em;margin:40px 0 12px}
.prose h3{font-size:21px;letter-spacing:-.02em;margin:26px 0 8px}
.prose p,.prose ul{margin:0 0 14px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.h3{font-size:25px;letter-spacing:-.025em;margin-bottom:10px}
.link-list{list-style:none;padding:0;margin:0}
.link-list a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.status-page{padding-block:30px 90px;border-top:1px solid var(--line)}
.status-page h1{font-size:clamp(40px,4.4vw,60px);margin-bottom:20px;max-width:800px}
.status-page .page-lead{margin-top:0}
.status-actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:30px}
.status-details{margin:28px 0 0;max-width:620px}
/* Row gaps must be fixed lengths: these grids have auto height, so a percentage row-gap
   is left out of the grid's height but still laid out, pushing the stacked sidebar
   (≤850px) past the grid into the next section. Percentages are for column gaps only. */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:40px 8%;padding-bottom:65px;align-items:start}
.contact-info{background:#e9eddf;padding:30px}
.contact-info h2{font-size:30px;margin-bottom:16px}
.contact-info dl{margin:0}
.contact-info dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:18px}
.contact-info dd{margin:4px 0 0;font-size:15px}
.contact-info dd a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.map-frame{display:block;width:100%;height:350px;border:0}

/* ─── Forms (resale + contact) ─────────────────────────────────────────── */
.request-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:40px 8%;padding-bottom:65px;align-items:start}
.request-section{padding-block:30px 36px;border-top:1px solid var(--line)}
.request-section h2{font-size:35px;margin-bottom:24px}
.request-section .eyebrow{margin-bottom:12px}
.service-picker{margin:0;padding:0;border:0;display:grid;gap:12px;min-width:0}
.service-choice{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:16px;align-items:start;border:1px solid #bcc5b3;padding:23px 22px;cursor:pointer;background:#fcfaf5}
.service-choice:has(input:checked){border:2px solid var(--green);padding:22px 21px;background:#edf0e5}
.service-choice input{accent-color:var(--green);width:19px;height:19px;margin:5px 0 0}
.service-choice strong{display:block;font:400 25px/1.2 var(--serif);letter-spacing:-.025em;margin-bottom:10px}
.service-choice span span{display:block;font-size:15px;line-height:1.55}
.service-choice small{display:block;font-size:12px;color:#52614f;margin-top:9px;line-height:1.5}
.service-choice b{font:400 27px/1.2 var(--serif);white-space:nowrap}
.prior-check{margin-top:25px;padding:22px 0 0}
.prior-check h3,.inline-notice h3,.request-help h3{font-size:25px;margin-bottom:9px}
.prior-check p,.inline-notice p,.request-help p{font-size:15px;line-height:1.65}
.prior-check .text-link{margin-top:6px}
.field-note{font-size:12px;line-height:1.65;color:#566451;margin:12px 0 22px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field-grid label,.notes-label,.field label{font-size:13px;display:block;line-height:1.5}
.field-grid input,.field-grid select,.notes-label textarea,.field input,.field textarea{display:block;width:100%;min-width:0;min-height:48px;border:1px solid #aebaa6;background:#fffdf8;color:var(--ink);font:16px/1.4 var(--sans);padding:11px 12px;border-radius:0;margin-top:8px}
.field-grid [aria-invalid="true"],.field [aria-invalid="true"],.notes-label [aria-invalid="true"]{border:2px solid #853b2f}
.field-error{display:block;color:#853b2f;font-size:13px;margin-top:6px}
.field-wide{grid-column:1/-1}
.notes-label{margin-top:24px}
.notes-label textarea,.field textarea{resize:vertical}
.field{margin-bottom:0}
.form-submit{margin-top:20px}
.cf-turnstile{margin-top:20px}
.inline-notice{padding:22px;background:#e8ecdf;margin-top:24px}
.inline-notice p+p{margin-top:10px}
.notice-error{background:#f4e6df;border-left:4px solid #853b2f}
.notice-success{border-left:4px solid var(--green)}
.request-review>p{font-size:15px;max-width:630px}
.request-review .button{margin-top:22px;min-height:48px}
.request-review .field-note{font-size:12px}
.form-error{color:#853b2f;padding-top:18px}
.request-sidebar{position:sticky;top:24px;padding-top:30px}
.request-summary{background:#e9eddf;padding:30px}
.request-summary h2{font-size:32px;line-height:1.15;margin-bottom:17px}
.request-summary>p:not(.eyebrow){font-size:14px;line-height:1.6}
.request-total{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #b7c0ac;padding-top:21px;margin-top:24px}
.request-total strong{font:400 39px/1 var(--serif)}
.summary-scope{color:#52614f;margin-top:14px}
.request-summary hr{border:0;border-top:1px solid #b7c0ac;margin:25px 0}
.request-summary h3{font-size:24px}
.request-summary ol{padding-left:21px;font-size:14px;line-height:1.7;margin:17px 0}
.request-summary li{padding:0 0 12px 4px}
.request-summary .field-note{font-size:12px;margin-bottom:0}
.request-help{padding:28px 0}
.help-number{margin-top:10px}
.help-number a{display:inline-flex;align-items:center;min-height:44px}
.request-faq{max-width:1000px;padding-block:0 78px}
.request-faq h2{font-size:38px;margin-bottom:28px}
.request-faq details{border-top:1px solid var(--line);padding:0}
.request-faq details:last-child{border-bottom:1px solid var(--line)}
.request-faq summary{padding:20px 24px 20px 0;cursor:pointer;font-size:17px;min-height:60px}
.request-faq details p{padding:0 0 25px;font-size:15px;max-width:760px}
.review-list{margin:20px 0}
.review-list div{padding:10px 0;border-bottom:1px solid var(--line)}
.review-list dt{font-size:12px;color:var(--muted)}
.review-list dd{margin:4px 0 0;overflow-wrap:anywhere;white-space:pre-wrap}
.review-page{padding-bottom:70px}
.review-page .review-list{max-width:720px}
.resale-page [hidden]{display:none!important}
#review-request:disabled{opacity:.55;cursor:not-allowed}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media(min-width:1600px){.hero-copy{width:46%}}

@media(max-width:1150px){
  .wrap{width:calc(100% - 64px)}
  .brand>span{font-size:31px}
  .brand img{width:50px;height:50px}
  .hero-photo{height:535px}
  .hero-copy{width:51%;padding-right:28px}
  h1{font-size:64px}
  .pathways{gap:20px}
  .pathways article+article{padding-left:20px}
  .portraits{gap:13px}
  .portraits strong{font-size:22px}
}

@media(max-width:1100px){
  .request-layout,.contact-layout{grid-template-columns:minmax(0,1fr) 300px;column-gap:5%}
  .request-summary,.contact-info{padding:24px}
  .service-choice{gap:12px;padding:20px 16px}
  .service-choice:has(input:checked){padding:19px 15px}
  .service-choice strong{font-size:23px}
}

/* Header: tighter desktop composition. */
@media(max-width:1000px){
  .site-header{gap:20px}
  .site-header .header-primary{column-gap:24px}
  .site-header nav{column-gap:20px;font-size:15px}
}

/* Header, phones and small tablets (mobile is primary). Keep in step with site.js. */
@media(max-width:760px){
  .site-header{grid-template-columns:minmax(0,1fr);gap:15px;padding-block:17px 16px}
  .site-header .header-identity{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 15px}
  .site-header .menu{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;margin-left:auto;min-height:44px;padding:0 10px;font-size:13px;border:1px solid var(--line)}
  .site-header .menu span{font-size:22px;line-height:1;font-weight:300}
  .site-header .menu[aria-expanded="true"]{background:var(--green);color:var(--paper);border-color:var(--green)}
  .site-header .header-right,.site-header .header-primary{display:contents}
  .site-header .header-utility{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}
  .site-header .header-utility .phone,.site-header .utility-divider,.site-header .order-wide{display:none}
  .site-header .header-utility a{justify-content:center;text-align:center;min-height:46px;padding:9px 6px;font-size:13px;line-height:1.3}
  .site-header .header-portal{border:1px solid var(--green);color:var(--green)}
  .site-header .header-utility .order-compact{display:flex}
  .site-header nav{display:none;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:4px 20px 13px}
  .site-header nav.open,.no-js .site-header nav{display:block}
  .no-js .site-header .menu{display:none}
  .site-header nav a:not(.nav-phone){display:flex;font:26px/1.15 var(--serif);letter-spacing:-.025em;min-height:61px;border-bottom:1px solid var(--line)}
  .site-header nav .nav-phone{display:flex;align-items:center;gap:8px;min-height:56px;padding-top:12px;font-size:16px}
  .site-header .phone-outline{flex:none}
}

@media(max-width:900px){
  .hero-photo{height:500px;width:86%;margin-left:14%}
  .hero-copy{width:58%}
  h1{font-size:57px}
  .hero-copy>p:not(.eyebrow){font-size:16px}
  .section-heading,.service-story,.people-heading,.region{gap:6%}
  .service-story figure img{height:540px}
  .portraits{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .portraits img{aspect-ratio:1}
  .services{padding-block:65px}
  .footer-main{grid-template-columns:1.1fr 1fr;gap:40px}
  .footer-identity{grid-row:1/3}
  .footer-help,.footer-office{grid-column:2}
  .card-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .split{gap:5%}
}

@media(max-width:850px){
  .request-layout,.contact-layout{grid-template-columns:1fr}
  .request-sidebar{position:static;padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:30px}
  .request-help{padding:24px 0}
  .page-intro{padding-bottom:30px}
  .request-section{padding-bottom:30px}
}

@media(max-width:600px){
  body{font-size:16px}
  .wrap{width:calc(100% - 40px)}
  .brand{gap:10px}
  .brand>span{font-size:31px;padding-bottom:19px;transform:translateY(7.5px)}
  .brand small{font-size:9px;height:22px;bottom:6px}
  .brand small svg{height:22px}
  .brand img{width:47px;height:47px}
  .hero{padding-top:5px;display:flex;flex-direction:column}
  .hero-photo{width:100%;margin-left:0;height:270px}
  .hero-photo img{object-position:50% 57%}
  .hero-copy{position:relative;width:calc(100% - 16px);bottom:auto;order:2;margin-top:-39px;padding:25px 13px 21px 0;z-index:1}
  .hero-copy .eyebrow{font-size:9px;margin-bottom:14px}
  h1{font-size:48px;line-height:1.04;letter-spacing:-.048em}
  .hero-copy h1{margin-bottom:17px}
  .hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.55;margin-bottom:12px}
  .hero-foot{order:3;font-size:8px;gap:12px;padding-block:13px}
  .text-link{font-size:14px;min-height:44px}
  .pathways{grid-template-columns:1fr;gap:0;padding-block:8px 20px}
  .pathways article{padding-block:18px 12px}
  .pathways article+article{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .pathways .eyebrow{margin-bottom:5px;font-size:9px}
  .pathways h2{font-size:26px;max-width:none;margin-bottom:3px}
  .pathways article>a,.pathways article>div a{font-size:13px;min-height:44px}
  .pathways article>div{justify-content:space-between}
  .services{padding-block:48px}
  .section-heading{display:block;margin-bottom:28px}
  .section-heading .eyebrow{font-size:9px;margin-bottom:16px}
  .section-heading h2{font-size:37px;margin-bottom:20px}
  .section-heading>p:last-child{font-size:16px}
  .service-story{grid-template-columns:1fr;gap:22px}
  .service-story figure img{height:300px}
  .service-story figcaption{font-size:17px}
  .service-text h3{font-size:30px}
  .service-text article{padding-block:23px}
  .people{padding-block:43px}
  .people-heading{grid-template-columns:1fr;gap:23px;margin-bottom:30px}
  .people-heading h2{font-size:38px}
  .people-heading .eyebrow{font-size:10px}
  .portraits{grid-template-columns:repeat(2,1fr);gap:25px 16px}
  .portraits strong{font-size:23px}
  .portraits img{aspect-ratio:4/5}
  .portraits span{font-size:12px}
  .region{grid-template-columns:1fr;padding-block:48px;gap:30px}
  .region h2{font-size:39px}
  .region img{aspect-ratio:1.5}
  .site-footer{padding-top:40px}
  .footer-main{grid-template-columns:1fr 1fr;gap:32px 20px;padding-bottom:34px}
  .footer-help{grid-column:1;grid-row:1}
  .footer-office{grid-column:2;grid-row:1}
  .footer-identity{display:block;grid-column:1/-1;grid-row:2;border-top:1px solid #b9c7b633;padding-top:28px}
  .footer-identity .brand{margin-bottom:24px}
  .footer-identity>p{font-size:20px;margin:0 0 16px}
  .footer-local{font-size:12px;line-height:1.7;padding-top:2px}
  .footer-office p,.footer-help a,.footer-office a{font-size:13px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;font-size:11px;padding-block:18px}
  .footer-bottom nav{gap:24px}
  .footer-bottom a{font-size:11px}
  dialog{padding:24px}
  /* interior pages */
  .page-intro{padding-top:14px}
  .breadcrumb{margin-bottom:22px;font-size:11px}
  .page-intro .eyebrow{font-size:10px}
  .page-intro h1{font-size:43px}
  .page-lead{font-size:16px;margin-top:20px}
  .page-section{padding-block:40px}
  .split,.card-grid,.card-grid.two,.team-grid{grid-template-columns:1fr}
  .split{gap:26px}
  .split-reverse>figure{order:0}
  .team-grid{gap:36px}
  .callout{padding:24px}
  .status-page{padding-bottom:60px}
  /* resale */
  .request-section h2{font-size:30px}
  .request-layout,.contact-layout{gap:8px;padding-bottom:40px}
  .service-choice{grid-template-columns:18px minmax(0,1fr) auto;gap:10px;padding:20px 14px}
  .service-choice:has(input:checked){padding:19px 13px}
  .service-choice strong{font-size:22px}
  .service-choice b{font-size:25px}
  .service-choice span span{font-size:14px}
  .service-choice small{font-size:12px}
  .service-choice input{width:17px;height:17px}
  .field-grid{grid-template-columns:1fr;gap:18px}
  .request-sidebar{grid-template-columns:1fr;gap:0}
  .request-summary,.contact-info{padding:26px}
  .request-faq{padding-bottom:45px}
  .request-faq h2{font-size:32px}
  .request-faq summary{font-size:16px}
  .request-review .button{width:100%;justify-content:center}
  .request-help{padding-bottom:4px}
}

@media(max-width:359px){
  .wrap{width:calc(100% - 32px)}
  h1{font-size:41px}
  .hero-copy{width:100%;padding-right:0}
  .brand>span{font-size:28px}
  .brand img{width:42px;height:42px}
  .hero-photo{height:250px}
  .portraits strong{font-size:21px}
  .footer-main{grid-template-columns:1fr}
  .footer-help{grid-column:1;grid-row:1}
  .footer-office{grid-column:1;grid-row:2}
  .footer-identity{grid-row:3}
  .page-intro h1{font-size:37px}
  .service-choice{grid-template-columns:18px minmax(0,1fr)}
  .service-choice b{grid-column:2;grid-row:2}
  .service-choice strong{font-size:23px}
  .request-summary{padding:22px}
}

/* ─── Our services page (services-study-v2) ──────────────────────────────
   Compact introduction, two audience chapters (narrow heading/summary/contact column beside
   two-column grouped services), one shallow landscape photo and a closing contact band.
   Every rule is scoped to main.services-page; the study's two override layers are
   consolidated into their final computed values. */
.services-page .svc-intro{padding-block:35px 30px;border-bottom:1px solid var(--ink)}
.services-page .intro-columns{display:grid;grid-template-columns:1.2fr 1fr;column-gap:8%;align-items:center}
.services-page .svc-intro h1{font-size:clamp(38px,3.9vw,56px);line-height:1.08}
.services-page .intro-columns>div>p{font-size:18px;max-width:430px;margin-bottom:12px;color:var(--muted)}
.services-page .intro-columns nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.services-page .intro-columns nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:6px}
.services-page .svc-chapter{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);column-gap:9%;padding-block:55px 48px;align-items:start}
.services-page .svc-summary{grid-column:1;grid-row:1;min-width:0}
.services-page .svc-summary .eyebrow{margin-bottom:17px}
.services-page .svc-summary h2{font-size:clamp(34px,3.1vw,46px);max-width:340px;line-height:1.08}
.services-page .svc-lead{font:23px/1.35 var(--serif);letter-spacing:-.02em;margin:22px 0 15px}
.services-page .svc-summary p:not(.eyebrow):not(.svc-lead){font-size:16px;color:var(--muted);max-width:350px}
/* Two equal columns, as selected; one column whenever a column would be narrower than 10.5em
   (enlarged text), so the longest service heading word always fits. */
.services-page .svc-details{grid-column:2;grid-row:1/span 2;display:grid;grid-template-columns:repeat(auto-fit,minmax(max(min(100%,10.5em),calc(50% - 18px)),1fr));gap:28px 35px}
.services-page .svc-details article{padding-top:17px;border-top:1px solid var(--line);min-width:0}
.services-page .svc-details h3{font-size:26px;line-height:1.15;margin-bottom:12px;letter-spacing:-.03em}
.services-page h1,.services-page h2,.services-page h3{overflow-wrap:break-word}
.services-page .svc-details p{font-size:16px;color:var(--muted);line-height:1.6}
.services-page .svc-contact{grid-column:1;grid-row:2;padding-top:20px;align-self:start}
.services-page .svc-landscape figure{margin:0;min-width:0}
.services-page .svc-landscape img{width:100%;height:220px;object-fit:cover;object-position:50% 50%}
.services-page #rental{border-bottom:1px solid var(--line)}
.services-page .svc-close{padding-block:40px 48px}
.services-page .svc-close>div{display:grid;grid-template-columns:1fr 1fr;column-gap:10%;align-items:center}
.services-page .svc-close h2{font-size:clamp(34px,3vw,44px);line-height:1.08}
.services-page .svc-close p:not(.eyebrow){max-width:460px;color:var(--muted);margin-bottom:22px}
.services-page .close-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.services-page .close-actions>a{display:inline-flex;align-items:center;min-height:48px}
.services-page .close-actions>a:not(.button){text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){
  .services-page .svc-chapter{column-gap:6%;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .services-page .svc-details{gap:24px}
  .services-page .svc-details h3{font-size:24px}
}
@media(max-width:800px){
  .services-page .svc-close>div{grid-template-columns:1fr;gap:26px}
}
@media(max-width:760px){
  .services-page .intro-columns{grid-template-columns:1fr;gap:18px}
  .services-page .svc-intro{padding-block:29px 25px}
  .services-page .svc-intro h1{font-size:clamp(38px,7vw,48px)}
  .services-page .svc-chapter{display:flex;flex-direction:column;padding-block:34px;gap:25px}
  .services-page .svc-summary h2{font-size:38px;max-width:450px}
  .services-page .svc-lead{margin-top:17px}
  .services-page .svc-summary p:not(.eyebrow):not(.svc-lead){max-width:520px}
  .services-page .svc-details{width:100%;gap:24px 26px}
  .services-page .svc-contact{padding-top:0}
  .services-page .svc-landscape img{height:150px}
  .services-page .svc-close>div{gap:22px}
}
@media(max-width:480px){
  .services-page .svc-details{grid-template-columns:1fr;gap:18px}
  .services-page .svc-details article{padding-top:13px}
  .services-page .svc-details h3{font-size:25px;margin-bottom:8px}
}
@media(max-width:359px){
  .services-page .svc-intro h1{font-size:34px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}