:root{
  --ink:#10141C;
  --ink-soft:#1B2130;
  --paper:#F5F3EE;
  --paper-dim:#EAE7DE;
  --steel:#445069;
  --steel-light:#7C879C;
  --brass:#B8862F;
  --brass-soft:#D9B472;
  --line:#D8D3C8;
  --line-dark:#2B3242;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,.serif{font-family:'Source Serif 4',serif;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
img{max-width:100%;display:block;}

/* Accessibility: skip link */
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--brass);color:var(--ink);
  padding:12px 18px;z-index:2000;font-weight:600;
}
.skip-link:focus{left:12px;top:12px;}

/* corner bracket motif */
.bracket{position:relative;}
.bracket::before,.bracket::after{
  content:'';position:absolute;width:14px;height:14px;
  border-color:var(--brass);border-style:solid;border-width:0;
}
.bracket::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;}
.bracket::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;}

/* Header */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(16,20,28,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
.brand{
  color:var(--paper);font-family:'Source Serif 4',serif;
  font-size:1.25rem;font-weight:600;letter-spacing:0.02em;
  display:flex;align-items:baseline;gap:8px;text-decoration:none;
}
.brand .dot{color:var(--brass);font-size:1.1rem;}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{
  color:#C7CCD8;text-decoration:none;font-size:0.92rem;font-weight:500;
  transition:color 0.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--paper);}
.nav-cta{
  color:var(--ink)!important;background:var(--brass);
  padding:10px 20px;font-weight:600;font-size:0.9rem;
  text-decoration:none;transition:background 0.2s;
}
.nav-cta:hover{background:var(--brass-soft);}
.mobile-toggle{display:none;color:var(--paper);font-size:1.4rem;cursor:pointer;background:none;border:none;}

/* Hero */
.hero{
  background:var(--ink);
  color:var(--paper);
  padding:190px 0 120px;
  position:relative;
  overflow:hidden;
}
.grid-overlay{
  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.35;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end;}
.eyebrow{
  color:var(--brass-soft);font-size:0.85rem;font-weight:500;
  margin-bottom:22px;letter-spacing:0.01em;
}
.hero h1{
  font-size:3.1rem;font-weight:500;line-height:1.15;
  max-width:620px;margin-bottom:26px;
}
.hero p.lead{
  color:#B7BECC;font-size:1.08rem;max-width:480px;margin-bottom:38px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.btn-primary{
  background:var(--brass);color:var(--ink);padding:14px 28px;
  text-decoration:none;font-weight:600;font-size:0.95rem;
  display:inline-block;transition:background 0.2s;
}
.btn-primary:hover{background:var(--brass-soft);}
.btn-outline{
  border:1px solid #4A5468;color:var(--paper);padding:14px 28px;
  text-decoration:none;font-weight:600;font-size:0.95rem;
  display:inline-block;transition:border-color 0.2s,color 0.2s;
}
.btn-outline:hover{border-color:var(--brass-soft);color:var(--brass-soft);}

.hero-panel{
  border:1px solid var(--line-dark);
  padding:28px;
  background:rgba(255,255,255,0.02);
}
.hero-panel .row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-dark);
}
.hero-panel .row:last-child{border-bottom:none;}
.hero-panel .row .num{font-family:'Source Serif 4',serif;font-size:1.6rem;color:var(--brass-soft);}
.hero-panel .row .label{color:#9BA3B4;font-size:0.88rem;max-width:200px;text-align:right;}

/* Section shared */
section{padding:110px 0;}
.kicker{color:var(--brass);font-size:0.85rem;font-weight:600;margin-bottom:14px;}
.section-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:end;margin-bottom:64px;
}
.section-head h2{font-size:2.1rem;font-weight:500;line-height:1.25;}
.section-head .support{color:var(--steel);font-size:1rem;max-width:420px;}

/* Services (homepage list, now clickable) */
.services{background:var(--paper);}
.service-list{border-top:1px solid var(--line);}
.service-row{
  display:grid;grid-template-columns:70px 1fr 1.4fr;gap:32px;
  padding:32px 0;border-bottom:1px solid var(--line);
  align-items:start;
  text-decoration:none;color:inherit;
  position:relative;transition:background 0.25s, padding 0.25s;
}
.service-row .index{font-family:'Source Serif 4',serif;color:var(--brass);font-size:1.1rem;}
.service-row h3{font-size:1.25rem;font-weight:500;transition:color 0.2s;}
.service-row p{color:var(--steel);font-size:0.96rem;max-width:520px;}
.service-row .more{
  display:inline-block;margin-top:12px;color:var(--ink);
  font-weight:600;font-size:0.88rem;
}
.service-row .more span{display:inline-block;transition:transform 0.2s;color:var(--brass);}
a.service-row:hover,a.service-row:focus-visible{background:#FBFAF6;padding-left:16px;padding-right:16px;outline:none;}
a.service-row:hover h3,a.service-row:focus-visible h3{color:var(--brass);}
a.service-row:hover .more span,a.service-row:focus-visible .more span{transform:translateX(5px);}

/* Approach */
.approach{background:var(--ink);color:var(--paper);}
.approach .section-head h2{color:var(--paper);}
.approach .kicker{color:var(--brass-soft);}
.approach .section-head .support{color:#9BA3B4;}
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
.approach-card{background:var(--ink-soft);padding:36px 30px;}
.approach-card .mark{color:var(--brass-soft);font-family:'Source Serif 4',serif;font-size:1.4rem;margin-bottom:16px;display:block;}
.approach-card h3{font-size:1.1rem;font-weight:500;margin-bottom:12px;}
.approach-card p{color:#9BA3B4;font-size:0.92rem;}

/* Stats */
.stats{
  background:var(--paper-dim);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:56px 0;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stats-grid .stat{text-align:left;padding:0 30px;border-left:1px solid var(--line);}
.stats-grid .stat:first-child{border-left:none;padding-left:0;}
.stat h3{font-size:2.2rem;font-weight:500;color:var(--ink);}
.stat p{color:var(--steel);font-size:0.88rem;margin-top:6px;}

/* Contact */
.contact{background:var(--paper);}
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;}
.contact-item{padding:22px 0;border-bottom:1px solid var(--line);}
.contact-item:first-child{padding-top:0;}
.contact-item .label{color:var(--brass);font-size:0.82rem;font-weight:600;margin-bottom:6px;}
.contact-item p{color:var(--ink);font-size:1rem;}
.contact-item .sub{color:var(--steel);font-size:0.9rem;margin-top:2px;}

.form-panel{border:1px solid var(--line);padding:40px;background:#FFFFFF;}
.form-panel h3{font-size:1.2rem;font-weight:500;margin-bottom:24px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:0.85rem;color:var(--steel);margin-bottom:8px;}
.form-control{
  width:100%;padding:13px 14px;border:1px solid var(--line);
  background:var(--paper);font-family:inherit;font-size:0.95rem;color:var(--ink);
}
.form-control:focus{outline:none;border-color:var(--brass);}
textarea.form-control{resize:vertical;min-height:100px;}
.submit-btn{
  background:var(--ink);color:var(--paper);border:none;
  padding:14px 26px;font-weight:600;font-size:0.95rem;cursor:pointer;
  width:100%;transition:background 0.2s;
}
.submit-btn:hover{background:var(--ink-soft);}

/* Footer */
footer{background:var(--ink);color:#9BA3B4;padding:60px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
.footer-brand{color:var(--paper);font-family:'Source Serif 4',serif;font-size:1.15rem;margin-bottom:14px;}
.footer-grid p{font-size:0.9rem;line-height:1.7;max-width:280px;}
.footer-col h4{color:var(--paper);font-size:0.88rem;font-weight:600;margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:11px;}
.footer-col ul li a{color:#9BA3B4;text-decoration:none;font-size:0.9rem;transition:color 0.2s;}
.footer-col ul li a:hover{color:var(--paper);}
.copyright{
  border-top:1px solid var(--line-dark);padding-top:26px;
  font-size:0.85rem;display:flex;justify-content:space-between;
}

/* =========================================================
   SERVICE DETAIL PAGE
   ========================================================= */
.page-hero{
  background:var(--ink);color:var(--paper);
  padding:170px 0 90px;position:relative;overflow:hidden;
}
.crumbs{position:relative;font-size:0.85rem;color:#8E97AB;margin-bottom:26px;}
.crumbs a{text-decoration:none;color:#B7BECC;}
.crumbs a:hover{color:var(--brass-soft);}
.crumbs .sep{margin:0 8px;color:#4A5468;}
.page-hero .hero-inner{align-items:start;}
.page-hero h1{font-size:3rem;font-weight:500;line-height:1.15;margin-bottom:22px;max-width:640px;}
.page-hero .lead{color:#B7BECC;font-size:1.1rem;max-width:560px;margin-bottom:36px;}
.svc-no{font-family:'Source Serif 4',serif;color:var(--brass-soft);font-size:1rem;margin-bottom:18px;display:block;}

.glance{border:1px solid var(--line-dark);padding:28px;background:rgba(255,255,255,0.02);}
.glance h2{font-family:'IBM Plex Sans',sans-serif;font-size:0.8rem;font-weight:600;color:var(--brass-soft);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;}
.glance dl>div{padding:16px 0;border-bottom:1px solid var(--line-dark);}
.glance dl>div:last-child{border-bottom:none;padding-bottom:0;}
.glance dt{color:#8E97AB;font-size:0.8rem;margin-bottom:4px;}
.glance dd{color:var(--paper);font-size:0.98rem;}

/* sticky in-page nav */
.subnav{
  position:sticky;top:67px;z-index:900;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.subnav ul{display:flex;gap:30px;list-style:none;overflow-x:auto;white-space:nowrap;padding:0;}
.subnav a{
  display:block;padding:16px 0;font-size:0.88rem;font-weight:500;color:var(--steel);
  text-decoration:none;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.subnav a:hover,.subnav a.on{color:var(--ink);border-bottom-color:var(--brass);}

.detail section{padding:90px 0;scroll-margin-top:120px;}
.detail section.alt{background:var(--paper-dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.detail h2.sec{font-size:2rem;font-weight:500;line-height:1.25;margin-bottom:14px;max-width:640px;}
.detail .sec-sub{color:var(--steel);max-width:600px;margin-bottom:52px;}

.overview{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:start;}
.overview p{color:var(--steel);margin-bottom:18px;font-size:1.02rem;}
.outcome-list{list-style:none;border-top:1px solid var(--line);}
.outcome-list li{padding:18px 0 18px 34px;border-bottom:1px solid var(--line);position:relative;font-size:0.96rem;}
.outcome-list li::before{
  content:'';position:absolute;left:4px;top:25px;width:12px;height:7px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg);
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.card{background:#fff;padding:32px 28px;transition:background .2s;}
.card:hover{background:#FDFCF9;}
.card .n{font-family:'Source Serif 4',serif;color:var(--brass);font-size:1rem;display:block;margin-bottom:14px;}
.card h3{font-size:1.1rem;font-weight:500;margin-bottom:10px;}
.card p{color:var(--steel);font-size:0.92rem;}

.steps{list-style:none;counter-reset:s;position:relative;}
.steps li{
  counter-increment:s;display:grid;grid-template-columns:70px 1fr;gap:20px;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.steps li:first-child{border-top:1px solid var(--line);}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:'Source Serif 4',serif;font-size:1.5rem;color:var(--brass);}
.steps h3{font-size:1.15rem;font-weight:500;margin-bottom:6px;}
.steps p{color:var(--steel);font-size:0.95rem;max-width:620px;}

.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  border:1px solid var(--line);background:#fff;padding:9px 16px;
  font-size:0.88rem;font-weight:500;color:var(--ink);
}
.tech-note{margin-top:22px;font-size:0.88rem;color:var(--steel);max-width:560px;}

.faq{max-width:780px;border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:'Source Serif 4',serif;font-size:1.1rem;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';position:absolute;right:6px;top:18px;font-size:1.5rem;color:var(--brass);font-family:'IBM Plex Sans',sans-serif;}
.faq details[open] summary::after{content:'–';}
.faq details p{padding:0 40px 24px 0;color:var(--steel);font-size:0.96rem;}

.cta-band{background:var(--ink);color:var(--paper);padding:90px 0;position:relative;overflow:hidden;}
.cta-inner{position:relative;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;}
.cta-band h2{font-size:2rem;font-weight:500;max-width:560px;line-height:1.25;margin-bottom:10px;}
.cta-band p{color:#9BA3B4;max-width:520px;}

.others{background:var(--paper);padding:90px 0;}
.others h2{font-size:1.6rem;font-weight:500;margin-bottom:32px;}
.other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.other-grid a{background:#fff;padding:24px 20px;text-decoration:none;transition:background .2s;display:block;}
.other-grid a:hover{background:#FBFAF6;}
.other-grid .n{font-family:'Source Serif 4',serif;color:var(--brass);font-size:.9rem;display:block;margin-bottom:8px;}
.other-grid .t{font-weight:600;font-size:0.95rem;}

.not-found{padding:200px 0 120px;text-align:center;}
.not-found h1{font-size:2.2rem;font-weight:500;margin-bottom:14px;}
.not-found p{color:var(--steel);margin-bottom:28px;}

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

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-panel,.glance{max-width:420px;}
  .section-head{grid-template-columns:1fr;}
  .service-row{grid-template-columns:50px 1fr;}
  .service-row > p{grid-column:2;}
  .approach-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:30px;}
  .stats-grid .stat:nth-child(3){border-left:none;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:36px;}
  .overview{grid-template-columns:1fr;gap:40px;}
  .cards{grid-template-columns:1fr 1fr;}
  .other-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
  .nav-links{display:none;}
  .nav-links.open{
    display:flex;flex-direction:column;gap:18px;position:absolute;top:100%;left:0;right:0;
    background:var(--ink);padding:22px;border-bottom:1px solid var(--line-dark);
  }
  .mobile-toggle{display:block;}
  .nav-cta{display:none;}
  .hero{padding:150px 0 90px;}
  .hero h1,.page-hero h1{font-size:2.2rem;}
  .page-hero{padding:140px 0 70px;}
  .wrap{padding:0 22px;}
  .stats-grid{grid-template-columns:1fr;}
  .stats-grid .stat{border-left:none;padding-left:0;}
  .footer-grid{grid-template-columns:1fr;}
  .copyright{flex-direction:column;gap:8px;}
  .cards{grid-template-columns:1fr;}
  .steps li{grid-template-columns:48px 1fr;}
  .form-panel{padding:26px;}
  .detail section{padding:64px 0;}
  .subnav{top:61px;}
}

/* Contact form status + honeypot */
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
.form-status{margin-top:16px;font-size:0.92rem;min-height:1.2em;}
.form-status.ok{color:#2F6B3A;}
.form-status.err{color:#A33A3A;}
.submit-btn:disabled{opacity:0.65;cursor:wait;}
[hidden]{display:none!important;}