/* =========================================================
   CODEC Consultants — Design System
   Palette derived from logo: engineering blue, signal orange,
   circuit green. Blueprint/schematic motif throughout.
========================================================= */

:root{
  --ink:        #0B2A4A;   /* deep navy - headings */
  --blue:       #1A73B8;   /* primary brand blue */
  --blue-dark:  #0E4A7D;   /* pressed / gradient end */
  --blue-pale:  #E7F1FA;   /* tints */
  --orange:     #F5921E;   /* signal orange - CTA / accent */
  --orange-dark:#D9770C;
  --green:      #2FAE66;   /* circuit green - secondary accent */
  --paper:      #F6F8FA;   /* page background */
  --paper-2:    #EFF3F7;
  --line:       #D3DEE8;   /* hairlines / grid */
  --slate:      #3A4552;   /* body text */
  --slate-soft: #6B7784;
  --white:      #FFFFFF;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius: 10px;
  --shadow-sm: 0 2px 10px rgba(11,42,74,0.06);
  --shadow-md: 0 8px 30px rgba(11,42,74,0.10);
  --shadow-lg: 0 20px 60px rgba(11,42,74,0.16);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--paper);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  background-attachment: fixed;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3,h4,h5,.display-font{
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing:-0.01em;
}

.mono{ font-family: var(--font-mono); letter-spacing:0.02em; }

a{ color:var(--blue); text-decoration:none; }

::selection{ background:var(--orange); color:#fff; }

/* focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
}

/* ---------- eyebrow / tags ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--orange);
  display:inline-block;
}

/* ---------- Navbar ---------- */
.codec-nav{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:.55rem 0;
  transition:box-shadow .25s ease, padding .25s ease;
}
.codec-nav.scrolled{ box-shadow:var(--shadow-sm); padding:.35rem 0; }
.codec-nav .navbar-brand img{ height:38px; width:auto; transition:height .25s ease;}
.codec-nav.scrolled .navbar-brand img{ height:32px; }
.codec-nav .nav-link{
  font-family: var(--font-mono);
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:600;
  padding:.6rem .9rem !important;
  position:relative;
}
.codec-nav .nav-link::after{
  content:"";
  position:absolute; left:.9rem; right:.9rem; bottom:.35rem;
  height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.codec-nav .nav-link:hover::after,
.codec-nav .nav-link.active::after{ transform:scaleX(1); }
.codec-nav .nav-link.active{ color:var(--blue); }
.codec-nav .btn-nav-cta{
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:var(--orange);
  color:#fff;
  border:none;
  padding:.55rem 1.1rem;
  border-radius:6px;
  font-weight:700;
}
.codec-nav .btn-nav-cta:hover{ background:var(--orange-dark); color:#fff; }

/* ---------- Buttons ---------- */
.btn-codec-primary{
  background:var(--blue);
  color:#fff;
  border:none;
  padding:.8rem 1.6rem;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:var(--shadow-sm);
}
.btn-codec-primary:hover{ background:var(--blue-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }

.btn-codec-outline{
  background:transparent;
  color:var(--orange);
  border:1.5px solid var(--orange);
  padding:.75rem 1.5rem;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  transition:all .2s ease;
}
.btn-codec-outline:hover{ background:var(--orange); color:#fff; }

.btn-codec-orange{
  background:var(--orange);
  color:#fff;
  border:none;
  padding:.8rem 1.6rem;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-codec-orange:hover{ background:var(--orange-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md);}

/* ---------- Hero (shared band) ---------- */
.page-hero{
  padding:7.5rem 0 4rem;
  position:relative;
  background:
    radial-gradient(1000px 400px at 85% -10%, rgba(26,115,184,0.12), transparent 60%),
    linear-gradient(180deg, #fff, var(--paper));
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight:700;
  line-height:1.08;
}
.page-hero .lead{
  color:var(--slate-soft);
  font-size:1.15rem;
  max-width:640px;
}

/* ---------- Section rhythm ---------- */
section{ position:relative; }
.section-pad{ padding:5rem 0; }
.section-pad-sm{ padding:3.2rem 0; }
.bg-white-card{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bg-ink{
  background:linear-gradient(180deg, var(--ink), #071b30);
  color:#cfe0f0;
}
.bg-ink h2, .bg-ink h3, .bg-ink h4{ color:#fff; }

/* ---------- Cards ---------- */
.codec-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.9rem;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  overflow:hidden;
}
.codec-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.codec-card .card-index{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--slate-soft);
  letter-spacing:.08em;
}
.codec-card .card-icon{
  width:52px; height:52px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-pale);
  color:var(--blue);
  margin-bottom:1rem;
}
.codec-card h3, .codec-card h4{ font-size:1.15rem; margin-bottom:.6rem; }
.codec-card p{ color:var(--slate-soft); font-size:.95rem; margin-bottom:0;}

/* accent top-line that draws in on hover, like a trace routing */
.codec-card::before{
  content:"";
  position:absolute; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--orange), var(--blue));
  transition:width .35s ease;
}
.codec-card:hover::before{ width:100%; }

/* ---------- Stats ---------- */
.stat-block{ text-align:center; }
.stat-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.2rem,4vw,3.2rem);
  color:var(--blue);
  line-height:1;
}
.stat-label{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate-soft);
  margin-top:.4rem;
}

/* ---------- Industry chips ---------- */
.industry-chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:1.1rem 1.2rem;
  display:flex; align-items:center; gap:.8rem;
  transition:all .2s ease;
  height:100%;
}
.industry-chip:hover{ border-color:var(--green); background:#F3FBF6; transform:translateY(-3px); }
.industry-chip .ic-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--green); flex:0 0 auto;
}
.industry-chip span{ font-weight:600; color:var(--ink); font-size:.95rem; }

/* ---------- Client marquee ---------- */
.marquee-wrap{ overflow:hidden; position:relative; }
.marquee-wrap::before,.marquee-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2;
}
.marquee-wrap::before{ left:0; background:linear-gradient(90deg,#fff,transparent); }
.marquee-wrap::after{ right:0; background:linear-gradient(270deg,#fff,transparent); }
.marquee-track{
  display:flex; gap:2.2rem; width:max-content;
  animation:scroll-left 80s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.client-badge{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.8rem 1.4rem;
  white-space:nowrap;
  background:#fff;
}

/* ---------- Timeline (process is a real sequence) ---------- */
.codec-timeline{ position:relative; padding-left:2.6rem; }
.codec-timeline::before{
  content:""; position:absolute; left:.45rem; top:.4rem; bottom:.4rem; width:2px;
  background:repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px);
}
.tl-step{ position:relative; padding-bottom:2.2rem; }
.tl-step:last-child{ padding-bottom:0; }
.tl-step::before{
  content:"";
  position:absolute; left:-2.6rem; top:.15rem;
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--orange);
}
.tl-step .tl-num{ font-family:var(--font-mono); color:var(--blue); font-size:.8rem; font-weight:700; }
.tl-step h4{ margin:.2rem 0 .4rem; font-size:1.1rem; }
.tl-step p{ color:var(--slate-soft); margin:0; font-size:.93rem; }

/* ---------- Accordion (services) ---------- */
.codec-accordion .accordion-item{
  border:1px solid var(--line);
  margin-bottom:.85rem;
  border-radius:var(--radius) !important;
  overflow:hidden;
  background:#fff;
}
.codec-accordion .accordion-button{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  background:#fff;
  padding:1.15rem 1.4rem;
}
.codec-accordion .accordion-button:not(.collapsed){
  color:var(--blue);
  background:var(--blue-pale);
  box-shadow:none;
}
.codec-accordion .accordion-button:focus{ box-shadow:0 0 0 3px rgba(245,146,30,.3); }
.codec-accordion .accordion-button::after{ filter: hue-rotate(180deg) saturate(3); }
.codec-accordion .accordion-body{ padding:1.1rem 1.4rem 1.5rem; }
.codec-accordion .accordion-body ul{ columns:1; margin:0; padding-left:1.1rem; }
.codec-accordion .accordion-body li{ margin-bottom:.5rem; color:var(--slate); }
@media(min-width:768px){ .codec-accordion .accordion-body ul.cols-2{ columns:2; column-gap:2rem; } }

.service-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green);
  background:#E9F9F0;
  border:1px solid #C7EFD8;
  padding:.2rem .55rem;
  border-radius:5px;
  margin-bottom:.6rem;
}

/* ---------- Footer ---------- */
.codec-footer{
  background:linear-gradient(180deg, #0E2A46, #071627);
  color:#B9CBDA;
  padding:4rem 0 1.5rem;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px;
}
.codec-footer h5{ color:#fff; font-family:var(--font-display); font-size:1.05rem; margin-bottom:1.1rem; }
.codec-footer a{ color:#B9CBDA; }
.codec-footer a:hover{ color:var(--orange); }
.codec-footer .flogo{ height:36px; margin-bottom:1rem; }
.footer-bottom{ border-top:1px solid var(--green); margin-top:2.5rem; padding-top:1.4rem; font-size:.85rem; color:var(--orange); }

/* ---------- Team card ---------- */
.team-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; text-align:center; transition:transform .25s ease, box-shadow .25s ease;
}
.team-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.team-avatar{
  width:74px; height:74px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.4rem;
  margin:0 auto 1rem;
}
.team-card h4{ font-size:1.05rem; margin-bottom:.1rem; }
.team-card .role{ font-family:var(--font-mono); font-size:.75rem; color:var(--orange); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.8rem; }
.team-card a{ font-size:.88rem; display:block; }

/* ---------- Utility ---------- */
.section-title{ margin-bottom:1rem; }
.section-sub{ color:var(--slate-soft); max-width:640px; }
.divider-dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); display:inline-block; margin:0 .5rem; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.back-to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:1000;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .25s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--orange); }

.breadcrumb-mono{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate-soft);
}
.breadcrumb-mono a{ color:var(--blue); }

/* ---------- Custom icon sprite (currentColor line icons) ---------- */
.icon-svg{ width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card-icon svg{ width:26px; height:26px; }
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- Decorative background blobs ---------- */
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none;
}
.blob-blue{ background:radial-gradient(circle, rgba(26,115,184,0.22), transparent 70%); }
.blob-orange{ background:radial-gradient(circle, rgba(245,146,30,0.18), transparent 70%); }
.blob-green{ background:radial-gradient(circle, rgba(47,174,102,0.16), transparent 70%); }
.page-hero{ isolation:isolate; }
.page-hero > .container{ position:relative; z-index:1; }

/* ---------- Technical corner frame (blueprint drawing marks) ---------- */
.corner-frame{ position:relative; }
.corner-frame::before, .corner-frame::after{
  content:""; position:absolute; width:26px; height:26px;
  border-color:var(--orange); border-style:solid; z-index:2;
}
.corner-frame::before{ top:-1px; left:-1px; border-width:3px 0 0 3px; }
.corner-frame::after{ bottom:-1px; right:-1px; border-width:0 3px 3px 0; }

/* ---------- Illustration frames ---------- */
.illustration-frame{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-md); padding:1rem; position:relative;
}
.illustration-frame img{ width:100%; height:auto; display:block; }
.illustration-plain img{ width:100%; height:auto; display:block; }

/* ---------- Skyline band (Industries hero) ---------- */
.skyline-band{
  position:absolute; left:0; right:0; bottom:0; height:190px;
  opacity:0.9; z-index:0; pointer-events:none;
}
.skyline-band img{ width:100%; height:100%; object-fit:cover; object-position:bottom; }
@media(max-width:767px){
  .skyline-band{ height:110px; opacity:0.6; }
}

/* ---------- Equipment divider strip ---------- */
.equip-strip{
  display:flex; justify-content:center; flex-wrap:wrap; gap:2.4rem;
  padding:1.6rem 0;
}
.equip-strip .eq-item{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--slate-soft); transition:color .2s ease, transform .2s ease;
}
.equip-strip .eq-item:hover{ color:var(--blue); transform:translateY(-3px); }
.equip-strip .eq-item span{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- Team avatar polish ---------- */
.team-avatar{ position:relative; overflow:hidden; }
.team-avatar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.25), transparent 60%);
}
.team-avatar-ring{
  position:relative; width:82px; height:82px; margin:0 auto 1rem;
  border-radius:50%; border:2px dashed var(--line); display:flex; align-items:center; justify-content:center;
}
.team-avatar-ring .team-avatar{ width:66px; height:66px; margin:0; font-size:1.2rem; }

.contact-info-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; display:flex; gap:1rem; align-items:flex-start;
}
.contact-info-card .ci-icon{
  width:44px; height:44px; border-radius:8px; flex:0 0 auto;
  background:var(--blue-pale); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}

.form-control-codec{
  border:1px solid var(--line); border-radius:8px; padding:.75rem 1rem;
  font-family:var(--font-body);
}
.form-control-codec:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,115,184,.15); outline:none;
}
label.form-label-codec{
  font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--slate-soft); margin-bottom:.4rem;
}

/* ---------- floating annotation badge (over hero graphics) ---------- */
.floating-badge{
  position:absolute; z-index:3;
  background:#fff; border:1px solid var(--line);
  border-radius:30px; padding:.5rem 1rem;
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.04em; color:var(--ink);
  animation:float-y 4s ease-in-out infinite;
}
@keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

.pulse-dot{ animation:pulse-op 1.7s ease-in-out infinite; display:inline-block; }
@keyframes pulse-op{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.gear-rotate{ transform-origin:center; animation:spin 20s linear infinite; }
.gear-rotate-rev{ transform-origin:center; animation:spin-rev 16s linear infinite; }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes spin-rev{ from{ transform:rotate(360deg);} to{ transform:rotate(0deg);} }

/* full-bleed illustration strip used between sections */
.illustration-strip{
  width:100%; overflow:hidden; line-height:0;
  background:linear-gradient(180deg,#fff,var(--paper-2));
}
.illustration-strip img, .illustration-strip svg{ width:100%; height:auto; display:block; }

/* content + graphic split row */
.graphic-split{ display:flex; align-items:center; gap:2.5rem; }
@media(max-width:991px){ .graphic-split{ flex-direction:column; } }

/* duotone gradient banner for service category headers */
.illus-banner{
  height:96px; border-radius:10px; margin-bottom:1.1rem;
  display:flex; align-items:center; gap:.9rem; padding:0 1.3rem;
  position:relative; overflow:hidden;
}
.illus-banner i{ font-size:2.1rem; color:#fff; position:relative; z-index:1; }
.illus-banner .ib-label{ color:#fff; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.9; position:relative; z-index:1; }
.illus-banner::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
  background-size:16px 16px;
}
.media-blue{ background:linear-gradient(135deg, #103358, var(--blue)); }
.media-orange{ background:linear-gradient(135deg, #7a4404, var(--orange)); }
.media-green{ background:linear-gradient(135deg, #114a2c, var(--green)); }
.media-ink{ background:linear-gradient(135deg, #04101d, var(--ink)); }
.media-teal{ background:linear-gradient(135deg, #0b3a45, #1893a8); }
.media-plum{ background:linear-gradient(135deg, #3d1240, #8a2e8f); }