:root{
  --ink:#14171C;
  --paper:#EAE6DD;
  --paper-2:#DED8CB;
  --teal:#2FA8A0;
  --teal-dim:#1F6F6A;
  --amber:#E8A33D;
  --amber-dark:#c9821f;
  --steel:#57606F;
  --white:#FFFFFF;
  --line: rgba(20,23,28,0.14);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', system-ui, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

.wrap{ max-width:980px; margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal-dim);
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; background:var(--teal);
  border-radius:50%; box-shadow:0 0 0 3px rgba(47,168,160,0.18);
}

/* header / nav */
header{ border-bottom:1px solid var(--line); }
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 24px;
  padding:16px 0;
}
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo svg{ display:block; flex:none; }
.wordmark{
  font-family:'Caprasimo', Georgia, serif;
  font-size:20px; line-height:1.25;
  white-space:nowrap; color:var(--ink);
}
.wordmark .slash{ color:var(--teal); }

.nav-links{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 4px;
  font-size:14px; font-weight:500;
}
.nav-links a{
  text-decoration:none;
  padding:8px 12px;
  border-radius:6px;
  color:var(--steel);
}
.nav-links a:hover{ background:var(--paper-2); color:var(--ink); }
.nav-links a[aria-current="page"]{
  color:var(--ink);
  background:var(--paper-2);
}

.phone-chip{
  font-family:'Caprasimo', Georgia, serif;
  font-size:14px;
  background:var(--amber);
  color:var(--ink);
  border:none;
  border-radius:999px;
  padding:10px 20px; text-decoration:none;
  white-space:nowrap;
}
.phone-chip:hover{ background:var(--amber-dark); }
.phone-chip:active{ background:#a06414; }
.nav-contact{ display:flex; align-items:center; gap:14px; }
.email-link{
  font-family:'JetBrains Mono', monospace; font-size:13.5px;
  color:var(--steel); text-decoration:none;
}
.email-link:hover{ text-decoration:underline; }
@media (max-width:640px){
  .email-link{ display:none; }
}

/* hero */
.hero{ padding:64px 0 56px; text-align:center; }
.hero .eyebrow{ justify-content:center; margin-bottom:16px; }
.hero h1{
  font-size:clamp(30px, 4.4vw, 46px);
  line-height:1.1; letter-spacing:-0.02em;
  max-width:22ch; margin:0 auto 16px;
}
.hero p{
  color:var(--steel); font-size:16.5px;
  max-width:52ch; margin:0 auto;
}
.hero .btn{ margin-top:28px; }

/* split hero w/ contact form */
.hero-split{ text-align:left; }
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:start;
}
.hero-copy .eyebrow{ justify-content:flex-start; }
.hero-copy h1{
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.12; letter-spacing:-0.02em;
  max-width:18ch; margin:0 0 16px;
}
.hero-copy p{
  color:var(--steel); font-size:16.5px;
  max-width:48ch; margin:0 0 24px;
}
.hero-copy .trust-bar{ justify-content:flex-start; padding-top:26px; }

.hero-form-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
}
.hero-form-card h2{ font-size:19px; margin-bottom:6px; }
.hero-form-card > p{ color:var(--steel); font-size:13.5px; margin-bottom:20px; }
.hero-form-card form{ display:flex; flex-direction:column; gap:14px; }
.hero-form-card label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink);
}
.hero-form-card input,
.hero-form-card select,
.hero-form-card textarea{
  font:inherit; font-size:14.5px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  width:100%;
}
.hero-form-card input:focus,
.hero-form-card select:focus,
.hero-form-card textarea:focus{
  outline:2px solid var(--teal); outline-offset:1px;
}
.hero-form-card textarea{ resize:vertical; }
.hero-form-submit{ width:100%; justify-content:center; margin-top:4px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy h1{ max-width:none; }
}

/* brand kit header banner — 1600x400, scaled as a fixed unit, never reflowed */
.banner-scale-wrap{
  position:relative;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  overflow:hidden;
  aspect-ratio:1600/400;
  border-radius:20px;
}
.dspc-banner-inner{
  position:absolute; top:0; left:0;
  width:1600px; height:400px;
  transform-origin:top left;
  box-sizing:border-box;
  background:#14171c;
  display:flex; align-items:center; justify-content:space-between;
  gap:48px; padding:0 72px;
  overflow:hidden;
  font-family:'Figtree', 'Space Grotesk', system-ui, sans-serif;
}
.banner-blob{ position:absolute; border-radius:50%; }
.dspc-banner-inner h2{
  font-family:'Caprasimo', Georgia, serif; font-size:66px; line-height:1.04;
  white-space:nowrap; color:#f7f5f0; margin:0;
}
.banner-lockup{ display:flex; align-items:center; gap:18px; }
.banner-wordmark{
  font-family:'Caprasimo', Georgia, serif; font-size:34px; line-height:1.25;
  white-space:nowrap; color:#f7f5f0;
}
.banner-wordmark .slash{ color:#57c2ba; }
.banner-subline{ font-size:24px; color:#f5cc8b; }
.banner-pill{
  display:inline-block; background:#e8a33d; color:#14171c;
  border-radius:999px; white-space:nowrap; text-decoration:none;
  font-family:'Caprasimo', Georgia, serif; font-size:23px; padding:16px 28px;
}
.banner-pill:hover{ background:#c9821f; }
.banner-pill:focus-visible{ outline:2px solid #2fa8a0; outline-offset:2px; }

/* diagnostic scan animation */
.diag-monitor{ margin-top:28px; max-width:320px; }
.diag-screen{
  position:relative;
  background:var(--ink);
  border:2px solid var(--paper-2);
  border-bottom:none;
  border-radius:9px 9px 2px 2px;
  padding:16px 18px 20px;
  min-height:150px;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
}
.diag-screen::after{
  content:"";
  position:absolute;
  top:-2px; left:50%;
  transform:translateX(-50%);
  width:6px; height:6px;
  border-radius:50%;
  background:var(--steel);
  box-shadow:0 0 0 2px var(--paper-2), 0 0 5px 1px rgba(47,168,160,0.7);
  animation:diagCam 2.6s ease-in-out infinite;
}
@keyframes diagCam{
  0%,100%{ box-shadow:0 0 0 2px var(--paper-2), 0 0 3px 0 rgba(47,168,160,0.4); }
  50%{ box-shadow:0 0 0 2px var(--paper-2), 0 0 6px 2px rgba(47,168,160,0.9); }
}

.diag-stand{
  position:relative;
  width:118%;
  margin:0 auto;
  margin-left:-9%;
  height:32px;
  background:var(--paper-2);
  background-image:repeating-linear-gradient(to bottom, transparent 0 5px, rgba(20,23,28,0.08) 5px 6px);
  clip-path:polygon(6% 0, 94% 0, 100% 100%, 0% 100%);
}
.diag-stand::before{
  content:"";
  display:block;
  width:64px;
  height:4px;
  margin:0 auto;
  background:var(--ink);
  opacity:0.22;
  border-radius:2px;
  transform:translateY(-1px);
}
.diag-stand::after{
  content:"";
  position:absolute;
  bottom:5px; left:50%;
  transform:translateX(-50%);
  width:46px; height:15px;
  border-radius:4px;
  background:rgba(20,23,28,0.1);
  border:1px solid rgba(20,23,28,0.14);
}
.diag-monitor::after{
  content:"";
  display:block;
  width:74%;
  height:10px;
  margin:6px auto 0;
  background:radial-gradient(ellipse at center, rgba(20,23,28,0.16), transparent 72%);
}
.diag-line{
  color:var(--paper);
  opacity:0;
  margin-bottom:7px;
  animation-duration:9s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.diag-line .ok{ color:var(--amber); font-weight:600; margin-left:6px; }
.diag-line-1{ animation-name:diagLine1; }
.diag-line-2{ animation-name:diagLine2; }
.diag-line-3{ animation-name:diagLine3; }
.diag-line-4{ animation-name:diagLine4; }
.diag-line-5{ animation-name:diagLine5; }

@keyframes diagLine1{ 0%,4%{opacity:0;} 8%,82%{opacity:1;} 88%,100%{opacity:0;} }
@keyframes diagLine2{ 0%,17%{opacity:0;} 21%,82%{opacity:1;} 88%,100%{opacity:0;} }
@keyframes diagLine3{ 0%,30%{opacity:0;} 34%,82%{opacity:1;} 88%,100%{opacity:0;} }
@keyframes diagLine4{ 0%,43%{opacity:0;} 47%,82%{opacity:1;} 88%,100%{opacity:0;} }
@keyframes diagLine5{ 0%,56%{opacity:0;} 60%,82%{opacity:1;} 88%,100%{opacity:0;} }

.diag-progress{
  height:4px; background:rgba(234,230,221,0.18);
  border-radius:2px; overflow:hidden; margin-top:12px;
}
.diag-progress-bar{
  height:100%; width:0%;
  background:var(--teal);
  animation:diagProgress 9s ease-in-out infinite;
}
@keyframes diagProgress{
  0%{ width:0%; }
  8%{ width:10%; }
  21%{ width:30%; }
  34%{ width:50%; }
  47%{ width:70%; }
  60%,82%{ width:100%; }
  88%,100%{ width:0%; }
}

.diag-cursor{
  position:absolute; right:16px; bottom:14px;
  color:var(--teal);
  animation:diagBlink 1s steps(1) infinite;
}
@keyframes diagBlink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

@media (prefers-reduced-motion: reduce){
  .diag-line, .diag-progress-bar, .diag-cursor{ animation:none !important; }
  .diag-line{ opacity:1; }
  .diag-progress-bar{ width:100%; }
}

@media (max-width:480px){
  .diag-monitor{ max-width:260px; }
}

/* subpage hero (smaller, left aligned) */
.page-hero{ padding:48px 0 40px; }
.page-hero .eyebrow{ margin-bottom:14px; }
.page-hero h1{
  font-size:clamp(26px, 3.6vw, 38px);
  line-height:1.15; letter-spacing:-0.02em;
  max-width:26ch; margin:0 0 14px;
}
.page-hero p{
  color:var(--steel); font-size:16px; max-width:60ch;
}

section{ padding:56px 0; }
.divider{
  height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}

.section-head{ margin-bottom:32px; }
.section-head h2{ font-size:clamp(22px,2.6vw,28px); margin-top:10px; letter-spacing:-0.01em; }
.section-head p{ color:var(--steel); font-size:15px; margin-top:8px; max-width:56ch; }

/* icon badges */
.icon-badge{
  width:56px; height:56px; flex-shrink:0;
  background:var(--paper-2);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.icon-badge svg{ width:32px; height:32px; }
.icon-badge.small{ width:44px; height:44px; border-radius:12px; margin-bottom:14px; }
.icon-badge.small svg{ width:24px; height:24px; }

/* single price card (diagnostics / custom build) */
.price-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.price-card-left{ display:flex; align-items:center; gap:20px; }
.price-card .info h3{ font-size:20px; margin-bottom:8px; }
.price-card .info p{ color:var(--steel); font-size:14.5px; max-width:52ch; }
.price-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:30px; font-weight:600;
  color:var(--teal-dim);
  white-space:nowrap;
}
.price-tag span{ font-size:14px; color:var(--steel); display:block; font-weight:400; margin-top:4px; }

/* tier grid (wfh setup) */
.tier-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.tier-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px;
  display:flex; flex-direction:column;
}
.tier-card.featured{
  border-color:var(--teal);
  box-shadow:0 12px 30px -18px rgba(47,168,160,0.4);
}
.tier-name{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--steel); margin-bottom:14px;
}
.tier-price{
  font-family:'JetBrains Mono', monospace;
  font-size:28px; font-weight:600; color:var(--ink);
  margin-bottom:6px;
}
.tier-scope{ font-size:12.5px; color:var(--steel); margin-bottom:18px; }
.tier-card ul{ display:flex; flex-direction:column; gap:9px; margin-top:auto; }
.tier-card li{
  font-size:13.75px; display:flex; gap:9px; align-items:flex-start;
}
.tier-card li::before{ content:"✓"; color:var(--teal); flex-shrink:0; font-weight:700; }

@media (max-width:820px){
  .tier-grid{ grid-template-columns:1fr; }
  .price-card{ flex-direction:column; align-items:flex-start; }
}

.note{
  margin-top:20px;
  font-size:13px; color:var(--steel);
  display:flex; gap:9px; align-items:flex-start;
}

/* service area map */
#service-map{
  height:420px;
  width:100%;
  border-radius:10px;
  border:1px solid var(--line);
  z-index:0;
}
@media (max-width:640px){
  #service-map{ height:320px; }
}

/* service areas */
.area-grid{
  display:flex; flex-wrap:wrap; gap:10px;
}
.area-chip{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 18px;
  font-size:14px; font-weight:500;
  display:flex; align-items:center; gap:8px;
}
.area-chip::before{
  content:"◎"; color:var(--teal-dim); font-size:12px;
}
.addon-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.addon-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 20px;
}
.addon-card .addon-code{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.06em;
  color:var(--teal-dim); margin-bottom:10px; display:block;
}
.addon-card h3{ font-size:16px; margin-bottom:8px; }
.addon-card p{ font-size:13px; color:var(--steel); }

@media (max-width:820px){
  .addon-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .addon-grid{ grid-template-columns:1fr; }
}

/* services overview grid (home) */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.service-card:hover{
  border-color:var(--teal);
  transform:translateY(-2px);
}
.service-card h3{ font-size:18px; }
.service-card p{ color:var(--steel); font-size:14px; }
.service-card .card-link{
  margin-top:auto;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px; color:var(--teal-dim); font-weight:600;
}
@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
}

/* why choose us */
.value-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 28px;
}
.value-item{ display:flex; gap:14px; align-items:flex-start; }
.value-item h3{ font-size:15.5px; margin-bottom:6px; }
.value-item p{ color:var(--steel); font-size:13.75px; }
@media (max-width:640px){
  .value-grid{ grid-template-columns:1fr; }
}

/* trust / value bar */
.trust-bar{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 14px;
  padding:22px 0 0;
}
.trust-chip{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px; color:var(--steel);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  display:flex; align-items:center; gap:8px;
}
.trust-chip::before{ content:"✓"; color:var(--teal-dim); font-weight:700; }

/* tier comparison table */
.table-scroll{ overflow-x:auto; }
.compare-table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  min-width:560px;
}
.compare-table th, .compare-table td{
  padding:14px 16px;
  text-align:center;
  border-bottom:1px solid var(--line);
  font-size:13.75px;
}
.compare-table td:first-child, .compare-table th:first-child{
  text-align:left;
  color:var(--steel);
  font-size:13.5px;
}
.compare-table thead th{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink);
  background:var(--paper-2);
}
.compare-table thead th span{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:15px; text-transform:none; letter-spacing:0;
  color:var(--teal-dim); margin-top:4px;
}
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table tbody tr:nth-child(even){ background:rgba(20,23,28,0.02); }

/* FAQ accordion */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:4px 24px;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:18px 0;
  font-weight:600;
  font-size:15.5px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:'JetBrains Mono', monospace;
  font-size:20px; color:var(--teal-dim);
  flex-shrink:0;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{
  color:var(--steel); font-size:14.5px;
  padding:0 0 20px;
  max-width:64ch;
}

/* CTA */
.cta-band{
  background:var(--ink); color:var(--paper);
  border-radius:14px; margin:0 24px;
  padding:48px 32px; text-align:center;
}
.cta-band h2{ font-size:clamp(22px,3vw,30px); margin-bottom:12px; }
.cta-band p{ color:rgba(234,230,221,0.7); font-size:15px; margin-bottom:26px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:6px;
  font-weight:600; font-size:15px; text-decoration:none;
  background:var(--amber); color:var(--ink);
  border:1.5px solid var(--amber);
}
.btn:hover{ background:#d6912e; border-color:#d6912e; }
.btn-outline{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:6px;
  font-weight:600; font-size:14.5px; text-decoration:none;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink);
  margin-top:20px;
}
.btn-outline:hover{ background:var(--paper-2); }

footer{ padding:44px 0 36px; text-align:center; }
footer p{ color:var(--steel); font-size:13px; margin-top:6px; }
.footer-links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 4px; margin-top:18px; font-size:13px;
}
.footer-links a{ text-decoration:none; color:var(--steel); padding:4px 8px; }
.footer-links a:hover{ text-decoration:underline; color:var(--ink); }
.footer-links .sep{ color:var(--line); }

/* gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.gallery-item{
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(20,23,28,0.78), transparent);
  color:var(--white); font-size:12.5px;
  padding:20px 12px 10px;
}

@media (max-width:820px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .gallery-grid{ grid-template-columns:1fr 1fr; gap:10px; }
}

/* homepage build showcase carousel */
.showcase-carousel{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
}
.showcase-slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 0.7s ease;
}
.showcase-slide.active{ opacity:1; z-index:1; }
.showcase-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.showcase-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background:rgba(20,23,28,0.55);
  color:var(--white); border:1.5px solid rgba(255,255,255,0.5);
  cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  transition:background 0.15s ease;
}
.showcase-arrow:hover{ background:rgba(20,23,28,0.8); }
.showcase-arrow.prev{ left:16px; }
.showcase-arrow.next{ right:16px; }
.showcase-dots{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.showcase-dot{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:rgba(255,255,255,0.45);
  border:1.5px solid rgba(255,255,255,0.8);
  cursor:pointer;
}
.showcase-dot.active{ background:var(--amber); border-color:var(--amber); }
@media (max-width:640px){
  .showcase-carousel{ aspect-ratio:4/3; }
  .showcase-arrow{ width:34px; height:34px; font-size:17px; }
}

/* blog index */
.category-tag{
  display:inline-flex;
  align-self:flex-start;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--teal-dim);
  background:var(--paper-2);
  border-radius:999px;
  padding:5px 12px;
}
.blog-layout{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:40px;
  align-items:start;
}
.blog-featured{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:36px;
}
.blog-featured .eyebrow{ margin-bottom:10px; }
.blog-featured h2{
  font-size:clamp(22px,2.6vw,28px);
  letter-spacing:-0.01em;
  margin:6px 0 18px;
}
.blog-featured .permalink{
  display:inline-block;
  margin-top:22px;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px; color:var(--teal-dim); font-weight:600;
  text-decoration:none;
}
.blog-featured .permalink:hover{ text-decoration:underline; }
.blog-sidebar{ position:sticky; top:24px; }
.blog-sidebar > h3{ font-size:14px; margin-bottom:18px; }
.sidebar-cat{ margin-bottom:26px; }
.sidebar-cat .category-tag{ margin-bottom:10px; }
.sidebar-cat ul{ display:flex; flex-direction:column; gap:10px; }
.sidebar-cat li a{
  display:block;
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
  text-decoration:none;
  border-left:2px solid var(--line);
  padding-left:12px;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.sidebar-cat li a:hover{ border-color:var(--teal); color:var(--teal-dim); }
@media (max-width:820px){
  .blog-layout{ grid-template-columns:1fr; }
  .blog-sidebar{ position:static; }
}
@media (max-width:640px){
  .blog-featured{ padding:24px; }
}

/* blog post body */
.post-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace;
  font-size:12px; color:var(--steel);
  margin-bottom:14px;
}
.post-body{ max-width:70ch; }
.post-body h2{
  font-size:22px;
  margin-top:36px;
  margin-bottom:12px;
  letter-spacing:-0.01em;
}
.post-body h3{
  font-size:17px;
  margin-top:24px;
  margin-bottom:8px;
}
.post-body p{
  color:var(--ink);
  font-size:15.5px;
  line-height:1.7;
  margin-bottom:16px;
}
.post-body ul{ margin-bottom:16px; }
.post-body li{
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink);
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
.post-body li::before{
  content:"\2192";
  color:var(--teal-dim);
  flex-shrink:0;
  font-weight:700;
}

/* reviews */
.testimonial-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px 32px;
  max-width:640px;
  margin-bottom:28px;
}
.testimonial-stars{
  color:var(--amber); font-size:16px; letter-spacing:2px; margin-bottom:14px;
}
.testimonial-card p{ font-size:15px; color:var(--ink); line-height:1.6; }
.testimonial-name{
  display:block; margin-top:16px;
  font-family:'JetBrains Mono', monospace; font-size:13px;
  color:var(--steel);
}
.review-cta{
  display:inline-flex; align-items:center; gap:8px;
}