/* ─── Reset & Base ─── */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: #0A0F1E; font-family: 'DM Sans', sans-serif; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Barlow Condensed', sans-serif; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; border: none; background: none; outline: none; } button { cursor: pointer; } ul { list-style: none; } /* ─── CSS Variables ─── */:root { --navy: #0A0F1E; --navy-light: #111827; --steel: #1E2A3A; --red: #E02020; --red-dark: #B01818; --white: #ffffff; } /* ─── Scrollbar ─── */::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--navy); } ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; } /* ─── Utilities ─── */.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container {  padding: 0 1.5rem; } } @media (min-width: 1024px) { .container {  padding: 0 2rem; } } .font-display { font-family: 'Barlow Condensed', sans-serif; } .font-mono { font-family: 'JetBrains Mono', monospace; } .uppercase { text-transform: uppercase; } .text-red { color: var(--red); } .grid-texture { background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 60px 60px; } /* ─── Clip Path (logo shape) ─── */.clip-logo { clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); } /* ─── Animations ─── */@keyframes fadeUp { from {  opacity: 0;  transform: translateY(24px); }  to {  opacity: 1;  transform: translateY(0); } } @keyframes bounce { 0%, 100% {  transform: translateY(-25%);  animation-timing-function: cubic-bezier(.8,0,1,1); }  50% {  transform: none;  animation-timing-function: cubic-bezier(0,0,.2,1); } } .animate-fade-up { animation: fadeUp .6s ease forwards; } .animate-bounce { animation: bounce 1s infinite; } /* ────────────────────────────────────────────
       NAV
    ──────────────────────────────────────────── */#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1rem 0; transition: all .5s; } #navbar.scrolled { background: rgba(10,15,30,.95); backdrop-filter: blur(12px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); border-bottom: 1px solid rgba(255,255,255,.05); padding: .75rem 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: .625rem; } .nav-logo-icon { width: 2.75rem; height: 2.75rem; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border-radius: 2px; } .nav-logo-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-logo-text .name { font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; line-height: 1; } .nav-logo-text .sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); line-height: 1; } .nav-links { display: none; align-items: center; gap: 1.5rem; } @media (min-width: 1024px) { .nav-links {  display: flex; } } .nav-link { position: relative; font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: color .2s; padding-bottom: .25rem; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--red); transition: width .3s; } .nav-link:hover { color: #fff; } .nav-link:hover::after { width: 1rem; } .nav-link[aria-current="page"] { color: #fff; } .nav-link[aria-current="page"]::after { width: 1rem; } .nav-badge { display: flex; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,.2); padding: .25rem .625rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,.6); } .nav-badge .dot { width: .5rem; height: .5rem; background: var(--red); border-radius: 50%; } .nav-cta { display: none; align-items: center; gap: .5rem; background: var(--red); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .625rem 1.25rem; transition: background .2s, box-shadow .2s, transform .2s; } @media (min-width: 768px) { .nav-cta {  display: flex; } } .nav-cta:hover { background: var(--red-dark); box-shadow: 0 10px 15px -3px rgba(224,32,32,.3); transform: translateY(-2px); } .nav-cta svg { width: 1rem; height: 1rem; } /* Mobile menu toggle */.nav-hamburger { display: flex; flex-direction: column; gap: 5px; width: 2rem; padding: .25rem; cursor: pointer; } @media (min-width: 1024px) { .nav-hamburger {  display: none; } } .nav-hamburger span { display: block; height: 1px; background: rgba(255,255,255,.7); transition: all .3s; } .mobile-menu { overflow: hidden; max-height: 0; opacity: 0; background: rgba(10,15,30,.98); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.05); transition: max-height .4s ease, opacity .4s ease; } .mobile-menu.open { max-height: 100vh; opacity: 1; } .mobile-menu-inner { padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: .25rem; } .mobile-nav-link { display: block; padding: .75rem 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.05); transition: color .2s; } .mobile-nav-link:hover { color: #fff; } .mobile-nav-link[aria-current="page"] { color: #fff; } .mobile-cta { display: block; margin-top: 1rem; text-align: center; background: var(--red); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .75rem 1.5rem; } /* ────────────────────────────────────────────
       HERO
    ──────────────────────────────────────────── */#home { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: var(--navy); } .hero-bg .grid-texture { position: absolute; inset: 0; } .hero-bg .grad1 { position: absolute; inset: 0; background: linear-gradient(to bottom right, var(--navy), var(--steel), var(--navy)); } .hero-bg .orb1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 500px; background: rgba(224,32,32,.05); border-radius: 50%; filter: blur(120px); } .hero-bg .orb2 { position: absolute; top: 33%; right: 25%; width: 600px; height: 600px; background: rgba(30,42,58,.2); border-radius: 50%; filter: blur(80px); } .hero-bg .grad2 { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,15,30,.7), rgba(10,15,30,.5), var(--navy)); } .hero-stripe { position: absolute; top: 0; right: 0; width: 1px; height: 70vh; background: linear-gradient(to bottom, var(--red), rgba(224,32,32,.3), transparent); } .hero-stripe-h { position: absolute; top: 5rem; right: 0; width: 10rem; height: 1px; background: linear-gradient(to left, var(--red), transparent); } .hero-content { position: relative; z-index: 1; padding: 8rem 0 6rem; } .hero-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; animation: fadeUp .6s ease forwards; animation-delay: .1s; opacity: 0; } .hero-eyebrow .line { width: 2.5rem; height: 1px; background: var(--red); } .hero-eyebrow .label { font-family: 'JetBrains Mono', monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } .hero-eyebrow .badge { display: flex; align-items: center; gap: .375rem; border: 1px solid rgba(255,255,255,.2); padding: .125rem .5rem; } .hero-eyebrow .badge .dot { width: .375rem; height: .375rem; background: var(--red); border-radius: 50%; } .hero-eyebrow .badge span { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: .1em; } .hero-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; line-height: .92; margin-bottom: 1.5rem; animation: fadeUp .6s ease forwards; animation-delay: .2s; opacity: 0; } .hero-title .line1 { display: block; font-size: clamp(3rem, 8vw, 8rem); color: rgba(255,255,255,.9); } .hero-title .line2 { display: block; font-size: clamp(3rem, 8vw, 8rem); color: var(--red); } .hero-title .line3 { display: block; font-size: clamp(3rem, 8vw, 8rem); color: rgba(255,255,255,.9); } .hero-subtitle { font-size: 1rem; color: rgba(255,255,255,.6); max-width: 42rem; margin-bottom: .75rem; line-height: 1.625; animation: fadeUp .6s ease forwards; animation-delay: .35s; opacity: 0; } .hero-subtitle2 { font-size: .875rem; color: rgba(255,255,255,.4); max-width: 36rem; margin-bottom: 2.5rem; line-height: 1.625; animation: fadeUp .6s ease forwards; animation-delay: .45s; opacity: 0; } @media (min-width: 640px) { .hero-subtitle {  font-size: 1.125rem; } } .hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 4rem; animation: fadeUp .6s ease forwards; animation-delay: .55s; opacity: 0; } .btn-primary { display: flex; align-items: center; gap: .75rem; background: var(--red); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .875rem 2rem; transition: background .3s, box-shadow .3s, transform .3s; } .btn-primary:hover { background: var(--red-dark); box-shadow: 0 20px 25px -5px rgba(224,32,32,.4); transform: translateY(-4px); } .btn-primary svg { width: 1.25rem; height: 1.25rem; } .btn-secondary { display: flex; align-items: center; gap: .75rem; border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .875rem 2rem; backdrop-filter: blur(4px); background: rgba(255,255,255,.05); transition: border-color .2s, color .2s, background .2s; } .btn-secondary:hover { border-color: rgba(224,32,32,.5); color: #fff; background: rgba(224,32,32,.1); } .btn-secondary svg { width: 1.25rem; height: 1.25rem; } .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; animation: fadeUp .6s ease forwards; animation-delay: .7s; opacity: 0; } @media (min-width: 640px) { .hero-stats {  grid-template-columns: repeat(4, 1fr); } } .hero-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: .75rem 1rem; display: flex; align-items: center; gap: .625rem; } .hero-stat svg { width: 1rem; height: 1rem; color: var(--red); flex-shrink: 0; } .hero-stat span { font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.7); } /* ────────────────────────────────────────────
       SECTION LABEL (eyebrow chip)
    ──────────────────────────────────────────── */.section-label { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(224,32,32,.4); padding: .25rem .75rem; margin-bottom: 1.5rem; } .section-label .dot { width: .375rem; height: .375rem; background: var(--red); border-radius: 50%; } .section-label span { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--red); } /* ────────────────────────────────────────────
       SERVICES
    ──────────────────────────────────────────── */#services { position: relative; padding: 6rem 0; overflow: hidden; } .services-bg-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 400px; background: rgba(224,32,32,.03); border-radius: 50%; filter: blur(100px); } .services-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; } @media (min-width: 1024px) { .services-header {  flex-direction: row;  align-items: flex-end;  justify-content: space-between; } } .services-title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; } .services-desc { max-width: 32rem; font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.625; } @media (min-width: 1024px) { .services-desc {  text-align: right; } } .services-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .services-grid {  grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services-grid {  grid-template-columns: repeat(4, 1fr); } } .service-card { position: relative; display: flex; flex-direction: column; background: var(--navy-light); border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: border-color .5s, box-shadow .3s, transform .3s; } .service-card:hover { border-color: rgba(224,32,32,.3); box-shadow: 0 25px 50px -12px rgba(224,32,32,.1); transform: translateY(-4px); } .service-card-img { position: relative; aspect-ratio: 4/3; overflow: hidden; } .service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .service-card:hover .service-card-img img { transform: scale(1.05); } .service-card-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, rgba(10,15,30,.8)); } .service-card-img-placeholder { position: absolute; inset: 0; background: var(--steel); display: flex; align-items: center; justify-content: center; } .service-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0); transition: transform .5s; } .service-card:hover .service-card-accent { transform: scaleX(1); } .service-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .75rem; } .service-card-icon { width: 2.5rem; height: 2.5rem; background: rgba(224,32,32,.1); border: 1px solid rgba(224,32,32,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .service-card-icon svg { width: 1.25rem; height: 1.25rem; color: var(--red); } .service-card-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--red); } .service-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.2; } .service-card-text { font-size: .8125rem; color: rgba(255,255,255,.5); line-height: 1.625; flex: 1; } .service-card-footer { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,.05); } .service-card-footer svg { width: 1rem; height: 1rem; color: var(--red); } .service-card-footer a { font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .2s; } .service-card:hover .service-card-footer a { color: #fff; } /* ────────────────────────────────────────────
       MEDIA
    ──────────────────────────────────────────── */#media { position: relative; padding: 6rem 0; background: var(--navy-light); overflow: hidden; } .media-tabs { display: flex; gap: .5rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); } .media-tab { font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); padding: .75rem 1.25rem; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; cursor: pointer; } .media-tab.active { color: #fff; border-bottom-color: var(--red); } .media-tab:hover:not(.active) { color: rgba(255,255,255,.7); } .media-panel { display: none; } .media-panel.active { display: block; } .media-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .media-grid {  grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .media-grid {  grid-template-columns: repeat(4, 1fr); } } .video-card { position: relative; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,.1); transition: border-color .3s; } .video-card:hover { border-color: rgba(224,32,32,.4); } .video-card-thumb { position: relative; aspect-ratio: 16/9; background: var(--steel); } .video-card-thumb .grid-texture { position: absolute; inset: 0; opacity: .5; } .video-card-corner { position: absolute; width: 1.5rem; height: 1.5rem; } .video-card-corner.tl { top: 0; left: 0; border-top: 2px solid rgba(224,32,32,.5); border-left: 2px solid rgba(224,32,32,.5); } .video-card-corner.tr { top: 0; right: 0; border-top: 2px solid rgba(224,32,32,.5); border-right: 2px solid rgba(224,32,32,.5); } .video-card-corner.bl { bottom: 0; left: 0; border-bottom: 2px solid rgba(224,32,32,.5); border-left: 2px solid rgba(224,32,32,.5); } .video-card-corner.br { bottom: 0; right: 0; border-bottom: 2px solid rgba(224,32,32,.5); border-right: 2px solid rgba(224,32,32,.5); } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem; background: rgba(224,32,32,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .video-play-btn svg { width: 1.25rem; height: 1.25rem; fill: #fff; margin-left: .125rem; } .video-card-info { padding: .875rem 1rem; } .video-card-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--red); letter-spacing: .1em; } .video-card-label { font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,.8); margin: .25rem 0; } .video-card-dur { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .05em; } .image-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .image-grid {  grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .image-grid {  grid-template-columns: repeat(2, 1fr); } } .img-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); transition: border-color .3s; } .img-card:hover { border-color: rgba(224,32,32,.3); } .img-card:first-child { grid-column: 1 / -1; } @media (min-width: 640px) { .img-card:first-child {  aspect-ratio: 16/7; } } .img-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .img-card:hover img { transform: scale(1.03); } .img-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,15,30,.9), transparent 50%); opacity: 0; transition: opacity .3s; } .img-card:hover .img-card-overlay { opacity: 1; } .img-card-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; transform: translateY(100%); transition: transform .3s; } .img-card:hover .img-card-caption { transform: translateY(0); } .img-card-caption span { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); } .img-placeholder { width: 100%; aspect-ratio: 4/3; background: var(--steel); display: flex; align-items: center; justify-content: center; } .img-placeholder svg { width: 3rem; height: 3rem; color: rgba(255,255,255,.2); } /* ────────────────────────────────────────────
       PROCESS
    ──────────────────────────────────────────── */#process { position: relative; padding: 6rem 0; overflow: hidden; } .process-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; } @media (min-width: 640px) { .process-grid {  grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .process-grid {  grid-template-columns: repeat(4, 1fr); } } .process-card { position: relative; padding: 1.5rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); transition: border-color .3s, background .3s; } .process-card:hover { border-color: rgba(224,32,32,.3); background: rgba(224,32,32,.03); } .process-num { font-family: 'Barlow Condensed', sans-serif; font-size: 5.75rem; font-weight: 900; color: rgba(224,32,32,.15); line-height: -4px; margin-bottom: -.5rem; } .process-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; background: rgba(224,32,32,.1); border: 1px solid rgba(224,32,32,.2); display: flex; align-items: center; justify-content: center; } .process-icon svg { width: 1.125rem; height: 1.125rem; color: var(--red); } .process-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: .5rem; } .process-text { font-size: .8125rem; color: rgba(255,255,255,.45); line-height: 1.625; } /* connector line between steps */.process-connector { display: none; position: absolute; top: 50%; right: -1px; width: 1.5rem; height: 1px; background: rgba(224,32,32,.3); } @media (min-width: 1024px) { .process-card:not(:last-child) .process-connector {  display: block; } } /* ────────────────────────────────────────────
       CTA BAND
    ──────────────────────────────────────────── */.cta-band { position: relative; padding: 6rem 0; background: var(--red); overflow: hidden; } .cta-band .grid-texture { position: absolute; inset: 0; opacity: .1; } .cta-band-inner { position: relative; text-align: center; } .cta-band-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 1.5rem; } .cta-band-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 1.5rem; max-width: 48rem; margin-left: auto; margin-right: auto; } .cta-band-text { font-size: 1rem; color: rgba(255,255,255,.7); max-width: 36rem; margin: 0 auto 2.5rem; line-height: 1.625; } .cta-band-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .btn-white { display: flex; align-items: center; gap: .5rem; background: #fff; color: var(--red); font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .875rem 2rem; transition: background .2s, box-shadow .2s, transform .2s; } .btn-white:hover { background: rgba(255,255,255,.9); box-shadow: 0 20px 25px -5px rgba(0,0,0,.3); transform: translateY(-2px); } .btn-white svg { width: 1.125rem; height: 1.125rem; } .btn-outline-white { display: flex; align-items: center; gap: .5rem; border: 2px solid rgba(255,255,255,.5); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .875rem 2rem; transition: border-color .2s, background .2s; } .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.1); } /* ────────────────────────────────────────────
       ABOUT
    ──────────────────────────────────────────── */#about { position: relative; padding: 6rem 0; background: var(--navy-light); overflow: hidden; } .about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; } @media (min-width: 1024px) { .about-grid {  grid-template-columns: repeat(2, 1fr); } } .about-img-wrap { position: relative; order: 2; } @media (min-width: 1024px) { .about-img-wrap {  order: 1; } } .about-img { width: 100%; aspect-ratio: 4/3; background: var(--steel); box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); } .about-img img { width: 100%; height: 100%; object-fit: cover; } .about-img-badge { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--navy); border: 1px solid rgba(255,255,255,.1); padding: 1.25rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.5); } .about-img-badge .big { font-family: 'Barlow Condensed', sans-serif; font-size: 1.875rem; font-weight: 900; color: var(--red); line-height: 1; } .about-img-badge .small { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: .25rem; } .about-content { order: 1; } @media (min-width: 1024px) { .about-content {  order: 2; } } .about-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 1.5rem; } .about-paras { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; } .about-paras p { font-size: .875rem; color: rgba(255,255,255,.6); line-height: 1.625; } .about-features { display: flex; flex-direction: column; gap: 1rem; } .about-feature { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); transition: border-color .3s, background .3s; } .about-feature:hover { border-color: rgba(224,32,32,.3); background: rgba(224,32,32,.05); } .about-feature-icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; background: rgba(224,32,32,.1); border: 1px solid rgba(224,32,32,.2); display: flex; align-items: center; justify-content: center; } .about-feature-icon svg { width: 1rem; height: 1rem; color: var(--red); } .about-feature-title { font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; margin-bottom: .125rem; } .about-feature-desc { font-size: .75rem; color: rgba(255,255,255,.45); line-height: 1.5; } /* ────────────────────────────────────────────
       CONTACT
    ──────────────────────────────────────────── */#contact { position: relative; padding: 6rem 0; overflow: hidden; } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; } @media (min-width: 1024px) { .contact-grid {  grid-template-columns: 5fr 7fr; } } .contact-info-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 1rem; } .contact-info-text { font-size: .9375rem; color: rgba(255,255,255,.6); max-width: 28rem; line-height: 1.625; margin-bottom: 2.5rem; } .contact-details { display: flex; flex-direction: column; gap: 1rem; } .contact-detail { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .contact-detail-icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; background: rgba(224,32,32,.1); border: 1px solid rgba(224,32,32,.2); display: flex; align-items: center; justify-content: center; } .contact-detail-icon svg { width: 1rem; height: 1rem; color: var(--red); } .contact-detail-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: .125rem; } .contact-detail-val { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,.8); } .contact-form-wrap { background: var(--navy-light); border: 1px solid rgba(255,255,255,.08); padding: 2rem; } .contact-form-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 1.5rem; } .form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .form-row-2 {  grid-template-columns: 1fr 1fr; } } .form-group { display: flex; flex-direction: column; gap: .375rem; } .form-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); } .form-input, .form-textarea { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; padding: .75rem 1rem; font-size: .875rem; transition: border-color .2s; resize: none; } .form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,.2); } .form-input:focus, .form-textarea:focus { border-color: var(--red); outline: none; } .form-textarea { height: 7rem; } .form-select { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7); padding: .75rem 1rem; font-size: .875rem; transition: border-color .2s; width: 100%; -webkit-appearance: none; } .form-select option { background: var(--navy-light); } .form-submit { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: var(--red); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1rem; margin-top: .5rem; transition: background .2s, box-shadow .2s, transform .2s; } .form-submit:hover { background: var(--red-dark); box-shadow: 0 10px 15px -3px rgba(224,32,32,.4); transform: translateY(-1px); } .form-submit svg { width: 1.125rem; height: 1.125rem; } /* ────────────────────────────────────────────
       FOOTER
    ──────────────────────────────────────────── */footer { position: relative; background: var(--navy); border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; } .footer-top-bar { width: 100%; height: 4px; background: var(--red); } .footer-inner { position: relative; padding: 3rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; } @media (min-width: 768px) { .footer-grid {  grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .footer-grid {  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.1fr; } } .footer-brand { } .footer-logo { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; } .footer-logo-icon { width: 2.75rem; height: 2.75rem; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px; } .footer-logo-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .footer-logo-text .name { font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; line-height: 1; } .footer-logo-text .sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); line-height: 1; } .footer-tagline { font-size: .75rem; color: rgba(255,255,255,.4); line-height: 1.625; margin-bottom: 1.25rem; max-width: 20rem; } .footer-location { display: flex; align-items: center; gap: .375rem; color: rgba(255,255,255,.4); } .footer-location svg { width: .6875rem; height: .6875rem; } .footer-location span { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .footer-col-title { font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 1.25rem; } .footer-links { display: flex; flex-direction: column; gap: .75rem; } .footer-link { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: rgba(255,255,255,.5); transition: color .2s; } .footer-link:hover { color: #fff; } .footer-link .tick { width: .75rem; height: 1px; background: rgba(224,32,32,.5); flex-shrink: 0; transition: width .3s; } .footer-link:hover .tick { width: 1.25rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; } @media (min-width: 640px) { .footer-bottom {  flex-direction: row;  justify-content: space-between;  text-align: left; } } .footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,.25); letter-spacing: .05em; } .footer-bottom-links { display: flex; gap: 1.5rem; } .footer-bottom-links a { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .05em; transition: color .2s; } .footer-bottom-links a:hover { color: rgba(255,255,255,.6); } /* ─── Inline SVG icons (used inline as <svg>) ─── */.icon { display: inline-block; vertical-align: middle; }

/* ════════════════════════════════════════════
   SUBPAGE HERO (blog, projects, articles)
   ════════════════════════════════════════════ */
.subpage-hero { position: relative; padding: 9rem 0 4rem; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.06); }
@media (min-width: 1024px) { .subpage-hero { padding: 11rem 0 5rem; } }
.subpage-hero .hero-bg { position: absolute; inset: 0; }
.subpage-hero .grad1 { position: absolute; inset: 0; background: linear-gradient(to bottom right, var(--navy), var(--steel), var(--navy)); }
.subpage-hero .orb1 { position: absolute; top: -20%; right: 10%; width: 700px; height: 400px; background: rgba(224,32,32,.05); border-radius: 50%; filter: blur(120px); }
.subpage-hero .hero-stripe-h { position: absolute; top: 6rem; right: 0; width: 10rem; height: 1px; background: linear-gradient(to left, var(--red), transparent); }
.subpage-hero-inner { position: relative; z-index: 1; }
.subpage-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(2.75rem, 7vw, 5.5rem); color: rgba(255,255,255,.92); margin-bottom: 1.25rem; }
.subpage-title .text-red { color: var(--red); }
.subpage-intro { font-size: 1rem; color: rgba(255,255,255,.6); max-width: 44rem; line-height: 1.7; }
@media (min-width: 640px) { .subpage-intro { font-size: 1.125rem; } }
.breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.breadcrumb a { color: rgba(255,255,255,.5); transition: color .2s; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { color: rgba(255,255,255,.25); }

/* ════════════════════════════════════════════
   BLOG INDEX
   ════════════════════════════════════════════ */
#blog-index { position: relative; padding: 4.5rem 0 6rem; overflow: hidden; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { position: relative; display: flex; flex-direction: column; background: var(--navy-light); border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: border-color .4s, box-shadow .3s, transform .3s; }
.blog-card:hover { border-color: rgba(224,32,32,.3); box-shadow: 0 25px 50px -12px rgba(224,32,32,.12); transform: translateY(-4px); }
.blog-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0); transition: transform .5s; z-index: 2; }
.blog-card:hover .blog-card-accent { transform: scaleX(1); }
.blog-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--steel); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,15,30,.75), transparent 55%); }
.blog-card-cat { position: absolute; top: .875rem; left: .875rem; z-index: 2; background: rgba(224,32,32,.92); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: .3rem .55rem; }
.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.blog-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.15; transition: color .2s; }
.blog-card:hover .blog-card-title { color: var(--red); }
.blog-card-excerpt { font-size: .8125rem; color: rgba(255,255,255,.5); line-height: 1.65; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: .625rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.06); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.blog-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(224,32,32,.6); }

/* ════════════════════════════════════════════
   ARTICLE PAGE
   ════════════════════════════════════════════ */
.article-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.article-meta-row .cat { color: var(--red); }
.article-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); }
.article-figure { position: relative; margin: 0 0 3rem; border: 1px solid rgba(255,255,255,.08); overflow: hidden; aspect-ratio: 16/9; background: var(--steel); }
.article-figure img { width: 100%; height: 100%; object-fit: cover; }
#article-body { padding: 0 0 5rem; }
.article-prose { max-width: 44rem; margin: 0 auto; }
.article-prose > p { font-size: 1.0625rem; line-height: 1.85; color: rgba(255,255,255,.72); margin-bottom: 1.5rem; }
.article-prose > p:first-of-type { font-size: 1.1875rem; color: rgba(255,255,255,.85); }
.article-prose h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.75rem; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.2; margin: 2.75rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }
.article-prose h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; color: #fff; margin: 2rem 0 .75rem; }
.article-prose ul, .article-prose ol { margin: 0 0 1.5rem 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
.article-prose ul li { position: relative; list-style: none; padding-left: 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.72); }
.article-prose ul li::before { content: ''; position: absolute; left: 0; top: .7rem; width: .5rem; height: 1px; background: var(--red); }
.article-prose ol { list-style: decimal; padding-left: 1.5rem; }
.article-prose ol li { font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.72); padding-left: .25rem; }
.article-prose ol li::marker { color: var(--red); font-family: 'JetBrains Mono', monospace; font-size: .8em; }
.article-prose strong { color: #fff; font-weight: 600; }
.article-prose .pull { border-left: 2px solid var(--red); background: rgba(224,32,32,.05); padding: 1.25rem 1.5rem; margin: 2rem 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.375rem; font-weight: 500; line-height: 1.35; color: rgba(255,255,255,.9); text-transform: none; }
.article-prose .kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: 2.5rem 0 .5rem; }
.article-back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 3rem; font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); transition: color .2s, gap .2s; }
.article-back:hover { color: #fff; gap: .875rem; }
.article-back svg { width: 1rem; height: 1rem; }

/* Related posts */
.related-section { padding: 4rem 0 6rem; background: var(--navy-light); border-top: 1px solid rgba(255,255,255,.06); }

/* ════════════════════════════════════════════
   PROJECTS PAGE
   ════════════════════════════════════════════ */
#projects-list { position: relative; padding: 4.5rem 0 6rem; overflow: hidden; }
.project-featured { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) { .project-featured { grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: start; } }
.project-figure { position: relative; border: 1px solid rgba(255,255,255,.08); overflow: hidden; aspect-ratio: 16/9; background: var(--steel); }
.project-figure img { width: 100%; height: 100%; object-fit: cover; }
.project-figure-badge { position: absolute; bottom: 1rem; left: 1rem; background: rgba(10,15,30,.85); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.1); padding: .5rem .75rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.project-body .article-meta-row { margin-bottom: 1rem; }
.project-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 1.25rem; }
.project-body p { font-size: 1rem; color: rgba(255,255,255,.68); line-height: 1.8; margin-bottom: 1.15rem; }
.project-body p:first-of-type { color: rgba(255,255,255,.82); }
.project-specs { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); padding: 1.75rem; position: sticky; top: 6.5rem; }
.project-specs-title { font-family: 'Barlow Condensed', sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 1.25rem; }
.project-spec { display: flex; flex-direction: column; gap: .25rem; padding: .875rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.project-spec:first-of-type { border-top: none; padding-top: 0; }
.project-spec dt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.project-spec dd { font-family: 'Barlow Condensed', sans-serif; font-size: 1.0625rem; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,.85); line-height: 1.25; }
.project-cta { display: inline-flex; align-items: center; gap: .625rem; margin-top: 1.75rem; width: 100%; justify-content: center; background: var(--red); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: .9375rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .875rem 1.25rem; transition: background .2s, transform .2s; }
.project-cta:hover { background: var(--red-dark); transform: translateY(-2px); }
.project-cta svg { width: 1rem; height: 1rem; }
.projects-more { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,.08); }
.projects-more-note { display: flex; align-items: center; gap: 1rem; padding: 2rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.015); }
.projects-more-note svg { width: 1.75rem; height: 1.75rem; color: rgba(224,32,32,.6); flex-shrink: 0; }
.projects-more-note p { font-size: .875rem; color: rgba(255,255,255,.45); line-height: 1.6; }

/* ════════════════════════════════════════════
   A11Y — focus visibility
   ════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-hamburger:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ════════════════════════════════════════════
   GROUP NETWORK
   ════════════════════════════════════════════ */
#network { position: relative; padding: 6rem 0; overflow: hidden; }
.network-bg-orb { position: absolute; top: 40%; right: 8%; width: 700px; height: 380px; background: rgba(224,32,32,.035); border-radius: 50%; filter: blur(120px); pointer-events: none; }
.network-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .network-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.network-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; }
.network-desc { max-width: 34rem; font-size: .9375rem; color: rgba(255,255,255,.55); line-height: 1.7; }
@media (min-width: 1024px) { .network-desc { text-align: right; } }
.network-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .network-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .network-grid { grid-template-columns: repeat(3, 1fr); } }
.network-card { position: relative; display: flex; flex-direction: column; gap: .625rem; padding: 1.5rem; background: var(--navy-light); border: 1px solid rgba(255,255,255,.08); transition: border-color .4s, background .4s, transform .3s, box-shadow .3s; }
a.network-card:hover { border-color: rgba(224,32,32,.35); box-shadow: 0 20px 40px -18px rgba(224,32,32,.25); transform: translateY(-4px); }
.network-card-sector { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.network-card-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.375rem; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.15; padding-right: 1.75rem; }
.network-card-desc { font-size: .8125rem; color: rgba(255,255,255,.5); line-height: 1.65; flex: 1; }
.network-card-loc { display: flex; align-items: center; gap: .375rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.06); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.network-card-loc svg { width: .6875rem; height: .6875rem; flex-shrink: 0; }
.network-card-arrow { position: absolute; top: 1.5rem; right: 1.5rem; width: 1rem; height: 1rem; color: rgba(255,255,255,.25); transition: color .3s, transform .3s; }
a.network-card:hover .network-card-arrow { color: var(--red); transform: translate(2px, -2px); }
.network-card.is-current { border-color: rgba(224,32,32,.4); background: rgba(224,32,32,.06); }
.network-card-here { position: absolute; top: 1.5rem; right: 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); border: 1px solid rgba(224,32,32,.45); padding: .2rem .45rem; }
.network-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.08); }
.network-foot p { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.6; flex: 1; min-width: 16rem; }
.network-foot a { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Barlow Condensed', sans-serif; font-size: .9375rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); padding: .75rem 1.5rem; transition: border-color .2s, background .2s, color .2s; }
.network-foot a:hover { border-color: rgba(224,32,32,.5); background: rgba(224,32,32,.1); }
.network-foot a svg { width: 1rem; height: 1rem; }

/* ════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════ */
#faq { position: relative; padding: 6rem 0; overflow: hidden; }
.faq-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .faq-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.faq-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1.1; }
.faq-desc { max-width: 34rem; font-size: .9375rem; color: rgba(255,255,255,.55); line-height: 1.7; }
@media (min-width: 1024px) { .faq-desc { text-align: right; } }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
.faq-item { position: relative; display: flex; flex-direction: column; gap: .625rem; padding: 1.5rem; background: var(--navy-light); border: 1px solid rgba(255,255,255,.08); transition: border-color .4s, background .4s; }
.faq-item:hover { border-color: rgba(224,32,32,.3); background: rgba(224,32,32,.03); }
.faq-q { position: relative; font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.2; padding-left: 1.25rem; }
.faq-q::before { content: ''; position: absolute; left: 0; top: .65rem; width: .625rem; height: 2px; background: var(--red); }
.faq-a { font-size: .8125rem; color: rgba(255,255,255,.55); line-height: 1.65; }

/* ════════════════════════════════════════════
   ENQUIRY FORM
   ════════════════════════════════════════════ */
/* .form-row-2 columns are set by the existing @media (min-width:640px) rule above —
   only the grid container itself is declared here so that rule still wins. */
.form-row-2 { display: grid; gap: 1rem; }
.form-submit:disabled { opacity: .6; cursor: wait; }
.form-submit:disabled:hover { background: var(--red); box-shadow: none; transform: none; }

/* anti-spam trap — visually and semantically out of reach */
.form-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: .8125rem; line-height: 1.6; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: rgba(255,255,255,.6); }
.form-status.is-pending { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
.form-status.is-error { border-color: rgba(224,32,32,.4); background: rgba(224,32,32,.06); color: rgba(255,255,255,.8); }
.form-status.is-error a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.form-status.is-error a:hover { color: #fff; }

.form-again { margin-top: 1.5rem; font-family: 'Barlow Condensed', sans-serif; font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); padding: .625rem 1.25rem; transition: border-color .2s, background .2s, color .2s; }
.form-again:hover { border-color: rgba(224,32,32,.5); background: rgba(224,32,32,.1); color: #fff; }