/* =========================================================
   TEKGRASS — design tokens
   Concept: technology talent, cultivated with intent.
   The wordmark's root/network mark recurs as the page's
   signature motif — thin branching lines standing in for
   both grass roots and network topology.
   ========================================================= */
:root{
  --paper:#FFFFFF;
  --paper-alt:#F1F4F9;
  --ink:#0E1420;
  --ink-soft:#3C4456;
  --sage:#6B7280;
  --navy:#001B3C;
  --navy-strong:#001430;
  --navy-deep:#000C1C;
  --green:#4F9A1E;
  --green-light:#7CC13F;
  --line:#E3E7EE;
  --line-dark:#132241;
  --white:#FFFFFF;

  --serif:'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --maxw:1180px;
  --radius:4px;
  --shadow:0 1px 2px rgba(19,28,21,0.06), 0 8px 24px -12px rgba(19,28,21,0.18);
}

*,*::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(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.12;
  margin:0 0 0.5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:600}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem)}
h3{font-size:1.15rem; font-weight:600}
p{margin:0 0 1em; color:var(--ink-soft)}
.muted{color:var(--sage)}
a{color:var(--navy); text-decoration:none}
a:hover{color:var(--green)}
ul{margin:0; padding:0; list-style:none}

:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:2px;
}

img{max-width:100%; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:14px; height:1px;
  background:var(--green);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--navy);
  color:var(--white);
  border:1px solid var(--navy);
  padding:12px 22px;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.94rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{background:var(--navy-strong); border-color:var(--navy-strong); color:var(--white); transform:translateY(-1px)}
.btn.small{padding:9px 16px; font-size:0.86rem}
.btn.ghost{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy); color:var(--white)}
.btn.light{background:var(--white); color:var(--navy); border-color:var(--white)}
.btn.light:hover{background:var(--paper-alt); color:var(--navy-strong)}
.btn.dark{background:var(--navy-deep); border-color:var(--navy-deep); color:var(--white)}
.btn.dark:hover{background:#0B110C}

/* =========================================================
   Header / nav
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(246,244,236,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 28px;
}
.brand-logo{display:inline-flex; align-items:center}
.brand-logo img{height:38px; width:auto; display:block}
#navlinks{
  display:flex; align-items:center; gap:30px;
  font-size:0.92rem; font-weight:500;
}
#navlinks a{color:var(--ink-soft); position:relative; padding:4px 0}
#navlinks a:hover{color:var(--navy)}
#navlinks a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--green);
  transition:right .18s ease;
}
#navlinks a:hover::after{right:0}
#navlinks a.nav-highlight{color:var(--green)}
.menu{
  display:none;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  font-size:1.1rem; padding:6px 10px; cursor:pointer; color:var(--ink);
}
.desktop-cta{white-space:nowrap}

@media (max-width:860px){
  .desktop-cta{display:none}
  .menu{display:block}
  #navlinks{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start;
    gap:0; padding:6px 28px 18px;
    max-height:0; overflow:hidden;
  }
  #navlinks.open{max-height:420px; padding:14px 28px 22px}
  #navlinks a{width:100%; padding:10px 0; border-bottom:1px solid var(--line)}
}

/* =========================================================
   Section rhythm
   ========================================================= */
.section{padding:76px 0; position:relative}
.section.alt{background:var(--paper-alt)}
.section.soft2{background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section.dark{background:var(--navy-deep); color:var(--paper)}
.section.dark h2, .section.dark h3{color:var(--paper)}
.section.dark p{color:#B7C2B7}
.section.dark .eyebrow{color:var(--green-light)}

.split{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* Root-network divider used between major page sections */
.section + .section, .page-hero + .section{
  position:relative;
}
.section::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw); height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}
.section.alt::before, .section.dark::before, .section.soft2::before{display:none}

/* =========================================================
   Hero (homepage)
   ========================================================= */
.hero{
  padding:64px 0 88px;
  background:
    radial-gradient(ellipse at top right, rgba(0,27,60,0.05), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(79,154,30,0.05), transparent 50%),
    var(--paper);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='none' stroke='%23001B3C' stroke-opacity='0.07' stroke-width='1.4'%3E%3Cpath d='M40 10 L40 90 C40 130 10 130 -10 170'/%3E%3Cpath d='M40 90 C40 125 75 122 90 160'/%3E%3Cpath d='M40 50 C40 75 15 72 5 100'/%3E%3Cpath d='M260 40 L260 130 C260 165 230 165 215 200'/%3E%3Cpath d='M260 130 C260 160 290 158 300 190'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
  position:relative; z-index:1;
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:0.45em}
.hero .actions{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 30px}
.proof-strip{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.04em;
  color:var(--sage); padding-top:20px; border-top:1px solid var(--line);
}
.proof-strip span::before{content:"— "; color:var(--green)}

.hero-card{
  background:var(--navy-deep);
  color:var(--paper);
  border-radius:10px;
  padding:34px 32px;
  position:relative;
  box-shadow:var(--shadow);
}
.hero-card .muted{color:#9FB09E; font-size:0.86rem; margin-bottom:16px}
.hero-card .pulse{
  position:absolute; top:28px; right:30px;
  width:34px; height:34px;
}
.hero-card .pulse::before, .hero-card .pulse::after{
  content:""; position:absolute; inset:0;
  border-radius:50%; border:1.5px solid var(--green);
}
.hero-card .pulse::after{
  animation:pulse-ring 2.6s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(0.5); opacity:0.9}
  100%{transform:scale(2.1); opacity:0}
}
.steps{display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; margin:6px 0 24px}
.steps b{
  display:block; font-family:var(--mono); font-size:0.68rem;
  letter-spacing:0.1em; color:var(--green-light); margin-bottom:5px;
}
.steps span{font-size:0.9rem; color:#D7DED5}
.hero-card .metric{
  border-top:1px solid var(--line-dark); padding-top:18px;
}
.hero-card .metric strong{display:block; font-family:var(--serif); font-size:1.15rem; margin-bottom:4px}
.hero-card .metric span{font-size:0.85rem; color:#9FB09E}

/* =========================================================
   Page hero (interior pages)
   ========================================================= */
.page-hero{padding:54px 0 46px}
.breadcrumbs{
  font-family:var(--mono); font-size:0.74rem; color:var(--sage);
  margin-bottom:18px;
}
.breadcrumbs a{color:var(--sage)}
.breadcrumbs a:hover{color:var(--green)}
.page-hero h1{max-width:820px}
.page-hero .muted{max-width:640px; font-size:1.02rem}
.page-hero .actions{margin-top:22px; display:flex; gap:14px}

/* =========================================================
   Feature / mini grids
   ========================================================= */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.feature{background:var(--paper); padding:28px 26px}
.section.alt .feature{background:var(--paper-alt)}
.feature b{display:block; font-family:var(--serif); font-size:1.05rem; margin-bottom:8px; color:var(--navy)}
.feature p{margin:0; font-size:0.92rem}
@media (max-width:760px){.feature-grid{grid-template-columns:1fr}}

.mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px}
.mini-grid b{display:block; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--green); margin-bottom:6px}
.mini-grid span{font-size:0.9rem; color:var(--ink-soft)}
@media (max-width:700px){.mini-grid{grid-template-columns:1fr}}

/* =========================================================
   Service / capability cards
   ========================================================= */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:26px 22px; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover{border-color:var(--navy); transform:translateY(-3px); box-shadow:var(--shadow)}
.card .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--paper-alt); color:var(--navy);
  font-size:1rem; margin-bottom:14px;
}
.card h3{margin-bottom:6px; font-size:1.02rem}
.card p{font-size:0.88rem; margin-bottom:12px}
.card-link{font-family:var(--mono); font-size:0.78rem; color:var(--navy); letter-spacing:0.02em}
.card:hover .card-link{color:var(--green)}

/* =========================================================
   Audience grid (clients / candidates)
   ========================================================= */
.audience-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:820px){.audience-grid{grid-template-columns:1fr}}
.audience{
  background:var(--white); border:1px solid var(--line); border-radius:10px; padding:34px 30px;
}
.audience.green{background:var(--navy); color:var(--white); border-color:var(--navy)}
.audience.green h3, .audience.green p{color:var(--white)}
.audience.green ul li{color:#DCE5DA}
.audience ul{margin:16px 0 22px; display:flex; flex-direction:column; gap:8px}
.audience ul li{
  font-size:0.9rem; color:var(--ink-soft); padding-left:18px; position:relative;
}
.audience ul li::before{
  content:""; position:absolute; left:0; top:0.55em; width:8px; height:1px; background:var(--green);
}

/* =========================================================
   Solution finder (planner)
   ========================================================= */
.planner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:start}
@media (max-width:860px){.planner{grid-template-columns:1fr}}
.choices{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.choices button{
  font-family:var(--sans); font-weight:600; font-size:0.86rem;
  padding:11px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); color:var(--ink-soft); cursor:pointer;
  transition:all .15s ease;
}
.choices button:hover{border-color:var(--navy); color:var(--navy)}
.choices button.active{background:var(--navy); border-color:var(--navy); color:var(--white)}
.recommend{
  background:var(--navy-deep); color:var(--paper); border-radius:10px; padding:30px 28px;
}
.recommend span{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-light)}
.recommend h3{color:var(--paper); margin:10px 0 8px}
.recommend p{color:#B7C2B7; font-size:0.9rem}
.recommend a{color:var(--green-light); font-weight:600; font-size:0.9rem}
.recommend a:hover{color:var(--green)}

/* =========================================================
   Industries (dark section)
   ========================================================= */
.industry-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-top:10px}
@media (max-width:860px){.industry-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.industry-grid{grid-template-columns:1fr}}
.industry-grid > div{background:var(--navy-deep); padding:28px 24px}
.industry-grid b{font-family:var(--mono); color:var(--green); font-size:0.78rem}
.industry-grid h3{color:var(--paper); font-size:1rem; margin:10px 0 8px}
.industry-grid p{color:#9FB09E; font-size:0.86rem; margin:0}

/* =========================================================
   Tech chips
   ========================================================= */
.techs{display:flex; flex-wrap:wrap; gap:9px}
.techs span{
  font-family:var(--mono); font-size:0.78rem; color:var(--navy);
  background:var(--paper-alt); border:1px solid var(--line);
  padding:7px 13px; border-radius:999px;
}

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{background:var(--navy); color:var(--white); padding:52px 0}
.cta-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cta-row h2{color:var(--white); margin-bottom:4px; font-size:1.5rem}
.cta-row p{color:#DCE5DA; margin:0}
.cta-row .actions{display:flex; gap:12px; flex-wrap:wrap}

/* =========================================================
   Forms
   ========================================================= */
.form-shell{display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:start}
@media (max-width:860px){.form-shell{grid-template-columns:1fr}}
.contact-points{display:flex; flex-direction:column; gap:16px; margin-top:22px}
.contact-point{padding:14px 0; border-top:1px solid var(--line)}
.contact-point b{display:block; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-bottom:5px}
.contact-point span, .contact-point a{font-size:0.95rem; color:var(--ink)}

.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:32px; display:flex; flex-direction:column; gap:16px;
}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.field-grid{grid-template-columns:1fr}}
.form-card label{
  display:flex; flex-direction:column; gap:7px;
  font-size:0.84rem; font-weight:600; color:var(--ink-soft);
}
.form-card input, .form-card select, .form-card textarea{
  font-family:var(--sans); font-size:0.95rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 12px; font-weight:400;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{
  outline:none; border-color:var(--navy); background:var(--white);
}
.form-card textarea{resize:vertical; font-family:var(--sans)}
.form-card .btn{align-self:flex-start; margin-top:6px}
.form-card .help{font-size:0.8rem; color:var(--sage); margin:0}

/* =========================================================
   Careers / job board
   ========================================================= */
.jobs-toolbar{display:flex; gap:12px; margin:26px 0 22px; flex-wrap:wrap}
.jobs-toolbar input, .jobs-toolbar select{
  font-family:var(--sans); font-size:0.92rem; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--white); color:var(--ink);
}
.jobs-toolbar input{flex:1; min-width:220px}
.jobs-toolbar input:focus, .jobs-toolbar select:focus{outline:none; border-color:var(--navy)}

.job-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.job-card{
  background:var(--white); padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.job-card .job-main h3{font-size:1rem; margin-bottom:4px}
.job-card .job-meta{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:0.76rem; color:var(--sage)}
.job-card .job-meta span::before{content:"— "; color:var(--green)}
.job-card .btn{flex-shrink:0}
.job-empty{padding:34px 22px; text-align:center; color:var(--sage); background:var(--white); font-size:0.92rem}

/* =========================================================
   Process (staffing.html)
   ========================================================= */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:26px}
@media (max-width:860px){.process{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.process{grid-template-columns:1fr}}
.process > div{border-top:2px solid var(--navy); padding-top:16px}
.process b{font-family:var(--mono); font-size:0.85rem; color:var(--green)}
.process h3{margin:8px 0 6px; font-size:1rem}
.process p{font-size:0.88rem; margin:0}

/* =========================================================
   Services page layout
   ========================================================= */
.content-grid{display:grid; grid-template-columns:220px 1fr; gap:52px; align-items:start}
@media (max-width:820px){.content-grid{grid-template-columns:1fr}}
.side-nav{position:sticky; top:90px; display:flex; flex-direction:column; gap:2px}
.side-nav a{
  font-size:0.88rem; color:var(--ink-soft); padding:9px 12px; border-radius:6px;
  border-left:2px solid transparent;
}
.side-nav a:hover{color:var(--navy); background:var(--paper-alt); border-left-color:var(--green)}
.service-block{padding:30px 0; border-top:1px solid var(--line)}
.service-block:first-child{border-top:none; padding-top:0}
.service-block .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--paper-alt); color:var(--navy);
  margin-bottom:14px; font-size:1.1rem;
}
.service-block ul{display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; margin-top:14px}
.service-block ul li{
  font-size:0.88rem; color:var(--ink-soft); padding-left:16px; position:relative;
}
.service-block ul li::before{content:""; position:absolute; left:0; top:0.6em; width:7px; height:1px; background:var(--green)}
@media (max-width:560px){.service-block ul{grid-template-columns:1fr}}

/* =========================================================
   FAQ
   ========================================================= */
.faq{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:20px}
.faq details{background:var(--paper-alt); padding:18px 22px}
.faq summary{
  cursor:pointer; font-weight:600; font-size:0.96rem; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--green); font-size:1.1rem}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0; font-size:0.9rem}

/* =========================================================
   Footer
   ========================================================= */
footer{background:var(--navy-deep); color:#B7C2B7; padding:56px 0 26px; margin-top:20px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding-bottom:36px; border-bottom:1px solid var(--line-dark)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
footer .brand-logo img{height:30px; filter:brightness(0) invert(1) opacity(0.92)}
footer .note{font-size:0.84rem; margin-top:14px; color:#8FA08E}
footer h4{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-light); margin:0 0 14px}
footer div > a{display:block; font-size:0.9rem; color:#C7D0C5; padding:5px 0}
footer div > a:hover{color:var(--green-light)}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:22px; font-size:0.8rem; color:#7C8E7A;
}

/* =========================================================
   Small screens: general spacing
   ========================================================= */
@media (max-width:640px){
  .section{padding:56px 0}
  .cta-row{flex-direction:column; align-items:flex-start}
}

/* =========================================================
   Stats strip (animated counters)
   ========================================================= */
.stats-strip{
  background:var(--navy-deep);
  padding:38px 0;
}
.stats-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
@media (max-width:760px){.stats-row{grid-template-columns:1fr 1fr}}
.stat{text-align:left; border-left:2px solid var(--green); padding-left:16px}
.stat .num{
  font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--white); display:flex; align-items:baseline; gap:2px;
}
.stat .num .suffix{color:var(--green-light); font-size:0.7em}
.stat .label{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; color:#8FA3C4; margin-top:4px; text-transform:uppercase}

/* =========================================================
   (partners/marquee section removed by request)
   ========================================================= */

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials{background:var(--paper-alt)}
.testi-track{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px}
@media (max-width:900px){.testi-track{grid-template-columns:1fr}}
.testi-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:28px 26px; display:flex; flex-direction:column; gap:16px;
}
.testi-card .quote-mark{
  font-family:var(--serif); font-size:2.4rem; color:var(--green); line-height:1; height:0.6em;
}
.testi-card p{font-size:0.98rem; color:var(--ink-soft); margin:0}

/* =========================================================
   Services dropdown (desktop nav)
   ========================================================= */
.has-dropdown{position:relative; display:inline-flex; align-items:center}
.has-dropdown > a::after{content:" ▾"; font-size:0.7em; color:var(--sage)}
.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow);
  padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  width:420px;
  opacity:0; visibility:hidden; translate:0 6px;
  transition:opacity .16s ease, translate .16s ease, visibility .16s;
  z-index:50;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; translate:0 0;
}
.dropdown a{
  display:block; padding:10px 12px; border-radius:6px;
  font-size:0.86rem; color:var(--ink-soft);
}
.dropdown a:hover{background:var(--paper-alt); color:var(--navy)}
@media (max-width:860px){
  .dropdown{position:static; transform:none; width:auto; box-shadow:none; border:none;
    display:none; grid-template-columns:1fr; padding:0 0 0 14px; opacity:1; visibility:visible; translate:0}
  .has-dropdown.open .dropdown{display:block}
}

/* =========================================================
   AI & Automation highlight (animated network visual)
   ========================================================= */
.ai-highlight{background:var(--paper-alt)}
.ai-points{display:flex; flex-direction:column; gap:10px; margin:20px 0 26px}
.ai-points li{
  font-size:0.94rem; color:var(--ink-soft); padding-left:22px; position:relative;
}
.ai-points li::before{
  content:""; position:absolute; left:0; top:0.55em; width:12px; height:1px; background:var(--green);
}
.ai-visual{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:12px; display:flex; align-items:center; justify-content:center;
}
.ai-visual svg{width:100%; height:auto; max-height:320px}
.ai-node{fill:var(--navy); transform-box:fill-box; transform-origin:center}
.ai-node.n3{fill:var(--green)}
.ai-node{animation:ai-pulse 2.6s ease-in-out infinite}
.ai-node.n2{animation-delay:0.4s}
.ai-node.n3{animation-delay:0.8s}
.ai-node.n4{animation-delay:1.2s}
.ai-node.n5{animation-delay:1.6s}
@keyframes ai-pulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:0.55; transform:scale(1.25)}
}
.ai-signal{fill:var(--green-light)}
.ai-signal-b{fill:var(--navy-strong)}