/* TOJEN Warm Trail interface refresh — presentation only, content remains intact. */
:root {
  --midnight:#10212a; --deep:#1c2a30; --ink:#1c272c; --paper:#f5f3ef;
  --warm:#e8edf0; --warm-2:#dfe6ea; --surface:#fcfbf8;
  --teal:#315f72; --teal-light:#9ab9c5; --orange:#cf613e;
  --line:#d5dadd; --muted:#647079; --max:1240px;
}
html { scroll-padding-top:150px; }
body { color:var(--ink); background:var(--paper); font-size:16px; line-height:1.65; }
.wrap,.container { width:min(var(--max),calc(100% - 48px)); margin-inline:auto; }

/* The logo is Home; five task-based routes replace product/market one-offs. */
.site-header { position:relative; z-index:40; color:#fff; background:#0d1a20; border-bottom:1px solid rgba(255,255,255,.1); }
.site-header .nav { min-height:76px; gap:26px; }
.site-header .brand img { width:118px; height:auto; }
.site-header .nav-links { gap:clamp(13px,1.65vw,24px); color:#edf1ef; font-size:13px; letter-spacing:.01em; }
.site-header .nav-links a { position:relative; padding:28px 0 25px; }
.site-header .nav-links a::after { position:absolute; right:0; bottom:19px; left:0; height:2px; content:""; background:var(--teal-light); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.site-header .nav-links a:hover::after,.site-header .nav-links a:focus-visible::after { transform:scaleX(1); }
.site-header .button,.site-header .nav-cta { min-height:42px; padding-inline:18px; border:0; border-radius:999px; background:var(--orange); box-shadow:none; font-size:13px; }

/* Cinematic dark navigation, then immediately into a light reading surface. */
main .hero,main .page-hero,main .detail-hero { border-bottom:1px solid var(--line); }
main .page-hero,main .detail-hero { color:var(--ink); background:radial-gradient(circle at 88% 18%,rgba(94,131,148,.16),transparent 34%),linear-gradient(135deg,#faf8f4 0%,#e9eef0 100%); }
main .page-hero h1,main .detail-hero h1 { color:var(--ink); }
main .page-hero h1 span,main .detail-hero h1 span { color:var(--teal); }
main .page-hero .lede,main .detail-hero .detail-description,main .detail-hero .disclaimer { color:var(--muted); }
main .page-hero .button.ghost,main .page-hero .button.secondary { color:var(--ink); border-color:#bcae9e; }
main .hero-inner,main .page-hero-inner { min-height:0; padding-top:58px; padding-bottom:62px; }
main h1 { max-width:920px; font-size:clamp(42px,5.2vw,76px); line-height:1.04; letter-spacing:-.045em; }
main h2,.section-head h2,.platform-details h2,.quote-grid h2 { max-width:820px; font-size:clamp(30px,3.5vw,48px); line-height:1.1; letter-spacing:-.035em; }
main h3 { line-height:1.2; letter-spacing:-.02em; }
main .lede { max-width:720px; font-size:1.06rem; line-height:1.72; }
main .eyebrow,main .eyebrow.light { color:var(--teal); font-size:12px; letter-spacing:.15em; }
.hero .eyebrow.light,.dark .eyebrow.light { color:var(--teal-light); }

/* Page-level map: keep visitors on one page and jump to the needed answer. */
.section-nav { position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line); background:rgba(251,250,247,.95); box-shadow:0 8px 24px rgba(31,42,45,.05); backdrop-filter:blur(14px); }
.section-nav-inner { display:flex; min-height:58px; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; }
.section-nav-inner::-webkit-scrollbar { display:none; }
.section-nav a { flex:0 0 auto; padding:9px 14px; border-radius:999px; color:var(--muted); font-size:13px; font-weight:750; white-space:nowrap; }
.section-nav a:hover,.section-nav a:focus-visible,.section-nav a.is-key { color:var(--ink); background:#e0e9ed; }
.section-nav a.is-key { color:#264f61; }

/* A predictable section rhythm makes the dense B2B content scannable. */
.page-section,.section { padding:72px 0; }
.page-section.warm,.section.warm { background:var(--warm); }
.section-head { align-items:start; gap:48px; margin-bottom:34px; }
.section-head > div { max-width:780px; }
.section-head > p,.section-head > .lede { max-width:400px; color:var(--muted); line-height:1.7; }
.section-head .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:13px; }
.section-head .eyebrow::before { width:24px; height:2px; content:""; background:var(--teal); }

/* Shape and whitespace separate cards; grid borders no longer create visual noise. */
.family-grid,.info-grid,.proof-grid,.product-grid,.rec-grid,.card-grid,.component-grid,.market-grid,.resources { gap:18px !important; border:0 !important; background:transparent !important; }
.family-card,.info-card,.proof-card,.product-card,.rec-card,.card,.component-card,.market-card,.resource-row,.related-card,.decision-card,.answer-block,.rfq-card,.config-visual,.visual,.spec,.note-box {
  overflow:hidden; border:1px solid var(--line) !important; border-radius:14px !important; background:var(--surface) !important; box-shadow:0 10px 30px rgba(31,42,45,.045);
}
.family-card,.info-card,.proof-card,.card,.market-card { padding:26px; }
.family-card:hover,.product-card:hover,.rec-card:hover,.market-card:hover { border-color:#9db5c0 !important; box-shadow:0 14px 36px rgba(31,42,45,.08); transform:translateY(-2px); transition:.2s ease; }
.family-card span,.rec-tag,.product-family,.market-tag,.status { color:var(--teal) !important; }

/* Coral is reserved for the one primary next action. */
.button,.nav-cta { border-radius:999px; box-shadow:none; }
.button.primary,main .button:not(.ghost):not(.secondary),main button.button { color:#fff; background:var(--orange); border-color:var(--orange); }
main .button.ghost,main .button.secondary { color:var(--ink); background:transparent; border:1px solid #bcae9e; }
.button:hover { filter:brightness(.96); transform:translateY(-1px); }

/* Long-form, FAQs and procurement tables. */
.answer-block,.note-box { max-width:980px; }
.answer-block { border-left:4px solid var(--teal) !important; }
.table-scroll { border-color:var(--line); border-radius:14px; background:var(--surface); }
table.data thead th { background:var(--warm); }
details.faq-item { border-color:var(--line); }
details.faq-item summary { min-height:58px; }
.crumbs { color:var(--muted); }
.crumbs a:hover { color:var(--teal); }

/* Catalog 55 specifications become a clear, direct destination. */
body[data-page="catalog-55"] #specifications { background:#e4ebee; }
body[data-page="catalog-55"] #specifications .section-head::after { display:inline-flex; align-self:flex-start; padding:7px 11px; border-radius:999px; color:#264f61; background:#d2e0e6; content:"13 published fields"; font-size:12px; font-weight:800; white-space:nowrap; }

/* Dark zones are scarce and warm, used only for decisive actions. */
main .dark,main .cta { color:#f3f6f7; background:#122630; }
main .dark h2,main .dark h3,main .cta h2 { color:#fff; }
main .dark p,main .dark .lede,main .dark .section-head > p { color:#c0ccca; }
main .home-cta { position:relative; padding-top:112px; background:linear-gradient(180deg,var(--paper) 0,#aebcc2 14%,#38505b 28%,#122630 46%); }
main .home-cta::before { position:absolute; inset:0 0 auto; height:64px; content:""; background:linear-gradient(180deg,rgba(245,243,239,.98),rgba(223,230,234,.12),transparent); pointer-events:none; }
footer { color:#d5dee2; background:#0b171d; border-top:1px solid rgba(255,255,255,.09); }

/* Page-to-page colour continuity. */
body[data-page="home"] main > .hero::after { position:absolute; z-index:1; right:0; bottom:0; left:0; height:86px; content:""; background:linear-gradient(180deg,transparent,rgba(245,243,239,.18)); pointer-events:none; }
body[data-page="sourcing"] main > .hero { color:#fff; background:linear-gradient(180deg,#10212a 0%,#17303b 74%,#dfe6ea 100%); }
body[data-page="sourcing"] main > .hero h1 { color:#fff; }
body[data-page="sourcing"] main > .hero h1 span { color:#abc5ce; }
body[data-page="sourcing"] main > .hero .lede { color:#d7e1e4; }

/* Configuration and enquiry areas are light workspaces, not another dark wall. */
main .configurator { color:var(--ink); background:linear-gradient(180deg,var(--paper) 0%,#e7ecee 24%,#edf1f2 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
main .configurator h2,main .configurator h3 { color:var(--ink); }
main .configurator .eyebrow.light { color:var(--teal); }
main .configurator .section-head > p,main .configurator .lede,main .configurator p { color:var(--muted); }
main .configurator .config-panel { color:var(--ink); }
main .configurator .config-step { border-color:var(--line); }
main .configurator .choice { color:var(--ink); border-color:var(--line); background:var(--surface); }
main .configurator .choice span { color:var(--muted); }
main .configurator .choice:hover,main .configurator .choice.is-selected { color:var(--ink); border-color:#91aeba; background:#e0e9ed; }
main .configurator .config-summary { border-color:var(--line); background:rgba(252,251,248,.72); }
main .configurator .config-visual { background:var(--surface) !important; }

main .rfq { color:var(--ink); background:linear-gradient(180deg,#edf1f2 0%,#e4eaed 65%,var(--paper) 100%); border-top:1px solid var(--line); }
main .rfq h2,main .rfq h3 { color:var(--ink); }
main .rfq .eyebrow.light { color:var(--teal); }
main .rfq .lede,main .rfq .rfq-points { color:var(--muted); }
main .rfq .rfq-card { color:var(--ink); background:var(--surface) !important; }
main .rfq label { color:var(--ink); }
main .rfq input,main .rfq select,main .rfq textarea { color:var(--ink); border-color:#bac5c9; background:#fff; }

/* Secondary action contrast inside the remaining dark CTA. */
main .dark .button.ghost,main .home-cta .button.ghost { color:#f3f6f7; border-color:#82979f; background:transparent; }
main .dark .button.ghost:hover,main .home-cta .button.ghost:hover { border-color:#b9c9cf; background:rgba(255,255,255,.06); }

/* Light product heroes must not inherit the previous dark-hero text colours. */
main .page-hero .hero-proof { color:var(--ink); border-color:var(--line); }
main .page-hero .hero-proof strong { color:var(--ink); }
main .page-hero .hero-proof small,main .page-hero .scene-note { color:var(--muted); }
main .page-hero .proof-symbol,main .page-hero .scene-index { color:var(--teal); }
main .page-hero .scene-chips a { color:var(--ink); border-color:var(--line); background:rgba(252,251,248,.72); }
main .page-hero .scene-chips a span { color:var(--teal); }
main .page-hero .scene-chips a:hover { border-color:#9db5c0; background:#fff; }
main .page-hero .scene-chips a.is-active { color:#fff; border-color:var(--midnight); background:var(--midnight); }
main .page-hero .scene-chips a.is-active span { color:var(--teal-light); }

@media (max-width:1100px) {
  .site-header .nav-links,.site-header .nav > .button,.site-header .nav-cta { display:none; }
  .site-header .menu-toggle,.site-header .menu-button { display:block; margin-left:auto; color:#fff; border:0; background:transparent; font-size:26px; }
  .site-header .mobile-nav.is-open { display:grid; gap:0; padding:12px 24px 22px; background:var(--midnight); }
  .site-header .mobile-nav a { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); }
}
@media (max-width:760px) {
  .wrap,.container,.site-header .wrap,footer .wrap,main .page-hero-inner { width:calc(100% - 32px); }
  .site-header .nav { min-height:68px; }
  .site-header .brand img { width:100px; }
  main .hero-inner,main .page-hero-inner { padding-top:46px; padding-bottom:46px; }
  main h1 { font-size:clamp(38px,12vw,56px); overflow-wrap:anywhere; }
  main h2,.section-head h2 { font-size:clamp(28px,8vw,38px); }
  .section-nav-inner { width:100%; padding-inline:16px; }
  .page-section,.section { padding:52px 0; }
  .section-head { display:block; margin-bottom:26px; }
  .section-head > p,.section-head > .lede { margin-top:14px; }
  .family-grid,.info-grid,.proof-grid,.product-grid,.rec-grid,.card-grid,.component-grid,.market-grid,.resources { grid-template-columns:minmax(0,1fr) !important; }
  .family-card,.info-card,.proof-card,.card,.market-card { padding:22px; }
  .button { max-width:100%; text-align:center; }
  main .home-cta { padding-top:92px; }
}

/* ------------------------------------------------------------------
   Responsive hardening: wide desktop, laptop, tablet and small phone.
   These rules intentionally sit last so legacy page-level CSS cannot
   force desktop geometry back onto smaller screens.
   ------------------------------------------------------------------ */
img,video,svg { max-width:100%; }
img,video { height:auto; }
main,main section,.wrap,.container,.hero-copy,.section-head > * { min-width:0; }

@media (min-width:1800px) {
  :root { --max:1320px; }
  body { font-size:17px; }
  main h1 { font-size:clamp(58px,4.2vw,82px); }
}

@media (max-width:1180px) {
  .site-header .nav-links,.site-header .nav > .button,.site-header .nav-cta { display:none; }
  .site-header .menu-toggle,.site-header .menu-button { display:block; margin-left:auto; }
  .site-header .nav { width:min(100% - 40px,var(--max)); }
  .site-header .mobile-nav.is-open { display:grid; }
  .component-grid,.market-grid,.rec-grid,.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width:900px) {
  .wrap,.container,.site-header .wrap,footer .wrap { width:calc(100% - 40px); }
  main .page-hero-inner,main .hero-inner,main .detail-grid,
  .platform-details,.quote-grid,.config-layout,.rfq-layout,.zones-layout,
  .media-row,.home-cta-inner,.solutions-layout,.case-layout {
    grid-template-columns:minmax(0,1fr) !important;
  }
  main .page-hero-inner,main .hero-inner { display:block !important; }
  main .page-hero .hero-copy,main .hero .hero-copy { width:100%; max-width:760px; }
  main .page-hero .hero-scene { margin-top:34px; }
  main h1 { max-width:820px; font-size:clamp(42px,8vw,64px); }
  .section-head { display:block; }
  .section-head > p,.section-head > .lede { max-width:680px; margin-top:15px; }
  .hero-actions,.detail-actions,.home-cta-actions { display:flex; flex-wrap:wrap; gap:12px; }
  .section-nav-inner { width:100%; padding-inline:20px; }
  .table-scroll,.spec-table { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.data { min-width:720px; }
  .footer-row { grid-template-columns:1fr 1fr !important; gap:30px; }
}

@media (max-width:640px) {
  body { font-size:15px; }
  .wrap,.container,.site-header .wrap,footer .wrap,main .page-hero-inner { width:calc(100% - 28px); }
  .site-header .nav { width:calc(100% - 28px); min-height:66px; }
  .site-header .brand img { width:92px; }
  .site-header .menu-toggle,.site-header .menu-button { position:relative; z-index:2; display:block !important; flex:0 0 auto; margin-left:auto; }
  .site-header .mobile-nav.is-open { position:absolute; inset:66px 0 auto; padding:10px 18px 20px; }
  main .hero,main .hero-inner { min-height:0 !important; }
  main .hero-inner,main .page-hero-inner { padding-top:42px !important; padding-bottom:44px !important; }
  main .hero-copy { width:100%; max-width:100%; overflow:hidden; }
  main .hero h1,main .page-hero h1,main .detail-hero h1 {
    width:100%; max-width:100%; font-size:clamp(36px,10.8vw,48px) !important;
    line-height:1.04; overflow-wrap:anywhere; text-wrap:balance;
  }
  main .page-hero h1 .title-line { white-space:normal !important; }
  main h2,.section-head h2 { font-size:clamp(27px,8vw,36px); overflow-wrap:anywhere; }
  main h3 { overflow-wrap:anywhere; }
  main .lede { font-size:1rem; }
  .page-section,.section { padding:46px 0; }
  .section-nav-inner { min-height:52px; padding-inline:14px; }
  .section-nav a { padding:8px 11px; font-size:12px; }
  .hero-actions,.detail-actions,.home-cta-actions,.cta-inner { align-items:stretch; flex-direction:column; }
  .hero-actions .button,.detail-actions .button,.home-cta-actions .button,.cta-inner .button { width:100%; }
  .component-grid,.market-grid,.rec-grid,.product-grid,.family-grid,.info-grid,
  .proof-grid,.card-grid,.resources,.spec-grid,.rfq-grid,.config-fields {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .family-card,.info-card,.proof-card,.card,.market-card { min-height:0; padding:20px; }
  .scene-chips { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .scene-chips a { min-width:0; padding-inline:12px !important; font-size:12px !important; }
  .scene-frame { aspect-ratio:4/3; }
  .spec-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .spec-strip > div { min-width:0; padding:16px 12px !important; }
  .spec-strip strong { font-size:1rem; }
  .spec-strip span { font-size:.7rem; overflow-wrap:anywhere; }
  .answer-block,.note-box,.cta-band,.rfq-card { padding:21px 18px; }
  .doc-list li { grid-template-columns:minmax(0,1fr); }
  .footer-row,.footer-legal { display:flex !important; align-items:flex-start; flex-direction:column; gap:18px; }
  .footer-links { display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; }
  input,select,textarea { width:100%; max-width:100%; font-size:16px; }
  .step-actions { align-items:stretch; flex-direction:column-reverse; }
  .step-actions .button { width:100%; }
}

@media (max-width:380px) {
  main .hero h1,main .page-hero h1,main .detail-hero h1 { font-size:34px !important; }
  .scene-chips,.footer-links { grid-template-columns:minmax(0,1fr) !important; }
  .section-nav a { font-size:11.5px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}