/* motorware.in — single-page site. Self-hosted fonts, no external requests. */
@font-face{font-family:"Comfortaa";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/comfortaa-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Comfortaa";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/comfortaa-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2")}

:root{
  --ink:#07080D;
  --text:#e9f0f1;
  --muted:#a3b1b4;
  --cyan:#00dcff;
  --line:rgba(233,240,241,.12);
  --gutter:clamp(1.25rem,4vw,3rem);
  --max:1500px;
  --art-left:clamp(18rem,28vw,26rem);
  --display:"Comfortaa","Trebuchet MS",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--ink);color:var(--text);
  font:400 1.0625rem/1.6 var(--body);
}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.bar{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* header */
.site-header{position:absolute;inset:0 0 auto 0;z-index:3;padding-top:1.25rem}
.brand{display:inline-block;line-height:0}
.brand img{height:3.6rem;width:auto;display:block}

/* hero */
.hero{position:relative;flex:1;min-height:30rem;display:flex;overflow:hidden;isolation:isolate}
.stage{position:relative;width:100%;max-width:var(--max);margin-inline:auto;display:flex;align-items:center}
.hero-art{
  position:absolute;z-index:-1;bottom:0;right:0;
  left:var(--art-left);width:calc(100% - var(--art-left));height:100%;
  object-fit:cover;object-position:0 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30%);
  animation:arrive 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes arrive{from{opacity:0;transform:translateX(4%)}to{opacity:1;transform:none}}
.hero-copy{max-width:40rem;padding:clamp(6.5rem,16vh,9rem) var(--gutter) 3rem}
h1{
  margin:0 0 1.25rem;font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.12;letter-spacing:-.01em;
}
h1 span{display:block}
h1 .site{font-weight:500;color:var(--muted);font-size:.6em;letter-spacing:0;margin-bottom:.35rem}
.lede{margin:0;color:var(--muted);font-size:1.25rem}

/* contact band */
.contact{position:relative;z-index:2;background:var(--ink);border-top:1px solid var(--line);padding-block:1.75rem 1.1rem}
.contact-grid{
  display:grid;grid-template-columns:minmax(9rem,.8fr) minmax(0,1.3fr) minmax(0,2fr);
  gap:1rem 2.5rem;align-items:start;
}
.contact h2{margin:0;font:700 1.35rem/1.3 var(--display)}
.email{
  font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.3;
  color:var(--cyan);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;
  overflow-wrap:anywhere;
}
.email:hover{text-decoration-thickness:2px}
address{font-style:normal;color:var(--muted);font-size:.975rem;line-height:1.55}
address .name{color:var(--text);font-weight:600}
.maplink{display:inline-block;margin-top:.35rem;color:var(--cyan);text-underline-offset:.25em}
.legal{margin:1.25rem 0 0;font-size:.85rem;color:var(--muted)}

/* wide screens: soften the right edge of the scene */
@media (min-width:1501px){
  .hero-art{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 88%,transparent 100%);
  }
}
/* tablet / phone: stack text above the scene */
@media (max-width:960px){
  .brand img{height:2.925rem}
  .hero{min-height:38rem}
  .stage{align-items:flex-start}
  .hero-art{
    left:0;width:100%;height:58%;object-position:40% 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);
            mask-image:linear-gradient(180deg,transparent 0,#000 38%);
  }
  .hero-copy{padding-top:6.5rem}
  .contact-grid{grid-template-columns:1fr;gap:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-art{animation:none}
}