/* Homepage clarity and spacing, using the existing design tokens. */
.hero { overflow: clip; }
.served-item { border-top: 0 !important; padding-top: 0 !important; }
.served-band { padding-block: var(--s-6); }
.category-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-5); }
.process-studio { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-10); align-items: start; }
.process-preview { background: var(--ink-950); color: white; padding: var(--s-6); border-radius: var(--r-md); position: sticky; top: calc(var(--nav-h) + 24px); }
.process-preview .t-label { color: var(--ink-200); }
.process-preview img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; margin-block: var(--s-5); border-radius: var(--r-md); }
#process-preview-caption { font-size: 28px; font-weight: 700; }
.process-preview-note { color: var(--ink-200); font-size: 15px; margin-top: var(--s-3); }
.process-step { border-top: 1px solid var(--ink-300); }
.process-step:last-child { border-bottom: 1px solid var(--ink-300); }
.process-step summary { display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-5); cursor: pointer; list-style: none; }
.process-step summary::-webkit-details-marker { display: none; }
.process-step summary > span:first-child { font: 500 12px var(--font-mono); color: var(--vermillion); }
.process-step h3 { font-size: clamp(19px,2vw,25px); font-weight: 600; }
.process-plus { margin-left: auto; font-size: 24px; }
.process-step[open] .process-plus { transform: rotate(45deg); }
.process-step-body { padding: 0 0 var(--s-5) var(--s-10); }
.process-step-body p { color: var(--ink-600); font-size: 16px; line-height: 1.65; margin-bottom: var(--s-4); }
.process-step-body a { color: var(--vermillion); font-weight: 600; }
.client-logo-window { overflow: hidden; }
.client-logo-track { display: flex; width: max-content; gap: 20px; animation: client-drift 65s linear infinite; }
.client-logo-group { display: flex; gap: 20px; list-style: none; padding: 0; }
.client-logo-copy { display: flex; }
.client-logo-group .client-brand { width: 210px; height: 120px; border: 1px solid var(--ink-200); border-radius: var(--r-md); background: white; color: var(--ink-950); flex-shrink: 0; }
.client-logo-group .client-logo-dark { background: var(--ink-950); }
.client-brand img { width: 160px; height: 70px; object-fit: contain; }
.client-logo-track:hover,.client-logo-track.is-paused { animation-play-state: paused; }
.client-motion-toggle { margin-top: var(--s-4); padding: var(--s-2) var(--s-4); border: 1px solid var(--ink-300); border-radius: var(--r-md); background: transparent; color: var(--ink-600); font: 500 13px var(--font-body); cursor: pointer; }
@keyframes client-drift { to { transform: translateX(calc(-50% - 10px)); } }
@media(prefers-reduced-motion:reduce) { .client-logo-track { animation: none; width: auto; } .client-logo-group { flex-wrap: wrap; justify-content: center; } .client-logo-copy,.client-motion-toggle { display: none; } }
@media(max-width:900px) { .process-studio { grid-template-columns: 1fr; } .process-preview { position: static; } .category-photo-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px) { .category-photo-grid { grid-template-columns: 1fr; } }
.capability-link-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--s-5); }
.capability-link { display: flex; flex-direction: column; color: var(--ink-950); background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-md); overflow: hidden; text-decoration: none; transition: border-color .2s; }
.capability-link:hover { border-color: var(--vermillion); }
.capability-link:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 4px; }
.capability-link img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.capability-link > div { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.cap-index { font: 500 12px/1.5 var(--font-mono); color: var(--vermillion); margin-bottom: var(--s-3); }
.capability-link h3 { font-size: 20px; line-height: 1.25; font-weight: 700; margin-bottom: var(--s-3); }
.capability-link p { font-size: 14px; line-height: 1.6; color: var(--ink-600); margin-bottom: var(--s-5); }
.cap-read { margin-top: auto; color: var(--vermillion); font-size: 13px; font-weight: 600; }
.client-showcase { padding-bottom: var(--s-10); }
.client-showcase-heading { display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.client-showcase-heading .t-label { grid-column: 1/-1; margin-bottom: var(--s-4); }
.client-showcase-heading h3 { font: 700 clamp(28px,3vw,40px)/1.15 var(--font-headline); }
.client-showcase-heading p { font-size: 17px; color: var(--ink-600); max-width: 45ch; }
.client-brand-wall { list-style: none; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); padding: 0; border-top: 1px solid var(--ink-200); border-left: 1px solid var(--ink-200); }
.client-brand { grid-column: span 4; }
.client-brand-featured { grid-column: span 3; }
.client-brand { min-height: 100px; padding: var(--s-6); display: flex; align-items: center; justify-content: center; text-align: center; border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); background: var(--paper); font: 700 clamp(18px,1.7vw,24px)/1.2 var(--font-headline); letter-spacing: -.025em; transition: background .2s,color .2s; }
.client-brand-featured { min-height: 130px; background: var(--ink-950); color: var(--white); }
.client-brand:hover { background: var(--vermillion); color: var(--white); }
@media(max-width:900px) { .capability-link-grid,.client-brand-wall { grid-template-columns: repeat(2,minmax(0,1fr)); } .client-brand { grid-column: auto; } .client-brand:last-child { grid-column: 1/-1; } }
@media(max-width:640px) { .capability-link-grid,.client-showcase-heading { grid-template-columns: 1fr; } .client-showcase-heading p { margin-top: var(--s-4); } .client-brand { padding: var(--s-4); min-height: 90px; } }
.served-band { display: grid; grid-template-columns: 1fr 1.8fr; gap: var(--s-10); padding: var(--s-8); margin-top: var(--s-8); background: var(--ink-950); border: 0; border-radius: var(--r-md); color: var(--white); }
.served-heading h2 { font: 700 clamp(26px,3vw,36px)/1.15 var(--font-headline); margin-block: var(--s-4); }
.served-heading > p { font-size: 15px; line-height: 1.65; color: var(--ink-200); }
.served-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); }
.served-item { color: var(--white); border-top: 1px solid var(--ink-700); padding-top: var(--s-4); }
.served-item h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--s-2); }
.served-item p { font-size: 14px; line-height: 1.6; font-weight: 400; color: var(--ink-200); }
#services .section-header { max-width: 850px; margin-bottom: var(--s-8); }
#services .t-display-sm { font-weight: 600; }
.capabilities-intro { max-width: 70ch; color: var(--ink-600); font-size: 17px; line-height: 1.65; margin-top: var(--s-4); }
.capability-card { height: 280px; }
.capability-extras { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-6); margin-top: var(--s-8); }
.capability-extras article { border-top: 2px solid var(--vermillion); padding-top: var(--s-4); }
.capability-extras h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--s-2); }
.capability-extras p,.capability-note { font-size: 14px; line-height: 1.65; color: var(--ink-600); }
.capability-note { margin-top: var(--s-6); }
.about-split { min-height: 0; }
.about-split-left,.about-split-right { justify-content: flex-start; gap: var(--s-6); padding-block: var(--s-12); padding-inline: max(var(--s-8),calc((100vw - var(--max-w))/2 + var(--s-8))); }
.about-split-left { padding-right: var(--s-10); }
.about-split-right { padding-left: var(--s-10); }
.about-split-title,.about-split-right .t-display-sm { font-size: clamp(30px,3.3vw,44px); font-weight: 600; }
.about-split-left .t-body { max-width: none !important; color: var(--ink-200) !important; }
.about-split-left .section-label-row .t-label { color: var(--ink-200) !important; }
.about-split-right .t-display-sm { margin-bottom: 0 !important; }
.about-facts-grid { grid-template-columns: repeat(3,1fr); margin-top: 0; }
.about-fact { padding: var(--s-4); }
.about-fact strong { font-size: 23px; }
.faq-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: var(--s-8); align-items: start; }
#faq .section-header { max-width: none; margin-bottom: var(--s-8); }
.faq-list { gap: var(--s-2); min-width: 0; }
.faq-item { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-md); }
.faq-item[open] { border-left: 3px solid var(--vermillion); }
.faq-q { padding: var(--s-5); font-weight: 600; }
.faq-a { padding: 0 var(--s-5) var(--s-5); color: var(--ink-600); }
.faq-help { padding: var(--s-8); background: var(--ink-950); border-radius: var(--r-md); color: var(--white); }
.faq-help .t-label { color: var(--ink-200); }
.faq-help h3 { font-size: 28px; line-height: 1.2; margin-block: var(--s-4); }
.faq-help p,.faq-help li { font-size: 15px; line-height: 1.65; color: var(--ink-200); }
.faq-help ul { padding-left: var(--s-5); margin-block: var(--s-5); }
.faq-help .btn { margin-top: var(--s-2); }
.faq-phone { display: block; color: var(--white); margin-top: var(--s-5); text-decoration: underline; text-underline-offset: 4px; }
.faq-help .faq-hours { font-size: 12px; margin-top: var(--s-2); }
.blog-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); }
#blog .section-header { margin-bottom: var(--s-8); }
#blog + #faq { border-top: 1px solid var(--ink-200); }
@media(max-width:900px) {
 .served-band,.faq-layout { grid-template-columns: 1fr; }
 .capability-extras { grid-template-columns: 1fr 1fr; }
 .about-split-left,.about-split-right { padding: var(--s-10) var(--s-8); }
 .blog-preview-grid { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
 .served-band,.faq-help { padding: var(--s-6); }
 .served-list { grid-template-columns: 1fr; }
 .capability-extras { gap: var(--s-5); }
 .about-split-left,.about-split-right { padding: var(--s-8) var(--s-6); }
 .about-facts-grid { grid-template-columns: 1fr 1fr; }
 .section { padding-block: var(--s-12); }
}

/* A quiet logo gallery and one readable customer story at a time. */
.premium-clients { background: #f4f0e9; }
.premium-clients .client-showcase-heading { grid-template-columns: 1.4fr 1fr; margin-bottom: 36px; }
.premium-clients h2 { font: 600 clamp(42px,6vw,80px)/1.04 var(--font-headline); letter-spacing: -.045em; }
.premium-clients .client-logo-window { border-block: 1px solid var(--ink-200); padding-block: 20px; mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.premium-clients .client-logo-group .client-brand { background: transparent; border: 0; border-radius: 0; height: 100px; padding: 16px; width: 210px; font-size: 19px; transition: transform .25s; }
.premium-clients .client-brand:hover { transform: translateY(-4px); color: var(--ink-950); }
.premium-clients .client-brand img { max-height: 64px; filter: grayscale(1); opacity: .85; transition: filter .25s,opacity .25s; }
.premium-clients .client-brand:hover img { filter: none; opacity: 1; }
.premium-clients .client-logo-dark img { filter: brightness(0); }
.premium-clients .client-logo-dark:hover img { filter: brightness(0); }
.customer-spotlight { display: grid; grid-template-columns: 1fr 1.65fr; gap: 64px; padding-top: 40px; align-items: start; }
.customer-intro h3 { font: 600 clamp(27px,3vw,40px)/1.15 var(--font-headline); letter-spacing: -.03em; margin-block: 18px; }
.customer-intro p { color: var(--ink-600); font-size: 16px; max-width: 28ch; }
.customer-quotes { min-width: 0; }
.customer-quote[hidden] { display: none; }
.customer-quote { padding: 32px 40px; background: #fffdfa; border-radius: 8px; min-height: 350px; }
.quote-mark { display: block; color: var(--vermillion); font: 80px/.7 Georgia,serif; margin-top: 10px; }
.customer-quote blockquote { font: 500 clamp(22px,2.2vw,30px)/1.45 var(--font-headline); letter-spacing: -.02em; margin: 16px 0 30px; }
.quote-attribution { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
.quote-attribution span { color: var(--ink-600); font-size: 13px; }
.quote-controls { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.quote-controls button { width: 46px; height: 46px; border: 1px solid var(--ink-300); border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; transition: background .2s,color .2s; }
.quote-controls button:hover { background: var(--ink-950); color: white; }
.quote-controls button:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 4px; }
.quote-position { font: 12px var(--font-mono); }
@media(max-width:768px) { .premium-clients .client-showcase-heading,.customer-spotlight { grid-template-columns: 1fr; gap: 24px; } .customer-quote { padding: 28px 24px; min-height: 0; } .customer-intro p { max-width: none; } }

/* Keep HT Media monochrome, and make the Sun Pharma mark legible. */
.premium-clients .client-logo-dark img,.premium-clients .client-logo-dark:hover img { filter: brightness(0) !important; opacity: 1; }
.premium-clients .client-brand img[src*="sun-pharma"] { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.7); opacity: 1; }
.premium-clients .client-brand:hover img[src*="sun-pharma"] { filter: contrast(1.15); }
.premium-clients .testimonials-marquee { margin-top: 28px; }
.premium-clients .testimonials-grid-fallback { margin-top: 28px; }

.premium-clients .client-brand img[src*="sun-pharma"] { width: 110px; height: 84px; max-height: 84px; }
.testimonial-swipe-hint { display: none; }
.testimonial-deck-controls { display: none; }
@media(max-width:640px) {
  .testimonial-deck-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .deck-caption { flex: 1; min-width: 0; font: 12px var(--font-mono); color: var(--ink-600); }
  .deck-position { display: block; margin-bottom: 8px; }
  .deck-progress { display: block; width: 90px; height: 3px; background: var(--ink-200); border-radius: 3px; overflow: hidden; }
  .deck-progress-fill { display: block; height: 100%; background: var(--vermillion); transition: width .25s ease; }
  .testimonial-deck-controls button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink-300); background: var(--paper); color: var(--ink-950); font-size: 24px; cursor: pointer; transition: transform .2s,background .2s; }
  .testimonial-deck-controls .deck-next { background: var(--ink-950); color: white; border-color: var(--ink-950); }
  .testimonial-deck-controls button:active { transform: scale(.92); }
  .testimonial-deck-controls button:disabled { opacity: .3; cursor: default; }
  .testimonial-deck-controls button:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 4px; }
  .premium-clients .testimonials-grid-fallback { padding-inline: var(--s-8); }
  .premium-clients .testimonials-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding: 4px 0 16px;
    scrollbar-width: none;
    scrollbar-color: var(--ink-300) transparent;
  }
  .premium-clients .testimonials-grid > .testimonial-card {
    flex: 0 0 100%;
    min-width: 0;
    height: auto;
    padding: 24px;
    scroll-snap-align: start;
    opacity: 1;
    transform: none;
  }
  .premium-clients .testimonials-grid:focus-visible { outline: 2px solid var(--vermillion); outline-offset: 4px; }
  .testimonial-swipe-hint { display: block; color: var(--ink-600); font: 12px var(--font-mono); margin: 0 0 16px; }
}
@media(prefers-reduced-motion:reduce) { .deck-progress-fill,.testimonial-deck-controls button { transition: none; } }

@media(max-width:640px) { .premium-clients .testimonials-grid::-webkit-scrollbar { display: none; } }