/* Measurements from the five supplied Illustrator documents, at a 1920px canvas.
   Keep the requested fixed header, native controls, clear originals and 14px PC floor. */
:root { --blue: #21469d; --deep: #21469d; }
.hero h1 { font-family: var(--serif); letter-spacing: .035em; }
.hero:not(.hero-home) { background: #546a97 url('../images/design-inner-banner.webp') center/100% 100% no-repeat; }
.hero-home { background-image: url('../images/design-home-banner.webp'); background-position: center; }
.module-section, .service-section.blue { background-color: #274281; }
.site-footer { background-color: #0b0e12; }
.footer-links h3 > a { color: inherit; font-size: inherit; }
.module-icon svg.module-symbol { stroke: none; color: #21469d; }
.inquiry { background: #21469d url('../images/design-inquiry-background.webp') center/100% 100% no-repeat; }
.home-modules { background: linear-gradient(#ffffffd9, #ffffffd9), url('../images/modules-photo.webp') center/cover no-repeat; }
/* Dividers are positioned by the live grid in site-revisions.css. */
.home-modules .module-icon { border-left: 0; border-right: 0; }
.product-card > img { object-fit: contain; background-color: #ededed; }
.service-large { object-fit: cover; }
.headquarters { margin: 0; }
.headquarters figcaption, .base-grid figcaption { padding: 6px 16px; margin: 0; background: #e9e9e9; color: #757575; line-height: 1.3; }
.headquarters figcaption span { display: block; }
.home-news-list .news-category { border: 1px solid #e4dfbd; border-radius: 16px; padding: 2px 10px; color: #a69b68; white-space: nowrap; text-align: center; }
.chevrons { width: 40px; height: 38px; margin-inline: auto; }
.chevrons svg { display: block; width: 100%; height: 100%; }
.section-title h2::before, .section-title h2::after { height: 5px; background: radial-gradient(circle at right, var(--gold) 0 2px, transparent 2.3px), linear-gradient(var(--gold),var(--gold)) left center/calc(100% - 3px) 1px no-repeat; box-shadow: none; }
.section-title h2::after { rotate: 180deg; }

@media (min-width: 1101px) {
  /* The English eyebrow was absent from the inner-page designs. */
  .hero:not(.hero-home) { height: min(35.576vw, 683.05px); min-height: 360px; }
  .hero:not(.hero-home) .container { justify-content: flex-end; padding: 0 0 min(6.56vw,126px); }
  .hero:not(.hero-home) h1 { font-size: min(4vw,76.7px); line-height: 1.4; }
  .hero:not(.hero-home) .hero-desc { margin-top: 22px; font-size: max(14px,min(1.023vw,19.64px)); letter-spacing: .06em; }
  .hero-home > .container { position: absolute; left: 50%; top: 44.4%; translate: -50% 0; height: auto; padding-top: 0; justify-content: flex-start; }
  .hero-home h1 { line-height: 1.2; }
  .hero-home .hero-en { width: min(100%,440px); margin: 0 0 32px; padding: 6px 18px; border: 1px solid #ffffff90; border-radius: 24px; background: #ffffff16; font-size: 14px; }
  .hero-home .hero-desc { margin-top: 7px; font-size: 14px; }
  .hero-home .hero-actions { margin-top: 28px; }
  .breadcrumb { padding: 94px 0 56px; }
  .section-title { margin-bottom: 70px; }
  .section-title h2 { font-size: 35px; gap: 42px; }
  .section-title h2::before, .section-title h2::after { width: 150px; }
  .section-title.compact h2 { font-size: 35px; }
  .about-intro-surface { background: radial-gradient(ellipse at 90% 100%, #ccdfed, #edf4f8 44%, #fff 80%); }

  /* Homepage: separate the broad card/icon rows from the narrower reading column. */
  [data-page="index"] .home-introduction { padding: 118px 0; }
  .home-about { grid-template-columns: 38.35% 1fr; gap: 38px; }
  .home-about > img { max-height: 633px; }
  .home-about .prose { font-size: 15px; }
  .stats { background: #21469d; padding: 148px 0; }
  .stats .stat { min-height: 200px; }
  .stat strong { font-size: 100px; line-height: 1.2; }
  .stat p { font-size: 20px; margin-top: 24px; }
  [data-page="index"] .home-products { padding: 140px 0; }
  .home-products > .container, [data-page="products"] .product-list > .container { width: min(83.333333%,1600px); }
  .product-grid { gap: 45px 50px; }
  .product-card { border-color: #c3c3c3; border-radius: 2px; box-shadow: 0 1px 9px #0005; }
  .product-card > img { aspect-ratio: 1.5; }
  .product-card h3 { font-size: 20px; }
  .product-card .card-body { padding: 20px 22px; }
  .home-modules { padding: 130px 0 180px; }
  .home-modules > .wide { width: min(94.8%,1820px); }
  .home-modules .section-title { margin-bottom: 90px; }
  .module-icon { padding: 20px 10px; }
  .module-icon svg.module-symbol { width: 110px; height: 129px; margin-bottom: 22px; }
  .module-icon p { font-size: 18px; line-height: 1.75; letter-spacing: .08em; }
  .case-mosaic { gap: 4px; }
  .case-mosaic img { aspect-ratio: 1.782; }
  .case-mosaic p { padding: 4px 20px; line-height: 1.6; }
  .home-cases .section-title { margin-bottom: 44px; }
  .home-news { grid-template-columns: 55.7% 1fr; gap: 1.9%; }
  .home-news-feature { width: 100%; max-width: 554px; }
  .home-news-list a { grid-template-columns: 70px minmax(0,1fr) auto; gap: 16px; min-height: 100px; padding-block: 18px; }
  .home-news-list a:last-child { border-bottom: 1px solid var(--line); }
  .home-news-list .news-category { font-size: 14px; }

  /* Reading and project layouts use the original 1368px content column. */
  .article { max-width: 1368px; }
  .article-header { padding-top: 30px; padding-bottom: 0; border-bottom: 0; margin-bottom: 75px; }
  .article-header h2 { border-bottom: 1px solid #c9c9c9; padding-bottom: 12px; }
  .article-body { max-width: 816px; }
  .article-navigation { margin-top: 110px; }
  .detail-layout { width: min(77.1%,1480px); margin-left: 14.3%; margin-right: 0; grid-template-columns: minmax(0,930px) minmax(0,380px); gap: 170px; padding-top: 30px; }
  .detail-layout .prose { font-size: 14px; }
  .detail-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .detail-gallery img { height: auto; aspect-ratio: 1.333; object-fit: cover; }
  .related h3 { font-size: 30px; padding: 9px; }
  .related img { aspect-ratio: 1.45; }
  [data-page="cases"] .section-title { margin-bottom: 145px; }
  .case-stats { margin-bottom: 42px; }
  .filter-bar { gap: 16px; }
  .case-card { border-radius: 6px; overflow: hidden; }
  .news-tabs { margin-top: 30px; margin-bottom: 64px; }
  .news-row { padding-block: 30px; }

  /* Company introduction: source photograph proportions and full-width base strip. */
  [data-page="about"] .about-tabs { margin-bottom: 130px; }
  [data-page="about"] .about-copy { padding-bottom: 130px; }
  .headquarters .about-factory { height: min(46.12vw,885.4px); max-height: none; object-fit: cover; }
  .headquarters figcaption { font-size: 20px; padding-left: 40px; }
  .base-strip { width: 100%; }
  .base-grid { grid-template-columns: 18.96% 40.99% 1fr; gap: 4px; margin: 105px 0 125px; }
  .base-grid img { height: min(22.875vw,439.2px); }
  .base-grid figcaption { font-size: 20px; padding-left: 40px; }
  .company-principle { padding: 24px 0 147px; }
  .company-principle p { font-size: 15px; line-height: 25px; }
  .company-principle .principle-word { margin-top: 35px; }
  .company-principle h2 { margin-bottom: 40px; }
  .culture-stage { padding: 60px 0 565px; }
  .culture-cards { min-height: 445px; }
  .culture-card.active { flex: 1.87; }
  .culture-card { padding: 22px 16px; }
  .culture-icon { width: 40px; height: 40px; }

  /* Restore the large portrait, left overhang and nine wider thumbnails. */
  [data-page="team"] .about-tabs { margin-bottom: 48px; }
  .team-profile { padding-top: 0; }
  .team-profile-inner { position: relative; grid-template-columns: 39.3% minmax(0,1fr); gap: 0; min-height: 775px; align-items: start; }
  .team-person { position: absolute; left: -10.3%; top: -112px; width: min(32.95vw,632.6px); height: 949px; max-width: none; object-position: center bottom; }
  .team-info { grid-column: 2; padding-top: 125px; }
  .team-info h2 { font-size: 35px; }
  .team-info h3 { font-size: 30px; }
  .team-info .prose { max-width: 670px; margin-top: 55px; }
  .team-thumbnails { position: relative; margin-top: -14px; padding: 0 5.9%; gap: 14px; justify-content: space-between; border-bottom-width: 30px; }
  .team-thumbnails button { width: min(9.1vw,174.5px); flex-shrink: 0; }
  .team-thumbnails img { height: min(13.64vw,261.8px); }
  [data-page="team"] .team-after-space { height: 136px !important; }

  [data-page="qualifications"] .about-tabs { margin-bottom: 137px; }
  .qualifications { min-height: 950px; margin-bottom: 190px; grid-template-columns: 250px 1fr; }
  .qualification-tabs button { font-size: 17px; padding-block: 17px; }
  .qualification-display { padding: 60px 75px; }
  .qualification-display .certificate-open { width: min(100%,400px); }
  [data-page="careers"] .about-tabs { margin-bottom: 160px; }
  .recruit-banner { min-height: 456.9px; }
  .recruit-banner h2 { font-size: min(5.04vw,96.8px); }
  .recruit-banner + .container { width: min(60%,1140px); }
  .recruit-tabs { position: relative; margin: -72px -90px 30px; background: #fff; padding: 16px 0; gap: 0; justify-content: stretch; }
  .recruit-tabs button { flex: 1; font-size: 30px; padding: 14px; }
  .recruit-tabs button + button { border-left: 1px solid #ddd; }
  .job-table th, .job-table td { padding-block: 18px; }

  /* Service copy and picture rows have distinct widths in the source. */
  .service-section { padding: 45px 0 12px; }
  .service-heading .service-name { font-family: var(--sans); font-weight: 700; }
  .service-section .prose { max-width: 1200px; font-size: 19.3px; line-height: 2; letter-spacing: 0; margin-bottom: 26px; }
  .service-gallery.production { gap: 32px 1%; }
  .service-gallery.production figure { width: 19.2%; }
  .service-gallery.install { gap: 4.2%; }
  .service-gallery.install figure { width: 28.5%; }
  .service-gallery figcaption { font-size: 18px; line-height: 2; }
  .service-large { height: min(34.6vw,664.3px); max-height: none; }
  #service-5 .service-large { height: min(31.23vw,599.6px); }
  .chevrons { width: 40px; height: 38px; margin: 16px auto 8px; }
  .chevrons svg { display: block; width: 100%; height: 100%; }
  .service-section:last-child { padding-bottom: 110px; }

  .module-layout { grid-template-columns: minmax(0,600px) minmax(0,728px); gap: 36px; min-height: 817px; }
  .module-section { padding-block: 110px; }
  .module-tabs { gap: 12px; }
  .module-tabs button { padding: 12px 18px; }
  .module-left > p { margin-bottom: 28px; }
  .module-tabs strong { font-size: 16px; }
  .module-panel { padding: 24px; }
  .module-panel .module-number { line-height: 1.5; }
  .module-panel h3 { font-size: 20px; line-height: 1.4; margin: 10px 0 16px; }
  .module-panel p { line-height: 1.8; }
  .module-panel ul { line-height: 1.7; margin: 18px 0; }
  .module-preview { padding: 13px; }
  .module-preview .preview-toolbar { margin-bottom: 8px; }
  .module-preview .module-metrics { gap: 6px; }
  .module-preview .metric { line-height: 1.4; padding: 6px 8px; }
  .module-preview .metric b { line-height: 1.5; }
  .demo-section { padding-top: 316px; }
  .demo-heading { font-size: 50px; }
  .demo-en { font-size: min(5.1vw,98px); margin-bottom: 0; }
  .footer-contact { padding-right: 34px; }
  .footer-logo { width: 218px; }
  .qr-row img { width: 109px; height: 109px; }
  .inquiry { padding-bottom: 102px; }
  .inquiry h2 { font-size: min(3.125vw,60px); }
}

/* Scale large artwork and spacing before the layout changes to mobile columns. */
@media (min-width: 1101px) and (max-width: 1550px) {
  .hero-home > .container { top: 39%; }
  [data-page="index"] .home-introduction { padding-block: 88px; }
  .home-about .prose { font-size: 14px; }
  .stats { padding-block: 90px; }
  .stats .stat { min-height: 165px; }
  .stat strong { font-size: 75px; }
  .stat p { font-size: 16px; }
  [data-page="index"] .home-products { padding-block: 95px; }
  .product-grid { gap: 35px; }
  .product-card h3 { font-size: 18px; }
  .home-modules { padding: 95px 0 120px; }
  .module-icon svg.module-symbol { width: 82px; height: 96px; }
  .module-icon p { font-size: 14px; }
  .home-news-list a { grid-template-columns: 60px minmax(0,1fr); }
  .home-news-list .news-category { display: none; }
  .detail-layout { grid-template-columns: minmax(0,2.45fr) minmax(0,1fr); gap: 80px; }
  .service-section .prose { font-size: 16px; max-width: 90%; }
  .company-principle { padding-bottom: 110px; }
  .culture-stage { padding-bottom: 380px; }
  .culture-cards { min-height: 360px; }
  .team-profile-inner { min-height: 600px; }
  .team-person { top: -84px; height: 712px; }
  .team-info { padding-top: 94px; }
  .team-info h2 { font-size: 30px; }
  .team-info h3 { font-size: 25px; }
  .team-info .prose { margin-top: 35px; font-size: 14px; }
  .qualifications { grid-template-columns: 210px 1fr; min-height: 800px; margin-bottom: 130px; }
  .qualification-display { padding: 45px; }
  .demo-section { padding-top: 175px; }
  .demo-heading { font-size: 38px; }
}
@media (max-width: 1100px) {
  .hero:not(.hero-home) .container { justify-content: flex-end; padding-bottom: 65px; }
  .hero-home .hero-en { margin: 12px 0 0; padding: 0; border: 0; }
  .hero-home h1 { order: -1; }
  .home-news-list .news-category { display: none; }
  .detail-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .headquarters figcaption { padding-inline: 5%; font-size: 14px; }
  .module-icon svg.module-symbol { width: 62px; height: 73px; }
}
@media (max-width: 800px) {
  .hero:not(.hero-home) { background-size: auto 100%; background-position: 36% center; }
  .hero:not(.hero-home) .container { padding-bottom: 56px; }
  .hero-home { background-size: cover; }
  .home-modules, .inquiry { background-size: cover; }
  .module-icon svg.module-symbol { width: 45px; height: 53px; margin-bottom: 15px; }
  .headquarters .about-factory { min-height: 0; height: auto; max-height: none; }
  .base-grid figcaption { padding: 6px 10px; }
  .detail-gallery img { height: 150px; }
  .hero-home .hero-en { order: 0; }
  .chevrons { width: 30px; height: 30px; }
}
@media (hover:hover) and (pointer:fine) {
  .module-icon:hover svg.module-symbol { color: var(--gold); }
}

/* Supplied artwork with the incumbent gold / blue palette and contextual wordmark. */
.brand-artwork { display: block; height: auto; background: transparent; padding: 0; transition: opacity 180ms ease; }
.brand .brand-artwork { width: 100%; }
.logo-wordmark-light { display: none; }
.home-header.header-ready:not(.is-scrolled) .logo-wordmark-dark,
.site-footer .logo-wordmark-dark { display: none; }
.home-header.header-ready:not(.is-scrolled) .logo-wordmark-light,
.site-footer .logo-wordmark-light { display: block; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-artwork { opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-artwork { transition: none; }
}

/* Use a complete Latin face for the English company name. */
.footer-bottom .company-english { font-family: Arial, "Helvetica Neue", sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; }

/* Mobile content photos share the full-width product-card alignment. */
@media (max-width: 800px) {
  .home-about > img { width: 100%; height: auto; max-height: none; }
  .home-news-feature { width: 100%; max-width: none; }
}
@media (max-width: 600px) {
  .product-grid,
  .case-grid,
  .detail-gallery,
  .article-body .image-pair,
  .related { grid-template-columns: minmax(0, 1fr); }

  .home-cases .case-mosaic {
    width: 90%;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .detail-gallery img,
  .article-body .image-pair img { height: auto; }

  .service-gallery { row-gap: 24px; }
  .service-gallery.design figure,
  .service-gallery.production figure,
  .service-gallery.install figure { width: 100%; }

  .headquarters { width: 90%; margin-inline: auto; }
  .qualification-display { padding-inline: 0; }
  .qualification-display .certificate-open { width: 100%; max-width: none; }

  .article-body .news-figure { width: 100%; max-width: none; }
  .article-body .news-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* Footer support credit uses the same restrained link treatment. */
.footer-bottom .technical-support { white-space: nowrap; }
.footer-bottom .technical-support a { text-underline-offset: 4px; }
.footer-bottom .technical-support a:hover,
.footer-bottom .technical-support a:focus-visible {
  color: var(--gold);
  text-decoration: underline;
}

/* Supplied originals are upright; do not apply the legacy license rotation. */
.certificate-image.document-image { rotate: 0deg; }
.qualification-display { min-width: 0; }
.certificate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.qualification-display .certificate-grid .certificate-open { width: 100%; max-width: none; }
.certificate-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 12px; background: #fff; }
.qualification-display .certificate-preview .document-image { width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; padding: 0; }
.qualification-display .certificate-open p { min-height: 52px; display: grid; place-items: center; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.qualification-tabs button { min-height: 52px; line-height: 1.6; }
.qualification-tabs button:focus-visible, .certificate-open:focus-visible, .certificate-page-controls button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.certificate-viewer { min-width: 0; }
.media-dialog:has(.certificate-viewer) h2 { padding-right: 22px; font-size: clamp(20px, 2vw, 28px); line-height: 1.5; overflow-wrap: anywhere; }
.media-dialog .certificate-document-page { display: block; width: 100%; height: auto; max-height: 60vh; margin: 0 auto; object-fit: contain; }
.certificate-page-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; font-size: 14px; }
.certificate-page-controls span { min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.certificate-page-controls button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font: inherit; transition: color .2s, background-color .2s; }
.certificate-page-controls button:hover:not(:disabled), .certificate-page-controls button:focus-visible { background: var(--blue); color: #fff; }
.certificate-page-controls button:disabled { opacity: .45; cursor: default; }
.certificate-original-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 12px; }
.certificate-original-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.certificate-original-link:hover, .certificate-original-link:focus-visible { color: var(--gold); }
@media (max-width: 800px) {
  .certificate-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .qualification-tabs button { flex: 0 0 auto; width: auto; }
  .qualification-display .certificate-open p { font-size: 15px; }
  .media-dialog .certificate-document-page { max-height: 55vh; }
  .certificate-page-controls { gap: 10px; }
}