/* Guttenberg Auto Body — shared stylesheet */ :root{ --ink:#15171c; --ink-2:#22252d; --paper:#ffffff; --bg:#f4f6f3; --line:#e2e5e0; --green:#0f8a3c; --green-d:#0a6e2f; --green-br:#17c04c; --muted:#5b626b; --maxw:1160px; --edge:clamp(22px,3.6vw,60px); /* full-width header/dropdown side padding */ --t-fast:.25s; --t-med:.5s; /* motion durations (paired with --ease-expo) */ --radius:10px; --shadow:0 1px 2px rgba(21,23,28,.06),0 8px 24px rgba(21,23,28,.06); --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--font);color:var(--ink);background:var(--paper); line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--green-d);text-decoration:none} a:hover{text-decoration:underline} /* keyboard skip-to-content link — hidden until focused */ .skip-link{position:absolute;left:8px;top:-52px;z-index:120;background:var(--green-d);color:#fff; padding:10px 16px;border-radius:8px;font-weight:700;transition:top .2s var(--ease-expo)} .skip-link:focus{top:8px;text-decoration:none} /* ==== motion: scroll reveals + page-load intro (JS adds .in when in view) ==== */ .js .reveal{opacity:0;transform:translateY(14px); transition:opacity var(--t-med) var(--ease-expo),transform var(--t-med) var(--ease-expo); transition-delay:calc(var(--i,0)*70ms)} .js .reveal.in{opacity:1;transform:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} h1,h2,h3{line-height:1.2;letter-spacing:-.01em;margin:0 0 .5em} h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800} h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800} h3{font-size:1.18rem;font-weight:700} p{margin:0 0 1rem} .eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:.8rem;font-weight:700;color:var(--green-d);margin:0 0 .5rem} /* ---- Utility bar (address + phone, above everything) ---- */ .util{background:var(--ink);color:#e9ebee;font-size:.9rem} .util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px;flex-wrap:wrap} .util a{color:#e9ebee} .util .u-addr{display:flex;align-items:center;gap:8px;opacity:.92} .util .u-phone{display:flex;align-items:center;gap:14px;font-weight:600} .util .u-phone .hours{opacity:.7;font-weight:400} .util svg{flex:0 0 auto} .util .u-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end} /* Language switch. Outlined pill on the dark util bar so it reads as an action rather than another line of contact detail, without competing with the CTA. */ .u-lang{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px; border:1px solid rgba(233,235,238,.32);font-weight:600;line-height:1;white-space:nowrap; transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)} .util .u-lang:hover{background:var(--green);border-color:var(--green);color:#fff;text-decoration:none} .u-lang:focus-visible{outline:2px solid var(--green-br);outline-offset:2px} .u-lang svg{opacity:.85} .util .u-lang:hover svg{opacity:1} /* the duplicate that lives inside the mobile nav panel — hidden on desktop */ .u-lang--mobile{display:none} /* ---- Header / nav ---- */ .site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line)} .site-header .wrap{display:flex;align-items:center;gap:20px;min-height:74px} /* offset in-page anchor jumps so the sticky header doesn't cover the target heading */ :target{scroll-margin-top:100px} h1[id],h2[id],h3[id]{scroll-margin-top:100px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink)} .brand:hover{text-decoration:none} .brand b{color:var(--green)} .brand img{height:58px;width:auto;display:block} nav.main{flex:1;margin-left:clamp(30px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px} nav.main a{color:var(--ink-2);font-weight:600;font-size:.98rem} /* Keep the TOP-LEVEL nav labels on one line — the longer Spanish ones ("Sobre nosotros") otherwise break in two between 861px and ~1000px. Scoped to direct children only: the mega-menu links are also inside nav.main and MUST stay wrappable, or long service names overflow their column and overlap the next one. */ nav.main>a,nav.main>.has-drop>.drop-toggle{white-space:nowrap} nav.main .mega a{white-space:normal} nav.main a:hover{color:var(--green-d);text-decoration:none} /* ===== Services mega-menu (HB-Body-style full-width curtain) ===== */ :root{--ease-expo:cubic-bezier(0.19,1,0.22,1)} .has-drop{display:flex;align-items:center} .drop-toggle{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:.98rem;color:var(--ink-2);background:none;border:0;padding:0;cursor:pointer} .drop-toggle:hover,.has-drop.open .drop-toggle{color:var(--green-d)} .drop-toggle .chev{transition:transform .4s var(--ease-expo)} .has-drop.open .chev{transform:rotate(180deg)} /* the curtain — anchored full-bleed under the header (which is the containing block via its backdrop-filter); the white sheet is a ::before that scales down from the top, content cascades in over it */ .mega{position:absolute;top:100%;left:0;right:0;padding:0; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--ease-expo),visibility 0s linear .6s;z-index:60} .mega::before{content:"";position:absolute;inset:0;background:#fff; border-bottom:1px solid var(--line);border-radius:0 0 30px 30px; box-shadow:0 34px 60px -26px rgba(21,23,28,.30); transform:scaleY(0);transform-origin:top center; transition:transform .6s var(--ease-expo)} .has-drop.open .mega{opacity:1;visibility:visible;pointer-events:auto; transition:opacity .25s var(--ease-expo),visibility 0s} .has-drop.open .mega::before{transform:scaleY(1)} .mega-inner{position:relative;z-index:1;max-width:none;margin:0; padding:38px var(--edge) 46px;display:grid;grid-template-columns:1.25fr 1fr; gap:clamp(30px,3vw,56px);align-items:start} .mega-lists{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 22px} .mega-col{display:flex;flex-direction:column;gap:9px;min-width:0} .mega-head{font-weight:800;font-size:.64rem;letter-spacing:.04em;text-transform:uppercase; color:var(--ink);padding-bottom:8px;margin-bottom:2px;border-bottom:2px solid var(--green); display:flex;align-items:flex-end;min-height:2.5em;line-height:1.2} a.mega-head:hover{color:var(--green-d);text-decoration:none} .mega-link{display:flex;align-items:center;justify-content:space-between;gap:10px; color:var(--ink-2);font-size:.84rem;font-weight:500;line-height:1.3} .mega-link>span{transition:color .4s var(--ease-expo)} .mega-link .mega-arrow{flex:0 0 auto;color:var(--green);opacity:0;transform:translateX(-5px); transition:opacity .4s var(--ease-expo),transform .4s var(--ease-expo)} .mega-link:hover,.mega-link:focus-visible{text-decoration:none} .mega-link:hover>span,.mega-link:focus-visible>span{color:var(--green-d)} .mega-link:hover .mega-arrow,.mega-link:focus-visible .mega-arrow{opacity:1;transform:translateX(0)} /* content cascade — links rise+fade with staggered delays only while open */ .mega-col>*{opacity:0;transform:translateY(9px); transition:opacity .45s var(--ease-expo),transform .45s var(--ease-expo)} .has-drop.open .mega-col>*{opacity:1;transform:none;transition-delay:.12s} .has-drop.open .mega-col>*:nth-child(2){transition-delay:.16s} .has-drop.open .mega-col>*:nth-child(3){transition-delay:.2s} .has-drop.open .mega-col>*:nth-child(4){transition-delay:.24s} .has-drop.open .mega-col>*:nth-child(5){transition-delay:.28s} .has-drop.open .mega-col>*:nth-child(6){transition-delay:.32s} .has-drop.open .mega-col>*:nth-child(7){transition-delay:.36s} /* right-side spotlight: two image cards that swap on hover */ /* Featured spotlight fades in LAST — only after the curtain is open (delay on open only) */ .mega-spotlight{opacity:0;transform:translateY(9px); transition:opacity .35s var(--ease-expo),transform .35s var(--ease-expo)} .has-drop.open .mega-spotlight{opacity:1;transform:none;transition-delay:.45s} .mega-spot-eyebrow{display:block;font-size:.72rem;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--muted);margin-bottom:12px;min-height:1em; transition:color .4s var(--ease-expo)} .has-drop.open .mega-spot-eyebrow.is-service{color:var(--green-d)} .mega-spot-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* Narrow desktop / tablet-landscape (861px, where the mobile menu takes over, up to 1150px). The mega-menu keeps its 4 category columns AND the two spotlight cards down to here, which squeezes each column to ~85px — narrower than a single Spanish word like "Guardafangos", so labels spilled into the next column. Drop the decorative spotlight and give the lists the full width; each column then gets ~185px, which fits both languages. */ @media(min-width:861px) and (max-width:1150px){ .mega-inner{grid-template-columns:1fr;padding-top:30px;padding-bottom:34px} .mega-spotlight{display:none} .mega-lists{gap:12px 20px} } .spot{position:relative;display:block;border-radius:20px;overflow:hidden;background:var(--bg); aspect-ratio:4/5;isolation:isolate} .spot::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,transparent 42%,rgba(9,12,10,.74))} .spot-img{position:absolute;inset:0;z-index:0} /* two stacked layers cross-fade: outgoing photo holds while incoming dissolves in */ .spot-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:transform .8s var(--ease-expo),opacity .6s ease} .spot-img img.is-active{opacity:1} .spot:hover .spot-img img,.spot:focus-visible .spot-img img{transform:scale(1.06)} .spot-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end; justify-content:space-between;gap:8px;padding:14px;color:#fff} .spot-title{font-weight:700;font-size:.95rem;line-height:1.15} .spot-badge{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ink); display:grid;place-items:center; transition:background .5s var(--ease-expo),color .5s var(--ease-expo),opacity var(--t-fast) var(--ease-expo),transform var(--t-fast) var(--ease-expo)} .spot-badge svg{width:15px;height:15px} .spot:hover .spot-badge,.spot:focus-visible .spot-badge{background:var(--green);color:#fff} /* badge shows only on the resting Featured cards, not while previewing a service */ .mega-spotlight.previewing .spot-badge{opacity:0;transform:scale(.7);pointer-events:none} /* full-page dim behind the open curtain (JS injects .nav-scrim on ) */ .nav-scrim{position:fixed;inset:0;z-index:30;background:rgba(12,16,13,.32); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .5s var(--ease-expo),visibility 0s linear .5s} .nav-scrim.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s var(--ease-expo),visibility 0s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .mega,.mega::before,.mega-col>*,.mega-spotlight,.mega-link .mega-arrow,.spot-img img,.nav-scrim,.drop-toggle .chev{ transition-duration:.01ms!important;transition-delay:0s!important} .mega::before{transform:scaleY(1)} .mega-col>*{opacity:1;transform:none} /* reveals appear instantly; hover/press give no movement */ .js .reveal{opacity:1!important;transform:none!important;transition:none!important} .btn,.pillar,.card,.svc-card,.card-ic,.pillar-media img,.svc-card img,.svc-tile img,.svc-tile-cap svg{transition:none!important} .btn:hover,.btn:active,.pillar:hover,.card:hover,.svc-card:hover{transform:none!important} .pillar:hover .pillar-media img,.svc-card:hover img,.card:hover .card-ic,.svc-tile:hover img,.spot:hover .spot-img img,.spot:focus-visible .spot-img img{transform:none!important} .svc-tile-cap svg{opacity:1;transform:none} /* CTA pills: no roll; a faint opacity shift is the only hover feedback */ .ibtn__track,.ibtn__roll{transition:none!important} .ibtn:hover .ibtn__track,.ibtn:hover .ibtn__roll{transform:none!important} .ibtn:hover{opacity:.9} } .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;border-radius:8px;padding:12px 18px;font-size:1rem;cursor:pointer;border:2px solid transparent; transition:transform var(--t-fast) var(--ease-expo),box-shadow var(--t-fast) var(--ease-expo),background var(--t-fast) var(--ease-expo),border-color var(--t-fast) var(--ease-expo),color var(--t-fast) var(--ease-expo)} .btn:hover{text-decoration:none;transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.985);transition-duration:.09s} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink);color:var(--ink);box-shadow:0 10px 22px -10px rgba(21,23,28,.3)} /* ===== Radian-style CTA pill (.ibtn): masked label + rolling circular icon ===== */ .ibtn{position:relative;display:inline-flex;align-items:center;gap:.7em; border-radius:50vw;padding:.6em 1.05em .6em 1.3em;font-size:1rem;font-weight:700;line-height:1.2; cursor:pointer;border:2px solid transparent;text-decoration:none} .ibtn:hover{text-decoration:none} .ibtn--lg{font-size:1.06rem;padding:.72em 1.25em .72em 1.5em} /* label roll — two identical copies in a mask (the ONLY hover feedback) */ .ibtn__label{position:relative;display:block;overflow:hidden;height:1.2em} .ibtn__track{display:flex;flex-direction:column;transition:transform var(--t-med) var(--ease-expo)} .ibtn__track>span{display:block;height:1.2em;line-height:1.2;white-space:nowrap} .ibtn:hover .ibtn__track{transform:translateY(-1.2em)} /* circular rolling icon */ .ibtn__icon{position:relative;flex:0 0 auto;width:1.85em;height:1.85em;border-radius:50%; border:1.5px solid currentColor;overflow:hidden} .ibtn__roll{display:flex;flex-direction:column;height:200%;transition:transform var(--t-med) var(--ease-expo)} .ibtn__roll>span{flex:0 0 50%;display:grid;place-items:center} .ibtn__roll svg{width:.9em;height:.9em;display:block} .ibtn:hover .ibtn__roll{transform:translateY(-50%)} /* variants — colors stay constant on hover; only the label/icon roll animates */ .ibtn--solid{background:var(--green);color:#fff} .ibtn--ghost{background:#fff;color:var(--ink);border-color:var(--line)} /* header pill keeps white text (nav.main a:hover would otherwise recolor it) */ nav.main a.ibtn,nav.main a.ibtn:hover{color:#fff} /* inside the green cta-final band: white pill / outline-white ghost (no hover change) */ .cta-final .ibtn--solid{background:#fff;color:var(--green-d)} .cta-final .ibtn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)} .nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:9px 11px;cursor:pointer;min-width:44px;min-height:44px} .nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0} /* ---- Hero ---- */ .hero{position:relative;color:#fff;background:var(--ink);padding:0} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:1;filter:brightness(1.09) contrast(1.03) saturate(1.06)} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.35) 0%,rgba(10,11,14,.90) 100%)} /* shade restored, bottom stop raised .78 -> .90 for text legibility (Stanley 2026-08-17) */ .hero .wrap{position:relative;z-index:2;max-width:600px;margin:0;padding:70px 20px 56px clamp(24px,5vw,72px);min-height:clamp(440px,46vw,700px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start} .hero h1{color:#fff;margin-bottom:.12em;font-size:clamp(2.4rem,5.6vw,3.7rem);line-height:1.06;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 16px rgba(0,0,0,.55)} .hero p.lead{font-size:clamp(1.05rem,2.3vw,1.28rem);color:#eef0ee;max-width:640px} .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .hero .callout{margin-top:18px;font-size:.98rem;color:#dfe3df} .hero .callout b{color:#fff} /* ---- Trust strip ---- */ .trust{background:var(--ink-2);color:#eef0ee} .trust .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 26px;padding:16px 20px} .trust .t{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.96rem} .trust .t svg{flex:0 0 auto;color:var(--green-br)} /* ---- Sections ---- */ section{padding:64px 0} .pad-b-sm{padding-bottom:24px} .pad-t-sm{padding-top:32px} .section-head{max-width:720px;margin:0 auto 40px;text-align:center} .section-head.left{margin-left:0;text-align:left} .lede{font-size:1.15rem;color:var(--ink-2)} .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .split.alt .media{order:2} .split .media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover} .split h2{margin-bottom:.4em} .split .more{font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-top:6px} .band{background:var(--bg)} .band-dark{background:var(--ink);color:#eef0ee} .band-dark h2,.band-dark h3{color:#fff} .band-dark .lede{color:#c9cdd2} /* cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px; transition:transform var(--t-fast) var(--ease-expo),box-shadow var(--t-fast) var(--ease-expo),border-color var(--t-fast) var(--ease-expo)} .card:hover{transform:translateY(-3px);box-shadow:0 18px 38px -16px rgba(21,23,28,.18);border-color:#d6dad4} .card-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--green);color:#fff;margin-bottom:16px;box-shadow:0 6px 16px rgba(15,138,60,.28);transition:transform var(--t-fast) var(--ease-expo)} .card:hover .card-ic{transform:scale(1.06)} .card-ic svg{width:27px;height:27px} .card h3{margin-bottom:.35em} .card p{color:var(--muted);font-size:.97rem;margin:0} /* pillar grid (home "what we do") — 2x2 big boxes */ .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:8px} .pillar{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--t-fast) var(--ease-expo),box-shadow var(--t-fast) var(--ease-expo)} .pillar:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(21,23,28,.08),0 22px 46px rgba(21,23,28,.15)} .pillar-media{aspect-ratio:16/10;overflow:hidden} .pillar-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease-expo)} .pillar:hover .pillar-media img{transform:scale(1.045)} .pillar-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1} .pillar-body h3{margin:0 0 .4em;font-size:1.35rem;color:var(--ink)} .pillar-body p{color:var(--muted);font-size:1.03rem;line-height:1.55;margin:0 0 18px;flex:1} .pillar-more{font-weight:700;color:var(--green-d);display:inline-flex;align-items:center;gap:6px;font-size:.98rem;transition:gap var(--t-fast) var(--ease-expo)} .pillar:hover .pillar-more{gap:11px} .all-services{text-align:center;margin:34px 0 0} .all-services .btn svg{margin-left:2px} /* insurance logo marquee */ .insurers .section-head{margin-bottom:30px} .logo-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .logo-track{display:flex;gap:64px;width:max-content;animation:logo-scroll 42s linear infinite} .logo-marquee:hover .logo-track{animation-play-state:paused} .logo-set{display:flex;align-items:center;gap:64px} .logo-set img{width:auto;flex:0 0 auto;filter:grayscale(1);opacity:.58;transition:filter .2s ease,opacity .2s ease} .logo-set img:hover{filter:none;opacity:1} @keyframes logo-scroll{to{transform:translateX(calc(-50% - 32px))}} .insurers-note{text-align:center;color:var(--muted);font-size:.92rem;margin:26px 0 0} .insurers-note a{font-weight:700;color:var(--green-d);display:inline-flex;align-items:center;gap:6px} /* accident steps + callout + check list (insurance page) */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px} .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px} .step .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:15px;box-shadow:0 6px 16px rgba(15,138,60,.28)} /* icon badge on the town "getting your car to us" steps. Same visual language as .card-ic, sized down to sit in the narrower step card (Stanley 2026-08-17). */ .step-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:12px;background:var(--green);color:#fff;margin-bottom:14px; box-shadow:0 6px 16px rgba(15,138,60,.28)} .step-ic svg{width:23px;height:23px} .step h3{margin:0 0 .4em;font-size:1.06rem;color:var(--ink)} .step p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5} .callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);padding:24px 26px} .callout h3{margin:0 0 .45em;color:var(--ink)} .callout p{color:var(--muted);margin:0 0 .8em} .callout p:last-child{margin-bottom:0} .check-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px} .check-list li{display:flex;gap:12px;align-items:flex-start} .check-list li svg{color:var(--green);flex:0 0 auto;margin-top:2px} .check-list li span{color:var(--ink-2)} @media(prefers-reduced-motion:reduce){ .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:34px 52px} .logo-set:nth-child(2){display:none} } /* service link grid */ /* credentials */ .creds{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center} .creds img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover} .creds ul{list-style:none;padding:0;margin:14px 0 0} .creds li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)} .creds li svg{flex:0 0 auto;color:var(--green-br);margin-top:3px} /* areas + map */ .areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .areas span{background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-weight:600;font-size:.95rem} .mapwrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)} .mapwrap iframe{display:block;width:100%;height:340px;border:0} /* FAQ (scaffold — filled later) */ .faq details{border:1px solid var(--line);border-radius:10px;padding:2px 18px;margin-bottom:12px;background:#fff} .faq summary{position:relative;font-weight:700;cursor:pointer;padding:16px 34px 16px 0;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;line-height:1;color:var(--green-br)} .faq details[open] summary::after{content:"\2013"} .faq details p{margin:0 0 16px;color:var(--muted);line-height:1.55} .faq .yn{color:var(--green);font-weight:700} .faq .empty{color:var(--muted);font-style:italic} /* CTA band */ .cta-final{background:var(--green);color:#fff;text-align:center} .cta-final h2{color:#fff} .cta-final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .cta-final .btn-ghost:hover{border-color:#fff;color:#fff} /* footer */ .site-footer{background:var(--ink);color:#c7cbd0;font-size:.95rem;padding:52px 0 120px} .site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px} .site-footer h4{color:#fff;font-size:1rem;margin:0 0 14px} .site-footer a{color:#c7cbd0} .site-footer a:hover{color:#fff} .site-footer ul{list-style:none;padding:0;margin:0} .site-footer li{margin-bottom:9px} .site-footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;color:#8a9098;display:flex;justify-content:center;align-items:center;gap:12px 26px;flex-wrap:wrap;text-align:center} .site-footer .legal-links{display:flex;justify-content:center;gap:26px;flex-wrap:wrap} .site-footer .legal-links a{color:#8a9098;text-decoration:underline;text-underline-offset:3px} .site-footer .legal-links a:hover{color:#fff} /* sticky mobile call bar */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--green);box-shadow:0 -4px 16px rgba(0,0,0,.18)} .callbar a{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-weight:800;padding:15px;font-size:1.08rem} .callbar a:hover{text-decoration:none} /* breadcrumbs */ .crumbs{font-size:.9rem;color:var(--muted);padding-top:18px} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--green-d)} /* responsive */ @media(max-width:860px){ /* The util bar sits ABOVE the sticky header, so it scrolls out of reach on a phone and takes the language switch with it. Show the duplicate that lives inside the hamburger panel instead, styled to match the nav rows. */ .util .wrap{justify-content:center;gap:6px 16px;padding-top:8px;padding-bottom:8px} .util .u-right{width:100%;justify-content:center} nav.main.open .u-lang--mobile{display:inline-flex;margin-top:14px;align-self:flex-start; border-color:var(--line);color:var(--ink-2)} nav.main.open .u-lang--mobile:hover{background:var(--green);border-color:var(--green);color:#fff} nav.main{display:none} nav.main.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 16px} nav.main.open a{padding:12px 0;width:100%;border-bottom:1px solid var(--line)} nav.main.open .btn{margin-top:12px} nav.main.open .has-drop{width:100%;flex-direction:column;align-items:flex-start} nav.main.open .drop-toggle{width:100%;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)} nav.main.open .mega{position:static;display:none;opacity:1;visibility:visible;pointer-events:auto;width:100%;padding:0;margin:0} nav.main.open .mega::before{display:none} nav.main.open .has-drop.open .mega{display:block} nav.main.open .mega-inner{display:block;max-width:none;margin:0;padding:4px 0 10px 8px} nav.main.open .mega-lists{display:grid;grid-template-columns:1fr;gap:0} nav.main.open .mega-spotlight{display:none} nav.main.open .mega-col{gap:0} nav.main.open .mega-col>*{opacity:1;transform:none;transition:none} nav.main.open .mega-link{padding:9px 0;width:auto;border-bottom:0} nav.main.open .mega-link .mega-arrow{display:none} nav.main.open .mega-head{width:auto;padding:12px 0 6px;margin-top:6px;border-bottom:2px solid var(--green)} .nav-scrim{display:none} .nav-toggle{display:block} .split,.creds{grid-template-columns:1fr;gap:26px} .split.alt .media{order:0} .trust .wrap{display:grid;grid-template-columns:1fr 1fr} .cards{grid-template-columns:1fr} .pillars{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr} .check-list{grid-template-columns:1fr} .site-footer .cols{grid-template-columns:1fr;gap:28px} .callbar{display:block} .util .u-addr .hide-sm{display:none} } @media(max-width:480px){ .hero .cta-row .btn{width:100%;justify-content:center} .pillars{grid-template-columns:1fr} .steps{grid-template-columns:1fr} } /* ============ sub-page components ============ */ .page-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden} .page-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28} .page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.55),rgba(10,11,14,.8))} .page-hero .wrap{position:relative;z-index:2;padding:34px 20px 46px;max-width:820px} .page-hero h1{color:#fff;margin:.15em 0 .3em} .page-hero .lead{color:#e7eae7;font-size:clamp(1.02rem,2vw,1.2rem)} .page-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .page-hero .crumbs{font-size:.86rem;color:#b8bec6} .page-hero .crumbs a{color:#cdd2d8} .page-hero .crumbs a:hover{color:#fff} .svc-grid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start} .prose>*:first-child{margin-top:0} .prose h2{margin-top:1.6em} .prose img{border-radius:var(--radius);box-shadow:var(--shadow);margin:8px 0 22px;width:100%;aspect-ratio:16/9;object-fit:cover} .checklist{list-style:none;padding:0;margin:0 0 1.2rem} .checklist li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)} .checklist li svg{flex:0 0 auto;color:var(--green);margin-top:4px} .sidecard{position:sticky;top:92px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px} .sidecard h3{margin:0 0 6px} .sidecard .ph{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:2px 0 4px;display:block} .sidecard .btn{width:100%;justify-content:center;margin-top:6px} .sidecard .meta{margin-top:16px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px} .sidecard .meta b{color:var(--ink)} .sidecard .related{margin-top:16px;border-top:1px solid var(--line);padding-top:14px} .sidecard .related a{display:block;padding:7px 0;font-weight:600;color:var(--ink-2);font-size:.95rem} .sidecard .related a:hover{color:var(--green-d)} .svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; transition:border-color var(--t-fast) var(--ease-expo),transform var(--t-fast) var(--ease-expo),box-shadow var(--t-fast) var(--ease-expo)} .svc-card:hover{border-color:var(--green);text-decoration:none;transform:translateY(-4px);box-shadow:0 20px 42px -18px rgba(21,23,28,.2)} .svc-card img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .55s var(--ease-expo)} .svc-card:hover img{transform:scale(1.045)} .svc-card .b{padding:18px 18px 20px} .svc-card h3{margin:0 0 .3em;color:var(--ink);font-size:1.1rem} .svc-card p{margin:0;color:var(--muted);font-size:.95rem} .svc-card .go{margin-top:12px;color:var(--green-d);font-weight:700;display:inline-flex;align-items:center;gap:6px;font-size:.95rem} /* services index page — compact, scannable photo directory (all services at a glance) */ .svc-index{padding:44px 0 10px} .svc-index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .svc-cat{grid-column:1/-1;margin:20px 0 2px;font-size:.72rem;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--green-d)} .svc-cat:first-child{margin-top:0} .svc-tile{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--bg); aspect-ratio:4/3;isolation:isolate} .svc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease-expo)} .svc-tile::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,transparent 38%,rgba(9,12,10,.82))} .svc-tile:hover img,.svc-tile:focus-visible img{transform:scale(1.06)} .svc-tile:hover,.svc-tile:focus-visible{text-decoration:none} .svc-tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end; justify-content:space-between;gap:8px;padding:12px 13px;color:#fff} .svc-tile-cap>span:first-child{font-weight:700;font-size:.98rem;line-height:1.16} .svc-tile-cap svg{flex:0 0 auto;width:16px;height:16px;opacity:0;transform:translateX(-4px); transition:opacity .3s var(--ease-expo),transform .3s var(--ease-expo)} .svc-tile:hover .svc-tile-cap svg,.svc-tile:focus-visible .svc-tile-cap svg{opacity:1;transform:none} @media(max-width:960px){.svc-index-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.svc-index-grid{grid-template-columns:repeat(2,1fr);gap:10px} .svc-tile-cap>span:first-child{font-size:.9rem}} /* before / after */ .ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ba .pair.trio{grid-template-columns:1fr 1fr 1fr} @media(max-width:640px){.ba .pair.trio{grid-template-columns:1fr 1fr}} .ba figure{margin:0;position:relative} .ba figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)} .ba .tag{position:absolute;top:12px;left:12px;background:rgba(21,23,28,.85);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px} .ba .empty{border:2px dashed var(--line);border-radius:var(--radius);aspect-ratio:4/5;display:grid;place-items:center;color:var(--muted);text-align:center;padding:16px;font-size:.92rem} .ba figcaption{margin-top:8px;font-size:.9rem;color:var(--muted)} /* team */ .team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:760px;margin:0 auto} .team .m{text-align:center} .team .m .m-ph{display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden; background:#e9ece8} .team .m .m-ph img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} .team .m .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:#e9ece8} /* Joel's photo was shot wider and lower than the other two, so his face sat small and low in the circle. Zoom and lift it to match Yama's framing. */ .team .m-ph--joel img{transform:scale(1.18) translateY(-6.5%);transform-origin:center 45%} .team .m .ph{display:grid;place-items:center;color:var(--muted);font-size:.85rem} .team .m h3{margin:14px 0 0;font-size:1.05rem} .team .m p{margin:2px 0 0;color:var(--muted);font-size:.92rem} /* contact */ /* The estimate form left, details right, map full width underneath. The form column is capped at the card's own 440px and the details take the rest: an even 1fr 1fr would leave the card floating in half a page of white. */ .contact-grid{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr); gap:40px;align-items:start} .contact-map{margin-top:40px} /* Source order is form, then details -- so it is also the reading order and the tab order, at every width, with no CSS reordering to make the two disagree. Stacked, that puts the form first, which is the page's job; the phone number is still one tap away in the header and the util bar above it. */ .contact-list{list-style:none;padding:0;margin:0} .contact-list li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)} .contact-list li svg{flex:0 0 auto;color:var(--green);margin-top:3px} .contact-list b{display:block} @media(max-width:860px){ .svc-grid{grid-template-columns:1fr;gap:30px} .sidecard{position:static} .svc-cards{grid-template-columns:1fr} .team{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr;gap:26px} .contact-map{margin-top:26px} } /* ---- town-page service sections: four tone-banded groups + service cards ---- */ .tsec{padding:64px 0} .tsec .section-head{margin-bottom:30px} .tsec .section-head .lede{max-width:70ch} .tsec-a{background:#fff} .tsec-b{background:#f1f7f3} .tsec-c{background:var(--bg)} .tsec-d{background:#eaf3ee} /* Phrases that must never break mid-way. Used on town names in headings so a heading wraps as "Collision and auto body repair for / West New York drivers" instead of splitting the town itself (Stanley 2026-08-17). */ .nb{white-space:nowrap} /* Spanish runs ~20% longer than English, which pushed the home hero's two-line H1 onto a third line ("Taller de Carrocería" needs 540px in a 516px box). Scoped to [lang=es] so the English layout is untouched. */ /* Spanish notice on the three English-only legal pages, so a reader arriving from /es/ is told why the page is in English and how to get back. */ .es-notice{background:var(--bg);border-left:3px solid var(--green);padding:10px 14px; border-radius:0 6px 6px 0;font-size:.92rem;color:var(--ink-2);margin:14px 0 18px} .es-notice a{color:var(--green-d);font-weight:600} /* Spanish headlines run longer, so the one-column hero gets more room. NOT the split hero: that one is a grid and sets its own width, and this rule outranks it on specificity — it was squeezing the two columns into 664px and dropping the card on top of the headline. */ html[lang="es"] .hero .wrap{max-width:664px} html[lang="es"] .hero--town .wrap{max-width:760px} /* each group gets its own accent colour on the eyebrow so it reads as a new service. The decorative bar above the H2 was removed at Stanley's request (2026-08-17) — the eyebrow colour + section background carry the change. */ .tsec-a .eyebrow{color:var(--green-d)} .tsec-b .eyebrow{color:#0b7f5a} .tsec-c .eyebrow{color:#3c6e2f} .tsec-d .eyebrow{color:var(--green)} .tcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden; display:flex;flex-direction:column;transition:transform var(--t-fast,.25s) var(--ease-expo,ease),box-shadow var(--t-fast,.25s) var(--ease-expo,ease)} .tcard-img{display:block;width:100%;height:auto;aspect-ratio:720/408;object-fit:cover;background:var(--bg)} .tcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,32,20,.10)} .tcard h3{font-size:1.06rem;margin:17px 20px 8px;line-height:1.25} .tcard>p{margin:0 20px 14px;font-size:.93rem;line-height:1.6;color:var(--ink-2)} .tcard-links{margin:auto 20px 18px;display:flex;flex-direction:column;gap:6px} .tcard-cta{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:.9rem;color:var(--green-d)} .tcard-cta svg{width:15px;height:15px;transition:transform var(--t-fast,.25s) var(--ease-expo,ease)} .tcard:hover .tcard-cta svg{transform:translateX(4px)} .tcard-more{font-size:.82rem;opacity:.72;text-decoration:underline;text-underline-offset:2px} .tcard-more:hover{opacity:1} @media(max-width:960px){.tcard-grid{grid-template-columns:repeat(2,1fr)}.tsec{padding:52px 0}} @media(max-width:600px){.tcard-grid{grid-template-columns:1fr;gap:18px}} @media(prefers-reduced-motion:reduce){.tcard:hover{transform:none}.tcard:hover .tcard-cta svg{transform:none}} /* image attribution line (required by CC BY on licensed town photos) */ .img-credit{margin:14px 0 0;font-size:.76rem;line-height:1.5;opacity:.6} .img-credit a{text-decoration:underline;text-underline-offset:2px} rgba(10,11,14,.90) 0%, rgba(10,11,14,.80) 36%, rgba(10,11,14,.46) 68%, rgba(10,11,14,.24) 100%)} @media(max-width:860px){ } /* breadcrumbs inside the home-style hero (location pages) */ .hero .crumbs{font-size:.84rem;color:#e2e6ea;text-shadow:0 1px 10px rgba(0,0,0,.6); /* .hero .wrap is a column flex packed to flex-end; auto bottom margin absorbs the free space and pushes the breadcrumb to the TOP of the hero (Stanley 2026-08-17). */ margin:0 0 auto} .hero .crumbs a{color:#f0f3f5} .hero .crumbs a:hover{color:#fff} .hero p.lead{text-shadow:0 1px 12px rgba(0,0,0,.6)} /* town heroes reuse the home .hero treatment, but their H1 carries the town name and a ranking modifier, so it needs a slightly smaller display size and a wider text column to land on two lines like the home page does. */ .hero--town .wrap{max-width:700px} .hero--town h1{font-size:clamp(2rem,4.4vw,3rem)} /* Top-edge scrim: the breadcrumb now sits at the top of the hero, where the main .hero::after gradient is at its lightest (.35). This short fade darkens only the top ~170px so the crumb clears WCAG body-text contrast while the rest of the photo stays bright. Paints above .hero-img, below .hero .wrap (z-index:2). */ .hero--town::before{content:"";position:absolute;left:0;right:0;top:0;height:170px; background:linear-gradient(180deg,rgba(10,11,14,.55) 0%,rgba(10,11,14,0) 100%)} .hero .crumbs{text-shadow:0 1px 12px rgba(0,0,0,.85)} /* ========================================================================== Free estimate form (/free-estimate/) — five-step wizard The site had no form styles before this page. Everything here is built from the existing tokens so the form reads as part of the same object as the rest of the site: brand green, --ease-expo on every transition, --line on every border, .ibtn untouched for the send button. Errors are carried in TEXT and by a red border TOGETHER, never by colour alone. Every control clears a 44px tap target. WITHOUT JavaScript the wizard does not exist: all five steps render stacked, Previous/Next stay hidden, and the single submit button posts the whole form. ========================================================================== */ .est-wrap{max-width:720px;padding-bottom:10px} .est-section{padding-top:44px;padding-bottom:52px} .page-hero--tight .wrap{padding-bottom:38px} .est-form{background:var(--paper);border:1px solid var(--line);border-radius:18px; box-shadow:var(--shadow);padding:34px 34px 28px} /* Honeypot. Moved off-screen rather than display:none — some bots skip anything that is display:none, and skipping it is exactly what we do not want them to do. It is aria-hidden and tabindex="-1" in the markup, so nobody real ever meets it. */ .est-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px; overflow:hidden;opacity:0;pointer-events:none} /* ---- progress rail ------------------------------------------------------ */ /* No digits. On a four-step form the numbers read as work still to get through rather than progress made, so the rail says the same thing without counting at anyone. The fill is set by JS; the inline width in the markup is the no-JS resting state. */ /* Four icons on a line: what each stop is, not just how far along. The connector is drawn by each pip reaching back to the one before it, so the line can never desync from the number of steps. */ .est-pips{display:flex;align-items:center;list-style:none;margin:0 0 var(--sp-5);padding:0} .est-pip{position:relative;flex:1 1 0;display:flex;justify-content:center;min-width:0} .est-pip::before{content:"";position:absolute;top:50%;right:50%;left:-50%;height:2px; background:var(--line);transform:translateY(-50%); transition:background var(--t-med) var(--ease-expo)} .est-pip:first-child::before{display:none} /* The connectors stay grey at every state. The icons already say where you are; colouring the line as well says it twice and turns a quiet rail into a bar. */ /* The icon sits ON the line, so it carries the card's own background to cover it */ .est-pip-icon{position:relative;z-index:1;display:grid;place-items:center; width:38px;height:38px;border-radius:12px;background:var(--paper);color:#aeb5ac; transition:color var(--t-fast) var(--ease-expo),background var(--t-fast) var(--ease-expo)} .est-pip-icon svg{width:21px;height:21px} .est-pip.is-done .est-pip-icon{color:var(--green)} /* Lit, not stamped: the icon takes the colour and a soft tile, rather than being dropped inside a filled circle. */ .est-pip.is-current .est-pip-icon{color:var(--green-d);background:#e6f7ec} /* Read by a screen reader, never shown: the live region needs the step's NAME to be worth announcing, but the

right below already carries it on screen. */ .est-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---- spacing scale ------------------------------------------------------ */ /* Every gap in this form comes from these six steps and nothing else. They are multiples of 4, and each one has one job -- the size is chosen by what the gap MEANS, not by how it looked on the day: 4 inside a single unit title -> its sub-line, control -> its hint 8 a label and the thing it labels 12 peer controls in one group the three year/make/model dropdowns 16 a block and the rule under it 24 between two separate questions, and around a section heading 32 between the two options of a yes/no, horizontally Proximity is the whole point: two things 8px apart read as one thing, and the same two things 24px apart read as two. The card and the full page share the scale, so they space identically and only differ in type size and padding. */ .est-form,.est-done{ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; } /* ---- a step ------------------------------------------------------------- */ /* No JS: every step is visible and the form is one long page, which still works. With JS: one at a time, and the incoming step drifts up as it fades in. */ .est-step{display:flex;flex-direction:column;gap:var(--sp-5);margin:0 0 var(--sp-5); padding:0;border:0} .js .est-step{display:none} .js .est-step.is-current{display:flex} .js .est-step.is-current{animation:est-in .42s var(--ease-expo) both} /* z-index, because that animation is what breaks the layering. It fills `both`, so the current step keeps a transform -- and a transformed element is a stacking context, which traps the open combobox list (z-index:40) inside the step. The progress icons sit OUTSIDE that context carrying z-index:1 of their own (they need it to cover the connector line they sit on), so when a dropdown opened UPWARD the icons painted straight through it. Upward is not rare: the list flips when there is under 180px below the field, which is most of the time on a laptop with the Spanish card, since its longer copy pushes the field down. Lifting the step above the icons fixes the order whichever way the list opens. */ .js .est-step.is-current{position:relative;z-index:2} @keyframes est-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Title and sub-line are one unit. They used to be siblings held together by a negative margin, which the card's space distribution happily pulled apart. */ .est-step-head{display:flex;flex-direction:column;gap:var(--sp-1)} .est-step-title{font-size:clamp(1.35rem,2.6vw,1.7rem);font-weight:800;margin:0} .est-step-sub{margin:0;color:var(--muted);font-size:.97rem;line-height:1.55} /* Same idea: the three dropdowns and the line explaining them travel together. */ .est-group{display:flex;flex-direction:column;gap:var(--sp-2)} .est-field{display:flex;flex-direction:column;gap:var(--sp-1);margin:0;padding:0;border:0} .est-field>input,.est-field>textarea,.est-field>.est-sel-wrap, .est-field>.est-drop,.est-field>.est-chips,.est-radios .est-radio-row{ margin-top:var(--sp-1)} .est-field>label,.est-radios legend{font-weight:700;font-size:1rem;padding:0} .est-radios legend{margin-bottom:var(--sp-1)} .est-opt{font-weight:400;color:var(--muted);font-size:.9rem} .est-hint{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5} .est-hint a{text-decoration:underline} .est-form input[type=text],.est-form input[type=tel],.est-form input[type=email], .est-form textarea{ width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:var(--radius); transition:border-color var(--t-fast) var(--ease-expo),box-shadow var(--t-fast) var(--ease-expo)} .est-form textarea{min-height:112px;resize:vertical;line-height:1.6} .est-form input:hover,.est-form textarea:hover{border-color:#c9cec6} .est-form input:focus-visible,.est-form textarea:focus-visible, .est-form button:focus-visible,.est-form [type=radio]:focus-visible, .est-form [type=checkbox]:focus-visible,.est-review button:focus-visible{ outline:2px solid var(--green-d);outline-offset:2px;border-color:var(--green-d)} .est-form input::placeholder,.est-form textarea::placeholder{color:#9aa1a8} /* --- error state: red border AND a text message, never one without the other - */ /* The error text is never drawn. A red control says "this one" faster than a sentence does, and a sentence per field is what made the card jump: five messages appearing at once added ~120px and shoved everything out of place. The words stay in the DOM, clipped, because aria-describedby points at them and a screen reader has no border to look at. */ .est-err{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* A missed control: red edge, nothing else. */ .est-field.has-err .est-combo, .est-field.has-err input:not([type=checkbox]):not([type=radio]), .est-field.has-err textarea, .est-field.has-err select{border-color:#a3231b;box-shadow:0 0 0 1px #a3231b} /* A missed Yes/No has no box to redden, so the words go red instead. */ .est-radios.has-err legend, .est-radios.has-err .est-choice span{color:#a3231b} .est-radios.has-err .est-choice input{accent-color:#a3231b} /* Same idea for the damage tiles and the agreement: outline the group. */ .est-field.has-err .est-chips{outline:1px solid #a3231b;outline-offset:6px;border-radius:12px} .est-field.has-err input,.est-field.has-err textarea, .est-field.has-err .est-drop{border-color:#a3231b} /* --- photo picker -------------------------------------------------------- */ /* The real file input is visually hidden rather than display:none so it stays in the accessibility tree and keeps its label; the two buttons drive it. */ .est-photos{display:flex;flex-direction:column;gap:var(--sp-3)} /* The dashed panel IS the button. A dashed outline is the one shape people read as "put a file in here" without being told, so the whole area is the target and the only styled thing inside it is the word. It is hidden without JS, where the plain file input shows instead and does the same job. */ .est-drop{display:none;width:100%;flex-direction:column;align-items:center; padding:var(--sp-5) var(--sp-4);font:inherit;text-align:center;cursor:pointer; border:1px dashed #c2c8bf;border-radius:14px;background:var(--bg); transition:border-color var(--t-fast) var(--ease-expo),background var(--t-fast) var(--ease-expo)} .js .est-drop{display:flex} .js .est-drop[hidden]{display:none} /* once a photo is in, the tile takes over */ .est-drop:hover,.est-drop.is-over{border-color:var(--green);background:#eefaf1} .est-drop-word{font-weight:700;font-size:.98rem;color:var(--green-d);text-decoration:underline} /* With JS the panel replaces it; without JS it is the only way to attach a photo */ .js .est-photos>input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .est-pick--cam{display:none;align-self:center;min-height:44px;padding:var(--sp-2) var(--sp-3); font:inherit;font-weight:700;font-size:.9rem;color:var(--green-d);background:none;border:0; text-decoration:underline;cursor:pointer} .est-thumbs{list-style:none;display:grid;gap:var(--sp-3);margin:0;padding:0; grid-template-columns:repeat(auto-fill,minmax(104px,1fr))} .est-thumbs:empty{display:none} /* Adding more happens next to what is already there, rather than from a panel sitting above it taking a row of its own. */ .est-thumb-add{display:block} .est-add-more{display:grid;place-items:center;width:100%;aspect-ratio:4/3; font:inherit;font-size:1.6rem;line-height:1;color:var(--green-d);cursor:pointer; background:var(--bg);border:1px dashed #c2c8bf;border-radius:12px; transition:border-color var(--t-fast) var(--ease-expo),background var(--t-fast) var(--ease-expo)} .est-add-more:hover{border-color:var(--green);background:#eefaf1} .est-thumb{position:relative;border-radius:12px;overflow:hidden;background:var(--bg); border:1px solid var(--line);aspect-ratio:4/3} .est-thumb img{width:100%;height:100%;object-fit:cover} .est-thumb-drop{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;cursor:pointer;font:inherit;font-size:1.05rem;line-height:1; color:#fff;background:rgba(21,23,28,.72);border:0; transition:background var(--t-fast) var(--ease-expo)} .est-thumb-drop:hover{background:#a3231b} .est-thumb-size{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:.74rem; font-weight:600;color:#fff;background:linear-gradient(180deg,rgba(21,23,28,0),rgba(21,23,28,.78))} /* --- radios and the insurance checkbox ---------------------------------- */ /* First and last name side by side. Two short fields stacked is the kind of dead vertical space that makes a card feel like a chore. */ .est-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)} .est-row2 .est-field{margin:0} .est-radio-row{display:flex;gap:var(--sp-2) var(--sp-6);flex-wrap:wrap} /* No box around a Yes/No. The row is two dots and two words; the 44px tap target is kept by the padding, not by a border drawn around it. */ .est-radio-row .est-choice{flex:0 0 auto;justify-content:flex-start;min-width:0; padding:var(--sp-2) 0;border:0;background:none;border-radius:8px} .est-radio-row .est-choice:hover{border:0;background:none} .est-radio-row .est-choice:hover span{color:var(--green-d)} .est-choice{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-2) 18px; border:1px solid var(--line);border-radius:999px;cursor:pointer;font-weight:600;background:#fff; transition:border-color var(--t-fast) var(--ease-expo),background var(--t-fast) var(--ease-expo)} .est-choice:hover{border-color:#c9cec6} .est-choice input{accent-color:var(--green-d);width:19px;height:19px;margin:0;flex:0 0 auto} /* Deliberately NO fill or border change on :checked. The control already says it is chosen; tinting the whole pill green as well says it twice, and a control that answers in two ways at once is the thing that reads as generated. The dot is the answer. */ /* The agreement: a tickbox and the sentence it applies to. No border, no panel — it is one line of consent copy, not a control that needs a container. */ .est-agree-row{display:flex;align-items:flex-start;gap:var(--sp-2)} .est-agree-row input{flex:0 0 auto;width:18px;height:18px;accent-color:var(--green-d); /* optical: centres the box on the first line of text beside it, which is a function of that line's height, not a step on the spacing scale */ margin:1px 0 0} .est-agree-row label{font-weight:400;font-size:.9rem;line-height:1.5;color:var(--muted); cursor:pointer} .est-agree-row a{color:var(--green-d);text-decoration:underline} .est-agree.has-err .est-agree-row label{color:#a3231b} .est-agree.has-err .est-agree-row input{accent-color:#a3231b;outline:2px solid #a3231b; outline-offset:2px} /* --- review -------------------------------------------------------------- */ .est-review{border:1px solid var(--line);border-radius:14px;background:var(--bg); padding:var(--sp-2) var(--sp-5)} .est-review-row{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-3) 0; border-bottom:1px solid var(--line)} .est-review-row:last-child{border-bottom:0} .est-review-k{flex:0 0 84px;font-weight:700;font-size:.92rem;color:var(--muted)} /* Each answer from a step is one line inside one block, so three blocks carry what eight labelled rows used to, in a bit over a third of the height. */ .est-review-v{flex:1 1 auto;min-width:0;overflow-wrap:anywhere; /* 2px: these are wrapped lines of one answer, not separate items */ display:flex;flex-direction:column;gap:2px;line-height:1.45} .est-review-v span:first-child{font-weight:700} .est-review-v.is-empty{color:var(--muted);font-style:italic} .est-review-edit{flex:0 0 auto;font:inherit;font-size:.88rem;font-weight:700; color:var(--green-d);background:none;border:0;padding:6px 4px;cursor:pointer; text-decoration:underline;border-radius:6px} .est-review-thumbs{display:flex;gap:var(--sp-2);flex-wrap:wrap} .est-review-thumbs img{width:56px;height:44px;object-fit:cover;border-radius:8px; border:1px solid var(--line)} .est-review-empty{margin:var(--sp-3) 0;color:var(--muted)} /* --- progress, status, consent ------------------------------------------ */ .est-progressbar{margin:var(--sp-5) 0 0} .est-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden} .est-bar span{display:block;height:100%;width:0;border-radius:999px;background:var(--green); transition:width .2s linear} .est-status{margin:var(--sp-4) 0 0;font-size:.95rem;font-weight:600;line-height:1.5;color:var(--muted)} .est-status:empty{display:none} /* Validation results are announced, not printed. "4 fields need a look before we go on" is a sentence asking to be read when the four red controls have already said it -- but a screen reader user cannot see red, so the words still go out over the live region. Upload progress and server failures stay visible. */ .est-status.is-quiet{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .est-status.is-err{color:#a3231b} .est-status.is-ok{color:var(--green-d)} .est-trust{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-2) var(--sp-5);flex-wrap:wrap} .est-trust li{display:flex;align-items:center;gap:var(--sp-2);font-size:.92rem;font-weight:600; color:var(--muted)} .est-trust svg{flex:0 0 auto;width:17px;height:17px;color:var(--green)} /* --- wizard navigation --------------------------------------------------- */ /* Previous/Next exist only for the JS wizard. Without it they stay hidden and the plain submit button — which is always in the markup — posts everything. */ .est-nav{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-4); border-top:1px solid var(--line);flex-wrap:wrap} .est-back,.est-next{display:none} .js .est-back,.js .est-next{display:inline-flex} .js .est-submit{display:none} .js .est-form.is-last .est-next{display:none} .js .est-form.is-last .est-submit{display:inline-flex} /* hidden, not removed: the row must not reflow when Previous appears on step 2 */ .js .est-form.is-first .est-back{visibility:hidden} .est-btn{min-height:48px;padding:13px 26px;font:inherit;font-weight:800;font-size:1rem; border-radius:999px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink); align-items:center;justify-content:center; transition:background var(--t-fast) var(--ease-expo),border-color var(--t-fast) var(--ease-expo), color var(--t-fast) var(--ease-expo)} .est-btn:hover{border-color:#c9cec6;background:var(--bg)} /* The forward action leads and Back follows it. Source order keeps Back first, so a screen reader and the tab sequence still meet the two in the order the markup sets; only the painted position swaps. */ .est-back{order:2;margin-left:auto} .est-next,.est-submit{order:1} .est-btn--go{background:var(--green);border-color:var(--green);color:#fff; padding:13px 40px} .est-btn--go:hover{background:var(--green-d);border-color:var(--green-d);color:#fff} .est-submit{border:0;cursor:pointer;font-family:inherit} .est-submit[disabled]{opacity:.6;cursor:progress} .est-submit[disabled]:hover .ibtn__track,.est-submit[disabled]:hover .ibtn__roll{transform:none} .est-callout{margin:30px 0 0;color:var(--muted);font-size:.96rem;text-align:center} /* Fallback banner for the no-JS POST path, which returns via ?e=. */ .est-banner{margin:0 0 24px;padding:14px 18px;border-radius:var(--radius);font-weight:600; border:1px solid #f0c9c5;background:#fdf3f2;color:#8f1f18} /* --- thank-you ---------------------------------------------------------- */ .est-thanks{padding-top:34px;padding-bottom:46px} .est-tick{display:grid;place-items:center;width:54px;height:54px;border-radius:50%; background:#eefaf1;color:var(--green-d);margin:16px 0 18px} .est-tick svg{width:26px;height:26px} .est-back-link,.est-thanks .est-back{margin-top:26px} .est-thanks .est-back a{font-weight:700;text-decoration:underline} /* The camera button only earns its place where a camera exists. Any pointer that is not coarse gets the file picker alone, which is what it would open. */ @media(pointer:coarse){.js .est-pick--cam{display:inline-block}} @media(max-width:640px){ .est-section{padding-top:30px;padding-bottom:38px} .est-form{padding:var(--sp-5) var(--sp-4) var(--sp-4);border-radius:14px} /* One column, so first and last name become peer fields stacked rather than side by side, and take the gap two separate fields take. */ .est-row2{grid-template-columns:1fr;gap:var(--sp-4)} .est-drop{padding:var(--sp-4)} .est-nav{gap:var(--sp-3)} /* stacked on a phone: forward on top, Back beneath it */ .est-btn,.est-submit{flex:1 1 100%;width:100%;justify-content:center} .est-back{margin-left:0} /* Stacked, the buttons cannot reflow into each other, so the placeholder that keeps the desktop row steady is just a dead 48px band under Next. Drop it. */ .js .est-form.is-first .est-back{display:none} .est-review-row{flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)} .est-review-k{flex-basis:100%} } @media(prefers-reduced-motion:reduce){ .est-form input,.est-form textarea,.est-drop,.est-choice,.est-add-more, .est-bar span,.est-thumb-drop,.est-btn,.est-pip::before,.est-pip-icon{transition:none} .js .est-step.is-current{animation:none} } /* The site's fixed "Call us" bar appears below 860px. On every other page it overlaps footer text, which costs nothing. Here it would land on top of the send button — the one element on this page that must never be covered. */ @media(max-width:860px){ .est-section{padding-bottom:104px} } /* ========================================================================== Home hero: two columns, the estimate card on the right The card is the page's primary call to action, so it sits in the hero rather than below the fold. Below 980px the columns stack and the card goes FIRST — on a phone the person who came here to get a price should meet the form, not scroll past a headline to find it. ========================================================================== */ /* The card. It began life in the home page hero and now sits in the right-hand column of /contact/; the styling did not need to change, because "a capped, self-contained card in a narrow column" was always what it was. */ /* Capped and centred at EVERY width, never relaxing into a wide panel. A tablet is the case that breaks this if you let it: the hero goes single-column at 980px and without a cap the card would stretch the full 768px and stop being a card. width:100% keeps it inside a 375px phone. */ .est-form--card{width:100%;max-width:440px;margin-inline:auto; display:flex;flex-direction:column; background:var(--paper);border-radius:20px;padding:var(--sp-5) var(--sp-5) var(--sp-4); /* No shadow. It floated for a reason that no longer exists -- the card used to sit on the hero photo, where a shadow was what separated it from the picture. On the page it is part of the page, so it sits IN the surface rather than above it. Card and page are both #ffffff, so a hairline is what keeps the form reading as one object instead of dissolving into the background. */ border:1px solid var(--line);color:var(--ink)} /* The kicker/lede only earn their place on the card, where there is no page H1 above the form to say what it is. */ .est-head{display:none;text-align:center;margin:0 0 var(--sp-4)} .est-form--card .est-head{display:block} .est-kicker{margin:0 0 var(--sp-1);font-size:1.45rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)} .est-lede{margin:0;font-size:.95rem;line-height:1.5;color:var(--muted)} .est-form--card .est-step-title{font-size:1.18rem} .est-form--card .est-step-sub{font-size:.92rem} /* Tighter than the standalone page at every width, not just on a phone. The card sits in the hero, so the run from the kicker to the Next button has to clear the fold on a 1366x768 laptop -- 22px gaps cost about 100px it cannot spare. */ .est-form--card .est-pips{margin-bottom:var(--sp-4)} .est-form--card .est-pip-icon{width:34px;height:34px;border-radius:10px} .est-form--card .est-pip-icon svg{width:19px;height:19px} .est-form--card .est-kicker{font-size:1.26rem} .est-form--card .est-hint{font-size:.85rem;line-height:1.45} .est-form--card .est-radio-row .est-choice{padding:var(--sp-2) 0;min-height:40px} .est-form--card .est-field>label,.est-form--card .est-radios legend{font-size:.95rem} .est-form--card .est-form input,.est-form--card select,.est-form--card .est-combo{min-height:44px} /* The hero already carries a Call us button, and the header carries another. A third phone number inside the card was 33px spent saying it a third time. */ .est-form--card .est-foot{display:none} /* The lede said the same thing as the step's own sub-line, one step less specifically. The sub-line keeps the words; the card keeps the 50px. */ .est-form--card .est-lede{display:none} /* The damage step is the tallest of the four. Compact chips (one line of label, smaller icon tile) and a shallower drop zone are what keep its Next button on the same screen as its title. */ .est-form--card .est-chip{min-height:44px;padding:10px 12px;gap:var(--sp-2);font-size:.88rem} .est-form--card .est-chip-icon{width:24px;height:24px;border-radius:7px} .est-form--card .est-chip-icon svg{width:15px;height:15px} .est-form--card .est-drop{padding:var(--sp-4);border-radius:12px} .est-form--card .est-review{padding:0 var(--sp-4)} .est-form--card .est-review-row{padding:var(--sp-3) 0;gap:var(--sp-3)} .est-form--card .est-review-v{font-size:.92rem} /* The trust strip immediately below the hero already says "Free estimates", "Insurance handled directly" and "Lifetime warranty" -- inside the card it was the same three claims a second time, 60px from the first. */ .est-form--card .est-trust{display:none} .est-form--card .est-agree-row label{font-size:.84rem} .est-foot{display:none;margin:var(--sp-4) 0 0;text-align:center;font-size:.9rem;color:var(--muted)} @media(min-width:980px){ /* In the contact grid the card is the right column and sizes itself. */ } @media(max-width:560px){ .est-form--card{padding:18px 16px 14px;border-radius:16px} /* On a phone the card's own lede and the step's sub-line say the same thing twice, and the 60px it costs is the difference between the Next button clearing the fixed call bar and hiding behind it. The step keeps the words. */ .est-kicker{font-size:1.3rem} } /* ========================================================================== Step 1 — year / make / model ========================================================================== */ .est-ymm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)} .est-sel-wrap{position:relative} /* the chevron is drawn here rather than left to the OS, so the three controls match each other and the text inputs on the later steps */ .est-sel-wrap::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:9px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg);pointer-events:none} .est-form select{appearance:none;-webkit-appearance:none;width:100%;min-height:48px; padding:12px 34px 12px 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff; border:1px solid var(--line);border-radius:var(--radius);cursor:pointer; transition:border-color var(--t-fast) var(--ease-expo)} .est-form select:hover:not([disabled]){border-color:#c9cec6} .est-form select[disabled]{background:var(--bg);color:#9aa1a8;cursor:not-allowed} /* Our own dropdown. The native