/* PathShodh – Cloud & Crimson theme mapping (docs/13-design-system.md, rollout plan docs/superpowers/plans/2026-11-07-cloud-crimson-rollout.md).
   Maps the Bizup template's own classes onto the tokens in site-tokens.css. Loaded on every page from site_nav.php,
   after the theme's style.min.css. Tokens only: no raw colours below. */

/* Stage 2: pictures with colours baked in */
/* "Ready to Get Started" band (product pages): the blue hexagon pictures become a light tone of the band */
.rs-cta .pattern-left,.rs-cta .pattern-right{filter:grayscale(1) brightness(1.7);mix-blend-mode:soft-light;opacity:.55}
/* its small "Get a quote" label: crimson is never text on navy (2.6 : 1) */
.rs-cta .sub-title{color:var(--text-on-dark-secondary)!important}

/* Stage 3: type. Hanken Grotesk comes in 400 and 500 only: the template's 600/700/900 take the 500 face instead of a faked bold */
html{font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
html,body{font-family:var(--font-sans);font-size:var(--step-body);line-height:var(--lh-body)}
p,li,dd,blockquote{font-size:var(--step-body);line-height:var(--lh-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:500}
h1{font-size:var(--step-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1)}
h2{font-size:var(--step-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2)}
h3{font-size:var(--step-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3)}
h4,h5,h6{font-size:var(--step-h4);line-height:var(--lh-h4)}
small,figcaption{font-size:var(--step-caption);line-height:var(--lh-caption)}

/* Stage 3: headings. With bold gone, the template's 17-20px titles read as running text: section titles take h2, card and step titles h4 */
.sec-title .title,.sec-title2 .title,.sec-title3 .title{font-size:var(--step-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2)}
.rs-services.main-home .services-item .services-text .title,.rs-services.chooseus-style .services-item .services-text .title,
.rs-services.home-style2 .services-item .services-text .title,
.rs-process.style1 .process-effects-layer .rs-addon-number .number-part .number-text .number-title .title,
.rs-process.style2 .rs-addon-number .number-part .number-title .title,
.rs-inner-blog .widget-area .widget-title .title,
html .style88,html .tp-caption.black{font-size:var(--step-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4)}   /* features, how-to steps, blog sidebar, career sub-heads, About: Vision/Mission */

/* Stage 3: running text the template sets smaller through its own classes */
.rs-testimonial.style4 .testi-item .testi-wrap .item-contents p,.rs-inner-blog .blog-item .blog-content .blog-desc{font-size:var(--step-body);line-height:var(--lh-body)}   /* home testimonials; blog list */
/* justified text at 20px opens wide gaps in phone-width columns (About, Serum Albumin, people pages): left-aligned there */
@media (max-width:767px){[style*="justify"],.text-md-justify{text-align:left!important}}

/* Stage 4: inner-page banner (33 pages .counter-home5-style; people pages .style1.pt-200). Navy field on the left, the page's
   greyscale photo showing on the right, the title white at h1 size. The pages' own .text-bevel-white strip styles are undone here. */
.rs-counter.counter-home5-style,.style1.pt-200[class*="bg25"]{position:relative;isolation:isolate;background-color:var(--bg-dark);background-position:right center;background-blend-mode:luminosity}   /* every photo as a navy monochrome (the About photo has orange shapes baked in) */
.rs-counter.counter-home5-style::before,.style1.pt-200[class*="bg25"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg-dark) 0,var(--bg-dark) 16%,rgba(18,23,53,.62) 42%,rgba(18,23,53,.1) 66%,rgba(18,23,53,0))}
.counter-home5-style .page-title,.style1.pt-200 .page-title{margin:0 0 44px!important;padding:0 15px;color:var(--text-on-dark);font-size:var(--step-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);font-weight:500}
.counter-home5-style .page-title::after,.style1.pt-200 .page-title::after{display:none}
.counter-home5-style .page-title .watermark,.style1.pt-200 .page-title .watermark{position:static;display:inline;opacity:1;padding:0;background:none;clip-path:none;
  font:inherit;letter-spacing:inherit;text-transform:none;white-space:normal;color:inherit;text-shadow:none}
.counter-home5-style .page-title .text-bevel-white1,.style1.pt-200 .page-title .text-bevel-white1{display:none}
/* anuPath Nano (and the unlisted GI / immune pages): the title chip and the intro line are styled inline, so !important here */
.counter-home5-style .page-title .watermark[style]{padding:0!important;background:none!important;clip-path:none!important;color:var(--text-on-dark)!important}
.counter-home5-style .sub-text[style]{display:block;flex:0 0 100%;max-width:100%;box-sizing:border-box;margin:-28px 0 44px;padding:0 15px!important;background:none!important;border-radius:0!important;
  color:var(--text-on-dark-secondary);font-size:var(--step-intro);line-height:var(--lh-intro);text-transform:none;letter-spacing:var(--tr-intro);white-space:normal}
@media (max-width:767px){
  .rs-counter.counter-home5-style::before,.style1.pt-200[class*="bg25"]::before{background:linear-gradient(0deg,var(--bg-dark) 0,rgba(18,23,53,.82) 45%,rgba(18,23,53,.25))}
  .counter-home5-style .page-title,.style1.pt-200 .page-title{margin-bottom:28px!important}
}
/* Spacing pass (2026-11-09): one banner height on every inner page. The pages carry the template's pt-70 … pt-200 and pb-0 … pb-100
   (and responsive.min.css shrinks them again below 480px), so banners ran 183–368px tall on desktop and 90–233px on phones. The
   space above the title is now the same everywhere; the title (and the intro line, where a page has one) sits on the foot as before.
   The profile pages keep their own banner (site-bio.css, stronger selector). */
.rs-counter.counter-home5-style{padding-top:clamp(48px,12vw,176px)!important;padding-bottom:0!important}

/* Stage 4: buttons -> design-system primary (pill, 52px, 18px/500). !important only where style.min.css uses it (.readon2 colour) */
.readon2,.readon.apply{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:var(--radius-pill);
  background:var(--action-primary);color:var(--text-on-accent)!important;font:var(--w-button) var(--step-button)/var(--lh-button) var(--font-sans);text-transform:none;
  transition:background-color var(--dur-fast,.15s)}
.readon.apply{min-height:44px;padding:0 22px;font-size:16px}   /* careers list: the small size */
.readon2:hover,.readon.apply:hover{background:var(--action-primary-hover);color:var(--text-on-accent)!important}
.readon2:active,.readon.apply:active{background:var(--action-primary-pressed);transform:translateY(1px)}
.readon2:focus-visible,.readon.apply:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.rs-cta .readon2:focus-visible{outline-color:#fff}
.readon2 .btn-arrow{margin-left:0}
/* 404 page (the only .rs-breadcrumbs): the template's .readon is white text on no ground, so both buttons were invisible on the
   white page. Design-system primary + outline (never two crimson buttons side by side); the words show as written. */
.rs-breadcrumbs p:has(>.readon){display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.rs-breadcrumbs .readon{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin:0;padding:0 28px;border:1.5px solid transparent;border-radius:var(--radius-pill);
  background:var(--action-primary);color:var(--text-on-accent);font:var(--w-button) var(--step-button)/var(--lh-button) var(--font-sans);text-transform:none;
  transition:background-color var(--dur-fast,.15s),border-color var(--dur-fast,.15s)}
.rs-breadcrumbs .readon:hover{background:var(--action-primary-hover);color:var(--text-on-accent)}
.rs-breadcrumbs .readon:active{background:var(--action-primary-pressed);transform:translateY(1px)}
.rs-breadcrumbs .readon+.readon{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}
.rs-breadcrumbs .readon+.readon:hover{background:var(--bg-cool);border-color:var(--text-primary);color:var(--text-primary)}
.rs-breadcrumbs .readon+.readon:active{background:var(--bg-cool)}
.rs-breadcrumbs .readon:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* Stage 4: category tag on blog pictures -> chip (warm field, deep crimson text) */
.rs-inner-blog .blog-item .blog-img .post-categories li a{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:var(--radius-pill);
  background:var(--bg-warm);color:var(--crimson-600);font:var(--w-label) var(--step-label)/1 var(--font-sans);letter-spacing:var(--tr-label)}
.rs-inner-blog .blog-item .blog-img .post-categories li a:hover{background:var(--crimson-100);color:var(--crimson-700)}

/* Stage 4: product page tabs (anuPath nano): quiet tabs, the open one navy */
.rs-single-shop .tab-area ul.nav-tabs{gap:8px;border:0}
.rs-single-shop .tab-area ul.nav-tabs li .nav-link{padding:12px 26px;border:1.5px solid var(--border-default);border-radius:var(--radius-pill);background:var(--bg-page);
  color:var(--text-primary);font:var(--w-button) var(--step-button)/1 var(--font-sans)}
.rs-single-shop .tab-area ul.nav-tabs li .nav-link:hover{background:var(--bg-cool);border-color:var(--text-primary);color:var(--text-primary)}
.rs-single-shop .tab-area ul.nav-tabs li .nav-link.active{background:var(--bg-dark);border-color:var(--bg-dark);color:var(--text-on-dark)}
.rs-single-shop .tab-area ul.nav-tabs li .nav-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* Stage 4: tables. Product specifications (7 product pages, label column + value column) and the Serum Albumin table.
   Not a bare table{} rule: three pages lay out a section title with a table inside an h2. */
.pricing-table center>table,.blog-full table.table-style2{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border-default);
  border-radius:var(--radius-md);overflow:hidden;background:var(--bg-page);font-size:var(--step-caption);line-height:var(--lh-caption);text-align:left}
.pricing-table center>table td,.blog-full table.table-style2 td,.blog-full table.table-style2 th{height:auto;padding:14px 18px;border:0;border-bottom:1px solid var(--border-subtle);
  font-size:var(--step-caption);line-height:var(--lh-caption);vertical-align:top;text-align:left}
.pricing-table center>table td.td-right{width:46%;font-weight:500;color:var(--text-primary);background:var(--bg-subtle)}
.pricing-table center>table td.td-left{color:var(--text-secondary);font-variant-numeric:tabular-nums}
.pricing-table center>table tr:last-child td,.blog-full table.table-style2 tbody tr:last-child td{border-bottom:0}
.blog-full table.table-style2 th{background:var(--bg-subtle);color:var(--text-primary);font-weight:500}
.blog-full table.table-style2 td{color:var(--text-secondary)}
.blog-full table.table-style2 tr:nth-child(even){background:none}
.blog-full table.table-style2 td:first-child{color:var(--text-primary)}

/* Stage 4: contact form -> design-system fields (white, 1.5px strong border, 14px radius, navy focus ring) and the primary button */
#contact-form .from-control{width:100%;min-height:54px;padding:14px 18px;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-page);
  color:var(--text-primary);font:400 18px/1.4 var(--font-sans);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
#contact-form textarea.from-control{min-height:140px;resize:vertical}
#contact-form .from-control::placeholder{color:var(--text-tertiary);opacity:1}
#contact-form .from-control:hover{border-color:var(--text-secondary)}
#contact-form .from-control:focus{outline:none;border-color:var(--text-primary);box-shadow:0 0 0 4px var(--navy-100)}
#contact-form .readon.submit{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:var(--radius-pill);
  background:var(--action-primary);color:var(--text-on-accent);font:var(--w-button) var(--step-button)/1 var(--font-sans)}
#contact-form .readon.submit:hover{background:var(--action-primary-hover)}
#contact-form .readon.submit:active{background:var(--action-primary-pressed);transform:translateY(1px)}
#contact-form .readon.submit:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* Stage 4: banner photos. The six stock photos (handshake, laptop, keyboard, pens, coloured pencils, tablet) are replaced by
   pictures generated for PathShodh's world (Magnific, Nano Banana 2.1, 2026-11-08): lab and research scenes, gloved hands only,
   no faces, no PathShodh device, no text. The real photos stay: About (IISc), product pages (field testing), Navakanta, Vinay.
   Scoped to the banners, because .bg25 and .bg25-pre-booking are shared class names. */
.counter-home5-style.bg25-fund{background-image:url(../images/bg/banner-lab-hands.jpg)}                    /* Team, Funding */
.counter-home5-style.bg25car{background-image:url(../images/bg/banner-workbench.jpg)}                      /* Careers (9), Advisors */
.counter-home5-style.bg25-blog{background-image:url(../images/bg/banner-electrodes.jpg)}                   /* Blog, Awards, CSR, Gallery, both articles */
.counter-home5-style.bg25:not([class*="bg25-"]){background-image:url(../images/bg/banner-campus.jpg)}       /* Contact */
.style1.pt-200.bg25-pre-booking,.counter-home5-style.bg25-pre-booking{background-image:url(../images/bg/banner-drawings.jpg)}  /* Dr. Narahari (IP), pre-booking */
.counter-home5-style.bg25-testimonial-new{background-image:url(../images/bg/banner-meeting-room.jpg)}       /* the five advisor pages */
.counter-home5-style.bg25-about{background-image:url(../images/bg/banner-electrochem.jpg)}                       /* About Us (Magnific: electrochemical cell, sensor strips, voltammetry notes by a campus window) */
.rs-counter.counter-home5-style,.style1.pt-200[class*="bg25"]{background-size:cover}
/* Dr. Vinay Kumar and Dr. Navakanta Bhat (2026-11-11): one collage for both pages, in one blue-grey tone: two photos of the two of them together and text-only press clippings, on the lab scene. A single cut-out portrait doubled the large portrait right under the banner. Built by compose_navakanta_collage.py. ?v= is raised when the picture is rebuilt. */
.style1.pt-200.bg25-vinay,.style1.pt-200.bg25-navk{background-image:url(../images/bg/banner-navakanta-collage.jpg?v=2)}

/* Stage 5: cookie notice (cookie_consent.php markup and wording unchanged). Its own <style> loads after this file, so #cookie-banner. */
#cookie-banner.cookie-banner{background:var(--bg-page);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-3),0 2px 8px rgba(18,23,53,.08);
  padding:20px 22px;max-width:420px;font-family:var(--font-sans)}
#cookie-banner .cookie-logo{display:none}
#cookie-banner .cookie-text h4{margin:0;color:var(--text-primary);font:500 17px/1.3 var(--font-sans)}
#cookie-banner .cookie-text p{margin:6px 0 0;color:var(--text-secondary);font:400 var(--step-caption)/var(--lh-caption) var(--font-sans)}
#cookie-banner .cookie-text strong{font-weight:500;color:var(--text-primary)}
#cookie-banner .cookie-text a{color:var(--text-accent);font-weight:400;text-decoration:underline;text-underline-offset:3px}
#cookie-banner .cookie-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
#cookie-banner .cookie-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin:0;padding:0 20px;border-radius:var(--radius-pill);
  font:var(--w-button) 16px/1 var(--font-sans);transition:background-color var(--dur-fast),border-color var(--dur-fast)}
#cookie-banner .cookie-btn.accept{background:var(--action-primary);color:var(--text-on-accent);border:1.5px solid transparent}
#cookie-banner .cookie-btn.accept:hover{background:var(--action-primary-hover)}
#cookie-banner .cookie-btn.reject{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-strong)}
#cookie-banner .cookie-btn.reject:hover{background:var(--bg-cool);border-color:var(--text-primary)}
#cookie-banner .cookie-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ===== Stage 6: template decorations with baked colours, blog pagination ===== */
/* Product pages, "working process" band and the feature band under it: new generated pictures (Magnific, 2026-11-08) in place of
   the template's black dot and gravel photos: a macro of printed sensor electrodes and of etched microfluidic channels, both
   navy with a crimson glint; a navy veil keeps the white text readable. The template's steps.png layer is dropped. */
.rs-process.style1 .process-effects-layer{background-image:none}
.bg2-nano-process{background:linear-gradient(180deg,rgba(18,23,53,.82) 0,rgba(18,23,53,.6) 32%,rgba(18,23,53,.58) 100%),var(--bg-dark) url(../images/bg/process-electrodes.webp) center/cover no-repeat}
.bg12-nano-number{background:linear-gradient(rgba(18,23,53,.4),rgba(18,23,53,.4)),var(--bg-dark) url(../images/bg/feature-channels.webp) center/cover no-repeat}
/* the crimson words in that band's title (inline #A92D31) are too dark on navy (about 2:1); the light crimson step reads at 6:1 */
.bg2-nano-process .sec-title .title span[style*="A92D31"]{color:var(--crimson-300)!important}
/* Sameer's page: the orange chevron backdrop behind the portrait (inline style); the other people pages have none */
.rs-team-Single .btm-info-team .images-part[style*="back-1"]{background-image:none!important}
/* Blog, newsroom, awards and gallery pagination: separate round page links instead of one crimson block; the current
   page (.white-color, a span or a link) filled navy */
.pagination-area .nav-link{background:none;padding:0;gap:8px;flex-wrap:wrap}
.pagination-area .nav-link .page-number,.pagination-area .nav-link .page-number.border-none{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--bg-page);color:var(--text-primary);font-size:16px;line-height:1;font-weight:500}
.pagination-area .nav-link a.page-number:hover{border-color:var(--action-primary);color:var(--action-primary);background:var(--crimson-25)}
.pagination-area .nav-link .page-number.white-color,.pagination-area .nav-link .page-number.white-color:hover{background:var(--action-secondary);border-color:var(--action-secondary);color:var(--text-on-dark)}