/* ==========================================================================
   PWEB Services — design tokens
   ========================================================================== */
:root{
  --navy-900:#0B2545;
  --navy-800:#123B6B;
  --navy-700:#1A4A85;
  --blue-600:#1D4ED8;
  --blue-500:#3B6FE0;
  --orange-500:#F97316;
  --orange-600:#EA580C;
  --orange-100:#FFEDD9;
  --ink:#0F1B2D;
  --ink-soft:#4A5A72;
  --line:#E1E7EF;
  --bg:#F6F8FB;
  --white:#FFFFFF;

  --font-head:"Space Grotesk", "Segoe UI", sans-serif;
  --font-body:"Inter", "Segoe UI", sans-serif;

  --radius-sm:6px;
  --radius-md:10px;
  --shadow-card:0 1px 2px rgba(11,37,69,.06), 0 8px 24px rgba(11,37,69,.06);
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}

h1,h2,h3,h4{
  font-family:"Poppins", sans-serif;
  color:var(--navy-900);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2.1rem,4vw,3.2rem); font-weight:700; letter-spacing:-0.01em;}
h2{font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-0.01em;}
h3{font-size:1.25rem;}
p{margin:0 0 1em; color:var(--ink-soft); max-width:62ch;}
a{color:var(--blue-600); text-decoration:none;}
a:hover{color:var(--orange-600);}
ul{padding:0; margin:0; list-style:none;}
img{max-width:100%; display:block;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy-900); color:#fff;
  padding:.6em 1em; z-index:200;
}
.skip-link:focus{left:1em; top:1em;}

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

:focus-visible{outline:3px solid var(--orange-500); outline-offset:2px;}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.75em 1.4em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  border-radius:var(--radius-sm);
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-primary{ background:var(--orange-500); color:#fff; }
.btn-primary:hover{ background:var(--orange-600); color:#fff; }
.btn-secondary{ background:var(--navy-900); color:#fff; }
.btn-secondary:hover{ background:var(--navy-800); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--navy-900); color:var(--navy-900); }
.btn-outline:hover{ border-color:var(--orange-500); color:var(--orange-600); }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-outline-light:hover{ border-color:var(--orange-500); background:var(--orange-500); color:#fff; }
.btn-block{width:100%;}
.btn:active{transform:translateY(1px);}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{display:flex; align-items:center; gap:.6em;}
.brand-mark{display:flex;}
.brand-text{
  font-family:"Poppins", sans-serif; font-weight:700; font-size:1.2rem;
  color:var(--navy-900); letter-spacing:-0.01em;
}
.brand-accent{color:var(--orange-500);}

.main-nav{display:flex; align-items:center; gap:1.75em;}
.main-nav a{
  color:var(--ink); font-weight:500; font-size:.95rem;
  padding:.3em 0; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a.is-active{
  color:var(--navy-900); border-bottom-color:var(--orange-500);
}
.nav-cta{border-bottom:none !important; margin-left:.5em;}
.nav-cta:hover{color:#fff;}

.nav-toggle-input{display:none;}
.nav-toggle{
  display:none; flex-direction:column; gap:4px; cursor:pointer; padding:6px;
}
.nav-toggle span{width:24px; height:2px; background:var(--navy-900); display:block;}

/* ==========================================================================
   Flash messages
   ========================================================================== */
.flash-wrap{padding-top:20px;}
.flash{
  padding:.9em 1.2em; border-radius:var(--radius-sm); margin-bottom:1em;
  font-weight:500; font-size:.95rem;
}
.flash-success{ background:#E7F6EC; color:#1B5E33; border:1px solid #BEE7C9; }
.flash-error{ background:#FDECEA; color:#8A2A1E; border:1px solid #F6C7C0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:var(--navy-900);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px;
  align-items:center;
  padding:88px 24px 80px;
}
.hero-eyebrow{
  display:inline-block; color:var(--orange-500); font-weight:600;
  font-size:.95rem; margin-bottom:1em;
}
.hero h2{ color:#fff; }
.hero h2 em{
  font-style:normal; color:var(--orange-500);
}
.hero-lede{ color:#C7D3E5; font-size:1.1rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:1.75em; flex-wrap:wrap; }

.hero-graphic{ display:flex; align-items:center; justify-content:center; }
.hero-graphic svg{ width:100%; height:auto; max-width:440px; }

.hero-strip{
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-strip .wrap{
  display:flex; flex-wrap:wrap; gap:10px; padding:18px 24px;
}
.hero-strip a{
  color:#DCE6F5; font-size:.88rem; font-weight:500;
  padding:.4em .9em; border:1px solid rgba(255,255,255,.18); border-radius:999px;
}
.hero-strip a:hover{ color:#fff; border-color:var(--orange-500); }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section{ padding:80px 0; }
.section-tight{ padding:56px 0; }
.section-alt{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:2.5em; }
.section-head h2{ margin-bottom:.4em; }

/* ==========================================================================
   Service groups (Services page + home teaser)
   ========================================================================== */
.service-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns:280px 1fr; gap:32px;
  padding:36px 0; border-bottom:1px solid var(--line);
  border-left:4px solid var(--accent, var(--blue-600));
  padding-left:24px;
}
.service-row:nth-child(odd){ --accent: var(--blue-600); }
.service-row:nth-child(even){ --accent: var(--orange-500); }
.service-row h3{ margin-bottom:.3em; }
.service-row .tagline{ color:var(--ink-soft); font-size:.95rem; margin-bottom:0; }
.service-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5em 2em; }
.service-items li{
  color:var(--ink); font-size:.95rem; padding-left:1.1em; position:relative;
}
.service-items li::before{
  content:""; position:absolute; left:0; top:.55em; width:6px; height:6px;
  background:var(--accent, var(--orange-500)); border-radius:1px;
}

/* Home teaser cards (compact) */
.service-teaser-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.service-teaser{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; border-top:3px solid var(--accent, var(--blue-600));
}
.service-teaser:nth-child(3n+1){ --accent: var(--blue-600); }
.service-teaser:nth-child(3n+2){ --accent: var(--orange-500); }
.service-teaser:nth-child(3n+3){ --accent: var(--navy-800); }
.service-teaser h3{ font-size:1.05rem; margin-bottom:.35em; }
.service-teaser p{ font-size:.92rem; margin:0; }

/* ==========================================================================
   Solutions (problem -> solution rows)
   ========================================================================== */
.solution-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px;
  padding:28px 0; border-bottom:1px solid var(--line);
}
.solution-row:first-child{ border-top:1px solid var(--line); }
.solution-audience{ font-weight:600; color:var(--navy-900); font-size:.85rem; text-transform:none; margin-bottom:.4em; display:block;}
.solution-problem{ font-size:1.1rem; color:var(--ink); font-weight:500; margin:0; }
.solution-arrow{ color:var(--orange-500); font-size:1.4rem; font-family:"Poppins", sans-serif; }
.solution-answer{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--orange-500); padding:16px 20px; border-radius:var(--radius-sm); }
.solution-answer p{ margin:0; color:var(--ink); font-size:.95rem; }

/* ==========================================================================
   Portfolio pipeline diagram
   ========================================================================== */
.pipeline{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; padding:28px; background:var(--navy-900); border-radius:var(--radius-md);
  margin-bottom:16px;
}
.pipeline-step{
  color:#fff; font-family:"Poppins", sans-serif; font-weight:600; font-size:.92rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:.7em 1.1em; border-radius:8px; text-align:center; flex:1 1 140px;
}
.pipeline-arrow{ color:var(--orange-500); font-size:1.3rem; flex:0 0 auto; }

.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.portfolio-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px; box-shadow:var(--shadow-card);
}
.portfolio-card h3{ font-size:1.05rem; }
.tech-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:.8em; }
.tech-tags span{
  font-size:.78rem; font-weight:600; color:var(--blue-600); background:#EAF0FE;
  padding:.25em .7em; border-radius:999px;
}

.case-study{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; margin-bottom:18px;
}
.case-study h3{ margin-bottom:1em; }
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.case-grid dt{
  font-family:"Poppins", sans-serif; font-weight:600; font-size:.8rem; color:var(--orange-600);
  margin-bottom:.4em;
}
.case-grid dd{ margin:0; font-size:.92rem; color:var(--ink); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.pricing-table th, .pricing-table td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--line); }
.pricing-table th{ background:var(--navy-900); color:#fff; font-family:"Poppins", sans-serif; font-weight:600; font-size:.9rem; }
.pricing-table tr:last-child td{ border-bottom:none; }
.pricing-table tr:hover td{ background:#FBF6EF; }
.pricing-table td:last-child{ color:var(--orange-600); font-weight:600; white-space:nowrap; }
.pricing-note{ margin-top:1.2em; font-size:.9rem; color:var(--ink-soft); }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.reasons{ display:grid; gap:14px; margin-top:1.5em; }
.reasons li{
  display:flex; gap:.7em; align-items:flex-start; font-size:.95rem; color:var(--ink);
  padding-left:0;
}
.reasons li::before{ content:"—"; color:var(--orange-500); font-weight:700; }

.founder-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; box-shadow:var(--shadow-card);
}
.founder-card h3{ margin-bottom:.2em; }
.founder-role{ color:var(--orange-600); font-weight:600; font-size:.88rem; margin-bottom:1em; display:block; }

/* ==========================================================================
   Contact / Quote form
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:32px; box-shadow:var(--shadow-card);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:.4em; color:var(--navy-900); }
.field input, .field select, .field textarea{
  width:100%; padding:.75em .9em; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.95rem; background:var(--bg); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue-600); background:var(--white);
}
.field textarea{ resize:vertical; min-height:110px; }
.field-hint{ font-size:.82rem; color:var(--ink-soft); margin-top:.3em; }

.contact-side{ display:flex; flex-direction:column; gap:20px; }
.contact-info-card{
  background:var(--navy-900); color:#fff; border-radius:var(--radius-md); padding:28px;
}
.contact-info-card h3{ color:#fff; }
.contact-info-card a{ color:var(--orange-500); }
.contact-info-list{ margin-top:1em; display:grid; gap:.7em; }
.contact-info-list li{ font-size:.92rem; color:#C7D3E5; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color:#fff; text-align:left; padding:56px 0; border-radius:var(--radius-md);
}
.cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; margin-bottom:.25em; }
.cta-band p{ color:#C7D3E5; margin:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--navy-900); color:#C7D3E5; padding-top:56px; }
.footer-inner{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .brand-text{ color:#fff; }
.footer-brand p{ color:#9FB1CC; font-size:.9rem; margin:.8em 0 1.2em; }
.footer-col h4{ color:#fff; font-size:.9rem; margin-bottom:1em; }
.footer-col ul{ display:grid; gap:.6em; }
.footer-col a{ color:#B9C6DC; font-size:.9rem; }
.footer-col a:hover{ color:var(--orange-500); }
.footer-bottom{
  display:flex; justify-content:space-between; padding:20px 24px 28px;
  font-size:.82rem; color:#7E90AC; flex-wrap:wrap; gap:8px;
}

/* ==========================================================================
   404
   ========================================================================== */
.error-page{ text-align:center; padding:120px 24px; }
.error-page h1{ font-size:5rem; color:var(--orange-500); }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.eyebrow{ color:var(--orange-600); font-weight:600; font-size:.85rem; margin-bottom:.6em; display:block; }

/* Hero load-in (single orchestrated moment) */
@media (prefers-reduced-motion: no-preference){
  .hero-eyebrow, .hero h2, .hero-lede, .hero-actions{
    animation: rise .6s ease both;
  }
  .hero h2{ animation-delay:.05s; }
  .hero-lede{ animation-delay:.12s; }
  .hero-actions{ animation-delay:.18s; }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px){
  .hero-inner{ grid-template-columns:1fr; padding-top:56px; }
  .hero-graphic{ order:-1; max-width:280px; margin:0 auto; }
  .service-teaser-grid, .portfolio-grid, .case-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
  .main-nav{
    display:none; position:absolute; top:72px; left:0; right:0;
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:16px 24px 24px; border-bottom:1px solid var(--line);
    gap:.9em;
  }
  .nav-toggle-input:checked ~ .main-nav{ display:flex; }
  .nav-toggle{ display:flex; }
  .nav-cta{ margin-left:0; }
  .service-row{ grid-template-columns:1fr; }
  .service-items{ grid-template-columns:1fr; }
  .solution-row{ grid-template-columns:1fr; text-align:left; }
  .solution-arrow{ display:none; }
  .service-teaser-grid, .portfolio-grid, .case-grid, .footer-inner{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .pipeline{ flex-direction:column; align-items:stretch; }
  .pipeline-arrow{ text-align:center; transform:rotate(90deg); }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Services page — hero, carousel, detailed breakdown
   ========================================================================== */
.services-hero{
  background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  padding:64px 0 40px;
}
.services-hero .eyebrow{ color:var(--orange-500); }
.services-hero h2{ color:#fff; }
.services-hero p{ color:#C7D3E5; }

.carousel-section{ padding-top:56px; }
.carousel-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5em;
}
.carousel-head h2{ margin-bottom:0; }
.carousel-controls{ display:flex; gap:10px; }
.carousel-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); color:var(--navy-900); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.carousel-btn:hover{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }

.carousel-viewport{ overflow:hidden; margin:0 -4px; }
.carousel-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px; margin:0; list-style:none;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }

.carousel-card{
  scroll-snap-align:start; flex:0 0 auto;
  width:calc((100% - 40px) / 3);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
.carousel-card h3{ font-size:1.1rem; margin-bottom:.3em; }
.carousel-card p{ font-size:.9rem; margin-bottom:1em; }
.carousel-count{
  font-size:.78rem; font-weight:600; color:var(--ink-soft);
  margin-bottom:1.2em; margin-top:auto;
}
.carousel-link{
  display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.9rem;
  color:var(--navy-900);
}
.carousel-link:hover{ color:var(--orange-600); }
.carousel-link svg{ transition:transform .15s ease; }
.carousel-link:hover svg{ transform:translateX(3px); }

.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:1.75em; }
.carousel-dot{
  width:8px; height:8px; border-radius:50%; border:none; background:var(--line);
  cursor:pointer; padding:0; transition:background-color .15s ease, width .15s ease;
}
.carousel-dot.is-active{ background:var(--orange-500); width:22px; border-radius:4px; }

.service-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px; margin-bottom:1em;
}
.service-icon svg{ width:26px; height:26px; }
.accent-blue .service-icon, .service-icon.accent-blue{ background:#EAF0FE; color:var(--blue-600); }
.accent-orange .service-icon, .service-icon.accent-orange{ background:var(--orange-100); color:var(--orange-600); }

.service-icon-lg{ width:56px; height:56px; border-radius:14px; margin-bottom:0; flex:0 0 auto; }
.service-icon-lg svg{ width:30px; height:30px; }

.service-detail-list{ display:flex; flex-direction:column; gap:24px; }
.service-detail{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:32px; box-shadow:var(--shadow-card);
  border-top:4px solid var(--accent-color, var(--blue-600));
  scroll-margin-top:96px;
}
.service-detail.accent-blue{ --accent-color: var(--blue-600); }
.service-detail.accent-orange{ --accent-color: var(--orange-500); }
.service-detail.accent-blue .service-icon-lg{ background:#EAF0FE; color:var(--blue-600); }
.service-detail.accent-orange .service-icon-lg{ background:var(--orange-100); color:var(--orange-600); }

.service-detail-head{
  display:flex; align-items:flex-start; gap:20px; margin-bottom:1.75em;
}
.service-detail-head h3{ margin-bottom:.25em; }
.service-detail-head .tagline{ margin-bottom:0; }

.service-detail .service-items{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.7em 2em;
  margin-bottom:1.75em;
}
.service-detail .service-items li{
  display:flex; align-items:flex-start; gap:.6em; font-size:.95rem; color:var(--ink);
  padding-left:0;
}
.service-detail .service-items li::before{ content:none; }
.check-icon{ color:var(--accent-color, var(--orange-500)); flex:0 0 auto; margin-top:.15em; }

.service-detail-cta{ font-size:.9rem; padding:.65em 1.3em; }

@media (max-width: 960px){
  .carousel-card{ width:calc((100% - 20px) / 2); }
}
@media (max-width: 720px){
  .carousel-card{ width:88%; }
  .service-detail .service-items{ grid-template-columns:1fr; }
  .service-detail-head{ flex-direction:column; gap:12px; }
  .carousel-head{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ==========================================================================
   Tech-provider identity layer: monospace accents, terminal window,
   stat strip, tech-stack badges, status indicator, grid texture.
   ========================================================================== */
:root{
  --font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

/* Eyebrows read like code comments site-wide */
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.78rem;
}
.eyebrow::before{ content:"// "; color:var(--blue-600); }

/* Subtle engineering-blueprint dot grid, for dark sections */
.grid-bg{
  position:relative;
}
.grid-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}
.grid-bg > *{ position:relative; z-index:1; }

/* Live status badge (nav) */
.status-badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
  padding:.4em .8em; border:1px solid var(--line); border-radius:999px;
}
.status-dot{
  width:8px; height:8px; border-radius:50%; background:#22C55E; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
}
@media (prefers-reduced-motion: no-preference){
  .status-dot{ animation:status-pulse 2s ease-out infinite; }
}
@keyframes status-pulse{
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow:0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Terminal / code-window component */
.terminal-window{
  background:#0A1628; border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(11,37,69,.45);
  width:100%; max-width:460px;
}
.terminal-titlebar{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.terminal-dot{ width:10px; height:10px; border-radius:50%; }
.terminal-dot.red{ background:#F97066; }
.terminal-dot.yellow{ background:#FDB022; }
.terminal-dot.green{ background:#22C55E; }
.terminal-titlebar span{
  margin-left:8px; font-family:var(--font-mono); font-size:.72rem; color:#8CA0C4;
}
.terminal-body{
  padding:20px 18px 22px; font-family:var(--font-mono); font-size:.82rem; line-height:1.9;
}
.terminal-line{ color:#B9C6DC; white-space:pre-wrap; }
.terminal-prompt{ color:#3B6FE0; }
.terminal-ok{ color:#22C55E; }
.terminal-comment{ color:#6B7F9E; }
.terminal-accent{ color:var(--orange-500); }
.terminal-cursor{
  display:inline-block; width:7px; height:1.1em; background:var(--orange-500);
  vertical-align:text-bottom; margin-left:2px;
}
@media (prefers-reduced-motion: no-preference){
  .terminal-cursor{ animation:blink 1s step-end infinite; }
}
@keyframes blink{ 50%{ opacity:0; } }

/* Stat strip */
.stat-strip{
  background:var(--navy-900);
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);
}
.stat-strip-inner{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat-item{
  padding:28px 20px; text-align:left;
  border-left:1px solid rgba(255,255,255,.1);
}
.stat-item:first-child{ border-left:none; }
.stat-number{
  font-family:var(--font-mono); font-weight:700; font-size:1.9rem; color:#fff;
  display:block; margin-bottom:.2em;
}
.stat-number .accent{ color:var(--orange-500); }
.stat-label{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:#8CA0C4;
}

/* Tech stack badge strip */
.stack-strip{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.stack-badge{
  font-family:var(--font-mono); font-size:.82rem; color:var(--navy-900);
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:.55em 1em; display:inline-flex; align-items:center; gap:.5em;
}
.stack-badge::before{ content:"›"; color:var(--orange-500); font-weight:700; }

/* Code-tab header, used on service & portfolio cards */
.tab-bar{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  background:var(--navy-900); border-radius:7px 7px 0 0;
  margin:-32px -32px 24px; /* pulls to card edges */
}
.tab-bar .terminal-dot{ width:8px; height:8px; }
.tab-bar-label{
  margin-left:8px; font-family:var(--font-mono); font-size:.72rem; color:#8CA0C4;
}

@media (max-width: 720px){
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(3){ border-left:none; }
}

/* Nav status badge — hide on narrower viewports to avoid crowding */
.nav-status{ margin-left:.5em; }
@media (max-width: 960px){
  .nav-status{ display:none; }
}

.hero-eyebrow-mono{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.02em;
}

/* Case-study cards use 28px padding, not 32px — adjust the tab-bar pull */
.case-study .tab-bar{
  margin:-28px -28px 20px;
}

/* ==========================================================================
   Homepage: tech marquee, process steps, quick-nav pills, footer tagline
   ========================================================================== */
.stack-heading{ text-align:center; margin-top:52px; margin-bottom:18px; }
.stack-heading-label{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em;
}

.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; gap:14px; width:max-content;
  animation:marquee-scroll 26s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  font-family:var(--font-mono); font-size:.85rem; color:var(--navy-900);
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:.6em 1.2em; white-space:nowrap; display:inline-flex; align-items:center; gap:.6em;
  box-shadow:var(--shadow-card);
}
.marquee-icon{
  width:18px; height:18px; flex:0 0 auto; object-fit:contain;
}
.marquee-icon-generic{
  font-size:1rem; color:var(--orange-500); flex:0 0 auto;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee{ mask-image:none; -webkit-mask-image:none; }
  .marquee-track{ animation:none; overflow-x:auto; padding-bottom:8px; }
}

/* Process steps ("How we work") */
.process-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.process-step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; box-shadow:var(--shadow-card); position:relative;
}
.process-number{
  font-family:var(--font-mono); font-weight:700; font-size:.85rem; color:var(--orange-500);
  display:block; margin-bottom:.8em;
}
.process-step h3{ margin-bottom:.4em; }
.process-step p{ font-size:.92rem; margin:0; }

/* Quick-nav pills, used on the combined services & solutions page */
.quick-nav{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:1.75em;
}
.quick-nav a{
  font-family:var(--font-mono); font-size:.82rem; color:var(--navy-900);
  border:1px solid var(--line); border-radius:999px; padding:.5em 1.1em;
  background:var(--white);
}
.quick-nav a:hover{ border-color:var(--orange-500); color:var(--orange-600); }

/* Footer tagline */
.footer-tagline{ font-style:italic; color:#9FB1CC; }

@media (max-width: 720px){
  .process-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Services page v2: full grid (no scrolling) + modal detail dialogs
   ========================================================================== */
.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.service-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; box-shadow:var(--shadow-card);
  border-top:4px solid var(--accent-color, var(--blue-600));
  display:flex; flex-direction:column;
}
.service-card.accent-blue{ --accent-color: var(--blue-600); }
.service-card.accent-orange{ --accent-color: var(--orange-500); }
.service-card h3{ font-size:1.1rem; margin-bottom:.3em; }
.service-card p{ font-size:.92rem; margin-bottom:1em; }
.service-card .carousel-count{ margin-top:auto; }

.view-details-btn{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; text-align:left;
}

/* Modal overlay */
.service-modal{
  display:none;
  position:fixed; inset:0; z-index:300;
}
.service-modal.is-open{ display:block; }
body.modal-open{ overflow:hidden; }

.service-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(11,37,69,.68);
  backdrop-filter:blur(2px);
}
@media (prefers-reduced-motion: no-preference){
  .service-modal.is-open .service-modal-backdrop{ animation:modal-fade .2s ease-out; }
}
@keyframes modal-fade{ from{ opacity:0; } to{ opacity:1; } }

.service-modal-dialog{
  position:relative; z-index:1;
  background:var(--white);
  width:calc(100% - 40px);
  max-width:640px;
  max-height:calc(100vh - 64px);
  margin:32px auto;
  border-radius:12px;
  overflow:hidden;
  display:flex; flex-direction:column;
  border-top:4px solid var(--accent-color, var(--blue-600));
  box-shadow:0 30px 80px rgba(11,37,69,.35);
}
.service-modal-dialog.accent-blue{ --accent-color: var(--blue-600); }
.service-modal-dialog.accent-orange{ --accent-color: var(--orange-500); }
@media (prefers-reduced-motion: no-preference){
  .service-modal.is-open .service-modal-dialog{ animation:modal-pop .22s cubic-bezier(.2,.9,.3,1.1); }
}
@keyframes modal-pop{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.service-modal-dialog .tab-bar{
  margin:0; border-radius:0; position:relative;
  padding-right:44px;
}
.service-modal-close{
  position:absolute; top:8px; right:10px;
  width:26px; height:26px; border-radius:6px; border:none;
  background:rgba(255,255,255,.08); color:#C7D3E5;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.service-modal-close:hover{ background:var(--orange-500); color:#fff; }

.service-modal-body{
  padding:28px; overflow-y:auto;
}
.service-modal-body .service-detail-head{ margin-bottom:1.5em; }
.service-modal-body .service-items{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.7em 2em;
  margin-bottom:1.75em;
}
.service-modal-actions{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.service-modal-actions .service-detail-cta{ margin:0; }

@media (max-width: 960px){
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 720px){
  .services-grid{ grid-template-columns:1fr; }
  .service-modal-body .service-items{ grid-template-columns:1fr; }
  .service-modal-dialog{ width:calc(100% - 24px); margin:16px auto; max-height:calc(100vh - 32px); }
}