s now and this rule
no longer selects an anchor. */
.mobile-nav .mobile-nav__label {
display: block; font-family: Poppins, sans-serif;
padding: 18px 0 6px; border-bottom: 0; color: var(--muted);
font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
/* Force a 3-up grid where a 6-card section would otherwise land 4 + 2. */
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards--3 { grid-template-columns: 1fr; } }
/* --- Footer refinements -------------------------------------------------
Four balanced columns instead of one very long link list, hours condensed
to the two lines they actually need, and the phone number given weight.
---------------------------------------------------------------------- */
.footer-grid { grid-template-columns: 1.5fr 1fr 1.15fr 1.05fr; }
.footer-meta { font-size: .86rem; color: rgba(255,255,255,.5); margin-top: -.35rem; }
.footer-logo { padding: 11px 15px; }
.footer-phone {
display: inline-block; font-family: Poppins, sans-serif; font-weight: 600;
font-size: 1.16rem; color: #fff !important; text-decoration: none; margin-bottom: 1rem;
}
.footer-phone:hover { text-decoration: underline; }
/* Sits directly under the phone in the footer Contact column. Deliberately a
step down in weight from the phone: calling still gets someone the fastest
answer, and the address is the alternative for people who would rather not. */
.footer-email {
display: block; font-size: .95rem; color: rgba(255,255,255,.82) !important;
text-decoration: none; margin: -.55rem 0 1rem;
/* No break-word: that split the domain mid-name. The in the markup
sits after the @, so a narrow phone breaks there instead. */
overflow-wrap: normal;
}
.footer-email:hover { text-decoration: underline; color: #fff !important; }
/* On a narrow phone the footer is two columns, leaving each about 170px, and
the address wrapped mid-word as "info@ntllandscape.co / m". A step down in
size keeps it on one line; break-word above stays only as a last resort. */
@media (max-width: 560px) { .footer-email { font-size: .84rem; } }
.site-footer .hours { margin-bottom: 1.15rem; }
.footer-actions { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1rem !important; }
.footer-bottom a { color: rgba(255,255,255,.55); }
@media (max-width: 980px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Contact column is narrow, so stack each hours row instead of letting
"8:00 AM - 5:00 PM" wrap across three lines. */
.site-footer .hours { display: block; }
.site-footer .hours span:nth-child(odd) {
display: block; font-size: .78rem; letter-spacing: .04em;
color: rgba(255,255,255,.5); text-transform: uppercase;
}
.site-footer .hours span:nth-child(even) {
display: block; text-align: left; white-space: nowrap;
color: rgba(255,255,255,.85); margin-bottom: .6rem;
}
/* Keep the footer two columns even on a phone. Four stacked columns made it
about 1300px tall; two keeps it readable and roughly a third shorter. */
@media (max-width: 640px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
.footer-bottom { flex-direction: column; gap: 8px; }
}
/* The logo must never be squeezed out of the header by a long nav.
(Adding a seventh nav item once shrank it to zero width.) */
.logo, .logo img, .header-right { flex: none; }
/* Subheadings inside the Services dropdown (Residential / Commercial). */
.dropdown-menu__label {
display: block; padding: 12px 13px 5px; font-family: Poppins, sans-serif;
font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); pointer-events: none; user-select: none;
}
.dropdown-menu__label ~ .dropdown-menu__label {
border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px;
}
/* =========================================================
Mobile fixes
Found by auditing every page at 390px and 360px wide.
========================================================= */
/* 1. Buttons ------------------------------------------------------------
.btn is white-space:nowrap, which is right on a desktop but pushed
several pages sideways on a phone whenever a label was long. Let them
wrap on small screens and never exceed their container. */
.btn { max-width: 100%; }
@media (max-width: 720px) {
.btn { white-space: normal; text-align: center; line-height: 1.35; }
.btn--lg { padding: .95rem 1.5rem; font-size: 1rem; }
}
/* 2. Wide tables become stacked cards ------------------------------------
Six columns cannot be read in a 342px scroll box. Below 720px each row
becomes its own card and every cell is labelled from its column heading
(the data-label attribute), so nothing scrolls sideways at all. */
@media (max-width: 720px) {
.wtable-wrap { overflow: visible; }
.wtable { min-width: 0; border-collapse: separate; border-spacing: 0; background: none; }
.wtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wtable tbody tr {
display: block; background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
box-shadow: var(--shadow);
}
.wtable tbody th[scope="row"] {
display: block; border: 0; padding: 0 0 10px;
font-family: Poppins, sans-serif; font-size: 1.06rem; color: var(--ink);
}
.wtable td { display: block; border: 0; padding: 7px 0 0; }
.wtable td::before {
content: attr(data-label); display: block; margin-bottom: 1px;
font-family: Poppins, sans-serif; font-size: .7rem; font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.wtable td:empty { display: none; }
/* group heading rows inside the plant palette */
.wtable tbody tr.wtable__group {
background: none; border: 0; box-shadow: none; padding: 0;
margin: 26px 0 12px;
}
.wtable tbody tr.wtable__group th {
display: block; padding: 9px 14px; border: 0; border-radius: var(--radius-sm);
font-family: Poppins, sans-serif; font-size: .78rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.wtable caption { padding-top: 4px; }
}
/* 3. Footer links were 17px tall - too small to tap reliably. */
@media (max-width: 640px) {
.site-footer li { margin-bottom: 0; }
.site-footer li a { display: block; padding: .48rem 0; }
.footer-actions { padding-top: .6rem !important; }
}
/* 4. Grid children default to min-width:auto, so a single wide child can push
its whole track past the viewport. This is what made the winterization
steps overflow on a phone. */
.steps > *, .cards > *, .split > *, .footer-grid > *, .area-grid > *, .creds > * { min-width: 0; }
@media (max-width: 720px) {
.step { padding: 20px 18px; }
/* the flex row forced a wide min-content; stacking reads better anyway */
.step h3 { display: block; }
.step h3 .num { display: block; margin-bottom: 3px; }
.callout { padding: .85rem 1rem; }
.wtable thead { display: none; }
}
/* 5. On a phone the phone number is the most important thing to be able to
hit. Inline tel: links were 16-19px tall. Breadcrumbs got the same
treatment. (Ordinary links inside prose are left alone - they should
sit on the text baseline, not become buttons.) */
@media (max-width: 720px) {
a[href^="tel:"] { display: inline-block; padding: .34rem 0; }
.crumbs a { display: inline-block; padding: .3rem 0; }
.footer-bottom a[href^="tel:"] { padding: .2rem 0; }
}
/* 6. On a phone, paired buttons should be full width and equal rather than
each sized to its own label - a narrow "Call" next to a wide "Get an
Estimate" looks accidental. */
@media (max-width: 640px) {
.hero__cta, .cta-band .btn-row, .btn-row { flex-direction: column; align-items: stretch; }
.hero__cta .btn, .cta-band .btn-row .btn, .btn-row .btn { width: 100%; }
}
/* =========================================================
Sticky call bar (phones) + seasonal strip
========================================================= */
.callbar { display: none; }
/* while the menu is open it would sit on top of the menu, and the menu already
ends with a phone number and an estimate button */
body.menu-open .callbar { display: none !important; }
@media (max-width: 720px) {
.callbar {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.97);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 18px rgba(15,42,51,.10);
}
.callbar a {
display: flex; align-items: center; justify-content: center; gap: .45rem;
font-family: Poppins, sans-serif; font-weight: 600; font-size: .95rem;
padding: .8rem .6rem; border-radius: 999px; text-decoration: none;
border: 2px solid transparent; line-height: 1;
}
.callbar__call { background: var(--accent); color: #fff; }
.callbar__quote { background: transparent; color: var(--ink); border-color: var(--line); }
/* keep the footer clear of the bar */
body { padding-bottom: 74px; }
}
/* Seasonal strip - hidden until site.js fills it, so it never shows empty. */
.seasonal { background: var(--ink); color: rgba(255,255,255,.85); font-size: .95rem; }
.seasonal[hidden] { display: none; }
.seasonal .wrap {
padding-top: 14px; padding-bottom: 14px;
display: flex; align-items: center; justify-content: center;
gap: 10px 14px; flex-wrap: wrap; text-align: center;
}
.seasonal__tag {
font-family: Poppins, sans-serif; font-size: .7rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--ink); background: #fff; border-radius: 999px; padding: .3rem .7rem;
}
.seasonal__link { color: #fff; font-weight: 600; white-space: nowrap; }
.seasonal__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
.seasonal .wrap { flex-direction: column; gap: 8px; }
}
/* ---------------------------------------------------------------------------
Games (Yard Smarts "just for fun" section)
Each game is a self-contained full-viewport app in games/, so it is iframed.
Do NOT reuse .embed-shell here - its negative margin exists only to crop
ClickUp's "Report Abuse" link and would chop the bottom off a game.
--------------------------------------------------------------------------- */
.games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.game {
background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px 22px 18px;
display: flex; flex-direction: column; min-width: 0;
}
.game h3 { margin: 0 0 .4rem; }
.game p { margin: 0 0 16px; }
.game > p:first-of-type { flex: 1 1 auto; }
.game__stage, .game__frame {
display: block; width: 100%; max-width: 440px; height: 600px;
margin: 0 auto; border: 0; border-radius: var(--radius-sm);
background: #123b0c; overflow: hidden;
}
/* the unplayed poster is shorter than the frame it holds once played - it only
has to fit a button, and three tall empty panels would dominate the section.
site.js puts the iframe INSIDE the poster, so the poster must give up its own
height and its overflow clip at that point or it crops the game. */
.game__stage { height: 420px; }
.game__stage.is-playing {
display: block; height: auto; overflow: visible;
background: none; border-radius: 0; max-width: none;
}
/* the poster the visitor clicks to start - the iframe replaces it in site.js */
.game__stage {
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(circle at 50% 34%, rgba(143,212,92,.20), transparent 62%),
repeating-linear-gradient(0deg, #16490f 0 22px, #123b0c 22px 44px);
}
.game__play {
font-family: Poppins, sans-serif; font-weight: 600; font-size: 1rem;
color: #123b0c; background: #fff; border: 0; border-radius: 999px;
padding: .85rem 1.6rem; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28);
display: inline-flex; align-items: center; gap: .5rem; line-height: 1;
max-width: 86%; text-align: center;
}
.game__play::before { content: "\25B6"; font-size: .8em; }
.game__play:hover { background: var(--accent); color: #fff; }
.game__more { margin: 14px auto 0; }
.game__note { display: none; margin: 10px 0 0; font-size: .85rem; text-align: center; }
@media (max-width: 1080px) {
.games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.games { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.game { padding: 18px 14px 14px; }
.game__frame { height: 600px; }
/* stacked on a phone, so the unplayed poster does not need to fill a column */
.game__stage { height: 320px; }
.game__note { display: block; }
}
@media (max-width: 380px) {
.game__frame { height: 560px; }
}
/* ---------------------------------------------------------------------------
City-limits map (city pages). SVGs are generated by _genmaps.py from Census
boundary data - see the README. They are plain ![]()
, so no script runs.
--------------------------------------------------------------------------- */
.citymap { margin: 40px 0 0; }
.citymap img {
display: block; width: 100%; max-width: 900px; margin: 0 auto;
border: 1px solid var(--line); border-radius: var(--radius); background: #F6F9F8;
cursor: zoom-in;
}
/* the lightbox sizes gallery photos to fit; a map wants the full width it can get */
/* An SVG has no intrinsic pixel size, so max-width alone leaves the map tiny
in the lightbox. Give it an explicit width and let the height follow. */
.lightbox img[src*="/maps/"] {
width: 96vw; max-width: 96vw; height: auto; background: #F6F9F8;
flex: none; /* .lightbox is a flex container - without this the map is shrunk
to share the row with the close button instead of filling it */
}
.citymap figcaption {
max-width: 900px; margin: 12px auto 0; font-size: .88rem; color: var(--muted);
text-align: center; line-height: 1.6;
}
@media (max-width: 720px) {
.citymap { margin-top: 28px; }
.citymap figcaption { font-size: .82rem; text-align: left; }
}
/* ---------------------------------------------------------------------------
Satellite view (city pages). Google's iframe is only created on click - see
site.js - so no third-party request happens for visitors who never ask.
--------------------------------------------------------------------------- */
.satmap { max-width: 900px; margin: 22px auto 0; }
.satmap__stage {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 26px 18px;
border: 1px dashed var(--line); border-radius: var(--radius); background: var(--white);
}
.satmap__stage.is-loaded { display: block; padding: 0; border-style: solid; overflow: hidden; }
.satmap__play {
font-family: Poppins, sans-serif; font-weight: 600; font-size: .98rem;
color: var(--ink); background: #fff; border: 1px solid var(--line);
border-radius: 999px; padding: .75rem 1.4rem; cursor: pointer; line-height: 1;
}
.satmap__play:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.satmap__note { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
.satmap__frame { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 720px) {
.satmap__frame { height: 340px; }
}
/* =========================================================
NTL-Ai assistant
Layering: header 60, call bar 70, launcher 75, panel 150,
lightbox 200. The panel deliberately sits below the lightbox
so a map opened behind it still wins.
========================================================= */
.ntlai-launch {
position: fixed; right: 18px; bottom: 18px; z-index: 75;
display: inline-flex; align-items: center; gap: .5rem;
font-family: Poppins, sans-serif; font-weight: 600; font-size: .95rem;
padding: .78rem 1.15rem; border: 0; border-radius: 999px; cursor: pointer;
background: var(--accent); color: #fff; box-shadow: var(--shadow-lg);
transition: transform .15s ease, background .15s ease;
}
.ntlai-launch:hover { background: var(--accent-dk); transform: translateY(-1px); }
.ntlai-launch:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ntlai-launch svg { flex: none; }
.ntlai-launch[hidden] { display: none; }
/* Above the sticky call bar, not under it. The call bar is 62px plus its own
safe-area padding, and body already carries 74px of bottom padding. */
@media (max-width: 720px) {
.ntlai-launch {
right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
padding: .7rem 1rem; font-size: .9rem;
}
}
.ntlai {
position: fixed; z-index: 150; right: 18px; bottom: 18px;
width: 396px; max-width: calc(100vw - 36px);
height: 580px; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
display: none; flex-direction: column; overflow: hidden;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ntlai.open { display: flex; }
/* Full screen on phones. A 396px panel floating over a 360px viewport is
unusable, and the call bar would poke through the bottom of it. */
@media (max-width: 720px) {
.ntlai {
right: 0; bottom: 0; left: 0; top: 0;
width: 100%; max-width: none; height: 100%; max-height: none;
border-radius: 0; border: 0;
}
body.ntlai-open .callbar { display: none !important; }
}
html.ntlai-open, body.ntlai-open { overflow: hidden; }
@media (min-width: 721px) { html.ntlai-open, body.ntlai-open { overflow: auto; } }
.ntlai__top {
display: flex; align-items: center; gap: .7rem; flex: none;
padding: 13px 14px; background: var(--ink); color: #fff;
}
.ntlai__mark {
width: 34px; height: 34px; flex: none; border-radius: 9px;
background: var(--accent); display: grid; place-items: center;
}
.ntlai__who { flex: 1; min-width: 0; line-height: 1.25; }
.ntlai__who b { font-family: Poppins, sans-serif; font-size: .98rem; display: block; }
.ntlai__who span { font-size: .78rem; color: rgba(255,255,255,.72); }
.ntlai__x {
flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
background: rgba(255,255,255,.12); color: #fff; font-size: 1.15rem; line-height: 1;
}
.ntlai__x:hover { background: rgba(255,255,255,.22); }
.ntlai__log {
flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain; padding: 16px 14px; background: var(--sand);
display: flex; flex-direction: column; gap: 12px;
}
.ntlai__msg { max-width: 88%; font-size: .94rem; line-height: 1.5; }
.ntlai__msg p { margin: 0 0 .55rem; }
.ntlai__msg p:last-child { margin-bottom: 0; }
.ntlai__msg ul { margin: .3rem 0 .55rem; padding-left: 1.1rem; }
.ntlai__msg li { margin-bottom: .2rem; }
.ntlai__msg a { color: inherit; }
.ntlai__msg--bot {
align-self: flex-start; background: var(--white); color: var(--ink-soft);
border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 11px 13px;
}
.ntlai__msg--bot a { color: var(--accent-dk); }
.ntlai__msg--me {
align-self: flex-end; background: var(--accent); color: #fff;
border-radius: 14px 14px 4px 14px; padding: 11px 13px;
}
.ntlai__msg--sys {
align-self: center; max-width: 100%; text-align: center;
font-size: .82rem; color: var(--muted);
}
.ntlai__status {
align-self: flex-start; display: flex; align-items: center; gap: .45rem;
font-size: .84rem; color: var(--muted);
}
.ntlai__dots { display: inline-flex; gap: 3px; }
.ntlai__dots i {
width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
animation: ntlai-b 1.2s infinite ease-in-out;
}
.ntlai__dots i:nth-child(2) { animation-delay: .18s; }
.ntlai__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ntlai-b { 0%,60%,100% { opacity:.25; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ntlai__dots i { animation: none; opacity: .5; } }
.ntlai__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ntlai__chips button {
font: inherit; font-size: .84rem; cursor: pointer; padding: .42rem .7rem;
background: var(--white); color: var(--accent-dk);
border: 1px solid var(--line); border-radius: 999px;
}
.ntlai__chips button:hover { border-color: var(--accent); background: var(--accent-lt); }
.ntlai__foot { flex: none; border-top: 1px solid var(--line); background: var(--white); }
.ntlai__row { display: flex; gap: 8px; align-items: flex-end; padding: 10px 10px 6px; }
/* Photo attachment. The clip sits at the same 40px as the send button so the
composer keeps a single baseline whether or not anything is attached. */
.ntlai__clip {
flex: none; width: 40px; height: 40px; border: 1px solid var(--line);
border-radius: 10px; cursor: pointer; background: var(--sand);
color: var(--muted); display: grid; place-items: center;
}
.ntlai__clip:hover { color: var(--accent); border-color: var(--accent); background: var(--white); }
.ntlai__clip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ntlai__thumbs { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 10px 0; }
.ntlai__thumb { position: relative; width: 56px; height: 56px; }
.ntlai__thumb img {
width: 100%; height: 100%; object-fit: cover;
border-radius: 8px; border: 1px solid var(--line); display: block;
}
.ntlai__thumb button {
position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
border: 0; border-radius: 50%; cursor: pointer; background: var(--ink); color: #fff;
font-size: 14px; line-height: 18px; display: grid; place-items: center;
}
.ntlai__thumb button:hover { background: #b3261e; }
.ntlai__in {
flex: 1; min-width: 0; font: inherit; font-size: .94rem; resize: none;
max-height: 110px; padding: .6rem .7rem; color: var(--ink-soft);
border: 1px solid var(--line); border-radius: 10px; background: var(--sand);
}
.ntlai__in:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--white); }
.ntlai__send {
flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
background: var(--accent); color: #fff; display: grid; place-items: center;
}
.ntlai__send:hover:not(:disabled) { background: var(--accent-dk); }
.ntlai__send:disabled { opacity: .45; cursor: default; }
.ntlai__fine {
margin: 0; padding: 0 12px 10px; font-size: .74rem; color: var(--muted); text-align: center;
}
.ntlai__fine a { color: var(--muted); }