/* ========================================================================== Capital M Welding & Fabrication - shared design system ("Arc & Steel") Governed by /DESIGN-RULES.md. Gunmetal + molten arc. No AI slop. Fonts via in each page : Oswald (display) + Barlow (body). ========================================================================== */ :root{ --steel:#16191C; --steel2:#1E2226; --steel3:#262B30; --paper:#E9E6DF; --paper2:#DEDAD0; --card:#EFECE5; --ink:#14171A; --ink2:#1C2024; --slate:#4A5157; --slate2:#6B7278; /* accent is red (was orange). --arc/--arc2 on light, --spark = lighter red for small text on steel */ --arc:#D42C22; --arc2:#B21F17; --spark:#FF6B5E; --brand:#D42C22; --brand2:#B21F17; --weld:#D42C22; --weld2:#B21F17; --line:#CDC7BA; --line2:#B7B0A0; --dline:#2C3237; --dline2:#3A424A; --focus:#D42C22; --fd:'Oswald','Arial Narrow',sans-serif; --fb:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; --maxw:1220px; --pad:clamp(1.25rem,.4rem + 3.2vw,3.25rem); --sec:clamp(4.75rem,3rem + 8vw,9.5rem); } *,*::before,*::after{box-sizing:border-box;}*{margin:0;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{background:var(--paper);color:var(--ink);font-family:var(--fb); font-size:clamp(1.02rem,.98rem + .2vw,1.14rem);line-height:1.68;-webkit-font-smoothing:antialiased; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");} img{display:block;max-width:100%;height:auto;} a{color:var(--weld2);text-underline-offset:3px;} h1,h2,h3,h4,.d{font-family:var(--fd);font-weight:700;line-height:.98;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;} :where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--focus);outline-offset:3px;} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);} .wrap-narrow{max-width:840px;margin:0 auto;padding-inline:var(--pad);} .sec{padding-block:var(--sec);} .eyebrow{font-family:var(--fd);font-weight:600;font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;color:var(--arc2);display:inline-flex;align-items:center;gap:.75rem;} .eyebrow::before{content:"";width:34px;height:2px;background:currentColor;flex:none;} .sec-steel .eyebrow,.hero .eyebrow,.phero .eyebrow{color:var(--spark);} /* buttons */ .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:1.06rem;padding:.86em 1.65em;border:2px solid var(--ink);border-radius:2px;cursor:pointer;text-decoration:none;transition:background-color .16s,color .16s,border-color .16s;} .btn-o{background:var(--arc);border-color:var(--arc);color:#fff;} .btn-o:hover{background:var(--arc2);border-color:var(--arc2);} .btn-g{background:transparent;color:var(--ink);} .btn-g:hover{background:var(--ink);color:var(--paper);} .btn-lg{font-size:1.16rem;padding:1em 2em;} .tel{font-family:var(--fd);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em;} .skip{position:absolute;left:-999px;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100;} .skip:focus{left:0;top:0;} /* scroll reveal */ .reveal{opacity:1;} .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);} .js .reveal.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none;}} /* signature weld-bead / hazard hairline divider */ .bead{height:6px;width:100%;background: repeating-linear-gradient(135deg,var(--arc) 0 14px,var(--steel) 14px 28px); opacity:.9;} .rule{height:1px;background:var(--line);border:0;} .sec-steel .rule{background:var(--dline);} /* header */ .hdr{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;} .hdr-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);} .hdr-mark{height:58px;width:auto;flex:none;} .hdr-name{font-family:var(--fd);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.01em;font-size:1.12rem;color:var(--ink);} .hdr-name span{color:var(--brand);} .hdr-name small{display:block;font-size:.62rem;letter-spacing:.24em;color:var(--slate2);font-weight:500;} .nav{display:flex;gap:28px;font-family:var(--fd);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;} .nav a{color:var(--ink);text-decoration:none;position:relative;padding-block:4px;} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--arc);transform:scaleX(0);transform-origin:left;transition:transform .2s;} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);} .hdr-cta{display:flex;align-items:center;gap:18px;} .hdr-tel{color:var(--ink);font-size:1.16rem;text-decoration:none;} .menu-btn{display:none;} @media (max-width:1020px){ .nav,.hdr-tel{display:none;} .menu{position:relative;} .menu-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;text-transform:uppercase;color:var(--ink);background:none;border:2px solid var(--ink);border-radius:2px;padding:.5em .9em;cursor:pointer;list-style:none;} .menu[open] .menu-panel{display:flex;} .menu-panel{display:none;flex-direction:column;position:absolute;right:0;top:calc(100% + 12px);background:#fff;border:1px solid var(--line);box-shadow:0 12px 28px rgba(20,23,26,.12);min-width:250px;z-index:40;} .menu-panel a{font-family:var(--fd);font-weight:600;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:14px 16px;border-bottom:1px solid var(--line);} .menu-panel a:last-child{border-bottom:0;} .menu-panel .cta{color:var(--arc);} } /* home hero */ .hero{position:relative;background:var(--steel);color:var(--paper);overflow:hidden;isolation:isolate;} .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;} .hero-img{width:100%;height:100%;object-fit:cover;opacity:.52;will-change:transform;} .hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(88deg,rgba(18,20,22,.94) 0%,rgba(18,20,22,.80) 40%,rgba(18,20,22,.30) 100%),linear-gradient(0deg,rgba(18,20,22,.85),transparent 55%);} .hero-in{padding-block:clamp(76px,9vw,140px);} .hero h1{color:var(--paper);font-size:clamp(3rem,1.2rem + 7.6vw,7rem);margin-top:24px;max-width:15ch;letter-spacing:.01em;} .hero h1 .em{color:var(--arc);} .hero-sub{font-size:clamp(1.12rem,1rem + .7vw,1.42rem);line-height:1.42;color:#CFCABF;max-width:48ch;margin-top:24px;font-weight:400;} .hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;} .hero .btn-g{color:var(--paper);border-color:rgba(233,230,223,.5);} .hero .btn-g:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);} .hero-trust{display:flex;gap:22px;margin-top:44px;align-items:center;font-family:var(--fd);font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:#A7A296;flex-wrap:wrap;} .hero-trust .lead{color:var(--paper);display:inline-flex;align-items:center;gap:9px;} .hero-trust .star{color:var(--arc);} .hero-trust .sep{width:1px;height:15px;background:#40474d;} /* interior page hero */ .phero{background:var(--steel);color:var(--paper);position:relative;overflow:hidden;isolation:isolate;} .phero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;} .phero-media img{width:100%;height:100%;object-fit:cover;opacity:.38;} .phero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(88deg,rgba(18,20,22,.95) 0%,rgba(18,20,22,.82) 46%,rgba(18,20,22,.45) 100%);} .phero-in{padding-block:clamp(2.8rem,2rem + 4vw,4.6rem);position:relative;z-index:1;} .phero h1{color:var(--paper);font-size:clamp(2.4rem,1.4rem + 4.6vw,4.6rem);margin-top:16px;max-width:20ch;} .phero h1 .em{color:var(--arc);} .phero-sub{color:#CFCABF;max-width:54ch;margin-top:18px;font-size:clamp(1.05rem,1rem + .4vw,1.28rem);} .crumbs{font-family:var(--fd);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--slate2);} .crumbs a{color:var(--spark);text-decoration:none;} /* sections */ .sec-steel{background:var(--steel);color:var(--paper);} .sec-steel h2,.sec-steel h3{color:var(--paper);} .sec-paper2{background:var(--paper2);} .lead-p{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.5;color:var(--ink);max-width:60ch;} .sec-steel .lead-p{color:#D6D1C6;} h2.big{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);letter-spacing:.01em;} h3.mid{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);} /* stat band */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--dline);} .stat{padding:clamp(1.4rem,1rem + 1.5vw,2.4rem);border-right:1px solid var(--dline);} .stat:last-child{border-right:0;} .stat .n{font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(2.4rem,1.6rem + 3vw,3.8rem);line-height:1;color:var(--arc);} .stat .l{font-family:var(--fd);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:#B4AFA3;margin-top:.5rem;} @media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr);}.stat:nth-child(2){border-right:0;}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--dline);}} /* service grid */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} .sec-steel .svc-grid{background:var(--dline);border-color:var(--dline);} .svc{background:var(--card);padding:clamp(1.5rem,1rem + 1.5vw,2.2rem);display:flex;flex-direction:column;gap:.7rem;text-decoration:none;color:var(--ink);transition:background-color .18s;position:relative;} .sec-steel .svc{background:var(--steel2);color:var(--paper);} .svc:hover{background:var(--paper2);} .sec-steel .svc:hover{background:var(--steel3);} .svc .no{font-family:var(--fd);font-weight:600;font-size:.8rem;letter-spacing:.18em;color:var(--arc2);} .sec-steel .svc .no{color:var(--spark);} .svc h3{font-size:1.36rem;line-height:1.02;} .svc p{font-size:.99rem;color:var(--slate);line-height:1.5;} .sec-steel .svc p{color:#AEA99E;} .svc .go{font-family:var(--fd);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;font-weight:600;color:var(--ink);margin-top:auto;padding-top:.4rem;} .sec-steel .svc .go{color:var(--paper);} .svc .go::after{content:" ›";color:var(--arc);} @media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.svc-grid{grid-template-columns:1fr;}} /* two-col editorial */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center;} .split.rev{grid-template-columns:.95fr 1.05fr;} .split-media{position:relative;} .split-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border:1px solid var(--line);} .sec-steel .split-media img{border-color:var(--dline);} .split-media .tag{position:absolute;left:0;bottom:0;background:var(--arc);color:#fff;font-family:var(--fd);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:600;padding:.5em .9em;} @media (max-width:840px){.split,.split.rev{grid-template-columns:1fr;gap:2rem;}} /* checklist (used sparingly, not as default) */ .plainlist{list-style:none;display:grid;gap:.7rem;margin-top:1.4rem;} .plainlist li{padding-left:1.5rem;position:relative;color:var(--slate);} .sec-steel .plainlist li{color:#C3BEB3;} .plainlist li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--arc);} /* FAQ */ .faq{border-top:1px solid var(--line);} .sec-steel .faq{border-color:var(--dline);} .faq details{border-bottom:1px solid var(--line);} .sec-steel .faq details{border-color:var(--dline);} .faq summary{cursor:pointer;list-style:none;padding:1.3rem 2.5rem 1.3rem 0;font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.01em;font-size:1.16rem;position:relative;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";position:absolute;right:.2rem;top:1rem;font-size:1.7rem;color:var(--arc);font-family:var(--fd);} .faq details[open] summary::after{content:"–";} .faq p{padding:0 0 1.5rem;color:var(--slate);max-width:70ch;} .sec-steel .faq p{color:#C3BEB3;} /* CTA band */ .ctaband{background:var(--arc);color:#fff;} .ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:clamp(2.4rem,1.5rem + 3vw,3.6rem);} .ctaband h2{color:#fff;font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);max-width:18ch;} .ctaband .btn-g{border-color:#fff;color:#fff;} .ctaband .btn-g:hover{background:#fff;color:var(--arc2);} .ctaband .btn-o{background:var(--steel);border-color:var(--steel);} .ctaband .btn-o:hover{background:var(--ink);border-color:var(--ink);} /* form */ .form{display:grid;gap:1.1rem;} .field{display:grid;gap:.4rem;} .field label{font-family:var(--fd);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:600;color:var(--slate);} .field input,.field textarea,.field select{font-family:var(--fb);font-size:1.02rem;padding:.8em .9em;background:var(--paper);border:1px solid var(--line2);border-radius:2px;color:var(--ink);} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--weld);} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;} @media (max-width:560px){.form .row{grid-template-columns:1fr;}} .form-note{font-size:.85rem;color:var(--slate2);} .form-status{font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;padding:.8em 1em;border:1px solid;display:none;} .form-status.show{display:block;} .form-status.ok{color:#1e6b3a;border-color:#1e6b3a;background:#e6f2ea;} .form-status.err{color:#a3301f;border-color:#a3301f;background:#f6e7e4;} /* footer */ .ftr{background:var(--steel);color:#B4AFA3;border-top:1px solid var(--dline);} .ftr-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding-block:clamp(3rem,2rem + 3vw,4.5rem);} .ftr h4{color:var(--paper);font-size:1rem;letter-spacing:.1em;margin-bottom:1.1rem;} .ftr a{color:#B4AFA3;text-decoration:none;display:block;padding:.28rem 0;} .ftr a:hover{color:var(--spark);} .ftr .brandline{font-family:var(--fd);font-weight:700;text-transform:uppercase;color:var(--paper);font-size:1.5rem;line-height:.95;} .ftr .brandline span{color:var(--brand);} .ftr-nap{font-style:normal;line-height:1.7;} .ftr-bot{border-top:1px solid var(--dline);padding-block:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--slate2);} .ftr-bot a{display:inline;color:var(--slate2);} @media (max-width:840px){.ftr-in{grid-template-columns:1fr 1fr;gap:2rem;}} @media (max-width:520px){.ftr-in{grid-template-columns:1fr;}} .section-head{max-width:60ch;} .section-head .eyebrow{margin-bottom:1rem;} .mt-s{margin-top:1rem;}.mt-m{margin-top:1.8rem;}.mt-l{margin-top:2.6rem;} .center{text-align:center;} /* ===== Homepage v2 additions ===== */ /* services grid with imagery + featured flagship */ .svc-media{position:relative;overflow:hidden;aspect-ratio:16/10;} .svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1);} .svc:hover .svc-media img{transform:scale(1.05);} .svc-body{padding:clamp(1.2rem,.9rem + 1vw,1.7rem);display:flex;flex-direction:column;gap:.55rem;flex:1;} .svc.has-media{padding:0;} .svc.feature{grid-column:span 2;grid-row:span 2;} .svc.feature .svc-media{aspect-ratio:auto;height:100%;min-height:260px;} .svc.feature .svc-body{position:absolute;inset:auto 0 0 0;background:linear-gradient(0deg,rgba(18,20,22,.92),rgba(18,20,22,.62) 55%,transparent);color:var(--paper);} .svc.feature h3{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);color:var(--paper);} .svc.feature p{color:#D6D1C6;max-width:42ch;} .svc.feature .no{color:var(--spark);} @media (max-width:900px){.svc.feature{grid-column:span 2;grid-row:auto;}.svc.feature .svc-media{min-height:220px;}} @media (max-width:560px){.svc.feature,.svc.feature .svc-media{grid-column:auto;}} /* project gallery */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .gallery a,.gallery figure{position:relative;overflow:hidden;aspect-ratio:1;margin:0;border:1px solid var(--line);} .sec-steel .gallery a,.sec-steel .gallery figure{border-color:var(--dline);} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1);} .gallery figure:hover img{transform:scale(1.06);} .gallery figcaption{position:absolute;left:0;bottom:0;background:var(--arc);color:#fff;font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:600;padding:.4em .7em;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;} .gallery figure:hover figcaption{opacity:1;transform:none;} .gallery .wide{grid-column:span 2;aspect-ratio:2;} @media (max-width:820px){.gallery{grid-template-columns:repeat(2,1fr);}.gallery .wide{grid-column:span 2;}} /* 24-hour emergency band */ .emergency{position:relative;background:var(--steel);color:var(--paper);overflow:hidden;isolation:isolate;} .emergency-media{position:absolute;inset:0;z-index:-2;} .emergency-media img{width:100%;height:100%;object-fit:cover;opacity:.30;} .emergency-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,20,22,.92),rgba(18,20,22,.5));} .emergency .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:clamp(3rem,2rem + 4vw,5rem);} .emergency .kick{font-family:var(--fd);text-transform:uppercase;letter-spacing:.24em;font-size:.82rem;color:var(--spark);} .emergency h2{color:var(--paper);font-size:clamp(2rem,1.3rem + 3vw,3.6rem);margin-top:.6rem;max-width:20ch;} .emergency h2 .em{color:var(--arc);} .emergency .big-tel{font-family:var(--fd);font-weight:700;font-size:clamp(1.8rem,1.2rem + 2.4vw,2.8rem);color:var(--paper);text-decoration:none;white-space:nowrap;letter-spacing:.01em;display:inline-flex;align-items:center;gap:.6rem;} .emergency .big-tel:hover{color:var(--spark);} /* who we serve */ .serve{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} .serve>div{background:var(--card);padding:clamp(1.6rem,1.2rem + 1.5vw,2.4rem);} .serve .no{font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums;color:var(--arc);font-size:2rem;line-height:1;} .serve h3{font-size:1.4rem;margin-top:.6rem;} .serve p{color:var(--slate);margin-top:.5rem;font-size:.99rem;} @media (max-width:720px){.serve{grid-template-columns:1fr;}} /* testimonials */ .tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;} .tcard{background:var(--card);border:1px solid var(--line);padding:clamp(1.4rem,1rem + 1.2vw,2rem);display:flex;flex-direction:column;gap:.9rem;} .sec-steel .tcard{background:var(--steel2);border-color:var(--dline);} .tcard .stars{color:var(--arc);letter-spacing:.15em;font-size:1rem;} .tcard blockquote{margin:0;font-size:1.06rem;line-height:1.55;color:var(--ink);} .sec-steel .tcard blockquote{color:#E4E0D6;} .tcard .who{margin-top:auto;font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:var(--slate);} .sec-steel .tcard .who{color:#A7A296;} .tcard .who b{color:var(--ink);font-weight:600;} .sec-steel .tcard .who b{color:var(--paper);} @media (max-width:900px){.tcards{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.tcards{grid-template-columns:1fr;}} /* sticky mobile call bar */ .callbar{display:none;} @media (max-width:760px){ .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;border-top:1px solid var(--dline);} .callbar a{font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:center;padding:1em;text-decoration:none;font-size:1.02rem;} .callbar .c{background:var(--arc);color:#fff;} .callbar .q{background:var(--steel);color:var(--paper);} body{padding-bottom:56px;} } /* ============================================================ PREMIUM REFINEMENT LAYER (2026-08) - restraint, air, finish ============================================================ */ :root{ /* warmer, deeper, more considered neutrals */ --paper:#ECE9E2; --paper2:#E4E0D7; --card:#F1EEE7; --steel:#131619; --steel2:#1A1E22; --steel3:#22272B; --ink:#15181B; /* red accent, used sparingly (--spark = lighter red for small text on steel) */ --arc:#D42C22; --arc2:#B21F17; --spark:#FF6B5E; --line:#D4CEC2; --line2:#BEB7A7; --dline:#272C31; --dline2:#363D44; --maxw:1180px; --sec:clamp(5.5rem,3.4rem + 9vw,11rem); } /* Typography: lighter display weight, refined tracking, more air */ h1,h2,h3,h4,.d{font-weight:600;letter-spacing:.012em;} .hero h1{font-weight:600;letter-spacing:.014em;font-size:clamp(2.9rem,1.2rem + 7vw,6.4rem);line-height:1.02;} .phero h1{font-weight:600;} h2.big{font-weight:600;font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);letter-spacing:.014em;} .lead-p{font-weight:400;color:#3A4046;} .sec-steel .lead-p{color:#CBC6BB;} .eyebrow{font-weight:500;font-size:.74rem;letter-spacing:.34em;color:var(--arc2);} .eyebrow::before{width:26px;height:1px;} .section-head .eyebrow{margin-bottom:1.15rem;} /* Buttons: sharp, quieter, letter-spaced = premium */ .btn{border-width:1.5px;border-radius:0;font-weight:500;letter-spacing:.13em;font-size:.95rem;padding:.98em 1.9em;} .btn-lg{font-size:1.02rem;padding:1.05em 2.2em;} .btn-o{background:var(--arc);border-color:var(--arc);} .btn-o:hover{background:var(--arc2);border-color:var(--arc2);} /* Hazard-stripe divider (kept - liked), tuned to the refined palette */ .bead{height:6px;opacity:1;background:repeating-linear-gradient(135deg,var(--arc) 0 14px,var(--steel) 14px 28px);} .bead::before{content:none;} /* Header: airier, quieter nav */ .hdr{background:#fff;border-bottom:1px solid var(--line);} .hdr-in{min-height:86px;} .nav{gap:34px;font-weight:400;letter-spacing:.09em;font-size:.92rem;} .nav a{color:#3A4046;} .nav a:hover,.nav a[aria-current="page"]{color:var(--ink);} .hdr-name{font-weight:600;letter-spacing:.02em;} .hdr-name small{letter-spacing:.28em;color:var(--slate2);} /* Hero: deeper cinematic scrim, calmer trust row */ .hero-img{opacity:.42;} .hero-scrim{background:linear-gradient(88deg,rgba(15,17,19,.95) 0%,rgba(15,17,19,.82) 44%,rgba(15,17,19,.34) 100%),linear-gradient(0deg,rgba(15,17,19,.9),transparent 52%);} .hero-trust{gap:20px;margin-top:48px;font-weight:400;letter-spacing:.14em;font-size:.8rem;color:#948F84;} .hero-trust .lead{font-weight:500;letter-spacing:.06em;} .hero-trust .star{color:var(--spark);} /* Unify all content imagery into one art-directed grade */ .svc-media img,.gallery img,.split-media img,.emergency-media img,.phero-media img{ filter:saturate(.9) contrast(1.03) brightness(.99); } /* Cards & tiles: finer lines, calmer hover, more padding */ .svc-grid{gap:1px;} .svc-body{padding:clamp(1.4rem,1rem + 1vw,1.9rem);gap:.6rem;} .svc h3{font-size:1.24rem;letter-spacing:.01em;} .svc .no{font-weight:500;letter-spacing:.2em;font-size:.72rem;} .svc .go{font-weight:500;letter-spacing:.14em;font-size:.76rem;} .svc-media{aspect-ratio:16/11;} .svc:hover .svc-media img{transform:scale(1.035);} .svc.has-media:hover{background:var(--card);} .sec-steel .svc.has-media:hover{background:var(--steel3);} /* Stat band: refined */ .stat .n{font-weight:700;letter-spacing:.01em;color:var(--paper);} .stat .n:first-line{color:var(--paper);} .stats .stat:nth-child(1) .n,.stats .stat:nth-child(3) .n{color:var(--arc);} .stat .l{font-weight:400;letter-spacing:.16em;font-size:.72rem;color:#9A958A;} /* Gallery: finer gutters + lines */ .gallery{gap:6px;} .gallery figcaption{background:rgba(19,22,25,.86);color:var(--paper);border-left:2px solid var(--arc);font-weight:500;letter-spacing:.12em;font-size:.66rem;padding:.5em .8em;} /* Testimonials: editorial quote treatment */ .tcard{padding:clamp(1.6rem,1.1rem + 1.4vw,2.2rem);gap:1.1rem;} .tcard .stars{letter-spacing:.22em;font-size:.92rem;color:var(--spark);} .tcard blockquote{font-size:1.08rem;line-height:1.6;font-weight:400;} .tcard .who{font-weight:400;letter-spacing:.1em;font-size:.74rem;} /* Who-we-serve: quieter numerals */ .serve .no{font-weight:600;font-size:1.5rem;color:var(--arc);} .serve h3{font-size:1.24rem;letter-spacing:.01em;} /* CTA band: refined dark band with an arc keyline */ .ctaband{background:var(--steel);color:var(--paper);border-top:2px solid var(--arc);} .ctaband h2{color:var(--paper);font-weight:600;} .ctaband .btn-o{background:var(--arc);border-color:var(--arc);color:#fff;} .ctaband .btn-o:hover{background:var(--arc2);border-color:var(--arc2);} .ctaband .btn-g{background:transparent;border-color:rgba(233,230,223,.45);color:var(--paper);} .ctaband .btn-g:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);} /* Emergency band: calmer, more cinematic */ .emergency-media img{opacity:.22;} .emergency h2{font-weight:600;} .emergency .kick{letter-spacing:.28em;color:var(--spark);} /* FAQ: refined */ .faq summary{font-weight:500;letter-spacing:.01em;font-size:1.12rem;padding-block:1.45rem;} /* Section headline paragraph rhythm */ .section-head{max-width:56ch;} /* Mobile hero: lift the headline up and keep the whole line visible. Previously the tall top padding + large type pushed "OR AT YOURS." below the fold, so the headline read as if it stopped at "...OUR SHOP OR". */ @media (max-width:560px){ .hero-in{padding-block:40px 44px;} .hero h1{font-size:clamp(2.4rem,1rem + 7.6vw,3.1rem);line-height:1.04;max-width:20ch;margin-top:18px;} .hero-sub{margin-top:18px;} .hero-actions{margin-top:26px;} .hero-trust{margin-top:28px;} }