/* ============================================================ TradieWeb theme stylesheet (Clean & Current + Heavy Duty + Trade Craft) Host this on your CDN. Linked once from the Previews template . Rebuild with build_head.py; bump ?v= in the on each deploy. ============================================================ */ a{text-decoration:none;color:inherit;} :root{--primary:#0b2545;--accent:#2e6fff;} /* ===== CLEAN & CURRENT THEME (cc-) ===== */ .cc-nav *,.cc-hero *,.cc-sec *,.cc-trust *,.cc-cta *,.cc-foot *, .cc-nav,.cc-hero,.cc-sec,.cc-trust,.cc-cta,.cc-foot{box-sizing:border-box;} :root{ --bg:#f6f8fc; --card:#ffffff; --line:#e3e9f2; --text:#0e2238; --muted:#5a6b80; --muted2:#8a99ab; --accent-2:color-mix(in srgb,var(--accent),white 32%); --sky:color-mix(in srgb,var(--accent),white 88%); --sky-2:color-mix(in srgb,var(--accent),white 80%); --head:'Plus Jakarta Sans',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; } .cc-wrap{max-width:1160px;margin:0 auto;padding:0 32px;} @media(max-width:640px){.cc-wrap{padding:0 max(20px,6vw);}} .cc-ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;} /* buttons */ .cc-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:10px;cursor:pointer;border:none;text-decoration:none;transition:transform .18s,box-shadow .22s,background .2s,color .2s;} .cc-btn-b{background:var(--accent);color:#fff;padding:14px 26px;font-size:15px;box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 46%,transparent);} .cc-btn-b:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 42%,transparent);} .cc-btn-white{background:#fff;color:var(--primary);} .cc-btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18);} .cc-btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.28);} .cc-btn-glass:hover{background:rgba(255,255,255,.2);} /* nav */ .cc-nav{position:relative;z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);} .cc-nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;} .cc-logo{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--primary);text-decoration:none;} .cc-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent);} .cc-mark .cc-ico{width:19px;height:19px;} .cc-logo-svg svg{height:34px;width:auto;display:block;} .cc-nav-r{display:flex;align-items:center;gap:30px;} .cc-nav-links{display:flex;gap:28px;} .cc-nav-links a{font-size:14.5px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .18s;} .cc-nav-links a:hover{color:var(--primary);} @media(max-width:820px){.cc-nav-links{display:none;}} /* hero */ .cc-hero{position:relative;background:var(--primary);color:#fff;overflow:hidden;} .cc-hero::before{content:'';position:absolute;inset:0;background: radial-gradient(closest-side at 78% 18%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 70%), radial-gradient(closest-side at 12% 88%,color-mix(in srgb,var(--accent-2) 32%,transparent),transparent 70%);} .cc-hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);} .cc-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:92px 0 100px;} @media(max-width:920px){.cc-hero-grid{grid-template-columns:1fr;gap:44px;padding:60px 0 68px;}} .cc-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:99px;font-size:13px;font-weight:600;color:#dbe6ff;margin-bottom:22px;} .cc-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25);} .cc-h1{font-family:var(--head);font-weight:800;font-size:clamp(38px,5.4vw,64px);line-height:1.05;letter-spacing:-0.03em;margin-bottom:18px;} .cc-g{background:linear-gradient(120deg,var(--accent-2),#fff);-webkit-background-clip:text;background-clip:text;color:transparent;} .cc-lead{font-size:18px;color:#cdd8ec;max-width:470px;margin-bottom:30px;} .cc-hero-cta{display:flex;gap:13px;flex-wrap:wrap;} .cc-glass{position:relative;background:rgba(255,255,255,.08);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:28px;box-shadow:0 30px 70px rgba(4,16,34,.5);} .cc-glass-h{display:flex;align-items:center;gap:12px;} .cc-av{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;} .cc-av .cc-ico{width:22px;height:22px;} .cc-glass-nm{font-family:var(--head);font-weight:700;font-size:16px;} .cc-glass-sm{font-size:12.5px;color:#9fb0c9;} .cc-glass-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;} .cc-gs{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px 18px;} .cc-gs-n{font-family:var(--head);font-weight:800;font-size:32px;line-height:1;letter-spacing:-.5px;} .cc-gs-l{font-size:11.5px;color:#b6c6dc;margin-top:7px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;} /* trust */ .cc-trust{background:var(--bg);border-bottom:1px solid var(--line);} .cc-trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:40px 0;} .cc-trust-item{display:flex;align-items:flex-start;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 20px;box-shadow:0 1px 2px rgba(16,24,40,.05);} .cc-tic{width:46px;height:46px;border-radius:12px;background:var(--sky);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .cc-tic .cc-ico{width:24px;height:24px;} .cc-tt{font-family:var(--head);font-weight:700;font-size:15px;color:var(--primary);margin-bottom:4px;line-height:1.25;} .cc-ts{font-size:12.5px;color:var(--muted2);line-height:1.45;} @media(max-width:880px){.cc-trust-in{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.cc-trust-in{grid-template-columns:1fr;}} /* section shell */ .cc-sec{padding:96px 0;background-image:radial-gradient(color-mix(in srgb,var(--primary) 5%,transparent) 1px,transparent 1px);background-size:24px 24px;} .cc-sec-head{max-width:600px;margin-bottom:52px;} .cc-sec-head.cc-center{margin:0 auto 52px;text-align:center;} .cc-tag{display:inline-flex;align-items:center;gap:8px;background:var(--sky);color:var(--accent);font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:7px 14px;border-radius:99px;margin-bottom:18px;} .cc-sec-t{font-family:var(--head);font-weight:800;font-size:clamp(28px,3.8vw,44px);line-height:1.08;letter-spacing:-0.025em;color:var(--primary);} .cc-sec-sub{font-size:17px;color:var(--muted);margin-top:14px;} /* services */ .cc-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media(max-width:880px){.cc-svc-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.cc-svc-grid{grid-template-columns:1fr;}} .cc-svc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:transform .22s,box-shadow .28s,border-color .2s;} .cc-svc:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,37,69,.12);border-color:#fff;} .cc-svc-ic{width:56px;height:56px;border-radius:15px;background:linear-gradient(135deg,var(--sky),var(--sky-2));color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:transform .25s;} .cc-svc:hover .cc-svc-ic{transform:scale(1.08) rotate(-4deg);} .cc-svc-ic .cc-ico{width:27px;height:27px;} .cc-svc h3{font-family:var(--head);font-weight:700;font-size:19px;color:var(--primary);margin-bottom:9px;} .cc-svc p{font-size:14.5px;color:var(--muted);} /* how it works */ .cc-how{background:#fff;} .cc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s;} @media(max-width:780px){.cc-steps{grid-template-columns:1fr;}} .cc-step{position:relative;padding:34px 28px;border:1px solid var(--line);border-radius:18px;transition:transform .2s,box-shadow .25s;} .cc-step:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,37,69,.1);} .cc-step-n{counter-increment:s;font-family:var(--head);font-weight:800;font-size:15px;width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .cc-step-n::before{content:"0" counter(s);} .cc-step h3{font-family:var(--head);font-weight:700;font-size:18px;color:var(--primary);margin-bottom:8px;} .cc-step p{font-size:14.5px;color:var(--muted);} /* about */ .cc-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;} @media(max-width:860px){.cc-about-grid{grid-template-columns:1fr;gap:36px;}.cc-about-media{min-height:300px;}.cc-media-fallback{min-height:200px;display:flex;align-items:center;justify-content:center;}.cc-media-fallback .cc-badge{position:static;left:auto;bottom:auto;}} .cc-about-media{position:relative;border-radius:22px;overflow:hidden;min-height:440px;background-size:cover;background-position:center;box-shadow:0 30px 60px rgba(11,37,69,.18);} .cc-media-fallback{background:linear-gradient(150deg,var(--primary),color-mix(in srgb,var(--primary),var(--accent) 45%));} .cc-badge{position:absolute;left:22px;bottom:22px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;box-shadow:0 14px 30px rgba(0,0,0,.2);} .cc-badge-n{font-family:var(--head);font-weight:800;font-size:28px;color:var(--primary);line-height:1;} .cc-badge-l{font-size:12.5px;color:var(--muted);} .cc-ab-list{margin-top:26px;display:flex;flex-direction:column;gap:16px;} .cc-ab-item{display:flex;gap:13px;align-items:flex-start;} .cc-ab-ic{width:26px;height:26px;border-radius:8px;background:var(--sky);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .cc-ab-ic .cc-ico{width:16px;height:16px;} .cc-ab-item b{font-family:var(--head);font-weight:700;display:block;font-size:15px;color:var(--primary);} .cc-ab-item span{font-size:14px;color:var(--muted);} /* gallery */ .cc-gal{background:#fff;} .cc-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:780px){.cc-gal-grid{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.cc-gal-grid{grid-template-columns:1fr;}} .cc-gal-item{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;} .cc-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1);} .cc-gal-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,37,69,.7));opacity:0;transition:opacity .35s;} .cc-gal-item:hover img{transform:scale(1.07);} .cc-gal-item:hover::after{opacity:1;} .cc-gal-cap{position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;font-family:var(--head);font-weight:600;font-size:14px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;} .cc-gal-item:hover .cc-gal-cap{opacity:1;transform:none;} /* testimonials */ .cc-testi{background:#fff;} .cc-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media(max-width:860px){.cc-testi-grid{grid-template-columns:1fr;}} .cc-tcard{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .2s,box-shadow .25s;} .cc-tcard:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(11,37,69,.1);} .cc-stars{display:flex;gap:3px;color:#ffb020;margin-bottom:14px;} .cc-stars .cc-ico{width:18px;height:18px;fill:#ffb020;stroke:#ffb020;} .cc-tcard p{font-size:15.5px;color:var(--text);margin-bottom:18px;} .cc-who{display:flex;align-items:center;gap:12px;} .cc-tav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:15px;flex-shrink:0;} .cc-who b{font-family:var(--head);font-weight:700;font-size:14.5px;color:var(--primary);display:block;} .cc-who span{font-size:13px;color:var(--muted2);} /* service area */ .cc-area{background:#fff;} .cc-area-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;} .cc-area-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--primary);transition:border-color .2s,transform .18s;} .cc-area-chip:hover{border-color:var(--accent);transform:translateY(-2px);} .cc-area-chip .cc-ico{width:17px;height:17px;color:var(--accent);} /* guarantee */ .cc-guarantee{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--primary),white 3%),color-mix(in srgb,var(--primary),black 16%));} .cc-guarantee::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side at 86% 10%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 62%),radial-gradient(closest-side at 8% 96%,color-mix(in srgb,var(--accent-2) 20%,transparent),transparent 62%);} .cc-guarantee .cc-wrap{position:relative;z-index:2;} .cc-guarantee .cc-tag{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;} .cc-guar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:780px){.cc-guar-grid{grid-template-columns:1fr;}} .cc-guar{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:30px 26px;box-shadow:0 18px 44px rgba(4,16,34,.3);transition:transform .2s,background .25s,box-shadow .25s;} .cc-guar:hover{transform:translateY(-4px);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));box-shadow:0 26px 56px rgba(4,16,34,.38);} .cc-guar-ic{width:50px;height:50px;border-radius:13px;background:color-mix(in srgb,var(--accent) 34%,transparent);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .cc-guar-ic .cc-ico{width:25px;height:25px;} .cc-guar h3{font-family:var(--head);font-weight:700;font-size:18px;color:#fff;margin-bottom:8px;} .cc-guar p{font-size:14.5px;color:#cdd9e8;} /* faq */ .cc-faqsec{background:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--primary) 5%,transparent) 1px,transparent 1px);background-size:24px 24px;} .cc-faq-wrap{max-width:760px;} .cc-faq-list{display:flex;flex-direction:column;gap:12px;} .cc-faq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px;transition:box-shadow .2s;} .cc-faq[open]{box-shadow:0 12px 30px rgba(11,37,69,.08);} .cc-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--head);font-weight:700;font-size:16.5px;color:var(--primary);} .cc-faq summary::-webkit-details-marker{display:none;} .cc-faq-i{position:relative;width:18px;height:18px;flex-shrink:0;} .cc-faq-i::before,.cc-faq-i::after{content:'';position:absolute;background:var(--accent);border-radius:2px;transition:transform .25s;} .cc-faq-i::before{top:8px;left:0;width:18px;height:2px;} .cc-faq-i::after{top:0;left:8px;width:2px;height:18px;} .cc-faq[open] .cc-faq-i::after{transform:rotate(90deg);opacity:0;} .cc-faq-a{padding:0 0 20px;font-size:15px;color:var(--muted);line-height:1.6;} /* cta */ .cc-cta{position:relative;background:var(--primary);color:#fff;overflow:hidden;} .cc-cta::before{content:'';position:absolute;inset:0;background: radial-gradient(closest-side at 80% 20%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 65%), radial-gradient(closest-side at 15% 90%,color-mix(in srgb,var(--accent-2) 30%,transparent),transparent 65%);} .cc-cta-in{position:relative;z-index:2;text-align:center;padding:90px 0;} .cc-cta h2{font-family:var(--head);font-weight:800;font-size:clamp(28px,4vw,48px);line-height:1.06;letter-spacing:-0.025em;margin-bottom:16px;} .cc-cta p{color:#b9c6da;font-size:18px;margin-bottom:30px;} .cc-cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;} /* footer */ .cc-foot{background:color-mix(in srgb,var(--primary),black 35%);color:#93a4ba;} .cc-foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding:56px 0 28px;} .cc-foot .cc-logo{color:#fff;} .cc-foot .cc-mark{box-shadow:none;} .cc-foot p{font-size:14px;max-width:280px;} .cc-foot-c{font-family:var(--head);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:14px;} .cc-foot-contact a{display:block;font-size:14px;margin-bottom:7px;color:#93a4ba;text-decoration:none;transition:color .18s;} .cc-foot-contact a:hover{color:var(--accent-2);} .cc-foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;} /* CONTACT FORM */ .cc-contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 0;} @media(max-width:820px){.cc-contact-grid{grid-template-columns:1fr;gap:32px;padding:60px 0;}} .cc-contact-info h2{font-family:var(--head);font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.06;letter-spacing:-0.025em;margin-bottom:16px;} .cc-contact-info p{color:#b9c6da;font-size:17px;margin-bottom:26px;} .cc-call-btn{font-size:16px;padding:15px 30px;} .cc-form{background:#fff;border-radius:18px;padding:28px;box-shadow:0 30px 70px rgba(4,16,34,.4);} .cc-field{margin-bottom:16px;} .cc-field label{display:block;font-family:var(--head);font-weight:600;font-size:13px;color:var(--primary);margin-bottom:6px;} .cc-form input,.cc-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--body);font-size:14.5px;color:var(--text);background:var(--bg);transition:border-color .18s,box-shadow .18s;} .cc-form input:focus,.cc-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);} .cc-form textarea{resize:vertical;} .cc-form-btn{width:100%;justify-content:center;font-size:15px;padding:14px;margin-top:4px;} .cc-form-note{text-align:center;font-size:13px;color:var(--muted2);margin-top:12px;} /* --- Horizontal gutter floor (fixes hero/cta/trust where a later padding shorthand zeroed the wrap's side padding). Longhand so a shorthand can't clobber it. --- */ .cc-wrap{padding-left:32px;padding-right:32px;} @media(max-width:640px){.cc-wrap{padding-left:max(20px,6vw);padding-right:max(20px,6vw);}} /* ===== HEAVY DUTY THEME (hd-) ===== */ :root{ --hd-ink:#16191d; --hd-steel:#22272e; --hd-steel-2:#2c333c; --hd-orange:#ff5a1f; --hd-orange-2:#ff7a47; --hd-paper:#f4f5f6; --hd-line:rgba(255,255,255,0.09); --hd-muted:#9aa4af; --hd-muted-d:#5b6671; --hd-head:'Archivo',system-ui,sans-serif; --hd-body:'Inter',system-ui,sans-serif; } .hd-nav *,.hd-hero *,.hd-sec *,.hd-trust *,.hd-cta *,.hd-foot *, .hd-nav,.hd-hero,.hd-sec,.hd-trust,.hd-cta,.hd-foot{box-sizing:border-box;} .hd-wrap{max-width:1180px;margin:0 auto;padding:0 32px;} @media(max-width:640px){.hd-wrap{padding:0 max(20px,6vw);}} .hd-ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;} .hd-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--hd-head);font-weight:700;font-size:14px;letter-spacing:.01em;padding:13px 24px;border-radius:2px;cursor:pointer;border:none;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s;text-transform:uppercase;} .hd-btn .hd-ico{width:18px;height:18px;} .hd-btn-o{background:var(--hd-orange);color:#fff;padding:15px 28px;box-shadow:0 8px 26px color-mix(in srgb,var(--hd-orange) 50%,transparent);} .hd-btn-o:hover{background:var(--hd-orange-2);transform:translateY(-2px);box-shadow:0 12px 34px color-mix(in srgb,var(--hd-orange) 60%,transparent);} .hd-btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25);} .hd-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);} /* NAV */ .hd-nav{position:relative;z-index:50;background:rgba(22,25,29,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hd-line);} .hd-nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;} .hd-logo{display:flex;align-items:center;gap:11px;font-family:var(--hd-head);font-weight:900;font-size:20px;letter-spacing:-0.02em;color:#fff;text-transform:uppercase;text-decoration:none;} .hd-mark{width:36px;height:36px;border-radius:3px;background:var(--hd-orange);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .hd-mark .hd-ico{width:20px;height:20px;} .hd-logo-svg svg{height:34px;width:auto;display:block;} .hd-nav-r{display:flex;align-items:center;gap:28px;} .hd-nav-links{display:flex;gap:26px;} .hd-nav-links a{font-size:14px;font-weight:600;color:var(--hd-muted);text-decoration:none;transition:color .18s;} .hd-nav-links a:hover{color:#fff;} @media(max-width:820px){.hd-nav-links{display:none;}} /* HERO */ .hd-hero{position:relative;background:var(--hd-ink);color:#fff;overflow:hidden;} .hd-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(22,25,29,.97) 0%,rgba(22,25,29,.9) 55%,rgba(22,25,29,.78) 100%);} .hd-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:96px 0 110px;} @media(max-width:900px){.hd-hero-grid{grid-template-columns:1fr;gap:40px;padding:64px 0 64px;}} .hd-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--hd-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hd-orange);margin-bottom:22px;} .hd-eyebrow::before{content:'';width:30px;height:3px;background:var(--hd-orange);} .hd-disp{font-family:var(--hd-head);font-weight:900;font-size:clamp(40px,6vw,76px);line-height:.96;letter-spacing:-0.025em;text-transform:uppercase;margin-bottom:22px;} .hd-disp em{font-style:normal;color:var(--hd-orange);} .hd-lead{font-size:18px;color:#cfd6dd;max-width:480px;margin-bottom:34px;} .hd-hero-cta{display:flex;gap:14px;flex-wrap:wrap;} .hd-hazard{height:8px;width:100%;background:repeating-linear-gradient(45deg,var(--hd-orange) 0 18px,var(--hd-ink) 18px 36px);} .hd-statcard{background:var(--hd-steel);border:1px solid var(--hd-line);border-radius:4px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);} .hd-sc-top{background:var(--hd-ink);border-left:4px solid var(--hd-orange);padding:16px 24px;font-family:var(--hd-head);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-orange);} .hd-statrow{display:flex;align-items:center;gap:20px;padding:24px 24px;border-bottom:1px solid var(--hd-line);} .hd-statrow:last-child{border-bottom:none;} .hd-sn{font-family:var(--hd-head);font-weight:900;font-size:44px;line-height:1;color:var(--hd-orange);min-width:96px;} .hd-slbl{font-family:var(--hd-head);font-weight:700;font-size:15px;color:#fff;text-transform:uppercase;letter-spacing:.03em;} /* TRUST */ .hd-trust{background:var(--hd-steel);color:#fff;} .hd-trust-in{display:grid;grid-template-columns:repeat(4,1fr);} .hd-trust-item{display:flex;align-items:center;gap:14px;padding:30px 26px;border-right:1px solid var(--hd-line);} .hd-trust-item:last-child{border-right:none;} .hd-tic{color:var(--hd-orange);flex-shrink:0;} .hd-tic .hd-ico{width:32px;height:32px;} .hd-tt{font-family:var(--hd-head);font-weight:700;font-size:15.5px;text-transform:uppercase;letter-spacing:.02em;} .hd-ts{font-size:12.5px;color:var(--hd-muted);margin-top:3px;} @media(max-width:880px){.hd-trust-in{grid-template-columns:repeat(2,1fr);}.hd-trust-item:nth-child(2){border-right:none;}} @media(max-width:520px){.hd-trust-in{grid-template-columns:1fr;}.hd-trust-item{border-right:none;border-bottom:1px solid var(--hd-line);}} /* SECTION SHELL */ .hd-sec{padding:100px 0;background:var(--hd-paper);} .hd-sec-head{max-width:660px;margin-bottom:50px;} .hd-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--hd-head);font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--hd-orange);margin-bottom:16px;} .hd-tag::before{content:'';width:24px;height:3px;background:var(--hd-orange);} .hd-sec-t{font-family:var(--hd-head);font-weight:900;font-size:clamp(30px,4vw,46px);line-height:1.02;letter-spacing:-0.02em;text-transform:uppercase;color:var(--hd-ink);} .hd-sec-sub{font-size:17px;color:#55606b;margin-top:14px;} /* SERVICES */ .hd-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:880px){.hd-svc-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.hd-svc-grid{grid-template-columns:1fr;}} .hd-svc{position:relative;background:#fff;border:1px solid #e4e7ea;border-radius:4px;padding:32px 28px;overflow:hidden;transition:transform .2s,box-shadow .25s;} .hd-svc::after{content:'';position:absolute;left:0;top:0;height:4px;width:0;background:var(--hd-orange);transition:width .3s;} .hd-svc:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(22,25,29,.13);} .hd-svc:hover::after{width:100%;} .hd-svc-ic{width:54px;height:54px;border-radius:3px;background:#fdeee7;color:var(--hd-orange);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .25s,color .25s;} .hd-svc-ic .hd-ico{width:28px;height:28px;} .hd-svc:hover .hd-svc-ic{background:var(--hd-orange);color:#fff;} .hd-svc h3{font-family:var(--hd-head);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:9px;color:var(--hd-ink);} .hd-svc p{font-size:14.5px;color:#5b6671;} /* HOW (dark) */ .hd-how{background:var(--hd-ink);} .hd-how .hd-sec-sub{color:var(--hd-muted);} .hd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:hd;} @media(max-width:780px){.hd-steps{grid-template-columns:1fr;}} .hd-step{border:1px solid var(--hd-line);border-radius:4px;padding:30px 26px;background:var(--hd-steel);} .hd-step-n{font-family:var(--hd-head);font-weight:900;font-size:16px;width:44px;height:44px;border-radius:3px;background:color-mix(in srgb,var(--hd-orange) 15%,#fff);color:var(--hd-orange);display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .hd-step h3{font-family:var(--hd-head);font-weight:800;font-size:18px;text-transform:uppercase;color:#fff;margin-bottom:8px;} .hd-step p{font-size:14.5px;color:var(--hd-muted);} /* ABOUT */ .hd-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;} @media(max-width:860px){.hd-about-grid{grid-template-columns:1fr;gap:32px;}} .hd-about-img{position:relative;border-radius:4px;overflow:hidden;min-height:420px;background-size:cover;background-position:center;} @media(max-width:860px){.hd-about-img{min-height:260px;}} .hd-about-fallback{background:linear-gradient(150deg,var(--hd-steel),var(--hd-ink));} .hd-about-img .hd-hazard{position:absolute;bottom:0;left:0;right:0;} .hd-ab-list{margin-top:24px;display:flex;flex-direction:column;gap:14px;} .hd-ab-item{display:flex;gap:13px;align-items:flex-start;} .hd-ab-ic{color:var(--hd-orange);flex-shrink:0;margin-top:2px;} .hd-ab-ic .hd-ico{width:22px;height:22px;} .hd-ab-item b{font-family:var(--hd-head);font-weight:700;display:block;font-size:15px;color:var(--hd-ink);} .hd-ab-item span{font-size:14px;color:#5b6671;} /* GALLERY */ .hd-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:780px){.hd-gal-grid{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.hd-gal-grid{grid-template-columns:1fr;}} .hd-gal-item{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;} .hd-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block;} .hd-gal-item:hover img{transform:scale(1.06);} .hd-gal-cap{position:absolute;left:14px;bottom:12px;font-family:var(--hd-head);font-weight:700;font-size:13px;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);} /* TESTIMONIALS */ .hd-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:860px){.hd-testi-grid{grid-template-columns:1fr;}} .hd-tcard{background:#fff;border:1px solid #e4e7ea;border-radius:4px;padding:30px 28px;transition:transform .2s,box-shadow .25s;} .hd-tcard:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(22,25,29,.1);} .hd-stars{display:flex;gap:3px;color:var(--hd-orange);margin-bottom:16px;} .hd-stars .hd-ico{width:18px;height:18px;fill:var(--hd-orange);stroke:var(--hd-orange);} .hd-tcard p{font-size:15.5px;color:#2c333c;margin-bottom:18px;font-weight:500;} .hd-who{font-family:var(--hd-head);font-weight:700;font-size:14px;text-transform:uppercase;color:var(--hd-ink);} .hd-who span{display:block;color:var(--hd-muted-d);font-family:var(--hd-body);font-weight:500;text-transform:none;font-size:13px;} /* SERVICE AREA */ .hd-area-grid{display:flex;flex-wrap:wrap;gap:12px;} .hd-area-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e4e7ea;border-radius:2px;padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--hd-ink);transition:border-color .2s,transform .18s;} .hd-area-chip:hover{border-color:var(--hd-orange);transform:translateY(-2px);} .hd-area-chip .hd-ico{width:17px;height:17px;color:var(--hd-orange);} /* GUARANTEE (dark) */ .hd-guarantee{background:var(--hd-ink);} .hd-guar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:780px){.hd-guar-grid{grid-template-columns:1fr;}} .hd-guar{border:1px solid var(--hd-line);border-radius:4px;padding:30px 26px;background:var(--hd-steel);} .hd-guar-ic{width:52px;height:52px;border-radius:3px;background:color-mix(in srgb,var(--hd-orange) 16%,transparent);color:var(--hd-orange);display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .hd-guar-ic .hd-ico{width:26px;height:26px;} .hd-guar h3{font-family:var(--hd-head);font-weight:800;font-size:17px;text-transform:uppercase;color:#fff;margin-bottom:8px;} .hd-guar p{font-size:14.5px;color:var(--hd-muted);} /* FAQ */ .hd-faqsec{background:var(--hd-paper);} .hd-faq-wrap{max-width:820px;} .hd-faq-list{border-top:1px solid #e4e7ea;} .hd-faq{border-bottom:1px solid #e4e7ea;} .hd-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--hd-head);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.01em;color:var(--hd-ink);} .hd-faq summary::-webkit-details-marker{display:none;} .hd-faq-i{position:relative;width:16px;height:16px;flex-shrink:0;} .hd-faq-i::before,.hd-faq-i::after{content:'';position:absolute;background:var(--hd-orange);border-radius:1px;transition:transform .25s;} .hd-faq-i::before{top:7px;left:0;width:16px;height:2px;} .hd-faq-i::after{left:7px;top:0;width:2px;height:16px;} .hd-faq[open] .hd-faq-i::after{transform:rotate(90deg);opacity:0;} .hd-faq-a{padding:0 0 20px;font-size:15px;color:#55606b;max-width:680px;} /* CTA */ .hd-cta{position:relative;background:var(--hd-ink);color:#fff;text-align:center;overflow:hidden;} .hd-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--hd-orange) 22%,transparent),transparent 60%);} .hd-cta-in{position:relative;z-index:2;padding:92px 0;} .hd-cta h2{font-family:var(--hd-head);font-weight:900;font-size:clamp(30px,4.4vw,52px);line-height:1.02;text-transform:uppercase;letter-spacing:-0.02em;margin-bottom:18px;} .hd-cta p{color:#cfd6dd;font-size:18px;margin-bottom:32px;} .hd-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* FOOTER */ .hd-foot{background:#0f1216;color:var(--hd-muted);border-top:4px solid var(--hd-orange);} .hd-foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding:52px 0 26px;} .hd-foot .hd-logo{margin-bottom:12px;} .hd-foot p{font-size:13.5px;max-width:280px;} .hd-foot-c{font-family:var(--hd-head);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:14px;} .hd-foot-contact a{display:block;color:var(--hd-muted);font-size:14px;margin-bottom:6px;text-decoration:none;transition:color .18s;} .hd-foot-contact a:hover{color:var(--hd-orange);} .hd-foot-bottom{border-top:1px solid var(--hd-line);padding:18px 0;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;} /* CONTACT FORM */ .hd-contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 0;} @media(max-width:820px){.hd-contact-grid{grid-template-columns:1fr;gap:32px;padding:60px 0;}} .hd-contact-info h2{font-family:var(--hd-head);font-weight:900;font-size:clamp(28px,4.4vw,46px);line-height:1.02;text-transform:uppercase;letter-spacing:-0.02em;margin-bottom:16px;} .hd-contact-info p{color:#cfd6dd;font-size:17px;margin-bottom:26px;} .hd-call-btn{font-size:16px;padding:16px 32px;} .hd-form{background:var(--hd-steel);border:1px solid var(--hd-line);border-radius:4px;padding:28px;} .hd-field{margin-bottom:16px;} .hd-field label{display:block;font-family:var(--hd-head);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#fff;margin-bottom:6px;} .hd-form input,.hd-form textarea{width:100%;border:1px solid var(--hd-line);border-radius:2px;padding:12px 14px;font-family:var(--hd-body);font-size:14.5px;color:#fff;background:rgba(255,255,255,.04);transition:border-color .18s;} .hd-form input::placeholder,.hd-form textarea::placeholder{color:var(--hd-muted-d);} .hd-form input:focus,.hd-form textarea:focus{outline:none;border-color:var(--hd-orange);} .hd-form textarea{resize:vertical;} .hd-form-btn{width:100%;justify-content:center;font-size:15px;padding:14px;margin-top:4px;} .hd-form-note{text-align:center;font-size:12.5px;color:var(--hd-muted);margin-top:12px;} /* --- Horizontal gutter floor (fixes hero/cta/trust where a later padding shorthand zeroed the wrap's side padding). Longhand so a shorthand can't clobber it. --- */ .hd-wrap{padding-left:32px;padding-right:32px;} @media(max-width:640px){.hd-wrap{padding-left:max(20px,6vw);padding-right:max(20px,6vw);}} /* ===== TRADE CRAFT THEME (tc-) ===== */ :root{ --tc-forest:#1c3329; --tc-forest-2:#24402f; --tc-ink:#16241d; --tc-brass:#b8893b; --tc-brass-2:#cda25a; --tc-bone:#f3efe7; --tc-bone-2:#ebe5d9; --tc-card:#fbf9f4; --tc-line:rgba(28,51,41,.12); --tc-line-d:rgba(255,255,255,.12); --tc-text:#22302a; --tc-muted:#5e6b62; --tc-muted-d:#8a958c; --tc-head:'Fraunces',Georgia,serif; --tc-body:'Hanken Grotesk',system-ui,sans-serif; } .tc-nav *,.tc-hero *,.tc-sec *,.tc-strip *,.tc-cta *,.tc-foot *, .tc-nav,.tc-hero,.tc-sec,.tc-strip,.tc-cta,.tc-foot{box-sizing:border-box;} .tc-wrap{max-width:1140px;margin:0 auto;padding:0 36px;} @media(max-width:640px){.tc-wrap{padding:0 max(22px,6vw);}} .tc-ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;} .tc-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--tc-body);font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:2px;cursor:pointer;border:none;text-decoration:none;transition:transform .18s,box-shadow .22s,background .2s,color .2s;letter-spacing:.01em;} .tc-btn-brass{background:var(--tc-brass);color:#fff;padding:15px 30px;box-shadow:0 8px 24px color-mix(in srgb,var(--tc-brass) 45%,transparent);} .tc-btn-brass:hover{background:var(--tc-brass-2);transform:translateY(-2px);box-shadow:0 12px 32px color-mix(in srgb,var(--tc-brass) 55%,transparent);} .tc-btn-line-w{background:transparent;color:var(--tc-bone);border:1.5px solid rgba(255,255,255,.4);} .tc-btn-line-w:hover{background:rgba(255,255,255,.1);border-color:#fff;} /* NAV */ .tc-nav{position:relative;z-index:50;background:rgba(243,239,231,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--tc-line);} .tc-nav-in{display:flex;align-items:center;justify-content:space-between;height:80px;} .tc-logo{font-family:var(--tc-head);font-weight:600;font-size:24px;letter-spacing:-0.01em;color:var(--tc-forest);} .tc-logo em{font-style:italic;color:var(--tc-brass);} .tc-logo-svg svg{height:38px;width:auto;display:block;} .tc-nav-r{display:flex;align-items:center;gap:34px;} .tc-nav-links{display:flex;gap:30px;} .tc-nav-links a{font-size:14.5px;font-weight:500;color:var(--tc-muted);text-decoration:none;transition:color .18s;position:relative;} .tc-nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--tc-brass);transition:width .25s;} .tc-nav-links a:hover{color:var(--tc-forest);} .tc-nav-links a:hover::after{width:100%;} @media(max-width:820px){.tc-nav-links{display:none;}} /* HERO */ .tc-hero{position:relative;background:var(--tc-forest);color:var(--tc-bone);overflow:hidden;} .tc-hero-img::before{content:'';position:absolute;inset:0;opacity:.28;background:var(--tc-hero-img) center/cover;} .tc-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,51,41,.6),rgba(22,36,29,.85));} .tc-hero-in{position:relative;z-index:2;padding:120px 0 130px;max-width:880px;} @media(max-width:640px){.tc-hero-in{padding:80px 0 90px;}} .tc-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tc-brass-2);margin-bottom:28px;} .tc-eyebrow::before{content:'';width:36px;height:1px;background:var(--tc-brass);} .tc-disp{font-family:var(--tc-head);font-weight:600;font-size:clamp(42px,6.2vw,80px);line-height:1.04;letter-spacing:-0.015em;margin-bottom:26px;} .tc-disp em{font-style:italic;color:var(--tc-brass-2);} .tc-lead{font-size:19px;color:rgba(243,239,231,.78);max-width:520px;margin-bottom:38px;line-height:1.6;} .tc-hero-cta{display:flex;gap:14px;flex-wrap:wrap;} /* TRUST STRIP */ .tc-strip{background:var(--tc-ink);color:rgba(243,239,231,.7);border-top:1px solid var(--tc-line-d);} .tc-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:34px 0;} .tc-strip-item{display:flex;align-items:flex-start;gap:13px;font-size:13.5px;background:var(--tc-forest-2);border:1px solid var(--tc-line-d);border-radius:3px;padding:18px 18px;} .tc-strip-item .tc-ico{width:26px;height:26px;color:var(--tc-brass-2);flex-shrink:0;} .tc-strip-item b{display:block;font-family:var(--tc-head);font-weight:600;font-size:15px;color:var(--tc-bone);margin-bottom:3px;} .tc-strip-item span{line-height:1.45;color:var(--tc-muted-d);} @media(max-width:880px){.tc-strip-in{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.tc-strip-in{grid-template-columns:1fr;}} /* SECTION SHELL */ .tc-sec{padding:112px 0;} .tc-sec-head{max-width:680px;margin-bottom:60px;} .tc-tag{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tc-brass);margin-bottom:20px;} .tc-tag::before{content:'';width:28px;height:1px;background:var(--tc-brass);} .tc-tag-d{color:var(--tc-brass-2);} .tc-tag-d::before{background:var(--tc-brass-2);} .tc-sec-t{font-family:var(--tc-head);font-weight:600;font-size:clamp(32px,4.4vw,54px);line-height:1.08;letter-spacing:-0.01em;color:var(--tc-forest);} .tc-sec-t em{font-style:italic;color:var(--tc-brass);} .tc-sec-sub{font-size:18px;color:var(--tc-muted);margin-top:18px;} /* SERVICES - editorial list */ .tc-svc-list{border-top:1px solid var(--tc-line);} .tc-svc-row{display:grid;grid-template-columns:64px 1fr 1.4fr auto;gap:28px;align-items:center;padding:30px 8px;border-bottom:1px solid var(--tc-line);transition:background .25s,padding .25s;} .tc-svc-row:hover{background:var(--tc-bone-2);padding-left:20px;} .tc-nm{font-family:var(--tc-head);font-style:italic;font-weight:500;font-size:20px;color:var(--tc-brass);} .tc-svc-row h3{font-family:var(--tc-head);font-weight:600;font-size:23px;color:var(--tc-forest);} .tc-svc-row p{font-size:15px;color:var(--tc-muted);} .tc-svc-ic{justify-self:end;color:var(--tc-forest);opacity:.4;transition:opacity .25s,transform .25s;} .tc-svc-row:hover .tc-svc-ic{opacity:1;transform:translateX(4px);} @media(max-width:780px){.tc-svc-row{grid-template-columns:1fr;gap:8px;}.tc-svc-ic,.tc-nm{display:none;}} /* HOW */ .tc-how{background:var(--tc-card);} .tc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;} @media(max-width:780px){.tc-steps{grid-template-columns:1fr;}} .tc-step{border-top:2px solid var(--tc-brass);padding-top:24px;} .tc-step-n{font-family:var(--tc-head);font-style:italic;font-weight:500;font-size:22px;color:var(--tc-brass);margin-bottom:12px;} .tc-step h3{font-family:var(--tc-head);font-weight:600;font-size:22px;color:var(--tc-forest);margin-bottom:8px;} .tc-step p{font-size:15px;color:var(--tc-muted);} /* ABOUT */ .tc-about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center;} @media(max-width:860px){.tc-about-grid{grid-template-columns:1fr;gap:40px;}} .tc-about-media{position:relative;overflow:hidden;border-radius:3px;min-height:480px;} @media(max-width:860px){.tc-about-media{min-height:300px;}} .tc-about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease;} .tc-about-media:hover img{transform:scale(1.05);} .tc-about-fallback{background:linear-gradient(150deg,var(--tc-forest-2),var(--tc-ink));} .tc-ab-stats{display:flex;gap:0;margin-top:36px;border:1px solid var(--tc-line);border-radius:10px;overflow:hidden;flex-wrap:wrap;} .tc-ab-stat{flex:1;min-width:130px;padding:22px 24px;border-right:1px solid var(--tc-line);} .tc-ab-stat:last-child{border-right:none;} .tc-ab-n{font-family:var(--tc-head);font-weight:600;font-size:44px;color:var(--tc-forest);line-height:1;} .tc-ab-l{font-size:12px;color:var(--tc-muted);margin-top:8px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;} /* GALLERY */ .tc-gal{background:var(--tc-forest);color:var(--tc-bone);} .tc-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;} @media(max-width:780px){.tc-gal-grid{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.tc-gal-grid{grid-template-columns:1fr;}} .tc-gal-item{position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;} .tc-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1);display:block;} .tc-gal-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(22,36,29,.7));opacity:0;transition:opacity .35s;} .tc-gal-item:hover img{transform:scale(1.07);} .tc-gal-item:hover::after{opacity:1;} .tc-cap{position:absolute;left:16px;bottom:14px;font-family:var(--tc-head);font-style:italic;font-size:16px;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;z-index:2;} .tc-gal-item:hover .tc-cap{opacity:1;transform:none;} /* TESTIMONIAL - single editorial */ .tc-testi{background:var(--tc-bone-2);} .tc-testi-in{max-width:840px;margin:0 auto;text-align:center;} .tc-stars{display:inline-flex;gap:4px;color:var(--tc-brass);} .tc-stars .tc-ico{width:20px;height:20px;fill:var(--tc-brass);stroke:var(--tc-brass);} .tc-testi-q{font-family:var(--tc-head);font-weight:500;font-style:italic;font-size:clamp(26px,3.4vw,40px);line-height:1.3;color:var(--tc-forest);margin:24px 0 28px;} .tc-testi-who{font-size:15px;color:var(--tc-muted);font-weight:600;letter-spacing:.02em;} /* SERVICE AREA */ .tc-area{background:var(--tc-card);} .tc-area-grid{display:flex;flex-wrap:wrap;gap:12px;} .tc-area-chip{display:inline-flex;align-items:center;font-family:var(--tc-head);font-style:italic;font-size:18px;color:var(--tc-forest);background:var(--tc-bone);border:1px solid var(--tc-line);border-radius:2px;padding:10px 22px;transition:border-color .2s,color .2s;} .tc-area-chip:hover{border-color:var(--tc-brass);color:var(--tc-brass);} /* GUARANTEE */ .tc-guarantee{background:var(--tc-bone);} .tc-guar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;} @media(max-width:780px){.tc-guar-grid{grid-template-columns:1fr;}} .tc-guar{border-top:2px solid var(--tc-brass);padding-top:26px;} .tc-guar-ic{color:var(--tc-brass);margin-bottom:16px;} .tc-guar-ic .tc-ico{width:30px;height:30px;} .tc-guar h3{font-family:var(--tc-head);font-weight:600;font-size:22px;color:var(--tc-forest);margin-bottom:8px;} .tc-guar p{font-size:15px;color:var(--tc-muted);} /* FAQ */ .tc-faqsec{background:var(--tc-bone-2);} .tc-faq-wrap{max-width:800px;} .tc-faq-list{border-top:1px solid var(--tc-line);} .tc-faq{border-bottom:1px solid var(--tc-line);} .tc-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;font-family:var(--tc-head);font-weight:600;font-size:20px;color:var(--tc-forest);} .tc-faq summary::-webkit-details-marker{display:none;} .tc-faq-i{position:relative;width:18px;height:18px;flex-shrink:0;} .tc-faq-i::before,.tc-faq-i::after{content:'';position:absolute;background:var(--tc-brass);transition:transform .25s;} .tc-faq-i::before{top:8px;left:0;width:18px;height:1.5px;} .tc-faq-i::after{left:8px;top:0;width:1.5px;height:18px;} .tc-faq[open] .tc-faq-i::after{transform:rotate(90deg);opacity:0;} .tc-faq-a{padding:0 0 24px;font-size:16px;color:var(--tc-muted);max-width:680px;} /* CTA */ .tc-cta{position:relative;background:var(--tc-forest);color:var(--tc-bone);overflow:hidden;text-align:center;} .tc-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(184,137,59,.22),transparent 60%);} .tc-cta-in{position:relative;z-index:2;padding:110px 0;} .tc-cta h2{font-family:var(--tc-head);font-weight:600;font-size:clamp(34px,4.6vw,58px);line-height:1.06;margin-bottom:18px;} .tc-cta h2 em{font-style:italic;color:var(--tc-brass-2);} .tc-cta p{color:rgba(243,239,231,.78);font-size:19px;margin-bottom:36px;} .tc-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* FOOTER */ .tc-foot{background:var(--tc-ink);color:rgba(243,239,231,.6);} .tc-foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:34px;padding:60px 0 30px;} .tc-foot .tc-logo{color:var(--tc-bone);margin-bottom:14px;} .tc-foot p{font-size:14.5px;max-width:300px;line-height:1.6;} .tc-foot-c{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--tc-brass-2);margin-bottom:16px;font-weight:600;} .tc-foot-contact a{display:block;font-size:14.5px;margin-bottom:8px;color:rgba(243,239,231,.6);text-decoration:none;transition:color .18s;} .tc-foot-contact a:hover{color:var(--tc-brass-2);} .tc-foot-bottom{border-top:1px solid var(--tc-line-d);padding:20px 0;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;} /* CONTACT FORM */ .tc-contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:90px 0;text-align:left;} @media(max-width:820px){.tc-contact-grid{grid-template-columns:1fr;gap:36px;padding:64px 0;}} .tc-contact-info h2{font-family:var(--tc-head);font-weight:600;font-size:clamp(30px,4.4vw,52px);line-height:1.06;margin-bottom:16px;} .tc-contact-info h2 em{font-style:italic;color:var(--tc-brass-2);} .tc-contact-info p{color:rgba(243,239,231,.78);font-size:18px;margin-bottom:28px;} .tc-call-btn{font-size:16px;padding:16px 34px;} .tc-form{background:var(--tc-bone);border-radius:3px;padding:30px;} .tc-field{margin-bottom:18px;} .tc-field label{display:block;font-family:var(--tc-head);font-weight:600;font-size:14px;color:var(--tc-forest);margin-bottom:6px;} .tc-form input,.tc-form textarea{width:100%;border:1px solid var(--tc-line);border-radius:2px;padding:12px 14px;font-family:var(--tc-body);font-size:15px;color:var(--tc-text);background:var(--tc-card);transition:border-color .18s;} .tc-form input:focus,.tc-form textarea:focus{outline:none;border-color:var(--tc-brass);} .tc-form textarea{resize:vertical;} .tc-form-btn{width:100%;justify-content:center;font-size:15px;padding:15px;margin-top:4px;} .tc-form-note{text-align:center;font-size:13px;color:var(--tc-muted);margin-top:12px;} /* --- Horizontal gutter floor (fixes hero/cta/trust where a later padding shorthand zeroed the wrap's side padding). Longhand so a shorthand can't clobber it. --- */ .tc-wrap{padding-left:36px;padding-right:36px;} @media(max-width:640px){.tc-wrap{padding-left:max(22px,6vw);padding-right:max(22px,6vw);}} /* SCROLL-UP MINI NAV - injected, fixed to viewport, theme-aware. Works regardless of Webflow embed nesting. */ .tw-fixbar{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px max(20px,6vw);transform:translateY(-110%);transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform;} .tw-fixbar.tw-show{transform:translateY(0);} .tw-fixbar-name{font-weight:800;font-size:16px;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} .tw-fixbar-call{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;padding:9px 18px;border-radius:10px;white-space:nowrap;text-decoration:none;line-height:1;flex-shrink:0;} .tw-fixbar-call svg{width:15px;height:15px;} .tw-fixbar--cc{background:#fff;border-bottom:1px solid rgba(11,37,69,.10);box-shadow:0 4px 20px rgba(11,37,69,.10);} .tw-fixbar--cc .tw-fixbar-name{color:var(--primary);font-family:'Plus Jakarta Sans',system-ui,sans-serif;} .tw-fixbar--cc .tw-fixbar-call{background:var(--accent);color:#fff;} .tw-fixbar--hd{background:var(--hd-ink,#16191d);box-shadow:0 4px 20px rgba(0,0,0,.4);} .tw-fixbar--hd .tw-fixbar-name{color:#fff;text-transform:uppercase;font-family:'Archivo',system-ui,sans-serif;font-weight:900;} .tw-fixbar--hd .tw-fixbar-call{background:var(--hd-orange,#ff5a1f);color:#fff;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;} .tw-fixbar--tc{background:var(--tc-bone,#f3efe7);border-bottom:1px solid var(--tc-line,rgba(28,51,41,.12));box-shadow:0 4px 20px rgba(28,51,41,.12);} .tw-fixbar--tc .tw-fixbar-name{color:var(--tc-forest,#1c3329);font-family:'Fraunces',Georgia,serif;font-weight:600;} .tw-fixbar--tc .tw-fixbar-call{background:var(--tc-brass,#b8893b);color:#fff;border-radius:2px;} /* ===== v6 additions: uploaded-logo pill, hd hero image, adaptive galleries ===== */ .tw-pill{background:#fff;padding:6px 12px;border-radius:10px;display:inline-block;line-height:0;box-shadow:0 1px 4px rgba(0,0,0,.18);} .hd-hero-img::before{content:'';position:absolute;inset:0;opacity:.30;background:var(--hd-hero-img) center/cover;} .hd-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,25,29,.55),rgba(22,25,29,.9));} .hd-hero-img>.hd-wrap{position:relative;z-index:2;} .hd-hero-img .hd-hazard{position:relative;z-index:2;} .cc-gal-grid[data-n='1'],.hd-gal-grid[data-n='1'],.tc-gal-grid[data-n='1']{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto;} .cc-gal-grid[data-n='2'],.hd-gal-grid[data-n='2'],.tc-gal-grid[data-n='2']{grid-template-columns:repeat(2,1fr);} @media(max-width:780px){.cc-gal-grid[data-n='2'],.hd-gal-grid[data-n='2'],.tc-gal-grid[data-n='2'],.cc-gal-grid[data-n='3'],.hd-gal-grid[data-n='3'],.tc-gal-grid[data-n='3']{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.cc-gal-grid[data-n],.hd-gal-grid[data-n],.tc-gal-grid[data-n]{grid-template-columns:1fr;}} /* ===== v7 additions: mobile menu, compact nav, scroll-top, work strip, image bands ===== */ html{scroll-behavior:smooth;} .tw-mnav-btn{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;padding:9px 8px;flex-direction:column;justify-content:space-between;flex-shrink:0;} .tw-mnav-btn span{display:block;height:2.5px;width:100%;border-radius:2px;background:currentColor;transition:transform .22s,opacity .22s;} .cc-nav .tw-mnav-btn{color:var(--ink,#16202b);} .hd-nav .tw-mnav-btn{color:#fff;} .tc-nav .tw-mnav-btn{color:var(--tc-ink,#2b2b26);} .tw-mnav-btn.tw-open span:nth-child(1){transform:translateY(9px) rotate(45deg);} .tw-mnav-btn.tw-open span:nth-child(2){opacity:0;} .tw-mnav-btn.tw-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);} .tw-mnav{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;padding:8px 20px 16px;box-shadow:0 18px 30px rgba(0,0,0,.14);} .tw-mnav.tw-open{display:block;} .tw-mnav a{display:block;padding:13px 4px;font-size:16px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.07);} .tw-mnav a:last-child{border-bottom:0;} .tw-mnav-call{display:flex!important;align-items:center;gap:8px;font-weight:800!important;} .tw-mnav-call svg{width:16px;height:16px;} .cc-nav .tw-mnav{background:#fff;border-top:1px solid rgba(0,0,0,.06);} .cc-nav .tw-mnav a{color:var(--ink,#16202b);} .cc-nav .tw-mnav-call{color:var(--primary,#1d4ed8);} .hd-nav .tw-mnav{background:#15181c;border-top:1px solid rgba(255,255,255,.08);} .hd-nav .tw-mnav a{color:#eef1f4;border-bottom-color:rgba(255,255,255,.08);} .hd-nav .tw-mnav-call{color:var(--hd-accent,var(--hd-orange,#ff7a1a));} .tc-nav .tw-mnav{background:var(--tc-bone,#f3efe7);border-top:1px solid rgba(0,0,0,.08);} .tc-nav .tw-mnav a{color:var(--tc-ink,#2b2b26);} .tc-nav .tw-mnav-call{color:var(--tc-brass,#8a6a1e);} .cc-nav,.hd-nav,.tc-nav{position:relative;} @media(max-width:820px){ .tw-mnav-btn{display:flex;} .cc-nav-in,.hd-nav-in,.tc-nav-in{gap:10px;} .cc-logo,.hd-logo,.tc-logo{white-space:nowrap;min-width:0;} .cc-logo>span:last-child,.hd-logo>span:last-child{overflow:hidden;text-overflow:ellipsis;max-width:36vw;} .cc-nav .cc-btn,.hd-nav .hd-btn,.tc-nav .tc-btn{padding:9px 13px;font-size:13px;white-space:nowrap;} } .tw-top{position:fixed;left:14px;bottom:14px;z-index:9999;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer; background:rgba(20,28,38,.82);color:#fff;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s;box-shadow:0 4px 14px rgba(0,0,0,.25);} .tw-top.tw-show{opacity:1;pointer-events:auto;transform:none;} .tw-top:hover{background:rgba(20,28,38,.95);} .tw-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;} .tw-strip div{aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:10px;} .tw-band{width:100%;height:clamp(260px,50vh,520px);background-size:cover;background-position:center;position:relative;} .tw-band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,24,.18),rgba(10,16,24,.05) 40%,rgba(10,16,24,.22));} @media(max-width:640px){.tw-band{height:clamp(200px,42vh,340px);}.tw-strip div{aspect-ratio:1/1;border-radius:8px;}} /* ===== v8: image-less degradation (placeholder library not live yet) ===== */ /* About collapses to a single readable column when there is no photo to show. */ .cc-about-grid.tw-solo,.hd-about-grid.tw-solo,.tc-about-grid.tw-solo{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto;text-align:left;} .cc-about-grid.tw-solo .cc-ab-list,.hd-about-grid.tw-solo .hd-ab-list{margin-top:22px;} /* ===== v9 RESKIN: tradie-grade identity per theme ===== Token-level overrides. Later rules win at equal specificity, so this layer restyles without touching the base blocks. Remove the layer, get v8 back. */ /* ---- CLEAN CURRENT: from SaaS to professional trade ---- */ .cc-nav,[class^='cc-'],[class*=' cc-']{--head:'Archivo',system-ui,sans-serif;} .cc-sec{padding:clamp(64px,7.5vw,96px) 0;} section.cc-sec:nth-of-type(even){background-color:#edf0f4;} .cc-btn{border-radius:7px;letter-spacing:.01em;} .cc-nav .cc-btn{border-radius:7px;} .cc-form input,.cc-form textarea{border-radius:8px;} /* ---- HEAVY DUTY: lean in ---- */ .hd-sec{position:relative;padding:clamp(68px,7.5vw,100px) 0; background-image:linear-gradient(45deg,rgba(255,255,255,.022) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.022) 75%), linear-gradient(-45deg,rgba(255,255,255,.022) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.022) 75%); background-size:14px 14px;} .hd-sec:nth-of-type(3n)::before{content:'';position:absolute;top:0;left:0;right:0;height:6px; background:repeating-linear-gradient(45deg,var(--hd-accent,var(--hd-orange,#ff7a1a)) 0 14px,#15181c 14px 28px);opacity:.9;} .hd-btn{border-radius:4px;box-shadow:3px 3px 0 rgba(0,0,0,.35);} .hd-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.35);} .hd-disp{letter-spacing:-.01em;} /* ---- TRADE CRAFT: boutique serif out, honest slab in ---- */ .tc-nav,[class^='tc-'],[class*=' tc-']{--tc-head:'Zilla Slab',Georgia,serif;} .tc-disp{font-weight:700;letter-spacing:-.008em;line-height:1.06;} .tc-sec h2,.tc-sec h3{font-weight:700;} .tc-btn{border-radius:6px;font-family:var(--tc-head);font-weight:600;letter-spacing:.01em;} .tc-sec{padding:clamp(72px,8vw,112px) 0;} /* ---- shared: floating mobile call button (live sites only) ---- */ .tw-call{position:fixed;right:14px;bottom:14px;z-index:9998;width:52px;height:52px;border-radius:50%; display:none;align-items:center;justify-content:center;color:#fff;text-decoration:none; background:var(--primary,var(--hd-accent,var(--tc-brass,#dc3545)));box-shadow:0 6px 18px rgba(0,0,0,.30);} @media(max-width:820px){.tw-call{display:flex;}}