@layer site {
  :root { --c-white: oklch(100% 0 0); --c-ink: oklch(18% .02 245); --c-red: oklch(66% .2 33); --c-blue: oklch(48% .1 239); --c-line: oklch(78% .015 245); }
  body { background: var(--c-white); color: var(--c-ink); font-family: "Avenir Next", Avenir, sans-serif; }.site-header { background: var(--c-white); color: var(--c-ink); border-color: var(--c-ink); }.site-header .brand { font-size: 1.35rem; letter-spacing: -.035em; text-transform: uppercase; }.header-call { background: var(--c-red); color: var(--c-white); }
  .contour-hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 45% 55%; }.contour-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vw, 84px); border-right: 1px solid var(--c-ink); }.contour-copy > p:first-child { font-size: .76rem; font-weight: 750; }.contour-copy h1, .page-mast h1 { margin: 18px 0; font-size: clamp(4rem, 9vw, 6rem); line-height: .84; letter-spacing: -.035em; }.contour-copy > p:not(:first-child) { font-size: 1.15rem; }
  .site-action { min-height: 50px; width: fit-content; border: 0; border-radius: 0; padding: 13px 18px; background: var(--c-red); color: var(--c-white); font-weight: 800; cursor: pointer; box-shadow: 0 7px 0 oklch(37% .12 33); transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }.site-action:hover { transform: translateY(-3px); box-shadow: 0 10px 0 oklch(37% .12 33); }
  .contour-board { position: relative; min-height: 690px; overflow: hidden; background: oklch(96% .015 238); }.contour-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }.contour-board svg path { fill: none; stroke: var(--c-blue); stroke-width: 2; }.plan-patio, .plan-canopy, .plan-lawn { position: absolute; display: grid; place-items: center; border: 2px solid var(--c-ink); background: var(--c-white); font-size: .78rem; font-weight: 800; cursor: pointer; }.plan-patio { left: 13%; top: 44%; width: 34%; height: 25%; }.plan-canopy { right: 12%; top: 15%; width: 30%; height: 32%; border-radius: 50%; }.plan-lawn { right: 10%; bottom: 12%; width: 40%; height: 28%; clip-path: polygon(0 8%, 90% 0, 100% 80%, 18% 100%); }.plan-magnifier { position: absolute; left: 46%; top: 34%; width: 150px; height: 150px; border: 12px solid var(--c-red); border-radius: 50%; pointer-events: none; transform: translate(var(--mag-x, 0), var(--mag-y, 0)); transition: transform .18s var(--ease-out); box-shadow: 10px 12px 0 oklch(30% .03 245 / .2); }.plan-magnifier::after { content: ""; position: absolute; width: 75px; height: 12px; right: -62px; bottom: -36px; background: var(--c-red); transform: rotate(42deg); transform-origin: left; }.contour-board > p { position: absolute; left: 20px; bottom: 10px; font-size: .8rem; font-weight: 750; }
  .contour-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--c-ink); }.contour-facts div { padding: 24px clamp(18px, 4vw, 55px); border-right: 1px solid var(--c-ink); }.contour-facts div:last-child { border-right: 0; }.contour-facts span, .contour-facts strong { display: block; }.contour-facts span { color: var(--c-red); font-weight: 800; }.site-shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
  .contour-process { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 10vw, 140px); padding-block: 120px; }.contour-process h2, .contour-end h2 { margin: 0; font-size: clamp(3.2rem, 7vw, 6rem); line-height: .9; letter-spacing: -.035em; }.contour-process ol { margin: 0; padding: 0; list-style: none; }.contour-process li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--c-line); }.contour-process li span { color: var(--c-red); font-weight: 850; }.contour-end { padding-block: 130px; background: var(--c-ink); color: var(--c-white); }.contour-end .site-action { margin-top: 25px; }
  .page-mast { padding-block: 140px; border-bottom: 1px solid var(--c-ink); }.page-marker { display: block; color: var(--c-red); font-weight: 800; }.page-mast p { font-size: 1.2rem; }.service-rows { width: min(1160px, calc(100% - 40px)); margin-inline: auto; padding-block: 50px 100px; }.service-row { display: grid; grid-template-columns: 55px 1fr auto; gap: 25px; padding: 32px 0; border-bottom: 1px solid var(--c-ink); }.service-row h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .9; }.service-row a { color: var(--c-red); font-weight: 800; }
  .contour-layers { padding-block: 80px 120px; }.contour-layers h2 { font-size: 3rem; }.contour-layers > div { display: flex; flex-wrap: wrap; gap: 8px; }.contour-layers button { min-height: 44px; border: 1px solid var(--c-ink); padding: 10px 16px; background: transparent; color: inherit; cursor: pointer; }.contour-layers button:hover { background: var(--c-red); color: var(--c-white); }.contour-about { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 10vw, 140px); padding-block: 120px; }.contour-stamp { min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; border: 8px solid var(--c-blue); padding: 24px; transform: rotate(-2deg); }.contour-about h2 { font-size: clamp(3rem, 7vw, 6rem); line-height: .9; }.contour-about blockquote { margin: 35px 0 0; color: var(--c-red); font-size: 1.7rem; font-weight: 750; }
  .contact-workbench { width: min(1160px, 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(2.8rem, 6vw, 5rem); line-height: .95; }.contact-form-wrap form { display: grid; gap: 7px; }.contact-form-wrap input, .contact-form-wrap textarea { min-height: 48px; border: 1px solid var(--c-ink); border-radius: 0; padding: 11px; background: var(--c-white); color: var(--c-ink); }.contact-form-wrap textarea { min-height: 130px; }.contour-contact { padding-block: 70px 120px; }.contour-contact a { color: var(--c-red); font-size: clamp(2.5rem, 6vw, 5rem); text-decoration: none; } footer { background: var(--c-ink); color: var(--c-white); }
  @media (max-width: 820px) { .contour-hero, .contour-process, .contour-about, .contact-workbench { grid-template-columns: 1fr; }.contour-copy { min-height: 600px; border-right: 0; border-bottom: 1px solid var(--c-ink); }.contour-board { min-height: 540px; }.contour-facts { grid-template-columns: 1fr; }.contour-facts div { border-right: 0; border-bottom: 1px solid var(--c-ink); }.contour-process li { grid-template-columns: 1fr; }.service-row { grid-template-columns: 45px 1fr; }.service-row a { grid-column: 2; } }
}