:root { --primary:#0b2341; --navy:#071a2d; --accent:#e57a17; --bg:#f5f7f9; --white:#fff; --ink:#142333; --muted:#61707d; --border:#d9e0e7; --container:1180px; --display:"Barlow Condensed",Impact,sans-serif; --body:Inter,Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font:400 15px/1.7 var(--body); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--display); line-height:.97; text-transform:uppercase; } h1 { font-size:clamp(3.3rem,7vw,6.5rem); letter-spacing:-.02em; } h2 { font-size:clamp(2.4rem,4.5vw,4.25rem); letter-spacing:-.015em; margin-bottom:1.2rem; } h3 { font-size:1.6rem; margin-bottom:.7rem; } a { color:inherit; text-decoration:none; } .container { width:min(calc(100% - 3rem),var(--container)); margin:auto; } .sr-only,.skip-link { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .skip-link:focus { width:auto; height:auto; clip:auto; z-index:99; padding:1rem; background:#fff; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.site-header { position:sticky; top:0; z-index:20; color:#fff; background:rgba(7,26,45,.98); border-bottom:1px solid rgba(255,255,255,.14); } .header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:78px; } .brand { position:relative; display:inline-flex; align-items:baseline; white-space:nowrap; font:700 2rem/.8 var(--display); letter-spacing:.08em; } .brand span,.eyebrow { color:var(--accent); } .brand small { position:absolute; top:calc(100% + .45rem); left:0; width:max-content; color:#adbbc6; font:600 .53rem/1 var(--body); letter-spacing:.1em; text-transform:uppercase; } .primary-nav { display:flex; align-items:center; gap:1.15rem; font-size:.75rem; font-weight:600; } .primary-nav>a:not(.button) { color:#dbe4e9; } .primary-nav>a:hover,.footer-grid a:hover { color:var(--accent); } .nav-toggle { display:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:.88rem 1.15rem; color:#fff; background:var(--accent); border:1px solid var(--accent); font:700 .72rem/1 var(--body); letter-spacing:.08em; text-transform:uppercase; transition:.2s; } .button:hover { color:#fff; background:#c9620c; border-color:#c9620c; transform:translateY(-2px); } .button-small { padding:.7rem .8rem; font-size:.66rem; } .button-outline { background:transparent; border-color:#c4d1d9; } .button-outline:hover { color:var(--primary); background:#fff; border-color:#fff; } .button-outline-dark { color:var(--primary); background:transparent; border-color:var(--primary); } .button-outline-dark:hover { color:#fff; background:var(--primary); } .button-row { display:flex; flex-wrap:wrap; gap:.9rem; }
.hero { overflow:hidden; color:#fff; background-color:var(--navy); background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(circle at 68% 30%,#244663 0%,var(--navy) 43%); background-size:42px 42px,42px 42px,auto; } .hero-grid { display:grid; grid-template-columns:1fr .86fr; gap:3rem; align-items:center; min-height:625px; } .hero-copy { padding:5.5rem 0; } .hero h1 { max-width:740px; margin-bottom:1.5rem; color:#fff; } .hero h1 em { color:#f3a357; font-style:normal; } .hero-copy>p:not(.eyebrow) { max-width:650px; color:#d3dee6; font-size:1.05rem; } .eyebrow { margin-bottom:1rem; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.hero-visual { position:relative; min-height:460px; } .column { position:absolute; z-index:1; top:8%; left:55%; width:90px; height:75px; border:2px solid #dce7ed; background:repeating-linear-gradient(90deg,#97abb7 0 6px,#c4d2d9 6px 12px); } .base-plate { position:absolute; z-index:2; top:23%; left:37%; width:265px; height:24px; background:#aab9c2; border:2px solid #e6eef1; } .nut { position:absolute; z-index:4; left:59%; width:44px; height:22px; background:#e1e9ed; clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%); } .nut-one { top:19%; } .nut-two { top:29%; } .washer { position:absolute; z-index:3; top:27%; left:57%; width:63px; height:8px; background:#879aa6; } .bolt-thread { position:absolute; z-index:3; top:16%; left:62%; width:12px; height:160px; background:repeating-linear-gradient(0deg,#e0e9ed 0 5px,#607887 5px 8px); } .bolt-shank { position:absolute; z-index:3; top:47%; left:62%; width:12px; height:132px; background:#cbd9de; } .bolt-hook { position:absolute; z-index:3; top:75%; left:57%; width:64px; height:68px; border:12px solid #cbd9de; border-top:0; border-right:0; border-radius:0 0 0 36px; } .concrete { position:absolute; z-index:1; top:63%; left:20%; right:-11%; height:210px; border-top:2px solid #9daeb8; background:repeating-linear-gradient(140deg,#466170 0 2px,#405967 2px 10px); } .visual-label { position:absolute; z-index:6; color:#dce5e9; font:700 .57rem/1 var(--body); letter-spacing:.11em; } .visual-label:after { content:""; position:absolute; top:50%; width:70px; height:1px; margin-left:.5rem; background:var(--accent); } .label-thread { top:15%; left:4%; } .label-plate { top:29%; right:0; } .label-concrete { top:78%; left:4%; }
.capability-strip { border-bottom:1px solid var(--border); } .capability-strip .container { display:grid; grid-template-columns:repeat(4,1fr); } .capability-strip span { padding:1.15rem 1rem; border-left:1px solid var(--border); font-size:.72rem; font-weight:700; text-align:center; letter-spacing:.06em; text-transform:uppercase; } .capability-strip span:last-child { border-right:1px solid var(--border); } .section { padding:clamp(4.5rem,8vw,7.5rem) 0; } .section-surface { background:var(--bg); } .section-dark { color:#d7e1e8; background:var(--primary); } .section-dark h2 { color:#fff; } .two-col { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,10vw,9rem); } .lead { font-size:1.2rem; line-height:1.65; } .who-we-are p:not(.eyebrow),.anchor-intro p:not(.eyebrow),.section-heading>p { color:var(--muted); } .check-list { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.7rem; } .check-list span { font-weight:600; } .check-list span:before,.inspection-grid span:before { content:"✓"; margin-right:.55rem; color:var(--accent); font-weight:700; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; } .section-heading>p { max-width:330px; } .section-heading.light>p { color:#d7e1e8; } .card-grid { display:grid; gap:1.2rem; margin-top:2.5rem; } .capabilities { grid-template-columns:repeat(4,1fr); } .product-card { min-height:270px; padding:1.7rem; background:#fff; border:1px solid var(--border); border-top:3px solid transparent; transition:.2s; } .product-card:hover { border-top-color:var(--accent); box-shadow:0 14px 30px rgba(11,35,65,.1); transform:translateY(-5px); } .product-card p,.why-grid p,.process-list p { color:var(--muted); font-size:.84rem; } .product-card a,.text-link { color:var(--primary); font-size:.78rem; font-weight:700; } .product-card a span,.text-link span { margin-left:.3rem; color:var(--accent); } .product-icon { width:44px; height:44px; margin-bottom:1rem; color:var(--accent); font:700 3rem/1 var(--display); }
.technical-diagram { position:relative; min-height:420px; overflow:hidden; background:#edf2f4; border:1px solid var(--border); } .diagram-column { position:absolute; top:8%; left:47%; width:70px; height:55px; background:#587181; } .diagram-plate { position:absolute; top:24%; left:26%; width:260px; height:18px; background:#607888; } .diagram-nut { position:absolute; top:18%; left:51%; width:36px; height:21px; background:var(--accent); clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%); } .diagram-washer { position:absolute; top:28%; left:48%; width:63px; height:7px; background:#425d6d; } .diagram-bolt { position:absolute; top:22%; left:55%; width:10px; height:206px; background:repeating-linear-gradient(0deg,#244556 0 5px,#aabac2 5px 8px); } .diagram-bolt:after { content:""; position:absolute; bottom:-45px; left:-26px; width:36px; height:53px; border:10px solid #244556; border-top:0; border-right:0; border-radius:0 0 0 25px; } .diagram-concrete { position:absolute; top:66%; left:0; right:0; height:35%; border-top:2px solid #7c929f; background:repeating-linear-gradient(135deg,#becbd1 0 3px,#d8e0e3 3px 10px); } .diagram-label { position:absolute; z-index:2; color:#40566f; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .label-a { top:8%; left:7%; } .label-b { top:29%; right:6%; } .label-c { top:20%; left:7%; } .label-d { top:49%; right:6%; } .label-e { right:6%; bottom:10%; }
.works-steps { display:grid; grid-template-columns:repeat(5,1fr); margin:0; padding:2.7rem 0 0; list-style:none; } .works-steps li { position:relative; display:grid; gap:.7rem; padding-right:1.5rem; } .works-steps li:not(:last-child):after { content:"→"; position:absolute; top:8px; right:0; color:var(--accent); } .works-steps b,.process-list b,.why-grid b { color:var(--accent); font:700 1.8rem/1 var(--display); } .works-steps span { font-size:.8rem; line-height:1.5; } .bolt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; } .bolt-card { display:flex; gap:1.4rem; min-height:270px; padding:1.8rem; background:#fff; border:1px solid var(--border); } .bolt-card.future { border-top:3px solid #9aabb6; } .card-kicker { margin-bottom:.5rem; color:var(--accent); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .bolt-shape { position:relative; flex:0 0 58px; height:160px; border:12px solid var(--primary); border-top:0; } .l-shape { border-right:0; } .j-shape { border-right:0; border-radius:0 0 0 35px; } .bolt-shape:before { content:""; position:absolute; top:-8px; left:-12px; width:12px; height:68px; background:repeating-linear-gradient(0deg,var(--primary) 0 4px,#9aabb6 4px 7px); }
.table-wrap { margin-top:2.2rem; overflow:auto; border:1px solid var(--border); } table { width:100%; min-width:630px; border-collapse:collapse; } th,td { padding:1rem 1.25rem; border-bottom:1px solid var(--border); text-align:left; } thead { color:#fff; background:var(--primary); } tbody tr:last-child>* { border-bottom:0; } .spec-grid,.inspection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; } .spec-grid span { padding:1rem; background:#fff; border-left:3px solid var(--accent); font-weight:600; } .note { margin-top:2.2rem; padding:1rem 1.2rem; color:#40566f; background:#fff; border-left:3px solid var(--accent); } .industry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:2.5rem; background:var(--border); border:1px solid var(--border); } .industry-grid article { position:relative; min-height:125px; padding:1.3rem; background:#fff; font:600 1.25rem/1.05 var(--display); text-transform:uppercase; transition:.2s; } .industry-grid article:after { content:"↗"; position:absolute; right:1rem; bottom:.8rem; color:var(--accent); transition:.2s; } .industry-grid article:hover { color:#fff; background:var(--primary); } .industry-grid article:hover:after { transform:translate(3px,-3px); }
.why-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:2.5rem; background:var(--border); border:1px solid var(--border); } .why-grid article,.process-list li { padding:1.4rem; background:#fff; } .why-grid h3,.process-list h3 { margin-top:1rem; font-size:1.3rem; } .why-grid p,.process-list p { margin-bottom:0; line-height:1.55; } .process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:2.5rem 0 0; padding:0; list-style:none; background:var(--border); } .inspection-grid { margin-top:2.5rem; } .inspection-grid span { padding:1rem; border:1px solid rgba(255,255,255,.2); font-weight:600; } .accordion details { padding:1rem 0; border-top:1px solid var(--border); } .accordion details:last-child { border-bottom:1px solid var(--border); } .accordion summary { cursor:pointer; font-weight:700; list-style:none; } .accordion summary:after { content:"+"; float:right; color:var(--accent); font-size:1.3rem; } .accordion details[open] summary:after { content:"−"; } .accordion p { margin:.8rem 2rem 0 0; color:var(--muted); }
.enquiry-section { background:#e8eff1; } .enquiry-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2.5rem,8vw,7rem); align-items:start; } .enquiry-intro { position:sticky; top:110px; } .phone-reveal { margin-top:2rem; } .phone-reveal #phone-details { display:grid; gap:.55rem; margin-top:1rem; } .phone-reveal a { font-size:1.1rem; font-weight:700; } .enquiry-form { padding:clamp(1.3rem,4vw,2.4rem); background:#fff; border-top:4px solid var(--accent); box-shadow:0 10px 35px rgba(11,35,65,.08); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .enquiry-form label { display:grid; gap:.35rem; margin-bottom:1rem; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } .enquiry-form input,.enquiry-form select,.enquiry-form textarea { width:100%; padding:.75rem; color:var(--ink); background:#fff; border:1px solid var(--border); border-radius:0; font:400 .86rem var(--body); letter-spacing:0; text-transform:none; } .enquiry-form textarea { resize:vertical; } .enquiry-form small { color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none; } .form-error { padding:.8rem; color:#942b13; background:#fff0eb; } .form-success { padding:1rem; color:#1e5e3c; background:#e5f5eb; font-weight:600; }
.contact-cta { padding:4.5rem 0; border-top:1px solid var(--border); } .contact-layout { display:grid; grid-template-columns:1.3fr .8fr .7fr; gap:3rem; align-items:end; } .contact-layout h2 { margin-bottom:.8rem; } .contact-details { display:grid; gap:1rem; } .contact-details p { display:grid; gap:.1rem; margin:0; } .contact-details b { color:var(--muted); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; } .contact-details a { font-weight:600; } .contact-actions { display:grid; gap:.7rem; } .site-footer { padding-top:3.8rem; color:#b8c5cc; background:#07131e; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; } .footer-grid>div:not(:first-child) { display:grid; align-content:start; gap:.55rem; font-size:.82rem; } .footer-grid h3 { margin-bottom:.5rem; color:#fff; font-size:1.2rem; } .footer-bottom { margin-top:3rem; padding:1.3rem 0; border-top:1px solid #253846; font-size:.72rem; } .mobile-bar { display:none; }
@media(max-width:960px) { .primary-nav { gap:.7rem; font-size:.68rem; } .hero-grid { grid-template-columns:1fr .7fr; } .capabilities { grid-template-columns:1fr 1fr; } .bolt-grid { grid-template-columns:1fr 1fr; } .bolt-card.future { grid-column:span 2; } .industry-grid { grid-template-columns:repeat(2,1fr); } .why-grid { grid-template-columns:repeat(3,1fr); } .process-list { grid-template-columns:repeat(2,1fr); } .enquiry-layout { grid-template-columns:1fr; } .enquiry-intro { position:static; } .contact-layout { grid-template-columns:1fr 1fr; } .contact-actions { grid-column:span 2; grid-template-columns:repeat(3,1fr); } }
@media(max-width:720px) { body { padding-bottom:57px; } .container { width:min(calc(100% - 2rem),var(--container)); } .header-inner { min-height:68px; } .nav-toggle { display:grid; gap:5px; padding:.5rem; color:#fff; background:none; border:0; } .nav-toggle i { display:block; width:25px; height:2px; background:currentColor; } .primary-nav { display:none; position:absolute; top:68px; right:0; left:0; align-items:stretch; gap:0; padding:.75rem 1rem 1rem; background:#071a2d; border-top:1px solid #304456; } .primary-nav.is-open { display:flex; } .primary-nav>a:not(.button) { padding:.75rem 0; } .primary-nav .button { margin-top:.5rem; } .hero-grid { grid-template-columns:1fr; min-height:unset; } .hero-copy { padding:4.5rem 0 2rem; } .hero-visual { min-height:310px; max-width:510px; margin:auto; } .capability-strip .container { grid-template-columns:1fr 1fr; } .capability-strip span { padding:.8rem .4rem; font-size:.58rem; } .capability-strip span:nth-child(3) { border-left:0; } .two-col,.section-heading { display:grid; grid-template-columns:1fr; gap:1.5rem; } .section-heading { align-items:start; } .capabilities,.bolt-grid { grid-template-columns:1fr; } .bolt-card.future { grid-column:auto; } .works-steps { grid-template-columns:1fr; gap:1rem; } .works-steps li { grid-template-columns:40px 1fr; padding:0; } .works-steps li:not(:last-child):after { content:"↓"; top:34px; left:13px; right:auto; } .spec-grid,.inspection-grid,.industry-grid,.why-grid { grid-template-columns:1fr 1fr; } .process-list,.form-grid { grid-template-columns:1fr; } .contact-layout,.footer-grid { grid-template-columns:1fr; } .contact-actions { grid-column:auto; } .contact-actions .button { width:100%; } .mobile-bar { position:fixed; right:0; bottom:0; left:0; z-index:30; display:grid; grid-template-columns:1fr 1fr; background:#fff; box-shadow:0 -3px 15px rgba(0,0,0,.15); } .mobile-bar a { padding:1rem .5rem; font-size:.7rem; font-weight:700; text-align:center; letter-spacing:.05em; text-transform:uppercase; } .mobile-bar a:first-child { color:#fff; background:var(--primary); } .mobile-bar a:last-child { color:#fff; background:#157543; } .footer-grid { gap:2rem; } .footer-bottom { margin-top:2rem; } .label-plate { right:2%; } .label-concrete { left:2%; } .check-list { grid-template-columns:1fr; } .bolt-card { min-height:unset; } .technical-diagram { min-height:350px; } }
@media(max-width:380px) { h1 { font-size:3rem; } .industry-grid,.why-grid,.spec-grid,.inspection-grid { grid-template-columns:1fr; } .button-row { display:grid; } .button-row .button { width:100%; } }