:root{
  --navy: #0B1B3F;
  --navy-deep: #060F26;
  --paper: #EEECE1;
  --paper-dim: #E3E0D1;
  --line: #C9C4AF;
  --line-dark: #2B3B60;
  --ink: #16202C;
  --ink-soft: #4A5568;
  --accent: #0A5AF0;
  --accent-bright: #2E7CFF;
  --gold: #C9A227;
  --gold-bright: #E4BE4A;
  --sage: #6E8F72;
  --paper-on-navy: #EEECE1;
  --radius: 3px;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Newsreader', serif;
  --mono: 'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}

::selection{background:var(--accent); color:#FFFFFF;}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent-bright);
  outline-offset:3px;
}

/* ---------- Nav ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(238,236,225,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 48px;
  width:100%;
}
.nav-right{display:flex; align-items:center; gap:40px;}
.logo{
  font-family:var(--display); font-weight:700; font-size:17px;
  letter-spacing:0.02em; text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:9px; white-space:nowrap;
}
.logo-img{height:30px; width:auto; flex-shrink:0;}
.logo-accent{color:var(--accent);}
.logo .sub{font-family:var(--mono); font-size:10px; color:var(--ink-soft); letter-spacing:0.06em; font-weight:400; margin-left:4px;}

/* ---------- Loading overlay (shown while the contact form is sending) ---------- */
.loading-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,27,63,0.28);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
  pointer-events:none;
}
.loading-overlay.visible{
  opacity:1; visibility:visible;
  transition:opacity .25s ease;
}
.loading-shape{
  position:relative;
  width:220px; height:220px;
  display:flex; align-items:center; justify-content:center;
}
.octagon{
  position:absolute; top:50%; left:50%;
  width:220px; height:220px;
  transform:translate(-50%,-50%);
  overflow:visible;
  opacity:0;
  transition:opacity .35s ease, color .4s ease;
}
.octagon-outer{
  color:var(--gold-bright);
  animation:spinCW 9s linear infinite;
  filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 13px currentColor);
}
.octagon-inner{
  color:var(--accent-bright);
  animation:spinCCW 7s linear infinite;
  filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 13px currentColor);
}
/* Logo sits still in the centre while the rings spin around it. */
.loading-logo{
  position:relative; z-index:1;
  width:64px; height:auto;
  opacity:0;
  transition:opacity .35s ease;
  filter:drop-shadow(0 0 6px rgba(255,255,255,0.55));
}
.loading-overlay.visible .loading-logo{ opacity:1; transition-delay:.18s; }
@keyframes spinCW{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes spinCCW{
  /* Offset 22.5deg (half an octagon face) from the outer ring so the two
     never start perfectly overlapped -- they read as two shapes immediately
     instead of merging into one for the first moment. */
  from{transform:translate(-50%,-50%) rotate(22.5deg);}
  to{transform:translate(-50%,-50%) rotate(-337.5deg);}
}
/* Staggered entrance: rings first, then logo settles on top with its glow. */
.loading-overlay.visible .octagon-outer{opacity:0.85; transition-delay:.08s;}
.loading-overlay.visible .octagon-inner{opacity:0.85; transition-delay:.14s;}
/* Result state: rings tint to confirm success or flag a problem, held
   briefly before the overlay hides. */
.loading-overlay.state-success .octagon-outer,
.loading-overlay.state-success .octagon-inner{
  color:var(--sage);
}
.loading-overlay.state-error .octagon-outer,
.loading-overlay.state-error .octagon-inner{
  color:#E4785A;
}
@media (prefers-reduced-motion: reduce){
  .octagon-outer, .octagon-inner{animation:none;}
  .loading-overlay{transition:none;}
}
nav.links{display:flex; gap:32px; font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; white-space:nowrap;}
nav.links a{text-decoration:none; color:var(--ink-soft); transition:color .2s;}
nav.links a:hover{color:var(--ink);}
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:0.03em;
  background:var(--navy); color:var(--paper); padding:9px 16px;
  text-decoration:none; border-radius:var(--radius);
  border:1px solid var(--navy);
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--accent); border-color:var(--accent); color:#FFFFFF;}

.nav-actions{display:flex; align-items:center; gap:14px;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); cursor:pointer; padding:0; align-items:center;
  flex-shrink:0;
}
.nav-toggle span{width:16px; height:1.5px; background:var(--ink); transition:transform .25s, opacity .25s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{
  display:none; flex-direction:column;
  max-height:0; overflow:hidden;
  background:var(--paper); border-bottom:1px solid var(--line);
  transition:max-height .3s ease;
}
.mobile-menu.open{max-height:260px;}
.mobile-menu a{
  font-family:var(--mono); font-size:14px; letter-spacing:0.03em; text-decoration:none;
  color:var(--ink); padding:15px 24px; border-top:1px solid var(--line);
}

/* ---------- Hero ---------- */
.hero{
  padding:168px 0 100px;
  background:var(--navy);
  color:var(--paper-on-navy);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-dark);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.25;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.scanline{
  position:absolute; inset:0;
  background-image:linear-gradient(to bottom, transparent, rgba(201,162,39,0.09), transparent);
  background-repeat:no-repeat;
  background-size:100% 220px;
  background-position:0 -220px;
  animation:scanSweep 7s linear infinite;
  pointer-events:none; z-index:0;
}
@keyframes scanSweep{
  0%{background-position:0 -220px;}
  100%{background-position:0 calc(100% + 220px);}
}
@media (prefers-reduced-motion: reduce){ .scanline{display:none;} }
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:center;
}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--gold-bright);}
h1{
  font-family:var(--display); font-weight:600; font-size:clamp(2.4rem, 4.2vw, 3.6rem);
  line-height:1.08; letter-spacing:-0.01em; margin-bottom:26px;
}
h1 em{font-style:normal; color:var(--gold-bright);}
.hero p.lede{
  font-size:19px; color:#C7CDD9; max-width:46ch; margin-bottom:34px; line-height:1.65;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:0.03em;
  padding:13px 22px; text-decoration:none; border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:8px; transition:all .2s;
}
.btn-primary{background:var(--accent); color:#FFFFFF; border:1px solid var(--accent);}
.btn-primary:hover{background:var(--accent-bright); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid #3C4E68;}
.btn-ghost:hover{border-color:var(--accent-bright); color:var(--accent-bright);}

/* schematic diagram */
.schematic{
  position:relative; font-family:var(--mono);
  background:var(--navy-deep); border:1px solid var(--line-dark);
  border-radius:6px; padding:26px 22px;
}
.schematic-label{
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:#5E7395; margin-bottom:18px; display:flex; justify-content:space-between;
}
.schem-row{display:flex; flex-direction:column; gap:0;}
.schem-box{
  border:1px solid var(--line-dark); border-radius:4px; padding:14px 16px;
  background:rgba(10,90,240,0.03);
  opacity:0; transform:translateY(10px);
  animation:riseIn .6s ease forwards;
}
.schem-box .name{font-family:var(--display); font-weight:600; font-size:14px; color:var(--paper); margin-bottom:3px;}
.schem-box .stack{font-size:11px; color:var(--accent-bright);}
.schem-connector{
  width:1px; height:26px; margin-left:22px; position:relative;
  background:repeating-linear-gradient(to bottom, var(--line-dark) 0 4px, transparent 4px 8px);
  opacity:0; animation:fadeIn .5s ease forwards;
}
.schem-connector::after{
  content:""; position:absolute; left:-2px; top:-6px; width:5px; height:5px; border-radius:50%;
  background:var(--gold-bright); box-shadow:0 0 6px 1px var(--gold-bright);
  animation:pulseDown 2.4s ease-in-out infinite;
  animation-delay:inherit;
  opacity:0;
}
@keyframes pulseDown{
  0%{top:-6px; opacity:0;}
  10%{opacity:1;}
  85%{opacity:1;}
  100%{top:26px; opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .schem-connector::after{display:none;} }

.status-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--sage);
  box-shadow:0 0 0 0 rgba(110,143,114,0.6);
  animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(110,143,114,0.5);}
  70%{box-shadow:0 0 0 7px rgba(110,143,114,0);}
  100%{box-shadow:0 0 0 0 rgba(110,143,114,0);}
}
@media (prefers-reduced-motion: reduce){ .status-dot{animation:none;} }

.terminal-line{
  font-family:var(--mono); font-size:12px; color:var(--gold-bright);
  margin-top:16px; min-height:16px; display:flex; align-items:center; gap:2px;
}
.terminal-line .cursor{
  display:inline-block; width:6px; height:13px; background:var(--gold-bright);
  animation:blink 1s step-end infinite; margin-left:1px;
}
@media (prefers-reduced-motion: reduce){ .terminal-line .cursor{animation:none;} }
@keyframes blink{ 50%{opacity:0;} }
.schem-box:nth-of-type(1){animation-delay:.15s;}
.schem-box:nth-of-type(3){animation-delay:.45s;}
.schem-box:nth-of-type(5){animation-delay:.75s;}
.schem-connector:nth-of-type(2){animation-delay:.35s;}
.schem-connector:nth-of-type(4){animation-delay:.65s;}
@keyframes riseIn{to{opacity:1; transform:translateY(0);}}
@keyframes fadeIn{to{opacity:1;}}
.schem-foot{
  margin-top:20px; padding-top:16px; border-top:1px dashed var(--line-dark);
  font-size:11px; color:#5E7395; display:flex; justify-content:space-between;
}

@media (prefers-reduced-motion: reduce){
  .schem-box, .schem-connector{animation:none !important; opacity:1 !important; transform:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Section shell ---------- */
section{padding:100px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:52px; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:22px;
}
.section-tag{
  font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px; display:block;
}
.section-head h2{
  font-family:var(--display); font-weight:600; font-size:clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing:-0.01em;
}
.section-head p{color:var(--ink-soft); max-width:38ch; font-size:15.5px;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ---------- Work ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.work-card{
  border:1px solid var(--line); border-radius:var(--radius); background:#F6F4EA;
  padding:26px 24px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .2s, transform .2s;
  position:relative; overflow:hidden;
}
.work-card::before{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transition:left .7s ease; opacity:0;
}
.work-card:hover::before{left:110%; opacity:1;}
.work-card:hover{border-color:var(--gold); transform:translateY(-3px);}
@media (prefers-reduced-motion: reduce){ .work-card::before{transition:none; display:none;} }
.work-card h3{font-family:var(--display); font-size:19px; font-weight:600;}
.work-card .role{font-family:var(--mono); font-size:11.5px; color:var(--sage); text-transform:uppercase; letter-spacing:0.06em;}
.work-card p{font-size:15px; color:var(--ink-soft); line-height:1.55;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px;}
.tag{
  font-family:var(--mono); font-size:10.5px; border:1px solid var(--line); border-radius:20px;
  padding:4px 10px; color:var(--ink-soft);
}
.work-link{
  font-family:var(--mono); font-size:12px; color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; align-self:flex-start; transition:border-color .2s;
}
.work-link:hover{border-color:var(--accent);}
.result{
  display:flex; align-items:flex-start; gap:8px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink);
  background:rgba(110,143,114,0.08); border-left:2px solid var(--sage);
  padding:10px 12px; line-height:1.5;
}
.result-icon{color:var(--sage); flex-shrink:0;}

/* ---------- Services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.tier{padding:30px 22px; border-right:1px solid var(--line); background:#F6F4EA; position:relative;}
.tier:last-child{border-right:none;}
.tier.featured{background:var(--navy); color:var(--paper);}
.tier.featured .tier-price, .tier.featured h3{color:var(--paper);}
.tier.featured .tier-desc{color:#B9C1CF;}
.tier.featured .feat{color:#DDE2EA;}
.tier.featured .feat::before{color:var(--gold-bright);}
.featured-badge{
  position:absolute; top:0; right:0; background:var(--gold); color:var(--navy-deep);
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; padding:4px 10px; text-transform:uppercase;
}
.tier h3{font-family:var(--display); font-weight:600; font-size:16px; margin-bottom:6px;}
.tier-desc{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; min-height:52px;}
.tier-price{font-family:var(--mono); font-size:22px; font-weight:500; margin-bottom:2px; color:var(--ink);}
.tier-price span{font-size:11px; color:var(--ink-soft); font-weight:400;}
.tier-from{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); margin-bottom:20px; display:block;}
ul.feats{list-style:none; display:flex; flex-direction:column; gap:9px;}
.feat{font-size:13.5px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start;}
.feat::before{content:"•"; color:var(--gold); flex-shrink:0;}

.maintenance-banner{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  flex-wrap:wrap;
  margin-top:22px;
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:24px 28px;
  background:#F6F4EA;
}
.maintenance-info h3{font-family:var(--display); font-weight:600; font-size:17px; margin:6px 0 6px;}
.maintenance-info p{font-size:13.5px; color:var(--ink-soft); max-width:52ch;}
.maintenance-price{text-align:right; flex-shrink:0;}
.maintenance-price .tier-price{margin-bottom:2px;}
.maintenance-price .tier-from{margin-bottom:0;}
@media (max-width:640px){
  .maintenance-banner{flex-direction:column; align-items:flex-start; text-align:left; padding:22px 20px;}
  .maintenance-price{text-align:left;}
}

/* ---------- Process ---------- */
.process-list{display:flex; flex-direction:column;}
.proc-item{
  display:grid; grid-template-columns:90px 1fr 1.4fr; gap:28px; align-items:start;
  padding:28px 0; border-top:1px solid var(--line);
}
.proc-item:last-child{border-bottom:1px solid var(--line);}
.proc-no{font-family:var(--mono); color:var(--gold); font-size:13px; letter-spacing:0.05em;}
.proc-item h3{font-family:var(--display); font-weight:600; font-size:18px;}
.proc-item p{color:var(--ink-soft); font-size:15px;}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; max-width:780px; margin:0 auto;}
.faq-item{border-top:1px solid var(--line); padding:20px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  font-family:var(--display); font-weight:600; font-size:16.5px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; font-family:var(--mono); font-size:18px; color:var(--gold);
  flex-shrink:0; transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--ink-soft); font-size:15px; margin-top:14px; max-width:64ch;}

/* ---------- Contact ---------- */
.contact{background:var(--navy); color:var(--paper);}
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;}
.contact h2{font-family:var(--display); font-weight:600; font-size:clamp(1.8rem, 3vw, 2.6rem); margin-bottom:18px; letter-spacing:-0.01em;}
.contact p.lede{color:#C7CDD9; font-size:16.5px; max-width:44ch; margin-bottom:8px;}
.quick-contact{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:22px;}
.quick-contact a{
  font-family:var(--mono); font-size:12.5px; color:#B9C1CF; text-decoration:none;
  border-bottom:1px solid #3C4E68; padding-bottom:2px; transition:color .2s, border-color .2s;
}
.quick-contact a:hover{color:var(--accent-bright); border-color:var(--accent-bright);}

.contact-form{
  background:var(--navy-deep); border:1px solid var(--line-dark); border-radius:6px;
  padding:28px 26px; display:flex; flex-direction:column; gap:16px;
}
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-row label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#8291A8;
}
.form-row input, .form-row textarea, .form-row select{
  font-family:var(--body); font-size:15px; color:var(--paper);
  background:transparent; border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:11px 12px; resize:vertical; transition:border-color .2s;
}
.form-row select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235E7395'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:36px;
}
.form-row select option{background:var(--navy-deep); color:var(--paper);}
.form-row input::placeholder, .form-row textarea::placeholder{color:#5E7395;}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:none; border-color:var(--accent);}
.form-note{font-family:var(--mono); font-size:11px; color:#5E7395; text-align:center;}
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0;}

footer{
  padding:28px 0; text-align:center; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-soft); border-top:1px solid var(--line);
}

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--navy); border-top:1px solid var(--line-dark);
  padding:12px 16px; gap:10px;
  align-items:center;
  transform:translateY(100%); transition:transform .3s ease;
  box-shadow:0 -6px 18px rgba(0,0,0,0.18);
}
.mobile-cta-bar.visible{transform:translateY(0);}
.mobile-cta-bar .btn-primary{flex:1; justify-content:center;}
.mcb-whatsapp{
  width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:1px solid #3C4E68; border-radius:var(--radius); color:var(--paper);
  text-decoration:none; transition:border-color .2s, color .2s;
}
.mcb-whatsapp:hover{border-color:var(--accent-bright); color:var(--accent-bright);}
@media (max-width:760px){
  .mobile-cta-bar{display:flex;}
  body{padding-bottom:84px;}
  /* Give the closing footer base extra room so it is never hidden behind
     the fixed CTA bar on short viewports. */
  .footer-base{ padding-bottom:24px; }
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{padding:16px 24px;}
  .logo .sub{display:none;}
  .nav-right{gap:24px;}
  nav.links{gap:22px;}
  .nav-actions{gap:12px;}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .work-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .tier{border-bottom:1px solid var(--line);}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  nav.links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{display:flex;}
  .nav{padding:14px 24px;}
  .nav-actions{gap:12px;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .logo .sub{display:none;}
  .nav{padding:13px 20px;}
  .nav-actions{gap:10px;}
  .logo{font-size:15px; gap:6px;}
  .logo-img{height:24px;}
  .nav-cta{padding:8px 12px; font-size:11px;}
  .nav-toggle{width:32px; height:32px;}
  .hero{padding:120px 0 64px;}
  .schematic{padding:20px 16px;}
  .services-grid{grid-template-columns:1fr;}
  .tier{border-right:none; border-bottom:1px solid var(--line);}
  section{padding:64px 0;}
  .section-head{margin-bottom:36px;}
  .proc-item{
    grid-template-columns:1fr; grid-template-areas:none;
    display:flex; flex-direction:column; gap:6px; padding:22px 0;
  }
  .work-card{padding:22px 20px;}
}
@media (max-width:400px){
  h1{font-size:2rem;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .btn{justify-content:center;}
}
/* ==========================================================================
   Multi-page additions
   Components for the service pages, about, work, pricing, FAQ and contact
   pages. Uses the same variables and rhythm as the original one-pager.
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  padding:100px 0 0;
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
}
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.breadcrumbs li{display:flex; align-items:center; gap:8px;}
.breadcrumbs li + li::before{content:"/"; color:var(--line);}
.breadcrumbs a{color:var(--ink-soft); text-decoration:none;}
.breadcrumbs a:hover{color:var(--accent); text-decoration:underline;}
.breadcrumbs [aria-current]{color:var(--ink);}

/* ---------- Inner page hero ---------- */
.page-hero{padding:44px 0 56px;}
.page-hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px, 5vw, 52px); line-height:1.08;
  letter-spacing:-0.02em; margin:14px 0 18px; max-width:20ch;
}
.page-hero .lede{font-size:19px; color:var(--ink-soft); max-width:62ch; margin-bottom:26px;}
.page-hero .hero-ctas{margin-bottom:34px;}

/* ---------- Fact strip under inner-page heroes ---------- */
.fact-strip{
  display:flex; flex-wrap:wrap; gap:0;
  border:1px solid var(--line); background:#F6F4EA;
  border-radius:var(--radius);
}
.fact-strip > div{
  flex:1 1 180px; padding:16px 20px;
  border-right:1px solid var(--line);
}
.fact-strip > div:last-child{border-right:none;}
.fact-strip dt{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:5px;
}
.fact-strip dd{font-family:var(--display); font-weight:600; font-size:15.5px;}

/* ---------- Long-form prose ---------- */
.prose{max-width:72ch;}
.prose h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(22px, 3vw, 29px); letter-spacing:-0.01em;
  margin:44px 0 14px;
}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--display); font-weight:600; font-size:18px; margin:26px 0 8px;}
.prose p{margin-bottom:16px; color:var(--ink-soft);}
.prose p strong{color:var(--ink);}
.prose a{color:var(--accent); text-underline-offset:3px;}

.check-list, .numbered-list{margin:0 0 18px; padding:0; list-style:none;}
.check-list li{
  position:relative; padding-left:30px; margin-bottom:13px;
  color:var(--ink-soft); line-height:1.55;
}
.check-list li::before{
  content:"\2713"; position:absolute; left:0; top:1px;
  color:var(--sage); font-weight:700; font-family:var(--display);
}
.check-list li strong{color:var(--ink);}

.numbered-list{counter-reset:steps;}
.numbered-list li{
  position:relative; padding-left:38px; margin-bottom:14px;
  counter-increment:steps; color:var(--ink-soft); line-height:1.55;
}
.numbered-list li::before{
  content:counter(steps, decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:12px; color:var(--accent); font-weight:500;
}
.numbered-list li strong{color:var(--ink);}

/* ---------- Alternating background band ---------- */
.alt-band{
  background:var(--paper-dim);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---------- Trust strip (homepage) ---------- */
.trust-strip{
  padding:0; background:var(--navy); color:var(--paper-on-navy);
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
}
.trust-strip ul{
  list-style:none; display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.trust-strip li{
  padding:22px 24px; border-right:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:4px;
}
.trust-strip li:last-child{border-right:none;}
.trust-strip strong{font-family:var(--display); font-size:15px; font-weight:600;}
.trust-strip span{font-size:13.5px; opacity:0.72; line-height:1.4;}

/* ---------- Service hub cards ---------- */
.service-hub-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.hub-card{
  background:#F6F4EA; padding:28px 24px;
  display:flex; flex-direction:column; gap:11px;
  text-decoration:none; color:inherit;
  transition:background .2s ease, transform .2s ease;
}
.hub-card:hover{background:#FFFDF4; transform:translateY(-2px);}
.hub-card h2, .hub-card h3{
  font-family:var(--display); font-weight:600; font-size:19px; line-height:1.25;
}
.hub-card p{font-size:15px; color:var(--ink-soft); line-height:1.55; flex-grow:1;}
.hub-meta{display:flex; gap:22px; margin-top:4px;}
.hub-meta dt{
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.07em; color:var(--ink-soft); margin-bottom:3px;
}
.hub-meta dd{font-family:var(--display); font-size:14px; font-weight:600;}

/* ---------- Related cards ---------- */
.related-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px;
}
.related-card{
  background:#F6F4EA; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:9px;
  transition:border-color .2s ease, transform .2s ease;
}
.related-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.related-card h3{font-family:var(--display); font-weight:600; font-size:16.5px;}
.related-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.5; flex-grow:1;}

/* ---------- Fact cards ---------- */
.fact-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px;
}
.fact-card{
  background:#F6F4EA; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:5px;
}
.fact-label{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--ink-soft);
}
.fact-value{font-family:var(--display); font-weight:600; font-size:16px;}
.fact-card p{font-size:14px; color:var(--ink-soft); line-height:1.5; margin-top:4px;}

/* ---------- Homepage about teaser ---------- */
.about-teaser-grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start;
}
.about-teaser-grid h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(24px, 3.4vw, 34px); letter-spacing:-0.01em; margin:12px 0 16px;
}
.about-teaser-grid p{color:var(--ink-soft); margin-bottom:14px; max-width:60ch;}
.about-teaser-facts{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.about-teaser-facts > div{
  background:#F6F4EA; padding:16px 20px;
  display:flex; flex-direction:column; gap:3px;
}

/* ---------- Case studies (work page) ---------- */
.case-study{
  border:1px solid var(--line); border-radius:var(--radius);
  background:#F6F4EA; margin-bottom:26px; overflow:hidden;
}
.case-head{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; padding:24px 26px;
  border-bottom:1px solid var(--line); background:#FFFDF4;
}
.case-head h2{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-0.01em;}
.case-head .role{
  font-family:var(--mono); font-size:11.5px; color:var(--sage);
  text-transform:uppercase; letter-spacing:0.06em;
}
.case-body{
  display:grid; grid-template-columns:1fr 260px; gap:36px; padding:26px;
}
.case-body h3{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.09em; color:var(--ink-soft); margin:20px 0 7px;
}
.case-body h3:first-child{margin-top:0;}
.case-body p{color:var(--ink-soft); font-size:15.5px; line-height:1.6;}
.case-meta{
  display:flex; flex-direction:column; gap:14px;
  padding-left:24px; border-left:1px solid var(--line);
}
.case-meta > div{display:flex; flex-direction:column; gap:3px;}

/* ---------- Closing CTA band ---------- */
.cta-band{
  background:var(--navy); color:var(--paper-on-navy);
  padding:66px 0; text-align:center;
}
.cta-band h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(25px, 3.6vw, 37px); letter-spacing:-0.01em; margin-bottom:14px;
}
.cta-band p{
  color:var(--paper-on-navy); opacity:0.78;
  max-width:56ch; margin:0 auto 28px; font-size:17px;
}
.cta-band .hero-ctas{justify-content:center; display:flex; gap:14px; flex-wrap:wrap;}
.cta-band .btn-ghost{border-color:rgba(238,236,225,0.4); color:var(--paper-on-navy);}
.cta-band .btn-ghost:hover{border-color:var(--paper-on-navy); background:rgba(238,236,225,0.08);}

/* ---------- Section footer link ---------- */
.section-foot{margin-top:26px;}

/* ---------- Contact page extras ---------- */
.contact-notes{margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.contact-notes p{
  font-size:15px; line-height:1.55; opacity:0.85;
  padding-left:16px; border-left:2px solid var(--gold);
}

/* ---------- Expanded footer ---------- */
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding-top:52px; padding-bottom:36px;
}
.footer-col{display:flex; flex-direction:column; gap:9px;}
.footer-head{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.09em; opacity:0.6; margin-bottom:3px;
}
.footer-col a{
  font-size:14.5px; text-decoration:none; opacity:0.85;
  transition:opacity .18s ease;
}
.footer-col a:hover{opacity:1; text-decoration:underline;}
.footer-note{font-size:14px; opacity:0.7; line-height:1.55; max-width:34ch;}
.footer-base{
  padding-top:20px; padding-bottom:34px;
  border-top:1px solid rgba(238,236,225,0.14);
  font-family:var(--mono); font-size:12px; opacity:0.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .about-teaser-grid{grid-template-columns:1fr; gap:32px;}
  .case-body{grid-template-columns:1fr; gap:24px;}
  .case-meta{padding-left:0; border-left:none; padding-top:20px; border-top:1px solid var(--line);}
  .trust-strip ul{grid-template-columns:repeat(2, 1fr);}
  .trust-strip li:nth-child(2){border-right:none;}
  .trust-strip li:nth-child(1), .trust-strip li:nth-child(2){border-bottom:1px solid var(--line-dark);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
}
@media (max-width: 640px){
  .breadcrumbs{padding-top:92px;}
  .page-hero{padding:32px 0 40px;}
  .fact-strip > div{flex:1 1 100%; border-right:none; border-bottom:1px solid var(--line);}
  .fact-strip > div:last-child{border-bottom:none;}
  .trust-strip ul{grid-template-columns:1fr;}
  .trust-strip li{border-right:none; border-bottom:1px solid var(--line-dark);}
  .trust-strip li:last-child{border-bottom:none;}
  .footer-grid{grid-template-columns:1fr; gap:26px;}
  .case-head{padding:20px;}
  .case-body{padding:20px;}
  .hub-meta{gap:18px;}
}

/* ==========================================================================
   TECH FEEL LAYER
   Amplifies the existing blueprint/terminal direction rather than replacing
   it: grid textures, mono labelling, monitor-style cards and code-ish
   detailing. Everything here is additive and respects prefers-reduced-motion.
   ========================================================================== */

:root{
  --grid-line: rgba(11, 27, 63, 0.055);
  --grid-line-strong: rgba(11, 27, 63, 0.085);
  --term-green: #3FB950;
  --mono-fs: 11.5px;
}

/* ---------- Blueprint grid on the paper background ---------- */
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px;
}

/* Bands sit on the grid, so give them their own subtle plate */
.alt-band{
  background-color:var(--paper-dim);
  background-image:
    linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px;
}

/* ---------- Section tags read as file paths ---------- */
.section-tag::before{
  content:"// ";
  opacity:0.55;
}

/* ---------- Eyebrow: terminal prompt ---------- */
.eyebrow{
  font-family:var(--mono);
  letter-spacing:0.06em;
}

/* ---------- Headings get a touch more engineering precision ---------- */
h1, h2, h3{ font-feature-settings:"ss01" 1, "cv01" 1; }

/* ---------- Cards: monitor / panel treatment ---------- */
.hub-card,
.related-card,
.fact-card,
.work-card,
.case-study,
.tier{
  position:relative;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
}

/* corner ticks, like a technical drawing */
.hub-card::before,
.related-card::before,
.case-study::before,
.tier::before{
  content:"";
  position:absolute; top:0; left:0;
  width:9px; height:9px;
  border-top:1px solid var(--accent);
  border-left:1px solid var(--accent);
  opacity:0.45;
  pointer-events:none;
}
.hub-card::after,
.related-card::after,
.case-study::after,
.tier::after{
  content:"";
  position:absolute; bottom:0; right:0;
  width:9px; height:9px;
  border-bottom:1px solid var(--accent);
  border-right:1px solid var(--accent);
  opacity:0.45;
  pointer-events:none;
}
.tier.featured::before,
.tier.featured::after{ border-color:var(--gold); opacity:0.75; }

/* ---------- Hub card meta reads like key/value config ---------- */
.hub-meta dt::after{ content:":"; opacity:0.5; }
.hub-meta dd{ font-family:var(--mono); font-size:13px; }

/* ---------- Fact strip: instrument panel ---------- */
.fact-strip{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
}
.fact-strip dd{ font-family:var(--mono); font-size:14px; letter-spacing:-0.01em; }
.fact-value{ font-family:var(--mono); letter-spacing:-0.01em; }

/* ---------- Check list: terminal ticks ---------- */
.check-list li::before{
  content:"[\2713]";
  font-family:var(--mono);
  font-size:11px;
  color:var(--sage);
  top:3px;
}
.check-list li{ padding-left:34px; }

/* ---------- Numbered list: hex-ish step markers ---------- */
.numbered-list li::before{
  color:var(--accent);
  opacity:0.85;
}

/* ---------- FAQ: collapsible config blocks ---------- */
.faq-item summary{ position:relative; }
.faq-item summary::marker{ content:""; }

/* ---------- Trust strip: status readout ---------- */
.trust-strip strong{ font-family:var(--mono); font-size:13.5px; letter-spacing:-0.005em; }
.trust-strip strong::before{
  content:"\25B8 ";
  color:var(--accent-bright);
  opacity:0.9;
}

/* ---------- Breadcrumbs already mono; make separators code-ish ---------- */
.breadcrumbs li + li::before{ content:"/"; opacity:0.7; }

/* ---------- Schematic panel: terminal window ----------
   NOTE: this panel sits on a DARK background, so the grid overlay must be
   a faint light-on-dark wash. An earlier version used white at 0.4 alpha,
   which flattened the panel and made the labels unreadable. */
.schematic{
  position:relative;
  background-image:
    linear-gradient(rgba(120, 160, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, 0.045) 1px, transparent 1px);
  background-size:26px 26px;
}
.schematic-label span{ font-family:var(--mono); }
.schem-box .name{ font-family:var(--mono); font-size:12.5px; }

/* ---------- Terminal line: give it a real window feel ---------- */
.terminal-line{
  font-family:var(--mono);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(6, 15, 38, 0.035);
  padding:10px 13px;
  font-size:var(--mono-fs);
  color:var(--ink-soft);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.terminal-line .cursor{
  display:inline-block;
  width:7px;
  background:var(--accent-bright);
  margin-left:2px;
  animation:blink 1.05s steps(1) infinite;
  vertical-align:-2px;
  height:1em;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- CTA band: deep terminal ---------- */
.cta-band{
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:32px 32px;
}

/* ---------- Case study meta: readout ---------- */
.case-meta .fact-value{ font-size:14px; }
.case-head .role{ font-family:var(--mono); }

/* ---------- Tags: chips that read like build flags ---------- */
.tag{ font-family:var(--mono); }
.tag::before{ content:"#"; opacity:0.55; }

/* ---------- Footer: terminal-ish column heads ---------- */
.footer-head::before{ content:"/ "; opacity:0.5; }

/* ---------- Links: underline like a code editor hover ---------- */
.work-link{ font-family:var(--mono); letter-spacing:-0.005em; }

/* ---------- Buttons: tighter, more mechanical ---------- */
.btn{ font-family:var(--mono); letter-spacing:-0.005em; }

/* ---------- Reduced motion: kill the blink ---------- */
@media (prefers-reduced-motion: reduce){
  .terminal-line .cursor{ animation:none; opacity:1; }
}

/* ---------- Mobile: lighten the grid so text stays readable ---------- */
@media (max-width: 640px){
  body, .alt-band{ background-size:24px 24px; }
  .terminal-line{ font-size:10.5px; }
}

/* ==========================================================================
   LIVE-SITE CORRECTIONS
   Fixes for contrast and hierarchy issues visible on the deployed site.
   These come last so they win over the tech layer above.
   ========================================================================== */

/* ---- Schematic: restore readable contrast on the dark panel ---- */
.schematic{ padding:24px 22px 20px; }
.schematic-label{ color:#8FA5C8; }
.schem-box{
  background:rgba(10, 90, 240, 0.10);
  border-color:#33456C;
}
.schem-box .name{
  color:#FFFFFF;
  font-size:13px;
  letter-spacing:0.01em;
  margin-bottom:4px;
}
/* Sub-line was accent-blue on navy: too low contrast. Lighten it. */
.schem-box .stack{
  color:#9FC2FF;
  font-size:11.5px;
  line-height:1.45;
}
.schem-foot{
  color:#8FA5C8;
  border-top:1px solid #26365A;
  margin-top:16px; padding-top:12px;
}

/* ---- Terminal line: the tech layer turned this into a pale box.
        Restore the amber-on-dark terminal look inside the hero. ---- */
.hero .terminal-line{
  background:rgba(6, 15, 38, 0.55);
  border:1px solid #26365A;
  color:var(--gold-bright);
  font-size:12px;
  padding:9px 12px;
  margin-top:18px;
}
.hero .terminal-line .cursor{
  background:var(--gold-bright);
  height:13px;
  vertical-align:baseline;
}

/* ---- Trust strip: tighten spacing, the labels were floating ---- */
.trust-strip li{ padding:18px 22px; gap:3px; }
.trust-strip strong{ font-size:13px; }
.trust-strip span{ font-size:12.5px; line-height:1.45; opacity:0.68; }

/* ---- Service hub cards: give the meta row breathing room and a divider ---- */
.hub-card{ padding:26px 22px 24px; }
.hub-meta{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line);
  width:100%;
}
.hub-card .work-link{ margin-top:12px; }

/* ---- Work cards: the result line was competing with body copy ---- */
.work-card .result{
  background:rgba(110,143,114,0.08);
  border-left:2px solid var(--sage);
  padding:9px 12px;
  border-radius:2px;
  font-size:14px;
}

/* ---- Section heads: the right-hand blurb was sitting too high ---- */
.section-head{ align-items:end; gap:28px; }
.section-head > p{ padding-bottom:3px; }

/* ---- FAQ rows: make the whole row read as clickable ---- */
.faq-item summary{ padding:16px 2px; }
.faq-item summary:hover{ color:var(--accent); }

/* ---- Footer: columns were cramped against each other ---- */
.footer-grid{ gap:44px; }
.footer-col a{ line-height:1.85; }

/* ---- Mobile refinements ---- */
@media (max-width: 900px){
  .section-head{ align-items:start; gap:12px; }
}
@media (max-width: 640px){
  .hero .terminal-line{ font-size:11px; padding:8px 10px; }
  .schem-box .name{ font-size:12.5px; }
  .hub-card{ padding:22px 18px; }
}

/* ==========================================================================
   LEGIBILITY PASS
   The blueprint grid was running directly behind body copy, so line strokes
   crossed letterforms and text appeared to fade into the texture.

   Strategy: keep the grid as atmosphere, but get it out from behind text.
     1. Halve the grid opacity globally.
     2. Give text-bearing surfaces an opaque plate so the grid sits behind
        the panel rather than behind the words.
     3. In the hero, fade the grid out where the headline sits.
   ========================================================================== */

:root{
  /* Roughly half the previous strength: still visible, no longer competing. */
  --grid-line: rgba(11, 27, 63, 0.028);
  --grid-line-strong: rgba(11, 27, 63, 0.042);
}

/* ---- Prose and long-form text get a clean plate to sit on ---- */
.prose,
.section-head,
.faq-list,
.process-list,
.about-teaser-grid > div:first-child,
.cta-band .wrap{
  position:relative;
}
/* Plate is applied to the wrapper directly rather than a negative-z-index
   pseudo element, which would otherwise render behind the section's own
   background and have no effect. */
.prose{
  background:var(--paper);
  box-shadow:0 0 0 18px var(--paper);
  border-radius:2px;
}
.alt-band .prose{
  background:var(--paper-dim);
  box-shadow:0 0 0 18px var(--paper-dim);
}
.section-head{
  background:var(--paper);
  box-shadow:0 0 0 14px var(--paper);
}
.alt-band .section-head{
  background:var(--paper-dim);
  box-shadow:0 0 0 14px var(--paper-dim);
}

/* ---- Cards were translucent, letting the grid show through copy ---- */
.hub-card,
.related-card,
.fact-card,
.work-card,
.case-study,
.tier,
.faq-item,
.proc-item,
.fact-strip,
.about-teaser-facts > div,
.maintenance-banner{
  background-color:#F7F5EC;
  background-image:none;
}
.alt-band .hub-card,
.alt-band .related-card,
.alt-band .fact-card,
.alt-band .work-card,
.alt-band .case-study,
.alt-band .tier,
.alt-band .proc-item{
  background-color:#F4F1E6;
}

/* Restore the subtle top sheen without reintroducing the grid */
.hub-card,
.related-card,
.fact-card,
.work-card,
.case-study,
.tier{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
}

/* ---- Hero: clear the grid from behind the headline ---- */
/* Single mask (no mask-composite, which has patchy browser support):
   fades the grid out toward the left where the headline sits, and
   toward the bottom of the section. */
.hero::before{
  opacity:0.16;
  mask-image:linear-gradient(105deg, transparent 0%, transparent 34%, black 62%, black 100%);
  -webkit-mask-image:linear-gradient(105deg, transparent 0%, transparent 34%, black 62%, black 100%);
}

/* Headline and lede sit clearly above any texture */
.hero h1,
.hero p.lede,
.hero .eyebrow{
  position:relative;
  z-index:2;
  text-shadow:0 1px 14px rgba(6, 15, 38, 0.55);
}
.hero p.lede{ color:#D2D8E4; }

/* Scanline was sweeping across the headline; keep it to the panel side */
.scanline{ opacity:0.55; }

/* ---- Footer and CTA band: grid off entirely behind text ---- */
.cta-band{ background-image:none; }
/* footer background handled in the FOOTER FIX block below */

/* ---- Mobile: grid lighter still, text is tighter to the edges ---- */
@media (max-width: 640px){
  :root{
    --grid-line: rgba(11, 27, 63, 0.018);
    --grid-line-strong: rgba(11, 27, 63, 0.03);
  }
  .hero::before{ opacity:0.10; }
  .prose{ box-shadow:0 0 0 12px var(--paper); }
  .alt-band .prose{ box-shadow:0 0 0 12px var(--paper-dim); }
  .section-head{ box-shadow:0 0 0 10px var(--paper); }
  .alt-band .section-head{ box-shadow:0 0 0 10px var(--paper-dim); }
}

/* ==========================================================================
   FOOTER FIX
   The footer markup and grid styles were built for a dark navy background
   (light text at reduced opacity, a light-on-dark divider), but the base
   footer rule had no background, so it rendered on the cream page and the
   links came out as low-contrast grey. Restore the intended dark footer.
   ========================================================================== */

footer{
  background:var(--navy);
  background-image:
    linear-gradient(rgba(120,160,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,0.04) 1px, transparent 1px);
  background-size:32px 32px;
  color:var(--paper-on-navy);
  border-top:1px solid var(--line-dark);
  text-align:left;
  padding:0;
}

/* Headings: readable gold-tinted labels instead of faint grey */
.footer-head{
  color:#8FA5C8;
  opacity:1;
}
.footer-head::before{ color:var(--gold-bright); opacity:0.8; }

/* Links: near-full-strength paper, clear against navy */
.footer-col a{
  color:var(--paper-on-navy);
  opacity:0.82;
}
.footer-col a:hover{ opacity:1; color:var(--gold-bright); }

.footer-note{ color:#AEB9CC; opacity:1; }

.footer-base{
  color:#7E8CA6; opacity:1;
  border-top:1px solid rgba(238,236,225,0.14);
  text-align:center;
}

/* The mobile stacked footer was centring everything; keep columns left-aligned
   on desktop, centred on narrow screens reads fine since it's the closing block. */
@media (max-width: 640px){
  .footer-grid{ text-align:center; }
  .footer-col{ align-items:center; }
  .footer-note{ text-align:center; margin-left:auto; margin-right:auto; }
}

/* ==========================================================================
   INNER-PAGE FIXES
   1. Ghost buttons were cream-on-cream on the light inner-page heroes
      (they were styled for the dark homepage hero only), so the second
      hero button read as an empty outline. Make ghost dark by default and
      light only where it sits on a dark surface.
   2. The service-card gold sweep relied on :hover, which sticks after a tap
      on touch devices and left a frozen diagonal seam. Restrict the sweep
      to devices that actually hover; give touch a clean tap state instead.
   ========================================================================== */

/* ---- Ghost button: readable on light backgrounds by default ---- */
.btn-ghost{
  color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover{
  border-color:var(--ink);
  background:rgba(11,27,63,0.04);
}
/* On dark surfaces (homepage hero, CTA band, 404 hero) keep it light */
.hero .btn-ghost,
.cta-band .btn-ghost{
  color:var(--paper);
  border-color:#3C4E68;
}
.hero .btn-ghost:hover,
.cta-band .btn-ghost:hover{
  border-color:var(--paper);
  background:rgba(238,236,225,0.08);
}

/* ---- Service-card gold border + shimmer ----
   Applied on ALL devices via a keyframe animation, not :hover, so it plays
   identically on desktop and touch and can never freeze mid-sweep on tap.
   The gold border and corner ticks are permanent so the framing always reads;
   a soft beam travels across the card on a gentle loop. Hover just deepens
   the border and lifts the card. */

.hub-card{
  border-color:var(--gold);
  overflow:hidden;
  /* Base state: solid sheen only. The gold beam is a second background layer
     parked off the right edge. It runs only when the .is-sweeping class is
     added by JS, which lets us pick a RANDOM card each time and leave a real
     gap between glints -- neither of which a looping CSS animation can do. */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)),
    linear-gradient(115deg,
      transparent 0%, transparent 38%,
      rgba(228,190,74,0.00) 44%,
      rgba(228,190,74,0.30) 50%,
      rgba(228,190,74,0.00) 56%,
      transparent 62%, transparent 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 240% 100%;
  background-position:0 0, 150% 0;
  transition:transform .2s ease, border-color .2s ease, box-shadow .3s ease;
}
/* Corner ticks gold to match the permanent border */
.hub-card::before,
.hub-card::after{ border-color:var(--gold); opacity:0.8; }

/* One slow pass when chosen. 2.6s is noticeably slower than the old loop. */
.hub-card.is-sweeping{ animation:hubSweep 2.6s ease-in-out 1; }
@keyframes hubSweep{
  from{ background-position:0 0, 150% 0; }
  to  { background-position:0 0, -50% 0; }
}

/* Hover (desktop) and tap (touch): deepen and lift */
@media (hover: hover) and (pointer: fine){
  .hub-card:hover{
    border-color:var(--gold-bright);
    box-shadow:0 6px 22px rgba(11,27,63,0.10);
  }
  .hub-card:hover::before,
  .hub-card:hover::after{ border-color:var(--gold-bright); opacity:1; }
}
@media (hover: none), (pointer: coarse){
  .hub-card:active{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(11,27,63,0.10); }
}

/* Reduced motion: keep the gold border and ticks, never run the beam. */
@media (prefers-reduced-motion: reduce){
  .hub-card.is-sweeping{ animation:none; }
  .hub-card{ background-image:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); }
}