/* Shared visual language for TOMIRY product and contact pages.
   Colours, photography, wordmark, and footer follow the approved homepage. */
:root {
  --navy: #08284e;
  --teal: #087f95;
  --teal-deep: #064c60;
  --teal-wash: #edf7f8;
  --ground: #fff;
  --ground-2: #f5f8f9;
  --surface-2: #f5f9fa;
  --ink: #08284e;
  --ink-2: #36526b;
  --ink-3: #586e80;
  --line: #d6dfe4;
  --line-strong: #aebec8;
  --band: #06445a;
  --band-2: #06445a;
  --on-band-2: #d6e7ed;
  --brand: #087e8e;
  --brand-ink: #064c60;
  --brand-wash: #edf7f8;
  --brand-lift: #81c2c0;
  --nano: #087f95; --nano-wash: #edf7f8; --nano-ink: #06566c;
  --hydro: #005631; --hydro-wash: #edf5ef; --hydro-ink: #005631;
  --seal: #ee5900; --seal-wash: #fff4eb; --seal-ink: #a23c00;
  --pyro: #064cac; --pyro-wash: #edf3fc; --pyro-ink: #064cac;
  --plim: #472071; --plim-wash: #f3eff8; --plim-ink: #472071;
  --good: #075332;
  --f-body: 'Anuphan', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --f-display: 'Anuphan', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --col: 1104px;
  --r: 18px;
  --shadow: 0 3px 12px #08284e08;
  --shadow-lift: 0 8px 30px #08284e0c;
}
html { background: #edf3f5; scroll-padding-top: 124px; }
body.interior-page { max-width: 1200px; margin-inline: auto; background: #fff; }
.rise { opacity: 1; transform: none; }
.wrap { width: min(100% - 64px, var(--col)); }
h1, h2, h3, h4 { font-weight: 700; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-icon { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid #c7953e; outline-offset: 4px; }
.btn { min-height: 46px; border-radius: 12px; padding: 11px 21px; justify-content: center; }
.btn-solid { background: var(--acc-ink); box-shadow: none; }
.btn-solid:hover { background: var(--acc); box-shadow: var(--shadow-lift); }
.btn-outline { color: var(--acc-ink); border-color: var(--acc); }
.text-link { display: inline-flex; gap: 12px; margin-top: 24px; font-weight: 600; color: var(--acc-ink); text-underline-offset: 5px; }

/* The compact version of the homepage's stacked wordmark. */
.brand-mark { width: 168px; display: flex; flex: none; align-items: center; flex-direction: column; color: var(--brand); text-decoration: none; }
.brand-mark > svg { width: 39px; height: 39px; stroke-width: 2.7; }
.brand-mark > span { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: 1.8px; line-height: 1.1; }
.brand-mark > small { color: var(--teal-deep); font-size: 8px; font-weight: 600; line-height: 1.15; letter-spacing: .3px; text-align: center; margin-top: 3px; }
.nav { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--line); }
.nav::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--nano) 20%, var(--hydro) 20% 40%, var(--seal) 40% 60%, var(--pyro) 60% 80%, var(--plim) 80%); }
.nav-in { height: 110px; gap: 18px; }
.nav-links > a, .drop > button { color: var(--navy); padding: 10px 11px; }
.nav-cta { background: var(--teal-deep); font-size: 13px; margin-left: 0; padding-inline: 16px; }
.drop-menu a[aria-current='page'] { background: var(--acc-wash); }
.drop-menu span { color: var(--ink-2); }
.drop-menu { min-width: 310px; }
.burger { min-width: 44px; min-height: 44px; }
.sheet { inset: 113px 0 auto; height: calc(100dvh - 113px); max-width: 1200px; margin-inline: auto; }
.sheet a[aria-current='page'] { background: var(--acc-wash); color: var(--acc-ink); }
.sheet a span { max-width: 48%; }
@media (min-width: 901px) { .nav-links { display: flex; } .nav-cta { display: inline-flex; } .burger { display: none; } }
@media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .burger { display: block; } }

/* Product photography is the same source used in the five homepage cards. */
.sol-hero { padding: 40px 0 36px; background: linear-gradient(105deg, #fff 50%, var(--acc-wash)); border: 0; }
.sol-hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.crumb { font-family: var(--f-body); letter-spacing: .02em; font-size: 12px; margin-bottom: 25px; }
.crumb a { color: var(--teal-deep); }
.sol-hero h1 { font-size: clamp(34px, 4.5vw, 51px); line-height: 1.18; letter-spacing: -.02em; text-wrap: initial; }
.sol-hero .name { font-family: var(--f-display); font-size: 23px; letter-spacing: .015em; color: var(--acc-ink); margin-bottom: 15px; }
.sol-hero .name::after { content: ''; display: block; width: 130px; height: 1px; background: linear-gradient(90deg, var(--acc), #dcb265); margin-top: 16px; }
.sol-hero p.lede { font-size: 16px; line-height: 1.8; margin-top: 22px; }
.sol-hero .btn-row { margin-top: 25px; gap: 10px; }
.product-visual { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; box-shadow: var(--shadow-lift); }
.product-photo, .contact-photo { position: relative; height: 325px; overflow: hidden; background: var(--acc-wash); }
.product-photo img { position: absolute; max-width: none; width: calc(1024 / var(--photo-w) * 100%); height: calc(1536 / 193 * 100%); left: calc(var(--photo-x) / var(--photo-w) * -100%); top: calc(792 / 193 * -100%); }
.contact-photo img { position: absolute; max-width: none; width: calc(1024 / 490 * 100%); height: calc(1536 / 350 * 100%); left: calc(534 / 490 * -100%); top: 0; }
.product-visual figcaption { display: flex; align-items: center; gap: 14px; min-height: 82px; background: var(--acc); color: #fff; padding: 16px 22px; }
.product-visual figcaption b { display: block; font-size: 19px; line-height: 1.2; font-weight: 700; }
.product-visual figcaption small { display: block; font-size: 14px; margin-top: 4px; }
.product-visual figcaption .brand-icon { width: 39px; height: 43px; --leaf-vein: var(--acc); }
.better-world { position: absolute; top: 20px; right: 20px; width: 103px; aspect-ratio: 1; border-radius: 50%; border: 2px solid #dcaf5e; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--teal-deep); box-shadow: 0 3px 12px #08284e18; }
.better-world > b { font-size: 20px; line-height: 1.4; }
.better-world > span { font-size: 10px; line-height: 1.5; text-align: center; font-weight: 600; }
.better-world > svg { position: absolute; top: -7px; right: -6px; width: 31px; height: 31px; background: white; border-radius: 50%; color: var(--brand); transform: rotate(20deg); }

/* Five colour-coded links repeat the homepage's solution order and icons. */
.solution-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding-top: 8px; padding-bottom: 24px; }
.solution-rail a { min-width: 0; display: flex; align-items: center; gap: 9px; position: relative; padding: 16px 11px; border: 1px solid var(--line); border-bottom: 4px solid var(--acc); border-radius: 12px; text-decoration: none; color: var(--acc-ink); transition: background .2s, border-color .2s; }
.solution-rail a:hover, .solution-rail a[aria-current='page'] { background: var(--acc-wash); border-color: var(--acc); }
.solution-rail a[aria-current='page']::before { content: ''; position: absolute; top: 9px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.solution-rail .brand-icon { width: 30px; height: 35px; }
.solution-rail b { display: block; font-size: 14px; line-height: 1.25; white-space: nowrap; }
.solution-rail small { display: block; font-size: 11px; color: var(--navy); line-height: 1.4; margin-top: 5px; }
.rail-arrow { position: absolute; right: 7px; bottom: 6px; font-size: 12px; opacity: 0; }
.solution-rail a:hover .rail-arrow { opacity: 1; }

/* White cards, fine borders, and coloured details carry through the content. */
.band-sec { padding: 52px 0; }
.sec-head { margin-bottom: 28px; }
.sec-head h2 { font-size: clamp(27px, 3.2vw, 35px); line-height: 1.3; }
.eyebrow { font-family: var(--f-body); font-size: 12px; font-weight: 600; color: var(--acc-ink); letter-spacing: .08em; margin-bottom: 10px; }
.eyebrow::before { background: linear-gradient(90deg, var(--acc), #dcb265); width: 30px; height: 1px; }
.card { border-color: var(--line); border-top: 3px solid var(--acc); box-shadow: var(--shadow); }
.card h3 { font-size: 20px; }
.problem-icon { color: var(--acc); margin-bottom: 4px; }
.problem-icon svg { width: 42px; height: 42px; }
.sign { border-radius: 14px; padding: 20px; color: var(--navy); }
.sign i { width: 28px; height: 28px; border-radius: 50%; font-family: var(--f-body); color: var(--acc-ink); }
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; box-shadow: none; border-radius: 0; gap: 16px; background: transparent; }
.benefit { grid-template-columns: 1fr; gap: 16px; padding: 26px; border: 1px solid var(--line) !important; border-bottom: 5px solid var(--acc) !important; border-radius: 16px; background: white; }
.benefit .n { color: var(--acc-ink); font-family: var(--f-body); font-size: 28px; line-height: 1; }
.benefit h4 { line-height: 1.6; }
.quote { border-inline-start-width: 3px; padding: 25px 28px; }
.area { border-radius: 10px; padding: 10px 17px; color: var(--navy); }
.instrument-section { background: #f5f9fa; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.instrument-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 42px; align-items: center; }
.instrument-layout .sec-head { margin: 0; }
.gate-title { font-family: var(--f-body); letter-spacing: .05em; }
.gate-title b { font-size: 16px; }
.gate-note { color: var(--ink-2); }
.readout, .calc, .shot { border-color: var(--line-strong); }
.shot-tag { font-family: var(--f-body); color: var(--navy); }
.certs-strip .t, .card-key, .rec-flag { font-family: var(--f-body); }
.seg button, .seg-light button { min-height: 42px; }
.ct-card { border-top: 4px solid var(--teal); }
.ct-list .lbl { width: 70px; font-family: var(--f-body); }
.ct-list a, .ct-list span.val { font-family: var(--f-body); }
.step .n { font-family: var(--f-body); font-size: 22px; }
.offer { border-color: var(--line); border-top: 3px solid var(--acc); background: #fff; }
.contact-page .sol-hero h1 { max-width: 11em; }

/* The closing contact band matches the homepage. */
.cta { padding: 48px 0; margin: 0; background: #f2f7f8; color: var(--navy); border-top: 1px solid var(--line); }
.cta::before { display: none; }
.cta h2 { color: var(--teal-deep); font-size: clamp(27px, 3.3vw, 37px); max-width: 26ch; }
.cta p, .cta .contact-line { color: var(--ink-2); }
.cta .eyebrow { color: var(--acc-ink); }
.cta .btn-on-dark { color: var(--teal-deep); border-color: var(--teal-deep); background: white; }
.cta .btn-on-dark:hover { background: var(--teal-wash); }
.cta .contact-line { font-family: var(--f-body); margin-top: 10px; gap: 12px 26px; }
.cta .contact-line a:hover { color: var(--acc-ink); }
.site-footer { background: #06445a; color: white; padding: 25px 0; }
.footer-grid { display: grid; grid-template-columns: 180px 1.25fr 1fr; align-items: center; gap: 30px; }
.brand-mark-white, .brand-mark-white > small { color: white; }
.footer-contact { border-left: 1px solid #9eb9c4; border-right: 1px solid #9eb9c4; padding-inline: 30px; display: flex; flex-direction: column; gap: 4px; }
.footer-contact h2 { font-size: 20px; line-height: 1.4; color: white; }
.footer-contact a { display: inline-flex; align-items: center; gap: 9px; width: fit-content; font-size: 16px; text-decoration: none; white-space: nowrap; }
.footer-contact h2 a { font-size: inherit; }
.footer-contact svg { width: 20px; height: 20px; stroke-width: 2; }
.footer-online { display: flex; flex-wrap: wrap; gap: 5px 18px; }
.footer-online a { font-size: 14px; }
.footer-message { font-size: 16px; line-height: 1.7; }
.footer-message svg { width: 24px; height: 24px; color: #64b093; vertical-align: middle; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-note { color: #d6e7ed; font-size: 11px; line-height: 1.7; margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff30; }

@media (max-width: 1050px) {
  .sol-hero-in { gap: 30px; }
  .solution-rail a { flex-direction: column; align-items: flex-start; padding: 12px; gap: 8px; }
  .solution-rail b { font-size: 13px; }
  .footer-grid { grid-template-columns: 155px 1.2fr 1fr; gap: 20px; }
  .footer-contact { padding-inline: 20px; }
  .footer-message { font-size: 14px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 110px; }
  .nav-in { height: 93px; }
  .brand-mark { width: 148px; }
  .brand-mark > svg { width: 33px; height: 33px; }
  .brand-mark > span { font-size: 28px; }
  .brand-mark > small { font-size: 7px; }
  .sheet { top: 96px; height: calc(100dvh - 96px); }
  .sol-hero-in { grid-template-columns: 1fr 1fr; gap: 25px; }
  .sol-hero h1 { font-size: 36px; }
  .sol-hero .name { font-size: 19px; }
  .sol-hero p.lede { font-size: 15px; }
  .product-photo, .contact-photo { height: 290px; }
  .product-visual figcaption { padding: 15px; gap: 9px; }
  .product-visual figcaption small { font-size: 12px; }
  .instrument-layout { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 130px 1fr; gap: 24px; }
  .footer-contact { border-right: 0; }
  .footer-message { grid-column: 1 / -1; border-top: 1px solid #ffffff30; padding-top: 20px; text-align: center; font-size: 16px; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 36px); }
  body { font-size: 15.5px; }
  .sol-hero { padding: 25px 0 24px; }
  .sol-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sol-hero h1 { font-size: clamp(32px, 8.3vw, 43px); }
  .sol-hero .name { font-size: 21px; }
  .crumb { margin-bottom: 20px; }
  .sol-hero p.lede { font-size: 16px; }
  .btn-row > a { flex: 1 1 auto; }
  .product-photo, .contact-photo { height: 280px; }
  .product-visual figcaption { padding: 16px 19px; }
  .product-visual figcaption small { font-size: 13px; }
  .solution-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 28px; }
  .solution-rail a { flex-direction: row; align-items: center; gap: 9px; padding: 13px 10px; }
  .solution-rail a:last-child { grid-column: 1 / -1; }
  .solution-rail b { font-size: 12px; }
  .solution-rail small { font-size: 10px; }
  .solution-rail .brand-icon { width: 26px; height: 31px; }
  .band-sec { padding: 36px 0; }
  .sec-head h2 { font-size: 28px; }
  .sec-head p { font-size: 15px; }
  .benefits { grid-template-columns: 1fr; }
  .benefit { grid-template-columns: 38px 1fr; padding: 21px; gap: 16px; border-bottom-width: 3px !important; }
  .benefit .n { font-size: 24px; }
  .card h3 { font-size: 20px; }
  .instrument-layout { gap: 24px; }
  .gate { padding: 20px 16px; }
  .gate-top { align-items: stretch; }
  .seg { width: fit-content; align-self: flex-start; }
  .gate .row { grid-template-columns: 76px minmax(0, 1fr) 46px; gap: 8px; }
  .row-lab b { font-size: 10px; }
  .row-val { font-size: 12px; }
  .gate-foot b { font-size: 16px; }
  .ct-card { padding: 23px 19px; }
  .ct-list li { gap: 10px; }
  .ct-list .lbl { width: 60px; font-size: 10px; }
  .ct-list a, .ct-list span.val { font-size: 15px; }
  .out-row { flex-wrap: wrap; gap: 4px 12px; }
  .out-row .v { font-size: 25px; }
  .cta { padding: 36px 0; }
  .contact-row { width: 100%; gap: 10px; }
  .contact-row .btn { max-width: 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .footer-grid .brand-mark { margin-inline: auto; width: 160px; }
  .footer-grid .brand-mark > svg { width: 43px; height: 43px; }
  .footer-grid .brand-mark > span { font-size: 34px; }
  .footer-grid .brand-mark > small { font-size: 9px; }
  .footer-contact { border-left: 0; border-top: 1px solid #ffffff50; border-bottom: 1px solid #ffffff50; padding: 20px 0; align-items: center; gap: 8px; }
  .footer-online { justify-content: center; gap: 8px 16px; }
  .footer-message { grid-column: auto; border: 0; padding: 0; }
  .footer-note { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .solution-rail a { transition: none; } }