/* Page components: home value strip, footer on phones, QR block. Motion is optional polish (off for "reduce motion"). */

/* ---------- Home: value strip (Sustainable Growth / Reliable Partnerships / ...) ---------- */
#values .value-item { --accent:#008855; cursor:default; position:relative; transition:color .25s ease, border-color .25s ease; }
/* hover fill as its own layer behind the content; it covers the WHOLE cell (full strip height, between the divider lines) */
#values .value-item::before { content:""; position:absolute; inset:0; background:transparent; transition:background-color .25s ease; pointer-events:none; }
#values .value-item > * { position:relative; }
@media (min-width:561px) {
  #values .page-shell { padding-block:0 !important; align-items:stretch; }
  #values .value-item { padding-block:21px; min-height:93px; }
}
#values .value-item:nth-child(2) { --accent:#0875b4; }
#values .value-item:nth-child(3) { --accent:#b8620c; }
#values .value-item:nth-child(4) { --accent:#0f766e; }
#values .value-item svg { transform-origin:50% 50%; transition:color .25s ease; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes v-sway  { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(7deg) translateY(-2px); } }
  @keyframes v-spin  { to { transform:rotate(360deg); } }
  @keyframes v-bars  { 0%,100% { transform:scaleY(.92); } 50% { transform:scaleY(1.06); } }
  @keyframes v-float { 0%,100% { transform:translateY(1px); } 50% { transform:translateY(-3px); } }
  #values .value-item:nth-child(1) svg { animation:v-sway 5s ease-in-out infinite; }
  #values .value-item:nth-child(2) svg { animation:v-spin 26s linear infinite; }
  #values .value-item:nth-child(3) svg { animation:v-bars 3.4s ease-in-out infinite; transform-origin:50% 100%; }
  #values .value-item:nth-child(4) svg { animation:v-float 3.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  #values .value-item:hover { color:#fff; border-left-color:transparent; }
  #values .value-item:hover + .value-item { border-left-color:transparent; }
  #values .value-item:hover::before { background-color:var(--accent); }
  #values .value-item:hover svg { color:#fff; }
  #values .value-item:nth-child(1):hover svg { animation-duration:1.8s; }
  #values .value-item:nth-child(2):hover svg { animation-duration:5s; }
  #values .value-item:nth-child(3):hover svg { animation-duration:1.2s; }
  #values .value-item:nth-child(4):hover svg { animation-duration:1.6s; }
}
/* phones: icon above the text, centred, so every cell lines up */
@media (max-width:560px) {
  #values .page-shell { row-gap:6px; padding-block:14px; }
  #values .value-item { flex-direction:column; gap:8px !important; text-align:center; padding:12px 6px; }
  #values .value-item svg { width:40px; height:40px; }
  #values .value-item span { font-size:14px; line-height:1.35; }
  #values .value-item:nth-child(n+3) { border-top:1px solid #cbd8e3; }
  #values .value-item:nth-child(even) { border-left:1px solid #cbd8e3 !important; }
}

/* ---------- Footer on phones: logo centred, Business Areas + Company side by side, Explore on its own row ---------- */
@media (max-width:639px) {
  footer > div:first-child { grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 10px; padding-block:30px; }
  footer > div:first-child > div:first-child, footer > div:first-child > div:nth-child(4) { grid-column:1 / -1; }
  footer > div:first-child h2 { margin-bottom:10px; }
  footer > div:first-child ul > li + li { margin-top:7px !important; }
  footer > div:first-child > div:first-child p { margin-top:12px; }
}

/* ---------- Contact: QR code, centred and as large as the panel allows ---------- */
.qr-card { display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.qr-figure { margin:0; width:min(100%, 300px); line-height:0; background:#fff; border:1px solid #d9e5ed; border-radius:12px; overflow:hidden; box-shadow:0 8px 22px rgba(6,43,79,.10); }
.qr-figure img { display:block; width:100%; height:auto; aspect-ratio:1; }
@media (max-width:560px) { .qr-card-wrap { padding:22px 16px !important; } .qr-figure { width:min(100%, 280px); } }

/* ---------- Contact form ---------- */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }   /* honeypot for bots; invisible to people */
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.55; color:#3d4a57; cursor:pointer; }
.consent input { width:18px; height:18px; margin-top:2px; flex:none; accent-color:#062b4f; }
.submit-btn { transition:background-color .2s ease, opacity .2s ease; }
.submit-btn:hover { background-color:#08416f; }
.submit-btn:disabled { opacity:.65; cursor:wait; }
.form-status { margin-top:14px; padding:12px 14px; border-radius:8px; font-size:14px; line-height:1.5; border:1px solid transparent; }
.form-status.is-info { background:#edf5fc; border-color:#cfe2f3; color:#1d4461; }
.form-status.is-ok { background:#e8f6ef; border-color:#bfe3d0; color:#0b5d3b; }
.form-status.is-error { background:#fdecec; border-color:#f3c4c4; color:#8a1c1c; }

/* ---------- Search overlay (assets/search.js) ---------- */
.srch { position:fixed; inset:0; z-index:100; display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; }
.srch[hidden] { display:none; }
.srch-backdrop { position:absolute; inset:0; background:rgba(4,30,54,.58); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; }
.srch-panel { position:relative; width:min(640px,100%); max-height:min(620px,76vh); display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(2,20,40,.45); overflow:hidden; opacity:0; transform:translateY(-14px) scale(.98); }
.srch.is-open .srch-backdrop { opacity:1; }
.srch.is-open .srch-panel { opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference) {
  .srch-backdrop { transition:opacity .22s ease; }
  .srch-panel { transition:opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1); }
}
.srch-bar { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid #e1e9f0; }
.srch-mag { width:22px; height:22px; color:#5b6c7d; flex:none; }
.srch-bar input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:18px; color:#062b4f; padding:6px 0; }
.srch-bar input::placeholder { color:#8a9aa9; }
.srch-x { flex:none; border:1px solid #d3deea; background:#f4f7fb; color:#52657a; border-radius:7px; font:600 11px/1 Inter,system-ui,sans-serif; letter-spacing:.04em; padding:7px 9px; cursor:pointer; }
.srch-x:hover { background:#e4edf6; color:#062b4f; }
.srch-body { overflow-y:auto; padding:8px; }
.srch-body ul { list-style:none; margin:0; padding:0; }
.srch-group { padding:12px 12px 6px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7b8b9b; }
.srch-item { display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:11px; cursor:pointer; }
.srch-item.is-active { background:#e8f0f8; }
.srch-ic { flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:#e8f0f8; color:#062b4f; }
.srch-ic svg { width:22px; height:22px; }
.srch-green { background:#e3f4ec; color:#008855; } .srch-orange { background:#fdf0e1; color:#b8620c; } .srch-blue { background:#e1f0fa; color:#0875b4; }
.srch-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.srch-t { font-size:15.5px; font-weight:600; color:#062b4f; }
.srch-d { font-size:13px; color:#5b6c7d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srch-go { color:#8a9aa9; font-size:18px; opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease; }
.srch-item.is-active .srch-go { opacity:1; transform:none; color:#062b4f; }
.srch mark { background:#fff1b8; color:inherit; border-radius:3px; padding:0 1px; }
.srch-empty { margin:0; padding:26px 18px; text-align:center; color:#5b6c7d; font-size:14.5px; }
.srch-empty a { color:#008855; font-weight:600; text-decoration:underline; }
.srch-foot { display:flex; gap:18px; padding:10px 18px; border-top:1px solid #e1e9f0; background:#f7f9fc; font-size:12px; color:#6a7b8c; }
.srch-foot kbd { font:600 11px/1 Inter,system-ui,sans-serif; background:#fff; border:1px solid #d3deea; border-radius:5px; padding:3px 6px; margin-right:4px; color:#3d4f62; }
@media (max-width:640px) { .srch { padding-top:72px; } .srch-foot { display:none; } .srch-d { white-space:normal; } }
.srch-bar input, .srch-bar input:focus, .srch-bar input:focus-visible { outline:none !important; box-shadow:none !important; border:0 !important; }
.srch-bar:focus-within { border-bottom-color:#008855; }