/* ========================================================================== Loft Insulation London — insulationloft.co.uk Production stylesheet. Palette derived from the Aquans design tokens used in the approved design prototype; typeface set to Atkinson Hyperlegible. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* --- Tokens ------------------------------------------------------------- */ :root { --navy-950:#0e2236; --navy-900:#16344f; --navy-800:#1c4568; --navy-700:#235a85; --blue-600:#2c6e97; --blue-500:#4a8bb5; --blue-400:#6ea3c4; --blue-300:#8fc0da; --blue-200:#b9dbec; --ice-200:#dcedf6; --ice-100:#eaf4fa; --ice-050:#f5faff; --white:#fff; --ink-900:#12222e; --ink-700:#2c4353; --slate-600:#4c6a79; --slate-400:#7f97a3; --slate-200:#c3d3da; --coral-500:#c25f6a; --coral-100:#f7dfe1; --green-600:#2f8873; --green-500:#3fa88f; --green-100:#d9f0e9; --surface-page:var(--white); --surface-sunken:var(--ice-050); --text-primary:var(--ink-900); --text-secondary:var(--slate-600); --text-link:var(--blue-600); --text-link-hover:var(--navy-800); --border-subtle:var(--slate-200); --focus-ring:var(--blue-500); --font-body:'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-display:'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-full:999px; --shadow-sm:0 1px 2px rgba(14,34,54,.08); --shadow-md:0 4px 14px rgba(14,34,54,.10); --shadow-lg:0 14px 40px rgba(14,34,54,.16); /* Layout scale. --wrap : the main container. Wide enough that card grids, galleries and hero rows fill a modern screen instead of sitting in a narrow strip. --wrap-prose : long-form body text only. Deliberately narrower than --wrap because a line of text longer than roughly 80 characters is genuinely harder to read — the fix for "too narrow" is bigger type, not an unlimited measure. */ --wrap:1480px; --wrap-prose:1040px; --gutter:32px; } /* --- Reset -------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px; /* The whole type scale hangs off this one value. Because it sits on , every rem in this stylesheet grows with it — headings, buttons, nav, cards, forms and footer stay in proportion instead of body text scaling alone. 18px on a small phone, ~21px on a laptop, 22px on a large monitor. */ font-size:clamp(18px, 1.05rem + 0.45vw, 22px); } body{ margin:0;background:var(--surface-page);color:var(--text-primary); font-family:var(--font-body); font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} svg{display:block} a{color:var(--text-link);text-decoration:none} a:hover{color:var(--text-link-hover);text-decoration:underline} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{ outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:2px } ::selection{background:var(--blue-200);color:var(--ink-900)} h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-900);margin:0 0 .5em;line-height:1.15;font-weight:700;letter-spacing:-.02em} h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.25rem);line-height:1.06} h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.4rem)} h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem)} h4{font-size:1.15rem} p{margin:0 0 1.2em} ul,ol{margin:0 0 1.2em;padding-left:1.35em} li{margin-bottom:.55em} strong{font-weight:700;color:var(--ink-700)} hr{border:0;border-top:1px solid var(--border-subtle);margin:48px 0} table{border-collapse:collapse;width:100%} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy-900);color:#fff; padding:12px 20px;border-radius:0 0 var(--radius-md) 0;font-weight:700 } .skip-link:focus{left:0} /* --- Layout ------------------------------------------------------------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} .wrap-narrow{max-width:var(--wrap-prose);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} .section{padding:88px 0} .section-sm{padding:60px 0} .section-sunken{background:var(--surface-sunken)} .section-ice{background:var(--ice-100)} .section-inverse{background:var(--navy-900);color:var(--white)} .section-inverse h2,.section-inverse h3{color:var(--white)} .section-inverse p{color:var(--blue-200)} .center{text-align:center} .eyebrow{ font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-600);margin:0 0 14px } .section-inverse .eyebrow{color:var(--blue-300)} .lede{font-size:clamp(1.1rem,1.02rem + .35vw,1.28rem);line-height:1.6;color:var(--text-secondary);max-width:58ch} .center .lede{margin-left:auto;margin-right:auto} .muted{color:var(--text-secondary)} .small{font-size:.95rem} .grid{display:grid;gap:32px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} /* --- Buttons ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-body);font-weight:700;font-size:1.05rem;line-height:1; padding:17px 32px;border-radius:var(--radius-full);border:2px solid transparent; cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease; text-decoration:none;text-align:center } .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-primary{background:var(--blue-600);color:#fff;border-color:var(--blue-600)} .btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff} .btn-secondary{background:transparent;color:var(--navy-800);border-color:var(--slate-200)} .btn-secondary:hover{background:var(--ice-100);border-color:var(--blue-400);color:var(--navy-900)} .btn-inverse{background:#fff;color:var(--navy-900);border-color:#fff} .btn-inverse:hover{background:var(--ice-100);color:var(--navy-950)} .btn-sm{padding:12px 22px;font-size:1rem} .btn-lg{padding:20px 40px;font-size:1.15rem} .btn-block{display:flex;width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:16px} .center .btn-row{justify-content:center} /* --- Badges & tags ------------------------------------------------------ */ .badge{ display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700; letter-spacing:.01em;padding:7px 15px;border-radius:var(--radius-full);white-space:nowrap } .badge-brand{background:var(--ice-100);color:var(--blue-600)} .badge-positive{background:var(--green-100);color:var(--green-600)} .badge-neutral{background:#eef2f4;color:var(--slate-600)} .tag{ display:inline-flex;align-items:center;padding:11px 20px;border-radius:var(--radius-full); background:var(--white);border:1px solid var(--border-subtle);color:var(--ink-700); font-size:1rem;font-weight:700;text-decoration:none } a.tag:hover{background:var(--ice-100);border-color:var(--blue-400);color:var(--navy-900);text-decoration:none} .tag-row{display:flex;flex-wrap:wrap;gap:12px} .center .tag-row{justify-content:center} /* --- Header / nav ------------------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--border-subtle) } .header-inner{ max-width:var(--wrap);margin:0 auto;padding:16px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:20px } .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto} .brand:hover{text-decoration:none} .brand img{width:228px;height:47px} .nav{display:flex;align-items:center;gap:4px} .nav a{ color:var(--ink-700);font-weight:700;font-size:1.05rem;padding:11px 15px; border-radius:var(--radius-sm);text-decoration:none;white-space:nowrap } .nav a:hover{background:var(--ice-100);color:var(--navy-900);text-decoration:none} .nav a[aria-current="page"]{color:var(--blue-600);background:var(--ice-050)} .header-cta{display:flex;align-items:center;gap:16px;flex:0 0 auto} .header-contact{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25} .header-tel{font-weight:700;color:var(--navy-900);white-space:nowrap;text-decoration:none;font-size:1.1rem} .header-tel:hover{color:var(--blue-600)} .header-email{ font-size:.92rem;font-weight:400;color:var(--text-secondary);white-space:nowrap; text-decoration:none } .header-email:hover{color:var(--blue-600);text-decoration:underline} /* JS-free mobile menu (checkbox toggle) */ .nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .nav-toggle-label{ display:none;align-items:center;justify-content:center;gap:8px;cursor:pointer; padding:10px 14px;border:2px solid var(--slate-200);border-radius:var(--radius-full); font-weight:700;font-size:.9rem;color:var(--navy-900);background:#fff } .nav-toggle-label .bars{display:inline-block;width:16px;height:12px;position:relative} .nav-toggle-label .bars i, .nav-toggle-label .bars::before, .nav-toggle-label .bars::after{ content:"";position:absolute;left:0;right:0;height:2px;background:var(--navy-900);border-radius:2px } .nav-toggle-label .bars::before{top:0} .nav-toggle-label .bars i{top:5px} .nav-toggle-label .bars::after{bottom:0} .nav-toggle:focus-visible + .nav-toggle-label{outline:3px solid var(--focus-ring);outline-offset:2px} /* --- Breadcrumb --------------------------------------------------------- */ .breadcrumb{background:var(--ice-050);border-bottom:1px solid var(--border-subtle);font-size:1rem} .breadcrumb ol{ max-width:var(--wrap);margin:0 auto;padding:14px var(--gutter); list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center } .breadcrumb li{margin:0;display:flex;align-items:center;gap:6px;color:var(--text-secondary)} .breadcrumb li + li::before{content:"/";color:var(--slate-400)} .breadcrumb a{color:var(--blue-600);font-weight:700} .breadcrumb [aria-current="page"]{color:var(--text-secondary)} /* --- Hero --------------------------------------------------------------- */ .hero{padding:72px 0 88px} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center} .hero h1{margin-bottom:22px} .hero-media{position:relative} .hero-media img{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%} .hero-stat{ position:absolute;left:-24px;bottom:-24px;width:148px;height:148px;border-radius:50%; background:var(--navy-900);color:#fff;display:flex;flex-direction:column; align-items:center;justify-content:center;box-shadow:var(--shadow-lg);text-align:center } .hero-stat b{font-size:42px;line-height:1;font-weight:700} .hero-stat span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-200);margin-top:6px} /* --- Cards -------------------------------------------------------------- */ .card{ border:1px solid var(--border-subtle);border-radius:var(--radius-lg); background:#fff;overflow:hidden;display:flex;flex-direction:column } .card-body{padding:30px;display:flex;flex-direction:column;gap:16px;flex:1} .card-body p{margin:0} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .card-title{font-size:1.3rem;font-weight:700;color:var(--ink-900);margin:0;line-height:1.25} .card-title a{color:inherit} .card img{width:100%;height:250px;object-fit:cover} .card-cta{margin-top:auto;display:flex} .card-dark{background:var(--navy-900);border-color:var(--navy-900);color:#fff;justify-content:center} .card-dark .card-title,.card-dark h3{color:#fff} .card-dark p{color:var(--blue-200)} .card-link{ border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:26px 28px; display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;background:#fff } .card-link:hover{border-color:var(--blue-400);background:var(--ice-050);text-decoration:none;color:inherit} .card-link b{color:var(--ink-900);font-size:1.15rem;line-height:1.35} .card-link span{color:var(--text-secondary);font-size:.98rem} /* --- Stats -------------------------------------------------------------- */ .stat{background:#fff;border-radius:var(--radius-lg);padding:34px 30px} .stat b{display:block;font-size:clamp(42px,2rem + 1.5vw,64px);line-height:1;color:var(--ink-900);font-weight:700} .stat span{display:block;font-size:1.05rem;line-height:1.5;color:var(--text-secondary);margin-top:12px} .stat-tinted{background:var(--ice-100)} .stat-brand{background:var(--blue-500)} .stat-brand b{color:#fff} .stat-brand span{color:var(--ice-050)} /* --- Feature list ------------------------------------------------------- */ .ticks{list-style:none;padding:0;margin:0 0 1.15em} .ticks li{position:relative;padding-left:36px;margin-bottom:14px} .ticks li::before{ content:"";position:absolute;left:0;top:.42em;width:22px;height:22px;border-radius:50%; background:var(--green-100); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z' fill='%232f8873'/%3E%3C/svg%3E"); background-size:contain } /* --- Steps -------------------------------------------------------------- */ .steps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;gap:30px} .steps li{ counter-increment:step;position:relative;padding-left:70px;margin:0 } .steps li::before{ content:counter(step);position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%; background:var(--navy-900);color:#fff;display:flex;align-items:center;justify-content:center; font-weight:700;font-size:1.2rem } .steps h3{margin-bottom:.35em;font-size:1.35rem} .steps p{margin:0;color:var(--text-secondary)} /* --- FAQ ---------------------------------------------------------------- */ .faq{border-bottom:1px solid var(--border-subtle);padding:0} .faq summary{ cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative; font-weight:700;font-size:1.2rem;line-height:1.4;color:var(--ink-900) } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:6px;top:32px;width:13px;height:13px; border-right:2px solid var(--blue-600);border-bottom:2px solid var(--blue-600); transform:rotate(45deg);transition:transform .2s ease } .faq[open] summary::after{transform:rotate(-135deg);top:38px} .faq .faq-a{padding:0 0 26px;color:var(--text-secondary);font-size:1.05rem} .faq .faq-a p:last-child{margin-bottom:0} /* --- Reviews ------------------------------------------------------------ */ .review{ border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:30px;background:#fff; display:flex;flex-direction:column;gap:14px } .stars{color:#e0a213;letter-spacing:3px;font-size:1.2rem} .review blockquote{margin:0;font-size:1.08rem;line-height:1.6;color:var(--ink-700)} .review cite{font-style:normal;font-weight:700;font-size:1rem;color:var(--ink-900)} .review cite span{display:block;font-weight:400;color:var(--text-secondary);font-size:.92rem} .placeholder-note{ background:var(--coral-100);border:1px dashed var(--coral-500);border-radius:var(--radius-md); padding:18px 24px;font-size:.98rem;line-height:1.6;color:#7a2f38;margin-top:26px } /* --- Gallery strip ------------------------------------------------------ */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .gallery figure{margin:0} .gallery img{width:100%;height:clamp(230px,18vw,320px);object-fit:cover;border-radius:var(--radius-lg)} .gallery figcaption{font-size:1rem;line-height:1.5;color:var(--text-secondary);margin-top:14px} /* --- Map ---------------------------------------------------------------- */ .map-embed{ border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden; line-height:0;background:var(--ice-100) } .map-embed iframe{width:100%;height:clamp(320px,32vw,520px);border:0;display:block} /* --- Prose blocks ------------------------------------------------------- */ .prose h2{margin-top:1.7em} .prose h3{margin-top:1.5em} .prose > :first-child{margin-top:0} .callout{ background:var(--ice-050);border-left:5px solid var(--blue-500); border-radius:0 var(--radius-md) var(--radius-md) 0;padding:28px 34px;margin:38px 0 } .callout p:last-child{margin-bottom:0} .callout h3{margin-top:0} /* --- Table -------------------------------------------------------------- */ .table-wrap{overflow-x:auto;margin:24px 0;-webkit-overflow-scrolling:touch} .table-wrap table{min-width:560px;font-size:1.05rem} .table-wrap th,.table-wrap td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:top} .table-wrap th{background:var(--ice-100);font-weight:700;color:var(--ink-900)} .table-wrap tbody tr:hover{background:var(--ice-050)} /* --- Forms -------------------------------------------------------------- */ .form-card{ background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg); padding:40px;box-shadow:var(--shadow-sm) } .field{margin-bottom:24px} .field label{display:block;font-weight:700;font-size:1.05rem;margin-bottom:9px;color:var(--ink-900)} .field .req{color:var(--coral-500)} .field input,.field select,.field textarea{ width:100%;padding:16px 18px;font-family:var(--font-body);font-size:1.05rem;color:var(--ink-900); border:1px solid var(--slate-200);border-radius:var(--radius-md);background:#fff } .field textarea{min-height:160px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-500)} .field-hint{font-size:.95rem;line-height:1.5;color:var(--text-secondary);margin-top:8px} .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .consent{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--text-secondary)} .consent input{width:auto;margin-top:4px;flex:0 0 auto} /* --- Footer ------------------------------------------------------------- */ .site-footer{background:var(--navy-950);color:var(--blue-200);padding:80px 0 36px;font-size:1.05rem} .site-footer a{color:var(--ice-100)} .site-footer a:hover{color:#fff} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px} .footer-brand img{width:240px;height:50px;background:#fff;border-radius:var(--radius-md);padding:9px 14px} .footer-brand p{margin-top:20px;color:var(--blue-300);font-size:1.02rem;line-height:1.6;max-width:36ch} .site-footer h2,.site-footer h3{color:#fff;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px} .footer-links{list-style:none;padding:0;margin:0} .footer-links li{margin-bottom:12px} .footer-contact{list-style:none;padding:0;margin:0} .footer-contact li{margin-bottom:12px} .footer-bottom{ border-top:1px solid rgba(255,255,255,.14);margin-top:56px;padding-top:28px; display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.98rem;color:var(--blue-300) } .footer-bottom nav{display:flex;flex-wrap:wrap;gap:22px} /* --- Interface chrome sizing --------------------------------------------- Body copy scales all the way up with the root, but navigation, buttons, labels and chips must not: a 22px nav link is both ugly and wide enough to burst the header on a 1440px laptop. Each of these is clamped so it grows a little with the scale and then stops. Content keeps scaling; chrome doesn't. ------------------------------------------------------------------------ */ .nav a{font-size:clamp(15px,.78rem,18px)} .header-tel{font-size:clamp(16px,.9rem,20px)} .header-email{font-size:clamp(13px,.72rem,15.5px)} .btn{font-size:clamp(16px,.88rem,19px)} .btn-sm{font-size:clamp(14px,.8rem,17px)} .btn-lg{font-size:clamp(17px,.95rem,21px)} .breadcrumb{font-size:clamp(14px,.8rem,17px)} .call-bar a{font-size:clamp(15px,.85rem,18px)} .badge{font-size:clamp(13px,.72rem,15px)} .tag{font-size:clamp(15px,.82rem,18px)} .eyebrow{font-size:clamp(12px,.72rem,15px)} .small,.field-hint,.footer-bottom{font-size:clamp(14px,.8rem,17px)} .site-footer{font-size:clamp(15px,.85rem,18px)} .field label{font-size:clamp(15px,.85rem,18px)} .field input,.field select,.field textarea{font-size:clamp(16px,.86rem,19px)} .gallery figcaption{font-size:clamp(14px,.82rem,17px)} .card-link span{font-size:clamp(14px,.82rem,17px)} .review cite{font-size:clamp(15px,.84rem,17px)} .review cite span{font-size:clamp(13px,.76rem,15px)} .placeholder-note{font-size:clamp(14px,.8rem,16px)} /* --- Sticky mobile call bar --------------------------------------------- */ .call-bar{display:none} /* --- Responsive --------------------------------------------------------- */ /* The nav is set in larger type now, so it needs to start shrinking — and then collapse into the mobile menu — earlier than it did before. */ @media (max-width:1240px){ .nav a{padding:10px 12px} .brand img{width:206px;height:43px} } @media (max-width:1150px){ .header-email{display:none} } @media (max-width:1100px){ .nav a{padding:9px 9px;font-size:15px} .brand img{width:184px;height:38px} .header-tel{font-size:1rem} .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:40px} .section{padding:72px 0} } @media (max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .split,.hero-grid{grid-template-columns:1fr;gap:40px} .hero-media{order:-1} .hero-stat{width:108px;height:108px;left:auto;right:18px;bottom:-18px} .hero-stat b{font-size:29px} .gallery{grid-template-columns:1fr} .gallery img{height:260px} .card img{height:230px} } @media (max-width:1040px){ .header-inner{flex-wrap:wrap;position:relative} .nav-toggle-label{display:inline-flex} .header-tel{display:none} .nav{ display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0; border-top:1px solid var(--border-subtle);margin-top:12px;padding-top:8px;padding-bottom:8px } .nav-toggle:checked ~ .nav{display:flex} .nav a{padding:16px 8px;font-size:1.15rem;border-bottom:1px solid var(--ice-200);border-radius:0} .nav a:last-child{border-bottom:0} .header-cta .btn{display:none} .brand img{width:200px;height:41px} .call-bar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:1px; box-shadow:0 -2px 14px rgba(14,34,54,.18) } .call-bar a{ flex:1;display:flex;align-items:center;justify-content:center;gap:8px; padding:17px 10px;font-weight:700;font-size:1.1rem;text-decoration:none;color:#fff } .call-bar a:hover{text-decoration:none;color:#fff} .call-bar .cb-call{background:var(--navy-900)} .call-bar .cb-email{background:var(--navy-800)} .call-bar .cb-quote{background:var(--blue-600)} body{padding-bottom:62px} } @media (max-width:640px){ :root{--gutter:20px} .section{padding:56px 0} .section-sm{padding:40px 0} .grid{gap:24px} .grid-4,.grid-3,.grid-2{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:36px} .btn{width:100%} .btn-row{flex-direction:column} .hero{padding:40px 0 56px} .hero-stat{display:none} .card-body{padding:24px} .form-card{padding:26px 22px} .callout{padding:22px 24px} .faq summary{font-size:1.1rem;padding:20px 36px 20px 0} .faq summary::after{top:28px} .faq[open] summary::after{top:33px} } @media print{ .site-header,.call-bar,.site-footer,.breadcrumb{display:none} body{font-size:11pt} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }