/* Accessibility and mobile refinements; preserve the desktop visual direction. */
:root { --muted: #626e5e; }
.muted { color: #717a67; }
.brand-info > span, .image-note, .option-number { color: #5c6856; }
.modal-eyebrow, summary > span { color: #994626; }
.button:hover, .nav-connect:hover { background: #a14b2b; color: white; }
.detail-dialog { padding: 0; overscroll-behavior: contain; }
.dialog-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.dialog-toolbar > span { font-size: 15px; font-weight: 700; letter-spacing: .05em; }
.dialog-close { position: static; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }
.dialog-close:hover { background: var(--cream); }
#dialog-body { padding: 28px 40px 36px; overflow-wrap: anywhere; }
#dialog-title:focus { outline: none; }
.button, .secondary-button, .connect-tabs button { min-height: 44px; }
.contact-form input, .contact-form select, .contact-form textarea { font-size: 16px; min-height: 48px; }
.contact-form label { font-size: 14px; }
.contact-form .form-note { font-size: 12px; color: #596650; }
.contact-form { gap: 20px; }
.copy-result { font-size: 13px; }
.filter-status { font-size: 12px; margin: -12px 0 22px; color: #5c6856; }
.filter-status:empty { display: none; }
.section-width, .hero-intro > div, .values-layout > div { min-width: 0; }
img { max-width: 100%; }
button, a, summary { touch-action: manipulation; }

@media (max-width: 800px) {
  .header { height: 76px; gap: 12px; }
  .header .nav-connect { min-height: 44px; font-size: 12px; padding: 8px 13px; }
  .menu-toggle { min-width: 44px; min-height: 44px; padding: 10px; align-items: center; justify-content: center; }
  .mobile-nav { top: 76px; box-shadow: 0 15px 20px #263b3010; }
  .mobile-nav a { min-height: 48px; font-size: 16px; }
  .filters button { min-height: 44px; font-size: 12px; padding: 9px 15px; }
  .connect-tabs button { font-size: 13px; padding: 9px 14px; }
  .button, .secondary-button { font-size: 14px; }
  .text-link { min-height: 44px; font-size: 14px; }
  .footer-nav a, .footer-nav button { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
  .back-top, .circle-link { min-width: 44px; min-height: 44px; }
  .brand-info > span { font-size: 11px; line-height: 1.7; }
  .brand-info p { font-size: 14px; }
  .brand-photo .category { font-size: 10px; }
  .section-label { font-size: 11px; }
  .section-label > span:nth-child(2):not(.small-star) { display: none; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .06em; }
  .hero-intro { display: block; padding-top: 32px; }
  .hero-aside { width: 100%; padding: 20px 0 0; display: block; }
  .hero-aside p { font-size: 16px; line-height: 1.75; max-width: 570px; }
  .hero-aside .desktop-only { display: none; }
  .hero-aside .text-link { margin-top: 18px; font-size: 14px; gap: 24px; min-height: 48px; border: 0; border-radius: 4px; background: var(--ink); color: white; padding: 11px 18px; }
  .hero-aside .text-link:hover { background: var(--orange); }
  .hero-landscape { height: 310px; }
  .hero-image-top, .image-caption { display: none; }
  .hero-image-bottom { bottom: 28px; }
  .hero-image-bottom p { font-size: 32px; }
  .about-content .lead { font-size: 18px; }
  .about-content p:not(.lead), .values-layout > div > p, .section-heading > p { font-size: 15px; }
  .section-heading > p { max-width: 330px; }
  .digital-copy > p:not(.eyebrow) { font-size: 15px; }
  .vision-label { font-size: 10px; line-height: 1.8; }
  .digital .eyebrow { font-size: 10px; }
  .digital { grid-template-columns: 1fr; }
  .digital-copy > p:not(.eyebrow) { max-width: 560px; }
  .digital-visual { min-height: 430px; max-width: 370px; width: 100%; margin: auto; }
  .journey-card { width: 270px; }
  .journey-kicker, .journey-steps small { font-size: 10px; }
  .journey-steps p { font-size: 12px; }
  .journey-card h3 { font-size: 23px; }
  .floating-chip { font-size: 11px; }
  .visual-note { font-size: 9px; letter-spacing: .05em; color: #cbd4c5; bottom: -22px; text-align: center; }
  details p { font-size: 15px; line-height: 1.8; }
  summary { min-height: 44px; font-size: 16px; }
  .connect-options p { font-size: 14px; }
  .option-link { font-size: 13px; min-height: 44px; }
  .option-number { font-size: 11px; }
}

@media (max-width: 580px) {
  html { scroll-padding-top: 20px; }
  section[id] { scroll-margin-top: 20px; }
  .section-width { width: calc(100% - 40px); }
  .section-space { padding-block: 48px; }
  .header { padding-inline: 16px; gap: 8px; }
  .header .wordmark { font-size: 25px; }
  .header .nav-connect { font-size: 12px; padding: 8px 11px; }
  .header .nav-connect span { margin-left: 8px; }
  .hero-intro { padding: 28px 0; }
  .hero h1 { font-size: clamp(38px, 10.7vw, 58px); line-height: 1.16; letter-spacing: -.06em; }
  .heading-star { display: none; }
  .hero .eyebrow { max-width: 300px; font-size: 10px; line-height: 1.7; margin-bottom: 17px; }
  .hero .eyebrow > span { flex-shrink: 0; }
  .hero-aside p { font-size: 15px; max-width: none; }
  .hero-aside .text-link { display: flex; width: 100%; justify-content: space-between; }
  .hero-landscape { height: clamp(260px, 73vw, 310px); }
  .hero-image-bottom { left: 22px; right: 22px; bottom: 24px; }
  .hero-image-bottom p { font-size: 29px; }
  .brand-strip { padding-block: 23px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .strip-label { font-size: 10px; letter-spacing: .07em; }
  .brand-strip button { min-height: 52px; }
  .trang-logo { font-size: 22px; }
  .trang-logo small { font-size: 7px; }
  .lia-logo { font-size: 30px; }
  .lia-logo > span { font-size: 13px; }
  .academy-logo { font-size: 17px; }
  .academy-logo small { font-size: 9px; }
  .tech-logo { font-size: 25px; }
  .tiny-star { font-size: 22px; }
  .section-label { font-size: 11px; letter-spacing: .07em; margin-bottom: 23px; }
  h2, .about-content h2, .values h2 { font-size: clamp(32px, 9.2vw, 40px); }
  .about-content { gap: 20px; }
  .about-content .lead { font-size: 17px; line-height: 1.75; margin-bottom: 0; }
  .about-content > div > p:not(.lead), .principles-strip { display: none; }
  .about-content .text-link { margin-top: 10px; }
  .section-heading > p { font-size: 15px; max-width: none; margin-top: 19px; }
  .section-heading > p br { display: none; }
  .filters { gap: 8px; padding-bottom: 25px; }
  .filters button { font-size: 12px; padding: 9px 13px; }
  .filters sup { font-size: 10px; }
  .brand-grid { gap: 30px; }
  .brand-photo, .featured .brand-photo { height: auto; aspect-ratio: 1.45; }
  .brand-photo img { position: absolute; inset: 0; }
  .brand-info h3 { font-size: 25px; line-height: 1.3; margin-bottom: 8px; }
  .brand-info p { font-size: 15px; margin: 0; }
  .brand-info > span { display: none; }
  .category { font-size: 10px; top: 13px; left: 13px; }
  .brand-arrow { width: 44px; height: 44px; }
  .image-note { font-size: 12px; line-height: 1.8; margin-top: 25px; }
  .digital { margin-top: 48px; padding: 32px 24px 48px; gap: 22px; }
  .digital h2 { font-size: clamp(32px, 9vw, 43px); }
  .digital .eyebrow { font-size: 10px; line-height: 1.7; }
  .digital-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; }
  .digital .button { width: 100%; }
  .digital-visual { min-height: 415px; }
  .journey-card { width: min(260px, 100%); transform: rotate(3deg); padding: 17px; }
  .floating-chip { display: none; }
  .visual-note { bottom: -22px; font-size: 9px; }
  .values-layout > div > p { font-size: 15px; line-height: 1.8; }
  .values-layout { gap: 23px; }
  details { padding-block: 14px; }
  details p { font-size: 15px; margin-left: 0; }
  summary { font-size: 16px; gap: 13px; }
  summary > span { font-size: 12px; }
  summary > b { flex-shrink: 0; }
  .connect-options h3 { font-size: 27px; }
  .connect-options p { font-size: 15px; max-width: none; }
  .option-number { font-size: 11px; }
  .option-link { font-size: 14px; min-height: 44px; }
  .footer-top p { font-size: 13px; }
  .footer-nav { gap: 0 20px; }
  .footer-bottom { font-size: 10px; line-height: 1.8; letter-spacing: .02em; gap: 14px; }
  .detail-dialog { position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%; height: 100vh; height: var(--dialog-height, 100dvh); max-height: 100%; border-radius: 0; padding: 0; }
  .dialog-toolbar { padding: max(10px, env(safe-area-inset-top)) 20px 10px; }
  #dialog-body { padding: 24px 20px max(32px, env(safe-area-inset-bottom)); }
  .detail-dialog h2 { font-size: 32px; padding-right: 0; }
  .detail-dialog p, .detail-dialog .modal-lead { font-size: 15px; line-height: 1.85; }
  .detail-dialog .modal-eyebrow { font-size: 11px; }
  .modal-image { height: auto; aspect-ratio: 1.5; }
  .modal-list li { font-size: 15px; line-height: 1.8; }
  .notice { font-size: 13px !important; }
  .modal-bottom .button { width: 100%; }
  .connect-tabs { gap: 7px; }
  .connect-tabs button { font-size: 13px; padding-inline: 12px; }
  .contact-form label { font-size: 14px; }
  .contact-form textarea { min-height: 135px; }
  .contact-form .form-note { font-size: 13px; }
  .contact-form .button { min-height: 50px; }
  .form-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .copy-result { font-size: 14px; }
}