/* The Compliance HQ - shared site stylesheet (site v2). Load AFTER /assets/brand4/tokens.css, which holds the palette (cast iron, bone, the four-line rule and the text-safe variants). Stripe colours are decoration only: a stripe colour is never used for text. */ :root{ --max:1120px; /* per-section decoration; a page sets data-section on */ --sec:var(--iron); --sec-text:var(--iron); } body[data-section="gas"]{--sec:var(--gas);--sec-text:var(--gas-text)} body[data-section="water"]{--sec:var(--water)} body[data-section="wastewater"]{--sec:var(--wastewater)} body[data-section="electric"]{--sec:var(--electric)} body[data-section="personnel"]{--sec:var(--steel)} *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:"Archivo",system-ui,sans-serif;color:var(--iron);background:var(--white);line-height:1.5;font-size:17px;font-variation-settings:"wdth" 100;display:flex;flex-direction:column;min-height:100vh} main{flex:1 0 auto} a{color:inherit} h1,h2,h3{margin:0;line-height:1.1;font-weight:700} h1{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.02em;font-variation-settings:"wdth" 88;max-width:21ch} h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.015em;font-variation-settings:"wdth" 90;max-width:22ch} h3{font-size:1.15rem;margin-bottom:.35rem} p{margin:0 0 1rem;max-width:62ch} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;width:100%} .btn{display:inline-block;background:var(--iron);color:var(--white);text-decoration:none;padding:.85rem 1.4rem;border-radius:4px;font-weight:600;border:2px solid var(--iron)} .btn:hover{background:var(--iron-hover);border-color:var(--iron-hover)} .btn.ghost{background:transparent;color:var(--iron)} .btn.ghost:hover{background:var(--bone)} :focus-visible{outline:3px solid var(--iron);outline-offset:3px} /* ---------- header: white, cast-iron lockup, nav on its own row, four-line rule underneath ---------- */ .site-header{background:var(--white)} .site-header::after{content:"";display:block;height:var(--rule-h);background:var(--rule)} .site-header .nav{display:flex;flex-direction:column;align-items:flex-start;row-gap:12px;padding-top:16px;padding-bottom:14px} .site-header nav{width:100%} .brand{display:flex;align-items:center;text-decoration:none} .brand img{height:72px;width:auto;display:block} .site-header nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px} .site-header nav li{white-space:nowrap} .site-header nav a{text-decoration:none;color:var(--iron);font-weight:500;white-space:nowrap} .site-header nav a:hover{text-decoration:underline;text-underline-offset:4px} .site-header nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px} .site-header nav a.nav-cta{display:inline-block;background:var(--iron);color:var(--white);padding:.55rem 1rem;border-radius:4px;font-weight:600} .site-header nav a.nav-cta:hover{background:var(--iron-hover);text-decoration:none} @media (max-width:760px){ .site-header .nav{padding-top:12px;padding-bottom:12px;row-gap:10px} .brand{width:100%} .brand picture{display:block;width:100%} .brand img{width:100%;height:auto;max-width:420px} .site-header nav ul{gap:8px 16px} .site-header nav a{font-size:.95rem} .site-header nav a.nav-cta{padding:.35rem .8rem} } /* ---------- footer: cast iron, bone lockup, the same links as a list ---------- */ .site-footer{background:var(--iron);padding:40px 0 36px;color:var(--bone-soft);font-size:.9rem} .site-footer .flogo{display:block;height:72px;width:auto;max-width:100%;margin:0 0 22px} @media (max-width:760px){.site-footer .flogo{width:100%;height:auto;max-width:420px}} .site-footer .fnav{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px} .site-footer .fnav a{color:var(--white);text-decoration:none;white-space:nowrap} .site-footer .fnav a:hover{text-decoration:underline;text-underline-offset:4px} .site-footer .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} .site-footer p{margin:0;max-width:none} .site-footer :focus-visible{outline-color:var(--bone)} /* ---------- slots: visible placeholders the release gate refuses to ship ---------- */ .slot{background:var(--white);color:var(--iron);outline:2px dashed var(--iron-soft);outline-offset:1px;font-style:normal} span.slot{padding:0 .3em;border-radius:2px} p.slot,div.slot{padding:.5rem .7rem;font-size:1rem;font-weight:400;letter-spacing:0} h1 .slot,h2 .slot{font-size:.6em;font-weight:600;letter-spacing:0;line-height:1.3;display:inline-block} /* ---------- sections ---------- */ section{padding:72px 0} section + section{border-top:1px solid var(--line)} .intro{margin-bottom:2.2rem} .intro p{color:var(--iron-soft);font-size:1.1rem;margin-top:.9rem} .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px 40px} .col p{color:var(--iron-soft);font-size:1rem} .col ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--iron-soft)} .col li{margin:.25rem 0} .cite{color:var(--steel-text)} .sub{margin-top:64px;padding-top:48px;border-top:1px solid var(--line)} .sub h3.big{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.015em;font-variation-settings:"wdth" 90;max-width:26ch;margin:0} .sub .intro p{font-size:1.05rem} .note{font-size:.9rem;color:var(--steel-text)} .intro .kicker,.kicker{font-size:1.3rem;font-weight:700;line-height:1.3;color:var(--iron);max-width:44ch;margin-top:1.2rem} .below-cards{margin-top:36px} /* hero: the section colour as a top bar (decoration only) */ .hero{padding:56px 0 32px;border-top:6px solid var(--sec)} section.hero + section{border-top:1px solid var(--line)} .hero .lede{font-size:1.2rem;color:var(--iron-soft);margin:1.4rem 0 1.8rem} .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .cta .note{margin:0} .status-line{margin:1rem 0 0} /* #year: obligation strip (bone; the section stripe on top, decorative), right after #hero */ .hero + .strip{margin-top:8px} .strip{margin:0;border-top:6px solid var(--sec);border-bottom:1px solid var(--line);background:var(--bone)} .strip .lbl{padding:14px 24px 0;font-size:.85rem;color:var(--iron-soft)} .strip .rail{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;padding:14px 24px 22px} .strip .rail::-webkit-scrollbar{height:8px} .strip .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .ob{flex:0 0 250px;scroll-snap-align:start;border-left:2px solid var(--iron);padding:4px 18px 4px 14px;margin-right:14px} .ob .when{font-weight:700;font-size:.95rem} .ob .what{font-size:.95rem;line-height:1.35;margin:.25rem 0 .3rem} .ob .cite{font-size:.8rem;color:var(--steel-text-on-bone);font-variation-settings:"wdth" 92} .ob.due{border-left-color:var(--sec-text)} .ob.due .when{color:var(--sec-text)} /* asks list */ .asks{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;list-style:none;margin:0;padding:0} .asks li{display:grid;grid-template-columns:8.5rem 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .asks .k{font-weight:700} .asks .v{color:var(--iron-soft)} @media (max-width:760px){.asks{grid-template-columns:1fr}.asks li{grid-template-columns:1fr;gap:4px}} /* dated vertical timeline (the why-now clock, turned on its side) */ .timeline{margin-top:28px;border-top:6px solid var(--sec);background:var(--bone);padding:24px 24px 6px} .timeline ol{list-style:none;margin:0;padding:0} .timeline li{position:relative;display:grid;grid-template-columns:11rem 1fr;gap:4px 20px;border-left:2px solid var(--iron);padding:0 0 20px 22px;margin-left:6px} .timeline li::before{content:"";position:absolute;left:-7px;top:.35em;width:12px;height:12px;border-radius:50%;background:var(--iron)} .timeline li:last-child{border-left-color:transparent} .timeline .t{font-weight:700;color:var(--sec-text);font-size:.95rem} .timeline .w{font-size:1rem;line-height:1.35} @media (max-width:640px){.timeline li{grid-template-columns:1fr}} /* rule cards */ .rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:1.4rem} .rule{border:1px solid var(--line);border-top:5px solid var(--iron);padding:22px 22px 8px} .rule.pending{border-top-color:var(--sec)} .rule .status{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .55rem;border-radius:3px;background:var(--iron);color:var(--white);margin-bottom:.8rem} .rule.pending .status{background:var(--bone);color:var(--iron)} .rule p{color:var(--iron-soft);font-size:1rem} .rule ul{margin:.3rem 0 1rem;padding-left:1.1rem;color:var(--iron-soft);font-size:1rem} .rule li{margin:.3rem 0} .rule .cite{color:var(--steel-text);font-size:.85rem} /* the rush */ .rush{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px 40px;margin-top:1.4rem} .rush p{color:var(--iron-soft);font-size:1rem} /* start-now table */ .tablewrap{overflow-x:auto;margin-top:1.2rem} table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem} th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top} th{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--steel-text);font-weight:700} td:first-child{font-weight:700;width:30%} td.now{background:var(--bone)} /* how it works: numbered steps (this IS a sequence, so numbered) */ .steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px} .steps li{counter-increment:s;border-top:3px solid var(--iron);padding-top:14px} .steps li::before{content:"Step " counter(s);display:block;font-weight:700;color:var(--sec-text);margin-bottom:.3rem;font-size:.95rem} .steps p{color:var(--iron-soft);font-size:1rem} .steps + .cols,.steps + .posture-note{margin-top:46px;padding-top:40px;border-top:1px solid var(--line)} /* papers */ .paperlist{list-style:none;margin:0 0 1.4rem;padding:0} .paperlist li{display:grid;grid-template-columns:7rem 1fr;gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start} .paperlist .pid{font-weight:700;font-size:.9rem;color:var(--steel-text);font-variation-settings:"wdth" 92} .paperlist .ps{font-size:.85rem;color:var(--steel-text);margin:.3rem 0 0} @media (max-width:640px){.paperlist li{grid-template-columns:1fr}} /* home: the five section cards (a 6px bar in each stripe colour; decoration only) */ .cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px} .card{border:1px solid var(--line);border-top:6px solid var(--iron);padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px} .card.gas{border-top-color:var(--gas)} .card.water{border-top-color:var(--water)} .card.wastewater{border-top-color:var(--wastewater)} .card.electric{border-top-color:var(--electric)} .card.personnel{border-top-color:var(--steel)} .card h2{font-size:1.3rem;letter-spacing:-.01em;font-variation-settings:"wdth" 92} .card h2 a{text-decoration:none} .card h2 a:hover{text-decoration:underline;text-underline-offset:4px} .card p{margin:0} .morelinks{list-style:none;margin:36px 0 0;padding:0;display:flex;gap:10px 28px;flex-wrap:wrap} .morelinks a{font-weight:600;text-underline-offset:4px} /* cast-iron band (posture, closing CTA) */ .band{background:var(--iron);color:var(--white)} section.band + section,section + section.band{border-top:0} .band h2,.band p{color:var(--white)} .band p{color:var(--bone-soft)} .band .cols{margin-top:1.6rem} .band .col p{color:var(--bone-soft)} .band strong{color:var(--white)} .band .close{max-width:74ch;margin:2.4rem 0 0;padding-top:1.9rem;border-top:1px solid rgba(239,235,227,.18);font-size:1.05rem} .band .row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:1rem} .band .btn{background:var(--bone);border-color:var(--bone);color:var(--iron)} .band .btn:hover{background:var(--white);border-color:var(--white)} .band .btn.ghost{background:transparent;color:var(--white);border-color:var(--bone-soft)} .band .btn.ghost:hover{background:var(--iron-hover)} .band :focus-visible{outline-color:var(--bone)} .band .slot{outline-color:var(--bone-soft)} /* contact form */ .contact form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px} .contact label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px} .contact input,.contact select,.contact textarea{width:100%;font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--iron)} .contact .full{grid-column:1/-1} .contact .alt{color:var(--steel-text);font-size:.95rem;margin-top:1.2rem} .contact .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .contact .actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .contact .status{margin:0;font-size:.95rem;color:var(--steel-text)} .contact .status[data-state="ok"]{color:var(--iron);font-weight:600} .contact .status[data-state="error"]{color:#B3261E;font-weight:600} .contact button[disabled]{opacity:.6;cursor:progress} @media (max-width:640px){.contact form{grid-template-columns:1fr}} /* 404 */ .notfound{padding:84px 0} .notfound .code{font-weight:700;color:var(--gas-text);letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;margin-bottom:.7rem} .notfound h1{font-size:clamp(2rem,4.4vw,3rem);max-width:18ch} .notfound p{max-width:56ch} .notfound .lede{font-size:1.15rem;color:var(--iron-soft);margin:1.3rem 0 1.8rem} .notfound .row{display:flex;gap:12px;flex-wrap:wrap}