/* Illinois Architectural: material-led charcoal, limestone, paper white, and architectural brass, with ruled editorial spacing. */
:root { --ink:#1d201f; --ink-soft:#303432; --stone:#e8e3d8; --paper:#fbfaf6; --brass:#b58b45; --brass-pale:#d8bd89; --line:rgba(29,32,31,.17); --muted:#676b65; --serif:"Cormorant Garamond", Georgia, serif; --sans:"Manrope", Arial, sans-serif; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button,input,textarea { font:inherit; }
:focus-visible { outline:3px solid var(--brass); outline-offset:4px; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; background:var(--brass); color:#171918; padding:.75rem 1rem; transform:translateY(-180%); transition:transform .18s var(--ease); }
.skip-link:focus { transform:translateY(0); }
.site-header { height:88px; width:100%; position:sticky; top:0; z-index:30; display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr); align-items:center; gap:1rem; padding:0 3.2vw; background:rgba(251,250,246,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand,.footer-brand { display:inline-flex; align-items:center; gap:.65rem; width:max-content; }
.brand img,.footer-brand img { width:38px; height:38px; object-fit:contain; }
.brand-name,.footer-brand span { font-family:var(--serif); font-size:1.15rem; line-height:.8; font-weight:700; letter-spacing:.035em; text-transform:uppercase; }
.brand-name em,.footer-brand em { font-weight:500; font-style:italic; text-transform:none; }
.main-nav { display:flex; gap:1.45rem; justify-content:center; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:800; }
.main-nav a { position:relative; padding:.5rem 0; }
.main-nav a::after { content:""; position:absolute; bottom:.15rem; left:0; width:0; height:1px; background:var(--brass); transition:width .22s var(--ease); }
.main-nav a:hover::after,.main-nav a:focus-visible::after { width:100%; }
.header-call { justify-self:end; display:flex; align-items:baseline; gap:.55rem; color:var(--ink); border-left:1px solid var(--line); padding-left:1rem; font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; }
.header-call strong { color:var(--brass); font-size:.72rem; letter-spacing:.02em; }
.hero { min-height:calc(100svh - 88px); position:relative; isolation:isolate; color:#fff; overflow:hidden; display:flex; align-items:flex-end; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-3; filter:saturate(.62) contrast(1.08) brightness(.64); }
.hero-scrim { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(17,19,18,.92) 0%,rgba(17,19,18,.72) 37%,rgba(17,19,18,.22) 77%),linear-gradient(0deg,rgba(17,19,18,.68),transparent 48%); }
.hero-rule { position:absolute; z-index:-1; background:rgba(255,255,255,.24); }
.hero-rule-one { top:13%; left:53%; width:1px; height:67%; }
.hero-rule-two { top:29%; left:0; width:86%; height:1px; }
.hero-content { width:min(890px,92vw); margin:0 0 clamp(4.5rem,10vh,7.5rem) clamp(1.5rem,13vw,13rem); }
.eyebrow { display:flex; gap:.75rem; align-items:center; margin:0 0 1.25rem; color:var(--brass); font-size:.65rem; letter-spacing:.15em; line-height:1.1; text-transform:uppercase; font-weight:800; }
.eyebrow span:first-child { display:inline-flex; align-items:center; gap:.75rem; }
.eyebrow span:first-child::after { content:""; width:2rem; height:1px; background:currentColor; }
.eyebrow.light { color:var(--brass-pale); }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); letter-spacing:-.037em; line-height:.87; font-weight:600; }
h1 { max-width:780px; margin-bottom:1.55rem; font-size:clamp(3.6rem,7.8vw,7.9rem); }
h1 em,h2 em { color:var(--brass-pale); font-style:italic; font-weight:500; }
.hero-copy { width:min(525px,94%); margin:0 0 2rem; color:rgba(255,255,255,.86); font-size:1rem; line-height:1.75; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem 2.2rem; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:2.3rem; min-height:54px; padding:.95rem 1rem 1rem 1.15rem; border:1px solid transparent; font-size:.68rem; font-weight:800; letter-spacing:.075em; line-height:1.25; text-transform:uppercase; transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease); }
.button span { font-size:1.15rem; line-height:0; }
.button:active { transform:scale(.97); }
.button-brass { background:var(--brass); color:#151716; }
.button-brass:hover { background:#d6ba82; }
.text-link { display:inline-flex; align-items:center; gap:.55rem; width:max-content; border-bottom:1px solid currentColor; padding-bottom:.35rem; color:var(--ink); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:color .18s var(--ease); }
.text-link:hover { color:var(--brass); }
.text-link.light { color:#fff; }
.text-link.light:hover { color:var(--brass-pale); }
.hero-note { display:flex; flex-wrap:wrap; gap:.85rem 1.2rem; margin-top:clamp(3rem,7vh,5rem); color:rgba(255,255,255,.7); font-size:.63rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.hero-note span { display:inline-flex; align-items:center; gap:.7rem; }
.hero-note span:not(:last-child)::after { content:""; width:3px; height:3px; background:var(--brass); border-radius:100%; }
.hero-spec { position:absolute; right:3.2vw; bottom:clamp(3rem,8vh,5rem); display:flex; align-items:center; gap:.8rem; color:rgba(255,255,255,.72); font-size:.59rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; writing-mode:vertical-rl; }
.hero-spec i { display:block; width:1px; height:5rem; background:var(--brass); }
.section-with-rail { position:relative; display:grid; grid-template-columns:clamp(5.5rem,10vw,12rem) minmax(0,1fr); }
.section-rail { min-height:100%; position:relative; display:flex; flex-direction:column; align-items:center; gap:1rem; padding-top:clamp(5rem,8vw,8rem); border-right:1px solid var(--line); color:var(--muted); }
.section-rail span { color:var(--brass); font-size:.63rem; font-weight:800; letter-spacing:.1em; }
.section-rail b { font-size:.63rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; writing-mode:vertical-rl; }
.section-rail i { width:1px; height:clamp(4rem,8vw,7rem); background:var(--brass); }
.dark-rail { border-color:rgba(255,255,255,.16); color:#fbfaf6; }
.content-area { padding:clamp(5rem,8vw,8rem) clamp(1.5rem,6.2vw,8rem); }
.services { background:var(--stone); }
.section-intro { max-width:800px; }
.split-intro { display:grid; grid-template-columns:1.25fr .75fr; gap:2rem 4rem; align-items:end; max-width:100%; margin-bottom:3.5rem; }
.split-intro .eyebrow,.split-intro h2 { grid-column:1; }
.split-intro p:last-child { grid-column:2; grid-row:1 / span 2; align-self:end; color:#4c504c; font-size:.95rem; line-height:1.8; }
h2 { margin-bottom:0; font-size:clamp(3rem,5.6vw,6.2rem); }
h2 em { color:var(--brass); }
.service-index { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:225px; position:relative; padding:1.35rem 1.3rem 1.5rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(251,250,246,.18); transition:background .2s var(--ease),transform .2s var(--ease); }
.service-card::before { content:""; position:absolute; inset:0; border-left:3px solid var(--brass); opacity:0; transform:scaleY(.65); transform-origin:bottom; transition:opacity .2s var(--ease),transform .2s var(--ease); }
.service-card:hover { background:var(--paper); transform:translateY(-5px); }
.service-card:hover::before { opacity:1; transform:scaleY(1); }
.service-number { display:block; color:var(--brass); font-size:.64rem; font-weight:800; letter-spacing:.1em; }
.service-icon { position:absolute; top:1rem; right:1.15rem; color:#76786f; font-family:var(--serif); font-size:2rem; }
.service-card h3 { width:80%; margin:2.75rem 0 .7rem; font-family:var(--serif); font-size:1.65rem; font-weight:600; line-height:1; letter-spacing:-.025em; }
.service-card p { margin:0; color:#515550; font-size:.83rem; line-height:1.65; }
.services-footnote { max-width:520px; margin:2rem 0 0 auto; color:#555953; font-size:.79rem; font-style:italic; }
.about { background:var(--ink); color:#fff; }
.about h2 { max-width:920px; }
.about h2 em { color:var(--brass-pale); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem 8vw; margin-top:clamp(3rem,6vw,6rem); }
.about-copy { max-width:565px; color:rgba(255,255,255,.78); font-size:1rem; line-height:1.85; }
.about-copy p { margin-bottom:1.3rem; }
.about-copy .text-link { margin-top:1rem; }
.approach-list { margin:0; border-top:1px solid rgba(255,255,255,.2); }
.approach-list div { display:grid; grid-template-columns:3.5rem 1fr; gap:1rem; padding:1.25rem 0; border-bottom:1px solid rgba(255,255,255,.2); }
.approach-list dt { color:var(--brass-pale); font-size:.67rem; font-weight:800; letter-spacing:.1em; }
.approach-list dd { margin:0; font-family:var(--serif); font-size:1.65rem; line-height:1.05; }
.gallery { background:var(--paper); }
.gallery-intro { display:grid; grid-template-columns:1fr 1fr; gap:1rem 4rem; max-width:100%; margin-bottom:3rem; }
.gallery-intro .eyebrow,.gallery-intro h2 { grid-column:1; }
.gallery-intro p:last-child { grid-column:2; grid-row:1 / span 2; align-self:end; color:var(--muted); font-size:.88rem; }
.gallery-grid { display:grid; grid-template-columns:1.12fr .68fr 1fr; gap:1.25rem; align-items:start; }
.gallery-piece { margin:0; position:relative; background:var(--stone); }
.gallery-piece img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.02); transition:filter .25s var(--ease),transform .35s var(--ease); }
.gallery-piece { overflow:hidden; }
.gallery-piece:hover img { transform:scale(1.035); filter:saturate(.94) contrast(1.05); }
.backsplash { margin-top:2.2rem; height:clamp(330px,41vw,560px); }
.shower { height:clamp(390px,48vw,655px); }
.floor { margin-top:5rem; height:clamp(290px,35vw,480px); }
.gallery-piece figcaption { position:absolute; right:0; bottom:0; display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; padding:.75rem .85rem; background:rgba(29,32,31,.88); color:#fff; font-size:.61rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.gallery-piece figcaption small { color:var(--brass-pale); font-size:.54rem; letter-spacing:.07em; }
.reviews { background:var(--stone); }
.reviews-content { display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:center; min-height:480px; }
.reviews-title-block h2 { max-width:600px; }
.review-empty-state { position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.3rem; padding:2rem 1.2rem 2rem 1.8rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quote-mark { color:var(--brass); font-family:var(--serif); font-size:4.5rem; line-height:.65; }
.review-empty-state p { margin:0 0 .6rem; font-family:var(--serif); font-size:1.7rem; line-height:1.08; }
.review-empty-state small { color:var(--muted); font-size:.68rem; line-height:1.55; }
.contact { background:var(--ink); color:#fff; }
.contact h2 { max-width:900px; }
.contact h2 em { color:var(--brass-pale); }
.contact-layout { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2.6rem,7vw,8rem); margin-top:clamp(3.2rem,6vw,6rem); }
.contact-panel > p { max-width:600px; margin-bottom:2rem; color:rgba(255,255,255,.74); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { margin-bottom:1rem; }
.field label { display:flex; justify-content:space-between; margin-bottom:.45rem; color:rgba(255,255,255,.79); font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.field label > span:not(.optional) { color:var(--brass-pale); }
.optional { color:rgba(255,255,255,.42); font-size:.57rem; font-weight:700; letter-spacing:.06em; }
input,textarea { width:100%; border:1px solid rgba(255,255,255,.25); border-radius:0; background:transparent; color:#fff; padding:.75rem .8rem; outline:none; transition:border-color .18s var(--ease),background .18s var(--ease); }
input { height:48px; }
textarea { resize:vertical; min-height:115px; }
input:focus,textarea:focus { border-color:var(--brass); background:rgba(255,255,255,.055); }
input::placeholder,textarea::placeholder { color:rgba(255,255,255,.38); }
.full-width { width:100%; margin-top:.3rem; }
.form-success { padding:1.4rem; border:1px solid var(--brass); background:rgba(181,139,69,.12); color:#fff; }
.form-success strong,.form-success span { display:block; }
.form-success strong { margin-bottom:.3rem; font-family:var(--serif); font-size:1.5rem; }
.form-success span { color:rgba(255,255,255,.7); font-size:.8rem; }
.contact-details { padding-top:.25rem; }
.contact-detail { padding:0 0 1.55rem; margin-bottom:1.55rem; border-bottom:1px solid rgba(255,255,255,.2); }
.detail-label { display:block; margin-bottom:.45rem; color:var(--brass-pale); font-size:.62rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.contact-detail a { font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,2.25rem); line-height:1.05; transition:color .18s var(--ease); }
.contact-detail a:hover { color:var(--brass-pale); }
.map-wrap { position:relative; margin-top:2.5rem; border:1px solid rgba(255,255,255,.2); overflow:hidden; background:linear-gradient(90deg,rgba(181,139,69,.24) 1px,transparent 1px),linear-gradient(rgba(181,139,69,.24) 1px,transparent 1px),#d9d3c6; background-size:26px 26px; }
.map-wrap::before { content:"9296 Vintage Park Dr\A Sacramento, CA 95829"; white-space:pre; position:absolute; z-index:1; top:50%; left:50%; width:180px; padding:1rem; transform:translate(-50%,-50%); border:1px solid rgba(29,32,31,.4); background:rgba(251,250,246,.86); color:var(--ink); font-family:var(--serif); font-size:1.2rem; line-height:1.12; text-align:center; }
.map-wrap iframe { position:relative; z-index:2; display:block; width:100%; height:220px; border:0; background:transparent; filter:grayscale(1) contrast(1.03); opacity:.14; }
.map-fallback { position:absolute; right:0; bottom:0; padding:.55rem .7rem; background:var(--brass); color:#151716; font-size:.57rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.site-footer { display:grid; grid-template-columns:1.1fr 1fr .8fr 1fr; align-items:start; gap:2rem; padding:3rem 3.2vw; border-top:1px solid var(--line); background:var(--paper); color:var(--ink); }
.footer-brand img { width:42px; height:42px; }
.site-footer p,.site-footer nav,.footer-meta { margin:0; color:var(--muted); font-size:.68rem; line-height:1.75; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.site-footer nav a:hover,.footer-meta a:hover { color:var(--brass); }
.footer-meta { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; text-align:right; }
@media (max-width: 920px) { .site-header { grid-template-columns:auto 1fr auto; padding:0 1.25rem; } .main-nav { gap:.85rem; } .header-call span { display:none; } .header-call { padding-left:.6rem; } .hero-content { margin-left:clamp(1.5rem,9vw,5rem); } .service-index { grid-template-columns:repeat(2,1fr); } .gallery-grid { grid-template-columns:1fr 1fr; } .floor { grid-column:1 / span 2; margin:0 12% 0 0; height:380px; } .reviews-content { grid-template-columns:1fr; } .site-footer { grid-template-columns:1fr 1fr; } .footer-meta { align-items:flex-start; text-align:left; } }
@media (max-width: 680px) { html { scroll-padding-top:76px; } .site-header { height:76px; grid-template-columns:1fr auto; } .brand img { width:32px; height:32px; } .brand-name { font-size:1rem; } .main-nav { display:none; } .header-call { border:0; padding:0; } .header-call strong { font-size:.65rem; } .hero { min-height:calc(100svh - 76px); } .hero-image { object-position:60% center; } .hero-scrim { background:linear-gradient(90deg,rgba(17,19,18,.89),rgba(17,19,18,.4)),linear-gradient(0deg,rgba(17,19,18,.8),transparent 60%); } .hero-content { width:calc(100% - 3rem); margin:0 1.5rem 3.3rem; } h1 { font-size:clamp(3.5rem,15.5vw,5.35rem); } .hero-copy { font-size:.91rem; } .hero-actions { align-items:flex-start; flex-direction:column; gap:1.4rem; } .hero-note { margin-top:2.5rem; gap:.65rem; } .hero-note span { font-size:.55rem; } .hero-spec { display:none; } .section-with-rail { display:block; } .section-rail { min-height:0; flex-direction:row; justify-content:flex-start; gap:.65rem; padding:1rem 1.5rem; border-right:0; border-bottom:1px solid var(--line); } .section-rail b { writing-mode:initial; } .section-rail i { width:3rem; height:1px; } .content-area { padding:3.6rem 1.5rem; } .split-intro,.gallery-intro { display:block; } .split-intro p:last-child,.gallery-intro p:last-child { margin-top:1.4rem; } .service-index { grid-template-columns:1fr; } .service-card { min-height:205px; } .about-grid,.contact-layout { grid-template-columns:1fr; gap:2.5rem; } .gallery-grid { grid-template-columns:1fr; gap:1rem; } .backsplash,.shower,.floor { height:360px; margin:0; } .floor { grid-column:auto; } .reviews-content { min-height:0; } .field-row { grid-template-columns:1fr; gap:0; } .site-footer { display:flex; flex-direction:column; gap:1.5rem; padding:2.5rem 1.5rem; } .footer-meta { align-items:flex-start; text-align:left; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }