:root { --ink:#102f33; --deep:#08272b; --cream:#f4f0e6; --paper:#fbfaf5; --orange:#e95d2a; --line:#d8d7ce; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; } a { color:inherit; text-decoration:none; }
.site-header { height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; border-bottom:1px solid var(--line); position:relative; z-index:5; background:var(--paper); }
.brand { display:flex; align-items:center; gap:13px; } .brand-mark { width:43px; height:43px; border:2px solid var(--ink); display:grid; place-items:center; font-weight:900; letter-spacing:-2px; }
.brand strong { display:block; font-size:15px; text-transform:uppercase; letter-spacing:.06em; } .brand small { display:block; margin-top:4px; font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:#567174; }
nav { display:flex; gap:36px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } nav a:hover { color:var(--orange); }
.header-phone { background:var(--ink); color:white; padding:14px 20px; font-size:13px; font-weight:800; letter-spacing:.04em; }
.hero { min-height:690px; display:grid; grid-template-columns:58% 42%; overflow:hidden; } .hero-copy { padding:110px 7vw 90px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eyebrow { margin:0 0 24px; color:var(--orange); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.2em; }
h1 { max-width:790px; font-size:clamp(56px,6.3vw,102px); letter-spacing:-.065em; line-height:.88; margin:0; font-weight:850; } h1 em { color:var(--orange); font-style:normal; display:block; }
.hero-lead { max-width:670px; font-size:20px; line-height:1.6; margin:38px 0; color:#526a6c; } .hero-actions { display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.button { padding:18px 24px; font-weight:800; font-size:14px; } .primary { background:var(--orange); color:white; } .primary:hover { background:#ca491b; }
.text-link { font-size:14px; font-weight:800; border-bottom:1px solid var(--ink); padding:10px 0; } .text-link span { margin-left:12px; color:var(--orange); }
.hero-visual { background:var(--ink); position:relative; overflow:hidden; min-height:610px; } .pipe { position:absolute; border:42px solid var(--orange); border-left:0; border-bottom:0; border-radius:0 130px 0 0; }
.hero-photo { position:relative; min-height:610px; overflow:hidden; background:var(--ink); }
.hero-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; filter:saturate(.84) contrast(1.03); }
.hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(8,39,43,.82)); }
.photo-stamp { position:absolute; z-index:1; left:9%; bottom:8%; color:white; font-size:clamp(38px,4vw,62px); font-weight:900; line-height:.98; letter-spacing:-.05em; }
.pipe-a { width:310px; height:390px; left:-70px; top:90px; transform:rotate(25deg); } .pipe-b { width:390px; height:290px; right:-190px; bottom:-80px; border-color:#1e4b4f; transform:rotate(205deg); }
.visual-card { position:absolute; right:9%; top:15%; width:180px; background:var(--cream); padding:25px; } .visual-card span { font-size:56px; line-height:1; font-weight:900; color:var(--orange); letter-spacing:-.06em; }
.visual-card p { margin:9px 0 0; font-weight:800; line-height:1.35; } .visual-label { position:absolute; bottom:9%; left:10%; color:white; font-size:clamp(38px,4vw,62px); font-weight:900; line-height:.98; letter-spacing:-.05em; }
.trust-strip { min-height:84px; background:var(--cream); display:flex; align-items:center; justify-content:space-around; padding:20px 7vw; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.section { padding:120px 7vw; } .section-heading { display:flex; justify-content:space-between; gap:50px; align-items:flex-end; margin-bottom:60px; }
.services-intro { padding-bottom:80px; }
.service-details { border-top:1px solid var(--line); }
.service-detail { min-height:650px; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.service-detail:nth-child(even) .service-image { order:2; }
.service-image { min-height:570px; overflow:hidden; background:#d9ddd8; }
.service-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.service-detail:hover .service-image img { transform:scale(1.025); }
.service-content { padding:80px 7vw; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.service-number { color:var(--orange); font-weight:900; font-size:12px; letter-spacing:.16em; }
.service-content h2 { font-size:clamp(45px,5vw,74px); line-height:.95; letter-spacing:-.055em; margin:25px 0; }
.service-intro { max-width:600px; color:#587073; font-size:18px; line-height:1.65; margin:0 0 28px; }
.service-content ul,.revision-copy ul { list-style:none; padding:0; margin:0 0 34px; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0 25px; }
.service-content li,.revision-copy li { position:relative; padding:13px 0 13px 22px; border-top:1px solid var(--line); font-size:14px; line-height:1.45; }
.service-content li::before,.revision-copy li::before { content:"+"; position:absolute; left:0; color:var(--orange); font-weight:900; }
.dark { background:var(--ink); color:white; }
.dark:hover { background:var(--orange); }
.revision { background:var(--deep); color:white; display:grid; grid-template-columns:1.05fr .95fr; gap:8vw; align-items:center; }
.revision-copy h2 { font-size:clamp(46px,5vw,75px); line-height:.96; letter-spacing:-.055em; margin:0 0 30px; }
.revision-copy>p:not(.eyebrow) { color:#b8c7c8; font-size:18px; line-height:1.7; max-width:620px; }
.revision-copy li { border-color:#315054; color:#d0dada; }
.orange { background:var(--orange); color:white; }
.revision-image { min-height:580px; position:relative; overflow:hidden; }
.revision-image img { position:absolute; width:100%; height:100%; object-fit:cover; }
.revision-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,39,43,.85)); }
.revision-image span { position:absolute; z-index:1; bottom:35px; left:35px; color:white; font-weight:900; font-size:30px; line-height:1; letter-spacing:-.04em; }
.section-heading h2,.contact h2,.about h2 { font-size:clamp(42px,5vw,74px); line-height:.98; letter-spacing:-.055em; margin:0; } .section-heading>p { max-width:430px; font-size:17px; line-height:1.7; color:#607477; margin:0 0 7px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:360px; padding:34px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; transition:.2s; }
.service-card:hover { background:var(--cream); transform:translateY(-4px); } .service-card>span { color:var(--orange); font-size:12px; font-weight:900; }
.service-card h3 { font-size:27px; letter-spacing:-.03em; margin:55px 0 18px; } .service-card p { color:#63777a; font-size:15px; line-height:1.65; margin:0; } .service-card a { margin-top:auto; padding-top:25px; font-size:13px; font-weight:900; }
.about { background:var(--deep); color:white; display:grid; grid-template-columns:.9fr 1.1fr; gap:8vw; align-items:center; } .light { color:#f48a61; }
.about-photo { min-height:580px; overflow:hidden; }
.about-photo img { width:100%; height:580px; object-fit:cover; display:block; }
.mini-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:35px; }
.mini-points span { border:1px solid #456266; padding:12px 15px; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:900; }
.about-panel>p:last-child { color:#b8c6c7; font-size:18px; line-height:1.75; max-width:510px; margin-top:34px; }
.about-points>div { display:grid; grid-template-columns:55px 1fr; column-gap:18px; padding:25px 0; border-bottom:1px solid #315054; } .about-points strong { color:var(--orange); font-size:12px; grid-row:1/3; padding-top:5px; }
.about-points h3 { font-size:21px; margin:0 0 9px; } .about-points p { color:#aebfc0; line-height:1.6; margin:0; }
.contact { background:var(--cream); display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:center; } .contact>div>p:last-child { max-width:590px; font-size:18px; color:#5d7173; line-height:1.7; }
.contact-card { background:var(--orange); color:white; padding:45px; box-shadow:16px 16px 0 var(--ink); } .contact-card small { display:block; text-transform:uppercase; letter-spacing:.16em; font-weight:900; font-size:10px; margin-bottom:9px; opacity:.8; }
.contact-main { display:block; font-size:clamp(24px,3vw,39px); font-weight:900; letter-spacing:-.04em; margin-bottom:30px; } .contact-main.mail { font-size:clamp(18px,2.3vw,29px); }
.contact-card p { border-top:1px solid rgba(255,255,255,.4); padding-top:24px; margin:0; font-weight:700; line-height:1.5; }
footer { min-height:130px; display:flex; align-items:center; justify-content:space-between; padding:30px 5vw; background:var(--paper); color:#66797b; font-size:12px; } footer .brand { color:var(--ink); }
@media (max-width:900px) { nav { display:none; } .hero { grid-template-columns:1fr; } .hero-copy { padding:75px 7vw; } .hero-photo { min-height:520px; } .service-grid { grid-template-columns:repeat(2,1fr); } .service-detail { grid-template-columns:1fr; } .service-detail:nth-child(even) .service-image { order:0; } .service-image { min-height:430px; max-height:560px; } .revision,.about,.contact { grid-template-columns:1fr; } }
@media (max-width:600px) { .site-header { height:76px; } .header-phone { display:none; } h1 { font-size:55px; } .hero-copy { padding:65px 6vw; } .hero-lead { font-size:17px; } .hero-photo { min-height:430px; } .trust-strip { align-items:flex-start; flex-direction:column; gap:14px; padding:24px 7vw; } .section { padding:80px 6vw; } .section-heading { display:block; } .section-heading>p { margin-top:25px; } .service-grid { grid-template-columns:1fr; } .service-card { min-height:300px; } .service-image { min-height:320px; } .service-content { padding:60px 6vw 70px; } .service-content ul,.revision-copy ul { grid-template-columns:1fr; } .revision { gap:55px; } .revision-image { min-height:400px; } .about { gap:45px; } .about-photo,.about-photo img { min-height:360px; height:360px; } .contact-card { padding:32px 25px; box-shadow:9px 9px 0 var(--ink); } footer { flex-direction:column; align-items:flex-start; gap:20px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }