/* Event Premium visual system for sacramentoportapottyrentals.com */
:root { --primary:#191612; --secondary:#0f0d0b; --accent:#bc9147; --paper:#fbf8f1; --ink:#29231d; --muted:#6c6256; --heading:Georgia, Times New Roman, serif; --body:Arial, Helvetica, sans-serif; --radius:3px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); line-height:1.65; } a { color:inherit; } .skip { position:absolute; left:-999px; } .skip:focus { left:1rem; top:1rem; z-index:99; background:#fff; padding:.6rem; } .container { width:min(1150px,92%); margin:auto; }
.topline { background:var(--secondary); color:#fff; font-size:.9rem; } .topline .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; } .topline a { color:#fff; text-decoration:none; font-weight:700; }
.site-header { background:#fff; position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(0,0,0,.08); } .navwrap { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; } .brand { color:var(--primary); font-family:var(--heading); font-size:clamp(1.2rem,2.5vw,1.75rem); font-weight:900; line-height:1; text-decoration:none; letter-spacing:.01em; max-width:280px; } .nav-toggle { display:none; border:1px solid var(--primary); color:var(--primary); background:#fff; padding:.55rem .7rem; font-weight:800; } nav ul { display:flex; list-style:none; padding:0; margin:0; gap:.75rem; align-items:center; } nav a { text-decoration:none; font-size:.91rem; font-weight:700; padding:.4rem .5rem; } nav a:hover,nav a:focus { color:var(--accent); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:.4rem; text-decoration:none; padding:.84rem 1.08rem; background:var(--accent); color:#161616; border:2px solid var(--accent); border-radius:var(--radius); font-weight:900; line-height:1.1; transition:transform .18s ease,box-shadow .18s ease; } .button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.14); } .button.outline { background:transparent; border-color:#fff; color:#fff; } .button.dark { background:var(--primary); border-color:var(--primary); color:#fff; }
.hero { position:relative; min-height:570px; background:var(--secondary); color:#fff; overflow:hidden; display:flex; align-items:center; } .hero-bg { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.48) 43%,rgba(0,0,0,.08) 72%),url('/assets/hero.webp') center/cover no-repeat; } .hero-grid { position:relative; z-index:1; width:min(1150px,92%); margin:auto; padding:5.5rem 0; display:grid; grid-template-columns:minmax(0,620px) 1fr; gap:2rem; align-items:center; } .eyebrow { display:inline-block; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-weight:900; font-size:.78rem; margin-bottom:.65rem; } .hero h1 { font:900 clamp(2.4rem,6vw,5.5rem)/.95 var(--heading); margin:0 0:1rem; text-transform:none; letter-spacing:-.02em; } .hero p { max-width:58ch; font-size:1.12rem; margin:.6rem 0 1.5rem; } .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; } .hero-note { margin-top:1.1rem; font-size:.9rem; color:#f4f4f4; } .hero-card { background:rgba(255,255,255,.96); color:var(--ink); padding:1.5rem; border-radius:var(--radius); box-shadow:0 16px 42px rgba(0,0,0,.22); max-width:340px; justify-self:end; } .hero-card h2 { font:800 1.25rem/1.1 var(--heading); margin:0 0:.65rem; color:var(--primary); } .hero-card ol { padding-left:1.15rem; margin:.75rem 0; } .hero-card li { margin:.4rem 0; }

.hero .hero-bg { background:linear-gradient(90deg,rgba(25,22,18,.93) 0%,rgba(25,22,18,.74) 42%,rgba(25,22,18,.08) 73%),url('/assets/hero.webp') center/cover no-repeat; }


.section { padding:4.75rem 0; } .section.alt { background:#fff; } .section.tint { background:color-mix(in srgb, var(--accent) 10%, var(--paper)); } .section-head { max-width:780px; margin-bottom:2rem; } .kicker { color:var(--primary); text-transform:uppercase; letter-spacing:.11em; font-weight:900; font-size:.76rem; } h2 { color:var(--primary); font:900 clamp(1.8rem,3vw,2.8rem)/1.05 var(--heading); margin:.25rem 0 .9rem; } h3 { color:var(--primary); font:800 1.22rem/1.15 var(--heading); margin:.25rem 0 .6rem; } p { margin:.75rem 0; } .grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; } .grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; } .card { background:#fff; padding:1.45rem; border-radius:var(--radius); border: 1px solid #dfcfaa; box-shadow: 0 14px 34px rgba(25,22,18,.12); } .card p { color:var(--muted); } .card a { color:var(--primary); font-weight:800; }
.steps { counter-reset:step; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .step { background:#fff; padding:1.35rem; border-radius:var(--radius); position:relative; padding-top:3.65rem; border: 1px solid #dfcfaa; box-shadow: 0 14px 34px rgba(25,22,18,.12); } .step:before { counter-increment:step; content:counter(step, decimal-leading-zero); position:absolute; top:1rem; left:1rem; color:var(--accent); font:900 1.7rem/1 var(--heading); } .checklist { padding:0; margin:0; list-style:none; } .checklist li { padding:.7rem 0 .7rem 1.65rem; position:relative; border-bottom:1px solid rgba(0,0,0,.09); } .checklist li:before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:900; }
table { width:100%; border-collapse:collapse; background:#fff; } th,td { text-align:left; padding:1rem; border-bottom:1px solid #dfe5e3; vertical-align:top; } th { color:#fff; background:var(--primary); font-family:var(--heading); font-size:1.05rem; } .faq { border-top:1px solid #d7dfdd; } details { border-bottom:1px solid #d7dfdd; padding:1rem .1rem; } summary { cursor:pointer; font-weight:900; color:var(--primary); } details p { max-width:800px; color:var(--muted); } .callout { border-left:5px solid var(--accent); background:#fff; padding:1.35rem 1.45rem; border-radius:0 var(--radius) var(--radius) 0; } .service-links { display:flex; flex-wrap:wrap; gap:.6rem; } .tag { display:inline-block; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:999px; padding:.5rem .8rem; text-decoration:none; font-weight:800; }
.cta-band { background:var(--primary); color:#fff; } .cta-band h2 { color:#fff; } .cta-band .grid-2 { align-items:center; } .map { width:100%; min-height:350px; border:0; border-radius:var(--radius); } .contact-card { background:#fff; padding:1.5rem; color:var(--ink); border-radius:var(--radius); }
footer { background:var(--secondary); color:#eef4f1; padding:3rem 0 5rem; } footer h2 { color:#fff; font-size:1.35rem; } .footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1.5rem; } footer a { color:#fff; } .footer-list { list-style:none; padding:0; } .footer-list li { margin:.45rem 0; } .fine { color:#cbd5d1; font-size:.87rem; } .mobile-call { display:none; position:fixed; z-index:20; left:1rem; right:1rem; bottom:1rem; text-align:center; background:var(--accent); color:#161616; padding:.85rem 1rem; font-weight:900; text-decoration:none; border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.28); }
@media(max-width:800px) { .topline .container { justify-content:center; } .topline span { display:none; } .navwrap { min-height:64px; } .nav-toggle { display:block; } nav { display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid #ddd; padding:.8rem 4%; } nav.open { display:block; } nav ul { display:grid; gap:.25rem; } nav a { display:block; padding:.7rem 0; } .hero { min-height:540px; } .hero-grid { grid-template-columns:1fr; padding:4.4rem 0; } .hero-card { justify-self:start; max-width:100%; } .grid-2,.grid-3,.steps,.footer-grid { grid-template-columns:1fr; } .section { padding:3.25rem 0; } .mobile-call { display:block; } footer { padding-bottom:6rem; } }

/* Unique editorial structure: experience-design for sacramentoportapottyrentals.com */
.breadcrumbs{padding:.85rem 0;background:#fff;border-bottom:1px solid #e2e7e4;font-size:.9rem}.breadcrumbs a{color:var(--primary);font-weight:800}

.full-service{padding-top:3.1rem;padding-bottom:3.1rem;background:color-mix(in srgb,var(--accent) 12%,var(--paper));border-top:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}.full-service h2{max-width:900px}.full-service p{max-width:900px;font-size:1.05rem}.full-service-links{margin-top:1.1rem}