:root { color-scheme: dark; --ink:#0d1012; --ink2:#151a1d; --orange:#e34c3d; --blue:#61bed7; --cream:#f3f0ed; --muted:#bac2c2; --line:rgba(255,255,255,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:85px; }
body { margin:0; font:400 1rem/1.55 Arial,Helvetica,sans-serif; background:var(--ink); color:var(--cream); }
a { color:inherit; } img { display:block; max-width:100%; } button { font:inherit; }
.wrap { width:min(100% - 48px,1200px); margin-inline:auto; }
.skip-link { position:absolute; z-index:20; top:-80px; left:16px; padding:10px 14px; background:var(--orange); color:var(--ink); }
.skip-link:focus { top:16px; }
a:focus-visible,button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Impact,'Arial Narrow',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.015em; line-height:.98; }
h1 { font-size:clamp(4.2rem,8vw,8.3rem); margin-bottom:24px; }
h2 { font-size:clamp(3.25rem,6vw,6rem); margin-bottom:24px; }
h3 { font-size:2rem; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 18px; color:var(--orange); font-size:.83rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow::before { content:''; width:28px; height:2px; background:var(--blue); flex:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:56px; padding:15px 24px; border:1px solid var(--orange); background:var(--orange); color:#101819; text-decoration:none; font-weight:900; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; transition:background .2s,transform .2s; }
.button:hover { background:#ff6c5c; transform:translateY(-2px); }
.button.ghost { background:transparent; border-color:rgba(255,255,255,.65); color:#fff; }
.button.ghost:hover { background:rgba(255,255,255,.12); }
.topline { background:var(--orange); color:var(--ink); font-size:.78rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.topline .wrap { display:flex; justify-content:space-between; gap:16px; padding:9px 0; }
.site-header { position:relative; z-index:10; background:var(--ink); border-bottom:1px solid var(--line); }
.header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; }
.brand-name { font:900 1.82rem/.91 Impact,'Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.035em; }
.brand-name small { display:block; margin-top:7px; color:var(--orange); font:900 .69rem/1 Arial,Helvetica,sans-serif; letter-spacing:.11em; }
.brand-spark { color:var(--blue); font-size:.77rem; padding:0 3px; }
.site-nav { display:flex; align-items:center; gap:32px; }
.site-nav a { text-decoration:none; text-transform:uppercase; white-space:nowrap; font-size:.78rem; font-weight:900; letter-spacing:.08em; }
.site-nav a:not(.nav-contact):hover { color:var(--orange); }
.site-nav .nav-contact { padding:12px 17px; background:var(--orange); color:var(--ink); }
.site-nav .nav-contact:hover { background:#ff6c5c; }
.menu-button { display:none; border:1px solid var(--line); background:transparent; color:#fff; padding:10px 12px; cursor:pointer; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.hero { position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 76% 43%,#25262a 0%,#181c1f 36%,#0b0e10 78%); }
.hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(7,9,11,.73),transparent 72%),repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.017) 120px 121px); }
.hero::after { content:''; position:absolute; width:240px; height:240px; border:1px solid rgba(255,255,255,.13); right:-65px; top:-115px; transform:rotate(45deg); pointer-events:none; }
.hero-inner { min-height:690px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:12px; }
.hero-content { position:relative; z-index:2; padding:88px 0 90px; }
.hero h1 { max-width:790px; white-space:nowrap; }
.hero h1 span { color:var(--orange); }
.hero-lede { max-width:550px; margin-bottom:31px; color:#e5e8e6; font-size:1.18rem; line-height:1.63; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-tag { margin:49px 0 0; display:flex; align-items:center; gap:13px; color:#e2e2de; font-size:.79rem; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.hero-tag span { width:39px; border-top:2px solid var(--blue); flex:none; }
.hero-art { align-self:stretch; display:grid; place-items:center; position:relative; margin-right:-35px; }
.hero-art::before { content:''; position:absolute; width:min(88%,480px); aspect-ratio:1; border:1px solid rgba(97,190,215,.25); transform:rotate(45deg); }
.hero-art img { position:relative; width:min(100%,470px); max-height:640px; object-fit:contain; filter:drop-shadow(0 26px 28px rgba(0,0,0,.48)); }
.band { background:var(--orange); color:#172124; }
.band .wrap { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:23px 0; }
.band strong { font-size:.92rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.band i { width:1px; height:25px; background:rgba(18,29,32,.28); }
.services { padding:105px 0 115px; background:#23282b; color:var(--cream); }
.section-intro { display:flex; justify-content:space-between; align-items:end; gap:48px; margin-bottom:42px; }
.section-intro h2 { max-width:630px; margin:0; }
.section-intro > p { max-width:340px; margin:0 0 6px; color:#c3cbcb; font-size:1.03rem; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #555e61; }
.service-card { min-height:355px; display:flex; flex-direction:column; padding:38px 33px; border-right:1px solid #555e61; }
.service-card:last-child { border-right:0; }
.service-num { color:#b7c1c3; font-size:.79rem; font-weight:900; letter-spacing:.12em; }
.service-mark { display:block; margin:25px 0 14px; color:var(--orange); font:900 3.4rem/.9 Impact,'Arial Narrow',sans-serif; }
.service-card:nth-child(3) .service-mark { color:var(--blue); }
.service-card h3 { margin-bottom:15px; }
.service-card p { max-width:300px; margin:0; color:#c2cbcc; font-size:.98rem; }
.story { background:var(--ink2); padding:106px 0; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.story h2 { max-width:610px; }
.story-lede { max-width:540px; color:#c3cbca; font-size:1.08rem; }
.story-aside { border-top:1px solid var(--line); }
.fact { display:grid; grid-template-columns:160px 1fr; align-items:center; gap:20px; padding:23px 0; border-bottom:1px solid var(--line); }
.fact strong { color:var(--orange); font:900 2.8rem/1 Impact,'Arial Narrow',sans-serif; text-transform:uppercase; white-space:nowrap; }
.fact span { color:#c5cecc; font-size:.97rem; }
.story-aside > p { max-width:500px; margin:26px 0 0; color:#c3cbca; }
.equipment { padding:95px 0; background:#202528; border-top:1px solid var(--line); }
.equipment-grid,.about-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; }
.equipment p:not(.eyebrow),.about p:not(.eyebrow) { max-width:530px; color:#d4dcda; font-size:1.08rem; }
.equipment-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:27px; }
.equipment-tags span { padding:7px 12px; border:1px solid rgba(97,190,215,.55); color:var(--blue); font-size:.78rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.about { padding:95px 0; background:#101416; border-top:1px solid var(--line); }
.about-grid > div:last-child { border-left:2px solid var(--orange); padding-left:30px; }
.about p:last-child { margin-bottom:0; }
.contact { background:#282d30; color:var(--cream); padding:100px 0; }
.contact-box { display:grid; grid-template-columns:1.12fr .88fr; background:#0e1214; color:#fff; box-shadow:18px 18px 0 var(--orange); }
.contact-copy { padding:68px 64px; }
.contact-copy h2 { font-size:clamp(3.4rem,5.5vw,6rem); }
.contact-copy > p:not(.eyebrow) { max-width:480px; color:#c5cecc; font-size:1.08rem; }
.contact-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
.contact-details { display:flex; flex-direction:column; justify-content:center; gap:29px; padding:68px 55px; background:#1b2124; }
.detail { padding-bottom:25px; border-bottom:1px solid var(--line); }
.detail:last-child { border:0; padding:0; }
.detail small { display:block; margin-bottom:8px; color:var(--orange); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.13em; }
.detail a,.detail span { font-size:1.15rem; font-weight:700; text-decoration:none; overflow-wrap:anywhere; }
.detail a:hover { text-decoration:underline; }
.site-footer { padding:34px 0; background:#080a0b; color:#adb8b7; font-size:.85rem; }
.site-footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.site-footer strong { color:#fff; text-transform:uppercase; letter-spacing:.08em; }
@media(max-width:1050px) { .site-nav { gap:17px; } .site-nav a { font-size:.72rem; } .hero h1 { font-size:clamp(4rem,7.2vw,7rem); } .story-grid,.equipment-grid,.about-grid { gap:50px; } .contact-copy,.contact-details { padding:50px 36px; } }
@media(max-width:850px) { .menu-button { display:block; } .site-nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 22px; background:var(--ink); border-bottom:1px solid var(--line); box-shadow:0 20px 35px rgba(0,0,0,.28); } .site-nav.open { display:flex; } .site-nav a:not(.nav-contact) { padding:15px 4px; border-bottom:1px solid var(--line); } .site-nav .nav-contact { margin-top:15px; text-align:center; } .hero-inner { min-height:610px; } .hero h1 { font-size:clamp(3.5rem,7.4vw,6rem); } .hero-art { margin-right:0; } .hero-lede { font-size:1.04rem; } .hero-tag { font-size:.68rem; } }
@media(max-width:680px) {
  .wrap { width:min(100% - 36px,1200px); }
  .topline { font-size:.65rem; letter-spacing:.05em; } .topline .wrap { padding:7px 0; } .topline span:last-child { display:none; }
  .header-inner { min-height:70px; } .brand-name { font-size:1.5rem; } .brand-name small { font-size:.57rem; }
  .hero-inner { display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:0; }
  .hero-content { padding:70px 0 22px; } .hero h1 { font-size:clamp(4rem,13.7vw,6.3rem); line-height:.95; }
  .hero-lede { max-width:530px; font-size:1rem; line-height:1.55; }
  .hero-tag { margin-top:34px; line-height:1.45; }
  .hero-art { height:400px; margin:0; overflow:hidden; } .hero-art::before { width:300px; } .hero-art img { width:min(100%,350px); max-height:390px; }
  .band .wrap { padding:18px 0; justify-content:center; flex-wrap:wrap; column-gap:17px; row-gap:7px; text-align:center; } .band strong { font-size:.72rem; } .band i { height:13px; }
  .services,.story,.equipment,.about,.contact { padding:73px 0; }
  .section-intro { display:block; margin-bottom:32px; } .section-intro > p { max-width:500px; margin-top:18px; }
  h2 { font-size:clamp(3rem,11vw,4.5rem); }
  .service-grid { grid-template-columns:1fr; } .service-card { min-height:0; padding:29px; border-right:0; border-bottom:1px solid #555e61; } .service-card:last-child { border-bottom:0; } .service-mark { margin:17px 0 12px; font-size:2.8rem; } .service-card h3 { font-size:1.8rem; }
  .story-grid,.equipment-grid,.about-grid,.contact-box { grid-template-columns:1fr; gap:30px; }
  .fact { grid-template-columns:130px 1fr; } .fact strong { font-size:2.35rem; }
  .about-grid > div:last-child { padding-left:20px; }
  .contact-box { gap:0; box-shadow:9px 9px 0 var(--orange); } .contact-copy { padding:39px 29px 25px; } .contact-details { padding:32px 29px 40px; } .contact-actions .button { width:100%; }
  .site-footer .wrap { align-items:start; flex-direction:column; gap:12px; }
}
@media(max-width:380px) { .brand-name { font-size:1.35rem; } .brand-name small { font-size:.5rem; } .hero-actions .button { width:100%; } .band i { display:none; } .band strong { width:100%; } .hero h1 { font-size:3.65rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

/* Portfolio context for the contact-free sample. */
.portfolio-notice{background:#61bed7;color:#0d1012;font-size:.75rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.portfolio-notice .wrap{display:flex;justify-content:space-between;gap:20px;padding:9px 0}.portfolio-notice a{text-decoration:underline;text-underline-offset:3px}@media(max-width:680px){.portfolio-notice .wrap{display:block}.portfolio-notice a{display:block;margin-top:5px}}