/*
Theme Name: Rogers Logistics LLC
Theme URI: https://www.rogerslogistics.co/
Author: Rogers Logistics LLC
Description: One-page carrier recruitment site for Rogers Logistics LLC (MC 1696582 / DOT 4341899), built in the visual language of FHWA highway guide signs. Includes the carrier application form, the A2P 10DLC SMS consent block and all four policy sections at their registered anchor URLs.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: All rights reserved
Text Domain: rogers-logistics
Tags: one-page, business, custom-colors, custom-logo, responsive
*/


:root{
  --asphalt:#1F1D1B;--sign:#06553A;--reflective:#F2F4EF;--concrete:#DEDBD3;
  --safety:#F2A007;--slate:#57524A;--rule:rgba(242,244,239,.16);
  --display:'Barlow Condensed',system-ui,sans-serif;
  --util:'Barlow Semi Condensed',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,4rem);--maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;font-family:var(--body);background:var(--reflective);color:var(--asphalt);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--sign)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:820px;margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--safety);color:#231A00;padding:.6rem 1rem;font-family:var(--util);font-weight:600;z-index:99}
.skip:focus{left:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(31,29,27,.96);border-bottom:1px solid var(--rule)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:.65rem var(--pad);display:flex;align-items:center;gap:1.5rem}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.mark-logo{height:34px;width:auto;display:block;flex:none}
@media(min-width:560px){.mark-logo{height:40px}}
.nav-links{display:none;gap:1.25rem}
.nav-links a{font-family:var(--util);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#C8C3BA;text-decoration:none}
.nav-links a:hover{color:var(--reflective)}
.nav-call{font-family:var(--display);font-weight:700;font-size:1.02rem;background:var(--safety);color:#231A00;padding:.42rem .9rem;border-radius:4px;text-decoration:none;white-space:nowrap}
@media(min-width:960px){.nav-links{display:flex}}

/* ---------- hero: an actual guide sign ---------- */
.hero{background:var(--asphalt);padding:clamp(2.6rem,7vw,4.5rem) 0 clamp(2.5rem,6vw,4rem)}
.guide{position:relative;background:var(--sign);border-radius:12px;padding:clamp(1.6rem,4.5vw,3rem) clamp(1.4rem,4vw,3rem) clamp(1.8rem,4.5vw,3rem);margin-top:1.6rem}
.guide::after{content:"";position:absolute;inset:9px;border:3px solid var(--reflective);border-radius:6px;pointer-events:none}
.guide-tab{position:absolute;top:-30px;left:clamp(1rem,4vw,2.4rem);background:var(--sign);border-radius:7px 7px 0 0;padding:.45rem 1rem .5rem;font-family:var(--util);font-weight:600;font-size:.74rem;letter-spacing:.16em;color:var(--reflective);text-transform:uppercase}
.guide-tab::after{content:"";position:absolute;inset:5px 5px 0;border:2px solid var(--reflective);border-bottom:0;border-radius:4px 4px 0 0}
.guide-eyebrow{font-family:var(--util);font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,244,239,.75);margin:0 0 .5rem}
.guide h1{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--reflective);font-size:clamp(2.6rem,9vw,5.4rem);line-height:.9;letter-spacing:.01em;margin:0}
.guide h1 em{display:block;font-style:normal;font-size:.42em;letter-spacing:.06em;color:var(--safety);margin-top:.5rem}
.guide-rule{height:3px;background:rgba(242,244,239,.4);margin:1.4rem 0 1.2rem}
.guide-row{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;font-family:var(--util);font-weight:600;font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;color:var(--reflective)}
.guide-row span{display:flex;align-items:center;gap:.45rem}
.guide-row b{color:var(--safety);font-weight:600}

.hero-lede{max-width:46ch;color:#C8C3BA;font-size:1.06rem;margin:1.8rem 0 0}
.hero-lede strong{color:var(--reflective);font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:1.14rem;text-transform:uppercase;letter-spacing:.03em;padding:.72rem 1.5rem;border-radius:5px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--safety);color:#231A00}
.btn-primary:hover{background:#ffb42b}
.btn-ghost{border-color:rgba(242,244,239,.45);color:var(--reflective)}
.btn-ghost:hover{border-color:var(--reflective)}
.hero-note{font-family:var(--util);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#8A857C;margin-top:1rem}

/* ---------- identity strip ---------- */
.strip{background:var(--concrete);border-bottom:1px solid rgba(31,29,27,.12)}
.strip-in{display:grid;gap:1.2rem 2rem;padding-block:1.5rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0}
.strip dt{font-family:var(--util);font-weight:600;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--slate)}
.strip dd{margin:.18rem 0 0;font-family:var(--display);font-weight:700;font-size:1.22rem;text-transform:uppercase;letter-spacing:.02em}
.strip dd a{color:inherit;text-decoration:none}
.strip dd a:hover{color:var(--sign)}
.strip dd.plain{font-family:var(--body);font-weight:500;font-size:.95rem;text-transform:none;letter-spacing:0;line-height:1.4}

/* ---------- generic section ---------- */
.sec{padding-block:clamp(3rem,7vw,5rem)}
.sec-dark{background:var(--asphalt);color:#C8C3BA}
.sec-tint{background:var(--concrete)}
.eyebrow{font-family:var(--util);font-weight:600;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sign);margin:0 0 .5rem}
.sec-dark .eyebrow{color:var(--safety)}
.sec h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,5vw,2.9rem);line-height:1;text-transform:uppercase;margin:0 0 .5rem}
.sec-dark h2{color:var(--reflective)}
.sec-intro{max-width:60ch;margin:0 0 2.2rem}

/* ---------- about ---------- */
.about{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:860px){.about{grid-template-columns:1.35fr 1fr;gap:3rem}}
.about p{margin:0 0 1rem}
.about-facts{background:var(--concrete);border-left:4px solid var(--sign);border-radius:0 8px 8px 0;padding:1.3rem 1.4rem;align-self:start}
.about-facts dl{margin:0;display:grid;gap:.9rem}
.about-facts dt{font-family:var(--util);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.about-facts dd{margin:.1rem 0 0;font-size:.95rem}

/* ---------- equipment rigs (the picture cards) ---------- */
.rigs{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:2rem}
.rig{margin:0;background:var(--reflective);border:1px solid rgba(31,29,27,.14);border-radius:10px;overflow:hidden}
.rig-plate{position:relative;background:var(--sign);aspect-ratio:21/10;display:block}
.rig-plate>svg,.rig-plate>img{display:block;width:100%;height:100%;object-fit:cover}
.rig-tag{position:absolute;left:0;bottom:0;background:var(--safety);color:#231A00;font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;border-radius:0 5px 0 0}
.rig figcaption{padding:1.2rem 1.3rem 1.4rem}
.rig h3{font-family:var(--display);font-weight:700;font-size:1.55rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .4rem}
.rig p{margin:0 0 .9rem;font-size:.95rem;color:var(--slate)}
.rig ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--slate)}
.rig li{margin-bottom:.25rem}

.tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
.tags li{font-family:var(--util);font-weight:600;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;background:var(--concrete);border-left:3px solid var(--sign);padding:.5rem .85rem;border-radius:0 4px 4px 0}
.sec-tint .tags li{background:var(--reflective)}

/* ---------- reason cards ---------- */
.cards{display:grid;gap:1px;background:rgba(31,29,27,.14);border:1px solid rgba(31,29,27,.14);border-radius:10px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--reflective);padding:1.5rem 1.4rem}
.card h3{font-family:var(--display);font-weight:700;font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em;margin:.7rem 0 .4rem}
.card p{margin:0;font-size:.95rem;color:var(--slate)}
.card-icon{width:32px;height:32px;color:var(--sign)}

/* ---------- how it works ---------- */
.steps{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative;padding-top:1.2rem;border-top:3px solid var(--safety)}
.mile{display:inline-block;background:var(--sign);color:var(--reflective);font-family:var(--util);font-weight:600;font-size:.7rem;letter-spacing:.14em;padding:.28rem .6rem;border-radius:3px;text-transform:uppercase}
.step h3{font-family:var(--display);font-weight:700;font-size:1.45rem;text-transform:uppercase;margin:.7rem 0 .35rem;color:var(--reflective)}
.step p{margin:0;font-size:.95rem}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.quote{margin:0;background:var(--reflective);border:1px solid rgba(31,29,27,.14);border-top:4px solid var(--sign);border-radius:0 0 8px 8px;padding:1.5rem 1.4rem}
.quote blockquote{margin:0 0 1rem;font-size:.98rem;color:var(--asphalt)}
.quote figcaption{font-family:var(--util);font-weight:600;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);border-top:1px solid rgba(31,29,27,.14);padding-top:.8rem}
.quote figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:var(--asphalt)}

/* ---------- faq ---------- */
.faq{border-top:1px solid rgba(31,29,27,.16)}
.faq details{border-bottom:1px solid rgba(31,29,27,.16)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;position:relative;font-family:var(--display);font-weight:700;font-size:1.28rem;text-transform:uppercase;letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font-size:1.5rem;color:var(--sign);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--safety);outline-offset:2px}
.faq p{margin:0 0 1.1rem;font-size:.97rem;color:var(--slate);max-width:66ch}

/* ---------- form ---------- */
.form-card{background:var(--reflective);border-radius:12px;padding:clamp(1.4rem,4vw,2.4rem);border:1px solid rgba(31,29,27,.14)}
.grid2{display:grid;gap:1rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:flex;flex-direction:column}
.field label{font-family:var(--util);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sign);margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%;padding:.65rem .75rem;border:1.5px solid rgba(31,29,27,.28);border-radius:5px;background:#fff;font-family:var(--body);font-size:1rem;color:var(--asphalt)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--safety);outline-offset:1px;border-color:var(--sign)}
.field textarea{min-height:96px;resize:vertical}
.req{color:#9A3B1E}
.form-submit{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.form-submit button{font-family:var(--display);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.03em;background:var(--safety);color:#231A00;border:0;padding:.8rem 1.8rem;border-radius:5px;cursor:pointer}
.form-submit button:hover{background:#ffb42b}
.form-submit button:focus-visible{outline:3px solid var(--sign);outline-offset:2px}
.form-submit p{margin:0;font-size:.85rem;color:var(--slate)}

/* SMS consent block -- wording must stay word for word identical to the "How to opt in" item in the #sms section */
.sms-consent{background:var(--concrete);border-left:4px solid var(--sign);border-radius:0 8px 8px 0;padding:1.1rem 1.2rem;margin:1.4rem 0}
.sms-consent__label{display:block;font-family:var(--util);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sign);margin-bottom:.35rem}
.sms-consent__opt{font-family:var(--body);font-weight:400;font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--slate)}
.sms-consent__input{width:100%;padding:.65rem .75rem;border:1.5px solid rgba(31,29,27,.28);border-radius:5px;background:#fff;font-family:var(--body);font-size:1rem;color:var(--asphalt)}
.sms-consent__input:focus-visible{outline:3px solid var(--safety);outline-offset:1px;border-color:var(--sign)}
.sms-consent__tick{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem}
.sms-consent__tick input{flex:none;width:19px;height:19px;margin-top:.22rem;accent-color:var(--sign)}
.sms-consent__tick input:focus-visible{outline:3px solid var(--safety);outline-offset:2px}
.sms-consent__tick label{font-size:.88rem;line-height:1.55;color:var(--asphalt)}
.sms-consent__tick a{color:var(--sign);text-decoration:underline}
.sms-consent__note{margin:.75rem 0 0;padding-left:1.9rem;font-size:.8rem;line-height:1.5;color:var(--slate)}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2rem}
.contact-grid h3{font-family:var(--display);font-weight:700;font-size:1.35rem;text-transform:uppercase;margin:0 0 .4rem;color:var(--reflective)}
.contact-grid p{margin:0;font-size:.96rem}
.contact-grid a{color:var(--safety);text-decoration:none}
.contact-grid a:hover{text-decoration:underline}
.hours{font-family:var(--util);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;color:var(--reflective)}

/* ---------- legal pointer ---------- */
.legal-links{display:grid;gap:1px;background:rgba(31,29,27,.14);border:1px solid rgba(31,29,27,.14);border-radius:10px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.legal-links a{background:var(--reflective);padding:1.15rem 1.3rem;text-decoration:none;color:var(--asphalt);display:block}
.legal-links a:hover{background:#fff}
.legal-links b{display:block;font-family:var(--display);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;color:var(--sign)}
.legal-links span{font-size:.88rem;color:var(--slate)}

/* ---------- footer ---------- */
footer{background:var(--asphalt);color:#9C968C;padding:2.6rem 0 2rem;border-top:3px solid var(--sign);font-size:.9rem}
footer a{color:#C8C3BA;text-decoration:none}
footer a:hover{color:var(--reflective);text-decoration:underline}
.foot-bar{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-family:var(--util);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase}

/* ---------- legal overlay ----------
   The policies live in the #legal section further down this page. Clicking
   a policy link clones the matching section into this overlay, so there is
   only ever ONE copy of the legal text in the file. */
.legal-modal{position:fixed;inset:0;z-index:100;display:none}
.legal-modal.open{display:block}
.legal-scrim{position:absolute;inset:0;background:rgba(31,29,27,.74)}
.legal-panel{position:relative;max-width:840px;margin:min(6vh,3rem) auto;background:var(--reflective);border-radius:12px;max-height:88vh;overflow-y:auto;box-shadow:0 26px 64px rgba(0,0,0,.45)}
@media(max-width:880px){.legal-panel{margin:0;border-radius:0;max-height:100%;height:100%}}
.legal-head{position:sticky;top:0;z-index:2;background:var(--asphalt);display:flex;align-items:center;gap:1rem;padding:.85rem 1.3rem;border-bottom:3px solid var(--sign)}
.legal-head p{margin:0 auto 0 0;font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--safety)}
.legal-close{background:none;border:1.5px solid rgba(242,244,239,.5);color:var(--reflective);font-family:var(--util);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .85rem;border-radius:4px;cursor:pointer}
.legal-close:hover{border-color:var(--reflective)}
.legal-body{padding:1.7rem 1.5rem .5rem}
.legal-foot{padding:0 1.5rem 1.8rem;font-family:var(--util);font-weight:600;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase}
.legal-foot a{color:var(--sign)}

/* the policy content itself, shared by the overlay and the on-page legal section */
.legal-body section{padding:0;border:0;margin:0}
.legal-body h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1;text-transform:uppercase;margin:0 0 .5rem;color:var(--asphalt)}
.legal-body h3{font-family:var(--display);font-weight:600;font-size:1.4rem;text-transform:uppercase;margin:1.8rem 0 .5rem;color:var(--asphalt)}
.legal-body h4{font-family:var(--util);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sign);margin:0 0 .5rem}
.legal-body p,.legal-body li{color:var(--slate)}
.legal-body ul,.legal-body ol{margin:.7rem 0 .7rem 1.3rem;padding:0}
.legal-body li{margin-bottom:.4rem}
.legal-body strong{color:var(--asphalt);font-weight:600}
.legal-body a{color:var(--sign)}
.legal-body .updated{font-family:var(--util);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sign);margin-bottom:1.4rem;display:block}
.legal-body .callout{background:var(--concrete);border-left:4px solid var(--safety);padding:1.2rem 1.3rem;margin:1.6rem 0;border-radius:0 6px 6px 0}
.legal-body .callout p{color:var(--asphalt)}
.legal-body .contact-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.2rem}
@media(min-width:640px){.legal-body .contact-grid{grid-template-columns:1fr 1fr}}
.legal-body .contact-card{background:var(--concrete);border-radius:8px;padding:1.2rem 1.3rem}
.legal-body .contact-card a{text-decoration:none;font-weight:500}
.legal-body .fill{background:var(--safety);color:#231A00;font-family:var(--util);font-weight:600;font-size:.88em;padding:.05em .45em;border-radius:2px}
.legal-body .spec{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.94rem}
.legal-body .spec th,.legal-body .spec td{text-align:left;vertical-align:top;padding:.6rem .7rem;border-bottom:1px solid rgba(31,29,27,.14)}
.legal-body .spec th{font-family:var(--util);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sign);width:38%}
.legal-body .spec td{color:var(--slate)}
@media(max-width:520px){
  .legal-body .spec th,.legal-body .spec td{display:block;width:100%;border:none;padding:.2rem .7rem}
  .legal-body .spec tr{display:block;border-bottom:1px solid rgba(31,29,27,.14);padding:.5rem 0}
}
.legal-body .consent-box{background:var(--reflective);border:2px dashed var(--sign);border-radius:8px;padding:1.2rem 1.3rem;margin:1.2rem 0}
.legal-body .consent-box .tick{display:flex;gap:.7rem;align-items:flex-start}
.legal-body .consent-box .box{flex:none;width:18px;height:18px;margin-top:.28rem;border:2px solid var(--asphalt);border-radius:3px;background:#fff}
.legal-body .consent-box p{color:var(--asphalt);font-size:.94rem}
.legal-body .stamp{font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sign);display:block;margin-bottom:.6rem}
.legal-body .msgs{list-style:none;margin:1rem 0 0;padding:0}
.legal-body .msgs li{background:var(--concrete);border-left:4px solid var(--sign);border-radius:0 8px 8px 0;padding:.85rem 1rem;margin-bottom:.7rem;font-size:.92rem;color:var(--asphalt);line-height:1.5}
.legal-body .msgs li b{display:block;font-family:var(--util);font-weight:600;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sign);margin-bottom:.3rem}
.legal-body .reply{background:var(--asphalt);color:var(--reflective);border-radius:8px;padding:.9rem 1rem;margin:.7rem 0;font-size:.92rem;line-height:1.5}
.legal-body .reply b{display:block;font-family:var(--util);font-weight:600;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--safety);margin-bottom:.3rem}
.legal-body .kw{display:inline-block;font-family:var(--util);font-weight:600;font-size:.82rem;letter-spacing:.07em;background:var(--asphalt);color:var(--reflective);padding:.12em .5em;border-radius:3px;margin:.15rem .25rem .15rem 0}
.legal-body .no-list{list-style:none;margin-left:0}
.legal-body .no-list li{margin-bottom:.3rem}

/* the policies rendered on the page (as opposed to inside the overlay) */
.sec-legal{background:var(--concrete)}
.legal-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.2rem}
.legal-jump a{font-family:var(--util);font-weight:600;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;background:var(--reflective);border-left:3px solid var(--sign);color:var(--asphalt);padding:.5rem .85rem;border-radius:0 4px 4px 0;text-decoration:none}
.legal-jump a:hover{background:#fff;color:var(--sign)}
.legal-page{background:var(--reflective);border:1px solid rgba(31,29,27,.14);border-radius:12px;padding:clamp(1.4rem,4vw,2.4rem)}
/* The four policies are long. Rather than let them run for screens on end,
   the block is a fixed-height scroll box: every word is still rendered and
   visible with no click, which is what an A2P reviewer has to be able to
   see, but the page stays a sensible length.
   The four gradients are the classic scroll-shadow trick - the two `local`
   ones ride with the content and mask the two `scroll` shadows at the very
   top and bottom, so a shadow shows only on the edge that has more to read. */
.legal-scroll{
  max-height:min(76vh,880px);
  overflow-y:auto;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(var(--reflective) 34%, rgba(242,244,239,0)) top    / 100% 46px no-repeat local,
    linear-gradient(rgba(242,244,239,0), var(--reflective) 66%) bottom / 100% 46px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(31,29,27,.20), rgba(31,29,27,0)) top    / 100% 15px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(31,29,27,.20), rgba(31,29,27,0)) bottom / 100% 15px no-repeat scroll,
    var(--reflective);
}
.legal-scroll:focus-visible{outline:3px solid var(--safety);outline-offset:3px}
.legal-scroll::-webkit-scrollbar{width:12px}
.legal-scroll::-webkit-scrollbar-thumb{background:rgba(31,29,27,.28);border-radius:9px;border:3px solid var(--reflective)}
.legal-scroll::-webkit-scrollbar-thumb:hover{background:rgba(31,29,27,.42)}
.legal-note{font-family:var(--util);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:.9rem 0 0}
/* Printing and reading modes get the whole thing, unclipped. */
@media print{.legal-scroll{max-height:none;overflow:visible;background:var(--reflective)}}
.legal-page>section{margin:0 0 2.4rem;padding:0 0 2.2rem;border-bottom:1px solid rgba(31,29,27,.14)}
.legal-page>section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.legal-page>section h2{scroll-margin-top:80px}

/* ---------- motion ----------
   Content is visible by default no matter what — this must never depend on
   JS succeeding. The .pre class (added only by JS, below) is what creates the
   fade-in, so a JS failure simply means "no animation", never "blank page". */
.reveal{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.reveal.pre{opacity:0;transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal.pre{opacity:1;transform:none;transition:none}
}
:focus-visible{outline:3px solid var(--safety);outline-offset:2px}


/* ---------------------------------------------------------------
   WordPress admin bar + block editor housekeeping
   --------------------------------------------------------------- */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .nav { top: 46px; } }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.alignwide, .alignfull { max-width: 100%; }

/* ---------------------------------------------------------------
   FINISHING PASS (v1.4.0)

   Polish only — no new colours, no new typefaces, nothing that
   changes the copy or the layout of a section. Everything here is
   in the same guide-sign vocabulary the rest of the page uses:
   reflective keylines, safety amber for the one thing that matters
   most, and lane markings where the eye needs a seam.

   Rules are appended rather than edited in place so the original
   block for each component still reads as written.
   --------------------------------------------------------------- */

::selection{background:var(--safety);color:#231A00}

/* Everything that reacts to a pointer moves on the same clock. */
.btn,.nav-call,.nav-links a,.card,.rig,.quote,.form-submit button,
.faq summary,.legal-jump a,.legal-links a,.strip dd a{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,
             transform .18s ease,box-shadow .18s ease
}

/* ---------- nav: reads flat at rest, lifts once the page moves ---------- */
.nav{backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);
     transition:box-shadow .22s ease,background-color .22s ease}
.nav.is-stuck{background:rgba(31,29,27,.98);box-shadow:0 12px 34px rgba(31,29,27,.32)}
@media(min-width:960px){
  .nav-links a{padding-block:.2rem;border-bottom:3px solid transparent}
  .nav-links a:hover{color:var(--reflective);border-bottom-color:var(--safety)}
}
.nav-call:hover{background:#ffb42b}

/* The links used to vanish below 960px, leaving phone-sized visitors with
   no way through the page but scrolling. They now wrap onto a second row
   and scroll sideways — a sign gantry rather than a hamburger. */
@media(max-width:959px){
  html{scroll-padding-top:108px}
  .nav-in{flex-wrap:wrap;gap:.5rem 1rem;padding-bottom:0}
  .nav-links{
    display:flex;order:3;flex-basis:100%;flex-wrap:nowrap;gap:0;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;border-top:1px solid var(--rule);
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:none;white-space:nowrap;padding:.62rem .8rem;scroll-snap-align:start;
               border-bottom:3px solid transparent}
  .nav-links a:first-child{padding-left:0}
  .nav-links a:active{color:var(--safety);border-bottom-color:var(--safety)}
}

/* ---------- hero ---------- */
.hero{position:relative}
/* Signature: the sign panel sits above the road, so the hero ends in one. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:13px;height:4px;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(242,244,239,.5) 0 44px,rgba(242,244,239,0) 44px 88px)
}
.guide{box-shadow:0 24px 54px rgba(0,0,0,.34)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary:hover{box-shadow:0 10px 24px rgba(242,160,7,.3)}

/* ---------- section headings get the wordmark's amber underscore ---------- */
.sec h2.reveal{position:relative;padding-bottom:.62rem}
.sec h2.reveal::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;
                      background:var(--safety);border-radius:2px}

/* ---------- identity strip: panel divisions, only once they fit ---------- */
@media(min-width:820px){
  .strip-in>div{padding-left:1.2rem;border-left:2px solid rgba(31,29,27,.18)}
  .strip-in>div:first-child{padding-left:0;border-left:0}
}

/* ---------- cards ---------- */
/* .card sits in a 1px-gap grid, so it brightens instead of lifting. */
.card:hover{background:#fff}
.rig:hover,.quote:hover{transform:translateY(-3px);border-color:rgba(31,29,27,.26);
                        box-shadow:0 16px 34px rgba(31,29,27,.13)}

/* ---------- faq ---------- */
.faq summary:hover,.faq details[open] summary{color:var(--sign)}

/* ---------- form ---------- */
.form-card{box-shadow:0 18px 44px rgba(31,29,27,.1)}
.field input::placeholder,.field textarea::placeholder,.sms-consent__input::placeholder{color:#9A948A}
.field input:hover,.field select:hover,.field textarea:hover,.sms-consent__input:hover{
  border-color:rgba(31,29,27,.45)}
/* Only flags a field once the applicant has actually left it wrong. */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{
  border-color:#9A3B1E;background:#FFF7F4}
@media(max-width:560px){
  .form-submit{flex-direction:column;align-items:stretch}
  .form-submit button{width:100%}
}

/* ---------- footer: the amber dash off the wordmark ---------- */
footer{border-top:0;background-repeat:no-repeat;background-size:100% 4px;background-position:top;
  background-image:linear-gradient(90deg,var(--sign) 0 54%,var(--safety) 54% 68%,var(--sign) 68% 100%)}

/* ---------- motion off ---------- */
@media(prefers-reduced-motion:reduce){
  .btn,.nav-call,.nav-links a,.card,.rig,.quote,.form-submit button,
  .faq summary,.legal-jump a,.legal-links a,.strip dd a,.nav{transition:none}
  .btn:hover,.btn:active,.rig:hover,.quote:hover{transform:none}
}

/* ---------- print: the dark sections would print as white on white ---------- */
@media print{
  .nav,.legal-modal,.skip,.cta-row,.hero::after{display:none !important}
  .hero,.sec-dark,.guide,footer{background:#fff !important;color:#000 !important;box-shadow:none !important}
  .guide::after{border-color:#000 !important}
  .guide h1,.guide-eyebrow,.guide-row,.hero-lede,.hero-lede strong,.hero-note,
  .sec-dark h2,.step h3,.step p,.contact-grid h3,.hours,footer,footer a{color:#000 !important}
  .guide-rule{background:#000 !important}
  a{color:#000 !important}
}