@layer site {
  :root { --peri-blue: oklch(55% .25 263); --peri-orange: oklch(70% .19 39); --peri-ink: oklch(16% .02 260); --peri-white: oklch(98% .005 260); --peri-line: oklch(92% .02 263); }
  body { background: var(--peri-blue); color: var(--peri-white); font-family: "DIN Alternate", "Avenir Next Condensed", sans-serif; }.site-header { background: var(--peri-white); color: var(--peri-ink); border-color: var(--peri-ink); }.site-header .brand { font-size: 1.4rem; letter-spacing: -.04em; text-transform: uppercase; }.header-call { background: var(--peri-orange); color: var(--peri-ink); }
  .perimeter-hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 62% 38%; }.perimeter-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 6vw, 84px); border-right: 1px solid var(--peri-line); }.perimeter-copy > p:first-child { position: absolute; top: 100px; font-size: .75rem; font-weight: 800; text-transform: uppercase; }.perimeter-copy h1 { margin: 0; font-size: clamp(5rem, 13vw, 6rem); line-height: .72; letter-spacing: -.04em; text-transform: uppercase; }.perimeter-copy h1 span { color: var(--peri-orange); }.perimeter-copy > p:not(:first-child) { max-width: 30ch; font-family: "Gill Sans", "Trebuchet MS", sans-serif; font-size: 1.15rem; }
  .site-action { min-height: 50px; width: fit-content; border: 0; border-radius: 0; padding: 13px 18px; background: var(--peri-orange); color: var(--peri-ink); font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 0 oklch(35% .12 38); transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }.site-action:hover { transform: translateY(-3px); box-shadow: 0 11px 0 oklch(35% .12 38); }
  .property-map { position: relative; min-height: 670px; overflow: hidden; background: oklch(59% .23 263); }.property-map::before, .property-map::after { content: ""; position: absolute; background: var(--peri-line); opacity: .65; }.property-map::before { left: 12%; top: 0; width: 1px; height: 100%; box-shadow: 105px 0 0 var(--peri-line), 210px 0 0 var(--peri-line), 315px 0 0 var(--peri-line); }.property-map::after { left: 0; top: 18%; width: 100%; height: 1px; box-shadow: 0 110px 0 var(--peri-line), 0 220px 0 var(--peri-line), 0 330px 0 var(--peri-line); }.property-house { position: absolute; z-index: 2; left: 29%; top: 30%; width: 44%; height: 38%; display: grid; place-items: center; border: 5px solid var(--peri-white); color: var(--peri-white); font-size: 1.3rem; font-weight: 900; text-transform: uppercase; }.zone { position: absolute; z-index: 4; display: flex; gap: 7px; align-items: center; padding: 7px 9px; background: var(--peri-white); color: var(--peri-ink); font-family: "Gill Sans", "Trebuchet MS", sans-serif; font-size: .75rem; font-weight: 800; cursor: pointer; }.zone input { width: 20px; height: 20px; }.zone-foundation { left: 18%; bottom: 16%; }.zone-garage { right: 8%; top: 49%; }.zone-yard { left: 6%; top: 15%; }.zone-roof { right: 13%; top: 12%; }.boundary-shape { position: absolute; z-index: 3; inset: 20% 14% 18% 14%; border: 9px solid var(--peri-orange); clip-path: polygon(8% 5%, 92% 0, 100% 78%, 74% 100%, 5% 88%, 0 27%); transition: inset .3s var(--ease-out), transform .3s var(--ease-out); pointer-events: none; }.boundary-shape[data-zones="4"] { inset: 10% 6% 9% 6%; transform: rotate(-2deg); }
  .route-board { min-height: 150px; display: grid; grid-template-columns: 180px 1fr 1fr; gap: 30px; align-items: center; padding: 24px clamp(20px, 5vw, 70px); background: var(--peri-orange); color: var(--peri-ink); }.route-label { font-weight: 900; text-transform: uppercase; }.route-zips { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 900; }.route-board p { font-family: "Gill Sans", "Trebuchet MS", sans-serif; }
  .site-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }.boundary-method { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 9vw, 130px); padding-block: 120px; }.boundary-method h2, .page-mast h1 { margin: 0; font-size: clamp(3.7rem, 9vw, 6rem); line-height: .8; letter-spacing: -.04em; text-transform: uppercase; }.boundary-method ol { margin: 0; padding: 0; list-style: none; }.boundary-method li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--peri-line); }.boundary-method li strong { color: var(--peri-orange); font-size: 1.4rem; text-transform: uppercase; }
  .page-mast { padding-block: clamp(100px, 14vw, 190px); border-bottom: 1px solid var(--peri-line); }.page-marker { display: block; margin-bottom: 18px; }.page-mast p { font-family: "Gill Sans", "Trebuchet MS", sans-serif; font-size: 1.2rem; }.service-rows { width: min(1180px, calc(100% - 40px)); margin-inline: auto; padding-block: 50px 120px; }.service-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--peri-line); }.service-row h2 { margin: 0; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .85; text-transform: uppercase; }.service-row p { font-family: "Gill Sans", "Trebuchet MS", sans-serif; }.service-row a { color: var(--peri-orange); font-weight: 900; }
  .perimeter-check { padding-block: 80px 120px; }.perimeter-check ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px; background: var(--peri-line); list-style: none; }.perimeter-check li { min-height: 120px; padding: 24px; background: var(--peri-blue); font-family: "Gill Sans", "Trebuchet MS", sans-serif; }
  .perimeter-about { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 10vw, 140px); padding-block: 110px; }.survey-mark { min-height: 430px; border: 8px solid var(--peri-orange); clip-path: polygon(9% 0, 100% 13%, 88% 94%, 14% 100%, 0 28%); }.perimeter-about h2 { font-size: clamp(3rem, 7vw, 6rem); line-height: .85; text-transform: uppercase; }.perimeter-about dl div { display: grid; grid-template-columns: 150px 1fr; gap: 25px; padding: 18px 0; border-top: 1px solid var(--peri-line); }.perimeter-about dd { margin: 0; font-family: "Gill Sans", "Trebuchet MS", sans-serif; }
  .contact-workbench { width: min(1180px, calc(100% - 40px)); margin-inline: auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 9vw, 130px); padding-block: 100px; }.contact-intro h2 { font-size: clamp(3rem, 7vw, 6rem); line-height: .85; text-transform: uppercase; }.contact-form-wrap form { display: grid; gap: 7px; }.contact-form-wrap input, .contact-form-wrap textarea { min-height: 48px; border: 1px solid var(--peri-line); border-radius: 0; padding: 11px; background: transparent; color: var(--peri-white); }.contact-form-wrap textarea { min-height: 130px; }.contact-form-wrap [data-field-error] { color: var(--peri-orange); }.perimeter-contact { padding-block: 70px 120px; }.perimeter-contact a { color: var(--peri-orange); font-size: clamp(2.4rem, 6vw, 5rem); text-decoration: none; }
  .boundary-dialog { background: var(--peri-white); color: var(--peri-ink); }.boundary-dialog .dialog-primary { background: var(--peri-orange); color: var(--peri-ink); }
  footer { background: var(--peri-ink); color: var(--peri-white); }
  @media (max-width: 820px) { .perimeter-hero, .boundary-method, .perimeter-about, .contact-workbench { grid-template-columns: 1fr; }.perimeter-copy { min-height: 590px; border-right: 0; border-bottom: 1px solid var(--peri-line); }.perimeter-copy h1 { font-size: clamp(3rem, 16vw, 5rem); }.perimeter-copy > p:first-child { top: 100px; }.property-map { min-height: 560px; }.route-board { grid-template-columns: 1fr; }.boundary-method li { grid-template-columns: 1fr; }.service-row { grid-template-columns: 45px 1fr; }.service-row a { grid-column: 2; }.perimeter-check ul { grid-template-columns: 1fr; } }
}