/* DME — Douglas Moore Engineering. Rebuilt to match the supplied 1024 × 1536 design. */
:root {
  color-scheme: dark;
  --navy: #001522;
  --navy-raised: #031a2a;
  --cyan: #41f0f9;
  --outline: #0877ae;
  --white: #f8f8ff;
  font-family: 'Poppins', 'Cabin', 'Trebuchet MS', sans-serif;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after {box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {margin:0;min-width:320px;background:var(--navy);color:var(--white);}
a {color:inherit;}
a:focus-visible,button:focus-visible {outline:3px solid var(--cyan);outline-offset:4px;}
.skip-link {position:absolute;top:-100px;left:12px;z-index:200;background:white;color:#001522;padding:12px 16px;}
.skip-link:focus {top:12px;}
.container {max-width:1120px;padding:0 34px;margin-inline:auto;}
/* Header in the original artwork is part of the same dark canvas as the hero. */
.site-header {height:90px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 43px 0 47px;position:relative;z-index:5;background:linear-gradient(105deg,#011522,#061f33);}
.brand {display:flex;align-items:center;gap:17px;text-decoration:none;min-width:0;}
.brand-logo {width:117px;height:43px;object-fit:contain;display:block;}
.brand-name {font-size:13px;font-weight:400;letter-spacing:2.2px;text-transform:uppercase;white-space:nowrap;}
.nav {display:flex;align-items:center;gap:35px;}
.nav a {text-decoration:none;white-space:nowrap;font-size:14px;font-weight:400;}
.nav a:hover,.project-card a:hover,.footer-contact:hover {color:var(--cyan);}
.nav-github {border:1px solid #21ddf6;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:9px;min-width:118px;height:38px;}
.nav-github .external-icon {font-size:19px;line-height:1;}
.menu-toggle {display:none;}
/* Original artwork: dark star field and the EXACT connected globe cropped from supplied image. */
.hero {height:466px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 79% 24%,#06304c 0%,transparent 52%),linear-gradient(110deg,#001622,#031b2d);}
.hero-stars {position:absolute;inset:0;pointer-events:none;opacity:.40;background-image:radial-gradient(circle,#169bdf .65px,transparent 1px),radial-gradient(circle,#0c79b8 .55px,transparent 1px);background-size:81px 67px,117px 101px;background-position:24px 39px,69px 7px;}
.hero-globe {position:absolute;right:0;top:0;width:41.40625%;height:100%;background:url('assets/hero-globe.webp') center / 100% 100% no-repeat;pointer-events:none;}
.hero-inner {position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:55px 48px 42px;}
.eyebrow {margin:0 0 17px;text-transform:uppercase;color:var(--cyan);font-size:14px;line-height:20px;font-weight:600;letter-spacing:2.8px;}
.hero h1 {max-width:625px;margin:0 0 16px;font-size:55.5px;font-weight:600;letter-spacing:-.5px;line-height:1.035;text-shadow:0 2px 8px #00111b;}
.hero-lede {max-width:565px;margin:0;color:#f0eff5;font-size:24px;line-height:1.27;font-weight:400;}
.hero-actions {display:flex;align-items:center;gap:37px;margin-top:17px;}
.button {min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:18px;text-decoration:none;font-size:16px;font-weight:500;}
.button-primary {min-width:266px;padding:11px 23px;border-radius:6px;background:linear-gradient(180deg,#6ff5ff 0%,#30d9fa 55%,#04b6fa 100%);box-shadow:0 0 17px #10cdff24;color:#001a29;}
.button-primary:hover {filter:brightness(1.08);}
.arrow {font-size:21px;font-weight:400;line-height:1;}
.button-text {min-height:36px;border-bottom:1px solid var(--cyan);gap:13px;}
.button-text .arrow,.project-card a .external-icon {color:var(--cyan);}
/* Selected systems */
.section {border-top:1px solid #638293;}
.work {padding:25px 0 36px;background:linear-gradient(125deg,#001624,#031f30);}
.section-heading {display:flex;align-items:center;gap:19px;margin:0 0 19px 14px;font-size:32px;line-height:1.28;font-weight:600;letter-spacing:-.5px;}
.dash {display:inline-block;flex:none;width:24px;height:3px;background:linear-gradient(90deg,var(--cyan) 77%,#ffffff 77%);}
.project-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.project-card {display:flex;flex-direction:column;min-width:0;min-height:328px;border:1px solid var(--outline);border-radius:7px;overflow:hidden;background:linear-gradient(145deg,#051e2c,#011827);}
.project-card img {display:block;width:calc(100% - 12px);height:151px;margin:6px 6px 0;border-radius:4px;object-fit:cover;}
.project-content {display:flex;flex:1;flex-direction:column;padding:15px 16px 16px;}
.project-card h3 {margin:0 0 3px;font-size:21px;line-height:1.35;font-weight:600;letter-spacing:-.35px;}
.project-card p {margin:0 0 16px;font-size:16px;line-height:1.45;font-weight:400;color:#f4f0f8;}
.project-card a {display:inline-flex;gap:9px;align-items:center;margin-top:auto;text-decoration:none;color:var(--cyan);font-size:15px;font-weight:500;white-space:nowrap;}
.project-card a .external-icon {font-size:20px;line-height:1;}
/* Engineering principles */
.approach {padding:28px 0 24px;background:linear-gradient(115deg,#001624,#031e2e);}
.approach .section-heading {margin-bottom:15px;gap:25px;font-size:35px;}
.approach .dash {width:31px;}
.principles {display:grid;grid-template-columns:1.03fr 1fr 1fr;gap:10px;}
.principle {min-height:175px;border:1px solid var(--outline);border-radius:7px;padding:14px 17px 15px;}
.principle-number {margin:0 0 12px;color:var(--cyan);font-size:11px;line-height:1.2;letter-spacing:2px;font-weight:700;text-transform:uppercase;}
.principle-layout {display:grid;grid-template-columns:58px minmax(0,1fr);gap:15px;}
.principle svg {width:49px;height:49px;color:#2af0f9;}
.principle h3 {font-size:15px;font-weight:600;line-height:1.4;margin:3px 0 7px;}
.principle p:not(.principle-number) {font-size:15px;line-height:1.46;margin:0;color:#f0edf4;}
.portfolio-cta {border-top:1px solid #5b7886;text-align:center;margin-top:24px;padding:19px 0 2px;}
.portfolio-cta h2 {font-size:29px;line-height:1.35;font-weight:400;margin:0 0 16px;letter-spacing:-.5px;}
.portfolio-cta .button-primary {min-width:273px;min-height:48px;}
/* Footer */
.footer {border-top:1px solid #607a8b;min-height:100px;padding:25px 0 23px;background:linear-gradient(100deg,#001521,#051d2c);}
.footer-inner {display:flex;justify-content:space-between;align-items:center;gap:18px;}
.footer-brand {gap:15px;}
.footer-brand img {width:89px;height:auto;display:block;}
.footer-brand .brand-name {font-size:12px;letter-spacing:1.9px;}
.footer-contact-block {display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-tagline {font-size:12px;color:#cfd5e4;}
.footer-contact {font-size:12px;text-decoration:none;color:#cfd5e4;}
.footer-contact:hover {color:var(--cyan);}
@media (min-width:1200px){.hero{height:auto;min-height:510px;}.hero h1{font-size:clamp(55px,4.3vw,65px)}.hero-inner{padding-top:68px;padding-bottom:42px}}
@media (max-width:940px){.site-header{padding-inline:26px}.brand-name{font-size:11px;letter-spacing:1.2px}.nav{gap:20px}.hero-inner{padding-left:35px}.hero-globe{right:8px;top:50%;width:min(43vw,400px);height:auto;aspect-ratio:1;transform:translateY(-50%)}.hero h1{font-size:clamp(43px,5.4vw,55px)}.hero-lede{font-size:clamp(18px,2.25vw,23px)}.principle-layout{grid-template-columns:1fr;gap:7px}.principle{min-height:225px}}
@media (max-width:700px){
 .container{padding-inline:20px}.site-header{height:77px;padding-inline:20px}.brand-logo{width:94px;height:auto}.brand-name{font-size:10px;letter-spacing:1px;max-width:160px;white-space:normal}
 .menu-toggle{display:flex;flex-direction:column;gap:5px;justify-content:center;background:transparent;border:1px solid var(--cyan);border-radius:5px;padding:10px;cursor:pointer}.menu-toggle span{width:22px;height:2px;background:white}
 .nav{display:none;position:absolute;inset:77px 0 auto;background:#011827;padding:16px 20px 20px;border-bottom:1px solid var(--outline);flex-direction:column;align-items:stretch}.nav.open{display:flex}.nav a{padding:8px 0}.nav-github{width:100%}
 .hero{height:auto;min-height:555px}.hero-inner{padding:56px 23px 45px}.hero-globe{top:92px;right:8px;width:min(82vw,320px);height:auto;aspect-ratio:1;transform:none;opacity:.28}.eyebrow{font-size:11px;letter-spacing:2px}.hero h1{font-size:clamp(36px,8vw,52px);line-height:1.1;letter-spacing:-.4px}.hero-lede{font-size:18px;line-height:1.4}.desktop-only{display:none}.hero-actions{gap:16px;flex-direction:column;align-items:flex-start;margin-top:22px}
 .section-heading{margin-left:0;font-size:27px;gap:13px}.approach .section-heading{gap:14px}.approach .dash{width:24px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.project-card{min-height:330px}.project-content{padding:13px}.project-card img{height:148px}.project-card p{font-size:14px}.project-card a{font-size:13px;white-space:normal}.principles{grid-template-columns:1fr}.principle{min-height:0}.principle-layout{grid-template-columns:58px minmax(0,1fr);gap:13px}.portfolio-cta h2{font-size:22px}.footer-inner{flex-direction:column;align-items:flex-start}.footer-contact-block{align-items:flex-start}.footer-contact{text-align:left}
}
@media (max-width:430px){.project-grid{grid-template-columns:1fr}.project-card{min-height:0}.project-card img{height:195px}.project-card h3{font-size:21px}.project-card p{font-size:15px}.hero h1{font-size:clamp(34px,9vw,42px)}.button-primary{min-width:245px}.footer-brand .brand-name{font-size:10px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}