@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--ink:#2d2e30;--brand:#a73e22;--cream:#f5f4f2;--warm:#f0d8cf;--orange:#a73e22;--muted:#696b6d;--line:#dcdddc;--heading:Manrope,"Arial",sans-serif;--body:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;color:var(--ink);background:#fbfbfa;font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--heading);font-weight:500;letter-spacing:-.055em}
h2{font-size:clamp(35px,3.45vw,54px);line-height:1.16}
em{font-style:normal;color:#a73e22}
p{line-height:1.65}
img{max-width:100%;display:block}
button{color:inherit}
section{scroll-margin-top:20px}
.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#fbfbfa;border-bottom:1px solid var(--line);position:relative;z-index:10}
.brand{display:flex;gap:10px;font-family:var(--heading);font-weight:800;font-size:29px;letter-spacing:-1.5px;line-height:1}
.brand-light{font-weight:450}
.brand small{display:block;font:600 8px var(--body);letter-spacing:2.7px;margin-top:8px}
.brand-icon{display:flex;gap:4px;align-items:center;transform:skew(-21deg);padding:0 5px}
.brand-icon i{width:4px;background:var(--brand);height:29px}
.brand-icon i:nth-child(2){height:37px}
.header nav{display:flex;gap:30px;font-size:13px;font-weight:500}
.header nav a:hover{color:var(--orange)}
.nav-contact{border:1px solid var(--ink);border-radius:40px;padding:12px 20px;font-size:13px;display:flex;gap:25px;align-items:center}
.nav-contact:hover{background:var(--brand);color:white}
.menu-toggle{display:none}
.hero{padding:36px 5% 0;background:#f3f3f1}
.hero-top,.hero-copy,.section-label{display:flex;justify-content:space-between}
.eyebrow,.edition,.section-label,.visual-note,.prototype figcaption,.technical-drawing>span,.tech-category,.film-caption,.company-wordmark small{font-size:10px;font-weight:600;letter-spacing:1.6px}
.eyebrow{display:flex;align-items:center;gap:9px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;flex-shrink:0}
.edition{color:#717375}
.hero-copy{padding-top:32px;gap:6%;align-items:flex-end;position:relative;z-index:1}
.hero h1{font-size:clamp(42px,4.55vw,74px);line-height:1.1}
.hero-intro{width:30%;max-width:340px;padding-bottom:5px}
.hero-intro>p{font-size:14px;color:#626466;line-height:1.7}
.text-link{display:inline-flex;align-items:center;gap:28px;padding-bottom:8px;border-bottom:1px solid var(--ink);font-size:13px;font-weight:550;margin-top:22px}
.text-link span{font-size:21px}
.hero-visual{height:clamp(350px,36vw,570px);position:relative;margin:12px -5.56% 0;overflow:hidden;background:#efefed}
.hero-product{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;object-position:center 48%;transform:scale(1.04)}
.visual-note{position:absolute;bottom:29px;left:5%;font-size:8px;color:#696b6d}
.visual-note>span{font-weight:400}
.visual-note b{margin:0 11px}
.watch-pill{position:absolute;bottom:26px;right:5%;display:flex;align-items:center;gap:15px;border:1px solid #dededb;background:#fffffff2;border-radius:50px;padding:12px 22px 12px 12px;text-align:left;font-size:12px}
.play-mini{background:var(--brand);color:white;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;font-size:11px}
.watch-pill small{display:block;font-size:7px;letter-spacing:1.4px;margin-top:5px;color:#717375}
.watch-pill>span:last-child{font-size:20px;margin-left:16px}
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d5d6d5;padding:24px 0 26px;gap:22px}
.feature-strip a{font-size:12px;display:flex;gap:11px;align-items:center;border-right:1px solid #d5d6d5;padding-right:20px}
.feature-strip a:last-child{border:0;padding-right:0}
.feature-strip span{font-size:9px;color:#717375}
.feature-strip b{margin-left:auto;font-weight:400}
.section-pad{padding:75px 5% 85px}
.section-label{padding-bottom:29px;border-bottom:1px solid var(--line);font-size:9px}
.section-label span:last-child{color:#737577}
.architecture-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;align-items:center;margin-top:52px}
.section-intro{font-size:16px;margin-top:24px;max-width:440px}
.muted{color:var(--muted);font-size:14px;margin-top:18px;max-width:460px}
.prototype img{width:100%;aspect-ratio:1.2;object-fit:cover;object-position:58% center;border-radius:3px}
.prototype figcaption{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;margin-top:14px;color:var(--muted)}
.prototype figcaption .dot{width:5px;height:5px;margin-right:5px}
.technology{background:#292b2d;color:#fbfaf8}
.technology .section-label{border-color:#55575a}
.technology .section-label span:last-child{color:#c8c8c7}
.technology-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:44px 0}
.technology h2 em{color:var(--warm)}
.technology-heading>p{font-size:14px;color:#d1d1ce;max-width:290px}
.tech-layout{display:grid;grid-template-columns:1fr 1fr;gap:6%}
.tech-tabs{display:flex;flex-direction:column}
.tech-tabs button{display:flex;align-items:center;gap:20px;padding:29px 14px;background:transparent;border:0;border-top:1px solid #57595b;text-align:left;font-size:clamp(15px,1.55vw,23px);font-weight:400;letter-spacing:-.5px}
.tech-tabs button:last-child{border-bottom:1px solid #57595b}
.tech-tabs button>span{font-size:10px;letter-spacing:0;color:#c6c6c4}
.tech-tabs button>b{margin-left:auto;font-size:21px;font-weight:400;opacity:.45}
.tech-tabs button[aria-selected=true]{background:#a73e22;color:var(--ink);border-color:#a73e22;border-radius:2px}
.tech-tabs button[aria-selected=true]>span{color:#f4dbd2}
.tech-tabs button[aria-selected=true]>b{opacity:1}
.tech-panel{background:#343638;border:1px solid #57595b;border-radius:3px;padding:22px 30px 27px;display:flex;flex-direction:column;justify-content:space-between}
.technical-drawing{color:#d0d1d1}
.technical-drawing svg{width:100%;max-height:220px}
.drawing-grid{opacity:.12}
.drawing-accent{color:#e8a68f}
.technical-drawing>span{font-size:6px;letter-spacing:1.5px;color:#bbbdbd}
.tech-category{display:block;color:#e8b7a5;font-size:8px;margin-top:24px}
.tech-panel h3{font-size:28px;margin-top:8px;letter-spacing:-1px}
.tech-panel p{font-size:13px;color:#d5d5d3;margin-top:10px;max-width:420px}
.motion{background:#f0f0ee}
.motion-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:37px 0 33px}
.motion-heading p{font-size:13px;color:var(--muted);max-width:230px}
.film-preview{display:block;width:100%;padding:0;border:0;position:relative;overflow:hidden;border-radius:3px;background:#e5e5e2;aspect-ratio:2.2}
.film-preview img{width:100%;height:100%;object-fit:cover;object-position:center 47%;transition:transform .6s}
.film-preview:hover img{transform:scale(1.025)}
.film-shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,#191b1d99)}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;display:grid;place-items:center;border:1px solid #ffffff9c;border-radius:50%;background:#ffffffd9;color:var(--brand);padding-left:5px;font-size:20px}
.film-caption{position:absolute;bottom:24px;left:30px;right:30px;display:flex;justify-content:space-between;color:white;font-size:9px;letter-spacing:1.3px}
.film-caption b{margin-left:16px;font-weight:400}
.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:55px 0 5px;align-items:center}
.company-wordmark{font-family:var(--heading);font-size:clamp(38px,4.5vw,68px);font-weight:500;color:#a73e22;letter-spacing:-3px}
.company-wordmark>span{color:#7e7f7f;font-weight:400}
.company-wordmark small{display:block;letter-spacing:1.7px;color:#717375;margin-top:18px;font-size:8px}
.company h2{font-size:34px;margin-bottom:23px}
.company-grid p{font-size:14px;max-width:480px}
.contact{background:#eeedeb;display:flex;justify-content:space-between;align-items:center;padding-top:64px;padding-bottom:65px}
.contact .eyebrow{font-size:9px}
.contact h2{font-size:clamp(45px,5vw,74px);margin-top:23px}
.contact h2 em{color:#a73e22}
.contact p:last-child{font-size:14px;margin-top:24px;color:#626466}
.contact-circle{height:176px;width:176px;border:1px solid #a73e22;border-radius:50%;background:transparent;text-align:left;padding:36px;font-size:15px;line-height:1.45;margin-right:6%;transition:background .2s}
.contact-circle span{display:block;font-size:31px;margin-top:13px}
.contact-circle:hover{background:var(--brand);color:var(--warm)}
footer{display:flex;align-items:center;justify-content:space-between;padding:32px 5%;background:#292b2d;color:#f5f4f2;font-size:11px}
.footer-brand{font-family:var(--heading);font-size:22px;letter-spacing:-.6px}
.footer-brand span{display:block;font:500 6px var(--body);letter-spacing:2px;margin-top:5px}
footer p{font-size:10px;color:#c8c9c8}
footer>a:last-child{font-size:10px}
dialog{color:var(--ink);border:0;border-radius:8px;padding:25px;max-width:min(1000px,94vw);background:#fbfbfa;box-shadow:0 30px 100px #0007}
dialog::backdrop{background:#17191bdf;backdrop-filter:blur(7px)}
.dialog-close{display:block;margin:0 0 15px auto;background:transparent;border:1px solid #c2c3c2;border-radius:50%;height:35px;width:35px;font-size:17px}
dialog video{display:block;max-width:100%;width:900px;max-height:70vh;background:#000}
dialog>p:last-child{font-size:12px;margin-top:14px}
#inquiry-dialog{width:540px;padding:30px 35px;max-height:90vh}
#inquiry-dialog h2{font-size:32px;margin-top:16px}
.inquiry-note{font-size:13px;color:var(--muted);margin:16px 0 23px}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-size:12px;font-weight:500}
input,textarea{border:1px solid #c7c8c6;border-radius:3px;background:#fff;padding:10px;min-width:0;width:100%;font-size:14px;color:var(--ink)}
textarea{resize:vertical}
.solid-button{padding:14px 20px;background:var(--brand);color:white;border:0;border-radius:3px;display:flex;justify-content:space-between;font-size:13px}
#inquiry-status{font-size:12px;color:var(--muted)}
.contact-email{display:inline-block;margin-top:22px;border-bottom:1px solid currentColor;font-size:15px;padding-bottom:4px}
.inquiry-note a,.form-privacy a{text-decoration:underline;text-underline-offset:3px}
.form-privacy{font-size:11px;line-height:1.6;color:var(--muted)}
.form-honeypot{display:none}
.solid-button:disabled{opacity:.6;cursor:wait}
body.dialog-open{overflow:hidden}

@media(min-width:1600px){.hero,.section-pad,.header,footer{padding-left:max(5%,calc((100vw - 1440px)/2));padding-right:max(5%,calc((100vw - 1440px)/2))}
.hero-visual{margin-left:0;margin-right:0}
}
@media(max-width:1000px){.header nav{gap:20px;font-size:11px}
.brand{font-size:25px}
.hero-intro{width:32%}
.feature-strip{gap:13px}
.feature-strip a{font-size:10px;gap:8px;padding-right:12px}
.section-pad{padding-top:55px;padding-bottom:60px}
.tech-tabs button{padding:26px 10px;gap:12px}
.tech-panel{padding:18px 21px}
.hero-visual{height:380px}
.architecture-grid{gap:6%}
.section-intro{font-size:14px}
.company h2{font-size:29px}
}
@media(max-width:720px){html{scroll-padding-top:30px}
.header{height:80px;padding:0 6%}
.brand{font-size:25px}
.brand-icon i{height:24px}
.brand-icon i:nth-child(2){height:32px}
.nav-contact{display:none}
.menu-toggle{display:flex;flex-direction:column;gap:6px;padding:12px 4px;background:transparent;border:0}
.menu-toggle span{width:24px;height:1px;background:var(--ink)}
.header nav{display:none;position:absolute;top:80px;left:0;right:0;background:#fbfbfa;flex-direction:column;padding:25px 6%;font-size:15px;box-shadow:0 20px 30px #a73e2210}
.header nav.open{display:flex}
.hero{padding:25px 6% 0}
.edition{display:none}
.eyebrow{font-size:8px;letter-spacing:1.1px}
.hero-copy{padding-top:26px;display:block}
.hero h1{font-size:clamp(38px,7.5vw,54px);line-height:1.14}
.hero-intro{width:100%;max-width:330px;margin-top:21px}
.hero-intro>p{font-size:13px}
.text-link{font-size:12px;margin-top:14px}
.hero-visual{height:310px;margin:16px -6.82% 0}
.hero-product{transform:scale(1.18);height:250px;object-position:center}
.visual-note{font-size:6px;left:6%;bottom:19px;max-width:110px;line-height:1.8;letter-spacing:.8px}
.visual-note b{margin:0 5px}
.watch-pill{bottom:13px;right:6%;gap:9px;padding:8px 13px 8px 8px;font-size:10px}
.watch-pill small{font-size:6px;letter-spacing:.8px}
.watch-pill>span:last-child{margin-left:4px;font-size:17px}
.play-mini{width:31px;height:31px;font-size:9px}
.feature-strip{grid-template-columns:1fr 1fr;padding:18px 0;gap:18px 13px}
.feature-strip a{font-size:10px;min-height:20px}
.feature-strip a:nth-child(2){border:0;padding-right:0}
.section-pad{padding:42px 6% 46px}
.section-label{font-size:7px;letter-spacing:1.1px;padding-bottom:20px}
.section-label span:last-child{display:none}
.architecture-grid{grid-template-columns:1fr;gap:30px;margin-top:30px}
h2{font-size:35px}
.section-intro{margin-top:19px}
.prototype img{aspect-ratio:1.28}
.prototype figcaption{font-size:6px}
.prototype figcaption span:last-child{display:none}
.technology-heading{display:block;margin:29px 0}
.technology-heading>p{margin-top:20px;max-width:330px;font-size:13px}
.tech-layout{grid-template-columns:1fr;gap:22px}
.tech-tabs button{padding:20px 12px;font-size:17px}
.tech-panel{padding:18px 23px 25px;min-height:330px}
.technical-drawing svg{max-height:180px}
.tech-panel h3{font-size:27px}
.tech-panel p{font-size:13px}
.motion-heading{display:block;padding:26px 0 24px}
.motion-heading h2{font-size:32px}
.motion-heading p{margin-top:13px;max-width:none;font-size:12px}
.film-preview{aspect-ratio:1.42}
.film-preview img{object-fit:cover}
.film-play{width:56px;height:56px;font-size:15px}
.film-caption{left:16px;right:16px;bottom:15px;font-size:7px;letter-spacing:.8px}
.film-caption>span:first-child{display:none}
.film-caption>span:last-child{display:flex;justify-content:space-between;width:100%}
.company-grid{grid-template-columns:1fr;gap:35px;padding-top:30px}
.company-wordmark{font-size:48px}
.company-wordmark small{margin-top:10px}
.company h2{font-size:30px}
.contact{gap:20px;align-items:flex-end}
.contact h2{font-size:43px}
.contact p:last-child{font-size:12px;max-width:240px}
.contact-circle{width:100px;height:100px;flex-shrink:0;margin:0 0 9px;padding:17px;font-size:10px}
.contact-circle span{font-size:23px;margin-top:5px}
footer{padding:27px 6%;gap:20px;flex-wrap:wrap}
footer p{font-size:9px}
.footer-brand{font-size:19px}
footer>a:last-child{display:none}
#inquiry-dialog{padding:24px;max-width:93vw}
#inquiry-dialog h2{font-size:28px}
dialog{padding:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}

.prototype img{height:auto;aspect-ratio:1.2;object-fit:cover}
.film-preview{aspect-ratio:16/9}
.film-preview img{object-fit:contain}
@media(max-width:720px){.prototype img{aspect-ratio:1.28}
.film-preview{aspect-ratio:16/9}
}

@media(max-width:720px){.hero-product{transform:none}
.contact{align-items:center}
.contact h2{font-size:clamp(34px,9vw,43px)}
}


/* Brand palette sampled from the supplied ModuRack logo. */
.brand{color:#a73e22}

.brand-light{color:#7e7f7f}

.brand small{color:#696b6d}

.technology h2 em{color:#ebb4a0}

.tech-tabs button[aria-selected=true]{color:#fff}

.tech-tabs button[aria-selected=true]>span{color:#f4dbd2}

.contact-circle{background:#a73e22;color:#fff}

.contact-circle:hover{background:#823019;color:#fff}

.company-brand{max-width:460px;padding-right:20px}

.company-logo{width:100%;height:auto}

.company-brand>span{display:block;margin-top:23px;color:#696b6d;font-size:8px;font-weight:600;letter-spacing:1.7px}