/* Inner pages. Same tokens, header, label-over-rule sections and type as the home page.
   Opening (label, serif line, lede) / ink rule / quiet rail + reading column / tint band / dark footer. */
:root {
  --page: #ffffff; --ink: #1f1f1d; --soft: #5c5b56; --line: #e4e2dd; --rule: #d6d3cd;
  --stone: #f1efec; --sage: #8e8f73; --field: #85847e;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura PT", Futura, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 3.6vw, 56px); --max: 1440px; color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
b, strong { font-weight: 500; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.caps { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.label .caps:first-child { color: var(--ink); font-weight: 500; }

/* ---------- Header (as home; links padded to a 44px target) ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.mark { display: block; width: 56px; aspect-ratio: 600 / 370; background: var(--sage); -webkit-mask: url(/img/logo-mark.png) center / contain no-repeat; mask: url(/img/logo-mark.png) center / contain no-repeat; flex: none; }
.brand .name { font-size: 12px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.nav a { position: relative; display: flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav a:hover::after { border-bottom-color: var(--ink); }
.nav .n-cta { margin-left: clamp(0px, 0.6vw, 8px); padding: 0 18px; background: var(--ink); color: #fff; }
.nav .n-cta::after { display: none; }
.nav .n-cta:hover { background: #333; }
.nav .n-cta .cta-s { display: none; }
@media (max-width: 760px) { .nav .n-cta { padding: 0 12px; } .nav .n-cta .cta-l { display: none; } .nav .n-cta .cta-s { display: inline; } }
@media (max-width: 400px) { .nav .n-q { display: none; } }
@media (max-width: 440px) { .nav { gap: 9px; } .nav a { font-size: 10.5px; letter-spacing: 0.06em; } .nav .n-cta { padding: 0 9px; } .top .wrap { gap: 10px; } }
@media (max-width: 760px) { .brand .name { display: none; } }
@media (max-width: 440px) { .nav { gap: 12px; } .nav a { letter-spacing: 0.12em; font-size: 11px; } }
.n-proj { gap: 0 .45em; }
@media (max-width: 600px) { .nav .n-work { display: none; } .nav .n-proj { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.3; } }

/* ---------- Opening ---------- */
.intro { display: grid; gap: clamp(24px, 4vw, 56px); padding-block: clamp(18px, 3vw, 40px) clamp(28px, 3.4vw, 48px); }
.crumb a { display: inline-block; padding-block: 14px; margin-block: -14px; border-bottom: 0; }
.crumb a:hover { color: var(--ink); }
.intro h1 { font-size: clamp(33px, 3.7vw, 53px); line-height: 1.06; margin-top: 16px; max-width: 17em; }
.lede { font-size: clamp(18px, 1.5vw, 20px); font-weight: 300; line-height: 1.5; margin-top: 18px; max-width: 34em; }
.intro-fig { display: none; margin: 0; }
.intro-list { border-top: 1px solid var(--line); padding-top: 12px; }
.intro-list ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 2px 16px; font-size: 15px; font-weight: 400; }
@media (min-width: 1000px) {
  .intro.has-aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .intro-fig { display: block; align-self: stretch; position: relative; overflow: hidden; min-height: 260px; max-height: 340px; background: #fff; border: 1px solid var(--line); }
  .intro-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .fig-plan img { transform: scale(1.5); transform-origin: 46% 52%; }
  .fig-plan.at-left img { transform-origin: 22% 50%; }
  .fig-elev img { object-position: 52% 50%; transform: scale(1.12); transform-origin: 55% 62%; }
  .fig-elev.at-left img { object-position: 0% 50%; transform-origin: 0% 70%; }
  .fig-elevc img { object-fit: contain; padding: 28px 32px; box-sizing: border-box; }
  .fig-axon img { transform: scale(1.1); transform-origin: 50% 46%; }
  .intro-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .intro-list li { padding-block: 7px; border-bottom: 1px solid var(--line); }
  .intro-list { border-top-color: var(--line); }
}
.intro-fig.photo { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--stone); border: 0; }
.intro-fig.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-fig.ph-portrait { width: 168px; aspect-ratio: 5 / 6; }
.ph-portrait img { object-position: 50% 30%; }
@media (min-width: 1000px) {
  .intro-fig.photo { aspect-ratio: auto; min-height: 300px; max-height: 400px; }
  .intro-fig.ph-portrait { width: 280px; aspect-ratio: 5 / 6; min-height: 0; max-height: none; align-self: end; justify-self: end; }
}

/* ---------- Sheet: rail + reading column under one ink rule ---------- */
.sheet { border-top: 1px solid var(--ink); padding-bottom: clamp(44px, 5.5vw, 76px); }
.col { max-width: 43em; padding-top: 22px; font-size: 17px; }
.rail-label { display: none; }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; border-bottom: 1px solid var(--line); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .caps { color: var(--ink); font-weight: 500; }
.toc summary::after { content: "+"; font-size: 20px; font-weight: 300; line-height: 1; color: var(--soft); }
.toc[open] summary::after { content: "\2212"; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: 15px; line-height: 1.4; color: var(--soft); }
.toc a:hover { color: var(--ink); }
@media (min-width: 1000px) {
  .sheet { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
  .rail { position: sticky; top: 88px; padding-top: 12px; max-height: calc(100vh - 100px); overflow: auto; }
  .rail-label { display: block; }
  .rail-label .caps { color: var(--ink); font-weight: 500; }
  .toc summary { min-height: 0; border: 0; pointer-events: none; margin-bottom: 10px; }
  .toc summary::after, .toc[open] summary::after { content: none; }
  .toc li { border: 0; }
  .toc a { min-height: 0; padding-block: 5px; font-size: 15px; }
  .col { padding-top: 26px; }
}

/* ---------- Prose ---------- */
.prose h2 { font-size: 19px; font-weight: 500; line-height: 1.3; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose > h2:first-child, .prose > .q:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p, .prose ul, .prose ol { margin: 10px 0 0; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li { margin-top: 6px; padding-left: 2px; }
.prose li::marker { color: var(--sage); font-weight: 400; }
.prose ol li::marker { color: var(--soft); font-size: 14px; }
.prose a, .byline a, .form-note a, .form-err a { text-decoration: underline; text-decoration-color: #9b9a94; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover, .byline a:hover { text-decoration-color: var(--ink); }
.byline { color: var(--soft); font-size: 15px; line-height: 1.6; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }

/* lists of lines: facts, link lists */
.prose ul.facts, .prose ul.links { list-style: none; padding: 0; margin-top: 14px; }
.facts li, .links li { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.facts li { padding-block: 10px; font-size: 16px; line-height: 1.55; }
.links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 46px; padding-block: 8px; text-decoration: none; font-weight: 400; line-height: 1.4; }
.links a::after { content: "\2192"; color: var(--soft); transition: transform .3s; }
.links a:hover::after { transform: translateX(4px); color: var(--ink); }

/* questions page */
.qs .q p { color: var(--soft); }
.qs .q p a { color: var(--ink); white-space: nowrap; }

/* ---------- Short answers ---------- */
.faq { margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--ink); }
.faq h2 { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.7; padding-block: 12px 10px; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; padding-block: 12px; cursor: pointer; list-style: none; font-weight: 400; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font-size: 20px; font-weight: 300; line-height: 1; color: var(--soft); }
.qa[open] summary::after { content: "\2212"; }
.qa summary:hover::after { color: var(--ink); }
.qa p { margin: -2px 0 0; padding: 0 36px 16px 0; color: var(--soft); font-size: 16px; }

/* ---------- Start a project band ---------- */
.cta { background: var(--stone); padding-block: clamp(36px, 4.5vw, 60px); }
.cta .label { margin-bottom: 18px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.cta .big { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; }
.cta-acts { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; background: var(--ink); color: #fff; padding: 12px 26px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border: 0; border-radius: 0; cursor: pointer; transition: background .3s; }
.btn:hover { background: #000; }
.btn[disabled] { opacity: .6; cursor: default; }
.tel { display: inline-flex; align-items: center; min-height: 48px; font-size: 17px; font-weight: 400; border-bottom: 0; }
.tel:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Footer ---------- */
.contact { background: var(--ink); color: #f2f1ee; padding-block: clamp(36px, 4.5vw, 56px) 24px; }
.contact .caps { color: #a9a8a2; display: block; margin-bottom: 8px; }
.contact a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.contact ul { list-style: none; margin: 0; padding: 0; }
.contact li a, .contact p a { display: flex; align-items: center; min-height: 44px; padding-block: 5px; }
.contact a:focus-visible { outline-color: #f2f1ee; }
.contact li, .contact p { font-size: 15px; line-height: 1.35; color: #dddbd6; }
.f-id p:not(:has(a)) { padding-block: 5px; }
.f-id p a { color: #f2f1ee; }
.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.f-grid > :first-child, .f-grid > :last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .f-grid { grid-template-columns: minmax(0, 3.2fr) minmax(0, 2.6fr) minmax(0, 2.6fr) minmax(0, 3.6fr); gap: 32px; }
  .f-grid > :first-child, .f-grid > :last-child { grid-column: auto; }
  .contact li a, .contact p a { display: inline-block; min-height: 0; padding-block: 4px; }
  .contact li, .contact p { line-height: 1.45; }
  .f-id p:not(:has(a)) { padding-block: 4px; }
}
.c-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: clamp(28px, 4vw, 48px); padding-top: 16px; border-top: 1px solid #3a3a37; }
.c-base .caps { margin: 0; }
.contact .mark { background: #f2f1ee; }

/* ---------- Inquiry form ---------- */
.form { display: grid; gap: 22px; max-width: 40em; }
.form label { display: grid; gap: 6px; font-size: 15px; font-weight: 400; line-height: 1.4; }
.form .hint { color: var(--soft); font-weight: 400; font-size: 15px; }
.form input:not([type=radio]), .form select, .form textarea { font: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; min-height: 48px; padding: 11px 12px; border: 1px solid var(--field); background: #fff; color: var(--ink); border-radius: 0; width: 100%; -webkit-appearance: none; appearance: none; }
.form select { padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f1f1d' stroke-width='1.2'/%3E%3C/svg%3E") right 13px center no-repeat; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink); }
.form ::placeholder { color: var(--soft); opacity: 1; }
.form textarea { min-height: 104px; resize: vertical; }
.form .row { display: grid; gap: 22px; }
@media (min-width: 600px) { .form .row { grid-template-columns: 1fr 1fr; align-items: end; } }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; font-size: 15px; font-weight: 400; margin-bottom: 6px; }
.form .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.form .opts label { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 16px 0 12px; border: 1px solid var(--field); font-weight: 400; font-size: 16px; cursor: pointer; }
.form .opts label:has(:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.form .opts label:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.form .opts input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.form .more { border-block: 1px solid var(--line); }
.form .more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 400; }
.form .more summary::-webkit-details-marker { display: none; }
.form .more summary::after { content: "+"; font-size: 20px; font-weight: 300; line-height: 1; color: var(--soft); }
.form .more[open] summary::after { content: "\2212"; }
.form .more-in { display: grid; gap: 22px; padding-block: 8px 24px; }
.form .send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form .send .btn { min-width: 160px; }
@media (max-width: 480px) { .form .send .btn { width: 100%; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { color: var(--soft); font-size: 15px; line-height: 1.5; }
.form-err { color: #8a1f11; font-size: 15px; font-weight: 400; display: none; }

/* ---------- Client words on a service page (as the home page quotes) ---------- */
.quote { margin: clamp(36px, 4.5vw, 52px) 0 0; padding-top: 22px; border-top: 1px solid var(--ink); display: grid; gap: 12px; }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.55vw, 23px); line-height: 1.38; }

/* ---------- Current projects: one large picture, one or two small, a short text and a service link ---------- */
.projects { padding-bottom: clamp(20px, 3vw, 40px); }
.proj { display: grid; gap: 18px; border-top: 1px solid var(--ink); padding-block: 14px clamp(36px, 4.5vw, 64px); scroll-margin-top: 80px; }
.p-pics { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.p-pics figure { margin: 0; overflow: hidden; background: var(--stone); aspect-ratio: 3 / 2; }
.p-pics img { width: 100%; height: 100%; object-fit: cover; }
.p-lg { grid-column: 1 / -1; }
.n1 .p-sm { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.n3 .p-sm:last-child, .n5 .p-sm:last-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.p-pics img[src*="elev-"][src*="color"] { object-fit: contain; background: #fff; }
.p-pics img[src*="loft-counter"] { object-position: 50% 45%; }
.p-pics img[src*="loft-library"] { object-position: 50% 42%; }
.p-pics img[src*="sunrose-sunroom"] { object-position: 50% 62%; }
.p-text h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; }
.p-text p { margin-top: 10px; color: var(--soft); font-size: 17px; line-height: 1.6; max-width: 31em; }
.p-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; margin-top: 18px; padding-block: 10px; border-block: 1px solid var(--line); font-size: 15px; line-height: 1.4; max-width: 31em; }
.p-link::after { content: "\2192"; color: var(--soft); transition: transform .3s, color .3s; }
.p-link:hover::after { transform: translateX(4px); color: var(--ink); }
.projects .label { border-top: 0; padding-top: 0; margin: clamp(12px, 2vw, 28px) 0 12px; }
.projects .label h2 { font-size: 11px; line-height: 1.7; color: var(--ink); font-weight: 500; }
@media (min-width: 1000px) {
  .proj { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding-top: 18px; }
  .p-pics { order: 0; }
  .p-text { position: sticky; top: 88px; }
}

/* before and after pair on the permit drawings page */
.ba{margin:28px 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba div{position:relative}
.ba img{display:block;width:100%;height:auto}
.ba .caps{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.88);color:#1f1f1d;padding:3px 8px;font-size:11px;letter-spacing:.12em}
.ba figcaption{grid-column:1/-1;font-size:14px;color:#1f1f1d;margin-top:4px}
@media (max-width:600px){.ba{grid-template-columns:1fr}}