:root { color-scheme: dark; --page: #232625; --deep: #171a18; --text: #f2ebdd; --muted: #b6b7ae; --gold: #d7b56f; --line: #454942; --font: 'DM Sans',Arial,sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0px; background: var(--page); color: var(--text); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
figure, p, h1, h2, h3 { margin: 0px; }
button { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
a:hover { color: var(--gold); }
[hidden] { display: none !important; }
.skip { position: fixed; top: -80px; left: 20px; background: var(--gold); color: var(--deep); padding: 12px; z-index: 20; }
.skip:focus { top: 10px; }
.container { width: min(1360px, 100% - 96px); margin-inline: auto; }
.eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; line-height: 1.5; color: var(--muted); }
.gold { color: var(--gold); }
.site-header { border-bottom: 1px solid var(--line); background: var(--page); }
.header-inner { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; gap: 14px; align-items: center; flex-shrink: 0; font-size: 15px; line-height: 1.3; letter-spacing: 0.08em; }
.brand small { display: block; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.brand-mark { width: 24px; height: 45px; fill: none; stroke: var(--gold); stroke-width: 8; }
.desktop-nav { display: flex; align-items: center; gap: 35px; font-size: 13px; }
.pill { border: 1px solid rgb(133, 134, 118); border-radius: 30px; padding: 10px 19px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; font-size: 13px; }
.pill:hover { border-color: var(--gold); }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 30px; padding: 9px 18px; }
.menu-dialog { margin: 0px 0px 0px auto; width: min(520px, 100%); height: 100dvh; max-height: 100dvh; max-width: 100%; border: 0px; background: var(--deep); color: var(--text); padding: 28px; }
.menu-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.menu-close { border: 1px solid var(--line); background: none; padding: 10px 18px; border-radius: 30px; }
.menu-dialog nav { display: grid; }
.menu-dialog nav a { font-size: clamp(20px, 5vw, 32px); padding: 16px 0px; border-bottom: 1px solid var(--line); }
body.menu-open { overflow: hidden; }
.hero { padding: 64px 0px 0px; }
.hero-heading { display: grid; grid-template-columns: 1.35fr 0.65fr; align-items: end; gap: 72px; margin: 22px 0px 50px; }
h1 { font-weight: 400; font-size: clamp(58px, 6.4vw, 96px); line-height: 1.04; letter-spacing: -0.045em; }
h2 { font-size: clamp(35px, 4vw, 60px); font-weight: 400; line-height: 1.1; letter-spacing: -0.035em; }
h3 { font-size: 22px; font-weight: 400; line-height: 1.3; }
.hero-intro { color: var(--muted); max-width: 410px; font-size: 17px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; padding: 14px 21px; background: var(--gold); color: rgb(29, 33, 30); border: 1px solid var(--gold); font-size: 14px; font-weight: 500; }
.button:hover { background: rgb(228, 201, 141); color: rgb(21, 25, 21); }
.hero-intro .button { margin-top: 22px; }
.hero-photo { border-top: 1px solid var(--line); padding-top: 20px; }
.hero-photo img, .natural-photo img { width: 100%; height: auto; object-fit: contain; aspect-ratio: auto; }
.hero-photo figcaption, .natural-photo figcaption { font-size: 11px; color: var(--muted); margin-top: 10px; letter-spacing: 0.03em; }
.scope-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0px; margin-top: 26px; font-size: 13px; }
.scope-index span { color: var(--muted); margin-right: 8px; }
.section { padding-block: 100px; }
.section-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 110px; }
.section-copy h2 { margin: 20px 0px 25px; }
.section-copy > p:not(.eyebrow) { max-width: 460px; color: var(--muted); }
.scope-list article { display: grid; grid-template-columns: 34px 1fr; gap: 20px; border-top: 1px solid var(--line); padding: 24px 0px; }
.scope-list article:last-child { border-bottom: 1px solid var(--line); }
.scope-list article > span { font-size: 12px; color: var(--gold); }
.scope-list p { color: var(--muted); font-size: 15px; margin-top: 9px; }
.approach { background: var(--deep); padding: 75px 0px; }
.approach .section-split { align-items: center; }
.approach h2 { margin-top: 16px; }
.approach-copy p { color: var(--muted); max-width: 510px; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 7px; border-bottom: 1px solid rgb(124, 128, 111); font-size: 14px; margin-top: 24px; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 38px; }
.process article { border-top: 1px solid var(--line); padding-top: 20px; }
.process h3 { margin: 12px 0px; }
.process p { color: var(--muted); font-size: 14px; }
.project-section { border-top: 1px solid var(--line); }
.project-section .section-split { align-items: start; }
.project-section .section-copy > p + p { margin-top: 18px; }
.project-section .natural-photo { max-width: 100%; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.detail-rows { margin-top: 36px; }
.detail-rows > div { border-top: 1px solid var(--line); padding: 18px 0px; display: grid; grid-template-columns: 110px 1fr; gap: 24px; }
.detail-rows dt { font-size: 15px; }
.detail-rows dd { margin: 0px; color: var(--muted); font-size: 14px; }
.technical-section { padding-block: 0px 80px; }
.technical-section details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.technical-section summary, .questions summary { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 24px 0px; font-size: 18px; }
.technical-section summary::after, .questions summary::after { content: "+"; color: var(--gold); font-size: 26px; font-weight: 400; }
details[open] > summary::after { content: "−"; }
.technical-content { padding: 12px 0px 28px; }
.technical-content > p { color: var(--muted); font-size: 14px; max-width: 780px; margin-bottom: 24px; }
.comparison { position: relative; isolation: isolate; background: var(--deep); max-width: 850px; margin-inline: auto; touch-action: pan-y; }
.comparison > img { width: 100%; height: auto; object-fit: contain; }
.comparison .comparison-overlay { position: absolute; inset: 0px; height: 100%; clip-path: inset(0 0 0 var(--reveal,50%)); }
.comparison-line { position: absolute; top: 0px; bottom: 0px; left: var(--reveal,50%); width: 2px; background: var(--gold); pointer-events: none; }
.comparison-labels { display: flex; justify-content: space-between; padding: 10px 14px; position: absolute; top: 0px; left: 0px; right: 0px; font-size: 11px; }
.comparison-labels span { background: rgba(23, 26, 24, 0.855); padding: 4px 8px; color: var(--text); }
.comparison-control { max-width: 850px; margin: 20px auto 0px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--muted); font-size: 13px; }
.comparison-control input { flex: 1 1 0%; min-width: 160px; accent-color: var(--gold); min-height: 30px; }
.questions { padding-top: 0px; }
.questions > div { border-top: 1px solid var(--line); margin-top: 28px; }
.questions details { border-bottom: 1px solid var(--line); }
.questions details p { max-width: 820px; color: var(--muted); padding-bottom: 24px; }
.brief { background: var(--deep); padding-block: 95px; scroll-margin-top: 20px; }
.brief .section-split { gap: 100px; }
.brief h2 { margin: 20px 0px 24px; }
.brief-copy > p:not(.eyebrow) { color: var(--muted); max-width: 470px; }
.service-tag { display: inline-block; border: 1px solid var(--line); border-radius: 30px; padding: 7px 17px; font-size: 12px; margin-top: 24px; }
.next-steps { margin-top: 65px; }
.next-steps ol { list-style: none; padding: 0px; counter-reset: steps 0; }
.next-steps li { counter-increment: steps 1; border-top: 1px solid var(--line); padding: 18px 0px; display: flex; gap: 22px; font-size: 14px; }
.next-steps li::before { content: "0" counter(steps); color: var(--gold); font-size: 12px; }
.brief-form { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 20px; }
.brief-form label { display: grid; gap: 9px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.brief-form input, .brief-form textarea, .brief-form select { width: 100%; min-width: 0px; padding: 12px; border: 1px solid rgb(85, 91, 80); background: rgb(35, 39, 36); color: var(--text); border-radius: 0px; font-size: 16px; letter-spacing: normal; text-transform: none; }
.brief-form textarea { resize: vertical; min-height: 135px; }
.brief-form input::placeholder, .brief-form textarea::placeholder { color: rgb(166, 169, 158); }
.brief-form .full { grid-column: 1 / -1; }
.brief-form input:disabled, .brief-form textarea:disabled, .brief-form select:disabled { opacity: 0.7; }
.brief-form input[type="file"] { font-size: 13px; letter-spacing: 0px; text-transform: none; padding: 15px 10px; }
.brief-form input[type="file"]::file-selector-button { padding: 8px 14px; margin-right: 10px; background: var(--page); color: var(--text); border: 1px solid var(--line); cursor: pointer; }
.form-help { font-size: 12px; color: var(--muted); line-height: 1.6; letter-spacing: normal; text-transform: none; }
.file-list { padding: 0px; margin: 0px; list-style: none; display: grid; gap: 10px; }
.file-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0px; border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.file-list li span { min-width: 0px; }
.file-list button { padding: 7px 10px; background: none; border: 1px solid var(--line); font-size: 12px; flex-shrink: 0; }
.file-state { font-size: 12px; color: var(--muted); }
.progress-wrap { display: grid; gap: 8px; }
.progress-wrap progress { width: 100%; accent-color: var(--gold); height: 8px; }
.form-status { font-size: 15px; overflow-wrap: anywhere; line-height: 1.7; }
.form-status.error { color: rgb(240, 187, 159); }
.form-status.success { color: rgb(219, 210, 180); }
.brief-form .button { justify-content: space-between; min-height: 52px; }
.button:disabled { cursor: default; opacity: 0.65; }
.submit-note { font-size: 12px; color: var(--muted); }
.next-service { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 65px; border-bottom: 1px solid var(--line); }
.next-service strong { font-size: clamp(30px, 4vw, 52px); font-weight: 400; letter-spacing: -0.03em; }
.next-service .eyebrow { display: block; margin-bottom: 14px; }
.next-service > b { font-size: 40px; font-weight: 400; }
.site-footer { padding: 45px 0px; }
.footer-inner { display: flex; justify-content: space-between; gap: 35px; flex-wrap: wrap; align-items: center; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13px; }
.footer-note { width: 100%; font-size: 11px; color: var(--muted); }
.image-open { display: block; width: 100%; padding: 0px; border: 0px; background: transparent; cursor: zoom-in; }
.image-open img { width: 100%; height: auto; object-fit: contain; }
.image-open:focus-visible { outline-offset: 6px; }
.photo-dialog { width: min(1440px, 96vw); max-width: 96vw; height: 94dvh; max-height: 94dvh; background: var(--deep); border: 1px solid var(--line); padding: 20px; color: var(--text); overflow: hidden; }
.photo-dialog::backdrop { background: rgba(0, 0, 0, 0.867); }
.photo-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.photo-dialog-top p { font-size: 13px; }
.photo-dialog img { width: 100%; height: calc(100% - 65px); object-fit: contain; }
.photo-dialog button { background: none; color: var(--text); border: 1px solid var(--line); padding: 8px 15px; }
.photo-hint { font-size: 11px; color: var(--muted); margin-top: 8px; }
.honeypot { display: none !important; }
@media (max-width: 1000px) {
  .container { width: calc(100% - 56px); }
  .hero-heading { gap: 40px; grid-template-columns: 1.2fr 0.8fr; }
  h1 { font-size: clamp(52px, 7vw, 74px); }
  .section-split { gap: 55px; }
  .brief .section-split { gap: 50px; }
  .desktop-nav { gap: 22px; }
  .scope-index { gap: 15px; font-size: 12px; }
  .section { padding-block: 75px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 24px; }
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 86px; gap: 12px; }
  .brand { font-size: 13px; gap: 11px; }
  .brand small { font-size: 7px; }
  .brand-mark { width: 19px; height: 36px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; font-size: 12px; }
  .hero { padding-top: 38px; }
  .hero-heading { display: block; margin: 20px 0px 32px; }
  h1 { font-size: clamp(40px, 10.7vw, 68px); letter-spacing: -0.04em; }
  .hero-intro { font-size: 15px; margin-top: 22px; max-width: 500px; }
  .hero-intro .button { margin-top: 22px; width: 100%; }
  .hero-photo { padding-top: 16px; }
  .hero-photo figcaption { font-size: 10px; }
  .scope-index { grid-template-columns: 1fr 1fr; gap: 20px; font-size: 12px; padding: 22px 0px; }
  .section { padding-block: 60px; }
  .section-split { grid-template-columns: 1fr; gap: 35px; }
  h2 { font-size: 39px; }
  .scope-list article { padding: 22px 0px; gap: 10px; }
  .scope-list h3 { font-size: 20px; }
  .approach { padding-block: 55px; }
  .process { grid-template-columns: 1fr 1fr; gap: 25px 22px; }
  .process h3 { font-size: 20px; }
  .process p { font-size: 13px; }
  .project-section .section-copy > p:not(.eyebrow) { font-size: 15px; }
  .photo-pair { gap: 12px; }
  .detail-rows > div { grid-template-columns: 90px 1fr; gap: 15px; }
  .technical-section { padding-bottom: 55px; }
  .technical-section summary, .questions summary { font-size: 16px; gap: 16px; }
  .questions { padding-top: 0px; }
  .brief { padding-block: 60px; }
  .brief .section-split { gap: 40px; }
  .next-steps { margin-top: 35px; }
  .brief-form { gap: 22px 14px; }
  .next-service { padding-block: 45px; }
  .site-footer { padding-block: 35px; }
  .footer-inner { gap: 25px; }
  .footer-links { gap: 16px 24px; }
  .footer-note { font-size: 10px; }
  .photo-dialog { padding: 12px; }
  .photo-dialog-top p { font-size: 11px; }
}
@media (max-width: 380px) {
  .brief-form { grid-template-columns: 1fr; }
  .scope-index { font-size: 11px; }
  .container { width: calc(100% - 32px); }
  .hero-heading h1 { font-size: 39px; }
  .process { gap: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.hero-heading h1.service-seo-heading{font-size:clamp(36px,4.6vw,68px);line-height:1.08;overflow-wrap:break-word}
@media(max-width:760px){.hero-heading h1.service-seo-heading{font-size:clamp(32px,8vw,44px)}}