@font-face { font-family: "Eurostile Extended"; src: url("fonts/EurostileExtendedBlack.ttf") format("truetype"); font-weight: 900; }
@font-face { font-family: "Futura Book"; src: url("fonts/FuturaBook.otf") format("opentype"); font-weight: 400; }

:root { --cream:#f1efe4; --red:#c70003; --sky:#5ea4cc; --blue:#0019bd; --ink:#000; --display:"Eurostile Extended", sans-serif; --body:"Futura Book", sans-serif; --page:min(1528px, calc(100% - 80px)); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--cream); font-family:var(--body); } img { display:block; max-width:100%; } a { color:inherit; }
.project-header { position:absolute; top:0; z-index:2; width:100%; }.navbar { display:flex; justify-content:center; gap:clamp(34px, 6vw, 116px); padding-top:clamp(20px, 2vw, 38px); }.navbar a,.back-to-projects a { color:var(--red); text-decoration:none; font-size:clamp(16px, 1.65vw, 32px); }.navbar a:hover,.navbar a:focus-visible,.back-to-projects a:hover { text-decoration:underline; text-underline-offset:.2em; }

.project-cover { position:relative; height:min(56.25vw,1080px); min-height:650px; overflow:hidden; }.cover-product { position:absolute; top:40px; right:clamp(0px, 4vw, 90px); width:min(68vw,1062px); height:calc(100% - 40px); object-fit:contain; object-position:center; }.cover-content { position:absolute; left:max(7vw,40px); bottom:clamp(80px,9vw,170px); }.cover-content h1 { margin:0; color:var(--blue); font-family:var(--display); font-size:clamp(74px, 9vw, 150px); letter-spacing:-.08em; line-height:.8; }.cover-content p { margin:.75rem 0 0; color:var(--red); font-family:var(--display); font-size:clamp(18px,1.8vw,32px); letter-spacing:-.05em; }

.project-intro { background:var(--sky); padding:clamp(52px,4vw,76px) max(40px,7.5vw) clamp(55px,5vw,100px); }.intro-layout { position:relative; width:min(1632px,100%); min-height:850px; margin:auto; }.intro-copy { width:min(61%,1010px); color:var(--blue); font-size:clamp(17px,1.42vw,30px); line-height:1.33; letter-spacing:-.05em; }.intro-copy p { margin:0; }.brief { color:var(--red); padding-top:clamp(75px,8vw,155px); }.description { color:var(--cream); padding-top:clamp(70px,7vw,135px); }.intro-product { position:absolute; width:min(50%,836px); max-height:810px; right:-4%; bottom:0; object-fit:contain; object-position:right bottom; }

.content-section { width:var(--page); margin:auto; padding:clamp(45px,4vw,76px) 0; border-top:2px solid var(--blue); }.content-section h2 { margin:0 0 clamp(35px,3vw,58px); color:var(--red); font:900 clamp(22px,1.7vw,32px)/1.2 var(--display); letter-spacing:-.05em; }.components { border-top:0; }.components-layout { position:relative; min-height:800px; }.components-copy { width:min(59%,930px); font-size:clamp(16px,1.35vw,27px); line-height:1.25; letter-spacing:-.05em; }.components-copy p { margin:.1em 0; }.components-copy ol { margin:.1em 0; padding-left:1.35em; }.section-image { position:absolute; object-fit:contain; }.mechanism { bottom:0; left:0; width:min(55%,812px); max-height:420px; object-position:left bottom; }.exploded { top:-3rem; right:-5%; width:min(46%,638px); max-height:680px; object-position:right top; }
.renderings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2vw,38px); width:min(1300px,90%); margin:auto; }.renderings-grid img { width:100%; height:clamp(250px,26vw,500px); object-fit:contain; background:#f5f4ef; }.renderings-grid img:first-child { grid-row:span 2; height:100%; }.prototype-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(18px,2vw,38px); }.prototype-grid img { width:100%; aspect-ratio:1.35; object-fit:cover; }
.communication-layout { display:grid; grid-template-columns:.75fr 1.35fr .7fr; grid-template-rows:260px 320px; gap:clamp(16px,2.5vw,55px); align-items:center; }.communication-layout img { object-fit:contain; width:100%; height:100%; }.phone-left { grid-row:1 / 3; }.box { grid-column:2; grid-row:1; }.communication-copy { grid-column:3; grid-row:1; align-self:end; font-size:clamp(16px,1.35vw,27px); line-height:1.25; letter-spacing:-.05em; }.communication-copy p { margin:0 0 2em; }.communication-copy a { text-decoration-thickness:1px; text-underline-offset:.2em; }.logo { grid-column:2; grid-row:2; height:140px!important; align-self:start; }.rulebook { grid-column:3; grid-row:2; }.back-to-projects { padding:0 20px 80px; text-align:center; }

@media (max-width:700px) { :root { --page:calc(100% - 48px); }.navbar { gap:22px; }.project-cover { min-height:560px; height:100svh; max-height:760px; }.cover-product { top:55px; right:-14%; width:105%; height:58%; }.cover-content { left:24px; bottom:58px; }.intro-layout,.components-layout { min-height:0; display:flex; flex-direction:column; gap:35px; }.project-intro { padding:48px 24px 60px; }.intro-copy,.components-copy { width:100%; font-size:17px; }.brief,.description { padding-top:0; }.intro-product,.section-image { position:relative; inset:auto; width:100%; max-height:none; }.intro-product { order:-1; height:390px; }.mechanism,.exploded { height:320px; }.content-section { padding:48px 0; }.renderings-grid,.prototype-grid { grid-template-columns:1fr; width:100%; }.renderings-grid img,.renderings-grid img:first-child { height:310px; }.prototype-grid img { aspect-ratio:1.25; }.communication-layout { grid-template-columns:1fr; grid-template-rows:auto; gap:30px; }.communication-layout > * { grid-column:auto!important; grid-row:auto!important; }.phone-left { height:360px!important; }.box { height:280px!important; }.communication-copy { font-size:17px; }.logo { height:110px!important; }.rulebook { height:300px!important; }.back-to-projects { padding-bottom:60px; } }

@media (min-width:701px) {
  .cover-product{top:16px;right:clamp(0px,1vw,24px);width:min(79vw,1280px);height:calc(100% - 16px)}
  .intro-layout{min-height:720px}.intro-product{height:100%;max-height:none;right:calc(-1 * max(40px,7.5vw))}
  .exploded{right:0}.renderings-grid{width:min(1300px,100%)}.renderings-grid img,.renderings-grid img:first-child{height:auto;aspect-ratio:4/3;object-fit:cover;background:transparent}.renderings-grid img:first-child{grid-row:auto}
  .prototype-grid{align-items:center}.prototype-grid img{height:clamp(330px,34vw,520px);aspect-ratio:auto;object-fit:contain}
}
@media (min-width:901px){.project-intro{height:1080px}.intro-layout{height:928px;min-height:0}.intro-copy,.brief,.description{color:var(--cream)}.intro-product{height:100%;object-position:right bottom}.exploded{width:min(50%,700px)} }
@media (min-width:701px) and (max-width:900px){.components-layout{align-items:center}.mechanism{align-self:center;margin-top:-20px}.exploded{align-self:center;right:auto}}
@media(min-width:701px){.project-cover{height:min(56.25vw,1080px);max-height:1080px}.project-intro{max-height:1080px}.intro-copy,.brief,.description{color:var(--cream)}.intro-product{top:0;bottom:0;height:100%;max-height:none}.components-layout{min-height:760px}.exploded{width:min(53%,740px);right:2%}}
@media(min-width:701px) and (max-width:900px){.intro-copy{width:47%}.intro-product{width:48%;right:0}.components-layout{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.components-copy{grid-column:1;width:100%}.exploded{position:relative;grid-column:2;grid-row:1 / span 2;top:auto;right:auto;width:100%;height:auto}.mechanism{position:relative;grid-column:1;width:100%;height:auto;bottom:auto}}
@media(max-width:700px){.intro-copy,.brief,.description{color:var(--cream)}.intro-product{margin:0 auto;height:360px;align-self:center}.components-layout{align-items:center}.exploded{width:min(100%,520px);margin:0 auto;order:3;object-position:center}.mechanism{order:2;margin-top:0}.components-copy{order:1}}
@media(min-width:701px){.intro-layout{display:flex;align-items:center}.intro-copy{position:relative;z-index:1}.intro-product{top:50%;bottom:auto;transform:translateY(-50%)}}
@media(max-width:700px){.intro-copy p+p{margin-top:42px}.intro-product{margin:12px auto 0}}
@media(max-width:700px){.cover-product{left:50%;right:auto;transform:translateX(-50%);width:100%;object-position:center}}

/* =========================================================
   RESPONSIVE CONSISTENCY OVERRIDES
   ========================================================= */

@media (min-width: 901px) {
    .project-intro {
        height: 1080px;
        min-height: 0;
    }

    .intro-layout {
        height: 928px;
        min-height: 0;
    }

    .intro-copy,
    .brief,
    .description {
        color: var(--cream);
    }
}

@media (max-width: 900px) {
    .intro-copy,
    .brief,
    .description {
        color: var(--cream);
    }
}