:root {
  --timber: #6d4935;
  --moss: #3f5b35;
  --rust: #a65432;
  --ochre: #b67a32;
}

.brand-symbol { width: 37px; height: 45px; object-fit: contain; flex: 0 0 auto; }
.site-header { min-height: 104px; }
.site-header .brand-symbol { width: 54px; height: 66px; }
.brand-dot { color: var(--rust); }
.main-nav a:hover, .text-link:hover, .direct-email > a:hover { color: var(--rust); }
.main-nav a:hover { border-color: var(--rust); }
.status-dot { background: var(--rust); }

.hero-surface {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 40px;
  min-height: 570px;
  padding: 42px 44px 68px;
  background-color: #eeece3;
  background-image: linear-gradient(90deg, transparent 49.9%, #dcd8ce 50%, transparent 50.1%), repeating-linear-gradient(0deg, transparent 0, transparent 31px, #dcd8ce55 32px);
}
.hero-surface::before { display: none; }
.hero-content { max-width: 620px; padding: 0; }
.hero .eyebrow { margin-bottom: 24px; color: var(--timber); }
.hero h1 { margin-bottom: 19px; font-size: 76px; white-space: nowrap; }
.hero h2 { margin-bottom: 17px; font-size: 51px; }
.hero-description { max-width: 440px; margin-bottom: 20px; font-size: 14px; }
.hero-note { max-width: 380px; color: var(--muted); }
.hero-work { left: 44px; bottom: 20px; font-size: 10px; }

.hero-specimen {
  position: relative;
  z-index: 1;
  min-width: 0;
  transform: rotate(1deg);
  border: 1px solid #c9c4b8;
  background: var(--paper);
  box-shadow: 0 16px 36px #34291e18;
}
.specimen-browser { display: flex; height: 34px; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid var(--line); background: #f0ede5; }
.specimen-browser > span:nth-child(-n+3) { width: 6px; height: 6px; border-radius: 50%; background: var(--rust); }
.specimen-browser > span:nth-child(2) { background: var(--ochre); }
.specimen-browser > span:nth-child(3) { background: #788b56; }
.specimen-browser > .mono { margin-left: 10px; color: var(--muted); font-size: 8px; }
.specimen-site-nav { display: flex; align-items: center; gap: 8px; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.specimen-site-nav > img { width: 21px; height: 27px; }
.specimen-site-nav > .mono { margin-left: auto; color: var(--rust); font-size: 7px; }
.specimen-site-body { min-height: 235px; padding: 25px 24px; background: linear-gradient(125deg, #dce3d3, #e9e4d7 55%, #e8d8c9); }
.specimen-site-body > .mono { color: var(--timber); font-size: 8px; }
.specimen-site-body > strong { display: block; margin-top: 18px; font: 400 56px/.99 var(--display); }
.specimen-site-body > span { display: block; margin-top: 15px; color: var(--muted); font-size: 9px; }
.specimen-site-body > i { display: block; width: 39px; height: 2px; margin-top: 20px; background: var(--rust); }
.specimen-site-footer { display: flex; justify-content: space-between; gap: 8px; padding: 11px 16px; color: var(--timber); font-size: 7px; }

.section-label, .service-number > span, .principle-strip .mono, .step-number { color: var(--rust); }
.service-tag, .project-type, .approach-seal { color: var(--timber); }
.estimate-section { background: #e8e8dc; }
.estimate-summary { border-top-color: var(--rust); }
.currency-switch input:checked + span { background: var(--moss); }
.savings-row, .monthly-total > strong, .annual-total > strong { color: var(--moss); }
.annual-total { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.annual-total > strong { font: 400 12px var(--mono); }

.demo-modern.demo-site-contrast { background: #f6f7f8; color: #172a3a; }
.demo-site-contrast .demo-modern-nav { background: #172a3a; color: #fff; border: 0; }
.demo-bike-brand { display: flex; min-width: 0; align-items: center; gap: 8px; }
.demo-bike-brand > img { width: 38px; height: 26px; object-fit: contain; }
.demo-bike-brand > strong { overflow: hidden; font: 700 15px/1 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.demo-site-contrast .demo-modern-nav .mono { color: #d7e0e8; }
.demo-site-contrast .demo-modern-content .mono { color: #c24e23; }
.demo-site-contrast .demo-modern h4 { color: #172a3a; font-family: var(--sans); font-weight: 700; text-transform: uppercase; }
.demo-site-contrast .demo-modern-content > p:not(.mono) { color: #3c4b57; }
.demo-site-contrast .demo-cta { border-color: #c24e23; color: #172a3a; }
.comparison { cursor: ew-resize; }
.demo-modern-graphic { position: absolute; top: 70px; right: 0; display: flex; width: 34%; height: calc(100% - 70px); flex-direction: column; justify-content: center; gap: 13px; padding: 14px; background: linear-gradient(155deg, #d5e0e9, #f3ded2); }
.demo-modern-graphic > span { padding-bottom: 8px; border-bottom: 1px solid #172a3a44; color: #172a3a; font-size: 7px; }
.demo-modern-graphic > .demo-graphic-link { width: fit-content; padding: 6px 0; border-color: #c24e23; color: #c24e23; }
.legacy-bike { display: block; width: 90px; height: 46px; margin: 3px auto 0; }
.site-footer .brand-symbol { filter: brightness(1.65) saturate(.72); }
.site-footer .brand-dot { color: #c78355; }
.admin-top .brand-symbol { width: 33px; height: 41px; }

@media (max-width: 1100px) {
  .hero-surface { gap: 26px; padding-inline: 34px; }
  .site-header .brand-symbol { width: 48px; height: 58px; }
  .hero h1 { font-size: 68px; }
  .hero h2 { font-size: 44px; }
  .hero-work { left: 34px; }
  .specimen-site-body { min-height: 215px; padding: 22px 18px; }
  .specimen-site-body > strong { font-size: 46px; }
}
@media (max-width: 850px) {
  .hero-surface { grid-template-columns: 1fr 1fr; gap: 20px; min-height: 570px; padding-inline: 27px; }
  .hero h1 { font-size: 58px; }
  .hero h2 { font-size: 40px; }
  .hero-description { font-size: 13px; }
  .hero-work { left: 27px; }
  .specimen-site-nav { padding-inline: 12px; }
  .specimen-site-body { min-height: 205px; padding: 20px 14px; }
  .specimen-site-body > strong { font-size: 37px; }
  .specimen-site-footer { font-size: 6px; }
  .demo-modern-content { width: 65%; }
  .demo-modern-graphic { width: 33%; gap: 9px; padding: 10px; }
}
@media (max-width: 650px) {
  .brand-symbol { width: 38px; height: 46px; }
  .site-header .brand-symbol { width: 42px; height: 52px; }
  .hero-surface { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 29px 20px 70px; background-image: repeating-linear-gradient(0deg, transparent 0, transparent 31px, #dcd8ce55 32px); }
  .hero-content { padding: 0; }
  .hero .eyebrow { margin-bottom: 22px; font-size: 8px; }
  .hero h1 { margin-bottom: 20px; font-size: 47px; }
  .hero h2 { font-size: 43px; }
  .hero-description { max-width: 380px; font-size: 13px; }
  .hero-note { font-size: 9px; }
  .hero-specimen { width: min(100%, 470px); justify-self: center; transform: none; }
  .specimen-site-body { min-height: 195px; padding: 19px; }
  .specimen-site-body > strong { font-size: 42px; }
  .hero-work { left: 20px; bottom: 21px; }
  .project-types { flex-wrap: wrap; }
  .project-types label { flex: 1 1 45%; }
  .project-types label > span { font-size: 10px; }
  .demo-modern-content { width: 65%; padding: 20px 14px; }
  .demo-modern-graphic { top: 55px; width: 35%; height: calc(100% - 55px); gap: 8px; padding: 9px; }
  .demo-modern-graphic > span { font-size: 6px; }
  .demo-bike-brand > img { width: 31px; height: 22px; }
  .demo-bike-brand > strong { font-size: 12px; }
  .legacy-bike { width: 62px; height: 34px; }
  .annual-total { padding-block: 12px; }
}
@media (max-width: 380px) {
  .hero-surface { padding-inline: 17px; }
  .hero h1 { font-size: 39px; }
  .hero h2 { font-size: 34px; }
  .specimen-site-body { min-height: 180px; padding: 16px; }
  .specimen-site-body > strong { font-size: 37px; }
  .specimen-site-footer { font-size: 5px; }
  .project-types label > span { font-size: 9px; }
}
@media print {
  .hero-specimen { display: none; }
  .annual-total { break-inside: avoid; }
}
.legal-nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; }
.legal-nav a, .footer-legal a { border-bottom: 1px solid var(--line); }
.legal-nav a:hover, .footer-legal a:hover { color: var(--rust); border-color: var(--rust); }
.legal-page { width: min(100% - 48px, 860px); padding-block: 70px 100px; }
.legal-page > .eyebrow { color: var(--timber); }
.legal-page > h1 { margin: 15px 0 17px; font: 400 54px/1.05 var(--display); }
.legal-lead { max-width: 700px; color: var(--muted); font-size: 15px; }
.legal-warning { margin-top: 24px; border-left-color: var(--rust); }
.legal-sections { margin-top: 44px; }
.legal-sections section { padding: 21px 0; border-top: 1px solid var(--line); }
.legal-sections h2 { margin-bottom: 10px; font: 500 19px/1.4 var(--sans); }
.legal-sections p, .legal-note { max-width: 760px; color: #4c534b; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.legal-details { margin: 38px 0; border-top: 1px solid var(--line); }
.legal-details > div { display: grid; grid-template-columns: minmax(210px, .75fr) 1.25fr; gap: 26px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.legal-details dt { font-size: 12px; font-weight: 600; }
.legal-details dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.legal-note { margin-top: 30px; }
.legal-updated { margin-top: 36px; color: var(--muted); font-size: 9px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px 0; border-bottom: 1px solid #ffffff24; font-size: 10px; }
.footer-legal a { border-color: #ffffff52; }
.legal-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.legal-footer .mono { color: #b9c1b7; font-size: 9px; }
@media (max-width: 650px) {
  .legal-page { width: calc(100% - 38px); padding-block: 47px 70px; }
  .legal-page > h1 { font-size: 40px; }
  .legal-lead { font-size: 13px; }
  .legal-details > div { grid-template-columns: 1fr; gap: 5px; }
  .legal-footer .wrap { align-items: flex-start; flex-direction: column; }
  .legal-nav { gap: 10px; font-size: 10px; }
}