@import "tailwindcss";

:root { --black:#070707; --black-soft:#101010; --yellow:#ffc400; --yellow-light:#ffdb54; --white:#f7f7f5; --gray:#b6b6b2; --line:rgba(255,255,255,.12); }
:root { --black:#002b67; --black-soft:#002b67; --yellow:#ffc400; --yellow-light:#ffdb54; --white:#f7f7f5; --gray:#b6b6b2; --line:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--black); color:var(--white); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { position:fixed; z-index:100; inset:0 0 auto; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,80px); background:rgba(5,5,5,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand img { width:76px; height:62px; }
.main-nav { display:flex; align-items:center; gap:clamp(20px,3vw,44px); }
.main-nav a { position:relative; color:#dededb; font-size:.95rem; font-weight:700; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--yellow); transition:right .25s ease; }
.main-nav a:hover::after { right:0; }
.menu-button { display:none; border:0; background:transparent; }
.hero { min-height:100svh; position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); align-items:center; gap:6vw; padding:130px clamp(24px,7vw,110px) 70px; background:radial-gradient(circle at 75% 50%, #002b67 0, #114b9c 28%, var(--black) 58%) /*radial-gradient(circle at 75% 50%,#2b2200 0,#0d0d0b 28%,var(--black) 58%)*/; }
.hero::before { content:""; position:absolute; z-index:-1; width:38vw; height:120vh; right:7%; top:-10%; border-left:1px solid rgba(255,196,0,.34); border-right:1px solid rgba(255,196,0,.13); transform:skewX(-16deg); }
.hero-content { max-width:760px; }
.eyebrow { margin:0 0 18px; color:var(--yellow); font-size:.82rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:24px; font-size: 55px; line-height:1.2; letter-spacing:-.055em; text-transform:uppercase; }
.hero-text { max-width:650px; color:var(--gray); font-size:clamp(1rem,1.5vw,1.24rem); line-height:1.75; }
.primary-button { display:inline-flex; margin-top:22px; padding:17px 24px; background:var(--yellow); color:#080808; font-weight:800; text-transform:uppercase; letter-spacing:.04em; transition:transform .2s ease,background .2s ease; }
.primary-button:hover { transform:translateY(-3px); background:var(--yellow-light); }
.hero-mark { position:relative; display:grid; place-items:center; width:min(34vw,430px); aspect-ratio:1; justify-self:center; border:2px solid var(--yellow); border-radius:50%; box-shadow:0 0 80px rgba(255,196,0,.18); }
.hero-mark img { z-index:2; width:60% }
.hero-mark span { color:#fff; font-size:clamp(7rem,16vw,14rem); font-weight:900; font-style:italic; letter-spacing:-.16em; opacity:.12; transform:translateX(-.08em); }
.section { padding:clamp(78px,10vw,140px) clamp(24px,7vw,110px); }
.section-heading { max-width:700px; }
.section-heading.centered { margin:0 auto 58px; text-align:center; }
.section h2 { margin-bottom:0; font-size: 45px; line-height:1.2; letter-spacing:-.045em; text-transform:uppercase; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,9vw,140px); background:var(--white); color:#111; }
.about-copy { align-self:end; }
.about-copy p { color:#484846; font-size:1.08rem; line-height:1.8; }
.values { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.values span { padding:10px 14px; border:1px solid #d9d9d4; font-size:.83rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.services { background:var(--black-soft); }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:310px; padding:32px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s ease,transform .25s ease; }
.service-card:hover { z-index:1; background:#171710; transform:translateY(-5px); }
.service-number { display:block; margin-bottom:70px; color:var(--yellow); font-weight:800; }
.service-card h3 { margin-bottom:14px; font-size:1.35rem; }
.service-card p { color:var(--gray); line-height:1.7; }
.gallery { background:#ecece8; color:#101010; }
.gallery-intro { max-width:520px; margin:26px 0 48px; color:#585854; font-size:1.05rem; line-height:1.7; }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.gallery-item { grid-column:span 3; margin:0; }
.gallery-placeholder { aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; background:linear-gradient(135deg,#161616,#292713); color:var(--yellow); }
.gallery-placeholder span { font-size:clamp(3rem,7vw,7rem); font-weight:900; opacity:.25; }
.gallery-placeholder small { color:#fff; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.gallery-item figcaption { padding:13px 0 26px; font-weight:800; }
.site-footer { display:grid; grid-template-columns:1.2fr .8fr; gap:50px; padding:62px clamp(24px,7vw,110px) 30px; border-top:3px solid var(--yellow); background:#050505; }
.site-footer img { width:130px; height:105px; margin-bottom:15px; }
.site-footer p { color:var(--gray); }
.site-footer nav { display:flex; justify-content:flex-end; align-items:start; gap:28px; padding-top:28px; font-weight:700; }
.site-footer nav a:hover { color:var(--yellow); }
.copyright { grid-column:1/-1; margin:30px 0 0!important; padding-top:22px; border-top:1px solid var(--line); font-size:.84rem; }
@media (max-width:900px) { .hero{grid-template-columns:1fr;min-height:auto;padding-top:150px}.hero-mark{width:min(72vw,360px);margin-top:30px}.about{grid-template-columns:1fr}.service-grid{grid-template-columns:repeat(2,1fr)}.gallery-item,.gallery-item-1,.gallery-item-5{grid-column:span 6}.gallery-item-1 .gallery-placeholder,.gallery-item-5 .gallery-placeholder{aspect-ratio:4/3} }
@media (max-width:680px) { .site-header{height:72px}.brand img{width:64px;height:52px}.menu-button{display:flex;flex-direction:column;gap:5px;padding:12px 0 12px 12px;cursor:pointer}.menu-button span{width:27px;height:2px;background:var(--yellow);transition:transform .2s ease,opacity .2s ease}.main-nav{position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:15px 24px 25px;background:#080808;border-bottom:1px solid var(--line)}.main-nav a{padding:15px 0;border-bottom:1px solid var(--line)}.main-nav.is-open{display:flex}.menu-button.is-open span:first-child{transform:translateY(7px) rotate(45deg)}.menu-button.is-open span:nth-child(2){opacity:0}.menu-button.is-open span:last-child{transform:translateY(-7px) rotate(-45deg)}h1, h2{font-size: 26px!important}.section{padding-block:75px}.service-grid{grid-template-columns:1fr}.service-card{min-height:auto}.service-number{margin-bottom:42px}.gallery-item,.gallery-item-1,.gallery-item-5{grid-column:1/-1}.site-footer{grid-template-columns:1fr;gap:18px}.site-footer nav{justify-content:flex-start;flex-wrap:wrap;padding-top:0} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important} }
