/* Type system follows the Akhani LLC brand reference: a high-contrast
   classical serif for display, a warm humanist sans for everything else,
   and no monospace anywhere. The previous build set seven different
   labels in IBM Plex Mono, uppercased and letter-spaced at 10-12px —
   which is what made the page read as a terminal rather than a
   consultancy. Sentence case and comfortable sizes throughout. */
:root{
  --ink:#0F2A4E;
  --ink-soft:#33455E;
  --muted:#4C5B70;
  --paper:#FFFFFF;
  --paper-raised:#FFFFFF;
  --paper-tint:#F6F8FB;
  --line:#E4E8EF;
  --rule:#B9CDE8;
  --akhani-blue:#1668D8;
  --akhani-blue-deep:#0F4894;
  --tls-coral:#D63232;
  --tt-blue:#1668D8;
  --tt-navy:#0C2340;
  --akhani-black:#111318;
  --radius:14px;
  --radius-lg:18px;
  --maxw:1040px;
  --shadow-card:0 1px 2px rgba(15,42,78,.04), 0 10px 28px rgba(15,42,78,.06);
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--akhani-blue);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* The brand reference pairs this label with a short rule to its left,
   in sentence case — not the uppercase, letter-spaced micro-caps that
   read as machine output. */
.eyebrow{
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  color:var(--akhani-blue);
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:28px; height:1.5px; background:var(--akhani-blue);
  display:inline-block;
}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  margin:0;
}

header{
  padding:20px 0;
  border-bottom:1px solid var(--line);
  background:var(--paper-tint);
}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brandmark{display:flex; align-items:center; gap:14px;}
.brandmark img{height:52px; width:auto; display:block;}
.brandmark-sub{
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:14px;
  line-height:1.45;
}
.header-cta{
  font-size:15px;
  font-weight:600;
  color:#fff;
  background:var(--akhani-blue);
  text-decoration:none;
  border:1.5px solid var(--akhani-blue);
  padding:10px 22px;
  border-radius:999px;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.header-cta:hover{background:var(--akhani-blue-deep); border-color:var(--akhani-blue-deep);}

.hero{padding:66px 0 40px;}
.hero h1{
  font-size:clamp(36px,5vw,56px);
  line-height:1.14;
  letter-spacing:-.005em;
  max-width:840px;
  margin-top:20px;
}
.hero h1 em{font-style:italic; color:var(--akhani-blue-deep);}
.hero-sub{max-width:640px; color:var(--ink-soft); font-size:18px; margin-top:20px;}

/* Hero: headline and copy on the left, brand structure on the right,
   then the four-step flow and the two calls to action. Follows the
   supplied layout reference, with its gold accent dropped — the two
   brand colours (Tech Transpire blue, True Lean Solutions coral) carry
   the accenting instead. */
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:52px; align-items:center;
}
.wordmark{margin:0 0 26px; display:flex; flex-direction:column; gap:4px;}
.wordmark-name{font-family:var(--serif); font-size:31px; font-weight:600; color:var(--ink); line-height:1.1;}
.wordmark-sub{
  font-size:15px; font-weight:600; color:var(--akhani-blue);
  display:inline-flex; align-items:center; gap:12px;
}
.wordmark-sub::before{content:""; width:34px; height:1.5px; background:var(--akhani-blue);}
.hero h1 em{font-style:normal; color:var(--akhani-blue);}

.hero-chart{display:flex; justify-content:center;}

/* The photograph stands on its own between the hero and the About panel,
   rather than running underneath the org chart. */
.photoband{margin:4px 0 56px;}
.photoband picture{display:block;}
.photoband img{
  display:block; width:100%;
  height:clamp(210px, 26vw, 330px);
  object-fit:cover; object-position:center 42%;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
}

.org{width:100%; max-width:430px;}
.hero-chart .org{max-width:430px;}
/* Same card treatment as the two brands below it, with black on top
   standing for the parent rather than either brand's colour. */
.org-head{
  margin:0 auto; max-width:260px;
  background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--line); border-top:3px solid var(--akhani-black);
  border-radius:12px;
  font-family:var(--serif); font-size:22px; font-weight:600;
  text-align:center; padding:15px 24px;
  box-shadow:var(--shadow-card);
}
.org-connect{position:relative; height:38px;}
.org-connect .stem{position:absolute; left:50%; top:0; width:1.5px; height:19px; background:var(--rule); transform:translateX(-50%);}
.org-connect .bar{position:absolute; top:19px; left:25%; right:25%; height:1.5px; background:var(--rule);}
.org-connect .bar::before,.org-connect .bar::after{content:""; position:absolute; top:0; width:1.5px; height:19px; background:var(--rule);}
.org-connect .bar::before{left:0;}
.org-connect .bar::after{right:0;}

.org-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.org-card{
  background:var(--paper-raised); border:1px solid var(--line);
  border-top-width:3px; border-radius:12px;
  padding:18px 16px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:var(--shadow-card);
}
.org-card.tt{border-top-color:var(--tt-blue);}
.org-card.tls{border-top-color:var(--tls-coral);}
.org-card img{height:44px; width:auto; object-fit:contain; margin-bottom:4px;}
.org-card-name{font-size:16.5px; font-weight:600; line-height:1.3;}
.org-card.tt .org-card-name{color:var(--tt-blue);}
.org-card.tls .org-card-name{color:var(--tls-coral);}
.org-card-body{font-size:13.5px; color:var(--muted); line-height:1.55;}

.steps{
  list-style:none; margin:46px 0 0; padding:24px 8px;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-card);
}
.step{display:flex; gap:14px; align-items:flex-start; padding:0 20px; position:relative;}
.step:not(:last-child)::after{
  content:""; position:absolute; right:-5px; top:16px;
  width:10px; height:10px; border-top:1.5px solid var(--rule); border-right:1.5px solid var(--rule);
  transform:rotate(45deg);
}
.step-icon{flex:none; width:46px; height:46px; object-fit:contain;}
.step-text{display:flex; flex-direction:column; gap:3px;}
.step-title{font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35;}
.step-body{font-size:13.5px; color:var(--muted); line-height:1.5;}

.hero-actions{
  margin-top:26px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.trust{
  margin:0; display:flex; align-items:center; gap:14px;
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:12px; padding:14px 20px;
  font-size:15px; color:var(--ink-soft);
}
.trust-mark{flex:none; width:42px; height:42px; object-fit:contain;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:16px; font-weight:600;
  padding:15px 28px; border-radius:11px; text-decoration:none;
  border:1.5px solid transparent; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-primary:hover{background:var(--akhani-blue-deep); border-color:var(--akhani-blue-deep);}
.btn-ghost{background:var(--paper-raised); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--akhani-blue); color:var(--akhani-blue);}

.about{padding:6px 0 60px;}
.about-panel{
  background:var(--tt-navy);
  color:#EAF0FA;
  border-radius:var(--radius-lg);
  padding:42px 40px;
  position:relative;
  overflow:hidden;
}
.about-panel::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(620px 250px at 85% -10%, rgba(22,104,216,.32), transparent 70%);
  pointer-events:none;
}
.about-panel .eyebrow{color:#9DC0F2;}
.about-panel .eyebrow::before{background:#9DC0F2;}
.about-panel p{position:relative; margin:18px 0 0; font-size:16.5px; line-height:1.78; color:#DCE5F2; max-width:780px;}
.about-panel p + p{margin-top:16px;}

.faq-section{padding-bottom:20px;}
.faq-empty{color:var(--muted); font-size:16px; padding:20px 0 60px;}
.filter-row{padding:8px 0 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.filter-row .filter-label{font-size:14.5px; color:var(--muted);}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.search-field{position:relative; flex:1 1 280px; min-width:230px; max-width:430px;}
.search-icon{
  position:absolute; left:16px; top:50%; margin-top:-7px;
  width:11px; height:11px; border:1.8px solid var(--muted); border-radius:50%;
  pointer-events:none;
}
.search-icon::after{
  content:""; position:absolute; right:-5px; bottom:-3px;
  width:6px; height:1.8px; background:var(--muted); transform:rotate(45deg);
}
.search-input{
  width:100%; font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:999px; padding:12px 18px 12px 40px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-input::placeholder{color:var(--muted);}
.search-input:focus{outline:none; border-color:var(--akhani-blue); box-shadow:0 0 0 3px rgba(22,104,216,.16);}
.pill-field{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.faq-count{font-size:14px; color:var(--muted); margin:0 0 20px; min-height:18px;}
.linkbtn{
  border:none; background:none; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:inherit;
  color:var(--akhani-blue); text-decoration:underline; text-underline-offset:2px;
}
.pillgroup{display:inline-flex; background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px;}
.pill{
  border:none; background:transparent; cursor:pointer;
  font-family:var(--sans);
  font-size:15px; font-weight:600; color:var(--muted);
  padding:9px 18px; border-radius:999px;
  transition:background .15s ease, color .15s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.pill .dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.pill[data-brand="TLS"] .dot{background:var(--tls-coral);}
.pill[data-brand="TT"] .dot{background:var(--tt-blue);}
.pill[data-brand="ALL"] .dot{background:var(--akhani-blue);}
.pill.active{background:var(--ink); color:#fff;}
.pill:not(.active):hover{color:var(--ink);}

.category-block{margin-bottom:40px;}
/* Was an uppercase, letter-spaced monospace micro-label. Now a real
   heading, which is what it always was structurally. */
.category-title{
  font-family:var(--serif);
  font-size:22px; font-weight:600; color:var(--ink);
  padding-bottom:12px; margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.qa{border-bottom:1px solid var(--line);}
.qa[hidden]{display:none;}
.qa-trigger{
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:22px 2px; text-align:left; font-family:var(--sans);
  list-style:none;
}
/* Kill the native disclosure triangle — the +/- icon replaces it. */
.qa-trigger::-webkit-details-marker{display:none;}
.qa-trigger::marker{content:"";}
.qa-trigger:focus-visible{outline:2px solid var(--akhani-blue); outline-offset:2px; border-radius:6px;}
.qa-question-wrap{display:flex; flex-direction:column; gap:8px;}
.qa-badges{display:flex; gap:7px;}
.badge{
  font-family:var(--sans); font-size:12px; font-weight:600; line-height:1.5;
  padding:2px 9px; border-radius:5px; border:1px solid transparent;
}
.badge.tls{color:var(--tls-coral); border-color:rgba(214,50,50,.32); background:rgba(214,50,50,.07);}
.badge.tt{color:var(--tt-blue); border-color:rgba(22,104,216,.3); background:rgba(22,104,216,.07);}
.qa-question{font-size:18px; font-weight:600; color:var(--ink); line-height:1.4;}
.qa-short{font-size:15.5px; color:var(--ink-soft); font-weight:400; line-height:1.6;}
.qa-icon{
  flex:none; width:28px; height:28px; margin-top:3px;
  border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:transform .2s ease, border-color .2s ease;
}
.qa-icon::before,.qa-icon::after{content:""; position:absolute; background:var(--ink);}
.qa-icon::before{width:11px; height:1.6px;}
.qa-icon::after{width:1.6px; height:11px; transition:opacity .2s ease;}
.qa[open] .qa-icon{border-color:var(--akhani-blue);}
.qa[open] .qa-icon::after{opacity:0;}
/* Native <details> cannot transition its own height, so the reveal lives on
   the inner panel. No max-height:0 here on purpose — that was what made the
   answers unreadable whenever site.js failed to load. */
.qa-panel{overflow:hidden;}
.qa-panel-inner{
  padding:0 2px 24px 2px; max-width:700px;
  color:var(--ink-soft); font-size:16.5px; line-height:1.78;
  white-space:pre-wrap;
  animation:qa-reveal .22s ease;
}
@keyframes qa-reveal{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.qa-panel-inner a{color:var(--akhani-blue); text-decoration:underline; text-underline-offset:2px;}
.qa-panel-inner a:hover{color:var(--akhani-blue-deep);}
.category-block[hidden]{display:none;}

.cta-band{
  margin:24px 0 64px;
  background:linear-gradient(135deg, var(--akhani-blue) 0%, var(--akhani-blue-deep) 100%);
  border-radius:var(--radius-lg);
  padding:46px 40px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{font-size:30px; color:#fff; max-width:660px;}
.cta-band p{color:#DFEAFB; font-size:16.5px; line-height:1.75; margin:14px 0 0; max-width:660px;}

footer{border-top:1px solid var(--line); padding:34px 0 44px;}
footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-brand img{height:38px; width:auto;}
.footer-legal{font-size:14px; color:var(--muted); max-width:560px; line-height:1.65;}
.footer-links{font-size:15px; display:flex; gap:16px;}
.footer-links a{color:var(--muted); text-decoration:none;}
.footer-links a:hover{color:var(--ink);}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:38px;}
  .steps{grid-template-columns:1fr 1fr; gap:22px 0; padding:22px 4px;}
  .step:nth-child(2)::after{display:none;}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr; gap:20px; padding:22px 6px;}
  .step::after{display:none !important;}
  .org-cards{grid-template-columns:1fr; gap:14px;}
  .org-connect .bar{display:none;}
  .org-connect{height:24px;}
  .org-connect .stem{height:24px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .btn{width:100%;}
  .wrap{padding:0 20px;}
  .hero{padding:44px 0 28px;}
  .diagram-shell{padding:26px 20px 22px;}
  .about-panel{padding:30px 24px;}
  .cta-band{padding:34px 26px; flex-direction:column; align-items:flex-start;}
  .brandmark-sub{display:none;}
  footer .wrap{flex-direction:column; align-items:flex-start;}
}

}