/* =========================================================
   ORION DISTRICT — stylesheet
   ---------------------------------------------------------
   • One typeface: Space Grotesk (sans) — no serif.
   • Brand: navy #181d30 · deep navy #272f4d · lime #d5f379.
   • Restrained type scale, wide container, borderless images.
   • Sections alternate light (paper) / dark (navy) for rhythm.
   ========================================================= */

/* -------------------- Design tokens -------------------- */
:root{
  /* colours */
  --navy:#181d30;
  --navy-deep:#0f1320;
  --navy-700:#1d2440;
  --navy-600:#272f4d;
  --navy-500:#38416a;
  --lime:#d5f379;
  --lime-2:#c6ee52;
  --paper:#f4f5ef;
  --paper-2:#e9ebe0;
  --ink:#181d30;
  --ink-soft:#535a72;
  --white:#ffffff;

  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(24,29,48,.12);

  /* type — single sans family */
  --font:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* radii */
  --r-xl:30px;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --pill:100px;

  /* layout — wide */
  --container:1600px;
  --pad:clamp(1.25rem, 4vw, 3.25rem);
  --sec:clamp(4rem, 8vw, 7.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 30px 70px -34px rgba(15,19,32,.42);
  --shadow-lime:0 20px 50px -20px rgba(150,190,60,.5);
}

/* -------------------- Reset / base --------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:auto}      /* smooth handled in JS */
body{
  font-family:var(--font);
  background:var(--navy);
  color:var(--white);
  line-height:1.65;
  font-size:1rem;                                              /* normal body size */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
ul{list-style:none; padding:0}
h1,h2,h3,h4{line-height:1.15; font-weight:600; letter-spacing:-.01em}
::selection{background:var(--lime); color:var(--navy)}

.skip-link{
  position:fixed; left:1rem; top:-100px; z-index:200;
  background:var(--lime); color:var(--navy); padding:.6rem 1rem; border-radius:8px; font-weight:600;
  transition:top .25s;
}
.skip-link:focus{top:1rem}

/* -------------------- Layout helpers ------------------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad)}
.section{position:relative; padding-block:var(--sec)}
.nowrap{white-space:nowrap}

/* Section titles — restrained, sans, with a lime accent on <em> */
.section__title{
  font-size:clamp(1.55rem, 1.2rem + 1.4vw, 2.3rem); color:var(--ink); line-height:1.18; font-weight:600;
}
.section__title em{                       /* light bg: lime highlighter under the emphasised words */
  font-style:normal;
  background:linear-gradient(transparent 60%, rgba(213,243,121,.6) 0);
  padding:0 .04em;
}
.section__title--light{color:var(--white)}
.section__title--light em{background:none; color:var(--lime)}

.section__head{max-width:62ch; margin-bottom:clamp(2rem,4vw,3.2rem)}
.section__head--split{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem 3rem; max-width:none; flex-wrap:wrap;
}
.section__note{max-width:40ch; color:var(--ink-soft); font-size:1rem}

/* -------------------- Buttons -------------------------- */
.btn{
  --bg:var(--lime); --fg:var(--navy);
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  padding:.9rem 1.55rem; border-radius:var(--pill); font-weight:600; font-size:.98rem;
  background:var(--bg); color:var(--fg); border:1.5px solid transparent;
  transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s;
  will-change:transform;
}
.btn__arrow{width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--lime:hover{background:var(--lime-2); box-shadow:var(--shadow-lime)}
.btn--ghost{background:transparent; color:var(--white); border-color:var(--line-dark)}
.btn--ghost:hover{border-color:var(--lime); color:var(--lime)}
.btn--pill{background:var(--lime); color:var(--navy); padding:.68rem 1.3rem; font-size:.92rem}
.btn--lg{padding:1.05rem 1.9rem; font-size:1.02rem}
.btn--block{width:100%}

/* ============================ NAV ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), backdrop-filter .4s, box-shadow .4s, padding .4s;
  padding-block:clamp(.7rem,1.4vw,1.05rem);
}
.nav__inner{display:flex; align-items:center; gap:1.5rem}
.nav__logo{height:66px; width:auto; transition:height .4s var(--ease)}   /* header logo size */
.nav__links{display:flex; gap:2rem; margin-left:auto; font-size:.98rem; font-weight:500}
.nav__links a{position:relative; color:rgba(255,255,255,.82); padding:.3rem 0; transition:color .25s}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--lime); transition:width .3s var(--ease)}
.nav__links a:hover, .nav__links a.active{color:var(--white)}
.nav__links a.active::after, .nav__links a:hover::after{width:100%}
.nav__cta{margin-left:.5rem}

.nav.is-scrolled{
  background:rgba(18,22,38,.82); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-dark), 0 18px 40px -30px rgba(0,0,0,.8);
}
.nav.is-scrolled .nav__logo{height:54px}

.nav__burger{display:none; width:44px; height:44px; margin-left:auto; position:relative; z-index:130}
.nav__burger span{position:absolute; left:10px; right:10px; height:2px; background:var(--white); border-radius:2px; transition:transform .35s var(--ease), opacity .25s}
.nav__burger span:nth-child(1){top:15px}
.nav__burger span:nth-child(2){top:21px}
.nav__burger span:nth-child(3){top:27px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Mobile menu ---------- */
.mobile{
  position:fixed; inset:0; z-index:120; background:var(--navy-deep);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:2rem var(--pad); transform:translateY(-100%); transition:transform .5s var(--ease); visibility:hidden;
}
body.menu-open .mobile{transform:translateY(0); visibility:visible}
.mobile__nav{display:flex; flex-direction:column; gap:.2rem}
.mobile__nav a{
  font-size:clamp(1.8rem,9vw,2.6rem); font-weight:600; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:1rem; padding:.35rem 0; border-bottom:1px solid var(--line-dark);
  transition:color .25s, padding-left .3s;
}
.mobile__nav a:hover{color:var(--lime); padding-left:.5rem}
.mobile__num{font-size:.85rem; font-weight:500; color:var(--lime); letter-spacing:.1em}
.mobile__meta{display:flex; flex-direction:column; gap:.3rem; color:rgba(255,255,255,.6); font-size:.95rem}
.mobile__meta a:hover{color:var(--lime)}

/* ============================ HERO ========================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding-top:7rem; padding-bottom:4rem; overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:0}
/* Star motif = 4 lighter circles whose overlap leaves a concave 4-point star */
.starfield{position:absolute; top:50%; left:60%; transform:translate(-50%,-50%);
  width:min(135vh,1500px); height:min(135vh,1500px); pointer-events:none}
.hero .starfield{left:69%;                 /* pushed toward the image; masked so no seam behind text */
  -webkit-mask:radial-gradient(58% 72% at 72% 50%, #000 42%, transparent 78%);
  mask:radial-gradient(58% 72% at 72% 50%, #000 42%, transparent 78%);}
.starfield__circles circle{fill:var(--navy-600)}
.starfield--soft .starfield__circles circle{fill:rgba(255,255,255,.035)}
.hero__glow{position:absolute; width:60vw; height:60vw; max-width:820px; max-height:820px; right:-10%; top:8%;
  background:radial-gradient(circle, rgba(213,243,121,.15), transparent 62%); filter:blur(10px)}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(transparent, var(--navy)); z-index:1; pointer-events:none}

.hero__inner{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center; width:100%}
.hero__content{max-width:44ch}
.hero__title{
  font-size:clamp(1.9rem, 1.4rem + 2.2vw, 3.05rem); line-height:1.12; font-weight:600; margin-bottom:1.5rem;
}
.hero__title em{font-style:normal; color:var(--lime)}
.hero__lede{color:rgba(255,255,255,.72); font-size:clamp(1rem,.97rem + .25vw,1.12rem); max-width:52ch; margin-bottom:2.1rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem}

.hero__media{position:relative; justify-self:center}
/* Clean image: rounded corners + soft shadow, NO border / frame / outline */
.hero__frame{position:relative; width:min(40vw,460px); aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow)}
.hero__frame img{width:100%; height:100%; object-fit:cover}
.hero__badge{position:absolute; left:-6%; bottom:8%; background:var(--lime); color:var(--navy);
  border-radius:var(--r-md); padding:1rem 1.25rem; display:flex; align-items:center; gap:.75rem; box-shadow:var(--shadow-lime)}
.hero__badge-k{font-weight:700; font-size:1.7rem; line-height:1; letter-spacing:-.02em}
.hero__badge-l{font-size:.8rem; font-weight:500; line-height:1.15}

.hero__scroll{position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.hero__scroll svg{width:18px; fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ========================= MARQUEE ========================== */
.marquee{background:var(--lime); color:var(--navy); overflow:hidden; padding:.85rem 0; border-block:1px solid rgba(24,29,48,.15)}
.marquee__track{display:flex; width:max-content; animation:scroll 34s linear infinite}
.marquee__track span{font-size:clamp(.95rem,.9rem + .35vw,1.15rem); font-weight:500; white-space:nowrap; padding-right:1.2rem; letter-spacing:.01em}
.marquee__track i{font-style:normal; color:var(--navy); opacity:.5; padding:0 .35rem}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ========================== ABOUT =========================== */
.about{background:var(--paper); color:var(--ink)}
.about__grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.about__media{position:relative; padding-bottom:2rem; padding-right:2rem}
/* borderless images */
.about__imgwrap{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); position:relative; z-index:2}
.about__imgwrap img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4}
.about__imgwrap--sm{position:absolute; right:0; bottom:0; width:44%; aspect-ratio:1/1; z-index:3}
.about__imgwrap--sm img{aspect-ratio:1/1}
.about__blob{position:absolute; left:-6%; top:-6%; width:58%; aspect-ratio:1/1; z-index:1;
  background:radial-gradient(circle at 30% 30%, var(--lime), transparent 60%); filter:blur(4px)}
.about__lead{font-size:clamp(1.05rem,1rem + .4vw,1.22rem); font-weight:500; color:var(--ink); margin-block:1.4rem 1rem; max-width:50ch}
.about__text{color:var(--ink-soft); max-width:52ch; margin-bottom:1.8rem}
.about__points{display:grid; gap:.7rem}
.about__points li{display:flex; align-items:flex-start; gap:.7rem; font-weight:500}
.tick{color:var(--lime-2); background:var(--navy); width:1.5rem; height:1.5rem; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:.7rem; margin-top:.15rem}

/* ========================= CLIENTS ========================== */
/* Quiet white band between About and Approach. Logos keep their own brand
   colours and are normalised by HEIGHT (not width) so very different aspect
   ratios still read as one row. Each card may set --logo-scale (from the
   card's "Logo size" %) to balance a dense lock-up against a wide wordmark. */
.clients{background:var(--white); color:var(--ink); border-block:1px solid var(--line-light)}
.clients__grid{
  --logo-base:clamp(52px,4.4vw,74px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,2rem); align-items:center;
}
.client{
  display:grid; place-items:center; min-height:172px;
  padding:clamp(1.3rem,2.2vw,2rem); border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line-light);
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.client:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(24,29,48,.2)}
.client a{display:grid; place-items:center}
/* Explicit height so small SVGs scale UP too. Each card may set
   --logo-scale to balance a dense lock-up against a wide wordmark. */
.client img{
  height:calc(var(--logo-base) * var(--logo-scale,1));
  width:auto; max-width:100%; object-fit:contain;
}
.client__name{font-weight:600; font-size:1.05rem; text-align:center; color:var(--ink)}

@media (max-width:820px){
  .clients__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .clients__grid{grid-template-columns:1fr}
  .client{min-height:140px}
}

/* ===================== APPROACH (dark) ====================== */
.approach{background:var(--navy); color:var(--white); overflow:hidden}
.approach__bg{position:absolute; inset:0; z-index:0}
.approach .container{position:relative; z-index:2}
.approach .section__head{max-width:54ch}
.approach__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem)}
.vm{background:linear-gradient(180deg, var(--navy-700), var(--navy-600)); border:1px solid var(--line-dark);
  border-radius:var(--r-lg); padding:clamp(1.6rem,2.4vw,2.3rem); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s}
.vm:hover{transform:translateY(-6px); border-color:rgba(213,243,121,.4)}
.vm__k{font-size:.9rem; font-weight:600; color:var(--lime); display:block; margin-bottom:1.3rem; letter-spacing:.05em}
.vm__title{font-size:1.3rem; font-weight:600; margin-bottom:1rem}
.vm p{color:rgba(255,255,255,.72); font-size:1rem}
.vm--phil{background:linear-gradient(180deg, #223 0%, var(--navy-600) 100%)}
.vm__list{display:grid; gap:.7rem; margin-top:.3rem}
.vm__list li{display:flex; align-items:center; gap:.7rem; font-weight:500; padding-bottom:.7rem; border-bottom:1px solid var(--line-dark)}
.vm__list li:last-child{border-bottom:0; padding-bottom:0}
.vm__list li::before{content:"✦"; color:var(--lime); font-size:.8rem}

/* ======================== INDUSTRIES ======================== */
.industries{background:var(--paper); color:var(--ink)}
.ind__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.4vw,1.3rem)}
.ind{background:var(--white); border:1px solid var(--line-light); border-radius:var(--r-lg);
  padding:clamp(1.4rem,1.8vw,1.9rem); display:flex; flex-direction:column; gap:1.1rem; min-height:180px;
  transition:transform .4s var(--ease), box-shadow .4s, background .4s, color .4s; position:relative; overflow:hidden}
.ind h3{font-size:1.1rem; font-weight:600; margin-top:auto}
.ind__icon{width:54px; height:54px; border-radius:50%; background:var(--navy); color:var(--lime);
  display:grid; place-items:center; transition:transform .4s var(--ease), background .4s, color .4s}
.ind__icon svg{width:27px; height:27px}
.ind:hover{transform:translateY(-6px); box-shadow:var(--shadow); background:var(--navy); color:var(--white)}
.ind:hover .ind__icon{background:var(--lime); color:var(--navy); transform:rotate(-8deg) scale(1.05)}
.ind--cta{background:var(--navy); color:var(--white); justify-content:space-between}
.ind--cta:hover{background:var(--navy-700)}
.ind__star{width:54px; height:54px}
.ind__star svg{width:100%; fill:var(--lime); animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ind__link{color:var(--lime); font-weight:600; margin-top:auto}
.ind--cta h3{margin-top:0}

/* ========================= FACTS BAND ======================= */
.facts{background:var(--navy-deep); color:var(--white); padding-block:clamp(3rem,5vw,4.5rem); position:relative}
.facts::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--line-dark)}
.facts__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center}
.fact{display:flex; flex-direction:column; gap:.35rem; position:relative}
.fact:not(:last-child)::after{content:""; position:absolute; right:-.75rem; top:15%; bottom:15%; width:1px; background:var(--line-dark)}
.fact__k{font-weight:700; font-size:clamp(1.9rem,1.5rem + 1.3vw,2.6rem); color:var(--lime); line-height:1; letter-spacing:-.02em}
.fact__k--txt{font-weight:600}
.fact__l{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6)}

/* ========================= SERVICES ========================= */
.services{background:var(--paper-2); color:var(--ink)}
.svcs{display:flex; flex-direction:column; gap:1rem}
.svc{background:var(--white); border:1px solid var(--line-light); border-radius:var(--r-lg); overflow:hidden;
  transition:box-shadow .4s, border-color .4s}
.svc.is-open{box-shadow:var(--shadow); border-color:rgba(24,29,48,.18)}
.svc__head{width:100%; display:grid; grid-template-columns:auto auto 1fr auto; align-items:center;
  gap:clamp(1rem,2.4vw,2rem); padding:clamp(1.2rem,2.2vw,1.9rem) clamp(1.3rem,2.4vw,2.1rem); text-align:left}
.svc__num{font-size:1rem; color:var(--ink-soft); font-weight:600}
.svc__icon{width:50px; height:50px; border-radius:14px; background:var(--paper); color:var(--navy);
  display:grid; place-items:center; transition:background .4s, color .4s, transform .4s var(--ease)}
.svc__icon svg{width:25px; height:25px}
.svc__titles{display:flex; flex-direction:column; gap:.25rem; min-width:0}
.svc__title{font-size:clamp(1.1rem,1rem + .5vw,1.35rem); font-weight:600; letter-spacing:-.01em}
.svc__summary{color:var(--ink-soft); font-size:.96rem; max-width:64ch; display:block}
.svc__toggle{position:relative; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-light); flex:0 0 auto; transition:background .35s, border-color .35s}
.svc__toggle::before,.svc__toggle::after{content:""; position:absolute; left:50%; top:50%; background:var(--navy); border-radius:2px; transition:transform .35s var(--ease)}
.svc__toggle::before{width:14px; height:2px; transform:translate(-50%,-50%)}
.svc__toggle::after{width:2px; height:14px; transform:translate(-50%,-50%)}
.svc__head:hover .svc__icon{background:var(--navy); color:var(--lime)}
.svc__head:hover .svc__toggle{border-color:var(--navy)}
.svc.is-open .svc__icon{background:var(--lime); color:var(--navy)}
.svc.is-open .svc__toggle{background:var(--lime); border-color:var(--lime)}
.svc.is-open .svc__toggle::after{transform:translate(-50%,-50%) scaleY(0)}   /* plus -> minus */

/* Expanding panel via grid-template-rows 0fr -> 1fr */
.svc__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.svc.is-open .svc__panel{grid-template-rows:1fr}
.svc__panelinner{overflow:hidden; min-height:0; display:grid; grid-template-columns:260px 1fr; gap:clamp(1.5rem,3vw,2.5rem);
  padding:0 clamp(1.3rem,2.4vw,2.1rem) clamp(1.6rem,3vw,2.4rem) clamp(1.3rem,2.4vw,2.1rem)}
.svc__panel .svc__media,.svc__panel .svc__groups{opacity:0; transition:opacity .4s .1s}
.svc.is-open .svc__panel .svc__media,.svc.is-open .svc__panel .svc__groups{opacity:1}
.svc__media{border-radius:var(--r-md); overflow:hidden; align-self:start; aspect-ratio:1/1; box-shadow:var(--shadow)}
.svc__media img{width:100%; height:100%; object-fit:cover}
.svc__groups{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(1.2rem,2.5vw,2rem)}
.svc__group h4{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-500); margin-bottom:.9rem; font-weight:600}
.svc__group ul{display:grid; gap:.55rem}
.svc__group li{display:flex; gap:.6rem; color:var(--ink-soft); font-size:.95rem; line-height:1.45}
.svc__group li::before{content:"✦"; color:var(--lime-2); font-size:.7rem; margin-top:.35rem; flex:0 0 auto}
.svc__group li em{font-style:italic; opacity:.85}

/* =========================== CTA ============================ */
.cta{position:relative; background:var(--navy); color:var(--white); overflow:hidden; padding-block:clamp(4.5rem,9vw,7.5rem); text-align:center}
.cta__bg{position:absolute; inset:0; z-index:0; opacity:.9}
.cta .starfield{left:50%}
.cta__inner{position:relative; z-index:2; max-width:48ch; margin-inline:auto}
.cta__title{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.6rem); line-height:1.14; font-weight:600; margin-bottom:1.1rem}
.cta__title em{font-style:normal; color:var(--lime)}
.cta__text{color:rgba(255,255,255,.72); font-size:1.05rem; margin-bottom:2rem}
.cta__actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}

/* ========================= CONTACT ========================== */
.contact{background:var(--navy-deep); color:var(--white)}
.contact__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start}
.contact .section__title{color:var(--white)}
.contact .section__title em{background:none; color:var(--lime)}
.contact__lead{color:rgba(255,255,255,.7); margin-block:1.3rem 2.2rem; max-width:42ch}
.contact__list{display:grid; gap:1.4rem}
.contact__list li{display:flex; gap:1rem; align-items:flex-start}
.contact__ic{width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:var(--lime); color:var(--navy); display:grid; place-items:center}
.contact__ic svg{width:22px; height:22px}
.contact__meta{display:flex; flex-direction:column; gap:.15rem; padding-top:.35rem}
.contact__label{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.contact__meta a{font-size:1.06rem; font-weight:500; transition:color .25s}
.contact__meta a:hover{color:var(--lime)}
.contact__meta span{color:rgba(255,255,255,.8); line-height:1.5}

.contact__form{background:linear-gradient(180deg, var(--navy-700), var(--navy-600)); border:1px solid var(--line-dark);
  border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.4rem); display:grid; gap:1.1rem}
.field{display:grid; gap:.5rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.field label{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); font-weight:600}
.field input,.field textarea{width:100%; background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:var(--r-sm);
  padding:.9rem 1rem; color:var(--white); font-family:inherit; font-size:1rem; transition:border-color .25s, background .25s}
.field textarea{resize:vertical; min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--lime); background:rgba(213,243,121,.06)}
.contact__form .btn{margin-top:.4rem}
.contact__hint{font-size:.85rem; color:rgba(255,255,255,.5); text-align:center}
.contact__hint.is-error{color:#ff9a9a}
.contact__hint.is-ok{color:var(--lime)}

/* ========================== FOOTER ========================== */
.footer{background:var(--navy-deep); color:var(--white); padding-block:clamp(3rem,5vw,4.5rem) 2rem; border-top:1px solid var(--line-dark)}
.footer__grid{display:grid; grid-template-columns:2fr 1fr 1.3fr 1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line-dark)}
.footer__logo{height:92px; width:auto; margin-bottom:1.3rem}      /* footer logo size */
.footer__brand p{color:rgba(255,255,255,.6); max-width:36ch; font-size:.98rem}
.footer__col{display:flex; flex-direction:column; gap:.7rem}
.footer__col h4{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin-bottom:.4rem; font-weight:600}
.footer__col a,.footer__col span{color:rgba(255,255,255,.68); font-size:.96rem; transition:color .25s}
.footer__col a:hover{color:var(--lime)}
.footer__cta .btn{margin-top:.3rem; align-self:flex-start}
.footer__bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1.6rem; color:rgba(255,255,255,.5); font-size:.88rem; flex-wrap:wrap}
.footer__top{display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.7); transition:color .25s}
.footer__top:hover{color:var(--lime)}
.footer__top svg{width:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ==================== Scroll reveal ========================= */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .marquee__track,.ind__star svg,.hero__scroll svg{animation:none}
}

/* ======================== Responsive ======================== */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr; gap:3rem}
  .hero__content{max-width:60ch}
  .hero__media{order:-1; margin-inline:auto}
  .hero__frame{width:min(72vw,360px)}
  .ind__grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .svc__panelinner{grid-template-columns:1fr}
  .svc__media{max-width:300px}
}
@media (max-width:820px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .about__grid{grid-template-columns:1fr; gap:3rem}
  .about__media{max-width:460px; margin-inline:auto}
  .approach__grid{grid-template-columns:1fr}
  .facts__grid{grid-template-columns:repeat(2,1fr); gap:2.5rem 1rem}
  .fact:nth-child(2)::after{display:none}
  .contact__grid{grid-template-columns:1fr; gap:2.5rem}
}
@media (max-width:560px){
  .ind__grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr; gap:2rem}
  .field-row{grid-template-columns:1fr}
  .svc__head{grid-template-columns:auto 1fr auto; gap:1rem}
  .svc__icon{display:none}
  .svc__summary{font-size:.92rem}
  .hero__badge{left:0}
  .cta__actions{flex-direction:column}
  .cta__actions .btn{width:100%}
  .nav__logo{height:52px}
}
@media (max-width:380px){
  .ind__grid{grid-template-columns:1fr}
}

/* =========================================================
   WordPress additions: loader, maintenance, 404, form, social
   ========================================================= */

/* Loading overlay (animated logo star) */
.orion-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;transition:opacity .6s var(--ease), visibility .6s}
.orion-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.orion-loader__mark{width:74px;height:74px;display:block;animation:orion-spin 3.4s linear infinite}
.orion-loader__mark svg{width:100%;height:100%;filter:drop-shadow(0 0 22px rgba(213,243,121,.35));animation:orion-pulse 1.3s ease-in-out infinite}
@keyframes orion-spin{to{transform:rotate(360deg)}}
@keyframes orion-pulse{0%,100%{transform:scale(.82);opacity:.75}50%{transform:scale(1);opacity:1}}

/* Standalone splash (maintenance) */
.orion-standalone{margin:0;background:var(--navy);color:#fff;font-family:var(--font);-webkit-font-smoothing:antialiased}
.orion-splash{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem}
.orion-splash__inner{max-width:44ch}
.orion-splash__img{height:72px;width:auto;margin:0 auto 2rem}
.orion-splash__star{display:block;width:64px;margin:0 auto 1.6rem}
.orion-splash__star svg{width:100%;animation:orion-spin 20s linear infinite}
.orion-splash h1{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.6rem);margin-bottom:1rem;font-weight:600}
.orion-splash p{color:rgba(255,255,255,.72);font-size:1.08rem}

/* 404 */
.notfound{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:78vh;display:grid;place-items:center;text-align:center;padding:8rem 0}
.notfound__bg{position:absolute;inset:0;z-index:0}
.notfound__inner{position:relative;z-index:2;max-width:46ch;margin-inline:auto}
.notfound__star{display:block;width:60px;margin:0 auto 1.4rem}
.notfound__star svg{width:100%;animation:spin 22s linear infinite}
.notfound__code{font-size:clamp(3rem,2rem + 4vw,5rem);font-weight:700;color:var(--lime);line-height:1;letter-spacing:-.03em}
.notfound__heading{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);margin:.4rem 0 1rem;font-weight:600}
.notfound__text{color:rgba(255,255,255,.72);margin-bottom:2rem}

/* Form builder output: sections, alerts, checks, notes */
.form-section{grid-column:1/-1;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:.7rem 0 -.1rem;font-weight:600}
.orion-form-alert{grid-column:1/-1;padding:.9rem 1rem;border-radius:var(--r-sm);font-size:.95rem}
.orion-form-alert.is-ok{background:rgba(213,243,121,.14);color:var(--lime);border:1px solid rgba(213,243,121,.4)}
.orion-form-alert.is-error{background:rgba(255,120,120,.12);color:#ff9a9a;border:1px solid rgba(255,120,120,.4)}
.field .req{color:var(--lime)}
.field-legend{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);font-weight:600;display:block;margin-bottom:.5rem}
.field .checks{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.field .check{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.85);font-weight:400}
.field .field-note{font-size:.8rem;color:rgba(255,255,255,.5)}
.field select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--r-sm);padding:.9rem 1rem;color:#fff;font-family:inherit;font-size:1rem}
.field input[type=file]{width:100%;color:rgba(255,255,255,.8);font-size:.94rem}

/* Footer social icons */
.footer__social{display:flex;gap:.6rem;margin-top:1.3rem;flex-wrap:wrap}
.footer__social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;color:rgba(255,255,255,.75);transition:border-color .25s, color .25s, transform .25s}
.footer__social a:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.footer__social svg{width:19px;height:19px}
.footer__social img{width:19px;height:19px;object-fit:contain}