.booking-form { margin-top:34px; padding-top:27px; border-top:1px solid var(--line); } .booking-heading { display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-bottom:18px; } .booking-heading span { font:500 11px var(--mono); letter-spacing:.11em; color:var(--orange); } .booking-heading small, .booking-note { color:var(--muted); font:10px var(--mono); } .booking-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .booking-form label { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; color:var(--muted); font:10px var(--mono); letter-spacing:.04em; text-transform:uppercase; } .booking-form input, .booking-form select, .booking-form textarea { width:100%; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.035); color:var(--ink); padding:13px 12px; font:14px var(--sans); outline:none; } .booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { border-color:var(--orange); } .booking-form select option { color:var(--ink); background:var(--dark); } .booking-form textarea { resize:vertical; min-height:100px; } .booking-submit { border:0; cursor:pointer; margin-top:3px; } .booking-note { margin:11px 0 0; text-transform:none; letter-spacing:0; } @media (max-width:640px) { .booking-grid { grid-template-columns:1fr; gap:0; } .booking-heading { align-items:flex-start; flex-direction:column; gap:6px; } }
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#102022; --paper:#f1eee8; --paper-deep:#e5e0d6; --cyan:#b4e9e0; --orange:#f16f4e; --muted:#66716f; --line:rgba(16,32,34,.18); --mono:'DM Mono', monospace; --display:'Space Grotesk', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); overflow-x:hidden; } a { color:inherit; text-decoration:none; } .site-noise { position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:9; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } .scroll-progress { position:fixed; left:0; top:0; height:3px; width:100%; z-index:20; background:transparent; } .scroll-progress span { display:block; background:var(--orange); width:0; height:100%; }
.site-header { height:86px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:10; } .brand { display:flex; gap:12px; align-items:center; font:500 11px/1.05 var(--mono); letter-spacing:.02em; } .brand em { font-style:normal; color:var(--orange); } .brand-mark { display:flex; gap:3px; align-items:flex-end; height:25px; } .brand-mark i { display:block; width:5px; background:var(--orange); transform:skew(-26deg); } .brand-mark i:nth-child(1) { height:14px; } .brand-mark i:nth-child(2) { height:20px; } .brand-mark i:nth-child(3) { height:25px; background:var(--ink); } .main-nav { display:flex; gap:35px; font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; } .main-nav a, .header-phone { transition:color .2s ease; } .main-nav a:hover, .header-phone:hover { color:var(--orange); } .header-phone { display:flex; align-items:center; gap:10px; font:500 12px var(--mono); } .header-phone svg { width:15px; }
.section-pad { padding-left:10vw; padding-right:10vw; } .hero { min-height:calc(100vh - 86px); display:grid; grid-template-columns:45% 55%; align-items:center; padding-top:5vh; padding-bottom:7vh; position:relative; } .eyebrow, .section-kicker { color:var(--muted); font:500 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; } .eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:31px; } .status-dot { width:7px; height:7px; background:var(--orange); border-radius:50%; box-shadow:0 0 0 5px rgba(241,111,78,.12); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(4.8rem,8.8vw,9.5rem); line-height:.83; letter-spacing:-.08em; margin:0 0 35px -7px; font-weight:600; } h1 span, h2 em { font-style:normal; color:var(--orange); } .hero-intro { max-width:390px; font-size:16px; line-height:1.55; color:#4c5b59; margin-bottom:32px; } .hero-actions { display:flex; align-items:center; gap:28px; margin-bottom:54px; } .button { display:inline-flex; align-items:center; gap:12px; padding:17px 21px; font:500 11px var(--mono); letter-spacing:.05em; text-transform:uppercase; border:1px solid transparent; transition:transform .25s, background .25s; } .button:hover { transform:translateY(-3px); } .button-primary { background:var(--ink); color:var(--paper); } .button-primary:hover { background:var(--orange); color:var(--ink); } .button svg { width:16px; } .arrow { font-size:17px; line-height:0; margin-left:5px; } .text-link { display:inline-flex; align-items:center; gap:8px; font:500 11px var(--mono); text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:4px; } .text-link svg { width:15px; } .hero-trust { display:flex; align-items:center; gap:13px; font:11px var(--mono); } .stars { color:var(--orange); letter-spacing:2px; font-size:13px; } .hero-trust strong, .hero-trust span { display:block; } .hero-trust span { color:var(--muted); font-size:9px; margin-top:4px; } .trust-divider { height:29px; width:1px; background:var(--line); margin:0 11px; }
.hero-visual { min-height:600px; height:75vh; max-height:760px; position:relative; display:flex; align-items:center; justify-content:center; perspective:1200px; } .visual-label { position:absolute; top:6%; left:14%; right:10%; display:flex; justify-content:space-between; color:var(--muted); font:10px var(--mono); letter-spacing:.14em; } .visual-label span { color:var(--orange); } .visual-orbit { position:absolute; width:75%; height:55%; border:1px solid var(--line); border-radius:50%; transform:rotate(-25deg); } .orbit-one { top:19%; right:0; } .orbit-two { top:25%; right:7%; transform:rotate(58deg); border-color:rgba(241,111,78,.38); } .panel-scene { transform:rotateX(12deg) rotateY(-17deg) rotateZ(4deg); transform-style:preserve-3d; width:min(48vw,440px); aspect-ratio: .78; position:relative; transition:transform .2s ease-out; } .panel-layer { position:absolute; inset:0; border:1px solid rgba(16,32,34,.65); background:#263a3b; } .panel-back { transform:translateZ(-38px) translate(25px,20px); background:#bdcbc2; border-color:#9caea6; } .panel-mid { transform:translateZ(-19px) translate(12px,10px); background:#677876; } .panel-front { padding:24px; background:linear-gradient(145deg,#d9e0d6 0%,#aebdb3 100%); color:var(--ink); box-shadow:22px 30px 35px rgba(16,32,34,.23); transform:translateZ(0); } .panel-front:after { content:''; position:absolute; inset:12px; border:1px solid rgba(16,32,34,.33); pointer-events:none; } .panel-screw { position:absolute; width:8px; height:8px; border-radius:50%; background:#56655f; border:1px solid #263a3b; z-index:2; } .screw-one { top:21px; right:21px; } .screw-two { bottom:21px; left:21px; } .panel-title { position:relative; z-index:2; font:500 16px var(--mono); letter-spacing:.08em; border-bottom:1px solid rgba(16,32,34,.4); padding:4px 0 14px; } .panel-title span { color:var(--orange); } .breaker-grid { position:relative; z-index:2; margin:40px 20px 35px; display:grid; grid-template-columns:repeat(4,1fr); gap:11px; } .breaker-grid span { height:57px; background:#253b3b; border:3px solid #53635b; display:block; position:relative; } .breaker-grid span:after { content:''; position:absolute; width:5px; height:18px; background:#d7ddd3; left:50%; top:8px; transform:translateX(-50%); } .breaker-grid span.active { background:var(--orange); } .breaker-grid span.active:after { background:var(--ink); transform:translateX(-50%) rotate(37deg); top:7px; } .panel-line { position:relative; z-index:2; height:2px; background:var(--ink); width:45%; margin:0 0 14px 5px; } .panel-footer { position:relative; z-index:2; display:flex; justify-content:space-between; font:9px var(--mono); } .panel-footer b { color:var(--orange); } .panel-shadow { position:absolute; inset:15% -9% -7% 13%; background:rgba(16,32,34,.23); filter:blur(30px); transform:translateZ(-100px); } .visual-tag { position:absolute; font:10px var(--mono); letter-spacing:.05em; z-index:3; } .tag-left { left:1%; top:39%; display:flex; gap:9px; align-items:center; } .tag-left svg { width:15px; color:var(--orange); } .tag-left span { color:var(--muted); line-height:1.5; } .tag-left b { color:var(--ink); font-weight:500; } .tag-right { right:0; bottom:28%; display:flex; flex-direction:column; gap:7px; } .tag-right span { color:var(--orange); } .tag-right b { font-weight:500; } .scroll-cue { position:absolute; bottom:3%; left:14%; display:flex; gap:10px; align-items:center; color:var(--muted); font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; } .scroll-cue svg { width:16px; animation:bob 1.6s ease-in-out infinite; } @keyframes bob { 50% { transform:translateY(4px); } }
.statement { background:var(--ink); color:var(--paper); padding-top:120px; padding-bottom:115px; } .statement .section-kicker, .services .section-kicker, .contact .section-kicker { color:#92aaa5; } .section-kicker span { color:var(--orange); margin:0 8px; } .statement-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:10%; align-items:end; padding:48px 0 78px; } h2 { font-size:clamp(3.3rem,6vw,7rem); line-height:.87; letter-spacing:-.075em; font-weight:500; margin-bottom:0; } .statement-detail p { color:#aebbb5; font-size:15px; line-height:1.6; max-width:270px; margin-bottom:35px; } .circle-link { width:47px; height:47px; border:1px solid #6f817b; border-radius:50%; display:grid; place-items:center; transition:background .2s; } .circle-link:hover { background:var(--orange); border-color:var(--orange); color:var(--ink); } .circle-link svg { width:18px; } .metric-row { display:grid; grid-template-columns:repeat(3,1fr) 1.4fr; border-top:1px solid rgba(241,238,232,.22); padding-top:23px; } .metric { border-right:1px solid rgba(241,238,232,.22); padding-right:22px; margin-right:22px; } .metric strong { font-size:32px; font-weight:500; letter-spacing:-.05em; display:block; color:var(--cyan); } .metric span { font:10px var(--mono); color:#92aaa5; text-transform:uppercase; letter-spacing:.05em; line-height:1.4; } .metric-note { border:0; display:flex; justify-content:flex-end; margin:0; padding:0; text-align:right; }
.services { padding-top:130px; padding-bottom:135px; } .section-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; margin-bottom:75px; } .section-heading h2 { margin-top:40px; } .section-heading > p { color:var(--muted); max-width:250px; line-height:1.55; justify-self:end; margin:0; font-size:15px; } .service-list { border-top:1px solid var(--line); } .service-item { display:grid; grid-template-columns:12% 1fr 50px; align-items:center; padding:32px 0; border-bottom:1px solid var(--line); transition:padding .25s, background .25s; } .service-item:hover { padding-left:16px; background:rgba(180,233,224,.28); } .service-num { color:var(--orange); font:11px var(--mono); } .service-item h3 { font-size:27px; letter-spacing:-.04em; margin:0 0 7px; font-weight:500; } .service-item p { color:var(--muted); font-size:13px; margin:0; } .service-icon { width:43px; height:43px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; } .service-icon svg { width:17px; transition:transform .25s; } .service-item:hover .service-icon svg { transform:translate(3px,-3px); }
.testimonial { background:var(--orange); color:var(--ink); padding-top:125px; padding-bottom:125px; text-align:center; } .quote-mark { font-size:84px; line-height:.5; font-family:Georgia,serif; } blockquote { max-width:900px; margin:33px auto 45px; font-size:clamp(2.5rem,5.4vw,6.1rem); line-height:.92; letter-spacing:-.075em; font-weight:500; } .quote-meta { display:flex; gap:15px; align-items:center; justify-content:center; font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; } .quote-meta .line { width:50px; height:1px; background:rgba(16,32,34,.45); }
.contact { background:var(--paper-deep); display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-top:120px; padding-bottom:125px; align-items:center; } .contact-image { position:relative; } .contact-image img { width:100%; aspect-ratio:1.15; object-fit:cover; filter:grayscale(1) contrast(1.1); display:block; } .contact-image:after { content:''; position:absolute; inset:15px; border:1px solid rgba(241,238,232,.6); pointer-events:none; } .image-stamp { position:absolute; z-index:1; bottom:25px; left:25px; color:var(--paper); font:500 18px/.92 var(--mono); letter-spacing:.06em; } .image-stamp span { color:var(--orange); } .contact-copy h2 { margin:39px 0 29px; } .contact-copy > p { color:var(--muted); line-height:1.6; max-width:340px; margin-bottom:32px; } .contact-details { display:flex; gap:38px; margin-top:55px; padding-top:21px; border-top:1px solid var(--line); } .contact-details span, .contact-details strong { display:block; font:10px var(--mono); } .contact-details span { color:var(--muted); margin-bottom:9px; text-transform:uppercase; } .contact-details strong { font-weight:400; line-height:1.5; }
.site-footer { padding:32px 5vw; display:flex; align-items:center; justify-content:space-between; font:10px var(--mono); color:var(--muted); } .site-footer .brand { color:var(--ink); } .site-footer > a:last-child { display:flex; align-items:center; gap:8px; } .site-footer svg { width:13px; } .reveal { opacity:0; transform:translateY(25px); transition:opacity .8s ease, transform .8s ease; } .reveal.visible { opacity:1; transform:translateY(0); }
@media (max-width:800px) { .site-header { height:74px; padding:0 6vw; } .main-nav { display:none; } .header-phone span { display:none; } .hero { display:block; min-height:auto; padding-top:72px; padding-bottom:30px; } .hero-copy { position:relative; z-index:2; } h1 { font-size:clamp(4.4rem,18vw,7rem); margin-bottom:29px; } .hero-intro { font-size:15px; } .hero-actions { gap:18px; margin-bottom:38px; flex-wrap:wrap; } .hero-trust { margin-bottom:30px; } .hero-visual { min-height:490px; height:64vh; } .panel-scene { width:min(66vw,350px); } .visual-label { top:7%; left:5%; right:5%; } .tag-left { left:0; top:37%; } .tag-right { right:0; bottom:25%; } .scroll-cue { left:5%; } .section-pad { padding-left:7vw; padding-right:7vw; } .statement, .services, .testimonial, .contact { padding-top:82px; padding-bottom:82px; } .statement-grid, .section-heading, .contact { grid-template-columns:1fr; gap:38px; } .statement-grid { padding:38px 0 60px; } .statement-detail p { max-width:360px; } .metric-row { grid-template-columns:repeat(3,1fr); gap:10px; } .metric { margin-right:5px; padding-right:5px; } .metric strong { font-size:25px; } .metric-note { display:none; } .section-heading { margin-bottom:50px; } .section-heading h2 { margin-top:30px; } .section-heading > p { justify-self:start; } .service-item { grid-template-columns:13% 1fr 38px; padding:25px 0; } .service-item h3 { font-size:20px; } .service-item p { line-height:1.4; font-size:12px; max-width:235px; } .service-icon { width:35px; height:35px; } blockquote { font-size:clamp(2.7rem,11vw,4rem); } .contact-image { order:2; } .contact-copy { order:1; } .contact-copy h2 { margin-top:29px; } .contact-details { gap:20px; margin-top:42px; } .site-footer { padding:26px 7vw; gap:20px; flex-wrap:wrap; } .site-footer > span { order:3; width:100%; } }
@media (max-width:800px) { .hero-visual { overflow:hidden; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *:before, *:after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }