*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { background: #0f1720; }
body { margin: 0; }
body {
  color: #fff;
  font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

/* Full-bleed background — fixed element instead of background-attachment:fixed (broken on iOS) */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background: #0f1720 url("../img/office-800.jpg") center / cover no-repeat;
  background-image: image-set(url("../img/office-800.webp") type("image/webp"), url("../img/office-800.jpg") type("image/jpeg"));
}
@media (min-width: 801px) {
  .bg {
    background-image: url("../img/office.jpg");
    background-image: image-set(url("../img/office.webp") type("image/webp"), url("../img/office.jpg") type("image/jpeg"));
  }
}
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,24,.1) 0%, rgba(10,16,24,.4) 45%, rgba(10,16,24,.9) 100%);
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 2rem clamp(2rem, 5vw, 6rem);
  padding: 2rem clamp(1.25rem, 8vw, 12rem) clamp(2.5rem, 8vh, 6rem);
  padding-bottom: max(clamp(2.5rem, 8vh, 6rem), env(safe-area-inset-bottom));
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

h1 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .005em;
  font-size: clamp(1.6rem, 3.3vw, 3.4rem);
}
.since {
  margin: .6rem 0 0;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
}

.contact { font-style: normal; display: flex; flex-direction: column; gap: .45rem; }
.brand { margin: 0 0 .6rem; font-weight: 800; letter-spacing: .04em; font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.contact a {
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
  width: fit-content;
  border-radius: 4px;
}
.contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.phone { font-weight: 700; font-size: clamp(1.35rem, 1.9vw, 1.8rem); margin-bottom: .6rem; }
.line { font-size: clamp(.95rem, 1vw, 1.05rem); }
.contact svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* Phones: stack, make tap targets roomy */
@media (max-width: 900px), (max-height: 500px) {
  .bg::after { background: linear-gradient(180deg, rgba(10,16,24,.15) 0%, rgba(10,16,24,.6) 40%, rgba(10,16,24,.92) 100%); }
  .hero { grid-template-columns: 1fr; align-content: end; gap: 2.25rem; }
  .contact a { padding: .2rem 0; }
}

/* Gentle entrance, skipped for users who prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .tagline, .contact { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .contact { animation-delay: .15s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

@media print {
  .bg { display: none; }
  body { background: #fff; color: #000; }
  .contact a { color: #000; }
  .hero { min-height: 0; text-shadow: none; }
}