/* ========================================================================== Mondo Exterior Pros — site stylesheet Direction A, "Curb to Dock". Approved 2026-09-24. Typeface: Figtree (option G), approved 2026-09-24. Casing rule: all titles and subtitles are title case. Body copy and FAQ questions stay sentence case. See 00-admin/CLIENT.md. ========================================================================== */ /* Figtree, self-hosted. Not loaded from Google's CDN: the deploy root is meant to be self-contained, and a third-party request would add a DNS lookup and a connection on the critical path plus send visitor IPs to Google. One variable file covers 400 to 800, which is every weight this site uses. */ @font-face{ font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/figtree-latin-var.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } @font-face{ font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/figtree-latin-ext-var.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --ink:#0B1A2A; --ink-2:#12283E; --ink-3:#071320; --bone:#F7F4EF; --bone-2:#EDE8E0; --amber:#D3862A; --amber-light:#EFA94A; --rule:rgba(11,26,42,.14); --rule-dk:rgba(247,244,239,.18); --body:#3A4A5A; --max:1240px; --s:clamp(1.25rem,3vw,2.5rem); --header-h:5.5rem; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bone);color:var(--ink); font-family:'Figtree',"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s)} h1,h2,h3{margin:0;line-height:1.06;letter-spacing:-.025em;font-weight:800} h1{font-size:clamp(2.1rem,4.6vw,3.7rem)} /* Must stay below the inner-page h1 (2.95rem cap) or section headings outrank the page title on every service and city page. */ h2{font-size:clamp(1.8rem,3.4vw,2.6rem)} h3{font-size:1.24rem;letter-spacing:-.01em;line-height:1.25} p{margin:0 0 1.05em} .eyebrow{ font-size:.735rem;letter-spacing:.2em;text-transform:uppercase; font-weight:700;color:var(--amber);margin:0 0 1.1rem } .eyebrow.on-dark{color:var(--amber-light)} .lede{font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--body);max-width:60ch} .lede.on-dark{color:rgba(247,244,239,.82)} /* Headings are margin:0, so a lede straight after one needs its own gap. */ h2 + .lede{margin-top:1.15rem} .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0 } .skip-link{ position:absolute;left:var(--s);top:-4rem;z-index:100;background:var(--amber); color:#1A1004;padding:.8rem 1.2rem;font-weight:700;text-decoration:none; transition:top .15s ease } .skip-link:focus{top:1rem} /* ---- buttons ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:1.05rem 2rem;border-radius:2px;border:0;cursor:pointer; font:inherit;font-weight:700;font-size:1rem;letter-spacing:.01em; text-decoration:none;transition:transform .15s ease,background .15s ease; } .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--amber);color:#1A1004} .btn-primary:hover{background:var(--amber-light)} .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} .btn-ghost.on-dark{color:var(--bone);box-shadow:inset 0 0 0 1.5px rgba(247,244,239,.5)} :focus-visible{outline:3px solid var(--amber-light);outline-offset:3px} /* ---- header ------------------------------------------------------------ Absolutely positioned against .hero, never the page, so nothing stacked above the hero can sit on top of the nav. Every page has a .hero. */ header{position:absolute;inset:0 0 auto;z-index:30;padding:1.5rem 0} .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem} .mark{text-decoration:none;color:var(--bone);line-height:1;flex:none} .mark b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em} .mark span{ display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase; color:var(--amber-light);margin-top:.32rem;font-weight:700 } .nav-links{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0} /* Full-strength bone, not a tint. The nav sits on photography, so anything under full opacity loses the bright parts of the image. */ .nav-links a{color:var(--bone);text-decoration:none;font-size:1.02rem; font-weight:700;white-space:nowrap} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--amber-light)} /* The phone lives in the list for the mobile menu only; the desktop header has its own .nav-call, so showing both would duplicate the number. */ .nav-links .nav-links-call{display:none} .nav-call{color:var(--bone);text-decoration:none;font-weight:800;font-size:1.05rem;white-space:nowrap} /* hamburger */ .nav-toggle{ display:none;background:transparent;border:0;cursor:pointer;padding:.6rem; margin:-.6rem -.6rem -.6rem 0;color:var(--bone) } .nav-toggle span{ display:block;width:26px;height:2px;background:currentColor;margin:5px 0; transition:transform .2s ease,opacity .2s ease } .nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-open .nav-toggle span:nth-child(2){opacity:0} .nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:1080px){ .nav-toggle{display:block} .nav-links{ position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0; background:var(--ink-2);padding:.5rem var(--s) 1.25rem; border-top:1px solid var(--rule-dk);display:none } .nav-open .nav-links{display:flex} .nav-links a{display:block;padding:.95rem 0;font-size:1rem; border-bottom:1px solid var(--rule-dk)} .nav-call{display:none} .nav-links .nav-links-call{display:block;color:var(--amber-light);font-weight:800} } /* ---- hero -------------------------------------------------------------- */ .hero{position:relative;display:flex;align-items:flex-end;background:var(--ink);overflow:hidden} .hero-home{min-height:min(92vh,880px)} .hero-inner-page{min-height:min(64vh,620px)} .hero-img{position:absolute;inset:0} .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 58%} /* Three layers, each doing one job: 1. a top band so the nav always has contrast, whatever the photo does up there (several heroes are bright sky on the right, exactly where the links sit) 2. a bottom lift to keep the trust strip readable 3. the diagonal that carries the headline */ .hero-scrim{position:absolute;inset:0; background: linear-gradient(to bottom,rgba(9,21,34,.82) 0%,rgba(9,21,34,.55) 45%,rgba(9,21,34,0) 100%) no-repeat top / 100% 9.5rem, linear-gradient(to top,rgba(11,26,42,.9) 0%,rgba(11,26,42,.45) 22%,rgba(11,26,42,0) 46%), linear-gradient(105deg,rgba(11,26,42,.93) 0%,rgba(11,26,42,.78) 38%,rgba(11,26,42,.28) 72%,rgba(11,26,42,.42) 100%)} .hero-inner{position:relative;z-index:2;width:100%;padding:11rem 0 0} .hero-inner-page .hero-inner{padding:10rem 0 3.5rem} .hero h1{color:var(--bone);max-width:18ch} /* Inner-page titles carry the service plus the city, so they run much longer than the homepage's. Same treatment, a step down in size and a wider measure. */ .hero-inner-page h1{font-size:clamp(1.95rem,3.8vw,2.95rem);max-width:21ch} /* Keeps "Chattanooga, TN" from orphaning "TN" onto a line of its own. Released below 600px, where the phrase is wider than the screen. */ .hero h1 em{font-style:normal;color:var(--amber-light);white-space:nowrap} @media(max-width:600px){.hero h1 em{white-space:normal}} /* .stacked sets its own line breaks in the markup rather than letting the measure decide, so each phrase reads as a unit. The city line steps down a little so it sits under the service name instead of competing with it. */ .hero h1.stacked{max-width:none} .hero h1.stacked em{font-size:.84em;line-height:1.1} .hero .lede{margin:1.6rem 0 2.2rem} .hero-inner-page .lede{margin-bottom:0} .hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center} .hero-tagline{ font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700; color:var(--amber-light);margin:0 0 1.4rem } .trust{margin-top:4.5rem;border-top:1px solid var(--rule-dk); display:grid;grid-template-columns:repeat(4,1fr)} .trust div{padding:1.4rem 1.4rem 1.6rem;border-left:1px solid var(--rule-dk)} .trust div:first-child{border-left:0;padding-left:0} .trust b{display:block;color:var(--bone);font-size:1.02rem;font-weight:800;letter-spacing:-.01em} .trust span{display:block;color:rgba(247,244,239,.62);font-size:.8rem;margin-top:.2rem} @media(max-width:820px){ .trust{grid-template-columns:repeat(2,1fr)} .trust div{border-left:0;padding-left:0} .hero-inner{padding-top:8.5rem} .hero-inner-page .hero-inner{padding:8.5rem 0 2.5rem} } /* ---- quote bar --------------------------------------------------------- */ .quotebar{background:var(--ink-2);color:var(--bone);padding:1.5rem 0} .quotebar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem} .quotebar p{margin:0;font-weight:700;font-size:1.08rem;letter-spacing:-.01em} .quotebar small{display:block;font-weight:400;color:rgba(247,244,239,.6);font-size:.85rem; letter-spacing:0;margin-top:.15rem} /* ---- sections ---------------------------------------------------------- */ section{padding:clamp(4rem,8vw,7rem) 0} .sec-head{max-width:62ch;margin-bottom:clamp(2.4rem,4vw,3.4rem)} .band-2{background:var(--bone-2)} .band-dark{background:var(--ink);color:var(--bone)} .band-dark h2,.band-dark h3{color:var(--bone)} /* ---- journey band (the "curb to dock" device) -------------------------- */ /* Real gaps, not the 1px-gap-over-a-tinted-grid trick, which butted the four images into one continuous strip. Cards get the lighter bone so they still read as cards against the bone-2 band once they are separated. */ .journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem)} .jcard{background:var(--bone);border:1px solid var(--rule);position:relative;overflow:hidden} .jcard figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ink)} .jcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .jcard:hover img{transform:scale(1.045)} .jcard-body{padding:1.5rem 1.4rem 1.8rem} .jnum{font-size:.7rem;letter-spacing:.2em;font-weight:800;color:var(--amber); display:block;margin-bottom:.5rem} .jcard p{font-size:.93rem;color:var(--body);margin:.5rem 0 0} @media(max-width:940px){.journey-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.journey-grid{grid-template-columns:1fr}} /* ---- service cards ----------------------------------------------------- */ .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,2rem)} .svc{ position:relative;display:flex;flex-direction:column;min-height:390px; background:var(--ink);overflow:hidden;text-decoration:none;color:var(--bone); } .svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s ease;opacity:.72} .svc:hover img{transform:scale(1.05)} .svc::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(11,26,42,.95) 8%,rgba(11,26,42,.55) 48%,rgba(11,26,42,.15) 100%)} .svc-body{position:relative;z-index:2;margin-top:auto;padding:1.9rem} .svc h3{color:var(--bone)} .svc p{font-size:.93rem;color:rgba(247,244,239,.78);margin:.55rem 0 0;max-width:38ch} .svc-more{display:inline-block;margin-top:1rem;font-size:.82rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--amber-light)} @media(max-width:820px){.svc-grid{grid-template-columns:1fr}} /* ---- split feature (dock band, and reused on inner pages) -------------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .split-rev{grid-template-columns:.95fr 1.05fr} .split-figure{margin:0;position:relative} /* 3/4 suits portrait sources. Landscape sources need a landscape frame or cover crops the sides away and keeps every inch of sky. */ .split-figure img{aspect-ratio:3/4;object-fit:cover;width:100%} .split-figure.wide img{aspect-ratio:4/3} .split-figure.short img{aspect-ratio:16/9} /* .fill matches the height of the text column beside it instead of imposing its own ratio. The source has to be pre-cropped for a tall-ish frame, because cover keeps the full vertical range of a landscape photo. Mobile is a single column with nothing to match, so it falls back to a fixed ratio. */ .split-figure.fill img{aspect-ratio:16/10} @media(min-width:861px){ .split-figure.fill{align-self:stretch;display:flex} .split-figure.fill img{height:100%;aspect-ratio:auto} } .checklist{list-style:none;padding:0;margin:2rem 0 0; display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.5rem} .checklist li{padding:.62rem 0;border-bottom:1px solid var(--rule-dk);font-size:.94rem; color:rgba(247,244,239,.84)} .checklist.on-light li{border-bottom-color:var(--rule);color:var(--body)} .callout{ margin-top:2.2rem;padding:1.1rem 1.3rem;border-left:3px solid var(--amber); background:rgba(211,134,42,.1);font-size:.93rem;color:rgba(247,244,239,.88) } .callout.on-light{background:rgba(211,134,42,.12);color:var(--body)} @media(max-width:860px){ .split,.split-rev{grid-template-columns:1fr} .checklist{grid-template-columns:1fr} } /* Wide four-up variant for the "what we clean" bands. Declared as a class, not an inline style, so the responsive steps below can actually take effect. */ .checklist.cols-4{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.checklist.cols-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.checklist.cols-4{grid-template-columns:1fr}} /* ---- numbered why row -------------------------------------------------- */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule)} .why-item{background:var(--bone);padding:2.1rem 1.8rem 2.3rem} .band-2 .why-item{background:var(--bone-2)} .why-item b{display:block;font-size:2.4rem;font-weight:800;color:var(--amber); letter-spacing:-.04em;line-height:1;margin-bottom:.9rem} .why-item h3{margin-bottom:.5rem} .why-item p{font-size:.92rem;color:var(--body);margin:0} @media(max-width:860px){.why-grid{grid-template-columns:1fr}} /* ---- before / after ---------------------------------------------------- */ .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)} .ba-grid.two{grid-template-columns:repeat(2,1fr)} .ba-item figure{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--ink)} .ba-item img{aspect-ratio:1/1;object-fit:cover;width:100%} .ba-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; margin-top:.75rem;font-size:.82rem} .ba-cap b{font-weight:700} .ba-cap span{color:var(--body);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase} @media(max-width:860px){.ba-grid,.ba-grid.two{grid-template-columns:1fr}} /* ---- reviews ----------------------------------------------------------- */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)} .rev{background:var(--bone-2);padding:2rem 1.8rem;border-top:3px solid var(--amber)} .band-2 .rev{background:var(--bone)} .rev p{font-size:1rem;color:var(--ink);margin:0 0 1.2rem} .rev cite{font-style:normal;font-size:.85rem;font-weight:700} .stars{color:var(--amber);letter-spacing:.14em;margin-bottom:.9rem;font-size:.95rem} @media(max-width:860px){.rev-grid{grid-template-columns:1fr}} /* ---- service area ------------------------------------------------------ */ .area{background:var(--ink-2);color:var(--bone)} .area h2{color:var(--bone)} .area-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start} .city-list{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.5rem;padding:0;list-style:none} .city-list li{margin:0} .city{display:inline-block;padding:.6rem 1.05rem;background:rgba(247,244,239,.07); border:1px solid var(--rule-dk);font-size:.9rem;font-weight:600;text-decoration:none} a.city:hover{background:rgba(247,244,239,.16)} .city.primary{background:var(--amber);color:#1A1004;border-color:var(--amber)} @media(max-width:860px){.area-grid{grid-template-columns:1fr}} /* ---- faq ---------------------------------------------------------------- Cards on a tinted band rather than hairline rows on the page background, which read as unstructured text. Two columns so the section is not one long ribbon down the middle of the page. */ .faq{background:var(--bone-2)} /* Two independent stacks, not a 2-up grid of items. In a grid the two columns share row heights, so opening a card on the left leaves a dead gap on the right. Separate stacks let each column close up on its own. */ .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem;align-items:start} .faq-col{display:flex;flex-direction:column;gap:1rem} @media(max-width:820px){ .faq-grid{grid-template-columns:1fr;gap:1rem} } .faq details{ background:var(--bone);border:1px solid var(--rule); border-left:3px solid transparent; transition:border-left-color .18s ease,box-shadow .18s ease } .faq details:hover{border-left-color:rgba(211,134,42,.45)} .faq details[open]{ border-left-color:var(--amber); box-shadow:0 8px 26px rgba(11,26,42,.09) } .faq summary{ padding:1.15rem 3.1rem 1.15rem 1.25rem;cursor:pointer;list-style:none; position:relative;font-weight:700;font-size:1rem;letter-spacing:-.01em; line-height:1.35 } .faq summary::-webkit-details-marker{display:none} /* Circled marker so the control reads as a control, not punctuation. */ .faq summary::after{ content:"+";position:absolute;right:1rem;top:1.05rem; width:1.6rem;height:1.6rem;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(211,134,42,.14);color:var(--amber); font-size:1.15rem;font-weight:700;line-height:1; transition:background .18s ease,color .18s ease } .faq details[open] summary::after{ content:"\2013";background:var(--amber);color:#1A1004 } .faq p{ padding:0 1.5rem 1.3rem 1.25rem;color:var(--body);margin:0;font-size:.95rem; line-height:1.62 } /* ---- final cta / form -------------------------------------------------- */ .final{background:var(--ink);color:var(--bone)} .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)} .final h2{color:var(--bone)} .form{background:var(--bone);padding:clamp(1.8rem,3vw,2.6rem);color:var(--ink)} .form h3{margin-bottom:1.5rem} /* Floating labels. The label sits inside the control while it is empty and unfocused, then shrinks to a caption at the top once there is content. Keeps a real