/* Condensed display fallback for devices that do not include Impact. */
@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/Anton-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('assets/fonts/BarlowSemiCondensed-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('assets/fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('assets/fonts/BarlowSemiCondensed-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Warm wood finish, drawn from the business's ceiling photography. */
:root {
  --heading: Impact, 'Anton', sans-serif;
  --sans: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --paper: #f1e5d3;
  --ink: #382317;
  --muted: #75614f;
  --line: #cfb99b;
  --copper: #8d4d25;
  --dark: #2c190f;
  --amber: #e1b678;
  --wood: url('assets/walnut-grain.webp');
}
body {
  background-color: var(--paper);
  background-image: linear-gradient(#f1e5d3f5, #f1e5d3f5), var(--wood);
  background-size: auto, 1200px auto;
}
.site-header {
  height: 184px;
  color: #f8ead5;
  background: linear-gradient(#24140be6,#24140be6), var(--wood) center 42% / cover;
  border-bottom: 1px solid #b67d3e;
}
.brand {gap: 22px}
.brand img {width: 152px; height: 152px; flex-shrink: 0; box-shadow: 0 0 0 1px #cd9559, 0 4px 15px #0006}
.brand span {letter-spacing: 1.8px}
.brand small {color: #d1b493; letter-spacing: 2.2px}
nav>a:hover {color: #e9bc7b}
.button {
  border: 1px solid #bd8850;
  background: #65391e;
  color: #fff2de;
  box-shadow: inset 0 0 0 1px #ffffff0d;
  font-weight: 600;
}
.button:hover {background: #84502c}
.site-header .button, .hero .button {
  background: #e0b276;
  color: #29190e;
  border-color: #e8c18c;
}
.site-header .button:hover, .hero .button:hover {background: #f0c891}
.hero {
  display: block;
  position: relative;
  isolation: isolate;
  min-height: 680px;
  max-width: none;
  background: #352015;
  color: #fff2df;
  overflow: hidden;
}
.hero-image {position: absolute; inset: 0; z-index: -2; margin: 0; height: auto}
.hero-image>img {object-position: center; height: 100%; width: 100%}
.hero-image:after {
  inset: 0;
  background: linear-gradient(90deg, #1d1008b8 0%, #25140b85 30%, #24130924 62%, transparent 85%), linear-gradient(0deg,#1d10088c,transparent 38%);
}
.hero-copy {min-height: 680px; padding: 62px 6% 39px; width: min(720px, 65%)}
.hero .eyebrow {color: #e0bb8b; font-size: 9px; letter-spacing: 2.6px}
.tiny-line {background: #ce9653}
h1 {
  font-family: var(--heading);
  font-size: clamp(67px,6.5vw,103px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 28px 0 24px;
  text-shadow: 0 3px 22px #0004;
}
h1 em {font-style: normal; color: #e0ad69}
.hero-description {color: #e2d2bd; max-width: 360px; font-size: 14px; line-height: 1.85}
.hero-actions {margin-top: 29px; margin-bottom: 33px; gap: 25px}
.hero-actions .text-link {color: #f2dfc4; font-size: 11px}
.hero-location {color: #d9bb94; letter-spacing: 2px}
.image-note {left: auto; right: 5%; bottom: 110px; text-align: right; font-size: 29px; color: #fff2df; text-shadow: 0 2px 10px #0009}
.hero-image figcaption {left: auto; right: 5%; bottom: 43px; gap: 28px; color: #ffe6c4}
.hero-image figcaption a {border-color: #f2d0a1; pointer-events: auto}
.signature-strip {
  background: linear-gradient(#40200f66,#40200f66), var(--wood) center / cover;
  color: #fff0d9;
  border-top: 1px solid #cd9558;
  border-bottom: 1px solid #7f4b2a;
  padding-top: 28px;
  padding-bottom: 28px;
  text-shadow: 0 1px 3px #000b;
}
.strip-star {color: #edbd7a}
.section-heading .eyebrow, .transformation .eyebrow, .faq-section .eyebrow {color: #8c4c29}
.work-section {padding-top: 85px}
.filters button {border-radius: 2px}
.filters button[aria-pressed=true] {background: #6a3d23; border-color: #6a3d23; color: #fff0da}
.project-image {border: 5px solid #50301d; box-shadow: 0 7px 14px #3e240d1a}
.zoom-icon {background: #f4dbb8; color: #422512; border-radius: 2px}
.project-meta {color: #422918}
.craft-section {
  background: linear-gradient(90deg,#241209d9,#32190bbd), var(--wood) center / cover;
  color: #fff0d8;
  border-top: 4px solid #a46c35;
  border-bottom: 4px solid #a46c35;
}
.craft-section h2 {text-shadow: 0 2px 14px #0006}
.craft-section .eyebrow, .service-tag {color: #e5b779}
.craft-intro>p:not(.eyebrow), .service-list p, .service-number {color: #e7d1b6}
.service-list article, .service-list article:last-child {border-color: #ca9a6866}
.service-list h3 {color: #ffe9c6}
.craft-section .text-link:hover {color: #f5c180}
.comparison {border: 6px solid #694023; box-shadow: 0 10px 22px #47281120}
.comparison-divider, .comparison-divider>span {border-color: #f4d5a9}
.comparison-divider>span, .comparison-label {background: #f4d5a9; color: #422512}
.process-steps li {border-top: 2px solid #a37244}
.process-steps span {color: #8d4d25; font-weight: 700}
.estimate-section {
  background: linear-gradient(90deg,#2b160ce0,#3f230ed0), var(--wood) center / cover;
  border-top: 4px solid #a46c35;
  border-bottom: 4px solid #a46c35;
  color: #fff0da;
}
.estimate-copy .eyebrow {color: #e0b37a}
.estimate-copy h2 em {color: #e0ac68}
.estimate-copy>p:not(.eyebrow), .contact-links a>span:first-child {color: #dfc8ac}
.contact-links a {color: #ffedce}
.contact-links a:hover {color: #edb574}
.estimate-form-wrap {
  background: #f5ead8;
  color: #382317;
  border: 1px solid #d4af7a;
  box-shadow: 0 15px 40px #180a0777, 0 0 0 7px #bd885026;
}
input, select, textarea {border-color: #bda07a}
input::placeholder, textarea::placeholder {color: #806c56}
.estimate-form-wrap h3 {color: #59331d}
footer {
  background: linear-gradient(#211209dc,#211209dc), var(--wood) center / cover;
  color: #f5dfbd;
  border-top: 1px solid #96643b;
}
.footer-bottom {border-color: #b78b584d; color: #d0b490}
.footer-top>p {color: #e6b575}
.footer-top>a:last-child:hover {color: #f5bd79}
dialog::backdrop {background: #1d100bee}
.lightbox-photo {background: #28170f}
.lightbox-info {background: #f1e5d3}
.menu-toggle {border-color: #b98b56; color: #fbe4c3}
@media(min-width:1500px) {
  /* Keep the centering gutter outside the text box on wide screens. */
  .hero-copy {
    min-height: 760px;
    margin-left: max(6%,calc((100% - 1410px)/2));
    padding-left: 0;
    padding-right: 0;
    width: 620px;
  }
}
@media(min-width:1051px) and (max-width:1200px) {
  .site-header {padding-inline: 3%; gap: 20px}
  nav {gap: 18px}
  .site-header .button {padding-inline: 16px; gap: 18px}
}
@media(max-width:1050px) {
  .site-header {height: 148px}
  .brand {gap: 16px}
  .brand img {width: 116px; height: 116px}
  .menu-toggle {display: block; background: transparent; border: 1px solid #b98b56; min-height: 44px; padding: 10px 16px}
  nav {position: absolute; top: 148px; left: 0; right: 0; display: none; background: #2d190e; padding: 20px 6% 30px; border-bottom: 1px solid #9d703e; box-shadow: 0 12px 20px #0006; align-items: stretch}
  body.menu-open nav {display: flex; flex-direction: column}
  nav>a {min-height: 44px}
  .footer-top {flex-wrap: wrap}
  .hero-copy {width: 65%; padding-top: 55px}
  .hero-actions {align-items: flex-start; flex-direction: column; gap: 20px}
  .image-note {font-size: 25px; right: 4%}
}
@media(max-width:760px) {
  .site-header {height: 120px; gap: 12px; padding-inline: 5%}
  .brand {gap: 10px}
  .brand img {width: 88px; height: 88px}
  .brand small {letter-spacing: 1.5px}
  nav {top: 120px; background: #2d190e; border-color: #9d703e; box-shadow: 0 12px 20px #0006}
  .menu-toggle {padding-inline: 12px}
  .hero {min-height: 730px}
  .hero-copy {width: 100%; min-height: 730px; padding: 43px 7% 32px; justify-content: flex-start}
  .hero-image {height: auto; margin: 0}
  .hero-image>img {object-position: 62% center}
  .hero-image:after {background: linear-gradient(90deg,#221209e8,#22120988),linear-gradient(0deg,#221209e0,transparent 50%)}
  .hero .eyebrow {font-size: 8px; letter-spacing: 1.9px}
  h1 {font-size: clamp(48px,14.1vw,69px); letter-spacing: 0; line-height: 1.04; margin: 28px 0 25px}
  .hero-description {font-size: 13px; max-width: 340px; color: #f3dfc3}
  .hero-actions {margin: 28px 0 32px; gap: 23px}
  .hero-location {margin-top: auto; font-size: 7px; letter-spacing: 1.5px}
  .hero-image figcaption, .image-note {display: none}
  .signature-strip {padding: 25px 6%; gap: 17px; font-size: 13px; background-size: auto, 850px auto}
  .craft-section, .estimate-section {background-size: auto, 1100px auto}
  .project-image {border-width: 3px}
  .work-section {padding-top: 60px}
  .estimate-form-wrap {box-shadow: 0 10px 30px #180a0766, 0 0 0 4px #bd885026}
}
@media(max-width:370px) {
  h1 {font-size: clamp(40px,13vw,48px)}
  .hero, .hero-copy {min-height: 720px}
  .hero-copy {padding-top: 36px}
  .hero .eyebrow {font-size: 7px; letter-spacing: 1.3px}
  .site-header {height: 104px; gap: 8px}
  nav {top: 104px}
  .brand {gap: 8px}
  .brand img {width: 72px; height: 72px}
  .brand span {font-size: 10px; letter-spacing: 1.2px}
  .brand small {font-size: 5.5px; letter-spacing: 1.1px}
  .signature-strip {gap: 11px; font-size: 11px}
}

/* Two families throughout: Impact display + Barlow Semi Condensed text. */
body {font-size: 17px}
button, input, select, textarea {font-family: var(--sans)}

/* Main heading role: retain the hero's bold, condensed character. */
h2, .estimate-copy h2 {
  font-family: var(--heading);
  font-size: clamp(36px, 3.9vw, 54px);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.12;
  letter-spacing: .45px;
}
h2 em, .estimate-copy h2 em {font-style: normal; font-weight: inherit}
.section-heading>div {min-width: 0}
.section-heading>p {flex: 0 1 320px}
.lightbox-info h2 {font-size: 34px; letter-spacing: .4px}

/* Secondary heading role: the same display face at a quieter scale. */
h3, h4, .project-meta, .image-note, .footer-top>p {
  font-family: var(--heading);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.25;
}
.service-list h3 {font-size: 30px}
.process-steps h3 {font-size: 25px}
.estimate-form-wrap h3 {font-size: 30px}
.project-meta {font-size: 23px; line-height: 1.3}
.image-note {font-size: 30px; line-height: 1.25}
.footer-top>p {font-size: 25px}
summary {font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: .1px}
.draft-result h4 {font-size: 24px}

/* Body role: a readable condensed companion for every paragraph and field. */
.hero-description, .section-heading>p, .craft-intro>p:not(.eyebrow),
.service-list p, .transformation-copy>p:not(.eyebrow), .process-steps p,
.estimate-copy>p:not(.eyebrow), .lightbox-info>p:not(.eyebrow), details p {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  letter-spacing: 0;
}
.form-intro, .draft-result p {font-size: 16px; line-height: 1.6}
label {font-size: 15px; font-weight: 600; letter-spacing: .15px}
input, select, textarea {font-size: 16px; font-weight: 400; letter-spacing: 0}
.transformation-copy .small-note {font-size: 14px!important; font-style: normal}
.location-note {font-size: 15px!important}
.form-note, .comparison-wrap>p {font-size: 14px; line-height: 1.5}
.text-link, .hero-actions .text-link {font-size: 16px; font-weight: 600; letter-spacing: .1px}
.button, nav, .filters button, .copy-button, .menu-toggle {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.contact-links a {font-weight: 600; font-size: 25px; letter-spacing: .2px}
.gallery-footer {font-size: 14px}
.footer-top>a:last-child {font-size: 15px; font-weight: 600}
.footer-bottom {font-size: 12px}
.lightbox-controls span {font-size: 15px}

/* Accent role: tracked capitals in the same companion family. */
.eyebrow, .hero .eyebrow, .service-tag, .process-steps>li>span,
.project-meta small, .hero-location, .hero-image figcaption>span,
.contact-links a>span:first-child, .comparison-label, .gallery-hint {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.project-meta small {font-size: 10px; letter-spacing: 1.2px}
.project-number, .service-number, .footer-bottom {font-family: var(--sans); font-weight: 400; letter-spacing: .3px}
.project-number, .service-number {font-size: 14px}
.signature-strip {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1.7px;
  line-height: 1.5;
  text-transform: uppercase;
  gap: clamp(22px,3.8vw,52px);
}
.signature-strip .strip-star {font-size: 22px; line-height: 1; font-weight: 400}
.brand span {font-family: var(--heading); font-size: 32px; font-weight: 400; letter-spacing: 1.2px}
.brand small {font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 1.7px; color: #efd3ac}

@media(max-width:1050px) {
  .signature-strip {font-size: 13px; letter-spacing: 1.3px; gap: 22px}
  .project-meta {font-size: 21px}
  .image-note {font-size: 27px}
  .brand span {font-size: 28px}
  .brand small {font-size: 11px; letter-spacing: 1.3px}
  nav {font-size: 14px; gap: 20px}
}
@media(max-width:760px) {
  h2, .estimate-copy h2 {font-size: clamp(32px,8.7vw,44px); line-height: 1.14; letter-spacing: .2px}
  .hero .eyebrow, .hero-location {font-size: 11px; letter-spacing: 1.5px}
  .hero-description, .section-heading>p, .craft-intro>p:not(.eyebrow),
  .service-list p, .transformation-copy>p:not(.eyebrow), .process-steps p,
  .estimate-copy>p:not(.eyebrow), .lightbox-info>p:not(.eyebrow), details p {font-size: 16px}
  .service-list h3 {font-size: 28px}
  .process-steps h3 {font-size: 25px}
  .estimate-form-wrap h3 {font-size: 28px}
  .project-meta {font-size: 20px; letter-spacing: .2px}
  .project-meta small {font-size: 9px; letter-spacing: .8px; line-height: 1.7}
  .signature-strip {font-size: 12px; letter-spacing: .7px; gap: 13px}
  .signature-strip .strip-star {font-size: 17px}
  .text-link, .hero-actions .text-link {font-size: 15px}
  .filters button {font-size: 13px; letter-spacing: .4px}
  .brand span {font-size: 20px; letter-spacing: .7px}
  .brand small {font-size: 9px; letter-spacing: .65px}
  .menu-toggle {font-size: 13px}
  summary {font-size: 18px}
  .lightbox-info h2 {font-size: 30px}
  .footer-top>p {font-size: 25px}
  .faq-section h2 br {display: initial}
  .faq-section h2 em {margin-left: 0}
}
@media(max-width:370px) {
  h2, .estimate-copy h2 {font-size: 32px}
  .hero .eyebrow, .hero-location {font-size: 10px; letter-spacing: 1.3px}
  .signature-strip {font-size: 11px; letter-spacing: .5px; gap: 10px}
  .brand span {font-size: 18px; letter-spacing: .4px}
  .brand small {font-size: 8px; letter-spacing: .4px}
  .filters button {padding: 10px; font-size: 12px}
}