/* ============================================================ HARDLINE ELECTRICS — shared stylesheet Built to the August 2026 brand guide. Tokens map to BRAND.md §02. ============================================================ */ :root{ --green:#40b93c; --green-dark:#2d8a29; --blue:#40c1f3; --blue-dark:#1a9fd4; --amber:#F68625; --amber-dark:#d46f14; --charcoal:#231f20; --black:#1c1a1a; --white:#ffffff; --ink:#f4f4f2; --ink-dim:rgba(244,244,242,.58); --ink-faint:rgba(244,244,242,.34); --rule:rgba(244,244,242,.11); --accent:var(--green); --accent-dark:var(--green-dark); --f:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --gut:clamp(20px,5vw,80px); --ease:cubic-bezier(.22,1,.36,1); } /* per-page accent — set on */ [data-accent="blue"]{--accent:var(--blue);--accent-dark:var(--blue-dark)} [data-accent="amber"]{--accent:var(--amber);--accent-dark:var(--amber-dark)} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--black);color:var(--ink); font-family:var(--f);font-weight:400;font-size:18px;line-height:1.72; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:var(--charcoal)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:var(--charcoal);padding:12px 20px;font-weight:700} .skip:focus{left:0} body::before{ content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .glow{ position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(58vw 46vw at 78% -8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%); transition:background 1.1s var(--ease); } /* ---------- type ---------- */ h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance} h1{font-size:clamp(2.5rem,6.2vw,4.3rem);line-height:1.06} h2{font-size:clamp(1.95rem,3.8vw,2.55rem);line-height:1.18;letter-spacing:-.005em} h3{font-size:clamp(1.26rem,2.1vw,1.55rem);font-weight:500;letter-spacing:.005em;line-height:1.3} p{margin:0} .lede{font-size:clamp(1.14rem,1.6vw,1.32rem);color:var(--ink-dim);max-width:60ch} .label{ font-size:0.752rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase; color:var(--accent);display:flex;align-items:center;gap:.85em; } .label::before{content:'';width:26px;height:1px;background:currentColor;opacity:.7} .label--plain::before{display:none} .more{margin-top:34px;font-size:0.796rem;font-weight:700;letter-spacing:.185em;text-transform:uppercase;color:var(--accent)} .more a{display:inline-flex;align-items:center;gap:11px} .more .arw{transition:transform .4s var(--ease)} .more a:hover .arw{transform:translateX(6px)} .note{margin-top:52px;font-size:1.05rem;color:var(--ink-faint);max-width:62ch;line-height:1.8} .wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut);position:relative;z-index:1} section{position:relative;z-index:1} .sec{padding:clamp(80px,10vw,140px) 0} .sec--alt{background:var(--charcoal);border-block:1px solid var(--rule)} .sec__head{max-width:62ch;margin-bottom:clamp(44px,6vw,72px)} .sec__head h2{margin-top:20px} .sec__head .lede{margin-top:20px} .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:start} /* ---------- ECG ---------- */ .ecg{overflow:visible} .ecg path{ fill:none;stroke:var(--accent);stroke-width:2; stroke-linecap:square;stroke-linejoin:miter; stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600); } .drawn.ecg path, .drawn .ecg path{transition:stroke-dashoffset 1.9s var(--ease) .25s;stroke-dashoffset:0} /* ---------- header ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .45s var(--ease),border-color .45s var(--ease); border-bottom:1px solid transparent; } header.stuck{background:rgba(28,26,26,.88);backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--rule)} .bar{ max-width:1280px;margin:0 auto;padding:16px var(--gut); display:flex;align-items:center;justify-content:space-between;gap:28px; } .logo{display:flex;align-items:center;flex-shrink:0} .logo img{width:auto;height:58px} footer .logo img{height:70px} nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)} nav a{ font-size:0.812rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-dim);transition:color .3s;position:relative;padding-block:5px;white-space:nowrap; } nav a::after{ content:'';position:absolute;left:0;bottom:0;width:100%;height:1px; background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease); } nav a:hover{color:var(--ink)} nav a:hover::after{transform:scaleX(1);transform-origin:left} nav a.on{color:var(--ink)} nav a.on::after{transform:scaleX(1)} .tel{ display:flex;align-items:center;gap:9px;font-size:0.905rem;font-weight:700;letter-spacing:.06em; border:1px solid var(--rule);padding:11px 18px;transition:all .35s var(--ease);white-space:nowrap; background:rgba(28,26,26,.35);backdrop-filter:blur(6px); } .tel:hover{border-color:var(--accent);color:var(--accent)} .tel svg{width:15px;height:15px;flex-shrink:0;fill:var(--accent);animation:live-icon 2.8s ease-in-out infinite} @keyframes live-icon{0%,100%{opacity:1}50%{opacity:.55}} .burger{ display:none;cursor:pointer;position:relative;z-index:6; /* Boxed so it reads as a pair with the phone button rather than two loose lines. */ background:rgba(28,26,26,.35);border:1px solid var(--rule);backdrop-filter:blur(6px); width:46px;height:46px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:6px; transition:border-color .35s var(--ease); } .burger:hover{border-color:var(--accent)} .burger i{display:block;width:20px;height:2px;background:var(--ink);transition:.3s var(--ease)} .burger[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)} .burger[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)} .burger[aria-expanded="true"]{border-color:var(--accent)} /* ---------- hero / pagehead ---------- */ .hero{min-height:100svh;display:flex;align-items:center;padding:150px 0 72px;overflow:hidden;position:relative} .hero__bg,.pagehead__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero__bg img,.pagehead__bg img{width:100%;height:100%;object-fit:cover;opacity:.42} .hero__bg::after,.pagehead__bg::after{ content:'';position:absolute;inset:0; background: linear-gradient(90deg,var(--black) 6%,rgba(28,26,26,.82) 46%,rgba(28,26,26,.55) 100%), linear-gradient(to top,var(--black) 2%,transparent 42%); } .hero .wrap,.pagehead .wrap{position:relative;z-index:2} .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:end} .hero h1{margin:26px 0 0;max-width:17ch} .hero h1 .em{display:inline-block;color:var(--accent);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--accent) 32%,transparent)} .hero .lede{margin-top:26px} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px} .hero__ecg{width:min(300px,30vw);height:110px;opacity:.9} .hero__meta{margin-top:70px;padding-top:26px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center} .pagehead{position:relative;padding:clamp(150px,17vw,220px) 0 clamp(60px,7vw,96px);overflow:hidden;border-bottom:1px solid var(--rule)} .pagehead h1{margin-top:22px;max-width:16ch} .pagehead .lede{margin-top:24px} .pagehead--plain{padding-top:clamp(160px,18vw,230px)} /* A section straight after a pagehead would otherwise stack the pagehead's bottom padding on top of its own — up to 236px of dead space. Halve it. */ .pagehead + .sec, .pagehead + .recog{padding-top:clamp(46px,5.5vw,80px)} .chip{display:inline-flex;align-items:center;gap:9px;font-size:0.763rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)} .chip::before{content:'';width:5px;height:5px;background:var(--tick,var(--green));transform:rotate(45deg)} .chip--award{color:var(--ink)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:13px; padding:17px 30px;font-size:0.828rem;font-weight:700;letter-spacing:.185em;text-transform:uppercase; border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden; transition:color .4s var(--ease),border-color .4s var(--ease); } .btn--solid{background:var(--accent);color:var(--charcoal)} .btn--solid::before{content:'';position:absolute;inset:0;background:var(--accent-dark);transform:translateY(101%);transition:transform .45s var(--ease);z-index:0} .btn--solid:hover::before{transform:translateY(0)} .btn--ghost{border-color:var(--rule);color:var(--ink);background:rgba(28,26,26,.4);backdrop-filter:blur(6px)} .btn--ghost:hover{border-color:var(--accent);color:var(--accent)} .btn > *{position:relative;z-index:1} .btn .arw{transition:transform .4s var(--ease)} .btn:hover .arw{transform:translateX(5px)} /* ---------- strip ---------- */ .strip{border-block:1px solid var(--rule);overflow:hidden;background:rgba(35,31,32,.4)} .strip__track{display:flex;width:max-content;animation:slide 42s linear infinite} .strip:hover .strip__track{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .strip__item{padding:19px 40px;display:flex;align-items:center;gap:13px;white-space:nowrap;font-size:0.763rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)} .strip__dot{width:4px;height:4px;background:var(--accent);border-radius:50%} /* ---------- divisions ---------- */ .div-list{border-top:1px solid var(--rule)} .division{ --accent:var(--green);--accent-dark:var(--green-dark); --bleed:clamp(16px,2vw,30px); border-bottom:1px solid var(--rule);position:relative; /* Inset the content, then pull the block back out by the same amount, so the hover wash and the accent bar breathe past the text without the text falling out of alignment with the section heading above. The bleed stays under --gut, so it never reaches the viewport edge. */ padding:clamp(40px,5vw,66px) var(--bleed); margin-inline:calc(-1 * var(--bleed)); transition:background .55s var(--ease); } .division[data-accent="blue"]{--accent:var(--blue);--accent-dark:var(--blue-dark)} .division[data-accent="amber"]{--accent:var(--amber);--accent-dark:var(--amber-dark)} .division::before{content:'';position:absolute;left:0;top:-1px;height:7px;width:0;background:var(--accent);transition:width .7s var(--ease)} .division:hover::before{width:100%} .division:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 62%)} .division__row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) auto;gap:clamp(22px,4vw,60px);align-items:start} .division__num{font-size:0.763rem;font-weight:700;letter-spacing:.24em;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:16px} .division__num i{display:block;width:22px;height:2px;background:var(--accent);font-style:normal} .division h3{font-size:clamp(1.5rem,2.9vw,2.05rem);font-weight:600;letter-spacing:-.005em} .division h3 a:hover{color:var(--accent)} .division__kicker{display:block;font-size:0.763rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-top:12px} .division__body p{color:var(--ink-dim);max-width:50ch} .division__list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px} .division__list li{font-size:0.736rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--rule);padding:7px 13px;transition:.35s var(--ease)} .division:hover .division__list li{border-color:color-mix(in srgb,var(--accent) 34%,transparent);color:var(--ink-dim)} .division__go{display:inline-flex;align-items:center;gap:12px;align-self:center;font-size:0.796rem;font-weight:700;letter-spacing:.185em;text-transform:uppercase;color:var(--accent);white-space:nowrap} .division__go .arw{transition:transform .4s var(--ease)} .division:hover .division__go .arw{transform:translateX(6px)} /* ---------- capabilities ---------- */ .cap__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule)} .cap{background:var(--charcoal);padding:clamp(28px,3.2vw,40px);transition:background .5s var(--ease)} .cap:hover{background:#2a2625} .cap__n{font-size:0.763rem;font-weight:700;letter-spacing:.24em;color:var(--accent)} .cap h3{margin:16px 0 12px;font-weight:600;font-size:1.22rem} .cap p{font-size:1.03rem;color:var(--ink-dim);line-height:1.75} /* ---------- recognition ---------- */ .recog{padding:clamp(70px,8vw,110px) 0;border-block:1px solid var(--rule)} .recog__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,84px);align-items:center} .recog h2{margin-top:20px} .recog .lede{margin-top:20px} .medals{display:flex;flex-wrap:wrap;gap:22px} .medal{--ring:var(--amber);width:158px;flex:0 0 auto;text-align:center;padding:26px 15px;border:1px solid rgba(244,244,242,.2);position:relative;overflow:hidden;transition:border-color .5s var(--ease),transform .6s var(--ease)} .medal:hover{border-color:color-mix(in srgb,var(--ring) 55%,transparent);transform:translateY(-4px)} .medal::before{content:'';position:absolute;inset:0;opacity:.16;background:radial-gradient(60% 60% at 50% 0%,var(--ring),transparent 70%)} .medal--silver{--ring:#9aa3a8} .medal--clipsal{--ring:var(--green)} .medal__star{font-size:1.09rem;color:var(--ring);letter-spacing:.1em} .medal__body{font-size:0.719rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,244,242,.78);margin-top:12px;line-height:1.9} .medal__yr{display:block;font-size:1.5rem;font-weight:800;letter-spacing:.02em;color:var(--ring);margin-top:8px;line-height:1} .medal__note{display:block;font-size:0.643rem;letter-spacing:.18em;color:rgba(244,244,242,.6);margin-top:10px} /* ---------- approach ---------- */ .approach{background:var(--charcoal);border-block:1px solid var(--rule)} .approach__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--rule)} .step{background:var(--charcoal);padding:clamp(28px,3.2vw,42px);transition:background .5s var(--ease)} .step:hover{background:#2a2625} .step__n{font-size:clamp(2.6rem,4.4vw,3.4rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px var(--ink-faint);transition:.5s var(--ease)} .step:hover .step__n{-webkit-text-stroke-color:var(--accent);color:color-mix(in srgb,var(--accent) 9%,transparent)} .step h3{margin:22px 0 12px;font-weight:600;font-size:1.25rem} .step p{font-size:1.05rem;color:var(--ink-dim);line-height:1.72} /* ---------- work cards ---------- */ .work__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .card{position:relative;border:1px solid var(--rule);overflow:hidden;transition:border-color .5s var(--ease),transform .6s var(--ease)} .card:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-5px)} .card__img{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--charcoal)} .card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .5s var(--ease);opacity:.86} .card:hover .card__img img{transform:scale(1.045);opacity:1} .card__img::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--accent) 18%,transparent),transparent 55%);opacity:0;transition:opacity .6s var(--ease)} .card:hover .card__img::after{opacity:1} .card__bar{height:5px;background:var(--accent);width:100%;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)} .card:hover .card__bar{transform:scaleX(1)} .card__body{padding:26px 26px 30px} .card h3{font-size:1.35rem;font-weight:600;margin:13px 0 10px} .card p{font-size:1.02rem;color:var(--ink-dim);line-height:1.7} .card p.card__cat{font-size:0.719rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)} .card p.card__loc{margin-top:18px;font-size:0.73rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)} /* ---------- dogma ---------- */ .dogma{padding:clamp(80px,10vw,130px) 0;text-align:center;position:relative;overflow:hidden} .dogma__ecg{width:min(520px,80vw);height:80px;margin:0 auto 44px;opacity:.55} .dogma blockquote{margin:0 auto;max-width:22ch;font-size:clamp(1.5rem,3.5vw,2.3rem);font-weight:600;font-style:italic;line-height:1.34;letter-spacing:-.01em} .dogma cite{display:block;margin-top:32px;font-style:normal;font-size:0.763rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)} /* ---------- CTA band ---------- */ .ctaband{background:var(--charcoal);border-top:5px solid var(--accent);padding:clamp(56px,7vw,88px) 0} .ctaband__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:36px} .ctaband h2{max-width:14ch} .ctaband .lede{margin-top:16px;max-width:52ch} .ctaband__act{display:flex;flex-wrap:wrap;gap:14px} /* ---------- contact / form ---------- */ .contact__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,90px);align-items:start} .dl{border-top:1px solid var(--rule)} .dl__row{display:flex;justify-content:space-between;gap:24px;padding:17px 0;border-bottom:1px solid var(--rule)} .dl__k{font-size:0.73rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);flex-shrink:0} .dl__v{font-size:1.05rem;font-weight:500;text-align:right} .dl__sub{color:var(--ink-faint);font-size:0.905rem;font-weight:400} .dl__v a:hover{color:var(--accent)} .dl--wide{max-width:820px} .urgent{margin-top:36px;border-left:2px solid var(--accent);padding:6px 0 6px 22px} .urgent p{font-size:1.02rem;color:var(--ink-dim);line-height:1.75;margin-top:10px} .urgent a{color:var(--ink);border-bottom:1px solid var(--accent)} /* The form is the conversion point on the whole site, so it is deliberately the highest-contrast element on the page rather than another quiet dark panel. */ .form{ background:rgba(244,244,242,.045); border:1px solid rgba(244,244,242,.16); border-top:4px solid var(--accent); padding:clamp(24px,3vw,38px); } .form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{position:relative;display:flex;flex-direction:column} .field--full{grid-column:1/-1} .field label{font-size:0.719rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,244,242,.82);margin-bottom:9px} .field label .req{color:var(--accent)} .field input,.field select,.field textarea{ font-family:var(--f);font-size:1.06rem;font-weight:400;color:var(--ink); background:rgba(12,11,11,.72);border:1px solid rgba(244,244,242,.24);border-radius:0; padding:14px 15px;width:100%;transition:border-color .35s var(--ease),background .35s var(--ease); -webkit-appearance:none;appearance:none; } .field textarea{resize:vertical;min-height:120px;line-height:1.6} .field select{ background-image:linear-gradient(45deg,transparent 50%,rgba(244,244,242,.7) 50%),linear-gradient(135deg,rgba(244,244,242,.7) 50%,transparent 50%); background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px;cursor:pointer; } .field select option{background:var(--charcoal);color:var(--ink)} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--accent);background:rgba(12,11,11,.95); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); } .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(244,244,242,.4)} .field input::placeholder,.field textarea::placeholder{color:rgba(244,244,242,.42)} .form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px} .form__note{font-size:0.796rem;color:var(--ink-dim);letter-spacing:.04em;max-width:34ch;line-height:1.7} .form__note a{color:var(--ink-dim);border-bottom:1px solid var(--rule)} .form__btn{border:0;font-family:var(--f);padding:20px 34px;box-shadow:0 6px 24px color-mix(in srgb,var(--accent) 26%,transparent)} .form__btn:hover{box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 38%,transparent)} .form__btn[disabled]{opacity:.5;cursor:wait} .form__err{display:none;grid-column:1/-1;margin-top:4px;padding:13px 15px;border:1px solid rgba(220,80,60,.45);background:rgba(220,80,60,.08);font-size:0.926rem;color:#f0b3a8} .form__err.show{display:block} .form__done{display:none;padding:40px 34px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)} .form__done.show{display:block} .form__done svg{width:44px;height:26px;margin-bottom:20px} .form__done h3{font-weight:600;font-size:1.33rem} .form__done p{margin-top:12px;color:var(--ink-dim);font-size:1.08rem;max-width:44ch} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- reviews ---------- */ .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:clamp(44px,6vw,68px)} .review{border-left:2px solid var(--accent);padding:4px 0 4px 22px} .review p{font-size:1.16rem;font-weight:500;line-height:1.6} .review span{display:block;margin-top:13px;font-size:0.719rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-faint)} /* ---------- footer ---------- */ footer{border-top:5px solid var(--green);background:var(--black);padding:56px 0 34px} .foot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:start} .foot__h{font-size:0.79rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,244,242,.62);margin-bottom:20px} .foot__legal{font-size:0.9rem;color:var(--ink-dim);line-height:1.95;letter-spacing:.03em;margin-top:24px} .foot__nav{display:flex;flex-direction:column;gap:14px} .foot__nav a{font-size:0.96rem;font-weight:500;letter-spacing:.03em;color:rgba(244,244,242,.78)} .foot__nav a:hover{color:var(--green)} .foot__bot{margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:0.8rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,244,242,.55)} /* ---------- reveal ---------- Visible by default; JS hides then animates, so no-JS never blanks. */ .rv{transition:opacity .95s var(--ease),transform .95s var(--ease)} .js .rv{opacity:0;transform:translateY(26px)} .js .rv.in{opacity:1;transform:none} .rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s} .rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s} /* ---------- responsive ---------- */ @media(max-width:1080px){ nav{gap:16px} nav a{font-size:0.758rem;letter-spacing:.1em} .logo img{height:50px} } @media(max-width:960px){ .hero__grid{grid-template-columns:1fr} .hero__ecg{display:none} .hero__bg::after,.pagehead__bg::after{background:linear-gradient(90deg,var(--black) 2%,rgba(28,26,26,.86) 60%,rgba(28,26,26,.7) 100%),linear-gradient(to top,var(--black) 2%,transparent 45%)} .division__row{grid-template-columns:1fr;gap:20px} .division__go{align-self:start} .contact__grid,.recog__grid,.split{grid-template-columns:1fr} .foot{grid-template-columns:1fr 1fr} .foot__brand{grid-column:1/-1} } @media(max-width:780px){ nav{ position:fixed;inset:0;background:var(--black);flex-direction:column;justify-content:center;gap:30px; /* Fade rather than slide: a sliding panel spends its whole transition half-covering the page, with the centred menu items floating over whatever is behind. Opacity has no broken in-between state. */ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--ease),visibility .3s var(--ease);z-index:5; } nav.open{opacity:1;visibility:visible;pointer-events:auto} nav a{font-size:1.14rem;letter-spacing:.1em} .burger{display:flex;order:3} /* Keep the masthead usable while the menu is open — on a trades site the phone number is a conversion path, not decoration. */ .logo,.tel{position:relative;z-index:6} .tel svg{width:14px;height:14px} /* nav is position:fixed here, so the bar's space-between would strand the phone button in the middle. Push it and the burger to the right together. */ .tel{padding:10px 14px;font-size:0.839rem;margin-left:auto} .bar{gap:14px} .logo img{height:50px} footer .logo img{height:58px} .hero{padding-top:120px} .form__grid{grid-template-columns:1fr} .foot{grid-template-columns:1fr} .ctaband__in{gap:26px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} .rv{opacity:1;transform:none} .ecg path{stroke-dashoffset:0} html{scroll-behavior:auto} }