/* ==========================================================================
   Maximas Memory — shared site stylesheet
   Mobile-first. Breakpoints: 768px (tablet), 1024px (desktop), 1280px (wide)
   ========================================================================== */

:root{
  --accent: #00487e;
  --accent-soft: #5c8fb8;
  --ink: #0B1E3D;
  --navy-deep: #0E2A52;
  --muted: #5B6472;
  --line: #E3E7EE;
  --bg-alt: #F6F8FB;
  --white: #FFFFFF;
  --container: 1280px;
  --header-h: 68px;
}
@media (min-width:768px){ :root{ --header-h: 76px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Arial, Helvetica, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-weight:700; }
p{ margin:0; }
a{ color:var(--ink); text-decoration:none; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
@media (min-width:768px){ .container{ padding:0 40px; } }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; padding:12px 22px; border-radius:4px;
  white-space:nowrap; border:1.5px solid transparent; cursor:pointer;
  transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none;
}
.btn:hover::before{ left:130%; }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ opacity:.92; transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(11,30,61,.4); }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(0,0,0,.28); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); box-shadow:0 12px 22px -10px rgba(11,30,61,.3); }
.btn-outline-light{ border-color:rgba(255,255,255,.7); color:#fff; background:transparent; }
.btn-outline-light:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }
.btn-sm{ font-size:13px; padding:8px 16px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; width:100%;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{ box-shadow:0 4px 18px -8px rgba(11,30,61,.18); }
.site-header .container{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Mobile/tablet: the nav drawer is fixed (out of flow), so only the logo + toggle button remain in
   the header bar. Give it a 3-column grid so the logo can sit dead-center with the toggle pinned
   right, instead of the flex space-between pushing the logo to the far left. */
@media (max-width:1023px){
  .site-header .container{ display:grid; grid-template-columns:36px 1fr 36px; }
  .site-header .logo{ grid-column:2; justify-self:center; }
  .site-header .nav-toggle{ grid-column:3; justify-self:end; }
}
.logo{ display:flex; align-items:center; line-height:1; transition:opacity .18s ease, transform .18s ease; }
.logo:hover{ opacity:.82; transform:translateY(-1px); }
.logo-img{ height:32px; width:auto; display:block; }
@media (min-width:768px){ .logo-img{ height:38px; } }
/* Footer keeps the original two-line text wordmark (the new image logo is black-on-transparent and
   would vanish on the footer's dark background) — restore its own stacked layout + sizing here. */
.footer-col .logo{ flex-direction:column; align-items:flex-start; }
.footer-col .logo .name{ font-weight:700; font-size:19px; letter-spacing:.5px; }
.footer-col .logo .sub{ font-size:10px; font-weight:600; letter-spacing:3.5px; margin-top:2px; }

.main-nav{
  display:flex; align-items:center; gap:28px;
}
.nav-link{ position:relative; font-size:15px; font-weight:500; color:var(--ink); padding-bottom:4px; transition:color .15s ease; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:currentColor; transition:right .2s ease; }
.nav-link:hover, .nav-link.is-active{ color:var(--accent); }
.nav-link:hover::after, .nav-link.is-active::after{ right:0; }

.header-right{ display:flex; align-items:center; gap:16px; }

/* Language dropdown (English / 日本語 / 繁中) */
.lang-dropdown{ position:relative; }
.lang-dropdown-btn{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; background:none; border:none; padding:0; font-family:inherit; }
.lang-dropdown-chev{ transition:transform .15s ease; }
.lang-dropdown.is-open .lang-dropdown-chev{ transform:rotate(180deg); }
.lang-dropdown-menu{
  display:none; position:absolute; top:calc(100% + 12px); right:0; min-width:140px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 16px 32px -12px rgba(11,30,61,.2); padding:6px; z-index:60;
}
.lang-dropdown.is-open .lang-dropdown-menu{ display:block; }
.lang-dropdown-menu a{ display:block; padding:9px 12px; border-radius:6px; font-size:14px; font-weight:500; color:var(--ink); }
.lang-dropdown-menu a:hover{ background:var(--bg-alt); }
.lang-dropdown-menu a.is-active{ color:var(--accent); font-weight:700; }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; border:none; background:none; padding:6px;
}
.nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
@media (max-width:1023px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h));
    background:#fff; z-index:90;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:24px 24px 32px; gap:0;
    transform:translateX(100%); transition:transform .28s ease;
    overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav .nav-link{ padding:16px 4px; border-bottom:1px solid var(--line); font-size:17px; }
  .main-nav .header-right{ flex-direction:column; align-items:stretch; gap:14px; margin-top:20px; }
  .main-nav .header-right .btn{ width:100%; }
  /* Inline (non-floating) dropdown inside the off-canvas drawer, rather than an absolutely
     positioned card that could overflow the narrow drawer. */
  .main-nav .lang-dropdown-btn{ width:100%; justify-content:space-between; padding:12px 4px; border-bottom:1px solid var(--line); }
  .main-nav .lang-dropdown-menu{ position:static; display:none; box-shadow:none; border:none; background:var(--bg-alt); margin-top:8px; }
  .main-nav .lang-dropdown.is-open .lang-dropdown-menu{ display:block; }
  .main-nav .lang-dropdown-menu a{ padding:11px 12px; font-size:15px; }
}
@media (min-width:1024px){
  .nav-toggle{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; width:100%; overflow:hidden; background:var(--ink); background-repeat:no-repeat; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
.hero-slide.is-active{ opacity:1; }
/* Same wide-photo crop issue as the sub-page hero banners — bias right on narrow phones only. */
@media (max-width:767px){ .hero-slide{ background-position:70% center; } }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(6,16,34,.88) 0%, rgba(6,16,34,.65) 42%, rgba(6,16,34,.25) 72%, rgba(6,16,34,.08) 100%); }
.hero-inner{ position:relative; display:flex; align-items:center; min-height:inherit; padding:64px 0; }
.hero-copy{ display:flex; flex-direction:column; gap:18px; max-width:600px; }
.hero-badge{ display:inline-flex; align-items:center; width:fit-content; padding:6px 14px; border:1px solid rgba(255,255,255,.35); border-radius:100px; font-size:11px; font-weight:600; letter-spacing:1.1px; color:#fff; text-transform:uppercase; white-space:nowrap; }
.hero-copy h1{ font-size:30px; line-height:1.16; color:#fff; letter-spacing:-.4px; }
.hero-copy p{ font-size:15px; line-height:1.65; color:rgba(255,255,255,.85); max-width:500px; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:4px; }
@media (min-width:768px){
  .hero-copy h1{ font-size:38px; }
  .hero-copy p{ font-size:16px; }
}
@media (min-width:1024px){
  .hero-copy h1{ font-size:46px; }
}
/* Sub-page hero (Products/Solutions/Support/About Us): oversized headline + a bold tagline line + a smaller body
   paragraph — three tiers, matching the reference mockups. Index keeps the base hero-copy sizes untouched. */
/* Text block kept to roughly a third of the banner's width (not sprawling across the photo) — narrower
   column at tablet/desktop, so headline sizes step down a bit from the very first draft to match. */
.hero-banner .hero-copy{ max-width:520px; gap:14px; }
/* Text column capped at 2/5 of the container width on tablet/desktop, per Johnny's spec. */
@media (min-width:768px){ .hero-banner .hero-copy{ max-width:40%; } }
.hero-banner .hero-copy h1{ font-size:38px; line-height:1.1; letter-spacing:-.8px; }
@media (min-width:768px){ .hero-banner .hero-copy h1{ font-size:40px; } }
@media (min-width:1024px){ .hero-banner .hero-copy h1{ font-size:52px; } }
/* Tagline now matches the h1 size at every breakpoint (Johnny's spec: subtitle as big as the
   main title). The body paragraph below it is bumped up to the tagline's former size, so the
   hierarchy becomes two tiers (headline+tagline / body) instead of three. */
.hero-tagline{ font-size:38px; font-weight:700; line-height:1.1; color:#fff; letter-spacing:-.8px; margin-top:2px; }
@media (min-width:768px){ .hero-tagline{ font-size:40px; } }
@media (min-width:1024px){ .hero-tagline{ font-size:52px; } }
.hero-banner .hero-copy p{ font-size:20px; font-weight:700; line-height:1.3; color:rgba(255,255,255,.94); max-width:100%; margin-top:2px; letter-spacing:-.2px; }
@media (min-width:768px){ .hero-banner .hero-copy p{ font-size:22px; } }
@media (min-width:1024px){ .hero-banner .hero-copy p{ font-size:28px; } }

.hero-large{ min-height:520px; }
@media (min-width:768px){ .hero-large{ min-height:600px; } }
/* Sub-page hero photos are wide (2.4:1) cinematic banners with their subject concentrated in the
   right ~60% of the frame and a deliberately blank/faded left zone reserved for the text overlay.
   On a narrow phone viewport background-size:cover has to crop hard to fill the tall, narrow box —
   centering that crop lands squarely on the blank zone, showing almost none of the actual photo.
   Biasing the crop right (and using a shorter box so less of the image needs to be cropped away)
   keeps the product/photo content in view instead. Desktop needs less help since the box is wide
   relative to its height, so center framing already shows the full composition. */
.hero-banner{ min-height:380px; background-size:cover; background-position:78% center; }
@media (min-width:768px){ .hero-banner{ min-height:460px; background-position:center; } }
@media (min-width:1024px){ .hero-banner{ min-height:550px; } }
/* Phones (sub-pages only, not the homepage carousel): show just the page title, centered, and
   hide the tagline + body copy — a short punchy headline over a hard-to-crop wide photo reads
   far better on a narrow screen than a tagline+paragraph block competing with the image. */
@media (max-width:767px){
  .hero-banner .hero-inner{ justify-content:center; }
  .hero-banner .hero-copy{ align-items:center; text-align:center; max-width:100%; }
  .hero-banner .hero-tagline, .hero-banner .hero-copy p{ display:none; }
}
.hero-plain{ min-height:200px; background:var(--ink); }
@media (min-width:768px){ .hero-plain{ min-height:230px; } }

.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); display:none; align-items:center; justify-content:center; color:#fff; transition:background .15s ease; }
.hero-arrow:hover{ background:rgba(255,255,255,.24); }
.hero-arrow.prev{ left:16px; } .hero-arrow.next{ right:16px; }
@media (min-width:768px){ .hero-arrow{ display:flex; } }
.hero-dots{ position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; gap:8px; }
.hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:none; padding:0; transition:background .15s ease, transform .15s ease; }
.hero-dot.is-active{ background:#fff; transform:scale(1.2); }

/* ---------- Sections / grid ---------- */
.section{ padding:56px 0; }
@media (min-width:768px){ .section{ padding:88px 0; } }
.section-cta{ padding:72px 0; }
@media (min-width:768px){ .section-cta{ padding:120px 0; } }
.section-tight{ padding:40px 0; }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--navy-deep); color:#fff; }
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:1.4px; color:var(--accent); text-transform:uppercase; }
.section-dark .eyebrow{ color:#8FB0E8; }
.section-title{ font-size:24px; letter-spacing:-.3px; margin-top:10px; }
@media (min-width:768px){ .section-title{ font-size:30px; } }
.section-head{ display:flex; flex-direction:column; gap:6px; margin-bottom:32px; }
.section-head.center{ align-items:center; text-align:center; max-width:600px; margin-left:auto; margin-right:auto; }
@media (min-width:768px){ .section-head{ margin-bottom:48px; } }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
.grid-6{ grid-template-columns:1fr; }
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px){ .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-6{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-6{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:10px; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card:hover{ box-shadow:0 16px 32px -12px rgba(11,30,61,.16); transform:translateY(-3px); border-color:#C9D2E0; }
.card-pad{ padding:26px; }
.card-icon{ width:40px; height:40px; border-radius:8px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--accent); transition:background .18s ease, color .18s ease, transform .3s ease; }
.card:hover .card-icon{ background:var(--accent); color:#fff; transform:scale(1.1) rotate(-6deg); }

/* Product category card with a photo docked top-right (Products page) */
.product-card{ display:grid; grid-template-columns:44px 1fr; align-items:start; gap:24px; }
.product-card-photo{ display:none; }
@media (min-width:768px){
  .product-card{ grid-template-columns:44px 1fr 210px; }
  .product-card-photo{ display:block; width:100%; height:auto; object-fit:contain; align-self:start; margin-top:2px; filter:drop-shadow(0 8px 16px rgba(11,30,61,.12)); transition:transform .35s ease, filter .35s ease; }
  .card:hover .product-card-photo{ transform:scale(1.06) translateY(-2px); filter:drop-shadow(0 14px 22px rgba(11,30,61,.18)); }
}
@media (min-width:1024px){
  .product-card{ grid-template-columns:44px 1fr 270px; }
}

.tile{ position:relative; height:180px; border-radius:10px; overflow:hidden; }
@media (min-width:768px){ .tile{ height:200px; } }
.tile-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .3s ease; }
.tile:hover .tile-img{ transform:scale(1.05); }
.tile-overlay{ position:absolute; inset:0; background:rgba(11,30,61,.5); transition:background .3s ease; }
.tile:hover .tile-overlay{ background:rgba(11,30,61,.36); }
.tile-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; font-size:16px; font-weight:700; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4); transition:transform .3s ease; }
.tile:hover .tile-label{ transform:translateY(-3px); }

/* ---------- RMA process steps (numbered icon badges + connecting arrows) ---------- */
.rma-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px 12px; }
@media (min-width:860px){
  .rma-steps{ display:flex; align-items:flex-start; justify-content:space-between; gap:4px; }
}
.rma-step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
@media (min-width:860px){ .rma-step{ flex:1; min-width:0; padding:0 4px; } }
.rma-step-icon-wrap{ position:relative; width:60px; height:60px; }
.rma-step-icon{ width:60px; height:60px; border-radius:50%; background:var(--bg-alt); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.rma-step-badge{ position:absolute; top:-4px; left:-4px; width:25px; height:25px; border-radius:50%; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px #fff; }
.rma-step-title{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.35; }
.rma-step-desc{ font-size:12.5px; line-height:1.55; color:var(--muted); max-width:160px; }
.rma-arrow{ display:none; }
@media (min-width:860px){
  .rma-arrow{ display:flex; align-items:center; justify-content:center; color:#C9D2E0; flex-shrink:0; margin-top:18px; }
}

/* ---------- Chips ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip{ border:1px solid var(--line); border-radius:100px; padding:6px 14px; font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#fff; padding-top:56px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); }
@media (min-width:640px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.3fr repeat(5,1fr); } }
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col h5{ font-size:12px; font-weight:600; letter-spacing:1px; color:#6C7C93; text-transform:uppercase; margin-bottom:2px; }
.footer-link{ font-size:14px; color:#C3CCDA; transition:color .15s ease; }
.footer-link:hover{ color:#fff; }
.footer-desc{ font-size:13.5px; line-height:1.7; color:#8FA0B8; max-width:240px; }
.footer-contact-item{ font-size:13.5px; color:#C3CCDA; line-height:1.5; }
.footer-bottom{ display:flex; flex-direction:column; gap:16px; padding:22px 0; }
@media (min-width:640px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-copyright{ font-size:13px; color:#7686A0; }
.footer-legal-link{ font-size:13px; color:#7686A0; }
.footer-lang-cluster{ font-size:13px; color:#7686A0; }
.social-ic{ color:#B9C4D6; transition:opacity .15s ease, transform .15s ease; }
.social-ic:hover{ opacity:.75; transform:translateY(-2px); }

/* Products / Solutions / Support columns carry two parallel link sets: a single "Products"-style
   link for phones (where a full sitemap-style list is too much) and the full expanded sub-link
   list plus its small-caps heading for tablet/desktop, where there's room for it. Only one set is
   ever visible at a time, so the heading and the single mobile link never show up together as a
   literal duplicate ("PRODUCTS" heading + "Products" link) the way a single shared markup would. */
.footer-link-full, .footer-col-label{ display:none; }
@media (min-width:640px){
  .footer-link-full, .footer-col-label{ display:block; }
  .footer-link-simple{ display:none; }
}

/* Contact column: phones show Sales only (the one address someone actually needs to write to);
   tablet/desktop keep the full Global/Asia/Europe/USA/Sales regional list. */
@media (max-width:639px){ .footer-contact-full{ display:none; } }

/* Mobile footer: center everything and size text up to ~200% of the desktop base for comfortable
   phone reading/tapping — but tighten the vertical gaps between rows so doubling the type doesn't
   also double the footer's scroll length. Desktop layout (left-aligned, denser) is untouched at
   640px and above. */
@media (max-width:639px){
  .site-footer{ text-align:center; }
  .footer-grid{ gap:22px; }
  .footer-col{ align-items:center; gap:6px; }
  .footer-col .logo{ align-items:center; }
  .footer-col h5{ font-size:24px; margin-bottom:0; }
  .footer-link{ font-size:28px; line-height:1.25; }
  .footer-desc{ font-size:27px; line-height:1.35; max-width:340px; margin:0 auto; }
  .footer-contact-item{ font-size:27px; line-height:1.3; }
  .footer-col .logo .name{ font-size:38px; }
  .footer-col .logo .sub{ font-size:20px; }
  .footer-bottom, .footer-bottom > div{ align-items:center; text-align:center; }
  .footer-bottom .cluster{ justify-content:center; }
  .footer-copyright, .footer-legal-link, .footer-lang-cluster{ font-size:26px; }
}

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink); }
.field input, .field select, .field textarea{
  font:inherit; font-size:14.5px; padding:11px 14px; border:1.5px solid var(--line); border-radius:6px; color:var(--ink); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,72,126,.12); }
.field textarea{ resize:vertical; min-height:110px; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#C0392B; }
.field-error{ font-size:12.5px; color:#C0392B; display:none; }
.field.has-error .field-error{ display:block; }
.form-row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .form-row-2{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:13px; color:var(--muted); }
.form-status{ font-size:14px; font-weight:600; padding:12px 14px; border-radius:6px; display:none; }
.form-status.is-visible{ display:block; }
.form-status.is-success{ background:#E7F5EC; color:#1C7C3C; }
.form-status.is-error{ background:#FBEAEA; color:#B23A2E; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.checkbox-label{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer; line-height:1.5; }
.checkbox-label input[type="checkbox"]{ width:17px; height:17px; min-width:17px; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
.checkbox-label a{ color:var(--accent); font-weight:600; text-decoration:underline; }
.field-recaptcha{ gap:8px; }

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; background:none; border:none; text-align:left; font-size:15.5px; font-weight:600; color:var(--ink); }
.faq-q .chev{ flex-shrink:0; transition:transform .2s ease; }
.faq-item.is-open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.is-open .faq-a{ max-height:400px; }
.faq-a p{ font-size:14.5px; line-height:1.7; color:var(--muted); padding:0 0 20px; max-width:800px; }

/* ---------- Legal pages ---------- */
.legal-h2{ font-size:18px; font-weight:700; color:var(--ink); margin-top:36px; padding-top:22px; border-top:1px solid var(--line); }
@media (min-width:768px){ .legal-h2{ font-size:19px; } }
.legal-body > .legal-h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.legal-h2 .num{ color:var(--accent); }
.legal-p{ font-size:14.5px; line-height:1.75; color:#3B4658; margin-top:14px; }
.legal-ol{ margin:14px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:8px; list-style:decimal; }
.legal-ol li{ font-size:14.5px; line-height:1.65; color:#3B4658; }
.legal-table-wrap{ overflow-x:auto; margin-top:16px; border:1px solid var(--line); border-radius:8px; }
.legal-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.legal-table th{ background:var(--bg-alt); text-align:left; padding:10px 14px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); white-space:nowrap; }
.legal-table td{ padding:10px 14px; border-bottom:1px solid var(--line); color:#3B4658; }
.legal-table td.r{ text-align:right; white-space:nowrap; }
.legal-table tr:last-child td{ border-bottom:none; }

/* ---------- Scroll-reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-1{ transition-delay:.05s; } .reveal-2{ transition-delay:.12s; } .reveal-3{ transition-delay:.19s; }
.reveal-4{ transition-delay:.26s; } .reveal-5{ transition-delay:.33s; } .reveal-6{ transition-delay:.4s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-slide{ transition:none; }
  .btn::before{ display:none; }
}

/* ---------- Legal document modal (Privacy / Terms / Warranty quick-view) ---------- */
.legal-modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(11,30,61,.55);
  display:none; align-items:center; justify-content:center;
  padding:24px 16px; overflow:hidden;
  opacity:0; transition:opacity .2s ease;
}
@media (min-width:768px){ .legal-modal-overlay{ padding:56px 24px; } }
.legal-modal-overlay.is-open{ display:flex; opacity:1; }
/* The overlay itself no longer scrolls — only #legal-modal-body does, so the modal box (and the
   close button pinned to it) never moves and stays visible no matter how far the reader scrolls. */
.legal-modal{
  position:relative; background:#fff; border-radius:12px; width:100%; max-width:860px;
  max-height:calc(100vh - 48px); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 60px -18px rgba(11,30,61,.45);
  transform:translateY(12px); transition:transform .2s ease;
}
@media (min-width:768px){ .legal-modal{ max-height:calc(100vh - 112px); } }
.legal-modal-overlay.is-open .legal-modal{ transform:translateY(0); }
#legal-modal-body{ overflow-y:auto; padding:44px 24px 56px; }
@media (min-width:768px){ #legal-modal-body{ padding:56px 56px 64px; } }
.legal-modal-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  border:none; background:var(--bg-alt); color:var(--ink); display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:background .15s ease; z-index:2;
}
.legal-modal-close:hover{ background:var(--line); }
/* the fetched page brings its own dark hero banner along; strip it down to a plain in-modal title */
.legal-modal .hero{
  position:static; background:none !important; min-height:auto !important; overflow:visible;
  padding:0 0 24px; margin:0 0 24px; border-bottom:1px solid var(--line);
}
.legal-modal .hero-inner{ padding:0 !important; min-height:auto !important; display:block !important; }
.legal-modal .hero h1{ color:var(--ink) !important; font-size:21px !important; line-height:1.3 !important; }
.legal-modal .hero-inner div{ color:var(--muted) !important; font-size:13px !important; }
.legal-modal .section{ padding:0; }
.legal-modal .legal-h2:first-child, .legal-modal .legal-body > .legal-h2:first-child{ margin-top:28px; }
.legal-modal-loading{ padding:60px 0; text-align:center; color:var(--muted); font-size:14px; }
body.legal-modal-lock{ overflow:hidden; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
/* Homepage stats row (15+ Years / 10+ Regions / 6 Product Lines / B2B ODM) — light hover lift,
   consistent with the .card hover treatment used elsewhere on the site. */
.stat-tile{ padding:16px 12px; border-radius:10px; transition:box-shadow .18s ease, transform .18s ease, background-color .18s ease; }
.stat-tile:hover{ background:#fff; box-shadow:0 14px 28px -14px rgba(11,30,61,.16); transform:translateY(-3px); }
.stack{ display:flex; flex-direction:column; gap:14px; }
/* On phones, short icon/label blocks that collapse to a single stacked column read better centered
   than pinned to the left edge — long-form paragraphs (card descriptions, FAQ, legal, forms) stay left. */
@media (max-width:639px){
  .feature-block, .form-intro{ align-items:center; text-align:center; }
  .contact-tile{ text-align:center; }
}
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }