@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #102c35;
  --ink-deep: #092128;
  --mint: #d8e5de;
  --paper: #f6f5f0;
  --white: #ffffff;
  --orange: #ff6b3d;
  --orange-dark: #db4e27;
  --muted: #637277;
  --line: rgba(16, 44, 53, .16);
  --display: 'Space Grotesk', sans-serif;
  --body: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 20; padding: 10px 14px; background: var(--orange); color: var(--ink-deep); font-weight: 700; }
.skip-link:focus { top: 16px; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; color: var(--white); transition: background .25s ease, position .25s ease; }
.site-header.scrolled { position: fixed; background: rgba(9, 33, 40, .95); backdrop-filter: blur(12px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 142px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 600; }
.site-nav a { opacity: .85; transition: opacity .2s ease, color .2s ease; }.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; color: var(--orange); }
.site-nav .nav-cta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.38); color: var(--white); opacity: 1; }
.nav-cta span { color: var(--orange); font-size: 17px; }.menu-toggle { display: none; border: 0; background: transparent; color: var(--white); }

.hero { position: relative; min-height: min(780px, 92vh); display: flex; align-items: center; overflow: hidden; background: var(--ink); color: var(--white); }
.hero-image, .hero-overlay { position: absolute; inset: 0; }.hero-image { background: url('assets/commercial elevator1.png') center/cover; transform: scale(1.02); }
.hero-overlay { background: linear-gradient(90deg, rgba(9,33,40,.93) 0%, rgba(9,33,40,.68) 45%, rgba(9,33,40,.28) 100%), linear-gradient(0deg, rgba(9,33,40,.62), transparent 38%); }
.hero-content { position: relative; z-index: 1; padding-top: 70px; }.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; color: var(--orange-dark); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.eyebrow.light { color: var(--orange); }.eyebrow-line { width: 30px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }h1, h2, h3 { font-family: var(--display); letter-spacing: -.055em; line-height: .96; }
h1 { max-width: 710px; margin-bottom: 30px; font-size: clamp(58px, 8vw, 104px); font-weight: 600; }h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-copy { max-width: 440px; margin-bottom: 36px; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.6; }.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 13px 18px; border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 700; transition: background .2s ease, color .2s ease, transform .2s ease; }.button:hover, .button:focus-visible { transform: translateY(-2px); }.button-primary { background: var(--orange); color: var(--ink-deep); }.button-primary:hover, .button-primary:focus-visible { background: #ff855f; }.button-outline { border-color: rgba(255,255,255,.45); color: var(--white); }.button-outline:hover, .button-outline:focus-visible { background: var(--white); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid currentColor; padding-bottom: 4px; font-size: 13px; font-weight: 700; }.text-link span { font-size: 18px; transition: transform .2s ease; }.text-link:hover span { transform: translateX(4px); }.light-link { color: var(--white); }.dark-link { color: var(--ink); }
.hero-note { position: absolute; right: 32px; bottom: 35px; z-index: 1; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,107,61,.15); }.scroll-cue { position: absolute; bottom: 34px; left: 32px; z-index: 1; display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.58); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }.scroll-line { width: 60px; height: 1px; background: rgba(255,255,255,.4); }

.section-pad { padding: 130px 0; }.intro { background: var(--paper); }.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; }.intro h2, .section-heading h2, .work h2 { margin-bottom: 0; font-size: clamp(48px, 6vw, 76px); }.intro-copy { max-width: 480px; }.lead { margin-bottom: 20px; color: var(--ink); font-size: 21px; line-height: 1.45; }.intro-copy > p:not(.lead) { color: var(--muted); font-size: 15px; margin-bottom: 28px; }.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 105px; padding-top: 23px; border-top: 1px solid var(--line); }.stat { display: flex; align-items: baseline; gap: 13px; }.stat strong { font: 600 38px/1 var(--display); letter-spacing: -.06em; }.stat span { color: var(--muted); font-size: 12px; }

.solutions { background: var(--mint); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 60px; }.section-intro { max-width: 310px; margin: 0 0 5px; color: var(--muted); font-size: 15px; }.solution-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(16,44,53,.25); }.solution-card { position: relative; min-height: 355px; padding: 30px 28px 28px 0; border-right: 1px solid rgba(16,44,53,.25); }.solution-card + .solution-card { padding-left: 28px; }.solution-card:last-child { border-right: 0; }.card-number { color: var(--orange-dark); font-size: 12px; font-weight: 700; }.card-icon { margin: 48px 0 25px; font: 500 38px/1 var(--display); }.solution-card h3 { margin-bottom: 15px; font-size: 25px; letter-spacing: -.04em; }.solution-card p { max-width: 280px; min-height: 72px; margin-bottom: 25px; color: var(--muted); font-size: 14px; }.solution-card a { display: inline-flex; gap: 12px; font-size: 12px; font-weight: 700; }.solution-card a span { color: var(--orange-dark); font-size: 17px; }.featured-card { background: var(--orange); margin-top: -1px; padding-top: 31px; border-color: var(--orange); }.featured-card .card-number, .featured-card a span { color: var(--ink-deep); }.featured-card p { color: rgba(16,44,53,.72); }

.standards { background: var(--ink); color: var(--white); }.standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 105px; align-items: center; }.standards-visual { position: relative; min-height: 470px; overflow: hidden; background: linear-gradient(135deg, #173e47, #0b252d); }.visual-lines { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); transform: skewX(-24deg) translateX(-65px); }.visual-lines span { border-right: 1px solid rgba(216,229,222,.15); }.visual-lines span:nth-child(2) { border-right-color: rgba(255,107,61,.7); }.visual-orbit { position: absolute; border: 1px solid rgba(216,229,222,.22); border-radius: 50%; }.orbit-one { width: 460px; height: 460px; top: 37px; left: -125px; }.orbit-two { width: 300px; height: 300px; top: 115px; left: -45px; border-color: rgba(255,107,61,.5); }.visual-label { position: absolute; left: 30px; top: 28px; z-index: 1; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }.visual-coordinate { position: absolute; right: 25px; bottom: 25px; color: rgba(255,255,255,.56); font-size: 10px; letter-spacing: .12em; }.standards-copy h2 { margin-bottom: 28px; font-size: clamp(48px, 5.5vw, 70px); }.standards-copy > p:not(.eyebrow) { max-width: 440px; margin-bottom: 30px; color: rgba(255,255,255,.7); font-size: 15px; }.check-list { display: grid; gap: 14px; margin: 0 0 36px; padding: 0; list-style: none; color: rgba(255,255,255,.85); font-size: 13px; }.check-list li { display: flex; gap: 12px; align-items: center; }.check-list span { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 11px; }

.work { background: var(--paper); }.work-heading { margin-bottom: 46px; align-items: end; }.project-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }.project { min-width: 0; }.project-image { position: relative; height: 320px; background-position: center; background-size: cover; }.project-image-one { background-image: linear-gradient(0deg, rgba(9,33,40,.38), transparent), url('assets/Elevator 2.jpg'); }
.project-image-two { background-image: linear-gradient(0deg, rgba(9,33,40,.35), transparent), url('assets/Apartment Elevator1.jpg'); }.project-large .project-image { height: 430px; }.project-meta { display: flex; justify-content: space-between; align-items: start; padding-top: 18px; border-top: 1px solid var(--line); }.project-type { display: block; margin-bottom: 8px; color: var(--orange-dark); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.project h3 { margin: 0; font-size: 24px; }.project-arrow { font-size: 23px; }

.contact { background: var(--ink-deep); color: var(--white); }.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 120px; }.contact-intro h2 { margin-bottom: 25px; font-size: clamp(52px, 6vw, 80px); }.contact-intro > p:not(.eyebrow) { max-width: 340px; margin-bottom: 48px; color: rgba(255,255,255,.66); }.contact-details { display: grid; gap: 18px; }.contact-details a { display: grid; gap: 2px; width: fit-content; font-size: 15px; }.contact-details span { color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.contact-form { padding-top: 5px; }.form-row { display: grid; gap: 8px; margin-bottom: 22px; }.form-row label { color: rgba(255,255,255,.78); font-size: 12px; }.form-row label span { color: var(--orange); }.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.32); border-radius: 0; outline: 0; background: transparent; color: var(--white); transition: border-color .2s ease; }.form-row select option { color: var(--ink); }.form-row textarea { resize: vertical; min-height: 60px; }.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--orange); }.contact-form .button { margin-top: 12px; }.form-status { min-height: 24px; margin: 15px 0 0; color: var(--orange); font-size: 13px; }

.site-footer { padding: 50px 0 25px; background: #071b21; color: rgba(255,255,255,.7); }.footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding-bottom: 55px; }.footer-brand { align-self: start; color: var(--white); }.footer-top p { margin: 0; color: rgba(255,255,255,.5); font-size: 14px; }.footer-links { display: flex; justify-content: flex-end; gap: 25px; font-size: 12px; }.footer-links a:hover, .footer-bottom a:hover { color: var(--orange); }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.4); font-size: 11px; }

@media (max-width: 760px) {
  .container { width: min(100% - 40px, 560px); }.nav-wrap { height: 74px; }.brand-logo { width: 118px; }.menu-toggle { display: grid; gap: 4px; padding: 8px 0 8px 8px; }.menu-toggle > span:not(.sr-only) { display: block; width: 23px; height: 2px; background: currentColor; }.site-nav { position: absolute; top: 74px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 20px; background: var(--ink-deep); }.site-nav.is-open { display: flex; }.site-nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }.site-nav .nav-cta { margin-top: 12px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.35); justify-content: space-between; }.hero { min-height: 730px; }.hero-content { padding-top: 80px; }.hero-image { background-position: 60% center; }.hero-overlay { background: linear-gradient(90deg, rgba(9,33,40,.94), rgba(9,33,40,.52)), linear-gradient(0deg, rgba(9,33,40,.72), transparent 55%); }h1 { font-size: clamp(52px, 14vw, 76px); }.hero-copy { font-size: 16px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }.hero-note { right: 20px; bottom: 25px; }.scroll-cue { display: none; }.section-pad { padding: 82px 0; }.intro-grid, .standards-grid, .contact-grid { grid-template-columns: 1fr; gap: 45px; }.intro h2, .section-heading h2, .work h2 { font-size: 52px; }.stat-row { margin-top: 70px; gap: 22px; }.stat { display: grid; gap: 5px; }.stat strong { font-size: 32px; }.section-heading { align-items: start; flex-direction: column; gap: 28px; margin-bottom: 42px; }.solution-list { grid-template-columns: 1fr; }.solution-card, .solution-card + .solution-card { min-height: auto; padding: 26px 0; border-right: 0; border-bottom: 1px solid rgba(16,44,53,.25); }.solution-card:last-child { border-bottom: 0; }.featured-card { margin-inline: -20px; padding-inline: 20px !important; }.card-icon { margin: 28px 0 18px; }.solution-card p { min-height: 0; }.standards-grid { gap: 45px; }.standards-visual { min-height: 330px; }.orbit-one { width: 330px; height: 330px; top: 35px; left: -90px; }.orbit-two { width: 230px; height: 230px; top: 85px; left: -40px; }.project-grid { grid-template-columns: 1fr; gap: 45px; }.project-image, .project-large .project-image { height: 280px; }.contact-grid { gap: 25px; }.contact-intro > p:not(.eyebrow) { margin-bottom: 32px; }.footer-top { grid-template-columns: 1fr 1fr; }.footer-top p { grid-column: 1 / -1; grid-row: 2; }.footer-links { justify-content: flex-start; }.footer-bottom { flex-wrap: wrap; }.footer-bottom a { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-content, .hero-note { animation: reveal .8s ease both; }.hero-note { animation-delay: .18s; }.standards-visual .visual-orbit { animation: orbit 18s linear infinite; }
}
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
.contact-address { display: grid; gap: 2px; width: fit-content; font-size: 15px; }