/* ==========================================================================
   AxisY - Motorised Wall Mount Swivel TV Lift (Model AXWM03)
   Page stylesheet. Everything is scoped under .axwm so it will not clash
   with the existing site CSS. Brand: charcoal + red, industrial / precise.
   ========================================================================== */

.axwm{
  --ax-ink:#17181c; --ax-ink2:#1d1e23; --ax-line:#e2e1dc; --ax-soft:#f4f3ef;
  --ax-red:#cc0000; --ax-red2:#e60000; --ax-text:#34353b; --ax-mute:#6b6b6b;
  --ax-radius:12px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ax-text); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.axwm *,.axwm *::before,.axwm *::after{ box-sizing:border-box; }
.axwm img{ max-width:100%; height:auto; display:block; }
.axwm h1,.axwm h2,.axwm h3,.axwm h4,.axwm p,.axwm ul,.axwm ol,.axwm figure{ margin:0; padding:0; }
.axwm ul,.axwm ol{ list-style:none; }
.axwm a{ text-decoration:none; }
.axwm .axwm-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.axwm section{ padding:72px 0; }

/* ---------- buttons ---------- */
.axwm .axwm-btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; line-height:1; border:2px solid transparent; transition:background .2s,color .2s,border-color .2s,transform .2s; cursor:pointer; }
.axwm .axwm-btn:hover{ transform:translateY(-1px); }
.axwm .axwm-btn--red{ background:var(--ax-red); color:#fff; }
.axwm .axwm-btn--red:hover{ background:var(--ax-red2); }
.axwm .axwm-btn--ghost{ border-color:#4a4b52; color:#fff; background:transparent; }
.axwm .axwm-btn--ghost:hover{ border-color:#fff; }
.axwm .axwm-btn--dark{ background:var(--ax-ink); color:#fff; }
.axwm .axwm-btn--dark:hover{ background:#000; }
.axwm .axwm-btn--wa{ background:#1fa855; color:#fff; }
.axwm .axwm-btn--wa:hover{ background:#188f46; }

/* ---------- section headings ---------- */
.axwm .axwm-eyebrow{ display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:var(--ax-red); }
.axwm .axwm-eyebrow::before{ content:""; width:34px; height:3px; background:var(--ax-red); display:block; }
.axwm .axwm-h2{ margin-top:10px; font-size:clamp(26px,3.4vw,38px); line-height:1.15; font-weight:800; letter-spacing:-.015em; color:var(--ax-ink); }
.axwm .axwm-sub{ margin-top:14px; max-width:720px; color:var(--ax-mute); font-size:17px; }

/* ---------- hero ---------- */
.axwm .axwm-hero{ background:var(--ax-ink); color:#fff; padding:64px 0 0; position:relative; overflow:hidden; }
.axwm .axwm-hero .axwm-eyebrow{ color:#ff6b61; }
.axwm .axwm-hero .axwm-eyebrow::before{ background:var(--ax-red2); }
.axwm .axwm-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.axwm .axwm-hero h1{ margin-top:16px; font-size:clamp(34px,5vw,58px); line-height:1.04; font-weight:800; letter-spacing:-.025em; text-transform:uppercase; }
.axwm .axwm-hero h1 span{ display:block; color:#ee3b30; }
.axwm .axwm-hero .axwm-lead{ margin-top:22px; font-size:18px; color:#c3c3c8; max-width:560px; }
.axwm .axwm-hero .axwm-lead b{ color:#fff; }
.axwm .axwm-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.axwm .axwm-model{ margin-top:22px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8b8b92; font-weight:600; }
.axwm .axwm-hero-photo{ border-radius:var(--ax-radius); overflow:hidden; border:1px solid #34353b; max-width:430px; margin-left:auto; box-shadow:0 30px 60px rgba(0,0,0,.45); }
.axwm .axwm-hero-photo img{ width:100%; }
.axwm .axwm-hero-photo figcaption{ padding:12px 16px; font-size:13px; color:#d6d6da; background:#1d1e23; }
.axwm .axwm-hero-photo figcaption b{ color:#ff6b61; }
.axwm .axwm-stats{ margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); border:1px solid #34353b; border-bottom:0; border-radius:var(--ax-radius) var(--ax-radius) 0 0; overflow:hidden; background:#1d1e23; }
.axwm .axwm-stat{ padding:22px 22px 24px; border-right:1px solid #34353b; }
.axwm .axwm-stat:last-child{ border-right:0; }
.axwm .axwm-stat .v{ font-size:clamp(24px,2.7vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.axwm .axwm-stat .v small{ font-size:.5em; color:#9a9aa1; font-weight:700; margin-left:3px; }
.axwm .axwm-stat .l{ margin-top:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8b8b92; font-weight:600; }
.axwm .axwm-stat--red{ background:var(--ax-red); }
.axwm .axwm-stat--red .v{ font-size:clamp(17px,1.9vw,22px); line-height:1.15; }
.axwm .axwm-stat--red .l{ color:#ffd9d6; }

/* ---------- three positions ---------- */
.axwm .axwm-states{ margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.axwm .axwm-state{ position:relative; border-radius:var(--ax-radius); overflow:hidden; aspect-ratio:4/4.3; background:#222; }
.axwm .axwm-state img{ width:100%; height:100%; object-fit:cover; }
.axwm .axwm-state figcaption{ position:absolute; inset:auto 0 0 0; padding:44px 18px 16px; color:#fff; font-weight:700; font-size:15px; background:linear-gradient(to top,rgba(10,10,12,.88),rgba(10,10,12,0)); }
.axwm .axwm-state figcaption em{ font-style:normal; color:#ff6b61; font-weight:800; margin-right:8px; }
.axwm .axwm-overview{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:36px; font-size:17px; }
.axwm .axwm-overview b{ color:var(--ax-ink); }
.axwm .axwm-note{ margin-top:30px; background:var(--ax-soft); border:1px solid var(--ax-line); border-radius:var(--ax-radius); padding:20px 24px; }
.axwm .axwm-note h3{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--ax-ink); margin-bottom:6px; }

/* ---------- Instagram videos ---------- */
.axwm .axwm-videos{ background:var(--ax-ink); }
.axwm .axwm-videos .axwm-eyebrow{ color:#ff6b61; }
.axwm .axwm-videos .axwm-h2{ color:#fff; }
.axwm .axwm-videos .axwm-sub{ color:#a9a9b0; }
.axwm .axwm-reels{ margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.axwm .axwm-reel{ background:var(--ax-ink2); border:1px solid #34353b; border-radius:var(--ax-radius); overflow:hidden; display:flex; flex-direction:column; }
.axwm .axwm-reel--ad{ border-color:var(--ax-red); box-shadow:0 0 0 1px var(--ax-red); }
.axwm .axwm-reel-h{ padding:14px 16px; color:#fff; font-weight:700; font-size:15px; line-height:1.3; }
.axwm .axwm-reel-h span{ display:block; margin-bottom:4px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#ff6b61; font-weight:800; }
.axwm .axwm-reel-frame{ background:#fff; }
.axwm .axwm-reel-frame iframe{ display:block; width:100%; height:640px; border:0; }
.axwm .axwm-reel-link{ padding:12px 16px 14px; color:#fff; font-weight:700; font-size:14px; border-top:1px solid #34353b; }
.axwm .axwm-reel-link:hover{ color:#ff6b61; }

/* ---------- features ---------- */
.axwm .axwm-bg-soft{ background:var(--ax-soft); }
.axwm .axwm-feats{ margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.axwm .axwm-feat{ background:#fff; border:1px solid var(--ax-line); border-radius:var(--ax-radius); padding:24px 22px 26px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.axwm .axwm-feat .ic{ width:42px; height:42px; border-radius:10px; background:var(--ax-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; margin-bottom:16px; }
.axwm .axwm-feat h3{ font-size:17px; line-height:1.25; font-weight:800; color:var(--ax-ink); margin-bottom:8px; }
.axwm .axwm-feat p{ font-size:15px; color:#55565d; }
.axwm .axwm-feat--hl{ border-color:var(--ax-red); background:#fff7f6; }
.axwm .axwm-feat--hl .ic{ background:var(--ax-red); }

/* ---------- how it works ---------- */
.axwm .axwm-how{ margin-top:36px; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.axwm .axwm-how-img{ background:var(--ax-soft); border:1px solid var(--ax-line); border-radius:var(--ax-radius); padding:18px; }
.axwm .axwm-steps li{ display:flex; gap:18px; padding:20px 0; border-bottom:1px dashed #d3d2cc; }
.axwm .axwm-steps li:last-child{ border-bottom:0; }
.axwm .axwm-steps .n{ flex:0 0 42px; height:42px; border-radius:50%; background:var(--ax-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }
.axwm .axwm-steps li:last-child .n{ background:var(--ax-red); }
.axwm .axwm-steps h3{ font-size:18px; color:var(--ax-ink); font-weight:800; }
.axwm .axwm-steps p{ margin-top:4px; color:#55565d; }

/* ---------- specs ---------- */
.axwm .axwm-specwrap{ margin-top:36px; display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:start; }
.axwm table.axwm-spec{ width:100%; border-collapse:collapse; font-size:15px; background:#fff; }
.axwm .axwm-spec th{ text-align:left; width:42%; background:var(--ax-soft); font-weight:700; color:var(--ax-ink); padding:13px 16px; border:1px solid var(--ax-line); }
.axwm .axwm-spec td{ padding:13px 16px; border:1px solid var(--ax-line); }
.axwm .axwm-spec tr.k th{ background:var(--ax-ink); color:#fff; border-color:var(--ax-ink); }
.axwm .axwm-spec tr.k td{ font-weight:700; color:var(--ax-ink); }
.axwm .axwm-spec tr.w th,.axwm .axwm-spec tr.w td{ font-size:12.5px; color:#7b7b82; font-weight:500; padding:8px 16px; background:#fff; }
.axwm .axwm-specnote{ margin-top:10px; font-size:13px; color:var(--ax-mute); }
.axwm .axwm-dwg{ border:1px solid var(--ax-line); border-radius:var(--ax-radius); padding:12px; background:#fff; }
.axwm .axwm-dwg figcaption{ text-align:center; font-size:13px; color:var(--ax-mute); margin-top:8px; }
.axwm .axwm-chips{ margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.axwm .axwm-chip{ background:var(--ax-soft); border:1px solid var(--ax-line); border-radius:10px; padding:12px 12px 14px; }
.axwm .axwm-chip .v{ font-size:22px; font-weight:800; color:var(--ax-ink); line-height:1.05; letter-spacing:-.02em; }
.axwm .axwm-chip .v small{ font-size:12px; color:var(--ax-mute); margin-left:2px; }
.axwm .axwm-chip .l{ margin-top:4px; font-size:12px; color:#5b5c63; line-height:1.3; }

/* ---------- gallery ---------- */
.axwm .axwm-gallery{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
.axwm .axwm-gallery figure{ border:1px solid var(--ax-line); border-radius:var(--ax-radius); overflow:hidden; background:var(--ax-soft); }
.axwm .axwm-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.axwm .axwm-gallery .contain{ object-fit:contain; padding:12px; }
.axwm .axwm-gallery figcaption{ padding:12px 16px 14px; font-size:14px; color:#5b5c63; background:#fff; border-top:1px solid var(--ax-line); }

/* ---------- box + install ---------- */
.axwm .axwm-two{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.axwm .axwm-two h3{ font-size:20px; font-weight:800; color:var(--ax-ink); margin-bottom:6px; }
.axwm .axwm-box li{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--ax-line); }
.axwm .axwm-box li b{ color:var(--ax-red); font-weight:800; min-width:26px; }
.axwm .axwm-boxnote{ margin-top:10px; font-size:13px; color:var(--ax-mute); }
.axwm .axwm-inst li{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--ax-line); }
.axwm .axwm-inst li b{ flex:0 0 28px; height:28px; border-radius:8px; background:var(--ax-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.axwm .axwm-inst li:last-child b{ background:var(--ax-red); }
.axwm .axwm-warn{ margin-top:16px; font-size:14px; color:#55565d; background:var(--ax-soft); border:1px solid var(--ax-line); border-radius:10px; padding:14px 16px; }
.axwm .axwm-warn b{ color:var(--ax-ink); }

/* ---------- use cases ---------- */
.axwm .axwm-uses{ margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.axwm .axwm-use{ border:1px solid var(--ax-line); border-radius:var(--ax-radius); padding:22px; background:#fff; border-top:4px solid var(--ax-red); }
.axwm .axwm-use h3{ font-size:17px; font-weight:800; color:var(--ax-ink); margin-bottom:6px; }
.axwm .axwm-use p{ font-size:15px; color:#55565d; }

/* ---------- FAQ ---------- */
.axwm .axwm-faq{ margin-top:30px; max-width:860px; }
.axwm .axwm-faq details{ border-bottom:1px solid var(--ax-line); padding:18px 0; }
.axwm .axwm-faq summary{ cursor:pointer; list-style:none; font-weight:800; font-size:17px; color:var(--ax-ink); display:flex; justify-content:space-between; gap:20px; }
.axwm .axwm-faq summary::-webkit-details-marker{ display:none; }
.axwm .axwm-faq summary::after{ content:"+"; color:var(--ax-red); font-size:24px; line-height:1; font-weight:700; }
.axwm .axwm-faq details[open] summary::after{ content:"\2212"; }
.axwm .axwm-faq p{ margin-top:10px; color:#55565d; }

/* ---------- closing CTA ---------- */
.axwm .axwm-final{ background:var(--ax-ink); color:#fff; text-align:center; padding:72px 0; }
.axwm .axwm-final h2{ font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.015em; }
.axwm .axwm-final p{ margin:14px auto 0; max-width:620px; color:#c3c3c8; font-size:17px; }
.axwm .axwm-final .axwm-cta{ justify-content:center; }
.axwm .axwm-final .axwm-contact{ margin-top:26px; color:#9a9aa1; font-size:14px; }
.axwm .axwm-final .axwm-contact b{ color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .axwm section{ padding:56px 0; }
  .axwm .axwm-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .axwm .axwm-hero-photo{ margin:0 auto; }
  .axwm .axwm-stats{ grid-template-columns:repeat(3,1fr); }
  .axwm .axwm-stat{ border-bottom:1px solid #34353b; }
  .axwm .axwm-stat--red{ grid-column:span 2; border-bottom:0; }
  .axwm .axwm-feats{ grid-template-columns:repeat(2,1fr); }
  .axwm .axwm-how,.axwm .axwm-specwrap,.axwm .axwm-two,.axwm .axwm-overview{ grid-template-columns:1fr; }
  .axwm .axwm-uses{ grid-template-columns:repeat(2,1fr); }
  .axwm .axwm-reels{ grid-template-columns:repeat(2,1fr); }
  .axwm .axwm-reel--ad{ grid-column:1 / -1; width:100%; max-width:460px; justify-self:center; }
}
@media (max-width:640px){
  .axwm{ font-size:15px; }
  .axwm section{ padding:44px 0; }
  .axwm .axwm-hero{ padding-top:44px; }
  .axwm .axwm-stats{ grid-template-columns:repeat(2,1fr); margin-top:40px; }
  .axwm .axwm-stat--red{ grid-column:1 / -1; }
  .axwm .axwm-stat--red .v{ font-size:20px; }
  .axwm .axwm-states,.axwm .axwm-gallery,.axwm .axwm-feats,.axwm .axwm-uses,.axwm .axwm-reels{ grid-template-columns:1fr; }
  .axwm .axwm-reel--ad{ max-width:none; }
  .axwm .axwm-reel-frame iframe{ height:600px; }
  .axwm .axwm-state{ aspect-ratio:4/3.4; }
  .axwm .axwm-chips{ grid-template-columns:repeat(2,1fr); }
  .axwm .axwm-btn{ width:100%; justify-content:center; }
  .axwm .axwm-spec th{ width:46%; }
}
@media (prefers-reduced-motion:reduce){ .axwm .axwm-btn{ transition:none; } }
@media print{ .axwm .axwm-hero,.axwm .axwm-final{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } }