/* ============================================================
   SEITEC — design tokens
   Palette: near-black navy ground, three sensing-channel accents
   matched to the Nightingale CORE/AIR/STRIKE trade-show flyer
   (CORE=signal blue, AIR=cyan, STRIKE=violet)
   Type: Rajdhani (bold display) / Inter (body) / IBM Plex Mono (data & eyebrows)

   Contents
   1.  Design tokens (:root)
   2.  Base & reset
   3.  Typography
   4.  Buttons
   5.  Utilities            — small reusable helpers (spacing, layout, framed photos)
   6.  Header / nav
   7.  Hero / waveform
   8.  Capability grid
   9.  Section headers
   10. Channel cards (CORE / AIR / STRIKE)
   11. Stat strip
   12. Cards / generic
   13. Footer
   14. Page hero (inner pages)
   15. Two-column content block
   16. Team
   17. News
   18. Timeline
   19. Contact
   20. Video placeholders

   Note on markup: this is a plain static site (no build step or
   templating), so the header nav and footer are duplicated in every
   page — index.html, nightingale.html, about.html, news.html,
   videos.html, contact.html. When changing nav links, footer content,
   or the LinkedIn/contact details, update all six files.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ground-0:#050914;
  --ground-1:#0a1122;
  --ground-2:#0f1a30;
  --ground-3:#16223e;
  --hairline:#26355a;
  --hairline-soft:#141d36;

  --text-0:#eef1f5;
  --text-1:#b4bccb;
  --text-2:#78829a;

  --core:#0d72d9;        /* signal blue — ground / people / vehicles / drones */
  --core-dim:#0d72d926;
  --air:#14b8d6;          /* cyan — aircraft */
  --air-dim:#14b8d626;
  --strike:#7c4fd1;       /* violet — ordnance / range safety */
  --strike-dim:#7c4fd126;

  --radius-s:6px;
  --radius-m:10px;
  --radius-l:18px;

  --display: 'Rajdhani', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1180px;
}

/* ---------- base & reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--ground-0);
  color:var(--text-0);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- typography ---------- */
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
  color:var(--text-0);
}
h1{font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.05; font-weight:700;}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.12;}
h3{font-size:1.3rem;}
p{margin:0 0 1em; color:var(--text-1);}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
  opacity:.5;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
section{padding:96px 0;}
@media (max-width:720px){ section{padding:64px 0;} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.03em;
  padding:13px 22px;
  border-radius:var(--radius-s);
  border:1px solid var(--hairline);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--text-0); color:var(--ground-0); border-color:var(--text-0); font-weight:600;}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.12); }
.btn-ghost{ color:var(--text-0); }
.btn-ghost:hover{ border-color:var(--text-1); }
.btn-arrow{transition:transform .2s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- utilities ----------
   Small reusable helpers. Reach for one of these instead of adding a
   new inline style="" — keeps one-off spacing/layout tweaks out of
   the HTML and in one place. */
.u-mt-0{margin-top:0;}
.u-mb-0{margin-bottom:0;}
.u-mb-sm{margin-bottom:.2em;}
.u-mt-sm{margin-top:.4em;}
.u-mt-lg{margin-top:1.2em;}
.u-center-text{text-align:center;}
.u-center-x{margin-inline:auto;}
.u-justify-center{justify-content:center;}
.u-self-start{align-self:flex-start;}
.u-mt-xs{margin-top:4px;}

/* Emphasised body text inside a .card (e.g. contact info values) */
.card-value{color:var(--text-0); margin:0;}

/* Alternating section backgrounds, used to break up long pages */
.section-tinted{border-top:1px solid var(--hairline-soft); background:var(--ground-1);}
.section-divided{border-top:1px solid var(--hairline-soft);}

/* Photo with a rounded border frame, used for in-content product shots */
.framed-photo{border-radius:var(--radius-l); border:1px solid var(--hairline);}
.framed-photo-inline{border-radius:var(--radius-l); border:1px solid var(--hairline); margin-top:40px; max-width:480px;}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(8,11,15,.72);
  border-bottom:1px solid var(--hairline-soft);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  height:76px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center;
  color:var(--text-0);
}
.brand img{height:44px; width:auto;}
.brand.mark-only img{height:26px;}

.nav-links{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.03em;
}
.nav-links > a, .nav-item-link{
  padding:10px 14px; border-radius:var(--radius-s);
  color:var(--text-1);
  background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.03em;
  display:flex; align-items:center; gap:6px;
}
.nav-links > a:hover, .nav-item-link:hover{ color:var(--text-0); }
.nav-links a.current, .nav-item.current .nav-item-link{ color:var(--core); }

/* The Nightingale nav item is a real link (goes to nightingale.html)
   plus a separate small toggle button for the CORE/AIR/STRIKE dropdown
   — so clicking the "Nightingale" label always navigates, and the
   chevron is what opens/closes the submenu (needed on mobile, where
   there's no hover to reveal it). */
.nav-item{position:relative; display:flex; align-items:center;}
.nav-item-toggle{
  background:none; border:none; cursor:pointer; color:var(--text-1);
  padding:10px 12px 10px 2px; display:flex; align-items:center;
}
.nav-item-toggle:hover{color:var(--text-0);}
.nav-bird{height:12px; width:auto; margin-right:7px; opacity:.85; vertical-align:-1px;}
.nav-item .chev{width:9px; height:9px; opacity:.6; transition:transform .2s ease;}
.nav-item:hover .chev{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:230px;
  background:var(--ground-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-m);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.5);
}
.nav-item:hover .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.nav-dropdown a{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px 10px 14px; border-radius:var(--radius-s);
  border-left:2px solid transparent;
  font-family:var(--body);
  transition:background .15s ease, border-color .15s ease;
}
.nav-dropdown a:hover{background:var(--ground-2);}
.nav-dropdown .tag{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;}
.nav-dropdown .sub{font-size:.78rem; color:var(--text-2);}
.nav-dropdown a[data-ch="core"] .tag{color:var(--core);}
.nav-dropdown a[data-ch="air"] .tag{color:var(--air);}
.nav-dropdown a[data-ch="strike"] .tag{color:var(--strike);}
.nav-dropdown a[data-ch="core"]:hover{border-left-color:var(--core); background:var(--core-dim);}
.nav-dropdown a[data-ch="air"]:hover{border-left-color:var(--air); background:var(--air-dim);}
.nav-dropdown a[data-ch="strike"]:hover{border-left-color:var(--strike); background:var(--strike-dim);}

.menu-toggle{display:none; background:none; border:none; color:var(--text-0); cursor:pointer;}

@media (max-width:880px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; height:calc(100vh - 76px);
    background:var(--ground-0);
    flex-direction:column; align-items:stretch; gap:0;
    padding:18px; transform:translateX(100%);
    transition:transform .25s ease; overflow:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links > a, .nav-item{width:100%; justify-content:space-between; border-bottom:1px solid var(--hairline-soft);}
  .nav-links > a{padding:16px 8px; border-radius:0;}
  .nav-item-link{flex:1; padding:16px 8px;}
  .nav-item-toggle{padding:16px 12px;}
  .nav-dropdown{position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; margin:6px 0 10px;}
  .nav-item.open .nav-dropdown{display:block;}
  .nav-item.open .chev{transform:rotate(180deg);}
  .menu-toggle{display:block;}
}

/* ---------- hero / waveform ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:120px 0 90px;
  border-bottom:1px solid var(--hairline-soft);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--hairline-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 20%, transparent 75%);
  opacity:.5;
}
.hero-glow{
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 60% 50% at 78% 0%, #0d72d936, transparent 65%);
  pointer-events:none;
}
.hero-content{position:relative; max-width:760px;}
.hero-tag{font-family:var(--mono); font-size:1.4rem; color:var(--text-1); font-weight:400; margin-bottom:1.4em; max-width:640px;}
.hero-actions{display:flex; gap:14px; margin-top:2.2em; flex-wrap:wrap;}

.wave{position:relative; height:120px; margin-top:64px;}
.wave svg{position:absolute; inset:0; width:100%; height:100%;}
.wave-line{fill:none; stroke:var(--core); stroke-width:1.6; opacity:.85;
  stroke-dasharray:1800; stroke-dashoffset:1800;
  animation:draw 3.2s cubic-bezier(.4,.1,.2,1) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.wave-line.dim{stroke:var(--hairline); opacity:.6; animation-delay:.15s;}

/* ---------- capability grid ---------- */
.cap-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hairline-soft);
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius-l);
  overflow:hidden;
}
@media (max-width:900px){ .cap-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .cap-grid{grid-template-columns:1fr;} }
.cap-card{background:var(--ground-1); padding:34px 28px; min-height:220px; display:flex; flex-direction:column;}
.cap-card svg{width:34px; height:34px; color:var(--core); margin-bottom:20px;}
.cap-card h3{font-size:1.05rem; margin-bottom:.5em;}
.cap-card p{font-size:.92rem; margin:0; color:var(--text-2);}

/* ---------- section headers ---------- */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px; flex-wrap:wrap;}
.section-head p{max-width:480px; margin:0;}

/* ---------- channel cards (CORE/AIR/STRIKE) ---------- */
.channels{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){ .channels{grid-template-columns:1fr;} }
.channel-card{
  border:1px solid var(--hairline); border-radius:var(--radius-l);
  padding:32px 28px; background:var(--ground-1);
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .2s ease, transform .2s ease;
}
.channel-card:hover{transform:translateY(-3px);}
.channel-card[data-ch="core"]{border-top:2px solid var(--core);}
.channel-card[data-ch="air"]{border-top:2px solid var(--air);}
.channel-card[data-ch="strike"]{border-top:2px solid var(--strike);}
.channel-badge{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  padding:5px 10px; border-radius:100px; width:fit-content;
  display:flex; align-items:center; gap:7px;
}
.channel-badge img{height:11px; width:auto; opacity:.9;}
.channel-badge.core{color:var(--core); background:var(--core-dim);}
.channel-badge.air{color:var(--air); background:var(--air-dim);}
.channel-badge.strike{color:var(--strike); background:var(--strike-dim);}
/* On the Nightingale page these badges act as the section heading
   (NIGHTINGALE · CORE / AIR / STRIKE), so they're sized up 3x from
   the default .channel-badge used elsewhere (e.g. the homepage
   channel cards, which don't have the .core/.air/.strike modifier
   and so keep the smaller default size). */
.channel-badge.core, .channel-badge.air, .channel-badge.strike{
  font-size:2.1rem; letter-spacing:.03em;
  padding:14px 26px; gap:14px;
}
.channel-badge.core img, .channel-badge.air img, .channel-badge.strike img{
  height:32px;
}
@media (max-width:600px){
  .channel-badge.core, .channel-badge.air, .channel-badge.strike{
    font-size:1.3rem; padding:10px 18px; gap:10px;
  }
  .channel-badge.core img, .channel-badge.air img, .channel-badge.strike img{
    height:20px;
  }
}
.channel-card[data-ch="core"] .channel-badge{color:var(--core); background:var(--core-dim);}
.channel-card[data-ch="air"] .channel-badge{color:var(--air); background:var(--air-dim);}
.channel-card[data-ch="strike"] .channel-badge{color:var(--strike); background:var(--strike-dim);}
.channel-card h3{margin-bottom:0;}
.channel-targets{
  display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px;
  font-family:var(--mono); font-size:.72rem; color:var(--text-2);
}
.channel-targets span{border:1px solid var(--hairline); border-radius:100px; padding:4px 10px;}
.channel-card[data-ch="core"] .channel-targets span{border-color:var(--core); color:var(--core);}
.channel-card[data-ch="air"] .channel-targets span{border-color:var(--air); color:var(--air);}
.channel-card[data-ch="strike"] .channel-targets span{border-color:var(--strike); color:var(--strike);}
.channel-card .btn{margin-top:auto; align-self:flex-start;}

/* ---------- stat strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline-soft); border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft);}
@media (max-width:700px){ .stats{grid-template-columns:repeat(2,1fr);} }
.stat{background:var(--ground-0); padding:32px 28px;}
.stat .num{font-family:var(--mono); font-size:2rem; color:var(--core); display:block; margin-bottom:.2em;}
.stat .label{font-size:.82rem; color:var(--text-2);}

/* ---------- cards / generic ---------- */
.card{border:1px solid var(--hairline); border-radius:var(--radius-l); background:var(--ground-1); padding:30px;}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hairline-soft); padding:56px 0 32px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px;}
.footer-brand{max-width:340px;}
.footer-brand .brand{margin-bottom:14px;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); margin-bottom:16px; font-weight:500;}
.footer-col a, .footer-col p{display:block; font-size:.9rem; color:var(--text-1); margin-bottom:10px;}
.footer-col a:hover{color:var(--text-0);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--hairline-soft);
  font-size:.82rem; color:var(--text-2);
}
.footer-bottom .ack{max-width:520px;}
.social{display:flex; gap:12px;}
.social a{width:34px; height:34px; border:1px solid var(--hairline); border-radius:100px; display:flex; align-items:center; justify-content:center;}
.social a:hover{border-color:var(--text-1);}
.social svg{width:15px; height:15px;}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:70px 0 60px; border-bottom:1px solid var(--hairline-soft);}
.page-hero h1{max-width:820px;}
.page-hero .lede{font-size:1.15rem; max-width:640px; color:var(--text-1);}
.nightingale-lockup{height:110px; width:auto; margin-bottom:26px;}
@media (max-width:600px){ .nightingale-lockup{height:72px;} }

/* ---------- two-col content block ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:840px){ .split{grid-template-columns:1fr;} }
.split img{border-radius:var(--radius-l); border:1px solid var(--hairline);}
.qa{border-top:1px solid var(--hairline-soft); padding:22px 0;}
.qa h4{font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin-bottom:.6em; font-weight:500;}
.qa p{margin:0;}

/* ---------- team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:900px){ .team-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
.team-card{border:1px solid var(--hairline); border-radius:var(--radius-l); overflow:hidden; background:var(--ground-1);}
.team-photo{aspect-ratio:1/1; overflow:hidden; background:var(--ground-2);}
.team-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(45%); transition:filter .25s ease;}
.team-card:hover .team-photo img{filter:grayscale(0%);}
.team-info{padding:16px 18px 20px;}
.team-info .role{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--core); margin-bottom:6px;}
.team-info h3{font-size:1rem; margin-bottom:2px;}
.team-info .cred{font-size:.8rem; color:var(--text-2); margin:0;}
.team-linkedin{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--core);}
.team-linkedin:hover{color:var(--text-0);}

/* ---------- news ---------- */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){ .news-grid{grid-template-columns:1fr;} }
.news-card{border:1px solid var(--hairline); border-radius:var(--radius-l); background:var(--ground-1); padding:26px; display:flex; flex-direction:column; gap:12px;}
.news-card .date{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--text-2); text-transform:uppercase;}
.news-card h3{font-size:1.08rem; margin-bottom:0;}
.news-card p{font-size:.9rem; margin:0; color:var(--text-2);}
.news-feature{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--hairline); border-radius:var(--radius-l); overflow:hidden;
  background:var(--ground-1); margin-bottom:20px;
}
@media (max-width:800px){ .news-feature{grid-template-columns:1fr;} }
.news-feature img{width:100%; height:100%; object-fit:cover; min-height:220px;}
.news-feature .news-feature-body{padding:36px; display:flex; flex-direction:column; justify-content:center; gap:12px;}
/* .news-feature is reused on the homepage and Nightingale page as a
   clickable "watch it in action" teaser banner (wrapped in an <a>
   instead of a <div>) — these modifiers cover that usage. */
a.news-feature{text-decoration:none;}
.news-feature.no-gap{margin-bottom:0;}

/* ---------- timeline ---------- */
.timeline{border-left:1px solid var(--hairline); margin-left:6px; padding-left:36px; display:flex; flex-direction:column; gap:40px;}
.timeline-item{position:relative;}
.timeline-item::before{content:""; position:absolute; left:-41px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--core); box-shadow:0 0 0 4px var(--core-dim);}
.timeline-item .year{font-family:var(--mono); font-size:.78rem; color:var(--core); margin-bottom:.4em; display:block;}

/* Optional photos on a timeline entry (e.g. News page milestones).
   Entirely optional — a .timeline-item with no .timeline-photos block
   just renders as plain text, same as before. To add photos to an
   entry, drop this inside its .timeline-item, after the <p>:
     <div class="timeline-photos">
       <a href="assets/your-photo.jpg" target="_blank" rel="noopener">
         <img src="assets/your-photo.jpg" alt="Describe the photo">
       </a>
     </div>
   Add as many <a><img></a> pairs as you like — they wrap and lay out
   automatically. Each photo links to its own full-size file so people
   can click through for a closer look. */
.timeline-photos{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}
.timeline-photos img{
  width:230px; max-width:100%; height:155px; object-fit:cover;
  border-radius:var(--radius-m); border:1px solid var(--hairline);
  cursor:zoom-in; transition:transform .2s ease, border-color .2s ease;
}
.timeline-photos img:hover{transform:translateY(-2px); border-color:var(--text-1);}
@media (max-width:480px){
  .timeline-photos img{width:100%; height:190px;}
}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.field{margin-bottom:20px;}
.field label{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin-bottom:8px;}
.field input, .field textarea{
  width:100%; background:var(--ground-1); border:1px solid var(--hairline); border-radius:var(--radius-s);
  padding:13px 14px; color:var(--text-0); font-family:var(--body); font-size:.95rem;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--core);}
.field textarea{resize:vertical; min-height:120px;}
.contact-info .card{margin-bottom:18px;}
.contact-info h4, .card h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); margin-bottom:8px; font-weight:500;}
.map-frame{border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--hairline); margin-top:18px;}
.map-frame iframe{width:100%; height:280px; border:0; display:block; filter:grayscale(60%) invert(92%) contrast(90%);}
.form-note{font-family:var(--mono); font-size:.78rem; color:var(--text-2); margin-top:14px;}

/* Simplified contact page (temporary, while the enquiry form has no
   backend) — just the email as an image, plus location/LinkedIn/map.
   See contact-with-form.html for the full version with the form,
   kept as a reference for when the backend is ready. */
.contact-simple{max-width:600px; margin:0 auto; text-align:center;}
.contact-email-block{margin-bottom:52px;}
.contact-email-img{margin:14px auto 0; height:34px; width:auto;}
.contact-info-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; text-align:left;}
@media (max-width:560px){ .contact-info-row{grid-template-columns:1fr;} }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--core); outline-offset:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- video placeholders ---------- */
.coming-soon-banner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border:1px dashed var(--hairline); border-radius:var(--radius-l);
  background:var(--ground-1); padding:20px 24px; margin-bottom:36px;
}
.coming-soon-tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--core); background:var(--core-dim); padding:6px 14px; border-radius:100px;
  white-space:nowrap; flex-shrink:0;
}
.coming-soon-banner p{margin:0; color:var(--text-1); font-size:.92rem;}
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .video-grid{grid-template-columns:1fr;} }
.video-card{border:1px solid var(--hairline); border-radius:var(--radius-l); background:var(--ground-1); overflow:hidden; display:flex; flex-direction:column;}
.video-card[data-ch="core"]{border-top:2px solid var(--core);}
.video-card[data-ch="strike"]{border-top:2px solid var(--strike);}
.video-card[data-ch="promo"]{border-top:2px solid var(--text-1);}
.video-placeholder{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--ground-2);
}
.video-placeholder img{width:100%; height:100%; object-fit:cover; opacity:.4; filter:grayscale(30%);}
.video-placeholder::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--ground-0) 130%);
}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:60px; height:60px; border-radius:50%;
  background:rgba(238,241,245,.94);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.video-card:hover .video-play{transform:translate(-50%,-50%) scale(1.07); background:#fff;}
.video-play svg{width:18px; height:18px; margin-left:3px;}
.video-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  padding:4px 10px; border-radius:100px; background:rgba(6,7,12,.7);
  border:1px solid var(--hairline);
}
.video-card[data-ch="core"] .video-badge{color:var(--core);}
.video-card[data-ch="strike"] .video-badge{color:var(--strike);}
.video-card[data-ch="promo"] .video-badge{color:var(--text-0);}
.video-length{
  position:absolute; bottom:14px; right:14px; z-index:2;
  font-family:var(--mono); font-size:.68rem; color:var(--text-1);
  background:rgba(6,7,12,.7); padding:2px 8px; border-radius:4px;
}
.video-card-body{padding:22px 24px 26px;}
.video-card-body h3{margin-bottom:.3em;}
.video-card-body p{margin:0; font-size:.9rem;}