/* ============================================================================= Stone Elegance — shared stylesheet for the static sub-pages. The home page (index.html) is a Design Canvas file and styles itself inline. These pages are plain static HTML on purpose: the copy must be in the markup before any script runs, because they exist to be indexed. Visual language mirrors the home page exactly — same brand tokens, same Montserrat/Archivo pairing, same eyebrow + italic-gold-headline device. ============================================================================= */ :root{ --paper:#FAF9F7; --paper-2:#F4F2EE; --paper-3:#F1EFEC; --ink:#121212; --ink-2:#0D0D0D; --ink-3:#141414; --ink-soft:rgba(23,17,14,.78); --ink-mute:rgba(23,17,14,.7); --moss:#4E5738; --moss-lift:#63704A; --gold:#C8912F; --gold-soft:#E2B866; --gold-deep:#8A5F18; --chalk:#F4F2EE; --line:rgba(18,18,18,.12); --line-dark:rgba(244,242,238,.16); --shell:clamp(20px,5vw,64px); --sect:clamp(72px,10vw,140px); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink); font-family:Archivo,system-ui,-apple-system,sans-serif;font-weight:400; line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--moss);color:var(--chalk)} :focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px} input,select,textarea,button{font-family:inherit} /* --- cross-document page transitions -------------------------------------- Pure progressive enhancement. Both the outgoing and the incoming document must carry the opt-in, so this same block is repeated in the home page's real (not its , which the runtime injects too late to be seen on the way in) and in lp/, thanks/, 404 and redirect/. Browsers without the API just navigate instantly, exactly as before. ------------------------------------------------------------------------- */ @view-transition{navigation:auto} ::view-transition-old(root){animation:pageOut .26s cubic-bezier(.4,0,1,1) both;mix-blend-mode:normal} ::view-transition-new(root){animation:pageIn .44s cubic-bezier(.22,.61,.36,1) both;mix-blend-mode:normal} @keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}} @keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* The global reduced-motion rule uses `*`, which never matches these pseudo-elements — they have to be switched off by name. */ @media (prefers-reduced-motion: reduce){ ::view-transition-old(root),::view-transition-new(root){animation-duration:.001ms} } h1,h2,h3,h4{font-family:Montserrat,system-ui,sans-serif;text-wrap:balance} p{text-wrap:pretty} /* --- shared bits ---------------------------------------------------------- */ .wrap{max-width:1200px;margin:0 auto} .wrap-narrow{max-width:820px;margin:0 auto} .ital{font-style:italic;font-weight:300;color:var(--gold-deep)} .ital-on-dark{font-style:italic;font-weight:300;color:var(--gold-soft)} .eyebrow{display:inline-flex;align-items:center;gap:.85em;font-weight:500; font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)} .eyebrow::before{content:"";width:3px;height:13px;background:currentColor;flex:0 0 auto} .eyebrow.on-dark{color:var(--gold-soft)} .btn{display:inline-flex;align-items:center;gap:.7em;padding:18px 32px; background:var(--moss);color:var(--chalk);font-size:13px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;line-height:1.3; transition:background .4s,transform .45s,color .4s,border-color .4s} .btn:hover{background:var(--moss-lift);color:#FFF;transform:translateY(-2px)} .btn-dark{background:var(--ink-2)} .btn-dark:hover{background:var(--moss)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(18,18,18,.28)} .btn-ghost:hover{background:var(--ink-2);color:var(--chalk);border-color:var(--ink-2)} .btn-ghost-light{background:transparent;color:var(--chalk);border:1px solid rgba(244,242,238,.55)} .btn-ghost-light:hover{background:var(--chalk);color:var(--ink);border-color:var(--chalk)} .btn .arw{font-size:15px;line-height:1} .sect{position:relative;overflow:hidden;padding:var(--sect) var(--shell)} .sect-dark{background:var(--ink-2);color:var(--chalk)} .sect-alt{background:var(--paper-3)} .sect-head{display:flex;flex-direction:column;align-items:center;text-align:center; gap:18px;max-width:1200px;margin:0 auto 46px;padding-bottom:34px; border-bottom:1px solid var(--line)} .sect-dark .sect-head{border-bottom-color:var(--line-dark)} .sect-head h2{margin:0;font-weight:700;font-size:clamp(27px,3.6vw,46px); line-height:1.2;letter-spacing:-.02em} .sect-head p{margin:0;max-width:58ch;font-size:15px;color:var(--ink-mute)} .sect-dark .sect-head p{color:rgba(244,242,238,.78)} .sect-cta{max-width:1200px;margin:56px auto 0;text-align:center} /* --- top strip + header --------------------------------------------------- */ .top-strip{background:var(--ink-2);color:var(--chalk);font-size:12.5px; border-bottom:1px solid rgba(244,242,238,.14)} .top-strip-inner{max-width:1200px;margin:0 auto;padding:12px var(--shell); display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .top-strip a{color:rgba(244,242,238,.92);transition:color .3s} .top-strip a:hover{color:var(--gold-soft)} .top-strip .sep{width:1px;height:16px;background:rgba(244,242,238,.22)} .top-strip .grp{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .site-header{position:sticky;top:0;z-index:60;background:rgba(15,15,15,.96); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(200,145,47,.22)} .site-header-inner{max-width:1200px;margin:0 auto;padding:12px var(--shell); display:flex;align-items:center;justify-content:space-between;gap:24px} .site-logo{width:clamp(168px,17vw,215px);height:auto} .desktop-nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px); flex-wrap:wrap;margin-left:auto} .desktop-nav a{font-size:13px;letter-spacing:.06em;text-transform:uppercase; color:rgba(244,242,238,.82);transition:color .3s} .desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--chalk)} .desktop-nav a[aria-current="page"]{color:var(--gold-soft)} .desktop-nav .btn{padding:14px 24px;font-size:12.5px} .desktop-nav .btn:hover{transform:none} .menu-btn{display:none} /* Services dropdown. The ::after is an invisible bridge across the gap between the trigger and the panel, so the pointer never crosses dead space — done with a pseudo-element rather than padding, which would make the header taller. */ .nav-has-drop{position:relative;display:inline-flex;align-items:center} .nav-has-drop::after{content:"";position:absolute;top:100%;left:-18px;right:-18px;height:16px} .nav-has-drop>a{display:inline-flex;align-items:center;gap:.45em} .nav-caret{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg); transition:transform .3s} .nav-has-drop:hover .nav-caret,.nav-has-drop:focus-within .nav-caret{transform:translateY(1px) rotate(225deg)} .nav-drop{position:absolute;top:calc(100% + 14px);left:-18px;z-index:70;min-width:262px;padding:8px 0; background:rgba(15,15,15,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(226,184,102,.24);box-shadow:0 26px 64px rgba(0,0,0,.5); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .28s cubic-bezier(.22,.61,.36,1),transform .28s cubic-bezier(.22,.61,.36,1),visibility .28s} .nav-has-drop:hover .nav-drop,.nav-has-drop:focus-within .nav-drop{opacity:1;visibility:visible;transform:none} .nav-drop a{display:block;padding:12px 22px;font-size:13.5px;letter-spacing:.02em; text-transform:none;color:rgba(244,242,238,.84);border-left:2px solid transparent; transition:background .25s,color .25s,border-color .25s} .nav-drop a:hover,.nav-drop a:focus-visible{background:rgba(78,87,56,.55);color:#FFF;border-left-color:var(--gold-soft)} .nav-drop a[aria-current="page"]{color:var(--gold-soft);border-left-color:var(--gold-soft)} .nav-drop .divider{margin:8px 0;border-top:1px solid rgba(244,242,238,.12)} .mobile-menu-panel{display:none} .mobile-menu-panel[data-open="true"]{display:block} /* --- hero ----------------------------------------------------------------- */ .page-hero{position:relative;overflow:hidden;color:var(--chalk); padding:clamp(74px,9vw,120px) var(--shell) clamp(66px,8vw,110px)} .page-hero>.hero-bg{position:absolute;inset:0;z-index:0} .page-hero>.hero-bg img{width:100%;height:100%;object-fit:cover} .page-hero>.hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(9,10,8,.9),rgba(9,10,8,.72) 55%,rgba(9,10,8,.62))} .page-hero .inner{position:relative;z-index:2;max-width:1200px;margin:0 auto} .page-hero h1{margin:.5em 0 .45em;max-width:19ch;font-weight:600; font-size:clamp(30px,4.6vw,58px);line-height:1.08;letter-spacing:-.022em; text-shadow:0 2px 40px rgba(0,0,0,.35)} .page-hero .lede{margin:0;max-width:62ch;font-size:clamp(14.5px,1.4vw,17px); font-weight:300;line-height:1.75;color:rgba(244,242,238,.88)} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin:30px 0 0;padding:0;list-style:none} .hero-trust li{position:relative;padding-left:20px;font-size:13.5px; color:rgba(244,242,238,.86)} .hero-trust li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px; background:var(--gold);transform:rotate(45deg)} /* --- breadcrumb ----------------------------------------------------------- */ .crumbs{position:relative;z-index:2;font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:rgba(244,242,238,.62)} .crumbs ol{display:flex;flex-wrap:wrap;gap:.6em;margin:0;padding:0;list-style:none} .crumbs li+li::before{content:"/";margin-right:.6em;color:rgba(244,242,238,.4)} .crumbs a{color:rgba(244,242,238,.8);border-bottom:1px solid transparent;transition:color .3s,border-color .3s} .crumbs a:hover{color:var(--gold-soft);border-bottom-color:var(--gold-soft)} .crumbs [aria-current="page"]{color:var(--gold-soft)} /* --- stats band ----------------------------------------------------------- */ .stats{background:var(--ink-3);color:var(--chalk); padding:clamp(40px,5vw,62px) var(--shell) clamp(48px,6vw,80px); border-bottom:1px solid rgba(244,242,238,.1)} .stats-grid{max-width:1200px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(28px,4vw,54px)} .stat{display:flex;flex-direction:column;gap:14px} .stat .rule{width:28px;height:2px;background:var(--gold)} .stat .num{font-family:Montserrat,system-ui,sans-serif;font-size:clamp(32px,4vw,50px); font-weight:500;letter-spacing:-.03em;line-height:.95} .stat .lbl{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:rgba(244,242,238,.55)} /* --- material feature (the page's main content block) --------------------- */ .feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:clamp(34px,5vw,72px);align-items:start;max-width:1200px;margin:0 auto} .feature h2{margin:.5em 0 .6em;font-weight:700;font-size:clamp(27px,3.3vw,44px); line-height:1.2;letter-spacing:-.02em} .feature .intro{margin:0 0 34px;font-size:16.5px;color:var(--ink-soft)} .feature-media{position:relative;margin:0} /* The ratio is held by the wrapper, never by the itself: an aspect-ratio on a replaced element loses to its intrinsic size in enough browsers that the photo ends up overflowing its slot. Same pattern the home page uses. */ .shot{overflow:hidden;background:#EDEBE6} .shot img{width:100%;height:100%;object-fit:cover;display:block} .feature-media .shot{aspect-ratio:4/5} .feature-media figcaption{margin-top:12px;font-size:12.5px;letter-spacing:.02em; color:var(--ink-mute)} .spec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px} .spec-list li{position:relative;padding-left:26px} .spec-list li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px; background:var(--gold);transform:rotate(45deg)} .spec-list strong{display:block;font-family:Montserrat,system-ui,sans-serif; font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.35;margin-bottom:5px} .spec-list p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-soft)} /* --- card grids (why / reviews / related) --------------------------------- */ .card-grid{max-width:1200px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:26px;align-items:stretch} .card{display:flex;flex-direction:column;background:var(--paper); border:1px solid var(--line);transition:transform .45s,border-color .45s} .sect-alt .card{background:var(--paper)} .card:hover{transform:translateY(-3px);border-color:rgba(78,87,56,.5)} .card-img{aspect-ratio:4/3;overflow:hidden;background:#242424} .card-img img{width:100%;height:100%;object-fit:cover; transition:transform 1.1s cubic-bezier(.22,.61,.36,1)} .card:hover .card-img img{transform:scale(1.05)} .card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:26px 24px 30px} .card-body .rule{width:26px;height:2px;background:rgba(18,18,18,.2)} .card-body h3{margin:18px 0 10px;font-weight:600;font-size:19px; letter-spacing:-.015em;line-height:1.3} .card-body p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-soft)} .card-body .more{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center; gap:12px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-deep);transition:gap .3s} .card:hover .card-body .more{gap:18px} .quote-card{padding:28px 26px 24px;background:var(--paper);border:1px solid var(--line); transition:border-color .35s,transform .35s} .quote-card:hover{border-color:rgba(78,87,56,.5);transform:translateY(-3px)} .quote-card .idx{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;background:#E6E3DD;color:var(--gold-deep); font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:12px;margin-bottom:18px} .quote-card h3{margin:0 0 12px;font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em} .quote-card p{margin:0;font-size:15.5px;line-height:1.75;color:rgba(23,17,14,.75)} /* --- process -------------------------------------------------------------- */ .steps{max-width:1000px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:44px 0} .step{display:flex;flex-direction:column;align-items:center;text-align:center} .step .dial{position:relative;width:100%;height:56px;display:flex;align-items:center;justify-content:center} .step .dial::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:var(--gold)} .step:first-child .dial::before{left:50%} .step:last-child .dial::before{right:50%} .step .dial span{position:relative;z-index:1;width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center;background:var(--gold); font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:30px;color:#181510} .step h3{margin:26px 0 12px;max-width:20ch;font-weight:600;font-size:17.5px; letter-spacing:-.01em;line-height:1.3} .step p{margin:0;max-width:36ch;font-size:14px;line-height:1.7;color:var(--ink-soft)} /* --- gallery carousel ----------------------------------------------------- */ .rail-wrap{position:relative;max-width:1200px;margin:0 auto} .rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px} .rail::-webkit-scrollbar{display:none} .rail figure{flex:0 0 clamp(232px,26vw,320px);scroll-snap-align:start;margin:0} .rail .shot{aspect-ratio:1/1;background:#242424} .rail .shot img{transition:transform 1s cubic-bezier(.22,.61,.36,1)} .rail figure:hover .shot img{transform:scale(1.06)} .rail-arrow{position:absolute;top:50%;z-index:4;width:54px;height:54px;border-radius:50%; display:flex;align-items:center;justify-content:center;border:1px solid rgba(18,18,18,.1); background:#FFF;color:var(--ink-2);box-shadow:0 18px 42px rgba(0,0,0,.32); font-size:34px;font-weight:300;line-height:1;cursor:pointer;transform:translateY(-50%); transition:background .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s} .rail-arrow:hover{background:var(--paper-2);border-color:rgba(18,18,18,.24);color:#000; transform:translateY(-50%) scale(1.07);box-shadow:0 22px 54px rgba(0,0,0,.4)} .rail-prev{left:clamp(-28px,-2vw,-12px)} .rail-next{right:clamp(-28px,-2vw,-12px)} /* --- FAQ ------------------------------------------------------------------ */ .faq-grid{max-width:1200px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(36px,6vw,80px);align-items:start} .faq-intro h2{margin:.5em 0;font-weight:700;font-size:clamp(27px,3.3vw,44px);line-height:1.22} .faq-intro p{margin:0;max-width:42ch;color:var(--ink-soft)} .faq-intro .acts{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .faq-list{display:flex;flex-direction:column;gap:14px} .faq-list details{border:1px solid var(--line);background:var(--paper);overflow:hidden} .faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 26px;font-family:Montserrat,system-ui,sans-serif;font-size:16.5px; font-weight:700;line-height:1.35;cursor:pointer;list-style:none} .faq-list summary::-webkit-details-marker{display:none} .faq-list .qmark{flex:0 0 auto;font-family:Archivo,sans-serif;font-size:24px;font-weight:300; color:var(--gold-deep);line-height:1;transition:transform .45s cubic-bezier(.32,.72,0,1)} .faq-list details[open] .qmark{transform:rotate(45deg)} .faq-list details>div{padding:0 26px 26px} .faq-list details p{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-soft)} .faq-list details p+p{margin-top:12px} /* --- about / areas -------------------------------------------------------- */ .split{max-width:1200px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(36px,6vw,80px);align-items:center} .split h2{margin:.45em 0;font-weight:700;font-size:clamp(27px,3.6vw,46px);line-height:1.22} .split p{margin:0 0 1.1em;color:var(--ink-soft)} .sect-dark .split p{color:rgba(244,242,238,.84)} .area-list{list-style:none;margin:30px 0 8px;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 22px} .area-list li{position:relative;padding-left:22px;font-size:15px;color:rgba(244,242,238,.9)} .area-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px; background:var(--gold);transform:rotate(45deg)} .city-line{margin:26px 0 0;font-size:14.5px;line-height:1.8;color:rgba(244,242,238,.72)} .map-frame{position:relative;padding:14px;background:rgba(0,0,0,.4); border:1px solid rgba(226,184,102,.22)} .map-frame iframe{display:block;width:100%;height:clamp(300px,42vh,430px);border:0; filter:grayscale(.4) contrast(1.05)} /* --- contact form --------------------------------------------------------- */ .contact-grid{max-width:1200px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(36px,6vw,80px);align-items:start} .contact-info h2{margin:.5em 0;font-weight:700;font-size:clamp(27px,3.3vw,44px);line-height:1.22} .contact-info>p{margin:0 0 28px;max-width:44ch;color:var(--ink-mute)} .contact-lines{display:flex;flex-direction:column;gap:15px} .contact-lines>*{display:flex;align-items:center;gap:14px;color:var(--ink-soft); font-size:14.5px;word-break:break-word} .contact-lines .dash{width:26px;height:1px;background:var(--gold-deep);flex:0 0 auto} .contact-lines .tel{font-size:17px;font-weight:600;color:var(--ink)} form.estimate{background:var(--paper);border:1px solid var(--line);padding:clamp(24px,3.2vw,44px)} form.estimate .fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px} form.estimate label{display:flex;flex-direction:column;gap:8px;font-size:10.5px; letter-spacing:.18em;text-transform:uppercase;color:#5F5E55;font-weight:600} form.estimate .full{margin-top:16px} form.estimate input,form.estimate select,form.estimate textarea{ border:1px solid rgba(18,18,18,.2);background:#FFF;padding:13px 14px;font-size:14.5px; color:var(--ink);outline:none;letter-spacing:0;text-transform:none;font-weight:400} form.estimate input:focus,form.estimate select:focus,form.estimate textarea:focus{border-color:var(--moss)} form.estimate textarea{resize:vertical} form.estimate button{display:flex;width:100%;justify-content:center;margin-top:24px;border:0;cursor:pointer} form.estimate .note{margin-top:14px;font-size:12px;line-height:1.6;color:#57564E} .hp{position:absolute;left:-9999px} /* --- legal pages ---------------------------------------------------------- */ .legal{padding:clamp(52px,7vw,96px) var(--shell) var(--sect)} .legal h2{margin:2.2em 0 .6em;font-weight:700;font-size:clamp(21px,2.4vw,28px); line-height:1.25;letter-spacing:-.015em} .legal h2:first-of-type{margin-top:1.4em} .legal h3{margin:1.8em 0 .5em;font-weight:600;font-size:17px;line-height:1.35} .legal p,.legal li{font-size:16px;line-height:1.8;color:var(--ink-soft)} .legal ul{padding-left:20px} .legal li{margin-bottom:8px} .legal a{color:var(--gold-deep);border-bottom:1px solid rgba(138,95,24,.35)} .legal a:hover{border-bottom-color:var(--gold-deep)} .legal .updated{display:inline-block;margin:0;padding:8px 14px;background:var(--paper-2); border-left:2px solid var(--gold);font-size:13px;letter-spacing:.02em;color:var(--ink-mute)} .legal .toc{margin:34px 0 0;padding:24px 26px;background:var(--paper-2);border:1px solid var(--line)} .legal .toc h2{margin:0 0 12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--gold-deep);font-weight:600} .legal .toc ol{margin:0;padding-left:20px} .legal .toc li{font-size:14.5px;margin-bottom:5px} /* --- footer --------------------------------------------------------------- */ .site-footer{background:var(--ink-3);color:var(--chalk)} .footer-top{max-width:1200px;margin:0 auto;padding:clamp(44px,5vw,72px) var(--shell); display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:clamp(28px,3vw,48px)} .footer-top img{width:230px;height:auto} .footer-top .blurb{margin:20px 0 0;max-width:34ch;font-size:13.5px;line-height:1.8; color:rgba(244,242,238,.7)} .footer-col h2{font-family:Montserrat,system-ui,sans-serif;font-size:11px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin:0} .footer-col nav,.footer-col .lines{display:flex;flex-direction:column;gap:11px; margin-top:18px;font-size:14px} .footer-col a{color:rgba(244,242,238,.82);transition:color .3s} .footer-col a:hover{color:var(--gold-soft)} .footer-col span{color:rgba(244,242,238,.7)} .footer-email{line-height:1.45;overflow-wrap:anywhere} .footer-email span{display:block;color:rgba(244,242,238,.82)} .footer-social{display:flex;align-items:center;gap:10px;margin-top:20px} .footer-social a{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border:1px solid rgba(244,242,238,.22);color:rgba(244,242,238,.82); transition:background .3s,border-color .3s,color .3s,transform .3s} .footer-social a:hover{background:var(--moss);border-color:var(--moss);color:#FFF;transform:translateY(-2px)} .footer-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .footer-bottom{border-top:1px solid rgba(244,242,238,.1)} .footer-bottom>div{max-width:1200px;margin:0 auto;padding:20px var(--shell);display:flex; justify-content:space-between;gap:14px 24px;flex-wrap:wrap;font-size:12px;color:#8B8A80} .footer-bottom a{color:#B3B1A6;border-bottom:1px solid rgba(179,177,166,.35); transition:color .3s,border-color .3s} .footer-bottom a:hover{color:var(--gold-soft);border-color:var(--gold-soft)} .footer-legal{display:flex;gap:16px;flex-wrap:wrap} /* --- scroll reveal -------------------------------------------------------- */ /* Applied only once the script confirms it can run, so the page is fully readable with JavaScript disabled or broken. */ html[data-reveal-on] [data-reveal]{opacity:0;transform:translate3d(0,22px,0)} html[data-reveal-on] [data-reveal].is-in{opacity:1;transform:none; transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)} html[data-reveal-on] [data-reveal][data-delay="1"].is-in{transition-delay:.09s} html[data-reveal-on] [data-reveal][data-delay="2"].is-in{transition-delay:.18s} html[data-reveal-on] [data-reveal][data-delay="3"].is-in{transition-delay:.27s} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} html[data-reveal-on] [data-reveal]{opacity:1;transform:none} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* --- mobile --------------------------------------------------------------- */ @media (max-width: 860px){ body{line-height:1.62} :root{--sect:58px;--shell:18px} .top-strip{display:none} .site-header-inner{padding:10px 16px;gap:12px} .site-logo{width:150px} .desktop-nav{display:none} .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; margin-left:auto;border:1px solid rgba(244,242,238,.26);background:rgba(255,255,255,.06); color:var(--chalk);cursor:pointer} .menu-btn span{display:block;width:19px;height:2px;background:currentColor; box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor} .mobile-menu-panel[data-open="true"]{position:absolute;top:100%;left:12px;right:12px;z-index:80; background:rgba(15,15,15,.98);border:1px solid rgba(226,184,102,.24); box-shadow:0 24px 70px rgba(0,0,0,.42);padding:10px} .mobile-menu-panel a{display:flex;align-items:center;justify-content:space-between; padding:14px;border-bottom:1px solid rgba(244,242,238,.1);font-size:13px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--chalk)} .mobile-menu-panel a:last-child{border-bottom:0;background:var(--moss);margin-top:8px; justify-content:center} .mobile-menu-panel a.sub{padding-left:30px;font-size:12px;font-weight:500; letter-spacing:.05em;text-transform:none;color:rgba(244,242,238,.72)} .mobile-menu-panel a.sub::before{content:"";width:7px;height:7px;margin-right:10px; background:var(--gold);transform:rotate(45deg);flex:0 0 auto;order:-1} .mobile-menu-panel a.sub[aria-current="page"]{color:var(--gold-soft)} /* The header stays sticky on phones, matching the home page, so the "Free quote" button is always one tap away. It is a positioned element, so it still acts as the containing block for the absolutely placed menu panel. */ .page-hero{padding:46px 18px 52px} .page-hero h1{font-size:30px;max-width:none} .page-hero .lede{font-size:15px} .hero-actions{gap:10px;margin-top:26px} .hero-actions .btn{width:100%;justify-content:center;padding:15px 18px;font-size:11.5px; letter-spacing:.09em} .page-hero>.hero-bg::after{background:linear-gradient(180deg,rgba(9,10,8,.78),rgba(9,10,8,.9))} .stats{padding:30px 18px 38px} .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px} .sect-head{gap:14px;margin-bottom:32px;padding-bottom:26px} .sect-head h2,.feature h2,.split h2,.faq-intro h2,.contact-info h2{font-size:28px; line-height:1.18;letter-spacing:0;text-align:left} .sect-head{align-items:flex-start;text-align:left} .sect-head p{text-align:left;font-size:14.5px} .sect-cta{margin-top:34px;text-align:left} .sect-cta .btn,.faq-intro .acts .btn,.feature .btn{width:100%;justify-content:center; padding:15px 18px;font-size:11.5px;letter-spacing:.09em;text-align:center} .feature{gap:30px} .feature-media .shot{aspect-ratio:4/3} .feature .intro{font-size:15px} .spec-list p{font-size:14.5px} .card-grid{gap:16px} .rail-arrow{display:none} .rail{gap:10px;margin:0 -18px;padding:0 18px 2px;scroll-padding-left:18px} .rail figure{flex-basis:68vw} .steps{gap:34px 0} .step .dial::before{display:none} .faq-grid,.split,.contact-grid{grid-template-columns:1fr;gap:30px} .faq-list summary{padding:18px;font-size:15.5px} .faq-list details>div{padding:0 18px 20px} .faq-list details p{font-size:14.5px} .faq-intro .acts{align-items:stretch} .area-list{grid-template-columns:1fr;margin-top:22px} .map-frame iframe{height:280px} form.estimate{padding:20px} form.estimate .fields{grid-template-columns:1fr} form.estimate input,form.estimate select,form.estimate textarea{width:100%;font-size:16px} .legal p,.legal li{font-size:15.5px} /* Footer links are the densest tap targets on the page; give each one a 44px-high hit area instead of an 19px line of text. */ .footer-col nav,.footer-col .lines{gap:0;margin-top:10px} .footer-col nav a,.footer-col .lines>*{display:flex;align-items:center;min-height:44px;padding:2px 0} .footer-legal a{display:inline-flex;align-items:center;min-height:44px} .crumbs{font-size:12.5px} .crumbs a{display:inline-flex;align-items:center;min-height:34px} .footer-top{grid-template-columns:1fr;padding:40px 18px} .footer-top img{width:190px} .footer-bottom>div{padding:18px;display:block} .footer-bottom>div>*{display:block;margin-bottom:8px} .footer-legal{display:flex} }