/* Resets and global behaviour only. All page layout lives in the markup as inline styles — see README "Why the styles are inline". */ *{box-sizing:border-box} body{margin:0;background:var(--sg-void);color:var(--sg-mist);font-family:var(--sg-font-body);font-weight:300;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:var(--sg-signal-light);transition:color var(--sg-dur-1) var(--sg-ease-out)} a:hover{color:var(--sg-sprout)} img{max-width:100%} [style*="display:grid"] > *{min-width:0} input,select,textarea{font-family:var(--sg-font-body)} input::placeholder,textarea::placeholder{color:var(--sg-muted)} :focus-visible{outline:2px solid var(--sg-focus);outline-offset:2px} input:focus,select:focus,textarea:focus{outline:2px solid var(--sg-focus);outline-offset:1px;border-color:transparent} .skip-link{position:fixed;top:12px;left:12px;z-index:9999;transform:translateY(-160%);background:var(--sg-paper);color:var(--sg-ink);border-radius:var(--sg-r-sm);padding:12px 16px;font:500 14px/1 var(--sg-font-body)} .skip-link:focus{transform:translateY(0)} .form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} .form-status,.form-noscript{margin:0;border:1px solid var(--sg-hairline-strong);border-radius:var(--sg-r-sm);padding:12px 14px;font:400 13px/1.6 var(--sg-font-body);color:var(--sg-mist-dim);background:var(--sg-panel-2)} .form-status[data-state="success"]{border-color:rgba(75,176,122,.5);color:#BCE8CC} .form-status[data-state="error"]{border-color:rgba(226,86,92,.55);color:#FFD1D3} .form-status a{color:var(--sg-signal-light);text-decoration:underline;text-underline-offset:3px} .footer-legal-link{color:var(--sg-moon);text-decoration:underline;text-underline-offset:3px} button:disabled{cursor:not-allowed!important;opacity:.55} .nav-toggle{display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column;width:48px;height:48px;margin-left:auto;padding:0;background:transparent;border:1px solid var(--sg-hairline-strong);border-radius:6px;cursor:pointer} .nav-toggle-bar{display:block;width:20px;height:1.5px;background:var(--sg-mist);transition:transform var(--sg-dur-1) var(--sg-ease-out),opacity var(--sg-dur-1) var(--sg-ease-out)} .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* Responsive: pages are authored at 1240px. These attribute selectors are a pragmatic bridge for inline-styled markup — replace with real breakpoints if you componentise. Targets: 375 / 768 / 1280. */ @media (max-width:1000px){ header nav{gap:18px!important;font-size:13px!important} section > div[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:40px!important} footer > div[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:32px!important} div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important} div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important} div[style*="border-left:1px solid"]{border-left:0!important;padding-left:0!important} } @media (max-width:640px){ header > div{padding-left:20px!important;padding-right:20px!important} /* The toggle only appears once JS has unhidden it. Without JS the links stay in the header and wrap, which is worse-looking but still usable — the old rule hid them outright and left the footer as the only way to navigate. */ .nav-toggle:not([hidden]){display:inline-flex} header nav[data-nav-collapsed] a:not(:last-child){display:none} header nav a:last-child{display:inline-flex!important;align-items:center;min-height:48px;padding:10px 16px!important;border:0!important;border-radius:6px;background:#1B7346;color:#fff!important;font-weight:500} /* Open state: the nav becomes a panel under the sticky header. */ header nav:not([data-nav-collapsed]){position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch!important;gap:0!important;padding:8px 20px 20px;background:#0B0B0D;border-bottom:1px solid rgba(148,163,156,.16);box-shadow:0 18px 40px rgba(0,0,0,.45)} header nav:not([data-nav-collapsed]) a:not(:last-child){display:flex;align-items:center;min-height:52px;font-size:16px;border-bottom:1px solid rgba(148,163,156,.12)} header nav:not([data-nav-collapsed]) a:last-child{margin-top:16px;justify-content:center} div[style*="grid-template-columns:repeat(4,1fr)"], div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important} div[style*="grid-template-columns:1.6fr 1fr 1fr"]{grid-template-columns:1.35fr 1fr 1fr!important} div[style*="grid-template-columns:1.6fr 1fr 1fr"] > div{padding:14px 10px!important;font-size:12px!important;overflow-wrap:anywhere} div[style*="grid-template-columns:80px 1fr 1.2fr"]{grid-template-columns:48px 1fr!important;gap:16px!important} div[style*="grid-template-columns:80px 1fr 1.2fr"] > p{grid-column:2} .mobile-stack{grid-template-columns:1fr!important;gap:32px!important} .price-line{flex-wrap:wrap;row-gap:6px!important} section > div{padding-left:20px!important;padding-right:20px!important} footer > div{padding-left:20px!important;padding-right:20px!important} footer > div:first-child a{min-height:48px;display:flex!important;align-items:center} form{padding:32px 20px!important} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} } /* --- Ambient wave fields ------------------------------------------------- Decorative canvas behind dark section content. The scrim is a CSS layer so text contrast never depends on which animation frame lands. See js/waves.js. Sits at z-index 0; section content must establish its own stacking context. */ .wave-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .wave-field canvas{ display:block; width:100%; height:100%; } .wave-scrim{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(64% 62% at 50% 46%, rgba(7,7,8,.86) 0%, rgba(7,7,8,.55) 45%, rgba(7,7,8,0) 78%); } /* Location heroes read left-aligned, so the scrim weights that side. */ .wave-field[data-wave="mesh"] .wave-scrim{ background:linear-gradient(100deg, rgba(7,7,8,.90) 0%, rgba(7,7,8,.66) 42%, rgba(7,7,8,.10) 78%, rgba(7,7,8,0) 100%); } /* --- Surface patterns ---------------------------------------------------- Texture for section grounds. Pure CSS: gradients and masks on a background, so there is nothing to load and nothing that can fail. All derive from --sg-forest-deep; if the green moves, they move with it. Decorative only — never carries meaning, never sits over text. */ /* Engineering paper. Default for light sections. */ .surface-grid{ background-image: linear-gradient(rgba(27,115,70,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(27,115,70,.055) 1px, transparent 1px); background-size:34px 34px; } /* A map grid — the thing being sold. Pricing and location pages. */ .surface-dots{ background-image:radial-gradient(rgba(27,115,70,.16) 1.1px, transparent 1.2px); background-size:22px 22px; } /* A chart axis. Reporting and method only, where measurement is the subject. */ .surface-ticks{ position:relative; } .surface-ticks::before, .surface-ticks::after{ content:""; position:absolute; left:0; right:0; top:0; pointer-events:none; } .surface-ticks::before{ height:14px; background-image:repeating-linear-gradient(90deg, rgba(27,115,70,.34) 0 1px, transparent 1px 12px); -webkit-mask-image:linear-gradient(#000, transparent); mask-image:linear-gradient(#000, transparent); } .surface-ticks::after{ height:26px; background-image:repeating-linear-gradient(90deg, rgba(27,115,70,.4) 0 1px, transparent 1px 60px); -webkit-mask-image:linear-gradient(#000, transparent); mask-image:linear-gradient(#000, transparent); } /* Contour map. Location pages, matching their footer contour wave. */ .surface-topo{ background-image:repeating-radial-gradient(ellipse 120% 60% at 82% 118%, rgba(27,115,70,.10) 0 1px, transparent 1px 26px); } /* Grain. Dark mid-page bands only — never behind a wave field, which has its own texture. Flat near-black reads as an unrendered element at size. */ .surface-grain{ position:relative; } .surface-grain::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* Content must clear the grain layer. */ .surface-grain > *{ position:relative; z-index:1; } /* Hero mesh field. The copy sits left in a 640px column, so the scrim is weighted that way and the terrain reads across the centre and right. Specificity note: .wave-field[data-wave="mesh"] above is (0,3,0) and would otherwise win, so this selector is deliberately heavier rather than relying on source order. */ .wave-field.wave-field--hero[data-wave] .wave-scrim{ background:linear-gradient(100deg, rgba(7,7,8,.92) 0%, rgba(7,7,8,.74) 30%, rgba(7,7,8,.34) 55%, rgba(7,7,8,.06) 80%, rgba(7,7,8,0) 100%); } @media (max-width:900px){ .wave-field.wave-field--hero[data-wave] .wave-scrim{ background:linear-gradient(180deg, rgba(7,7,8,.90) 0%, rgba(7,7,8,.76) 48%, rgba(7,7,8,.30) 80%, rgba(7,7,8,.08) 100%); } } /* On a phone the hero copy spans full width, and the service-area panel is opaque, so between them they covered the whole canvas — the terrain was only visible in the last few pixels. Open a dedicated band beneath the content and clear the scrim off it, so the grid is in shot on first view. */ @media (max-width:900px){ .hero-inner{ padding:84px 24px 260px!important; align-items:start!important; } .hero-area-note{ box-shadow:0 0 26px 10px rgba(7,7,8,.6)!important; background:rgba(7,7,8,.82)!important; } .wave-field.wave-field--hero[data-wave] .wave-scrim{ background:linear-gradient(180deg, rgba(7,7,8,.90) 0%, rgba(7,7,8,.86) 34%, rgba(7,7,8,.52) 54%, rgba(7,7,8,.10) 70%, rgba(7,7,8,0) 82%); } } @media (max-width:600px){ .hero-inner{ padding:72px 20px 300px!important; } }