/* ============================================================ J.C. Rowland Construction - site stylesheet v2 (2026-08-11) Brand tokens: Ink Navy #1a2332, Bronze #8a5a2b, Cream #faf8f5 ============================================================ */ /* Fonts load from a in each page's , not an @import here: an @import cannot start until this file has been fetched and parsed, which serialises the font request behind the stylesheet and delays first paint. */ :root{ --ink:#1a2332; /* brand primary */ --slate:#28324a; /* secondary dark surface - derived from brand ink */ --near:#12151d; /* deepest surface */ --accent:#8a5a2b; /* brand bronze */ --accent-lt:#b8834a; /* bronze on dark */ --bone:#faf8f5; /* page ground - GCL brand cream, 2026-08-05 identity system */ --card:#ffffff; --sub:#5f6470; /* body text on light */ --sub-d:#b4b8c4; /* body text on dark */ --line:#e3ded4; --line-d:rgba(255,255,255,.16); --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif; --pad:clamp(24px,7vw,110px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* ---------- accessibility ---------- Keyboard users must always be able to see where they are. Every interactive element gets a visible focus ring; :focus-visible keeps it off mouse clicks. */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .dark :focus-visible,.slate :focus-visible,footer :focus-visible,.hero :focus-visible{outline-color:var(--accent-lt)} .skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none} .skip:focus{left:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;height:auto;display:block} a{color:inherit} /* ---------- type ---------- */ h1,h2,h3,.display{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.1} h1{font-size:clamp(2.6rem,6.2vw,5rem)} h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.14;margin-bottom:.5em} h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.25;margin-bottom:.35em} p{max-width:64ch} p+p{margin-top:1.05em} .lead{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.55;font-weight:400;color:var(--sub);max-width:44ch} .big{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.35;font-weight:400;max-width:24ch} em,.italic{font-family:var(--serif);font-style:italic} .label{font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:14px;margin-bottom:26px} .label::after{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.5} .label.center{justify-content:center} .label.center::before{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.5} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(250,248,245,.94);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)} .bar{padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{font-family:var(--serif);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap} .logo span{color:var(--accent)} nav.main{display:flex;flex-wrap:wrap;gap:4px 30px;align-items:center} nav.main a{font-family:var(--sans);font-size:.76rem;font-weight:400;letter-spacing:.17em;text-transform:uppercase;color:var(--sub);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:.18s} nav.main a:hover{color:var(--ink);border-bottom-color:var(--accent)} nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)} .tel{font-family:var(--sans);font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 2px} /* ---------- hero ---------- */ .hero{position:relative;min-height:clamp(520px,84vh,860px);display:flex;align-items:flex-end;padding:0 var(--pad) clamp(48px,7vh,96px);color:#fff;overflow:hidden;background:var(--near)} .hero::before{content:"";position:absolute;inset:0; background-image:var(--img,none);background-size:cover;background-position:var(--img-pos,center); opacity:var(--img-op,1)} .hero::after{content:"";position:absolute;inset:0; background: radial-gradient(120% 90% at 18% 8%,rgba(40,50,74,.42) 0%,rgba(18,21,29,.86) 62%,rgba(18,21,29,.96) 100%), linear-gradient(180deg,rgba(18,21,29,.5) 0%,rgba(18,21,29,.1) 40%,rgba(18,21,29,.85) 100%)} .hero.noimg::after{background: radial-gradient(130% 100% at 12% 0%,#2c3346 0%,#1b2030 46%,#12151d 100%), linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.25))} .hero>.inner{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto} .hero .label{color:var(--accent-lt)} .hero h1{color:#fff;max-width:16ch} .hero .lead{color:rgba(255,255,255,.8);margin-top:26px;max-width:46ch} .hero.short{min-height:clamp(320px,46vh,480px)} .hero.short h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch} /* ---------- layout ---------- */ section{padding:clamp(64px,10vh,132px) var(--pad)} .inner{max-width:1180px;margin:0 auto} .narrow{max-width:760px;margin:0 auto} .dark{background:var(--near);color:#fff} .dark h1,.dark h2,.dark h3{color:#fff} .dark p,.dark li,.dark .lead{color:var(--sub-d)} .dark .label{color:var(--accent-lt)} .slate{background:var(--slate);color:#fff} .slate h2,.slate h3{color:#fff} .slate p,.slate li{color:rgba(255,255,255,.78)} .slate .label{color:var(--accent-lt)} .white{background:var(--card)} .rule{height:1px;background:var(--line);border:0;margin:0 var(--pad)} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,84px);align-items:center} .split.text-right{direction:rtl} .split.text-right>*{direction:ltr} .split .body{max-width:52ch} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px} .grid-3>div{background:var(--bone);padding:clamp(28px,3.4vw,46px)} .dark .grid-3,.slate .grid-3{background:var(--line-d);border-color:var(--line-d)} .dark .grid-3>div{background:var(--near)} .slate .grid-3>div{background:var(--slate)} .grid-3 .n{font-family:var(--serif);font-size:1.9rem;color:var(--accent);line-height:1;margin-bottom:18px;display:block} .dark .grid-3 .n,.slate .grid-3 .n{color:var(--accent-lt)} .grid-3 p{font-size:.95rem;color:var(--sub);margin-top:.6em} .dark .grid-3 p,.slate .grid-3 p{color:var(--sub-d)} /* ---------- figure slots (swap in a photo with --img) ---------- */ .fig{position:relative;aspect-ratio:var(--ar,4/5);background: linear-gradient(150deg,#2b3243 0%,#1c2130 55%,#161a25 100%); background-image:var(--img,linear-gradient(150deg,#2b3243 0%,#1c2130 55%,#161a25 100%)); background-size:cover;background-position:center;overflow:hidden} .fig.wide{--ar:16/10} .fig figcaption{position:absolute;left:0;bottom:0;right:0;padding:22px 24px;font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 55%,transparent)} /* ---------- buttons ---------- */ .btn{display:inline-block;margin:28px 14px 0 0;padding:16px 34px;font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:.2s} .btn:hover{background:transparent;color:var(--ink)} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:#fff} .btn.bronze{background:var(--accent);border-color:var(--accent)} .btn.bronze:hover{background:transparent;color:var(--accent)} .dark .btn,.slate .btn,.hero .btn{border-color:#fff;background:#fff;color:var(--ink)} .dark .btn:hover,.slate .btn:hover,.hero .btn:hover{background:transparent;color:#fff} .dark .btn.ghost,.slate .btn.ghost,.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .dark .btn.ghost:hover,.slate .btn.ghost:hover,.hero .btn.ghost:hover{background:#fff;color:var(--ink)} .txtlink{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:3px;display:inline-block;margin-top:22px} .txtlink:hover{border-bottom-color:currentColor} /* ---------- content bits ---------- */ ul,ol{margin:1.1em 0 1.1em 1.15em} li{margin-bottom:.55em;padding-left:.2em} li::marker{color:var(--accent)} .steps{list-style:none;margin:52px 0 0;padding:0;counter-reset:s} .steps li{counter-increment:s;position:relative;padding:0 0 40px 78px;border-left:1px solid var(--line);margin-left:22px} .dark .steps li,.slate .steps li{border-left-color:var(--line-d)} .steps li:last-child{border-left-color:transparent;padding-bottom:0} .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-22px;top:-6px;width:44px;height:44px;background:var(--bone);color:var(--accent);font-family:var(--serif);font-size:1.05rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} .dark .steps li::before{background:var(--near);border-color:var(--line-d);color:var(--accent-lt)} .slate .steps li::before{background:var(--slate);border-color:var(--line-d);color:var(--accent-lt)} .steps b{font-family:var(--serif);font-size:1.35rem;font-weight:400;display:block;margin-bottom:.3em;letter-spacing:-.01em} .steps span{color:var(--sub);font-size:.97rem;display:block;max-width:56ch} .dark .steps span,.slate .steps span{color:var(--sub-d)} .stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:44px;margin-top:56px} .stat .v{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--ink)} .dark .stat .v,.slate .stat .v{color:#fff} .stat .k{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sub);margin-top:14px} .dark .stat .k,.slate .stat .k{color:var(--sub-d)} .scroll{overflow-x:auto;margin:34px 0} table{width:100%;border-collapse:collapse;font-size:.95rem} th,td{padding:20px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .dark th,.dark td,.slate th,.slate td{border-bottom-color:var(--line-d)} th{font-family:var(--sans);font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--sub)} td b{font-family:var(--serif);font-size:1.15rem;font-weight:400} .note{border-left:2px solid var(--accent);padding:6px 0 6px 28px;margin:38px 0;font-family:var(--serif);font-size:1.15rem;line-height:1.55;font-style:italic;color:var(--ink);max-width:60ch} .dark .note,.slate .note{color:rgba(255,255,255,.86)} .plain{border:1px solid var(--line);padding:clamp(24px,3vw,38px);margin:38px 0;font-size:.97rem;background:var(--card)} .dark .plain,.slate .plain{border-color:var(--line-d);background:rgba(255,255,255,.03)} .updated{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);margin-bottom:26px} .price{font-family:var(--serif);font-size:1.1em;color:var(--accent)} /* ---------- forms ---------- */ form.lead-form{max-width:640px;margin-top:44px} form.lead-form label{display:block;font-family:var(--sans);font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);margin:26px 0 8px} .dark form.lead-form label,.slate form.lead-form label{color:var(--sub-d)} form.lead-form input,form.lead-form select,form.lead-form textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--sans);font-weight:300;font-size:1rem;color:var(--ink);border-radius:0} .dark form.lead-form input,.dark form.lead-form select,.dark form.lead-form textarea, .slate form.lead-form input,.slate form.lead-form select,.slate form.lead-form textarea{border-bottom-color:var(--line-d);color:#fff} form.lead-form input:focus,form.lead-form select:focus,form.lead-form textarea:focus{border-bottom-color:var(--accent)} form.lead-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 14px) 22px,calc(100% - 8px) 22px;background-size:6px 6px;background-repeat:no-repeat} .dark form.lead-form select option,.slate form.lead-form select option{color:#1a2332} form.lead-form button{margin-top:40px;padding:17px 44px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.2s} form.lead-form button:hover{background:transparent;color:var(--ink)} .dark form.lead-form button,.slate form.lead-form button{border-color:#fff;background:#fff;color:var(--ink)} .dark form.lead-form button:hover,.slate form.lead-form button:hover{background:transparent;color:#fff} .hint{font-size:.85rem;color:var(--sub);margin-top:20px} .dark .hint,.slate .hint{color:var(--sub-d)} /* ---------- footer ---------- */ footer{background:var(--near);color:var(--sub-d);padding:clamp(56px,8vh,96px) var(--pad) 44px;font-size:.92rem} footer .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;max-width:1180px;margin:0 auto;padding-bottom:52px;border-bottom:1px solid var(--line-d)} footer .logo{color:#fff;font-size:1.05rem} footer h4{font-family:var(--sans);font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:20px} footer a{color:var(--sub-d);text-decoration:none} footer a:hover{color:#fff} footer nav.stack{display:flex;flex-direction:column;gap:11px;font-size:.9rem} footer .fbot{max-width:1180px;margin:0 auto;padding-top:32px;font-size:.8rem;line-height:1.7;color:#7c8290;max-width:1180px} footer .disc{margin-top:16px;max-width:78ch} footer .flegal{margin-top:10px} footer .flegal a{display:inline-block;padding:11px 2px;text-decoration:none;border-bottom:1px solid var(--line-d)} footer .flegal a:hover{color:#fff;border-bottom-color:var(--accent-lt)} /* ---------- responsive ---------- */ @media (max-width:900px){ .split{grid-template-columns:1fr;gap:36px} .split.text-right{direction:ltr} footer .ftop{grid-template-columns:1fr;gap:36px} } @media (max-width:760px){ body{font-size:16px;overflow-x:hidden} .bar{flex-wrap:wrap;gap:10px} .logo{font-size:.92rem;letter-spacing:.08em;white-space:normal;max-width:62vw;line-height:1.25} .tel{font-size:.7rem;letter-spacing:.1em} nav.main{gap:4px 18px;order:3;width:100%;padding-top:8px;border-top:1px solid var(--line)} nav.main a{font-size:.68rem;letter-spacing:.12em} .hero{min-height:74vh} .hero.short{min-height:auto;padding-top:56px} .btn{display:block;margin-right:0;text-align:center} .steps li{padding-left:58px} .steps li::before{width:38px;height:38px;left:-19px} th,td{padding:14px 12px;font-size:.88rem} .fig{--ar:3/2} footer .ftop{padding-bottom:38px} } @media (max-width:400px){ .logo{font-size:.86rem;max-width:58vw} nav.main a{font-size:.64rem} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} /* ============================================================ COMPATIBILITY ALIASES — legacy class names used by the county pages and thank-you pages map onto the v2 system so a single stylesheet drives every page without rewriting long-form body copy. Prefer the v2 names on anything new. ============================================================ */ .kicker{font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;display:block} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px} .card{background:var(--bone);padding:clamp(26px,3.2vw,44px);border:0;border-radius:0} .dark .cards,.slate .cards{background:var(--line-d);border-color:var(--line-d)} .dark .card{background:var(--near)} .slate .card{background:var(--slate)} .card h3{margin-top:0} .card p{font-size:.95rem;color:var(--sub);max-width:none} .dark .card p,.slate .card p{color:var(--sub-d)} .card.lead-card{border-left:2px solid var(--accent)} .cta{display:inline-block;margin:28px 14px 0 0;padding:16px 34px;font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:.2s} .cta:hover{background:transparent;color:var(--ink)} .cta.alt{background:var(--accent);border-color:var(--accent);color:#fff} .cta.alt:hover{background:transparent;color:var(--accent)} .cta.ghost{background:transparent;color:var(--ink)} .cta.ghost:hover{background:var(--ink);color:#fff} .hero .cta,.dark .cta,.slate .cta{border-color:#fff;background:#fff;color:var(--ink)} .hero .cta:hover,.dark .cta:hover,.slate .cta:hover{background:transparent;color:#fff} .hero .cta.alt,.dark .cta.alt,.slate .cta.alt{background:var(--accent);border-color:var(--accent);color:#fff} .hero .cta.ghost,.dark .cta.ghost,.slate .cta.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .hero .cta.ghost:hover,.dark .cta.ghost:hover,.slate .cta.ghost:hover{background:#fff;color:var(--ink)} form.lead{max-width:640px;margin-top:44px} form.lead label{display:block;font-family:var(--sans);font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);margin:26px 0 8px} form.lead input,form.lead select,form.lead textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:transparent;font-family:var(--sans);font-weight:300;font-size:1rem;color:var(--ink);border-radius:0} form.lead input:focus,form.lead select:focus,form.lead textarea:focus{border-bottom-color:var(--accent)} form.lead select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 14px) 22px,calc(100% - 8px) 22px;background-size:6px 6px;background-repeat:no-repeat} form.lead button{margin-top:40px;padding:17px 44px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.2s} form.lead button:hover{background:transparent;color:var(--ink)} .dark form.lead label,.slate form.lead label{color:var(--sub-d)} .dark form.lead input,.dark form.lead select,.dark form.lead textarea, .slate form.lead input,.slate form.lead select,.slate form.lead textarea{border-bottom-color:var(--line-d);color:#fff} .dark form.lead select option,.slate form.lead select option{color:#1a2332} .dark form.lead button,.slate form.lead button{border-color:#fff;background:#fff;color:var(--ink)} .dark form.lead button:hover,.slate form.lead button:hover{background:transparent;color:#fff} section.band{background:var(--card)} section.wide .inner{max-width:1180px} ::selection{background:#8a5a2b;color:#fff}