:root { --ink:#06090e; --panel:#0a1724; --paper:#f1f4f7; --muted:#9daab7; --blue:#075ca8; --cyan:#49b9e8; --gold:#e3a32c; --line:rgba(73,185,232,.22); --max:1260px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Manrope,Arial,sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
.shell { width:min(var(--max),calc(100% - 42px)); margin:auto; }
.top { padding:8px 18px; border-bottom:1px solid var(--line); color:var(--gold); text-align:center; font:500 10px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.nav { min-height:136px; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.brand-logo { display:block; width:190px; height:122px; background:url('/assets/tampa-bay-quartz-logo.webp') center/contain no-repeat; }
.navlinks { display:flex; align-items:center; gap:26px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.navlinks a:hover { color:var(--cyan); }
.button { display:inline-flex; justify-content:center; align-items:center; padding:14px 19px; border:0; background:linear-gradient(135deg,#075ca8,#0b74c8); color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.button:hover { background:linear-gradient(135deg,#e3a32c,#f4c45a); color:#09111a; }
.contact-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.outline-button { border:1px solid var(--cyan); background:transparent; color:var(--cyan); }
.outline-button:hover { border-color:var(--gold); background:var(--gold); color:#09111a; }
.hero-actions { margin-top:28px; }
.hero { min-height:545px; position:relative; display:grid; align-items:end; isolation:isolate; overflow:hidden; border-top:1px solid var(--line); }
.hero img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(6,9,14,.96),rgba(6,9,14,.62) 56%,rgba(6,9,14,.12)),linear-gradient(0deg,rgba(6,9,14,.92),transparent 60%); }
.crumbs { padding-top:18px; color:var(--muted); font-size:12px; }
.crumbs a { color:var(--cyan); }
.hero-copy { padding:70px 0; max-width:820px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--gold); font:500 11px "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow::before { content:""; width:28px; height:1px; background:currentColor; }
h1 { margin:20px 0 22px; max-width:900px; font-size:clamp(3.3rem,7vw,7.1rem); line-height:.92; letter-spacing:-.07em; }
.lead { max-width:690px; margin:0; color:#d6dde4; font-size:18px; }
section { padding:88px 0; }
h2 { margin:14px 0 22px; font-size:clamp(2.25rem,4vw,4.25rem); line-height:1; letter-spacing:-.055em; }
h3 { margin:0 0 12px; font-size:24px; letter-spacing:-.035em; }
.intro { display:grid; grid-template-columns:.86fr 1.14fr; gap:74px; }
.intro p { margin:0 0 18px; color:#d6dde4; }
.material-guidance-section { padding:46px 0; }
.material-guidance-section .intro { gap:54px; }
.material-guidance-section h2 { margin-bottom:0; }
.material-guidance-section .searches { margin-top:18px; }
.material-guidance-section .contact-actions { margin-top:18px; }
.searches { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.searches a { padding:8px 11px; border:1px solid var(--line); color:var(--cyan); font:500 10px "DM Mono",monospace; letter-spacing:.04em; text-decoration:none; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.searches a:hover,.searches a:focus-visible { background:var(--cyan); border-color:var(--cyan); color:var(--navy); }
.brands { background:var(--paper); color:#111923; }
.brand-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #c9d3dc; border-left:1px solid #c9d3dc; }
.brand-card { padding:30px; border-right:1px solid #c9d3dc; border-bottom:1px solid #c9d3dc; }
.brand-card p { margin:0; color:#52616e; }
.brand-card h3 { color:#075ca8; }
.catalog-section { background:#081522; }
.catalog-head { display:flex; align-items:end; justify-content:space-between; gap:34px; margin-bottom:28px; }
.catalog-head p { max-width:460px; margin:0; color:var(--muted); }
.catalog-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:27px; }
.catalog-filter { padding:10px 15px; border:1px solid var(--line); border-radius:999px; background:transparent; color:#c9d4dd; font:500 10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.catalog-filter:hover,.catalog-filter.active { border-color:var(--gold); background:var(--gold); color:#07101a; }
.catalog-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.material-card { display:flex; flex-direction:column; min-height:100%; overflow:hidden; background:#0c1b2a; border:1px solid var(--line); }
.material-card[hidden] { display:none; }
.material-card img,.category-art { width:100%; aspect-ratio:4/3; object-fit:cover; background:#122537; }
.category-art { background:linear-gradient(140deg,#d8d2c6,#8c8070 55%,#342f2b); }
.category-art.porcelain { background:linear-gradient(145deg,#f3f1eb,#cdd8df 58%,#7d94a3); }
.category-art.dekton { background:linear-gradient(145deg,#1b252d,#596873 58%,#d4c2a5); }
.material-card-copy { display:flex; flex:1; flex-direction:column; padding:22px; }
.material-card-copy>span { color:var(--gold); font:500 9px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.material-card h3 { margin:9px 0 10px; font-size:22px; }
.material-card p { margin:0 0 20px; color:#b7c4cf; font-size:14px; }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.card-actions a { padding:9px 11px; border:1px solid var(--line); color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.card-actions a:hover { border-color:var(--gold); color:var(--gold); }
.catalog-note { max-width:820px; margin:24px 0 0; color:var(--muted); font-size:12px; }
.section-contact,.gallery-contact { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:30px; padding:22px 0; border-top:1px solid var(--line); }
.section-contact p,.gallery-contact p { max-width:510px; margin:0; color:var(--muted); }
.gallery-contact { border-bottom:1px solid var(--line); }
.gallery-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.gallery-head p { max-width:390px; margin:0; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-flow:dense; gap:11px; }
.slab { position:relative; grid-column:span 3; min-height:240px; margin:0; overflow:hidden; background:var(--panel); }
.slab.wide { grid-column:span 6; }
.slab.tall { grid-row:span 2; min-height:491px; }
.slab img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.slab::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,6,10,.76),transparent 58%); }
.slab figcaption { position:absolute; z-index:1; left:16px; right:16px; bottom:14px; color:#fff; font:500 10px "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.guidance-section { background:linear-gradient(135deg,#071a2c,#063f74); }
.guidance { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.guidance p { color:#d7e5ef; }
.faq details { padding:19px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.faq summary { cursor:pointer; font-weight:800; }
.faq p { margin:12px 0 0; color:#c5d2dc; }
.cta { padding:76px 0; background:linear-gradient(120deg,#075ca8,#0a1724); }
.cta-inner { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
.cta h2 { margin:0 0 13px; }
.cta p { margin:0; color:#d7e5ef; }
footer { padding:42px 0; color:var(--muted); font-size:13px; }
.footer-grid { display:flex; justify-content:space-between; gap:30px; }
.footer-grid a { color:var(--cyan); }
.mobile-contact-bar { display:none; }

@media(max-width:1000px) { .catalog-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:820px) { .nav { min-height:108px; } .brand-logo { width:150px; height:96px; } .navlinks a:not(.button) { display:none; } .hero { min-height:510px; } .hero-copy { padding:56px 0; } .intro,.guidance { grid-template-columns:1fr; gap:32px; } .brand-grid { grid-template-columns:1fr; } .catalog-head { display:block; } .catalog-head p { margin-top:14px; } .gallery-head { display:block; } .gallery-head p { margin-top:14px; } .slab,.slab.wide { grid-column:span 6; min-height:255px; } .slab.tall { grid-row:auto; min-height:255px; } .cta-inner { grid-template-columns:1fr; } .contact-actions { gap:9px; } .contact-actions .button { flex:1; padding:13px 12px; font-size:10px; } .section-contact,.gallery-contact { display:block; } .section-contact .contact-actions,.gallery-contact .contact-actions { margin-top:15px; } .mobile-contact-bar { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr 1fr; background:#071522; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.28); } .mobile-contact-bar a { padding:14px 8px; text-align:center; font:800 10px Manrope,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; } .mobile-contact-bar a:first-child { border-right:1px solid var(--line); color:#f4c45a; } .mobile-contact-bar a:last-child { background:#075ca8; color:#fff; } body { padding-bottom:58px; } }
@media(max-width:520px) { .shell { width:calc(100% - 30px); } h1 { font-size:3.35rem; } .lead { font-size:16px; } section { padding:65px 0; } .catalog-grid { grid-template-columns:1fr; } .slab,.slab.wide { grid-column:span 12; min-height:275px; } }