/* Native HTML controls and the approved brand direction. */
:root {
  --background: #f6f2e9;
  --foreground: #302d28;
  --bronze: #92633a;
  --border: #dcd3c4;
}
html { scroll-padding-top: 184px; }
/* User-authored headings and links must remain within narrow columns. */
body { overflow-wrap: anywhere; }
.service-grid > *, .form-grid > *, .footer-top > * { min-width: 0; }
.dialog-open { overflow: hidden; }
.header {
  height: 168px;
  background: #171716;
  color: #f2e8d8;
  border-bottom: 1px solid #796047;
}
.brand { display: block; line-height: 0; }
.brand-image { width: 312px; height: 156px; object-fit: contain; }
.header-cta { border-color: #826e54; }
.header-cta svg, .nav a:hover { color: #d6ac77; }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -.035em; }
.hero h1 { font-size: clamp(48px, 5.35vw, 80px); letter-spacing: -.035em; }
.hero-shade {
  background: linear-gradient(90deg, #171513e0, #17151395 45%, #17151312 85%), linear-gradient(0deg, #17151355, transparent 50%);
}
.hero-topline { color: #e4d4bd; }
.bronze { color: #d7ad79; }
.hero p { color: #e0d9ce; }
.services, .materials, .idea-strip, .closing, .article-cta { background: #eae3d7; }
.production, .calculate { background: #252320; }
.production-copy h2>span, .calculate-intro h2>span { color: #cbb28e; }
.production-copy>p, .calculate-intro>p, .production-points { color: #c7beb1; }
.production-copy .eyebrow, .calculate-intro .eyebrow { color: #d8c8b1; }
.calc-note { color: #c0b19b; border-color: #716554; }
.calc-form { background: #f6f2e9; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid label { min-width: 0; }
.button:hover { background: #79512f; border-color: #79512f; }
.service-card:hover, .article-card:hover { background: #e1d7c7; }
.service-card, .service-card:last-child, .service-bottom, .article-grid, .article-card { border-color: #d1c7b6; }
.card-top, .section-note, .about-copy p, .service-card>p, .advantages-grid p,
.timeline p, .faq-list details p, .material-card p { color: #72695c; }
.filters button.active { background: #302b25; }
.image-caption { right: 24px; line-height: 1.6; background: #211f1bcf; }
.floating-cta { background: var(--bronze); }
footer { background: #171716; color: #d9cbb8; }
.footer-top { grid-template-columns: minmax(420px, 1.4fr) .6fr 1.1fr 1fr; }
.footer-top .brand-image { width: 420px; height: auto; aspect-ratio: 2 / 1; max-width: 100%; }
.footer-top p, .footer-label, .footer-bottom { color: #b8a68d; }
.production-address { color: #d0c2ae; }
.footer-bottom { border-color: #4a4033; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 14px; background: white; color: #222; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.calc-form .consent input[type=checkbox] { display: block; width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; accent-color: var(--bronze); }
.calc-form .consent label { margin: 0 0 18px; }
.upload-zone:focus-within { outline: 2px solid var(--bronze); outline-offset: 3px; }
.file-list button { text-decoration: underline; padding: 4px; color: #79512f; }
dialog { margin: auto; border: 1px solid #bbaa92; box-shadow: 0 24px 100px #0005; color: var(--foreground); }
dialog::backdrop { background: #171513b8; backdrop-filter: blur(4px); }
.detail-dialog, .article-dialog { background: #f6f2e9 !important; }
.dialog-close { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; background: #f6f2e9; border: 1px solid #d4c6b4; }
dialog h2 { margin: 12px 0 18px; font-size: 32px; }
dialog p { margin: 14px 0; }
dialog .dialog-meta { color: #92633a; font-size: 13px; }
dialog .button { margin-top: 16px; }
.managed-gallery { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; }
.managed-gallery .dialog-photo { min-width: 100%; width: 100%; flex: 0 0 100%; object-fit: contain; background: #eae3d7; scroll-snap-align: start; }
.managed-description { white-space: pre-line; }
.gallery-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 8px 0 20px; font-size: 13px; color: var(--bronze); }
.gallery-controls button { padding: 8px 0; }
.portfolio-empty { grid-column: 1 / -1; padding: 40px 0; }
@media (max-width: 1100px) {
  .brand-image { width: 277.5px; height: 139.5px; }
  .header { gap: 18px; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: block; border: 0; background: none; padding: 5px; margin-left: auto; }
  .header-cta + .menu-toggle { margin-left: 0; }
  .nav { display: none; position: absolute; top: 168px; left: 0; right: 0; background: #211f1b; padding: 24px 5%; font-size: 16px; border-bottom: 1px solid #796047; }
  .nav.open { display: flex; flex-direction: column; gap: 8px; max-height: calc(100dvh - 168px); overflow-y: auto; overscroll-behavior: contain; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top>.button { justify-self: start; }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 154px; }
  .header { height: 138px; }
  .brand-image { width: 252px; height: 126px; }
  .nav { top: 138px; background: #211f1b; border-color: #796047; }
  .nav.open { max-height: calc(100dvh - 138px); }
  .hero h1 { font-size: 59px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card, .service-card:nth-child(2) { border-right: 1px solid #d1c7b6; }
  html { scroll-padding-top: 139px; }
  .header { height: 123px; gap: 10px; }
  .brand-image { width: 222px; height: 111px; }
  .header .header-cta { display: none; }
  .header .menu-toggle { margin-left: auto; }
  .nav { top: 123px; }
  .nav.open { max-height: calc(100dvh - 123px); }
  .hero h1 { font-size: 45px; }
  .hero-bottom>span:last-child { font-size: 9px; max-width: 90px; text-align: right; }
  .hero-bottom>a { flex-shrink: 0; }
  .footer-top>div:first-child { grid-column: span 2; }
  .footer-top .brand-image { width: 420px; }
  .image-caption { left: 16px; right: 16px; bottom: 16px; font-size: 10px; }
  .calc-form input:not([type=file]), .calc-form textarea, .calc-form .field { font-size: 16px; }
}