/* WinnPharma brand layer. Layout and interactions remain in site.css/site.js. */
:root {
  --navy: #0c4263;
  --ink: #122e45;
  --muted: #415e74;
  --orange: #ff6d13;
  --orange-dark: #943b0a;
  --paper: #e8f0f7;
  --pale: #ffe4cf;
  --line: #c2d3e0;
  --radius: 12px;
  --brand-deep: #082c43;
  --brand-blue: #176184;
  --brand-light: #dceaf5;
  --brand-peach: #ffe4cf;
  --brand-highlight: #ffad70;
}
body { background: var(--paper); }
.site-header {
  background: var(--brand-deep);
  color: white;
  border-bottom: 3px solid var(--orange);
  backdrop-filter: none;
}
.brand img {
  background: white;
  border-radius: 4px;
  width: 104px;
  height: 72px;
  padding: 5px 9px;
}
.brand-description { color: #d9e7f2; border-left-color: #56758f; }
.nav a:hover, .nav a[aria-current=page] { color: var(--brand-highlight); }
.nav .btn, .nav .btn:hover, .nav .btn[aria-current=page] { color: var(--brand-deep); }
.btn { border-radius: 5px; color: var(--brand-deep); }
.menu-button { color: white; background: transparent; border-color: #819db2; border-radius: 5px; }
.hero {
  color: white;
  background: linear-gradient(110deg, var(--brand-deep) 0%, var(--navy) 70%, var(--brand-blue) 100%);
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 31%;
  background: var(--orange);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-grid { gap: 64px; padding-block: 60px 70px; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--brand-highlight); }
.hero-copy h1 em { color: var(--brand-highlight); }
.hero-copy > p:not(.eyebrow) { color: #deebf4; }
.hero .text-link { color: white; border-bottom-color: var(--orange); }
.hero .text-link:hover { color: var(--brand-highlight); }
.hero-proof { border-top-color: #65809a; }
.hero-proof strong { color: white; }
.hero-proof small { color: #cedfea; }
.portrait-frame {
  border-radius: 65px 16px 16px 16px;
  border: 5px solid #ffffff;
  box-shadow: 0 18px 45px #031b3445;
}
.portrait-caption {
  color: white;
  background: var(--brand-deep);
  border: 1px solid #6e8fa9;
  border-left: 5px solid var(--orange);
  border-radius: 5px;
}
.portrait-caption strong { color: var(--brand-highlight); }
.portrait-caption p { color: #e2edf5; }
.trust-strip { background: var(--orange); border-bottom: none; }
.trust-row { color: var(--brand-deep); font-weight: 650; }
.trust-row span::before { background: var(--brand-deep); border-radius: 0; }
.section { background: var(--paper); }
.section.light { background: var(--brand-peach); }
.section.warm { background: #cfe2ef; }
.section-head h2, .personal-copy h2, .education-band h2 { color: var(--navy); }
.card { border-radius: 18px; border-color: #b9cfdf; box-shadow: none; }
.card:has(.num) { border-top: 4px solid var(--orange); }
.card:has(.num):nth-child(even) { background: #dceaf4; border-top-color: var(--navy); }
.card:hover { border-color: var(--orange); box-shadow: 0 12px 28px #0a406b14; }
.card .num { color: var(--orange-dark); font-weight: 750; }
.knowledge-grid .card { border-left: 4px solid var(--navy); }
.tag { color: var(--navy); border-bottom: 2px solid var(--orange); padding-bottom: 7px; }
.personal-photo { border-radius: 10px; border-left: 7px solid var(--orange); }
.personal-copy .check-list li { border-bottom-color: #d9b9a0; }
.section.process-section { background: var(--navy); }
.dark-panel { padding: 0; border-radius: 0; background: transparent; }
.dark-panel .btn.light { color: var(--brand-deep); background: var(--orange); }
.dark-panel .btn.light:hover { background: #ffad70; }
.step > span { color: var(--brand-deep); background: var(--orange); border: none; border-radius: 5px; }
.education-band { border-top: none; }
.education-logo { border-radius: 10px; border-bottom: 5px solid var(--orange); }
/* Scale education artwork proportionally when its column becomes narrower. */
.education-logo img, .brand-hero > img { width: 100%; height: auto; }
.cta-section { background: var(--orange); color: var(--brand-deep); }
.cta-section .eyebrow, .cta-row p { color: var(--brand-deep); }
.cta-section .btn { background: var(--brand-deep); color: white; }
.cta-section .btn:hover { background: var(--navy); }
.site-footer { background: #062842; border-top: 6px solid var(--navy); }

/* Shared colour treatment reaches service, knowledge, contact and archive pages. */
.page-hero {
  color: white;
  background: linear-gradient(115deg, var(--brand-deep), var(--brand-blue));
  border-bottom: 6px solid var(--orange);
}
.page-hero h1 { color: white; }
.page-hero .lead, .page-hero .meta, .page-hero .breadcrumbs { color: #e1edf6; }
.breadcrumbs a:hover { color: var(--brand-highlight); }
.side-card { background: var(--navy); color: white; border: none; border-top: 5px solid var(--orange); border-radius: 8px; }
.side-card h3 { color: white; }
.side-card p { color: #e1edf6; }
.side-card nav a { border-bottom-color: #587792; }
.side-card nav a:hover { color: var(--brand-highlight); }
.side-card a:focus-visible, .hero a:focus-visible, .site-header a:focus-visible,
.site-header button:focus-visible, .page-hero a:focus-visible, .site-footer a:focus-visible,
.dark-panel a:focus-visible { outline-color: #ffbc89; }
.prose h2 { color: var(--navy); }
.prose h2::before { content: ''; display: block; width: 40px; height: 4px; margin-bottom: 14px; background: var(--orange); }
.article-lead { background: #d4e5f1; border-left-width: 5px; border-radius: 0 8px 8px 0; }
.prose blockquote { background: var(--brand-peach); }
.toc-links a { color: var(--brand-deep); background: #ffe4cf; border-color: #ffad70; border-radius: 4px; }
.contact-form { background: #d3e5f1; border: none; border-top: 5px solid var(--orange); border-radius: 10px; }
.credential { background: #d6e6f2; border: none; border-top: 4px solid var(--orange); border-radius: 8px; }
.filter-bar { background: var(--navy); padding: 24px; border-radius: 8px; border-bottom: 4px solid var(--orange); }
.filter-bar .field label { color: white; }
.results-info { color: var(--navy); font-weight: 650; }
.field input, .field select, .field textarea, .reset { border-radius: 5px; }
.resource { border-radius: 10px; border-top: 4px solid var(--navy); }
.brand-hero img { border-radius: 8px; }

@media (max-width: 960px) {
  .nav { background: var(--brand-deep); border-bottom: 3px solid var(--orange); }
  .brand img { width: 92px; height: 66px; }
  .hero-grid { gap: 35px; }
  .portrait-frame { border-radius: 55px 14px 14px 14px; }
}
@media (max-width: 680px) {
  .brand img { width: 82px; height: 58px; padding: 3px 6px; }
  .hero-grid { padding-top: 42px; padding-bottom: 42px; }
  .hero::before { inset: auto 0 0; width: 100%; height: 29%; clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%); }
  .hero-proof { gap: 18px; }
  .portrait-frame { border-radius: 55px 14px 14px 14px; }
  .portrait-caption { border-radius: 5px; }
  .dark-panel { padding: 0; border-radius: 0; }
  .filter-bar { padding: 18px; gap: 15px 12px; }
  .filter-bar .field, .filter-bar select { min-width: 0; }
  .page-hero { border-bottom-width: 5px; }
}