/* ============================================================ RedEagle Technologies — styles.css Static site. No build step. Drop into Netlify as-is. ============================================================ */ :root{ --ink:#0E1316; --ink-2:#11181C; --panel:#161D21; --panel-2:#1A2227; --steel:#27323A; --steel-2:#39474F; --bone:#E7E3DA; --muted:#8B959C; --muted-2:#5E696F; --red:#C8362C; --red-bright:#E04A3C; --brass:#B08A4F; --maxw:1180px; --nav-h:68px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:84px;} body{ margin:0; background:var(--ink); color:var(--bone); font-family:"Inter",system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* engineered backdrop */ body::before{ content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(120% 90% at 50% -10%, rgba(200,54,44,0.10), transparent 55%), radial-gradient(100% 80% at 80% 110%, rgba(176,138,79,0.05), transparent 50%), var(--ink); } body::after{ content:""; position:fixed; inset:0; z-index:-1; background-image: linear-gradient(rgba(57,71,79,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(57,71,79,0.05) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(100% 100% at 50% 30%, #000 40%, transparent 90%); -webkit-mask-image:radial-gradient(100% 100% at 50% 30%, #000 40%, transparent 90%); pointer-events:none; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} .center{text-align:center;} .mono{ font-family:"JetBrains Mono",monospace; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; font-size:11px; color:var(--muted); } .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--red);color:#fff;padding:12px 18px; font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase; } .skip-link:focus{left:12px;top:12px;} /* ---------- brand mark ---------- */ .mark{ width:34px;height:34px;flex:none;display:inline-block;position:relative; } /* Wordmark-tick fallback shown when no logo.png is present */ .mark-fallback{ width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center; border:1.5px solid var(--red);position:relative; } .mark-fallback::before{ content:"";width:11px;height:11px;background:var(--red); transform:rotate(45deg); } .mark-img{ width:34px;height:34px;flex:none;object-fit:contain;display:none; } /* When logo present, JS adds .has-logo to */ .has-logo .mark-img{display:block;} .has-logo .mark-fallback{display:none;} .brand{display:flex;align-items:center;gap:12px;} .brand-name{ font-family:"Saira Condensed",sans-serif; font-weight:700;font-size:20px;letter-spacing:0.06em; } .brand-name span{color:var(--red);} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px; font-family:"JetBrains Mono",monospace; font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; padding:12px 18px;border:1px solid var(--steel-2); color:var(--bone);background:transparent;cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; } .btn:hover{border-color:var(--red);color:#fff;transform:translateY(-1px);} .btn-primary{background:var(--red);border-color:var(--red);color:#fff;} .btn-primary:hover{background:var(--red-bright);border-color:var(--red-bright);} .btn .tick{width:6px;height:6px;background:currentColor;display:inline-block;} /* ---------- nav ---------- */ header.nav{ position:sticky;top:0;z-index:50; backdrop-filter:blur(10px); background:rgba(14,19,22,0.72); border-bottom:1px solid var(--steel); } .nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);} .nav-links{display:flex;align-items:center;gap:30px;} .nav-links a:not(.btn){ font-size:13px;color:var(--muted);letter-spacing:0.02em; transition:color .2s ease;position:relative; } .nav-links a:not(.btn):hover{color:var(--bone);} .nav-links a:not(.btn)::after{ content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--red); transition:width .25s ease; } .nav-links a:not(.btn):hover::after{width:100%;} .nav .btn{padding:10px 18px;} /* refined header */ header.nav{position:sticky;top:0;z-index:50;} .nav .mark, .nav .mark-img, .nav .mark-fallback{width:42px;height:42px;} .brand{gap:14px;} .brand-text{display:flex;flex-direction:column;gap:3px;line-height:1;} .brand-sub{ font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2); } .nav-right{display:flex;align-items:center;gap:22px;} .nav-status{ display:inline-flex;align-items:center;gap:8px; font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } .nav-status i{ width:7px;height:7px;border-radius:50%;background:var(--red);flex:none; box-shadow:0 0 0 0 rgba(200,54,44,.55);animation:navDot 2.4s ease-out infinite; } @keyframes navDot{ 0%{box-shadow:0 0 0 0 rgba(200,54,44,.55);} 70%{box-shadow:0 0 0 7px rgba(200,54,44,0);} 100%{box-shadow:0 0 0 0 rgba(200,54,44,0);} } /* thin accent line under the header */ header.nav::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(200,54,44,.55),transparent); } @media (max-width:720px){ .brand-sub,.nav-status{display:none;} } @media (max-width:520px){ .brand-name{font-size:16px;} .nav .mark,.nav .mark-img,.nav .mark-fallback{width:36px;height:36px;} } .menu-toggle{display:none;background:none;border:0;color:var(--bone);cursor:pointer;padding:6px;} /* scroll progress bar */ .scroll-progress{ position:fixed;top:0;left:0;height:2px;width:0; background:linear-gradient(90deg,var(--red),var(--red-bright)); z-index:60;transition:width .1s linear; } /* ---------- fullscreen video hero ---------- */ .hero-video{ position:relative;width:100%; height:calc(100svh - var(--nav-h)); min-height:480px; background:#000;overflow:hidden; } .hero-black{position:absolute;inset:0;background:#000;z-index:0;} .hero-video video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0; } .media-ph{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:var(--muted-2);text-align:center;padding:24px;z-index:0; font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase; background: repeating-linear-gradient(45deg, rgba(57,71,79,.06) 0 12px, transparent 12px 24px), var(--ink-2); } .media-ph small{display:block;margin-top:8px;color:var(--muted);letter-spacing:.04em;text-transform:none;font-size:11px;} .vcorner{position:absolute;width:30px;height:30px;border:2px solid var(--red);z-index:3;pointer-events:none;opacity:.9;} .vc-tl{top:16px;left:16px;border-right:0;border-bottom:0;} .vc-tr{top:16px;right:16px;border-left:0;border-bottom:0;} .vc-bl{bottom:16px;left:16px;border-right:0;border-top:0;} .vc-br{bottom:16px;right:16px;border-left:0;border-top:0;} .hv-scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(82% 72% at 50% 42%, rgba(5,8,10,.28), rgba(5,8,10,.72)), linear-gradient(180deg, rgba(14,19,22,.55), transparent 20%, transparent 64%, rgba(14,19,22,.95)); } .hv-inner{ position:absolute;inset:0;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:24px;padding:24px; } .hv-logo{width:min(220px,42vw);aspect-ratio:1;filter:drop-shadow(0 10px 34px rgba(0,0,0,.55));object-fit:contain;} .hv-logo-fallback{ font-family:"Saira Condensed",sans-serif;font-weight:700; font-size:clamp(40px,9vw,96px);letter-spacing:.04em;text-transform:uppercase;line-height:1; } .hv-logo-fallback span{color:var(--red);} .has-logo .hv-logo-fallback{display:none;} .hv-logo{display:none;} .has-logo .hv-logo{display:block;} .hv-tag{ font-family:"Saira Condensed",sans-serif;font-weight:700; font-size:clamp(28px,5.4vw,58px);line-height:0.98;letter-spacing:.01em; text-transform:uppercase;color:var(--bone);margin:0;max-width:18ch; } .hv-tag em{font-style:normal;color:var(--red);} .hv-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px;} .scroll-cue{ position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:9px; font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--muted); } .scroll-cue .bar{width:1px;height:30px;background:linear-gradient(var(--red),transparent); animation:cue 1.8s ease-in-out infinite;transform-origin:top;} @keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55);}50%{opacity:1;transform:scaleY(1);}} .sound-toggle{ position:absolute;right:20px;bottom:20px;z-index:4; width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--steel-2);background:rgba(14,19,22,.55); color:var(--bone);cursor:pointer;backdrop-filter:blur(6px); transition:border-color .2s ease,color .2s ease; } .sound-toggle:hover{border-color:var(--red);color:#fff;} .sound-toggle .on{display:none;} .sound-toggle:not(.muted) .on{display:block;} .sound-toggle:not(.muted) .off{display:none;} /* hide controls when there's no real video */ .no-video .sound-toggle{display:none;} /* ---------- call-to-action ---------- */ .btn-lg{padding:15px 28px;font-size:13px;} .cta-inline{margin-top:44px;display:flex;justify-content:center;} .cta{ padding:92px 0; background:radial-gradient(120% 120% at 50% 0%, rgba(200,54,44,0.09), transparent 62%); } .cta-inner{ max-width:740px;margin:0 auto;text-align:center; display:flex;flex-direction:column;align-items:center;gap:18px; } .cta-title{ font-family:"Saira Condensed",sans-serif;font-weight:700; font-size:clamp(26px,3.8vw,42px);line-height:1.04; text-transform:uppercase;letter-spacing:.02em;margin:0; } .cta-sub{margin:0;color:var(--muted);font-size:16px;max-width:560px;line-height:1.6;} /* ---------- section scaffolding ---------- */ .section{padding:96px 0;} .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:48px;} .sec-num{ font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600; color:var(--red);letter-spacing:0.1em; } h2{ font-family:"Saira Condensed",sans-serif;font-weight:600; font-size:clamp(28px,4vw,46px);line-height:1.02; text-transform:uppercase;letter-spacing:0.02em;margin:0; } .sec-head p{margin:0;color:var(--muted);max-width:none;font-size:15px;} /* ---------- intro / overview ---------- */ .intro{padding:96px 0 70px;} .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px;} .eyebrow .line{height:1px;width:46px;background:var(--steel-2);} h1.display{ font-family:"Saira Condensed",sans-serif;font-weight:700; font-size:clamp(40px,6.8vw,90px);line-height:0.96;letter-spacing:0.01em; text-transform:uppercase;margin:0 0 26px; } h1.display em{font-style:normal;color:var(--red);} .lede{font-size:clamp(17px,1.9vw,21px);color:var(--bone);max-width:660px;margin:0 0 18px;line-height:1.5;} .lede .sub{color:var(--muted);} .designation{ display:flex;flex-wrap:wrap;gap:10px 28px;margin:30px 0 38px; padding-top:18px;border-top:1px solid var(--steel); } .designation div{display:flex;flex-direction:column;gap:4px;} .designation .k{font-size:10px;} .designation .v{ font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600; letter-spacing:0.04em;color:var(--bone);text-transform:uppercase; } .designation .v .dot{color:var(--red);} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;} /* ---------- overview grid ---------- */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--steel);} .cell{ padding:34px 30px;border-right:1px solid var(--steel); position:relative;background:linear-gradient(180deg,rgba(22,29,33,0.5),transparent); } .cell:last-child{border-right:0;} .cell .idx{ font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted-2); letter-spacing:0.1em;margin-bottom:20px;display:block; } .cell h3{ font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:21px; text-transform:uppercase;letter-spacing:0.03em;margin:0 0 12px; } .cell p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;} .cell::before{ content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--red); transition:width .4s ease; } .cell:hover::before{width:100%;} /* ---------- feature split (image + copy) ---------- */ .feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border:1px solid var(--steel);} .feature.reverse{direction:rtl;} .feature.reverse > *{direction:ltr;} .feature-media{position:relative;min-height:380px;background:var(--ink-2);overflow:hidden;border-right:1px solid var(--steel);} .feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;} .feature-body{padding:46px 44px;display:flex;flex-direction:column;justify-content:center;} .feature-body h3{ font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:28px; text-transform:uppercase;letter-spacing:0.02em;margin:0 0 18px;line-height:1.05; } .feature-body p{color:var(--muted);font-size:15.5px;margin:0 0 16px;} .feature-body p strong{color:var(--bone);font-weight:600;} .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .tag{ font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);border:1px solid var(--steel);padding:6px 10px; } /* ---------- specs ---------- */ .specs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--steel);} .spec{padding:30px 26px;border-right:1px solid var(--steel);position:relative;} .spec:last-child{border-right:0;} .spec .k{font-size:10px;margin-bottom:10px;} .spec .v{ font-family:"Saira Condensed",sans-serif;font-weight:700;font-size:34px;line-height:1; color:var(--bone);letter-spacing:.01em; } .spec .v .accent{color:var(--brass);} .spec .d{color:var(--muted);font-size:13px;margin-top:10px;} /* ---------- timeline ---------- */ .timeline{position:relative;border-left:1px solid var(--steel);margin-left:8px;} .tl-item{position:relative;padding:0 0 40px 34px;} .tl-item:last-child{padding-bottom:0;} .tl-item::before{ content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px; background:var(--ink);border:2px solid var(--steel-2);border-radius:50%; } .tl-item.active::before{border-color:var(--red);background:var(--red);box-shadow:0 0 0 4px rgba(200,54,44,.15);} .tl-item .phase{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--red);text-transform:uppercase;} .tl-item h3{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:22px;text-transform:uppercase;margin:8px 0 8px;letter-spacing:.02em;} .tl-item p{margin:0;color:var(--muted);font-size:14.5px;max-width:560px;} /* ---------- program ---------- */ .program{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--steel);} .program-main{padding:46px 44px;border-right:1px solid var(--steel);} .program-main h3{ font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:30px; text-transform:uppercase;letter-spacing:0.02em;margin:0 0 20px;line-height:1.05; } .program-main p{color:var(--muted);font-size:15.5px;margin:0 0 16px;} .program-main p strong{color:var(--bone);font-weight:600;} .program-side{padding:44px;background:var(--panel);display:flex;flex-direction:column;justify-content:center;gap:22px;} .stat-row{border-bottom:1px solid var(--steel);padding-bottom:18px;} .stat-row:last-child{border-bottom:0;padding-bottom:0;} .stat-row .k{font-size:10px;margin-bottom:8px;} .stat-row .v{ font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:20px; text-transform:uppercase;letter-spacing:0.03em;color:var(--bone); } .stat-row .v .accent{color:var(--brass);} /* ---------- gallery ---------- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--steel);border:1px solid var(--steel);} .shot{position:relative;aspect-ratio:4/3;background:var(--ink-2);overflow:hidden;cursor:pointer;} .shot img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;transition:transform .5s ease;} .shot:hover img{transform:scale(1.05);} .shot figcaption{ position:absolute;left:0;right:0;bottom:0;padding:12px 14px;z-index:2; background:linear-gradient(180deg,transparent,rgba(5,8,10,.85)); font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone); } .shot .media-ph{font-size:11px;} /* lightbox */ .lightbox{ position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center; background:rgba(5,8,10,.92);padding:24px; } .lightbox.open{display:flex;} .lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border:1px solid var(--steel-2);} .lightbox-close{ position:absolute;top:18px;right:22px;width:44px;height:44px;border:1px solid var(--steel-2); background:rgba(14,19,22,.6);color:var(--bone);cursor:pointer;font-size:20px;line-height:1; } .lightbox-close:hover{border-color:var(--red);color:#fff;} /* ---------- faq ---------- */ .faq{border:1px solid var(--steel);} .faq-item{border-bottom:1px solid var(--steel);} .faq-item:last-child{border-bottom:0;} .faq-q{ width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--bone); padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px; font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:19px;text-transform:uppercase;letter-spacing:.02em; } .faq-q .pm{flex:none;width:18px;height:18px;position:relative;} .faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--red);transition:transform .25s ease;} .faq-q .pm::before{top:8px;left:0;width:18px;height:2px;} .faq-q .pm::after{left:8px;top:0;width:2px;height:18px;} .faq-item.open .pm::after{transform:scaleY(0);} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;} .faq-a-inner{padding:0 26px 24px;color:var(--muted);font-size:15px;max-width:760px;} /* ---------- partners statement ---------- */ .partners{text-align:center;} .partners .mono{margin-bottom:18px;display:block;} .partners .statement{ font-family:"Saira Condensed",sans-serif;font-weight:500; font-size:clamp(20px,2.6vw,30px);text-transform:uppercase;letter-spacing:0.03em; color:var(--bone);max-width:820px;margin:0 auto;line-height:1.2; } .partners .statement b{color:var(--red);font-weight:600;} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:0;border:1px solid var(--steel);transition:border-color .35s ease;} /* red pulse when "Request Information" is clicked */ @keyframes contactPulse{ 0%{box-shadow:0 0 0 0 rgba(200,54,44,0);} 45%{box-shadow:0 0 0 4px rgba(200,54,44,.45), 0 0 36px rgba(200,54,44,.38);} 100%{box-shadow:0 0 0 0 rgba(200,54,44,0);} } .contact-grid.flash{border-color:var(--red);animation:contactPulse 1.6s ease-in-out 1;} .contact-left{padding:46px 44px;border-right:1px solid var(--steel);} .contact-left h2{margin-bottom:20px;} .contact-left p{color:var(--muted);max-width:380px;margin:0 0 30px;} .direct{margin-top:30px;padding-top:26px;border-top:1px solid var(--steel);} .direct .k{font-size:10px;margin-bottom:10px;} .direct a{ font-family:"JetBrains Mono",monospace;font-size:16px;font-weight:600; color:var(--bone);letter-spacing:0.02em;border-bottom:1px solid var(--steel-2); padding-bottom:3px;transition:border-color .2s ease,color .2s ease; } .direct a:hover{color:#fff;border-color:var(--red);} .contact-form{padding:46px 44px;background:var(--panel);} .field{margin-bottom:20px;} .field label{ display:block;font-family:"JetBrains Mono",monospace;font-size:10px; letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px; } .field label .req{color:var(--red);} .field input,.field textarea{ width:100%;background:var(--ink-2);border:1px solid var(--steel); color:var(--bone);font-family:"Inter",sans-serif;font-size:15px; padding:13px 14px;transition:border-color .2s ease; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--red);} .field textarea{resize:vertical;min-height:120px;} .contact-form .btn-primary{width:100%;justify-content:center;padding:14px;} .form-note{font-size:12px;color:var(--muted-2);margin-top:16px;line-height:1.5;} .form-status{margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em;display:none;} .form-status.show{display:block;} .form-status.ok{color:#5fd08a;} .form-status.err{color:var(--red-bright);} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--steel);padding:42px 0 50px;} .foot-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;} .foot-brand{display:flex;align-items:center;gap:12px;} .foot-brand{align-items:center;} .foot-brand .mark, .foot-brand .mark-img, .foot-brand .mark-fallback{width:48px;height:48px;} .foot-brand .brand-name{font-size:25px;} .foot-meta{text-align:right;} .foot-meta .mono{display:block;line-height:1.9;} .foot-meta a.mono:hover{color:var(--bone);} .confidential{ margin-top:24px;padding-top:20px;border-top:1px solid var(--steel); font-size:11px;color:var(--muted-2);max-width:600px;line-height:1.6; } /* ---------- reveal animation ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} /* ---------- narrative / story (Why) ---------- */ .narrative{max-width:760px;} .narrative p{color:var(--muted);font-size:16px;margin:0 0 20px;line-height:1.7;} .narrative p:last-child{margin-bottom:0;} .narrative p strong{color:var(--bone);font-weight:600;} .narrative .lead-line{ font-family:"Saira Condensed",sans-serif;font-weight:600; font-size:clamp(22px,2.8vw,30px);line-height:1.2;letter-spacing:.01em; color:var(--bone);text-transform:none;margin-bottom:28px; } /* WHY section: center the heading and story */ #why .sec-head{align-items:center;text-align:center;} #why .narrative{margin-left:auto;margin-right:auto;text-align:center;} /* ---------- 3 alternating image rows (square + text) ---------- */ .img-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border:1px solid var(--steel);} .img-row + .img-row{border-top:0;} .img-square{ position:relative;margin:0;aspect-ratio:1/1;background:#000;overflow:hidden; border-right:1px solid var(--steel);cursor:default; } .img-square img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .6s ease;} .img-square[data-ready]{cursor:pointer;} .img-square[data-ready] img:hover{transform:scale(1.03);} .img-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:0;} .img-ph .mono{color:#2c373d;letter-spacing:.16em;} .img-text{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:14px;} .img-idx{color:var(--red);} .img-text h3{ font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:26px;line-height:1.05; text-transform:uppercase;letter-spacing:.02em;margin:0; } .img-text p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:46ch;} /* alternating: image on the right */ .img-row.reverse .img-square{order:2;border-right:0;border-left:1px solid var(--steel);} .img-row.reverse .img-text{order:1;} /* ---------- contact extras ---------- */ .contact-h{ font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:28px; text-transform:uppercase;letter-spacing:.02em;margin:0 0 16px; } .contact-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;} /* ---------- responsive ---------- */ @media (max-width:980px){ .feature{grid-template-columns:1fr;} .feature-media{border-right:0;border-bottom:1px solid var(--steel);min-height:280px;} .specs{grid-template-columns:repeat(2,1fr);} .spec:nth-child(2){border-right:0;} .spec:nth-child(1),.spec:nth-child(2){border-bottom:1px solid var(--steel);} } @media (max-width:760px){ .img-row{grid-template-columns:1fr;} .img-square{border-right:0;border-bottom:1px solid var(--steel);} .img-row.reverse .img-square{order:0;border-left:0;border-bottom:1px solid var(--steel);} .img-row.reverse .img-text{order:0;} } @media (max-width:880px){ .grid3{grid-template-columns:1fr;} .cell{border-right:0;border-bottom:1px solid var(--steel);} .cell:last-child{border-bottom:0;} .gallery{grid-template-columns:1fr;} .program{grid-template-columns:1fr;} .program-main{border-right:0;border-bottom:1px solid var(--steel);} .contact-grid{grid-template-columns:1fr;} .contact-left{border-right:0;border-bottom:1px solid var(--steel);} } @media (max-width:560px){ .hero-video{height:calc(100svh - 60px);} .scroll-cue{bottom:16px;} .specs{grid-template-columns:1fr;} .spec{border-right:0;border-bottom:1px solid var(--steel);} .spec:last-child{border-bottom:0;} .section{padding:72px 0;} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} .reveal{opacity:1;transform:none;} html{scroll-behavior:auto;} }