/* ============================================================
   Buildgin, inner pages. Loads on top of site.css.
   ============================================================ */

.pagehead{padding-block:clamp(120px,17vh,190px) clamp(48px,7vh,80px)}
.pagehead h1{max-width:18ch;margin-top:18px}
.pagehead .lead{margin-top:22px}
.crumb{display:flex;align-items:center;gap:12px;color:var(--mute)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.crumb a:hover{color:var(--fg);border-color:var(--fg)}

/* ---------------- blog index ---------------- */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px);
  padding-bottom:clamp(88px,13vh,168px)}
.posts .pcard:first-child{grid-column:1/-1}
.pcard{position:relative;display:flex;flex-direction:column;text-align:left;
  background:var(--surface);border:0;border-radius:var(--r-card);overflow:hidden;cursor:pointer;
  color:inherit;padding:0;
  opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),background var(--t-micro) var(--ease)}
.posts.in .pcard{opacity:1;transform:none;transition-delay:calc(var(--i) * 85ms)}
.pcard:hover{background:var(--bone-2)}
.pcard .part{aspect-ratio:16/9;background:var(--void);overflow:hidden}
.pcard:first-child .part{aspect-ratio:21/8}
.pcard .part img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.pcard:hover .part img{transform:scale(1.045)}
.pcard .pmeta{padding:clamp(20px,2vw,30px) clamp(20px,2vw,30px) clamp(26px,2.4vw,36px);
  display:flex;flex-direction:column;gap:12px}
.pcard h2{font-family:'Archivo';font-weight:600;letter-spacing:-.028em;line-height:1.14;
  font-size:clamp(1.2rem,2vw,1.7rem);color:var(--fg);max-width:24ch}
.pcard:first-child h2{font-size:clamp(1.5rem,3vw,2.5rem);max-width:20ch}
.pcard .pex{font-size:.9375rem;line-height:1.55;color:var(--mute);max-width:52ch}
.pcard .more{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--red);
  font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}
.pcard .more svg{width:14px;height:14px;transition:transform var(--t-micro) var(--ease)}
.pcard:hover .more svg{transform:translateX(4px)}

/* ---------------- reader overlay ---------------- */
.reader{position:fixed;inset:0;z-index:90;background:var(--bone);
  overflow-y:auto;opacity:0;visibility:hidden;
  transition:opacity .38s var(--ease),visibility .38s}
.reader.open{opacity:1;visibility:visible}
.reader .rtop{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:18px var(--edge);
  background:color-mix(in srgb,var(--bone) 92%,transparent);border-bottom:1px solid var(--line-on-light)}
.reader .rclose{background:none;border:1px solid var(--line-on-light);border-radius:var(--r-control);
  padding:9px 14px;cursor:pointer;color:var(--ink-on-light);
  font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color var(--t-micro) var(--ease)}
.reader .rclose:hover{border-color:var(--red);color:var(--red)}
.reader .rbar{position:absolute;left:0;bottom:-1px;height:1px;background:var(--red);width:0}
.article{max-width:760px;margin-inline:auto;padding:clamp(40px,7vh,84px) var(--edge) clamp(80px,12vh,140px);
  color:var(--ink-on-light)}
.article .kicker{color:var(--red);margin-bottom:16px}
.article h1{font-family:'Archivo';font-weight:600;letter-spacing:-.032em;line-height:1.02;
  font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:20px}
.article .stand{font-size:1.125rem;line-height:1.6;color:var(--ash-on-light);
  padding-bottom:26px;border-bottom:1px solid var(--line-on-light);margin-bottom:34px}
.article figure{margin:34px 0}
.article figure img{width:100%;border-radius:var(--r-card);background:var(--void)}
.article figcaption{margin-top:10px;font-family:'Archivo',sans-serif;font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ash-on-light);opacity:.75}
.article h3{font-family:'Archivo';font-weight:600;letter-spacing:-.024em;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2;margin:38px 0 14px}
.article p{margin-bottom:18px;line-height:1.7;max-width:68ch}
.article ul{margin:0 0 20px 0;padding-left:20px}
.article li{margin-bottom:9px;line-height:1.65}
.article .pull{border-left:2px solid var(--red);padding:6px 0 6px 22px;margin:30px 0;
  font-family:'Archivo';font-weight:600;letter-spacing:-.024em;
  font-size:clamp(1.1rem,1.9vw,1.45rem);line-height:1.28}
.article .endnote{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-on-light);
  font-size:.875rem;color:var(--ash-on-light)}

/* ---------------- learn page ---------------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);
  padding-bottom:clamp(60px,9vh,110px)}
.fcard{position:relative;text-align:left;cursor:pointer;color:inherit;padding:0;border:0;
  background:var(--void-2);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(28px) scale(.98);
  transition:opacity .62s var(--ease),transform .62s var(--ease),background var(--t-micro) var(--ease)}
.formats.in .fcard{opacity:1;transform:none;transition-delay:calc(var(--i) * 80ms)}
.fcard:hover{background:#171D26}
.fcard .fart{aspect-ratio:16/10;background:var(--void);overflow:hidden}
.fcard .fart img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.fcard:hover .fart img{transform:scale(1.06)}
.fcard .fmeta{padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.fcard .fn{color:var(--red)}
.fcard h2{font-family:'Archivo';font-weight:600;letter-spacing:-.024em;line-height:1.16;
  font-size:clamp(1.05rem,1.5vw,1.32rem);color:var(--ink-on-dark)}
.fcard .fex{font-size:.875rem;line-height:1.55;color:var(--ash-on-dark);max-width:36ch}
.fcard .fcount{margin-top:auto;padding-top:14px;color:var(--ash-on-dark);opacity:.7}
.fcard::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.fcard:hover::after{transform:scaleX(1)}

.reader.dark{background:var(--void)}
.reader.dark .rtop{background:color-mix(in srgb,var(--void) 92%,transparent);
  border-bottom-color:var(--line-on-dark)}
.reader.dark .rclose{border-color:var(--line-on-dark);color:var(--ink-on-dark)}
.reader.dark .article{color:var(--ink-on-dark)}
.reader.dark .article .stand{color:var(--ash-on-dark);border-bottom-color:var(--line-on-dark)}
.reader.dark .article .endnote{border-top-color:var(--line-on-dark);color:var(--ash-on-dark)}
.reader.dark .article figcaption{color:var(--ash-on-dark)}

.deck{display:flex;flex-direction:column;gap:0}
.deck .row{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line-on-dark)}
.reader:not(.dark) .deck .row{border-bottom-color:var(--line-on-light)}
.deck .row .n{font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.1em;color:var(--red)}
.deck .row b{font-family:'Archivo';font-weight:600;letter-spacing:-.02em;font-size:1.02rem;line-height:1.3}
.deck .row .d{grid-column:2;font-size:.9375rem;line-height:1.6;color:var(--ash-on-dark);margin-top:6px}
.reader:not(.dark) .deck .row .d{color:var(--ash-on-light)}
.deck .row .tagv{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash-on-dark);white-space:nowrap}

@media (max-width:900px){
  .posts{grid-template-columns:1fr}
  .formats{grid-template-columns:1fr}
  .deck .row{grid-template-columns:auto 1fr}
  .deck .row .tagv{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pcard,.fcard{opacity:1;transform:none}
}

.disclose{margin-top:26px;max-width:76ch;font-size:.875rem;line-height:1.65;
  letter-spacing:-.008em;color:var(--mute);text-transform:none;
  font-family:'Archivo',sans-serif;
  border-left:2px solid var(--red);padding-left:18px}

/* =========================================================
   RESOURCES HUB
   ========================================================= */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3.6vw,44px)}
.jump a{text-decoration:none;color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r-control);padding:10px 15px;opacity:.8;
  transition:opacity var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease)}
.jump a:hover{opacity:1;border-color:var(--red);color:var(--red)}

.cats{padding-bottom:clamp(60px,9vh,110px)}
.catrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);
  align-items:center;padding-block:clamp(44px,7vh,86px);border-top:1px solid var(--line)}
.catrow:first-child{border-top:0;padding-top:clamp(20px,3vh,34px)}
.catrow.flip .catart{order:2}
.catart{border-radius:var(--r-card);overflow:hidden;background:var(--void);aspect-ratio:16/10}
.catart img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.catrow:hover .catart img{transform:scale(1.035)}
.cattext .catn{color:var(--red);margin-bottom:14px}
.cattext h2{margin-bottom:14px;max-width:18ch}
.cattext .body{margin-bottom:22px}
.catlink{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r-control);padding:13px 18px;
  transition:border-color var(--t-micro) var(--ease),gap var(--t-micro) var(--ease)}
.catlink svg{width:15px;height:15px}
.catlink:hover{border-color:var(--red);color:var(--red);gap:15px}
.catfeat{margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--line)}
.catfeat a{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:padding-left var(--t-micro) var(--ease)}
.catfeat a span{color:var(--mute)}
.catfeat a b{font-weight:600;letter-spacing:-.018em;font-size:.9375rem;line-height:1.35}
.catfeat a:hover{padding-left:8px}
.catfeat a:hover b{color:var(--red)}

.bench.deck .row{border-bottom-color:var(--line-on-dark)}
.bench.deck .row .d{color:var(--ash-on-dark)}
.cmpgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(30px,4vw,48px)}
.cmpcard{background:var(--surface);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:14px}
.cmpcard .ck{color:var(--red)}
.cmpcard .cbody{font-size:.9375rem;line-height:1.6;color:var(--mute)}
.cmpcard .cverdict{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:.9375rem;line-height:1.55;color:var(--fg)}
.cmpcard .cverdict .mono{color:var(--red);display:block;margin-bottom:5px}

/* =========================================================
   ARTICLE PAGE
   ========================================================= */
.posthead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding-block:clamp(112px,16vh,176px) clamp(40px,6vh,70px)}
.posthead .pdate{color:var(--mute);margin:18px 0 14px}
.posthead h1{max-width:16ch}
.posthead .lead{margin-top:20px}
.phimg{border-radius:var(--r-card);overflow:hidden;background:var(--void);aspect-ratio:16/10}
.phimg img{width:100%;height:100%;object-fit:cover}

.postbody{display:grid;grid-template-columns:250px 1fr;gap:clamp(30px,5vw,80px);
  align-items:start;border-top:1px solid var(--line);padding-top:clamp(36px,5vh,60px)}
.postside{position:sticky;top:100px}
.sidelabel{color:var(--mute);padding-bottom:12px;border-bottom:1px solid var(--line)}
.sidelinks a{display:block;padding:14px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left var(--t-micro) var(--ease)}
.sidelinks a span{display:block;color:var(--mute);margin-bottom:5px}
.sidelinks a b{font-weight:600;font-size:.875rem;line-height:1.35;letter-spacing:-.015em}
.sidelinks a:hover{padding-left:7px}
.sidelinks a:hover b{color:var(--red)}
.sideall{display:inline-block;margin-top:22px;color:var(--red);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px}
.postarticle{max-width:none;margin:0;padding:0}
.postarticle p{max-width:70ch}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding-block:clamp(44px,7vh,80px) clamp(70px,11vh,130px)}
.pager a{text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--r-card);padding:22px 24px;
  transition:border-color var(--t-micro) var(--ease)}
.pager a:hover{border-color:var(--red)}
.pager a span{display:block;color:var(--mute);margin-bottom:8px}
.pager a b{font-weight:600;letter-spacing:-.02em;font-size:1.02rem;line-height:1.3}
.pager .pgnext{text-align:right;grid-column:2}
.pager .pgprev + .pgnext{grid-column:2}

@media (max-width:1080px){
  .postbody{grid-template-columns:1fr}
  .postside{position:static;order:2;border-top:1px solid var(--line);padding-top:30px}
  .postarticle{order:1}
}
@media (max-width:900px){
  .catrow{grid-template-columns:1fr;gap:24px}
  .catrow.flip .catart{order:0}
  .cmpgrid{grid-template-columns:1fr}
  .posthead{grid-template-columns:1fr;gap:26px}
  .pager{grid-template-columns:1fr}
  .pager .pgnext,.pager .pgprev + .pgnext{grid-column:1;text-align:left}
}

/* =========================================================
   TEARDOWN ARTICLE
   A richer read than a plain list: a stat strip, findings carrying a
   severity and a cost, a before and after ledger, and a starting order.
   ========================================================= */
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-on-dark);
  border:1px solid var(--line-on-dark);border-radius:var(--r-card);overflow:hidden;
  margin:clamp(28px,4vw,42px) 0}
.reader:not(.dark) .glance{background:var(--line-on-light);border-color:var(--line-on-light)}
.glance div{background:var(--void);padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:7px}
.reader:not(.dark) .glance div{background:var(--bone)}
.glance b{font-family:'Archivo',sans-serif;font-weight:400;font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--ink-on-dark);letter-spacing:.01em;line-height:1}
.reader:not(.dark) .glance b{color:var(--ink-on-light)}
.glance b.hot{color:var(--red)}
.glance span{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ash-on-dark);line-height:1.4}
.reader:not(.dark) .glance span{color:var(--ash-on-light)}

.sechead2{display:flex;align-items:center;gap:16px;margin:clamp(44px,6vw,64px) 0 clamp(18px,2.4vw,26px)}
.sechead2 h3{margin:0;white-space:nowrap}
.sechead2::after{content:'';height:1px;flex:1;background:var(--line-on-dark)}
.reader:not(.dark) .sechead2::after{background:var(--line-on-light)}

.finding{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,24px);
  padding:clamp(20px,2.4vw,28px) 0;border-top:1px solid var(--line-on-dark)}
.reader:not(.dark) .finding{border-top-color:var(--line-on-light)}
.finding:last-of-type{border-bottom:1px solid var(--line-on-dark)}
.reader:not(.dark) .finding:last-of-type{border-bottom-color:var(--line-on-light)}
.finding .fno{font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.1em;
  color:var(--red);padding-top:.4em}
.finding h4{font-family:'Archivo';font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.25;margin:0 0 10px}
.finding p{margin:0 0 14px;font-size:.9375rem;line-height:1.65;color:var(--ash-on-dark);max-width:66ch}
.reader:not(.dark) .finding p{color:var(--ash-on-light)}
.finding .cost{display:flex;gap:10px;align-items:flex-start;margin:0;
  padding:12px 14px;border-left:2px solid var(--red);
  background:rgba(224,19,26,.06);border-radius:0 3px 3px 0;
  font-size:.875rem;line-height:1.55;color:var(--ink-on-dark)}
.reader:not(.dark) .finding .cost{color:var(--ink-on-light)}
.finding .cost b{font-family:'Archivo',sans-serif;font-weight:500;font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);flex:none;padding-top:.28em}
.fmetarow{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.sev{font-family:'Archivo',sans-serif;font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 9px;border-radius:2px;border:1px solid currentColor}
.sev.high{color:var(--red)}
.sev.med{color:#C8922A}
.sev.low{color:var(--ash-on-dark)}
.reader:not(.dark) .sev.low{color:var(--ash-on-light)}
.tagpill{font-family:'Archivo',sans-serif;font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 9px;border-radius:2px;
  background:rgba(237,235,228,.08);color:var(--ash-on-dark)}
.reader:not(.dark) .tagpill{background:rgba(21,23,27,.06);color:var(--ash-on-light)}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-on-dark);
  border:1px solid var(--line-on-dark);border-radius:var(--r-card);overflow:hidden;margin-top:6px}
.reader:not(.dark) .ba{background:var(--line-on-light);border-color:var(--line-on-light)}
.ba > div{background:var(--void);padding:16px clamp(14px,1.8vw,20px);font-size:.9rem;line-height:1.6}
.reader:not(.dark) .ba > div{background:var(--bone)}
.ba .bah{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash-on-dark)}
.reader:not(.dark) .ba .bah{color:var(--ash-on-light)}
.ba .bah.now{color:var(--red)}
.ba .was{color:var(--ash-on-dark)}
.reader:not(.dark) .ba .was{color:var(--ash-on-light)}
.ba .now{color:var(--ink-on-dark)}
.reader:not(.dark) .ba .now{color:var(--ink-on-light)}

.start{counter-reset:st;margin-top:6px}
.start li{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,22px);
  align-items:start;padding:20px 0;border-bottom:1px solid var(--line-on-dark)}
.reader:not(.dark) .start li{border-bottom-color:var(--line-on-light)}
.start li::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  font-family:'Archivo',sans-serif;font-size:.6875rem;letter-spacing:.1em;color:var(--red);padding-top:.35em}
.start b{display:block;font-family:'Archivo';font-weight:600;letter-spacing:-.02em;
  font-size:1rem;line-height:1.3;margin-bottom:6px}
.start .sd{font-size:.9rem;line-height:1.6;color:var(--ash-on-dark);margin:0}
.reader:not(.dark) .start .sd{color:var(--ash-on-light)}
.start .eff{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ash-on-dark);white-space:nowrap;text-align:right;padding-top:.35em}
.reader:not(.dark) .start .eff{color:var(--ash-on-light)}

@media (max-width:760px){
  .glance{grid-template-columns:1fr 1fr}
  .ba{grid-template-columns:1fr}
  .start li{grid-template-columns:auto 1fr}
  .start .eff{grid-column:2;text-align:left;padding-top:8px}
  .finding{grid-template-columns:1fr}
  .finding .fno{padding-top:0}
}

/* resources hub additions */
.catcount{font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.1em;
  color:var(--mute);margin-left:10px;padding:4px 8px;border:1px solid var(--line);border-radius:2px}
.alsogrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(30px,4vw,46px)}
.alsocard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  background:var(--surface);border-radius:var(--r-card);padding:clamp(22px,2.4vw,34px);
  transition:background var(--t-micro) var(--ease)}
.alsocard:hover{background:#171D26}
.alsocard .ak{color:var(--red)}
.alsocard b{font-family:'Archivo';font-weight:600;letter-spacing:-.024em;
  font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.2}
.alsocard .ad{font-size:.9375rem;line-height:1.6;color:var(--mute)}
.alsocard .alink{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:14px;
  color:var(--fg);transition:gap var(--t-micro) var(--ease)}
.alsocard .alink svg{width:14px;height:14px}
.alsocard:hover .alink{gap:14px;color:var(--red)}

.sourcebox{margin-top:clamp(34px,4.5vw,52px);padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--line)}
.sourcehead{color:var(--mute);margin-bottom:16px}
.sourcelist{list-style:none;margin-bottom:20px}
.sourcelist li{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.5}
.sourcelist li .mono{color:var(--red)}
@media (max-width:760px){
  .alsogrid{grid-template-columns:1fr}
  .sourcelist li{grid-template-columns:1fr;gap:5px}
}

/* service, sector, legal and contact pages */
.delivlist{list-style:none;margin-top:4px}
.delivlist li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);
  font-size:.9375rem;line-height:1.6}
.delivlist li::before{content:'';position:absolute;left:4px;top:1.35em;width:9px;height:1px;background:var(--red)}

.secbody{display:grid;grid-template-columns:1fr 300px;gap:clamp(30px,5vw,72px);
  align-items:start;padding-bottom:clamp(60px,9vh,110px)}
.secaside{position:sticky;top:100px}
.secart{border-radius:var(--r-card);overflow:hidden;background:var(--void);
  aspect-ratio:16/10;margin-bottom:26px}
.secart img{width:100%;height:100%;object-fit:cover}
.searchlist li{grid-template-columns:130px 1fr}
.searchlist li span:last-child{font-family:'Archivo';font-weight:500;color:var(--fg)}
.problist,.fixlist{list-style:none;margin-top:4px}
.problist li,.fixlist li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--line);
  font-size:.9375rem;line-height:1.6;color:var(--mute)}
.problist li::before{content:'';position:absolute;left:6px;top:1.28em;width:11px;height:1px;
  background:var(--red);transform:rotate(-45deg)}
.fixlist li{color:var(--fg)}
.fixlist li::before{content:'';position:absolute;left:6px;top:1.28em;width:11px;height:1px;background:var(--red)}
.secaside .sidelinks a{display:block;padding:12px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;font-size:.875rem;transition:padding-left var(--t-micro) var(--ease)}
.secaside .sidelinks a:hover{padding-left:7px;color:var(--red)}

.legal{max-width:760px;padding-bottom:clamp(70px,11vh,140px)}
.legal .legaldate{color:var(--mute);padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:30px}
.legal h3{font-family:'Archivo';font-weight:600;letter-spacing:-.024em;
  font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.2;margin:34px 0 12px}
.legal p{margin-bottom:16px;line-height:1.7;color:var(--mute);max-width:68ch}
.legal p a{color:var(--red)}
.legal .note{border-left:2px solid var(--red);padding:14px 0 14px 18px;color:var(--fg)}

.contactgrid{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,5vw,72px);
  align-items:start;padding-bottom:clamp(70px,11vh,140px)}
.contactside{display:flex;flex-direction:column;gap:26px}
.cblock p{font-size:.9375rem;line-height:1.65;color:var(--mute);margin-top:10px}
.cblock p a{color:var(--red)}
.nextlist{margin:12px 0 0 0;padding-left:20px}
.nextlist li{font-size:.9375rem;line-height:1.6;color:var(--mute);margin-bottom:9px}

@media (max-width:960px){
  .secbody,.contactgrid{grid-template-columns:1fr}
  .secaside{position:static;order:-1}
  .secart{max-height:40svh}
}

/* =========================================================
   BEFORE AND AFTER
   ========================================================= */
.honesty{margin-top:clamp(30px,4vw,44px);max-width:74ch;
  border-left:2px solid var(--red);padding:20px 0 20px 22px;background:var(--surface);
  padding-right:22px;border-radius:0 var(--r-card) var(--r-card) 0}
.honesty .hh{color:var(--red);margin-bottom:12px}
.honesty p{font-size:.9375rem;line-height:1.65;color:var(--mute);margin-bottom:12px;max-width:70ch}
.honesty p:last-child{margin-bottom:0}

.bacases{padding-bottom:clamp(60px,9vh,110px)}
.bacase{padding-block:clamp(48px,7vh,90px);border-top:1px solid var(--line)}
.bahead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.bahead .ban{color:var(--red)}
.prov{font-family:'Archivo',sans-serif;font-weight:600;font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;border:1px solid currentColor}
.prov.real{color:var(--red)}
.prov.made{color:var(--mute)}
.bastand{margin:12px 0 clamp(26px,3.4vw,38px)}

.bamedia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);
  margin-bottom:clamp(26px,3.4vw,40px)}
.bafig{position:relative;margin:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--void);aspect-ratio:16/9}
.bafig img{width:100%;height:100%;object-fit:cover;object-position:top center}
.bafig:empty,.bafig:not(:has(img))::after{content:'Rebuild shown in the columns below';
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  font-family:'Archivo',sans-serif;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--ash-on-dark);opacity:.5}
.figlabel{position:absolute;left:12px;top:12px;z-index:2;padding:6px 11px;border-radius:2px;
  font-size:.5625rem;background:rgba(10,12,16,.82);color:#EDEBE4}
.figlabel.after{background:var(--red);color:#FFF4F2}

/* both columns share one row grid, so the two headers and every row line up
   even when the text on one side runs longer */
.bagrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,52px);
  margin-top:clamp(28px,3.6vw,44px);align-items:start}
.bacol{display:grid;grid-template-rows:subgrid;grid-row:span 2}
@supports not (grid-template-rows:subgrid){.bacol{display:block}}
.bahdr{padding-bottom:14px;border-bottom:1px solid var(--line);margin:0 0 4px;
  display:flex;align-items:center;gap:10px}
.bahdr::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.bahdr.before{color:var(--mute)}
.bahdr.after{color:var(--red)}
.barow{display:grid;grid-template-columns:1fr;gap:5px;padding:15px 0;border-bottom:1px solid var(--line)}
.barow .bak{font-family:'Archivo',sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute)}
.barow .bav{font-size:.9375rem;line-height:1.6;color:var(--fg)}
.bacol:first-child .barow .bav{color:var(--mute)}

.batable{min-width:560px;table-layout:fixed;border-collapse:collapse}
.batable th[scope="row"]{font-family:'Archivo',sans-serif;font-weight:600;font-size:.75rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute);text-align:left;
  width:46%;padding-right:22px;line-height:1.35}
.batable thead th:nth-child(2),.batable td:nth-child(2){width:24%}
.batable thead th:nth-child(3),.batable td:nth-child(3){width:30%}
.batable th,.batable td{padding:14px 16px;vertical-align:middle}
.batable thead th:nth-child(2),.batable thead th:nth-child(3){text-align:left}
.batable td{font-size:.9375rem;font-variant-numeric:tabular-nums}
.batable .tb{color:var(--mute)}
.batable .ta{color:var(--fg);font-weight:600}
.batable thead th{font-family:'Archivo',sans-serif;font-weight:600;font-size:.6875rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.batable thead th:last-child{color:var(--red)}

@media (max-width:860px){
  .bamedia,.bagrid{grid-template-columns:1fr}
}

/* =========================================================
   LIVE BEFORE / AFTER COMPARER
   Both sides are real rendered HTML inside a browser frame, wiped by a
   draggable handle. Every word stays selectable and indexable, which a
   screenshot would not be.
   ========================================================= */
.comparer{position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--void-2);box-shadow:0 24px 70px rgba(0,0,0,.35);
  border:1px solid var(--line-on-dark)}
.chrome{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#12161D;
  border-bottom:1px solid #222935;position:relative;z-index:6}
.chrome i{width:9px;height:9px;border-radius:50%;background:#2C3440;flex:none}
.chrome .addr{flex:1;margin-left:8px;background:#0B0E13;border:1px solid #222935;border-radius:3px;
  padding:5px 11px;font-size:.6875rem;color:#6E757F;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome .addr b{color:#9299A3;font-weight:400}

.stagewrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;
  cursor:ew-resize;touch-action:none}
.pane{position:absolute;inset:0;overflow:hidden}
.pane .scaler{position:absolute;top:0;left:0;width:1240px;height:775px;
  transform-origin:top left;overflow:hidden}
.pane.after{clip-path:inset(0 0 0 var(--split,50%));z-index:3}
.pane.before{z-index:2}
.handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--red);
  z-index:5;pointer-events:none}
.handle::after{content:'';position:absolute;left:50%;top:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--red);
  box-shadow:0 4px 18px rgba(0,0,0,.45)}
.handle .grip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  color:#FFF4F2;font-size:13px;font-weight:600;white-space:nowrap;letter-spacing:.04em}
.sidetag{position:absolute;top:14px;z-index:4;padding:6px 11px;border-radius:2px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;pointer-events:none}
.sidetag.l{left:14px;background:rgba(11,14,19,.86);color:#EDEBE4}
.sidetag.r{right:14px;background:var(--red);color:#FFF4F2}

.spot{position:absolute;z-index:4;width:24px;height:24px;border-radius:50%;
  background:var(--red);color:#fff;border:2px solid rgba(255,255,255,.85);
  font-size:10px;font-weight:600;display:grid;place-items:center;cursor:help;padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.4)}
.spot span{position:absolute;left:30px;top:-6px;width:210px;text-align:left;
  background:var(--void);border:1px solid var(--line-on-dark);border-radius:3px;padding:10px 12px;
  font-size:.75rem;line-height:1.5;color:var(--ink-on-dark);font-weight:400;letter-spacing:0;
  text-transform:none;opacity:0;transform:translateY(5px);pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.spot.flip span{left:auto;right:30px}
.spot:hover span,.spot:focus-visible span{opacity:1;transform:none}

/* ---- the dated site genre, rendered faithfully ---- */
.legacy2{width:1240px;height:775px;background:#EDEAE2;color:#1a1a1a;
  font-family:Georgia,'Times New Roman',serif;font-size:13px;line-height:1.45;overflow:hidden}
.legacy2 .l-top{background:linear-gradient(#1e4d8b,#123a6b);color:#fff;padding:11px 18px;
  display:flex;justify-content:space-between;align-items:center}
.legacy2 .l-top b{font-size:21px;letter-spacing:.3px}
.legacy2 .l-top .tel{font-size:13px;font-weight:bold}
.legacy2 .l-nav{background:#dcd6c8;border-bottom:3px solid #123a6b;padding:6px 18px;
  display:flex;flex-wrap:wrap;gap:16px;font-size:11.5px;color:#2b2b2b}
.legacy2 .l-marq{background:#ffe9a8;border-top:1px dashed #c9a227;border-bottom:1px dashed #c9a227;
  padding:5px 18px;font-size:12px;color:#6b4e00}
.legacy2 .l-body{display:grid;grid-template-columns:1fr 260px;gap:18px;padding:18px}
.legacy2 .l-box{border:1px solid #b9b2a1;background:#f6f4ee;padding:13px}
.legacy2 .l-box h4{font-size:14px;color:#123a6b;margin-bottom:8px}
.legacy2 .l-box p{font-size:11.5px;color:#3a3a3a;margin-bottom:8px}
.legacy2 .l-imgrow{display:flex;gap:6px;margin-bottom:14px}
.legacy2 .l-imgrow div{flex:1;height:130px;background:#cfc9ba;border:1px solid #b0a894;
  display:grid;place-items:center;font-size:10px;color:#7a7263;text-align:center;padding:6px}
.legacy2 .l-btn{background:#123a6b;color:#fff;display:inline-block;padding:5px 14px;font-size:12px}
.legacy2 .l-foot{border-top:1px solid #c6bfae;margin:0 18px;padding:10px 0;font-size:10.5px;color:#6b6b6b;
  display:flex;justify-content:space-between;align-items:center}
.legacy2 .l-count{background:#000;color:#0f0;font-family:monospace;padding:2px 6px;font-size:11px}
.legacy2 .l-side p{font-size:11px;color:#444;margin-bottom:7px}
.legacy2 .l-side .row{border-bottom:1px dotted #b9b2a1;padding:6px 0;font-size:11.5px;color:#123a6b}

/* ---- the rebuild, five schemes so five rebuilds do not share one template ---- */
.modern2{--m-bg:#0B0E13;--m-panel:#12161D;--m-line:#1B222C;--m-ink:#E8E6E1;
  --m-mut:#9299A3;--m-acc:#E0131A;--m-acc-ink:#FFF4F2;
  width:1240px;height:775px;background:var(--m-bg);color:var(--m-ink);
  font-family:'Archivo',sans-serif;font-size:15px;line-height:1.55;overflow:hidden;
  display:flex;flex-direction:column}
.modern2 .m-top{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:20px 34px;border-bottom:1px solid var(--m-line);flex:none}
.modern2 .m-brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:17px;letter-spacing:-.02em}
.modern2 .m-brand i{width:10px;height:10px;border-radius:50%;background:var(--m-acc)}
.modern2 .m-nav{display:flex;gap:26px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--m-mut)}
.modern2 .m-cta{background:var(--m-acc);color:var(--m-acc-ink);padding:10px 18px;border-radius:2px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.modern2 .m-hero{flex:1;display:grid;grid-template-columns:1.15fr .85fr;min-height:0;position:relative}
.modern2 .m-shot{position:relative;overflow:hidden;border-right:1px solid var(--m-line);background:var(--m-panel)}
.modern2 .m-shot img{width:100%;height:100%;object-fit:cover}
.modern2 .m-shot .cap{position:absolute;left:18px;bottom:18px;background:rgba(11,14,19,.8);
  border:1px solid rgba(255,255,255,.22);padding:8px 13px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;color:#EDEBE4}
.modern2 .m-copy{padding:38px 34px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.modern2 .m-kick{color:var(--m-acc);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.modern2 .m-copy h4{font-size:30px;line-height:1.08;letter-spacing:-.03em;font-weight:600;max-width:16ch}
.modern2 .m-copy p{font-size:14px;color:var(--m-mut);max-width:36ch}
.modern2 .m-link{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--m-line);padding-bottom:6px;align-self:flex-start;margin-top:6px}
.modern2 .m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--m-line);
  border-top:1px solid var(--m-line);flex:none}
.modern2 .m-card{background:var(--m-bg);padding:20px 26px}
.modern2 .m-card b{display:block;color:var(--m-acc);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:8px;font-weight:600}
.modern2 .m-card span{font-size:13px;color:var(--m-mut);line-height:1.5}
.modern2 .m-search{display:flex;align-items:center;gap:12px;background:var(--m-panel);
  border:1px solid var(--m-line);border-radius:4px;padding:14px 18px;font-size:13px;
  color:var(--m-mut);max-width:420px;margin-top:4px}
.modern2 .m-search b{background:var(--m-acc);color:var(--m-acc-ink);border-radius:2px;
  padding:7px 14px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;margin-left:auto;white-space:nowrap}

/* schemes: each rebuild flips canvas against its own before, so the wipe is
   instantly legible, and all of them stay inside the Buildgin palette */
.modern2.t-void{--m-bg:#0B0E13;--m-panel:#12161D;--m-line:#1E2530;--m-ink:#EDEBE4;
  --m-mut:#8A8F99;--m-acc:#E0131A;--m-acc-ink:#FFF4F2}
.modern2.t-bone{--m-bg:#FAFAF8;--m-panel:#F0EEE7;--m-line:#DEDBD2;--m-ink:#15171B;
  --m-mut:#5B5D63;--m-acc:#E0131A;--m-acc-ink:#FFF4F2}
.modern2.t-bone .m-shot .cap{background:rgba(250,250,248,.9);border-color:#DEDBD2;color:#15171B}
.modern2.t-ink{--m-bg:#F4F3EF;--m-panel:#FFFFFF;--m-line:#DCD9D0;--m-ink:#101318;
  --m-mut:#5B5D63;--m-acc:#101318;--m-acc-ink:#FAFAF8}
.modern2.t-ink .m-kick{color:#E0131A}
.modern2.t-ink .m-card b{color:#E0131A}
.modern2.t-ink .m-shot .cap{background:rgba(255,255,255,.9);border-color:#DCD9D0;color:#101318}

/* layouts */
.modern2.lay-rev .m-hero{grid-template-columns:.85fr 1.15fr}
.modern2.lay-rev .m-shot{order:2;border-right:0;border-left:1px solid var(--m-line)}
.modern2.lay-full .m-hero{display:block}
.modern2.lay-full .m-shot{position:absolute;inset:0;border:0}
.modern2.lay-full .m-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:120px 44px 34px;justify-content:flex-end;max-width:none;
  background:linear-gradient(to top,var(--m-bg) 26%,transparent)}
.modern2.lay-full .m-copy h4{max-width:22ch;color:var(--m-ink)}
.modern2.lay-full .m-copy p{color:var(--m-mut)}
.modern2.lay-center .m-hero{display:flex;flex-direction:column}
.modern2.lay-center .m-copy{order:1;align-items:center;text-align:center;padding:42px 34px 28px}
.modern2.lay-center .m-copy h4,.modern2.lay-center .m-copy p{max-width:34ch}
.modern2.lay-center .m-link{align-self:center}
.modern2.lay-center .m-shot{order:2;flex:1;min-height:0;border-right:0;border-top:1px solid var(--m-line)}

/* legacy palette variants, so six dated sites do not look like one dated site */
.legacy2.v-green .l-top{background:linear-gradient(#2f6b3d,#1e4a29)}
.legacy2.v-green .l-nav{border-bottom-color:#1e4a29}
.legacy2.v-green .l-box h4,.legacy2.v-green .l-side .row{color:#1e4a29}
.legacy2.v-green .l-btn{background:#1e4a29}
.legacy2.v-maroon .l-top{background:linear-gradient(#8c2130,#5e1620)}
.legacy2.v-maroon .l-nav{border-bottom-color:#5e1620}
.legacy2.v-maroon .l-box h4,.legacy2.v-maroon .l-side .row{color:#5e1620}
.legacy2.v-maroon .l-btn{background:#5e1620}
.legacy2.v-teal .l-top{background:linear-gradient(#1f6b74,#12474e)}
.legacy2.v-teal .l-nav{border-bottom-color:#12474e}
.legacy2.v-teal .l-box h4,.legacy2.v-teal .l-side .row{color:#12474e}
.legacy2.v-teal .l-btn{background:#12474e}
.legacy2.v-purple .l-top{background:linear-gradient(#4b2a75,#331d50)}
.legacy2.v-purple .l-nav{border-bottom-color:#331d50}
.legacy2.v-purple .l-box h4,.legacy2.v-purple .l-side .row{color:#331d50}
.legacy2.v-purple .l-btn{background:#331d50}

@media (max-width:760px){
  .stagewrap{aspect-ratio:4/3}
  .spot{display:none}
}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dragnote{margin-top:16px;opacity:.75}
.seonote{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);opacity:.6;font-size:.8125rem}
.bacol .problist li,.bacol .fixlist li{font-size:.9375rem;min-height:76px;
  display:flex;align-items:center;
  opacity:0;transform:translateY(14px)}
.bacol .fixlist li b{color:var(--fg);font-weight:600}
.bacol .problist li::before,.bacol .fixlist li::before{top:50%;margin-top:-1px}
/* rows arrive in pairs, left then right, as the block scrolls in */
[data-cols].in .problist li,[data-cols].in .fixlist li{opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-cols].in .problist li{transition-delay:calc(var(--n) * 110ms)}
[data-cols].in .fixlist li{transition-delay:calc(var(--n) * 110ms + 55ms)}
[data-cols] .bahdr{opacity:0;transform:translateY(10px)}
[data-cols].in .bahdr{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-cols].in .bacol:last-child .bahdr{transition-delay:80ms}

/* the measure table resolves row by row, before column first, target sweeping in */
.batable thead tr{opacity:0;transform:translateY(-8px)}
.batable tbody tr{opacity:0;transform:translateX(-16px)}
.tablewrap.in .batable thead tr,.tablewrap.in .batable tbody tr{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tablewrap.in .batable tbody tr:nth-child(1){transition-delay:.08s}
.tablewrap.in .batable tbody tr:nth-child(2){transition-delay:.17s}
.tablewrap.in .batable tbody tr:nth-child(3){transition-delay:.26s}
.tablewrap.in .batable tbody tr:nth-child(4){transition-delay:.35s}
.tablewrap.in .batable tbody tr:nth-child(5){transition-delay:.44s}
.tablewrap.in .batable tbody tr:nth-child(6){transition-delay:.53s}
.batable .ta{position:relative}
@media (prefers-reduced-motion:reduce){
  .batable thead tr,.batable tbody tr{opacity:1;transform:none}
}

/* =========================================================
   RECONSTRUCTED PANELS
   Built from four real Indian company websites. Structure and navigation
   follow the live sites; every identifying mark is redacted.
   ========================================================= */
.real{width:1240px;height:775px;overflow:hidden;display:flex;flex-direction:column;
  font-family:'Archivo',sans-serif;background:#fff;color:#1c2230}
.rdct{display:inline-block;background:#12161d;color:#8d93a0;border-radius:2px;
  padding:3px 9px;font-size:10px;letter-spacing:.16em;font-weight:600;
  text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.reconnote{margin-top:16px;border-left:2px solid var(--red);padding-left:16px}

/* ---------------- chartered accountants ---------------- */
.r-ca .ra-util{background:#123a6b;color:#dbe4f0;display:flex;align-items:center;gap:26px;
  padding:12px 30px;font-size:13px;flex:none}
.r-ca .ra-tag{font-style:italic;font-family:Georgia,serif;font-size:15px;color:#fff}
.r-ca .ra-lang{background:#fff;color:#333;border-radius:2px;padding:6px 12px;font-size:12px}
.r-ca .ra-cts{margin-left:auto;font-size:12.5px}
.r-ca .ra-bar{display:flex;align-items:center;gap:30px;padding:16px 30px;flex:none;
  border-bottom:1px solid #e6e9ef;background:#fff}
.r-ca .ra-logo{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:16px;color:#1c2a4a}
.r-ca .ra-logo em{font-style:normal;font-size:11px;color:#7b8698;letter-spacing:.04em;font-weight:400}
.r-ca .ra-nav{display:flex;gap:20px;margin-left:auto;font-size:12.5px;color:#3d4a63;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.r-ca .ra-hero{position:relative;flex:1;min-height:0;overflow:hidden}
.r-ca .ra-heroimg{position:absolute;inset:0}
.r-ca .ra-heroimg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.r-ca .ra-hero{background:#eef2f7}
.r-ca .ra-herotxt{position:absolute;left:60px;top:50%;transform:translateY(-50%);z-index:2}
.r-ca .ra-herotxt h5{font-size:52px;line-height:1.05;letter-spacing:-.03em;font-weight:700;color:#1f4f96}
.r-ca .ra-herotxt h5 b{color:#22262e}
.r-ca .ra-herotxt p{margin-top:16px;font-size:19px;color:#4c5568}
.r-ca .ra-dots{display:flex;gap:9px;margin-top:26px}
.r-ca .ra-dots i{width:15px;height:15px;background:#fff;border:1px solid #c9d2e0}
.r-ca .ra-dots i.on{background:#e03a3a;border-color:#e03a3a}
.r-ca .ra-rail{position:absolute;right:0;top:38%;background:#f0a020;color:#fff;
  writing-mode:vertical-rl;padding:18px 9px;font-size:12px;font-weight:600;letter-spacing:.06em}
.r-ca .ra-tiles{display:grid;grid-template-columns:repeat(6,1fr);flex:none;font-size:14px;
  font-weight:600;letter-spacing:.03em}
.r-ca .ra-tiles span{padding:22px 14px;text-align:center;color:#fff;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase}
.r-ca .ra-tiles .t1{background:#e04a4a}
.r-ca .ra-tiles .t2{background:#a8dcd8;color:#1c3a3a}
.r-ca .ra-tiles .t3{background:#e04a4a}
.r-ca .ra-about{flex:none;text-align:center;padding:26px 0;background:#fff}
.r-ca .ra-about h6{font-size:34px;font-weight:400;color:#3d4a63;letter-spacing:-.02em}
.r-ca .ra-about h6 b{color:#123a6b;font-weight:700}

/* ---------------- logistics ---------------- */
.r-logi{background:#0d0f12;color:#fff}
.r-logi .rl-bar{display:flex;align-items:stretch;gap:0;flex:none;background:#17191d;position:relative}
.r-logi .rl-logo{background:#fff;color:#111;display:flex;align-items:center;
  padding:20px 46px 20px 34px;position:relative;z-index:2;font-weight:700;font-size:17px}
.r-logi .rl-logo::after{content:'';position:absolute;right:-30px;top:0;bottom:0;width:34px;
  background:#fff;clip-path:polygon(0 0,100% 0,0 100%)}
.r-logi .rl-logo::before{content:'\27A4';position:absolute;right:-14px;top:50%;
  transform:translateY(-50%) skewX(-12deg);color:#e8232a;font-size:19px;z-index:3}
.r-logi .rl-nav{display:flex;align-items:center;gap:26px;font-size:14px;color:#e8eaee;
  margin-left:52px;padding-right:34px}
.r-logi .rl-hero{position:relative;flex:1;min-height:0;overflow:hidden}
.r-logi .rl-hero img{width:100%;height:100%;object-fit:cover}
.r-logi .rl-copy{position:absolute;left:44px;bottom:80px;z-index:2}
.r-logi .rl-copy h5{font-size:46px;font-weight:700;letter-spacing:.01em;margin-bottom:20px}
.r-logi .rl-btn{background:#e8232a;color:#fff;padding:14px 26px;font-size:15px;font-weight:600}
.r-logi .rl-rail{position:absolute;right:0;writing-mode:vertical-rl;padding:20px 11px;
  font-size:12.5px;font-weight:600;color:#fff}
.r-logi .rl-rail.a{top:30%;background:#c8202a}
.r-logi .rl-rail.b{top:56%;background:#2b8fd6}
.r-logi .rl-dots{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:9px;z-index:2}
.r-logi .rl-dots i{width:11px;height:11px;border-radius:50%;border:1px solid #fff}
.r-logi .rl-dots i.on{background:#fff}
.r-logi .rl-strip{display:grid;grid-template-columns:repeat(5,1fr);flex:none;background:#15181d}
.r-logi .rl-strip span{padding:20px 14px;text-align:center;font-size:13px;color:#c8ced8;
  border-right:1px solid #232830}

/* ---------------- auto components ---------------- */
.r-auto{background:linear-gradient(160deg,#0a2a52,#0d3f6b 45%,#0e5a72);color:#fff}
.r-auto .rt-bar{display:flex;align-items:center;gap:26px;padding:16px 34px;flex:none}
.r-auto .rt-logo{display:flex;flex-direction:column;gap:3px;font-weight:700;font-size:15px}
.r-auto .rt-logo em{font-style:italic;font-family:Georgia,serif;font-size:12px;color:#8fd3ea;font-weight:400}
.r-auto .rt-nav{display:flex;gap:22px;margin-left:auto;font-size:13.5px;color:#dceaf5}
.r-auto .rt-prod{display:flex;gap:34px;justify-content:center;padding:12px 34px;flex:none;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#eaf4fb;font-weight:600}
.r-auto .rt-hero{position:relative;flex:1;min-height:0;overflow:hidden}
.r-auto .rt-hero img{width:100%;height:100%;object-fit:cover;opacity:.62}
.r-auto .rt-copy{position:absolute;right:70px;top:50%;transform:translateY(-50%);z-index:2;text-align:left}
.r-auto .rt-copy h5{font-size:44px;line-height:1.06;font-weight:400;letter-spacing:.01em;color:#dfe9f2}
.r-auto .rt-copy h5 b{font-weight:700;color:#fff;font-size:52px;display:block}
.r-auto .rt-copy h5.two{margin-top:22px}
.r-auto .rt-copy p{margin-top:20px;font-size:16px;color:#a8c8e0;max-width:26ch}
.r-auto .rt-dots{position:absolute;left:34px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;z-index:2}
.r-auto .rt-dots i{width:11px;height:11px;border-radius:50%;background:#5b93b8}
.r-auto .rt-dots i.on{background:#31a8d8}
.r-auto .rt-rail{position:absolute;right:22px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-size:19px;letter-spacing:.5em;color:#b9d6e8;z-index:2}
.r-auto .rt-scroll{flex:none;text-align:center;padding:14px 0 20px;font-size:13px;color:#cfe3f0}

/* ---------------- diagnostics ---------------- */
.r-lab{background:#fff;color:#12324a}
.r-lab .rb-util{display:flex;align-items:center;gap:22px;padding:14px 30px;flex:none;
  background:linear-gradient(100deg,#12467a 55%,#1f9e9e);color:#fff;position:relative}
.r-lab .rb-logo{display:flex;flex-direction:column;gap:2px;font-weight:700;font-size:17px}
.r-lab .rb-logo em{font-style:normal;font-size:12px;font-weight:400;color:#cfe6ee}
.r-lab .rb-cts{margin-left:auto;font-size:13px}
.r-lab .rb-bar{display:flex;align-items:center;gap:30px;padding:16px 30px;flex:none;
  border-bottom:1px solid #e3edf1;background:#fff}
.r-lab .rb-nav{display:flex;gap:32px;font-size:15px;font-weight:600;color:#12467a;margin-inline:auto}
.r-lab .rb-city{font-size:11.5px;color:#5b7176;text-align:right}
.r-lab .rb-city b{font-size:14px;color:#12324a}
.r-lab .rb-hero{position:relative;flex:1;min-height:0;overflow:hidden}
.r-lab .rb-hero img{width:100%;height:100%;object-fit:cover}
.r-lab .rb-card{position:absolute;right:52px;top:50%;transform:translateY(-50%);z-index:2;
  background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(0,40,70,.28);
  padding:26px 28px;width:400px;display:flex;flex-direction:column;gap:11px}
.r-lab .rb-card .lead2{font-size:19px;font-weight:600;line-height:1.25;color:#12324a}
.r-lab .rb-card .cnt{font-size:16px;color:#12467a;margin-bottom:6px}
.r-lab .rb-card .cnt b{font-size:20px}
.r-lab .rb-act{display:flex;align-items:center;border:1px dashed #6fa8c4;border-radius:5px;
  padding:12px 15px;font-size:13.5px;font-weight:600;color:#12467a;letter-spacing:.03em}
.r-lab .rb-act em{margin-left:auto;font-style:normal}
.r-lab .rb-act.on{background:linear-gradient(100deg,#12467a,#1f9e9e);color:#fff;border-style:solid;border-color:transparent}
.r-lab .rb-dots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.r-lab .rb-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.7)}
.r-lab .rb-dots i.on{background:#12467a;width:22px;border-radius:5px}

/* ---------- hover, everywhere it should exist ---------- */
.batable tbody tr{transition:background var(--t-micro) var(--ease)}
.batable tbody tr:hover{background:var(--surface)}
.batable tbody tr:hover th[scope="row"]{color:var(--fg)}
.batable tbody tr:hover .ta{color:var(--red)}

.bacol .problist li,.bacol .fixlist li{
  transition:background var(--t-micro) var(--ease),padding-left var(--t-micro) var(--ease);
  padding-left:30px;border-radius:2px}
.bacol .problist li:hover,.bacol .fixlist li:hover{background:var(--surface);padding-left:38px}

.comparer{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.comparer:hover{box-shadow:0 30px 84px rgba(0,0,0,.42)}
.stagewrap:hover .handle::after{transform:translate(-50%,-50%) scale(1.14)}
.handle::after{transition:transform .2s var(--ease)}
.stagewrap:hover .sidetag{opacity:.55;transition:opacity .2s var(--ease)}

.jump a{transition:opacity var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),
  background var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.jump a:hover{transform:translateY(-2px);background:var(--surface)}

.bacase{transition:background .3s var(--ease)}
.spot{transition:transform .2s var(--ease),box-shadow .2s var(--ease),
  opacity .35s var(--ease)}
.spot:hover{transform:scale(1.22);box-shadow:0 4px 18px rgba(224,19,26,.55);z-index:6}