/* LIVE (2026-10-07, Kayle): free stand-ins for the Caslon set until the Caslon web fonts are licensed. To revert to type B, point each page back at type-b.css. When Caslon is licensed, use type-caslon-ready-to-install.css instead. Archivo condensed (headings) and expanded (labels) for Caslon Doric; Besley for Caslon Ionic. Same sizes and spacing as the Caslon preview. */

:root {
  --f-head:  'Archivo', 'Arial Narrow', Arial, sans-serif;
  --f-label: 'Archivo', Arial, sans-serif;
  --f-body:  'Besley', Georgia, serif;
}
/* One weight per Doric width: never let the browser fake a bold. */
html { font-synthesis: none; }
body { font-weight: 400; font-size: 17px; line-height: 1.62; }

/* ── Headings: Doric Condensed, sentence case ─────────────────── */
.heading, .page-header__h1, .process-intro__heading, .testimonials__heading,
.types__heading, .beliefs__heading, .team__heading, .partners__heading,
.project-narrative__heading, .journal-item__title, .article__body h2,
.project-body__prose h2, .home-cta__heading, .why__heading, .about__heading {
  font-family: var(--f-head); font-stretch: 62.5%;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.02;
}
.page-header__h1 { font-size: clamp(44px, 7vw, 84px); line-height: 0.98; max-width: 15ch; }
.home-cta__heading { font-size: clamp(44px, 6.4vw, 80px); line-height: 0.98; }
.section-heading, .process-intro__heading, .testimonials__heading, .types__heading,
.beliefs__heading, .team__heading, .partners__heading { font-size: clamp(34px, 4.6vw, 54px); }
.why__heading { font-size: clamp(36px, 4.6vw, 56px); }
.about__heading { font-size: clamp(32px, 4vw, 48px); }
.cta-section__heading { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; }
.section-header .heading { font-size: clamp(28px, 3.2vw, 40px); }
.project-phase__title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.04; }
.project-body__prose h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.05; }
.journal-item__title { font-size: clamp(28px, 3.4vw, 38px); }
.article__body h2 { font-size: clamp(26px, 3vw, 34px); }

/* ── Titles in lists ──────────────────────────────────────────── */
.step__title, .belief__title, .pillar-card__title, .type-row__title, .partner-row__name,
.team-card__name, .pillar__title, .project-card__name, .work-card__name,
.project-pager__name, .footer__brand-name, .nav-link__label {
  font-family: var(--f-head); font-stretch: 62.5%;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
}
.step__title, .belief__title { font-size: clamp(24px, 2.4vw, 28px); line-height: 1.05; }
.pillar__title { font-size: 24px; line-height: 1.1; }
.pillar-card__title, .type-row__title, .partner-row__name { font-size: 26px; line-height: 1.08; }
.team-card__name { font-size: 24px; line-height: 1.1; }
.project-card__name, .work-card__name { font-size: 22px; line-height: 1.1; letter-spacing: 0; }
.project-pager__name { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; }
.footer__brand-name { font-size: 22px; line-height: 1.1; }
.nav-link__label { font-size: clamp(32px, 4.2vw, 44px); line-height: 1; }

/* Big figures */
.origin__year, .project-stat__num, .fact-num__n { font-family: var(--f-head); font-stretch: 62.5%; font-weight: 500; font-variant-numeric: lining-nums; }
.fact-num__n { font-size: 32px; }
.work-header__label {
  font-family: var(--f-head); font-stretch: 62.5%; font-weight: 500; text-transform: none;
  letter-spacing: -0.005em; line-height: 0.98; font-size: clamp(44px, 7vw, 84px);
}

/* ── Ionic voices: subtitles, quotes, names ──────────────────── */
.step__subtitle { font-family: var(--f-body); font-stretch: 100%; font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--muted); }
.testimonial__quote { font-family: var(--f-body); font-stretch: 100%; font-style: italic; font-weight: 400; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.35; }
.testimonial__name { font-family: var(--f-body); font-stretch: 100%; font-weight: 500; font-size: 17px; text-transform: none; letter-spacing: 0; }
.brand-statement__text { font-family: var(--f-body); font-stretch: 100%; font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; }
.page-header__text, .howwework-intro, .project-header__lede { font-family: var(--f-body); font-stretch: 100%; font-weight: 400; font-size: clamp(19px, 2.1vw, 22px); line-height: 1.55; }
.footer__tagline { font-style: italic; }

/* ── Body copy ────────────────────────────────────────────────── */
.why__body, .step__body, .about__body, .belief__body, .origin__body, .project-phase__text,
.project-narrative__body, .cta-section__body, .home-cta__body, .project-body__prose p,
.project-meta-item__value {
  font-family: var(--f-body); font-stretch: 100%; font-size: 17px; line-height: 1.62; font-weight: 400; letter-spacing: 0;
}
/* Several pages set body paragraphs inline at 15px (sized for DM Sans).
   Ionic needs ~2px more to read at the same comfort. */
.page p[style*="font-size: 15px"], .page p[style*="font-size:15px"] { font-size: 17px !important; line-height: 1.62 !important; }
/* Inline 1.8 line-heights were set for a light sans; Ionic is darker and wants less air. */
.page p[style*="line-height: 1.8"], .page p[style*="line-height:1.8"] { line-height: 1.6 !important; }

/* Homepage project list: was 15px for DM Sans */
.proof-list a { font-size: 16px; }

/* ── Doric Wide: labels, numbers, UI words ───────────────────── */
.eyebrow, .page-header__label, .process-intro__label, .testimonials__label, .types__label,
.beliefs__label, .team__label, .partners__label, .project-phase__label, .project-narrative__label,
.journal-item__date, .article__meta, .footer__col-label, .partner-row__category, .testimonial__org,
.project-meta-item__label, .project-stat__label, .form-label, .project-header__label,
.project-facts__title, .project-pager__dir, .fact-num__l, .project-pager__all,
.project-figure__credit, .img-placeholder__label, .gallery-label, .project-hero__label,
.work-card__meta, .work-card__flag, .project-card__meta, .project-nav__link,
.nav-drawer__wordmark {
  font-family: var(--f-label); font-stretch: 125%;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.eyebrow, .page-header__label, .process-intro__label, .testimonials__label, .types__label,
.beliefs__label, .team__label, .partners__label, .project-phase__label, .project-narrative__label,
.project-header__label, .project-facts__title, .footer__col-label { font-size: 11.5px; }
/* Inline-styled labels, e.g. "Selected projects", "Architect", "Client" */
p[style*="text-transform:uppercase"], span[style*="text-transform:uppercase"] { font-family: var(--f-label); font-stretch: 125%; font-weight: 400; }

.step__num, .pillar__num, .belief__num, .pillar-card__num, .type-row__num, .nav-link__num {
  font-family: var(--f-label); font-stretch: 125%;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.14em;
  font-variant-numeric: lining-nums;
  color: var(--muted);
}
.step__num { display: block; margin-bottom: 12px; }

.text-link, .btn-solid, .hero__cta, .skip-link, .side-label, .utility-link {
  font-family: var(--f-label); font-stretch: 125%;
  font-weight: 400;
  text-transform: uppercase;
}
.text-link { font-size: 12px; letter-spacing: 0.12em; }
.btn-solid { font-size: 12px; letter-spacing: 0.14em; }
.side-label { font-size: 11.5px; letter-spacing: 0.16em; }
.utility-link { font-size: 11.5px; letter-spacing: 0.12em; }

/* ── Small screens ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .step__title { font-size: 25px; }
  .section-ruled-top h2.heading { font-size: 30px !important; line-height: 1.04; }
}
@media (max-width: 639px) {
  .page-header__h1 { overflow-wrap: normal; }
  .section-header .heading { font-size: 26px; }
  .step__subtitle { text-wrap: pretty; }
}
.origin__year { opacity: 0.22; }
.team__grid { margin-top: 40px; }
/* ═══ Caslon QA pass (2026-10-04): sizing and spacing after the switch ═══ */

/* ── Page titles: no 4-line towers on desktop; phones use the full column.
   Case-study titles join the page-title scale (project-page.css says they should match). */
.project-header__h1 { font-size: clamp(44px, 7vw, 84px); line-height: 0.98; max-width: 15ch; }
@media (min-width: 640px) { .page-header__h1, .project-header__h1 { max-width: 18ch; } }
@media (max-width: 639px) { .page-header__h1, .project-header__h1 { max-width: none; } }
#page-frame-studies .page-header__h1 { max-width: 20ch; }
#page-frame-studies .section-ruled-top .project-phase__title { max-width: 30ch; }

/* ── Heading to first paragraph: one step, 24px, like the CTA blocks */
.section-heading + p { margin-top: 24px !important; }
.partners__heading { margin-bottom: 24px; }
#page-craft .fade-in:has(> .section-heading:last-child) { margin-bottom: 24px !important; }
#page-approach .section-ruled-top h2.heading { margin-bottom: 24px !important; }

/* ── "For owners" aside on The process: one size at every width, below a section heading, above body */
#page-approach .section-ruled-top h2.heading { font-size: clamp(30px, 3.4vw, 40px) !important; line-height: 1.04; }

/* ── Titles in lists: Doric Condensed's word space is tight; open it a hair and balance the lines */
.step__title, .belief__title, .pillar__title, .pillar-card__title, .type-row__title, .partner-row__name,
.team-card__name, .project-card__name, .work-card__name, .project-pager__name {
  letter-spacing: 0; word-spacing: 0.06em; text-wrap: balance;
}
.journal-item__title, .article__body h2 { text-wrap: balance; }

/* ── Measure: Ionic's "0" is wide (~0.7em), so ch caps run long. */
.step__body > p { max-width: 50ch; }
#page-approach .section-ruled-top p { max-width: 50ch; }
#page-craft .section-ruled .fade-in > p[style*="font-size:15px"] { max-width: 36em !important; }
.origin__body, .project-phase__text, .journal-item__excerpt { max-width: 36em; }
@media (min-width: 1024px) {
  .why__inner { max-width: var(--max); grid-template-columns: 5fr 7fr; }
  .project-header__lede { max-width: 50ch; }
  .type-row { grid-template-columns: 40px 1fr; gap: 20px; }
}

/* ── Tablet: two-column steps and quotes were squeezing body to phone width */
@media (min-width: 640px) and (max-width: 1023px) {
  body .step:not(.step--faq) { grid-template-columns: 1fr; }
  body .step:not(.step--faq) .step__left { padding: 40px 0 0; border-right: 0; }
  body .step:not(.step--faq) .step__right { padding: 16px 0 40px !important; }
  .step:not(.step--faq) .step__title { font-size: 28px; }
  .testimonial { grid-template-columns: 1fr; gap: 20px; }
  .testimonial__source { text-align: left; }
}
@media (max-width: 639px) {
  #page-owners .step:not(.step--faq) .step__right { padding-top: 0 !important; }
}

/* ── Secondary text left at DM Sans sizes */
.type-row__desc { font-size: 16px; line-height: 1.6; }
.partners__intro { font-size: 17px; line-height: 1.62; }
.partner-row__desc { font-size: 15px; line-height: 1.6; }
.team-card__role { font-size: 15px; line-height: 1.55; }
.team-card__name { margin-bottom: 6px; }
.journal-item__excerpt { font-size: 16px; line-height: 1.6; margin-top: 16px; }
.article__body p, .article__body li { font-size: 17px; line-height: 1.62; }
.article__body > p { max-width: 640px; }
.article__body > ul { max-width: 618px; }
.article__meta + .page-header__h1 { margin-bottom: 0; }
.article__body { margin-top: 40px; }

/* ── Contact details: four answers, one voice (the inline var(--f-head) now means Doric Condensed) */
#page-contact a[style*="var(--f-head)"], #page-contact a[style*="font-size:15px"] {
  font-family: var(--f-body) !important; font-size: 17px !important; letter-spacing: 0; position: relative;
}
#page-contact a[style*="var(--f-head)"]::before, #page-contact a[style*="font-size:15px"]::before {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; bottom: -16px;
}
#page-contact .form-label > span[style] { font-family: var(--f-body) !important; font-style: italic; font-size: 13px !important; letter-spacing: 0 !important; }
.form-input { padding: 13px 0; }

/* ── Labels: one size and tracking for one job. 11.5px on larger screens, 12px floor on phones. */
.page p[style*="text-transform:uppercase"][style*="font-size:11px"],
.testimonial__org, .form-label, .project-pager__dir, .article__meta, .journal-item__date,
.study__specs .project-meta-item__label { font-size: 11.5px !important; letter-spacing: 0.14em !important; }
.utility-link { font-size: 12px; }
.project-header__label, .fact-num__l { line-height: 1.4; }
@media (max-width: 639px) {
  .eyebrow, .page-header__label, .process-intro__label, .testimonials__label, .types__label,
  .beliefs__label, .team__label, .partners__label, .project-phase__label, .project-narrative__label,
  .project-header__label, .project-facts__title, .footer__col-label, .partner-row__category,
  .testimonial__org, .form-label, .project-pager__dir, .article__meta, .journal-item__date,
  .work-card__meta, .work-card__flag, .study__specs .project-meta-item__label,
  .page p[style*="text-transform:uppercase"][style*="font-size:11px"] { font-size: 12px !important; }
  .fact-num__l { font-size: 12px; letter-spacing: 0.06em; }
}

/* ── Drawer */
.nav-link__num { min-width: 28px; flex-shrink: 0; font-variant-numeric: tabular-nums lining-nums; }
.nav-drawer__wordmark { font-size: 12px; }
.nav-drawer__sub { font-size: 13px; letter-spacing: 0; }

/* ── Footer: small print at the floor, untracked serif, one rhythm for both lists */
.footer__bottom { font-size: 12px; }
.footer__colophon { letter-spacing: 0; }
@media (max-width: 1023px) { .footer__bottom { flex-direction: column; align-items: flex-start; } }
.footer__contact p { line-height: 27.5px; }
.footer__contact p:not(.footer__col-label) + p { margin-top: 8px; }

/* ── Tap areas: Ionic's line box is short (0.9em), so inline links need more reach */
.footer__nav a::before, .footer__contact a::before { top: -16px; bottom: -16px; }
.fact-link, #page-raising .wrap > p > a { position: relative; }
.fact-link::before, #page-raising .wrap > p > a::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; bottom: -16px; }

/* ── Phone fit: long link and button labels */
@media (max-width: 639px) {
  .follow-section .section-header .text-link { white-space: normal; }
  .btn-solid { padding-left: 24px; padding-right: 24px; letter-spacing: 0.1em; }
}

/* ── Case-study facts: keys sit on the value's baseline */
@media (min-width: 641px) { .fact-list__row { align-items: baseline; } }

/* ── Frame studies: spec values that stack 5 deep, and rules at content width */
@media (max-width: 1023px) { .study__specs .project-meta-item__value { font-size: 15px; line-height: 1.45; } }
@media (min-width: 640px) and (max-width: 1023px) { .study__specs { grid-template-columns: repeat(2, 1fr); } }
.study__specs .project-meta-item { border-bottom: 0; padding-bottom: 0; }
.study { border-bottom: 0; }
.study > .wrap { position: relative; }
.study:not(:has(+ .section-ruled-top)) > .wrap::after { content: ''; position: absolute; left: var(--wrap-pad); right: var(--wrap-pad); bottom: calc(-1 * var(--sp-lg)); height: 1px; background: rgba(26,25,22,0.15); }

/* ── Doubled hairlines above the closing CTA */
#page-trade .cta-section__inner, .project-page .cta-section__inner { border-top: 0; }

/* Home: the tagline is the first screen’s main heading (h1) and reads at a size: body serif italic,
   sentence case, second to the logo (brand review B31, Kayle 2026-10-05). */
.hero__tagline { font-family: var(--f-body); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 19px; line-height: 1.3; margin: 0; color: rgba(255,255,255,0.94); }
@media (min-width: 640px) { .hero__tagline { font-size: 22px; } }


/* ════ Pre-launch polish (2026-10-08) ════ */
.nw { white-space: nowrap; }

/* Side labels fade while a photo edge cuts through their letters (rail-visibility.js) */
@media (min-width: 640px) { body.rails-straddle .side-label { opacity: 0 !important; pointer-events: none; } }

/* Menu button: on phones it sat right on the text column's edge; move it over the side-label line */
@media (max-width: 639px) { .menu-btn { right: 12px; } }
/* white bars hold up over pale skies */
.menu-btn.over-hero .menu-btn__bar { box-shadow: 0 0 5px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.5); }

/* Open menu: fits on laptop screens without scrolling */
.nav-link__label { word-spacing: 0.08em; }
@media (min-width: 1024px) and (max-height: 940px) {
  .nav-drawer__panel { padding-top: 32px; padding-bottom: 32px; }
  .nav-drawer__top { margin-top: 16px; }
  .nav-link { padding-top: 12px; padding-bottom: 12px; }
  .nav-link__label { font-size: clamp(30px, 5vh, 40px); }
}
@media (min-width: 640px) and (max-width: 1023px) { .nav-drawer__panel { padding-left: 40px; padding-right: 40px; } }

/* Footer: the small links stay on one line; columns start level; phone size fits "Architects & contractors" */
@media (min-width: 640px) { .utility-link { white-space: nowrap; } }
@media (max-width: 639px) { .footer .utility-link { font-size: 11px; letter-spacing: 0.06em; } }
@media (min-width: 1024px) and (max-width: 1279px) { .footer__grid { grid-template-columns: 0.8fr 1.2fr 1fr; } }
.footer__contact p.footer__col-label { line-height: 1.62; }

/* Project pages */
.ph-sep { white-space: nowrap; }
@media (max-width: 639px) { .ph-sep { display: none; } .ph-place { display: block; } }
.fact-list__v { text-wrap: balance; }
.fact-nums { grid-template-columns: auto auto; justify-content: start; column-gap: 32px; }
@media (max-width: 639px) { .fact-nums { column-gap: 20px; } }
.fact-num__l { text-wrap: balance; }
@media (max-width: 900px) {
  .project-credits { border-top: 0; position: relative; }
  .project-credits::before { content: ''; position: absolute; top: 0; left: var(--wrap-pad); right: var(--wrap-pad); height: 1px; background: var(--pp-rule, rgba(26,25,22,0.15)); }
  .project-credits .fact-list__row:last-child { border-bottom: 0; }
}
/* galleries line up with the text column on tablets and small laptops */
@media (min-width: 640px) and (max-width: 1023px) { .project-gallery, .page.project-page .project-gallery { padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); } }
@media (min-width: 1024px) and (max-width: 1199px) { .project-gallery, .page.project-page .project-gallery { padding-left: 0; padding-right: 0; } }
@media (max-width: 640px) { .project-pager__all { text-align: left; } }

/* Hero and photo crops that cut off a peak, a head or a base */
@media (min-width: 1024px) {
  #page-home .full-bleed img { object-position: 50% 10%; }
  .project-hero img[src*="cedar-lakes-hero"] { object-position: 50% 8%; }
  .project-hero img[src*="erie-party-barn-hero"] { object-position: 50% 30%; }
  .project-hero img[src*="parkland-tower-hero"] { object-position: 50% 62%; }
}
@media (min-width: 640px) {
  .project-hero img[src*="morris-residence-great-room-trusses"] { object-position: 50% 15%; }
  img[src*="shop-overview-wide-shot-of-the"] { object-position: 50% 0%; }
  .img-placeholder--divider img[src*="frame-raising"] { object-position: 50% 85%; }
}
@media (max-width: 639px) { .project-hero img[src*="weaver-cabin-hero"] { object-position: 75% 50%; } }
img[src*="mendenhall-hill-great-room-arches"] { object-position: 50% 0%; }
#page-trade img[src*="cedar-lakes-hero"] { object-position: 50% 20%; }

/* Home */
@media (max-width: 639px) { .brand-statement__text { font-size: 20px; } }
.why__link { margin-bottom: 0; }
@media (min-width: 640px) { .hero__credit { right: calc(var(--side-w) + 8px); } }
@media (min-width: 640px) and (max-width: 1279px) { .pc-sep { display: none; } .pc-place, .pc-type { display: block; white-space: nowrap; } }

/* Buttons never break their label */
.btn-solid { white-space: nowrap; }
@media (max-width: 379px) { .btn-solid { padding-left: 12px; padding-right: 12px; letter-spacing: 0.08em; } }

/* Two-column step rows (Architects, Process, Craft): the title column grows on wide screens */
@media (min-width: 1024px) { .step:not(.step--faq) { grid-template-columns: clamp(240px, 22vw, 300px) 1fr; } }
.step__title { text-wrap: balance; }

/* Testimonial name and firm stay on one line each on laptops */
@media (min-width: 1024px) { .testimonial { grid-template-columns: 1fr 260px; } }

/* Process timeline: numerals match the step numerals; short lines balance */
.journey__num { font-family: var(--f-label); font-stretch: 125%; font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: 0.1em; }
.journey__line { text-wrap: pretty; }

/* Closing calls to action: the rule runs the full column like every other rule, and is never doubled */
.cta-section__inner { max-width: none; align-items: flex-start; }
.cta-section__heading { max-width: 700px; }
.cta-section__body { max-width: 640px; }
#page-about .cta-section__inner, #page-work .cta-section__inner { border-top: 0; }

/* Our Story */
@media (min-width: 1024px) { .belief + .belief { margin-top: 0; } .belief__left, .belief__right { padding-bottom: 92px !important; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .belief { grid-template-columns: 1fr; }
  .belief__left { padding: 40px 0 0 !important; border-right: 0 !important; }
  .belief__right { padding: 16px 0 40px !important; }
}
@media (min-width: 1024px) { .partner-row { grid-template-columns: 1fr; gap: 8px; } }
@media (min-width: 640px) and (max-width: 1023px) { .partner-row { grid-template-columns: 200px 1fr; } }

/* Work: the Instagram link fits a phone line */
@media (max-width: 639px) { .follow-section .text-link { letter-spacing: 0.06em; } }

/* Contact: email addresses fit the phone column */
@media (max-width: 639px) { #page-contact div[style*="gap: 28px"] a[href^="mailto:"], #page-contact p[style*="max-width:46ch"] a[href^="mailto:"] { font-size: 15px !important; } }

/* Architects: the two figures in step 02 sit side by side from small laptops up */
.step__body .project-figures { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
/* Architects: project card facts, label on the value's baseline; more room for values on phones */
#page-trade .partner-card div[style*="padding:9px 0"], #page-trade div[style*="display:flex; gap:16px; padding:9px 0"] { align-items: baseline; }
@media (max-width: 639px) { #page-trade span[style*="flex:0 0 36%"] { flex: 0 0 96px !important; max-width: 96px !important; } }
/* Work: on phones the rule under the project grid runs at the text column, like every other rule */
@media (max-width: 639px) {
  .work-project-grid { border-bottom: 0 !important; position: relative; }
  .work-project-grid::after { content: ''; position: absolute; left: var(--wrap-pad); right: var(--wrap-pad); bottom: 0; height: 1px; background: rgba(26,25,22,0.15); }
}

/* Work: "Follow @settlementpostandbeam" fits a phone line */
@media (max-width: 639px) { .follow-section .section-header .text-link { letter-spacing: 0.02em; } }

/* round 6 */
@media (min-width: 640px) and (max-width: 799px) { .pc-type { white-space: normal; } .project-card__meta { min-height: 4.9em; } }
@media (min-width: 1024px) { .partner-row { align-content: start; } .beliefs .wrap > .belief:last-child { padding-bottom: 0; margin-bottom: 0; } .section-ruled--list > .wrap { padding-bottom: 0; } }
@media (max-width: 639px) { .form-label { letter-spacing: 0.06em; } }
@media (min-width: 600px) { .email-wrap { white-space: nowrap; } }
#page-owners .section-ruled:has(.step--faq) > .wrap::after { display: none; }
@media (max-width: 900px) { .project-credits { margin-top: 22px; } }
@media (min-width: 1024px) { .project-hero img[src*="parkland-tower-hero"] { object-position: 50% calc(28px - 21.6vw); } }

/* 2026-10-09 (Kayle): headings were hard to read; the condensed face ran its words together */
.heading, .page-header__h1, .project-header__h1, .work-header__label { word-spacing: 0.12em; letter-spacing: 0; }

/* 2026-10-09 (Kayle): on phones a finger on a photo shrank it into the "open image" preview. No callout, no drag, no selection on photos;
   hover zooms only where there is a real mouse. */
img, video, .project-card, .work-card, .follow-grid__item, .project-gallery a { -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@media (hover: none) {
  .project-card[data-page]:hover .project-card__img, .follow-grid__item:hover img, .work-card:hover .work-card__img img { transform: none; }
  .work-card:hover .work-card__img img { filter: saturate(0.86) sepia(0.05) contrast(1.02); }
}

/* Home cards: the town on phones too (Kayle, 2026-10-09). Name and town; the type stays for wider screens. */
@media (max-width: 639px) {
  .project-card__meta { display: block; font-size: 12px; }
  .project-card__meta .pc-sep, .project-card__meta .pc-type { display: none; }
}

/* Home hero: a steady height on phones (Kayle, 2026-10-09). 100dvh grew when the address bar hid, at the end of
   the swipe, so the hero's words and everything below jumped. 100svh is the screen with the bar showing: the same
   on load, and it never changes while scrolling. The photo layer stays 100lvh, so nothing rescales. */
.hero { height: 100vh; height: 100svh; }

/* Our work: six featured, the rest behind "See more projects" (Kayle + Mike 2026-10-13). Without script, everything shows. */
.work-more { display: none; grid-column: 1 / -1; margin: 0; }
.js .work-more { display: block; }
.js .work-project-grid:not(.is-all) .work-card--more { display: none; }
.js .work-project-grid.is-all .work-more { display: none; }
.work-more__btn { background: none; border: 0; padding: 12px 0; cursor: pointer; color: var(--ink); }

/* Work: the Instagram strip, bigger (Kayle, 2026-10-13): two across on phones, three from tablets up */
.follow-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .follow-grid { grid-template-columns: repeat(3, 1fr); } }

/* Home intro in two paragraphs (Kayle, 2026-10-13): stacked, not side by side */
.brand-statement__inner { flex-direction: column; }
.brand-statement__text + .brand-statement__text { margin-top: 0.75em; }

/* Sample job page, proposal to shop drawings (Kayle, 2026-10-14) */
/* one rule between sections, none under each intro */
#page-sample-job .section-ruled > .wrap:first-child::after { display: none; }
#page-sample-job .section-ruled > .wrap:first-child { padding-bottom: 0; }
/* phones: room under the model for the button, so it never sits on the posts */
@media (max-width: 639px) {
  #page-sample-job .model-spin { aspect-ratio: 1 / 1 !important; }
  #page-sample-job .model-spin__poster { object-fit: contain !important; }
  #page-sample-job .model-spin__btn { bottom: 16px !important; }
}
/* Sample job page captions (Kayle, 2026-10-14): set apart from the copy, a hairline at the left, the title as a label */
#page-sample-job figcaption { border-left: 1px solid rgba(26,25,22,0.35); padding-left: 16px; margin-top: 18px !important; }
#page-sample-job figcaption .cap-title { display: block; font-family: var(--f-label); font-stretch: 125%; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 500; margin-bottom: 6px; line-height: 1.4; }
/* Sample job page on phones (Kayle, 2026-10-14: "make it look super great on mobile"). Desktop untouched.
   Drawings at their own shape, not a short 3:2 box. One rhythm: 10px between sheets of one group, 18px picture to caption,
   56px after a caption or an intro, 64px around the closing photo. Download links wrap tight so each reads as one link. */
@media (max-width: 639px) {
  #page-sample-job .project-gallery__full.is-drawing,
  #page-sample-job .project-gallery__pair-img.is-drawing,
  #page-sample-job .project-gallery__portrait-img.is-drawing { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block; }
  #page-sample-job .is-drawing img.ph-img { height: auto; padding: 4%; }
  #page-sample-job .project-gallery__full.is-drawing { margin-bottom: 10px; }
  #page-sample-job .project-gallery__pair:has(.is-drawing) { gap: 10px; }
  #page-sample-job .project-gallery__portrait:has(.is-drawing) { grid-template-columns: 1fr 1fr; gap: 10px; }
  #page-sample-job .project-gallery__portrait-img.is-drawing img.ph-img { padding: 6%; }
  #page-sample-job figure:has(+ figure) { margin-bottom: 56px !important; }
  #page-sample-job #proposal > figure:first-of-type { margin-bottom: 10px !important; }
  #page-sample-job .section-ruled > .wrap:first-child > .fade-in { margin-bottom: 56px !important; }
  #page-sample-job #raising > figure:last-of-type { margin: 64px auto 0 !important; }
  #page-sample-job .model-spin__poster { object-position: 50% 15% !important; }
  #page-sample-job p:has(> a.text-link) { font-size: 12px; line-height: 1.6; margin-top: 18px !important; }
  #page-sample-job p:has(> a.text-link):first-child, #page-sample-job .wrap > p:has(> a.text-link):first-of-type { margin-top: 28px !important; }
  #page-sample-job a.text-link { letter-spacing: 0.1em; }
}
@media (max-width: 639px) {
  body.page-sample .side-label { transition: opacity 0.3s ease, visibility 0s linear 0s; }
  body.page-sample.rails-off .side-label { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
}
/* Footer on phones (2026-10-14): the small utility links get the same room as the Navigate links, so each is easy to tap */
@media (max-width: 639px) { .footer__grid div:has(> .utility-link) { gap: 18px !important; } }

/* The whole site on phones (review panel, 2026-10-14: "look over the rest of the site on mobile too"). Desktop untouched. */
@media (max-width: 639px) {
  /* footer colophon: two clean lines, no dot left hanging */
  .fc-sep { display: none; }
  .footer__colophon > .nw { display: block; }
  /* closing block: the same room below the button as above the heading */
  .cta-section { padding-bottom: var(--sp-lg); }
  .project-page .cta-section { padding-top: 64px; padding-bottom: 80px; }
  /* small uppercase links that wrap read as one link */
  .step__body p:has(> a.text-link) { font-size: 12px; line-height: 1.6; }
  /* links beside a button get tap room */
  .cta-section__inner div:has(> .btn-solid) { row-gap: 28px !important; }
  /* project cards on For homeowners and For architects: photos at full phone width like Our work */
  .card-photo { margin-left: calc(-1 * var(--wrap-pad)); margin-right: calc(-1 * var(--wrap-pad)); }
  /* no hairline lip against a photo edge */
  .section-ruled:has(+ .split-grid, + .img-placeholder) > .wrap::after { display: none; }
  .img-placeholder--divider + .process-steps .step:first-child { border-top: 0; }
  .page-header:has(+ section > .full-bleed) .wrap > .fade-in { border-bottom: 0; }

  /* Our work: no dead band before "In their words" */
  body.page-work .follow-section { padding-bottom: 0; }
  /* Process: a divider photo sits a beat between steps, not after an empty gap */
  #page-approach .process-steps:has(+ .img-placeholder--divider) { padding-bottom: 0; }
  /* Raising day: each run of photos stays with its own words */
  #page-raising .section-ruled > .wrap { padding-bottom: 0; }
  #page-raising .section-ruled > .wrap::after { display: none; }
  #page-raising .section-ruled > .project-gallery { padding-top: 0; padding-bottom: var(--sp-md); }
  #page-raising .project-gallery__full:has(> img[src*="frame-winter-field"]) { aspect-ratio: 4 / 5; }
  #page-raising .wrap > p > a:first-of-type::before { bottom: 0; }
  #page-raising .wrap > p > a:first-of-type ~ a::before { top: 0; }
  /* Our story */
  #page-about .img-placeholder img { object-position: 72% 50%; }
  .team-card__photo:has(.portrait-pending) { display: none; }   /* until Gabrielle's and Bruce's portraits are in */
  .belief__right { padding: 0 0 36px; }
  .belief + .belief { margin-top: 0; }
  .beliefs .wrap > .belief:last-child .belief__right { padding-bottom: 0; }
  /* For homeowners: one section break after the questions, not two */
  #page-owners .section-ruled:has(.step--faq) > .wrap { padding-bottom: 0; }
  /* For architects & contractors */
  #page-trade .project-figure--drawing .project-figure__frame { padding: 8px; }
  #page-trade .cta-section__body { text-wrap: pretty; }
  /* project pages */
  #page-project-kacin .project-gallery__full + p { margin-bottom: 32px !important; }
  .project-hero img[src*="historic-stone-home-hero"] { object-position: 8% 85% !important; }
}
@media (max-width: 1023px) { .partners .partner-row:last-child { padding-bottom: 0; } }
@media (max-width: 639px) {
  body[data-rails-aside] .side-label { transition: opacity 0.3s ease, visibility 0s linear 0s; }
  body[data-rails-aside].rails-off .side-label { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
}
@media (min-width: 360px) and (max-width: 639px) { #page-project-historic-stone-home .fact-nums > div:nth-child(odd) { min-width: 110px; } }
/* Project pages on phones (Kayle, 2026-10-14): one gallery photo moves up into the story so it isn't 3 to 5 screens of text;
   its gallery slot is hidden at the same widths, so it never shows twice. Wider screens keep the page as it was. */
.prose-photo { display: none; }
@media (max-width: 639px) {
  .project-body__prose .prose-photo { display: flex; margin: 36px calc(-1 * var(--wrap-pad)); width: calc(100% + 2 * var(--wrap-pad)); max-width: none; }
  .project-gallery .is-in-prose { display: none; }
  .project-body__prose .prose-photo--tall { aspect-ratio: 4 / 5; }
}
/* Our story: team bios in ink, like the partner bios below them (Kayle, 2026-10-14) */
.team-card__role { color: var(--ink); }
/* Process: the line under "From first call to raising day" (Kayle, 2026-10-14) */
.process-intro__text { font-family: var(--f-body); font-size: 17px; line-height: 1.62; margin-top: 20px; max-width: 36em; color: var(--ink); }
/* A project page whose intro is the whole story (stone home, 2026-10-16): the facts stand alone, one column */
.project-body:not(:has(.project-body__prose)) { grid-template-columns: minmax(0, 520px); }
/* Pre-launch pass (2026-10-21) */
/* Closed FAQ answers: hidden from Tab and screen readers too, not only squeezed to zero height; same open and close look */
.step--faq .step__right { visibility: hidden; transition: max-height .5s cubic-bezier(.4,0,.2,1), padding .35s ease, visibility 0s linear .5s; }
.step--faq.is-open .step__right { visibility: visible; transition-delay: 0s; }
/* Keyboard focus ring readable on the dark home photo */
.hero a:focus-visible, .menu-btn.over-hero:focus-visible { outline-color: #fff; }
/* Text links: a full 44px of tap area on phones (the line box is 14px) */
.hero__cta::before, .text-link::before { top: -15px; bottom: -15px; }
/* Our story on tablets: three across, like desktop, so the portraits make one row and the people without one yet sit together below */
@media (min-width: 768px) and (max-width: 1023px) { .team__grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } }
/* Home photo logo (Kayle 2026-10-22): the stacked logo on phones, the side-by-side logo from 640px up.
   Sized by width; the height follows. */
.hero__logo { display: block; }
.hero__lockup { display: block; height: auto; width: clamp(96px, 27vw, 120px); }
@media (min-width: 640px) { .hero__lockup { width: clamp(200px, 20vw, 255px); } }