:root { --black:#0b0b0b; --graphite:#171717; --orange:#f97316; --white:#fff; --grey:#767676; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; color:var(--graphite); background:var(--white); font-family:Arial,Helvetica,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
svg { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px 16px; color:var(--black); background:var(--white); }
.skip-link:focus { top:16px; }
:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }

.site-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:88px; padding:0 clamp(24px,5vw,80px); color:var(--white); background:var(--black); border-bottom:1px solid rgba(255,255,255,.1); }
.brand { display:inline-flex; align-items:center; justify-self:start; gap:12px; font-size:23px; font-weight:800; line-height:1; letter-spacing:-.7px; }
.brand svg { width:38px; height:38px; color:var(--orange); }
.brand strong { color:var(--orange); }
.brand small { display:block; margin-top:7px; color:#aaa; font-size:7px; font-weight:700; letter-spacing:2.4px; }
nav { display:flex; gap:34px; }
nav a { color:#d5d5d5; font-size:13px; transition:color .2s; }
nav a:hover { color:var(--orange); }
.header-call { display:inline-flex; align-items:center; justify-self:end; gap:11px; font-size:14px; font-weight:700; }
.header-call svg { width:19px; height:19px; color:var(--orange); }

.hero { position:relative; min-height:650px; height:calc(78svh - 88px); max-height:820px; overflow:hidden; color:var(--white); background:#282828; }
.hero-image,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:center 58%; }
.hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.68) 42%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 42%); }
.hero-content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; height:100%; max-width:1280px; margin:auto; padding:58px clamp(24px,5vw,80px) 82px; }
.kicker,.section-number { margin:0 0 24px; font-size:10px; font-weight:700; letter-spacing:2.1px; }
.kicker { display:flex; align-items:center; gap:12px; color:#ddd; }
.kicker::before { width:27px; height:2px; content:""; background:var(--orange); }
h1 { margin:0; font-size:clamp(65px,7.4vw,112px); line-height:.96; letter-spacing:-5px; }
h1 span { color:var(--orange); }
.lead { max-width:520px; margin:30px 0; color:#e3e3e3; font-size:17px; }
.hero-actions { display:flex; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-width:185px; padding:16px 20px; border:1px solid transparent; border-radius:3px; font-size:11px; font-weight:800; letter-spacing:.4px; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:var(--black); background:var(--orange); }
.button-primary:hover { background:#ff9144; }
.button-secondary { color:var(--white); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.35); }
.button-secondary:hover { background:rgba(255,255,255,.14); }
.photo-label { position:absolute; right:clamp(24px,5vw,80px); bottom:24px; z-index:2; margin:0; color:#d2d2d2; font-size:9px; }

.services { max-width:1280px; margin:auto; padding:95px clamp(24px,5vw,80px) 90px; }
.section-heading { display:grid; grid-template-columns:.65fr 1.5fr 1fr; gap:32px; align-items:end; margin-bottom:42px; }
.section-number { color:#767676; }
h2 { margin:0; font-size:clamp(38px,4vw,58px); line-height:1; letter-spacing:-2.5px; }
.section-heading>p:last-child { max-width:330px; margin:0 0 4px; color:var(--grey); font-size:14px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #ddd; border-left:1px solid #ddd; }
.service-grid article { position:relative; min-height:185px; padding:27px 28px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; transition:color .25s,background .25s; }
.service-grid article:hover { color:var(--white); background:var(--graphite); }
.service-grid article>span { position:absolute; top:20px; right:22px; color:#9b9b9b; font-size:10px; }
.service-grid svg { width:31px; height:31px; color:var(--orange); }
.service-grid h3 { max-width:220px; margin:40px 0 0; font-size:17px; line-height:1.3; }
.service-note { margin:19px 0 0; color:#777; font-size:10px; }

.contact { display:grid; grid-template-columns:1.3fr 1fr; gap:80px; padding:90px clamp(24px,8vw,130px); color:var(--white); background:var(--orange); }
.contact .section-number { color:rgba(0,0,0,.62); }
.contact h2 { color:var(--black); font-size:clamp(48px,5.2vw,76px); }
.contact-details { align-self:end; padding-left:50px; color:var(--black); border-left:1px solid rgba(0,0,0,.3); }
.contact-details p { margin:0; }
.contact-details .company { margin-bottom:4px; font-size:13px; font-weight:800; letter-spacing:1px; }
.contact-details .phone { display:block; margin:15px 0 25px; font-size:clamp(28px,3vw,42px); font-weight:800; letter-spacing:-1.5px; }
.button-dark { min-width:265px; color:var(--white); background:var(--black); }
.button-dark:hover { background:#292929; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px clamp(24px,5vw,80px); color:#999; background:var(--black); font-size:10px; }
footer a { color:var(--white); font-weight:700; }
.mobile-call { display:none; }

@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .section-heading { grid-template-columns:1fr 1.5fr; }
  .section-heading>p:last-child { grid-column:2; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .contact { gap:40px; }
  .contact-details { padding-left:30px; }
}

@media (max-width:640px) {
  html { scroll-padding-top:72px; }
  .site-header { min-height:72px; padding:0 18px; }
  .brand { font-size:19px; gap:9px; }
  .brand svg { width:31px; height:31px; }
  .brand small { margin-top:5px; font-size:6px; letter-spacing:1.8px; }
  .header-call span { display:none; }
  .header-call { width:42px; height:42px; justify-content:center; border:1px solid #393939; border-radius:50%; }
  .header-call svg { width:18px; height:18px; }
  .hero { min-height:610px; height:calc(85svh - 72px); max-height:760px; }
  .hero-image { object-position:63% center; }
  .hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.52)),linear-gradient(0deg,rgba(0,0,0,.75),transparent); }
  .hero-content { padding:45px 20px 90px; }
  .kicker { font-size:8px; letter-spacing:1.5px; }
  h1 { font-size:clamp(54px,18vw,72px); letter-spacing:-3px; }
  .lead { max-width:330px; margin:25px 0; font-size:14px; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .button { min-width:210px; padding:15px 18px; }
  .photo-label { right:20px; bottom:20px; max-width:260px; text-align:right; font-size:8px; }
  .services { padding:66px 20px 62px; }
  .section-heading { display:block; margin-bottom:30px; }
  .section-heading h2 { margin-bottom:16px; }
  .section-heading>p:last-child { font-size:13px; }
  .section-number { margin-bottom:18px; }
  h2 { font-size:39px; }
  .service-grid { grid-template-columns:1fr; }
  .service-grid article { min-height:118px; padding:23px 22px; }
  .service-grid h3 { margin:21px 0 0; font-size:16px; }
  .service-note { font-size:9px; }
  .contact { grid-template-columns:1fr; gap:45px; padding:65px 20px; }
  .contact h2 { font-size:48px; letter-spacing:-2px; }
  .contact-details { padding:25px 0 0; border-top:1px solid rgba(0,0,0,.3); border-left:0; }
  .contact-details .phone { font-size:31px; }
  footer { flex-wrap:wrap; padding:25px 20px 100px; }
  footer span:nth-child(2) { order:3; width:100%; }
  .mobile-call { position:fixed; right:0; bottom:0; left:0; z-index:30; display:flex; align-items:center; justify-content:center; gap:10px; padding:17px 12px calc(17px + env(safe-area-inset-bottom)); color:var(--black); background:var(--orange); box-shadow:0 -4px 18px rgba(0,0,0,.2); font-size:13px; font-weight:800; }
  .mobile-call svg { width:18px; height:18px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}
