:root {
  color-scheme: light;
  --pro-paper: #f6f4ee;
  --pro-white: #fffefa;
  --pro-ink: #222c25;
  --pro-muted: #68716a;
  --pro-green: #284a38;
  --pro-green-deep: #203b2e;
  --pro-orange: #d97956;
  --pro-line: #dfe1d8;
  --pro-sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --pro-display: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --pro-wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 106px; }
body { margin: 0; background: var(--pro-paper); color: var(--pro-ink); font-family: var(--pro-sans); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body:has(.gallery-dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--pro-orange); outline-offset: 3px; }
::selection { background: #e9b6a1; color: var(--pro-ink); }
.section-shell { width: min(var(--pro-wrap), calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 30; top: -100px; left: 14px; padding: 10px 14px; background: var(--pro-green); color: white; }
.skip-link:focus { top: 12px; }
.demo-ribbon { position: relative; z-index: 12; display: flex; min-height: 29px; align-items: center; justify-content: space-between; gap: 12px; padding-inline: max(40px, calc((100% - 1320px) / 2)); background: var(--pro-green); color: #f4f5eb; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }
.demo-ribbon span:last-child { color: #d9e4d8; font-size: 7px; }
.pro-header { position: sticky; z-index: 11; top: 0; height: 77px; border-bottom: 1px solid rgb(34 44 37 / 9%); background: rgb(255 254 250 / 94%); backdrop-filter: blur(15px); }
.header-shell { display: flex; width: min(1320px, calc(100% - 80px)); height: 100%; align-items: center; justify-content: space-between; gap: 25px; margin: auto; }
.pro-brand { display: inline-flex; min-width: 165px; align-items: center; gap: 9px; }
.pro-mark { position: relative; display: grid; width: 36px; height: 36px; place-items: center; background: var(--pro-green); color: white; font-family: var(--pro-display); font-size: 23px; font-weight: 800; line-height: 1; }
.pro-mark > span { position: absolute; top: 4px; right: 5px; color: var(--pro-orange); font-size: 10px; }
.pro-brand strong { display: block; font-family: var(--pro-display); font-size: 13px; font-weight: 800; letter-spacing: 1.2px; line-height: 1.1; }
.pro-brand small { display: block; margin-top: 3px; color: #788078; font-size: 7px; font-weight: 700; letter-spacing: 1.55px; line-height: 1.2; }
.pro-nav { display: flex; align-items: center; gap: 25px; }
.pro-nav a { position: relative; padding-block: 8px; color: #515b53; font-size: 11px; font-weight: 600; }
.pro-nav a::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--pro-orange); content: ''; transform: scaleX(0); transform-origin: right; transition: transform .22s ease; }
.pro-nav a:hover::after, .pro-nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.pro-menu-toggle { display: none; }
.pro-button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 17px; padding: 0 19px; border: 1px solid var(--pro-green); border-radius: 3px; background: var(--pro-green); color: white; cursor: pointer; font-size: 11px; font-weight: 700; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pro-button:hover { transform: translateY(-2px); border-color: var(--pro-green-deep); background: var(--pro-green-deep); box-shadow: 0 8px 20px rgb(40 74 56 / 15%); }
.pro-button > span { font-size: 15px; }
.pro-button-small { min-height: 40px; padding-inline: 14px; font-size: 10px; }
.pro-button-light { border-color: #cbd0c7; background: transparent; color: var(--pro-ink); }
.pro-button-light:hover { border-color: var(--pro-green); background: white; color: var(--pro-green); box-shadow: none; }
.phone-icon { transform: rotate(-35deg); }

.pro-hero { position: relative; display: grid; width: min(1320px, calc(100% - 80px)); min-height: 617px; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 54px; margin: auto; padding: 65px 0 90px; }
.hero-copy { position: relative; z-index: 1; padding-block: 12px; }
.pro-eyebrow { margin: 0 0 18px; color: #727a71; font-size: 8px; font-weight: 750; letter-spacing: 1.3px; line-height: 1.6; }
.pro-eyebrow > span:not(:first-child) { color: #9ba197; }
.pro-eyebrow > span:first-child:empty { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--pro-orange); vertical-align: 1px; }
.hero-copy h1, .pro-section-heading h2, .why-copy h2, .gallery-heading h2, .feedback-inner h2, .area-inner h2, .quote-intro h2 { margin: 0; font-family: var(--pro-display); font-size: clamp(44px, 5.2vw, 66px); font-weight: 650; letter-spacing: -2.4px; line-height: 1.04; }
.hero-copy h1 em, .pro-section-heading h2 em, .why-copy h2 em, .gallery-heading h2 em, .feedback-inner h2 em, .area-inner h2 em, .quote-intro h2 em { color: var(--pro-green); font-style: normal; }
.hero-lede { max-width: 440px; margin: 20px 0 0; color: var(--pro-muted); font-size: 13px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.demo-contact-note { margin: 12px 0 0; color: #858d84; font-size: 8px; }
.hero-photo { position: relative; min-width: 0; height: 421px; }
.hero-photo::after { position: absolute; top: 15px; right: -15px; bottom: -14px; left: 14px; border: 1px solid #d0d8cd; content: ''; pointer-events: none; }
.hero-photo > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-photo-label { position: absolute; z-index: 2; right: 0; bottom: 0; display: flex; align-items: center; gap: 11px; padding: 12px 15px; background: var(--pro-white); color: #546057; font-size: 8px; font-weight: 750; letter-spacing: 1px; }
.hero-photo-label > span { color: var(--pro-orange); }
.hero-seal { position: absolute; z-index: 2; top: -23px; left: -23px; display: grid; width: 78px; height: 78px; place-items: center; border-radius: 50%; background: var(--pro-orange); color: white; transform: rotate(-8deg); }
.hero-seal > span { font-size: 7px; font-weight: 800; letter-spacing: .8px; line-height: 1.55; }
.hero-seal > b { position: absolute; top: 5px; right: 12px; font-size: 10px; }
.hero-meta { position: absolute; right: 0; bottom: 28px; left: 0; display: flex; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--pro-line); color: #879087; font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }

.intro-band { border-block: 1px solid #e3e2d9; background: #eeeee5; }
.intro-band-inner { display: flex; width: min(var(--pro-wrap), calc(100% - 80px)); min-height: 135px; align-items: center; gap: 44px; margin: auto; }
.index-label { flex: 0 0 190px; color: #788177; font-size: 8px; font-weight: 750; letter-spacing: 1px; }
.intro-band-inner > p { margin: 0 auto 0 0; font-family: var(--pro-display); font-size: 22px; font-weight: 500; line-height: 1.4; }
.intro-band-inner > p strong { color: var(--pro-green); font-weight: 700; }
.intro-flower { color: var(--pro-orange); font-size: 31px; }
.pro-section { padding-block: 101px; }
.pro-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 42px; }
.pro-section-heading .pro-eyebrow, .gallery-heading .pro-eyebrow { margin-bottom: 16px; }
.pro-section-heading h2, .why-copy h2, .gallery-heading h2, .feedback-inner h2, .area-inner h2, .quote-intro h2 { font-size: clamp(42px, 4.8vw, 60px); }
.pro-section-heading > p { max-width: 335px; margin: 0 4% 4px 0; color: var(--pro-muted); font-size: 11px; line-height: 1.9; }
.service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pro-line); border-left: 1px solid var(--pro-line); }
.service-card { position: relative; min-height: 292px; padding: 0 23px 20px; border-right: 1px solid var(--pro-line); border-bottom: 1px solid var(--pro-line); background: var(--pro-white); transition: background .2s ease, transform .2s ease; }
.service-card:hover { z-index: 1; background: #fff; transform: translateY(-2px); }
.service-card > img { display: block; width: calc(100% + 46px); height: 118px; margin: 0 -23px 14px; object-fit: cover; }
.card-number { color: #8a948b; font-size: 8px; font-weight: 750; letter-spacing: .8px; }
.line-icon { position: absolute; top: 15px; right: 19px; color: var(--pro-orange); font-family: var(--pro-display); font-size: 27px; }
.service-card h3 { margin: 10px 0 6px; font-family: var(--pro-display); font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.service-card p { max-width: 270px; margin: 0; color: var(--pro-muted); font-size: 10px; line-height: 1.8; }

.why-section { padding-block: 87px; background: #e9e9df; }
.why-inner { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 80px; }
.why-visual { position: relative; height: 480px; }
.why-visual img { width: 100%; height: 100%; object-fit: cover; }
.photo-caption { position: absolute; bottom: 0; left: 0; padding: 10px 13px; background: var(--pro-green); color: white; font-size: 7px; font-weight: 750; letter-spacing: 1px; }
.why-stamp { position: absolute; top: 18px; right: -18px; display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; background: #f6f4ee; color: var(--pro-green); font-size: 7px; font-weight: 800; letter-spacing: .7px; line-height: 1.5; text-align: center; transform: rotate(8deg); }
.why-copy .pro-eyebrow { margin-bottom: 14px; }
.why-lede { max-width: 470px; margin: 18px 0 21px; color: #5e695f; font-size: 11px; line-height: 1.9; }
.benefit-list { border-top: 1px solid #d1d5ca; }
.benefit-list article { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid #d1d5ca; }
.benefit-list article > span { padding-top: 2px; color: var(--pro-orange); font-size: 8px; font-weight: 750; }
.benefit-list h3 { margin: 0; font-family: var(--pro-display); font-size: 13px; font-weight: 750; }
.benefit-list p { margin: 2px 0 0; color: #697369; font-size: 9px; line-height: 1.65; }

.projects-section { padding-block: 104px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px 20px; }
.project-card { min-width: 0; }
.project-image { position: relative; display: block; width: 100%; height: 230px; padding: 0; overflow: hidden; border: 0; background: #e2e4dc; cursor: zoom-in; text-align: left; }
.project-card-tall .project-image { height: 292px; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-image:hover img { transform: scale(1.035); }
.project-image > span { position: absolute; top: 11px; left: 11px; padding: 5px 7px; background: var(--pro-green); color: white; font-size: 6px; font-weight: 750; letter-spacing: .8px; }
.project-image > b { position: absolute; right: 11px; bottom: 11px; display: grid; width: 29px; height: 29px; place-items: center; background: var(--pro-white); color: var(--pro-green); font-size: 15px; }
.project-card > div { padding-top: 10px; }
.project-category { color: #828b81; font-size: 7px; font-weight: 750; letter-spacing: 1px; }
.project-card h3 { margin: 2px 0 0; font-family: var(--pro-display); font-size: 17px; font-weight: 700; }

.gallery-section { padding-block: 82px 91px; background: var(--pro-green); color: var(--pro-white); }
.gallery-section .pro-eyebrow { color: #d4dfd3; }
.gallery-section .pro-eyebrow > span:not(:first-child) { color: #adc0af; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 31px; }
.gallery-heading h2 em { color: #e1a184; }
.gallery-heading > p { margin: 0 0 4px; color: #f2f2e9; font-size: 9px; font-weight: 700; text-align: right; }
.gallery-heading > p span { color: #c0cec2; font-size: 7px; font-weight: 550; letter-spacing: .7px; }
.gallery-strip { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 13px; }
.gallery-strip button { position: relative; height: 247px; padding: 0; overflow: hidden; border: 0; background: #dfe2d8; cursor: zoom-in; text-align: left; }
.gallery-strip button:first-child { height: 295px; }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-strip button:hover img { transform: scale(1.04); }
.gallery-strip button span { position: absolute; right: 0; bottom: 0; left: 0; padding: 9px 11px; background: linear-gradient(transparent, rgb(20 32 24 / 72%)); color: white; font-size: 7px; font-weight: 750; letter-spacing: 1px; }
.gallery-dialog { position: fixed; width: min(960px, calc(100% - 30px)); max-width: 960px; max-height: calc(100% - 30px); padding: 36px 60px 21px; border: 1px solid rgb(255 255 255 / 22%); background: #17271e; color: white; }
.gallery-dialog::backdrop { background: rgb(17 25 19 / 82%); backdrop-filter: blur(4px); }
.gallery-dialog figure { margin: 0; }
.gallery-dialog figure img { display: block; width: 100%; max-height: min(68vh, 620px); object-fit: contain; }
.gallery-dialog figcaption { padding-top: 9px; color: #e6e9df; font-size: 10px; }
.gallery-close, .gallery-previous, .gallery-next { position: absolute; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgb(255 255 255 / 35%); background: #203b2e; color: white; cursor: pointer; }
.gallery-close { top: 9px; right: 9px; font-size: 20px; }
.gallery-previous { top: 50%; left: 12px; font-size: 18px; }
.gallery-next { top: 50%; right: 12px; font-size: 18px; }

.process-section { padding-block: 99px; }
.process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--pro-line); list-style: none; }
.process-steps li { position: relative; min-height: 178px; padding: 15px 17px 15px 0; border-right: 1px solid var(--pro-line); }
.process-steps li + li { padding-left: 17px; }
.process-steps li:last-child { border-right: 0; }
.process-steps li > span { color: #838d83; font-size: 7px; font-weight: 750; letter-spacing: 1px; }
.process-steps li > b { display: block; margin: 21px 0 8px; color: var(--pro-orange); font-family: var(--pro-display); font-size: 25px; font-weight: 500; }
.process-steps h3 { margin: 0; font-family: var(--pro-display); font-size: 13px; font-weight: 750; }
.process-steps p { max-width: 190px; margin: 5px 0 0; color: var(--pro-muted); font-size: 9px; line-height: 1.75; }

.feedback-section { padding-block: 71px; background: #efeee5; }
.feedback-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 68px; align-items: start; }
.feedback-inner .pro-eyebrow > span:not(:first-child) { color: var(--pro-orange); }
.feedback-inner h2 { font-size: 45px; }
.feedback-note { max-width: 280px; color: var(--pro-muted); font-size: 9px; line-height: 1.7; }
.feedback-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feedback-quotes blockquote { margin: 0; padding: 17px; border: 1px solid #dedfd5; background: var(--pro-white); }
.feedback-quotes blockquote > span { color: #ad674c; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.feedback-quotes blockquote > p { min-height: 70px; margin: 16px 0; font-family: var(--pro-display); font-size: 14px; font-weight: 600; line-height: 1.5; }
.feedback-quotes footer { color: #59645b; font-size: 8px; font-weight: 700; }
.feedback-quotes footer span { display: block; color: #8b9389; font-size: 7px; font-weight: 500; }

.area-section { padding-block: 75px; background: #e6e7dd; }
.area-inner { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 75px; }
.area-inner > div:first-child > p:last-child { max-width: 420px; margin: 15px 0 0; color: var(--pro-muted); font-size: 10px; line-height: 1.8; }
.area-list { border-top: 1px solid #cdd2c8; }
.area-list > span { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid #cdd2c8; font-family: var(--pro-display); font-size: 13px; font-weight: 650; }
.area-list b { color: var(--pro-orange); font-family: var(--pro-sans); font-size: 8px; }

.quote-section { padding-block: 97px; background: var(--pro-green-deep); color: white; }
.quote-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: 82px; }
.quote-intro .pro-eyebrow { color: #d5dfd4; }
.quote-intro .pro-eyebrow > span:not(:first-child) { color: #e1a184; }
.quote-intro h2 em { color: #e6a383; }
.quote-intro > p:not(.pro-eyebrow) { max-width: 330px; color: #d2ddd3; font-size: 10px; line-height: 1.85; }
.quote-call { display: flex; flex-direction: column; gap: 3px; margin-top: 27px; }
.quote-call > span { color: #bacbbd; font-size: 7px; font-weight: 750; letter-spacing: 1px; }
.quote-call a { width: fit-content; padding-bottom: 2px; border-bottom: 1px solid #99ac9c; color: white; font-size: 13px; font-weight: 650; }
.quote-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 13px; }
.quote-field { display: flex; min-width: 0; flex-direction: column; }
.quote-field label { margin-bottom: 6px; color: #f5f5ec; font-size: 9px; font-weight: 650; }
.quote-field label span { color: #f1ac8b; }
.quote-field input, .quote-field select, .quote-field textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 2px; background: #f9f8f1; color: var(--pro-ink); font-size: 10px; }
.quote-field input::placeholder, .quote-field textarea::placeholder { color: #899188; }
.quote-field textarea { min-height: 94px; resize: vertical; }
.quote-field-full { grid-column: 1 / -1; }
.form-error { min-height: 0; margin-top: 3px; color: #ffd0bc; font-size: 8px; }
.quote-field [aria-invalid='true'] { border-color: #ffaf8d; }
.quote-submit { display: flex; align-items: center; gap: 14px; margin-top: 15px; }
.quote-submit .pro-button { flex: 0 0 auto; border-color: var(--pro-orange); background: var(--pro-orange); }
.quote-submit .pro-button:hover { border-color: #be6243; background: #be6243; }
.quote-submit > p { max-width: 170px; margin: 0; color: #bdcbbc; font-size: 8px; line-height: 1.6; }
.quote-feedback { margin: 14px 0 0; padding: 11px 13px; border-left: 3px solid #e3a082; background: rgb(255 255 255 / 9%); color: white; font-size: 10px; }

.pro-footer { padding-block: 25px 15px; background: #1b3025; color: white; }
.pro-footer-top { display: flex; align-items: center; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid rgb(255 255 255 / 17%); }
.pro-footer-top .pro-brand { color: white; }
.pro-footer-top .pro-mark { border: 1px solid rgb(255 255 255 / 18%); background: #233e2e; }
.pro-footer-top > p { margin: 0 auto 0 8px; color: #cfdbcf; font-family: var(--pro-display); font-size: 12px; line-height: 1.5; }
.back-top { color: #d4ded4; font-size: 8px; }
.pro-footer-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding-top: 13px; color: #c3d0c4; font-size: 7px; }
.pro-footer-bottom > span { white-space: nowrap; }
.pro-footer-bottom > span i { color: #e5aa8c; font-style: normal; }
.pro-footer-bottom nav, .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; }
.pro-footer-bottom a:hover { color: #f0ad8e; }
.legal-links { justify-content: flex-end; white-space: nowrap; }
.footer-demo-label { margin: 12px 0 0; color: #aab9ac; font-size: 7px; }
.legal-demo { min-height: calc(100vh - 230px); padding-block: 88px; }
.legal-demo h1 { margin: 0 0 22px; font-family: var(--pro-display); font-size: clamp(40px, 7vw, 64px); font-weight: 700; letter-spacing: -2px; }
.legal-demo > div { max-width: 690px; margin-bottom: 24px; padding: 19px; border: 1px solid var(--pro-line); background: var(--pro-white); }
.legal-demo > div strong { font-family: var(--pro-display); font-size: 16px; }
.legal-demo > div p { color: var(--pro-muted); font-size: 11px; line-height: 1.9; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .header-shell, .pro-hero { width: calc(100% - 48px); }
  .header-shell { gap: 12px; }
  .pro-brand { min-width: 145px; }
  .pro-nav { gap: 14px; }
  .pro-nav a { font-size: 10px; }
  .pro-button-small { padding-inline: 11px; font-size: 9px; }
  .pro-hero { min-height: 560px; grid-template-columns: .95fr 1.05fr; gap: 31px; padding-block: 57px 83px; }
  .hero-copy h1 { font-size: clamp(42px, 5.4vw, 55px); }
  .hero-photo { height: 365px; }
  .why-inner { gap: 45px; }
  .why-visual { height: 415px; }
  .quote-shell { gap: 45px; }
  .pro-footer-bottom { grid-template-columns: 1fr auto; }
  .pro-footer-bottom nav { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 79px; }
  .section-shell { width: calc(100% - 40px); }
  .demo-ribbon { min-height: 25px; padding-inline: 13px; font-size: 6px; letter-spacing: .65px; }
  .demo-ribbon span:last-child { font-size: 6px; }
  .pro-header { height: 59px; }
  .header-shell { width: calc(100% - 26px); gap: 8px; }
  .pro-brand { min-width: 0; gap: 7px; }
  .pro-mark { width: 30px; height: 30px; font-size: 19px; }
  .pro-brand strong { font-size: 11px; }
  .pro-brand small { font-size: 6px; letter-spacing: 1.25px; }
  .pro-menu-toggle { display: flex; width: 36px; height: 36px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; border: 1px solid var(--pro-line); background: transparent; cursor: pointer; }
  .pro-menu-toggle > span { width: 15px; height: 1px; background: var(--pro-ink); transition: transform .2s ease; }
  .pro-menu-toggle[aria-expanded='true'] > span:first-child { transform: translateY(3px) rotate(45deg); }
  .pro-menu-toggle[aria-expanded='true'] > span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .pro-nav { position: absolute; top: 58px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 14px; border-bottom: 1px solid var(--pro-line); background: var(--pro-white); box-shadow: 0 15px 22px rgb(34 44 37 / 10%); }
  .pro-nav.is-open { display: flex; }
  .pro-nav a { padding: 10px 1px; border-bottom: 1px solid #ecece5; font-size: 11px; }
  .pro-nav a:last-child { border-bottom: 0; }
  .pro-nav a::after { display: none; }
  .pro-button-small { min-height: 35px; gap: 8px; padding-inline: 8px; font-size: 8px; }
  .pro-hero { display: flex; width: calc(100% - 40px); flex-direction: column; align-items: stretch; gap: 21px; padding-block: 45px 66px; }
  .hero-copy h1 { font-size: clamp(43px, 11vw, 58px); letter-spacing: -1.8px; }
  .hero-copy .pro-eyebrow { margin-bottom: 13px; font-size: 7px; }
  .hero-lede { margin-top: 13px; font-size: 11px; }
  .hero-actions { margin-top: 17px; }
  .hero-actions .pro-button { min-height: 44px; padding-inline: 13px; font-size: 10px; }
  .hero-photo { height: clamp(244px, 72vw, 350px); margin: 5px 6px 0 0; }
  .hero-photo::after { top: 9px; right: -8px; bottom: -8px; left: 8px; }
  .hero-seal { top: -13px; left: -11px; width: 61px; height: 61px; }
  .hero-seal > span { font-size: 6px; }
  .hero-photo-label { padding: 8px 10px; font-size: 6px; }
  .hero-meta { bottom: 19px; font-size: 6px; }
  .intro-band-inner { width: calc(100% - 40px); min-height: 112px; gap: 10px; }
  .index-label { flex: 0 0 74px; font-size: 6px; line-height: 1.6; }
  .intro-band-inner > p { font-size: 15px; }
  .intro-flower { font-size: 23px; }
  .pro-section { padding-block: 71px; }
  .pro-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 25px; }
  .pro-section-heading .pro-eyebrow { margin-bottom: 12px; }
  .pro-section-heading h2, .why-copy h2, .gallery-heading h2, .feedback-inner h2, .area-inner h2, .quote-intro h2 { font-size: clamp(38px, 10vw, 51px); letter-spacing: -1.4px; }
  .pro-section-heading > p { max-width: 400px; margin: 0; font-size: 10px; }
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { min-height: 175px; padding: 14px 12px; }
  .service-card > img { width: calc(100% + 24px); height: 92px; margin: 0 -12px 10px; }
  .line-icon { top: 11px; right: 13px; font-size: 22px; }
  .service-card h3 { margin-top: 25px; font-size: 14px; line-height: 1.3; }
  .service-card p { font-size: 9px; }
  .why-section { padding-block: 58px; }
  .why-inner { grid-template-columns: 1fr; gap: 28px; }
  .why-visual { height: clamp(250px, 68vw, 330px); margin-right: 10px; }
  .why-stamp { right: -10px; width: 62px; height: 62px; font-size: 6px; }
  .why-lede { font-size: 10px; }
  .benefit-list h3 { font-size: 12px; }
  .benefit-list p { font-size: 8px; }
  .projects-section { padding-block: 73px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 11px; }
  .project-image, .project-card-tall .project-image { height: clamp(130px, 39vw, 190px); }
  .project-image > span { top: 7px; left: 7px; padding: 4px 5px; font-size: 5px; }
  .project-image > b { right: 7px; bottom: 7px; width: 24px; height: 24px; }
  .project-category { font-size: 6px; letter-spacing: .65px; }
  .project-card h3 { font-size: 13px; line-height: 1.35; }
  .gallery-section { padding-block: 63px; }
  .gallery-heading { align-items: flex-start; flex-direction: column; gap: 9px; margin-bottom: 20px; }
  .gallery-heading > p { text-align: left; font-size: 8px; }
  .gallery-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery-strip button, .gallery-strip button:first-child { height: clamp(126px, 37vw, 175px); }
  .gallery-strip button:first-child { grid-row: span 2; height: 100%; }
  .gallery-strip button span { padding: 7px; font-size: 6px; }
  .gallery-dialog { padding: 45px 42px 17px; }
  .gallery-dialog figure img { max-height: 62vh; }
  .gallery-close, .gallery-previous, .gallery-next { width: 31px; height: 31px; }
  .gallery-previous { left: 6px; }
  .gallery-next { right: 6px; }
  .process-section { padding-block: 70px; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-steps li { min-height: 160px; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--pro-line); }
  .process-steps li + li { padding-left: 12px; }
  .process-steps li:nth-child(2) { border-right: 0; }
  .process-steps li:nth-child(n + 3) { border-bottom: 0; }
  .process-steps li > b { margin: 13px 0 6px; font-size: 22px; }
  .process-steps h3 { font-size: 11px; }
  .process-steps p { font-size: 8px; }
  .feedback-section { padding-block: 57px; }
  .feedback-inner { grid-template-columns: 1fr; gap: 20px; }
  .feedback-inner h2 { font-size: 42px; }
  .feedback-quotes { gap: 8px; }
  .feedback-quotes blockquote { padding: 11px; }
  .feedback-quotes blockquote > p { min-height: 93px; font-size: 12px; }
  .area-section { padding-block: 58px; }
  .area-inner { grid-template-columns: 1fr; gap: 21px; }
  .area-inner > div:first-child > p:last-child { font-size: 9px; }
  .area-list > span { padding-block: 9px; font-size: 12px; }
  .quote-section { padding-block: 66px; }
  .quote-shell { grid-template-columns: 1fr; gap: 23px; }
  .quote-intro > p:not(.pro-eyebrow) { font-size: 9px; }
  .quote-call { display: none; }
  .quote-form-grid { gap: 12px 9px; }
  .quote-field label { font-size: 8px; }
  .quote-field input, .quote-field select, .quote-field textarea { min-height: 40px; padding-inline: 8px; font-size: 9px; }
  .quote-field textarea { min-height: 83px; }
  .quote-submit { align-items: flex-start; flex-direction: column; gap: 8px; }
  .quote-submit > p { max-width: none; }
  .pro-footer { padding-block: 19px 12px; }
  .pro-footer-top { align-items: flex-start; gap: 10px; padding-bottom: 12px; }
  .pro-footer-top .pro-brand { min-width: 135px; }
  .pro-footer-top > p { margin: 1px 0 0 auto; font-size: 9px; }
  .back-top { display: none; }
  .pro-footer-bottom { grid-template-columns: 1fr; gap: 9px; padding-top: 11px; font-size: 7px; }
  .pro-footer-bottom nav { grid-row: auto; grid-column: auto; justify-content: flex-start; gap: 12px; }
  .legal-links { justify-content: flex-start; }
  .footer-demo-label { font-size: 6px; }
  .legal-demo { padding-block: 62px; }
}

@media (max-width: 370px) {
  .demo-ribbon { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1px; padding-block: 4px; }
  .header-shell { width: calc(100% - 20px); gap: 6px; }
  .pro-brand strong { font-size: 10px; }
  .pro-brand small { font-size: 5px; }
  .pro-button-small { max-width: 112px; white-space: normal; text-align: center; }
  .hero-copy h1 { font-size: 42px; }
  .intro-band-inner > p { font-size: 13px; }
  .project-image, .project-card-tall .project-image { height: 123px; }
}