/* ═══════════════════════════════════════════════════════════════
   ZTT ENERGRID M261  —  product page (products/ztt/energrid-m261/)
   Loaded after main.css only. Everything is scoped to body.m261.

   The look borrows from the cabinet itself: white powder-coated
   steel, the blue/green ENERGY STORAGE label, and the rating plate.
   The plate in the hero is the one loud element; the rest stays plain.
   ═══════════════════════════════════════════════════════════════ */

body.m261 {
  --m-bg:     #ffffff;
  --m-steel:  #edf1f4;   /* sheet-steel grey for alternating bands */
  --m-ink:    #18232d;
  --m-mute:   #52606c;
  --m-line:   #cfd7de;
  --m-blue:   #1f4fa3;   /* ENERGRID label blue */
  --m-green:  #2ba84a;   /* label stripe green */
  --m-plate:  #f7f9fa;
  --m-wrap:   min(1180px, 100% - 3rem);
  --m-cond:   'Fira Sans Condensed', 'Arial Narrow', 'Inter', sans-serif;
  background: var(--m-bg);
  color: var(--m-ink);
}
html[data-theme='dark'] body.m261 {
  --m-bg:     #0d151c;
  --m-steel:  #121d26;
  --m-ink:    #e6edf2;
  --m-mute:   #a3b3c0;
  --m-line:   #2a3a47;
  --m-blue:   #8fb2f0;
  --m-green:  #5cc97a;
  --m-plate:  #16222c;
}

.m261 .m-wrap { width: var(--m-wrap); margin-inline: auto; }
.m261 .m-sec { padding: 5.5rem 0; background: var(--m-bg); }
.m261 .m-sec-steel { background: var(--m-steel); }
.m261 .m-sec[id] { scroll-margin-top: calc(var(--nav-h) + 3.2rem); }

.m261 .m-h2 {
  font-family: var(--m-cond); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0;
}
.m261 .m-h3 { font-family: var(--m-cond); font-weight: 600; font-size: 1.4rem; line-height: 1.2; margin: 0 0 1rem; }
.m261 .m-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; margin-bottom: 2.4rem; padding-bottom: 1rem; border-bottom: 2px solid var(--m-ink); }
.m261 .m-sec-head p { margin: 0; color: var(--m-mute); font-size: .95rem; max-width: 52ch; }
.m261 .m-note, .m261 .m-standards { font-size: .88rem; line-height: 1.65; color: var(--m-mute); margin: 1.4rem 0 0; max-width: 78ch; }
.m261 .m-standards span { color: var(--m-ink); font-weight: 600; }
.m261 a.m-link, .m261 .m-standards a, .m261 .m-video-meta a { color: var(--m-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ─── buttons: square-shouldered, like the cabinet doors ─── */
.m261 .m-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.m261 .m-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.3rem; border-radius: 3px; border: 1.5px solid var(--m-ink);
  font: 600 .92rem/1.2 'Inter', sans-serif; color: var(--m-ink); background: transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.m261 .m-btn:hover { background: var(--m-ink); color: var(--m-bg); }
.m261 .m-btn-solid { background: var(--m-blue); border-color: var(--m-blue); color: #fff; }
.m261 .m-btn-solid:hover { background: var(--m-ink); border-color: var(--m-ink); color: var(--m-bg); }
html[data-theme='dark'] .m261 .m-btn-solid { color: #0d151c; }
.m261 .m-btn:focus-visible, .m261 a:focus-visible, .m261 button:focus-visible { outline: 3px solid var(--m-blue); outline-offset: 3px; }

/* ─── HERO ─── */
.m261 .m-hero { position: relative; background: var(--m-steel); padding: calc(var(--nav-h) + 2rem) 0 0; overflow: hidden; }
.m261 .m-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .82rem; color: var(--m-mute); }
.m261 .m-crumbs li + li::before { content: '/'; margin-right: .4rem; opacity: .6; }
.m261 .m-crumbs a { color: var(--m-mute); }
.m261 .m-crumbs [aria-current] { color: var(--m-ink); }

.m261 .m-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: end; }
.m261 .m-hero-unit { margin: 0; align-self: end; position: relative; display: flex; justify-content: center; }
.m261 .m-hero-unit img { display: block; height: min(640px, 68vh); min-height: 420px; width: auto; filter: drop-shadow(14px 6px 10px rgba(24,35,45,.18)); }
.m261 .m-hero-unit figcaption { position: absolute; left: 0; bottom: 1.5rem; font-size: .78rem; color: var(--m-mute); writing-mode: vertical-rl; transform: rotate(180deg); }
.m261 .m-hero-copy { padding-bottom: 4rem; }
.m261 .m-maker { display: flex; align-items: center; gap: .8rem; margin: 0 0 .9rem; font-size: .9rem; color: var(--m-mute); }
.m261 .m-maker img { height: 16px; width: auto; filter: brightness(0) saturate(100%); opacity: .82; }
html[data-theme='dark'] .m261 .m-maker img { filter: none; opacity: 1; }
.m261 .m-hero h1 {
  font-family: var(--m-cond); font-weight: 700;
  font-size: clamp(3rem, 7.4vw, 5.6rem); line-height: .92; letter-spacing: -.015em;
  margin: 0; color: var(--m-ink);
}
.m261 .m-hero-sub { font-family: var(--m-cond); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 500; margin: .9rem 0 .5rem; }
.m261 .m-hero-lead { margin: 0; color: var(--m-mute); line-height: 1.65; max-width: 48ch; }

/* the rating plate: riveted, ruled, values set large */
.m261 .m-plate {
  position: relative; margin-top: 1.8rem; padding: 1.1rem 1.3rem .8rem;
  background: var(--m-plate); border: 1.5px solid var(--m-ink); border-radius: 5px;
  box-shadow: inset 0 0 0 4px var(--m-plate), inset 0 0 0 5px var(--m-line);
}
.m261 .m-plate::before, .m261 .m-plate::after {
  content: ''; position: absolute; top: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 25%, #9aa6b0 60%, #6d7983 100%);
}
.m261 .m-plate::before { left: 9px; }
.m261 .m-plate::after { right: 9px; }
.m261 .m-plate dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.m261 .m-plate dl > div { padding: .6rem 0; border-bottom: 1px solid var(--m-line); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.m261 .m-plate dl > div:nth-child(odd):not(.m-plate-wide) { padding-right: 1rem; border-right: 1px solid var(--m-line); }
.m261 .m-plate dl > div:nth-child(even) { padding-left: 1rem; }
.m261 .m-plate .m-plate-wide { grid-column: 1 / -1; }
.m261 .m-plate dt { font-size: .82rem; color: var(--m-mute); }
.m261 .m-plate dd { margin: 0; font-family: var(--m-cond); font-weight: 600; font-size: 1.12rem; text-align: right; }
.m261 .m-plate .m-plate-big { flex-direction: column; align-items: flex-start; gap: 0; }
.m261 .m-plate .m-plate-big dd { font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 700; line-height: 1; text-align: left; }
.m261 .m-plate sup { font-size: .7em; }
.m261 .m-plate p { margin: .55rem 0 0; font-size: .76rem; color: var(--m-mute); }

/* the ENERGY STORAGE label stripe, used once, along the hero's foot */
.m261 .m-stripe { height: 12px; background: var(--m-blue); position: relative; }
.m261 .m-stripe span { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; background: var(--m-green); clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%); }

/* ─── IN-PAGE NAV ─── */
.m261 .m-subnav { position: sticky; top: var(--nav-h); z-index: 20; background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
.m261 .m-subnav ul { display: flex; gap: 1.6rem; margin: 0 auto; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.m261 .m-subnav ul::-webkit-scrollbar { display: none; }
.m261 .m-subnav a { display: block; white-space: nowrap; padding: .95rem 0 .8rem; font-size: .88rem; color: var(--m-mute); text-decoration: none; border-bottom: 3px solid transparent; }
.m261 .m-subnav a:hover { color: var(--m-ink); }
.m261 .m-subnav a[aria-current="true"] { color: var(--m-ink); border-bottom-color: var(--m-blue); }

/* ─── OVERVIEW ─── */
.m261 .m-overview { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 2.5rem 4.5rem; align-items: start; }
.m261 .m-prose { margin-top: 1.4rem; }
.m261 .m-prose p { font-size: 1.05rem; line-height: 1.75; margin: 0 0 1rem; max-width: 66ch; }
.m261 .m-aside { margin-top: 1.6rem; padding-left: 1rem; border-left: 3px solid var(--m-green); color: var(--m-mute); font-size: .92rem; line-height: 1.6; max-width: 60ch; }

.m261 .m-media { margin: 0; position: relative; background: var(--m-line); border-radius: 3px; overflow: hidden; }
.m261 .m-media img, .m261 .m-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.m261 .m-media figcaption {
  position: absolute; left: .6rem; bottom: .6rem; max-width: calc(100% - 1.2rem);
  padding: .35rem .55rem; background: var(--m-bg); color: var(--m-ink); border-radius: 2px;
  font-size: .76rem; line-height: 1.35;
}
.m261 .m-overview-clip { aspect-ratio: 3 / 4; }

/* ─── ADVANTAGES (the brief's own three-column table) ─── */
.m261 .m-adv { width: 100%; border-collapse: collapse; font-size: .95rem; }
.m261 .m-adv thead th { text-align: left; font-size: .82rem; font-weight: 600; color: var(--m-mute); padding: 0 1.2rem .8rem 0; }
.m261 .m-adv tbody th, .m261 .m-adv td { text-align: left; vertical-align: top; padding: 1.1rem 1.2rem 1.1rem 0; border-top: 1px solid var(--m-line); line-height: 1.55; }
.m261 .m-adv tbody th { font-family: var(--m-cond); font-weight: 600; font-size: 1.15rem; width: 26%; }
.m261 .m-adv td:nth-child(2) { width: 36%; }
.m261 .m-adv td:last-child { color: var(--m-mute); }

/* ─── SPECS + OPERATION ─── */
.m261 .m-tech { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4.5rem; align-items: start; }
.m261 .m-specs { margin: 0; }
.m261 .m-specs > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--m-line); }
.m261 .m-specs > div:first-child { border-top: 1px solid var(--m-line); }
.m261 .m-specs dt { color: var(--m-mute); font-size: .9rem; }
.m261 .m-specs dd { margin: 0; font-weight: 600; font-size: .94rem; line-height: 1.5; }
.m261 .m-specs dd small { display: block; font-weight: 400; color: var(--m-mute); font-size: .82rem; }

.m261 .m-diagram {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center;
  padding: 1.2rem; border: 1px solid var(--m-line); border-radius: 3px; background: var(--m-steel);
  margin-bottom: 1.8rem;
}
.m261 .m-dg-title { font-family: var(--m-cond); font-weight: 600; font-size: 1rem; margin-bottom: .2rem; }
.m261 .m-dg-site, .m261 .m-dg-unit { display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; }
.m261 .m-dg-site span:not(.m-dg-title) { padding: .35rem 0; border-bottom: 1px solid var(--m-line); }
.m261 .m-dg-unit {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem;
  background: var(--m-bg); border: 1.5px solid var(--m-ink); border-radius: 3px; padding: .8rem;
  border-bottom: 6px solid var(--m-blue);
}
.m261 .m-dg-unit .m-dg-title { grid-column: 1 / -1; }
.m261 .m-dg-unit span:not(.m-dg-title) { text-align: center; padding: .4rem .2rem; background: var(--m-steel); border-radius: 2px; font-size: .8rem; font-weight: 600; }
.m261 .m-dg-link { position: relative; align-self: stretch; display: flex; align-items: center; padding: 0 .8rem; }
.m261 .m-dg-link::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--m-ink); }
.m261 .m-dg-acc { position: relative; background: var(--m-steel); border: 1.5px dashed var(--m-ink); padding: .45rem .55rem; font-size: .78rem; font-weight: 600; text-align: center; line-height: 1.3; max-width: 8.5rem; }
.m261 .m-dg-acc small { font-weight: 400; color: var(--m-mute); font-size: .72rem; }
.m261 .m-dg-cloud { grid-column: 1 / -1; margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--m-line); font-size: .82rem; color: var(--m-mute); }

.m261 .m-steps { counter-reset: s; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.m261 .m-steps li { counter-increment: s; display: grid; grid-template-columns: 1.8rem 1fr; column-gap: .9rem; }
.m261 .m-steps li::before { content: counter(s); grid-row: span 2; font-family: var(--m-cond); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--m-blue); }
.m261 .m-steps h4 { margin: 0 0 .2rem; font-size: 1rem; }
.m261 .m-steps p { margin: 0; color: var(--m-mute); font-size: .92rem; line-height: 1.6; }

/* ─── DOWNLOADS ─── */
.m261 .m-files { list-style: none; margin: 0; padding: 0; }
.m261 .m-file { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem auto; gap: .6rem 1.6rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--m-line); }
.m261 .m-file h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.m261 .m-file p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--m-mute); max-width: 76ch; }
.m261 .m-file-size { font-size: .84rem; color: var(--m-mute); white-space: nowrap; }
.m261 .m-file .m-btn { min-width: 6.5rem; }
.m261 .m-file-main { padding: 1.4rem 1.4rem; margin-bottom: .4rem; background: var(--m-bg); border: 1.5px solid var(--m-ink); border-radius: 3px; }
.m261 .m-file-main h3 { font-family: var(--m-cond); font-size: 1.3rem; }

/* ─── TECHNICAL FILE REQUEST ─── */
.m261 .m-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4.5rem; align-items: start; }
.m261 .m-lede { font-size: 1.05rem; line-height: 1.7; margin: 1.2rem 0 0; max-width: 52ch; }
.m261 .m-docs { margin: 1.2rem 0 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.m261 .m-docs li { break-inside: avoid; padding: .55rem 0 .55rem 1.1rem; position: relative; border-bottom: 1px solid var(--m-line); font-size: .95rem; }
.m261 .m-docs li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 6px; height: 6px; background: var(--m-green); }
.m261 .m-form { padding: 1.8rem; background: var(--m-steel); border-top: 6px solid var(--m-blue); border-radius: 3px; }
.m261 .m-form h3 { font-family: var(--m-cond); font-weight: 600; font-size: 1.5rem; margin: 0 0 .4rem; }
.m261 .m-form-product { margin: 0 0 1.3rem; font-size: .92rem; color: var(--m-mute); }
.m261 .m-form-product b { color: var(--m-ink); }
.m261 .m-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.m261 .m-form input[type="email"] {
  width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--m-ink); border-radius: 3px;
  background: var(--m-bg); color: var(--m-ink); font: inherit; font-size: 1rem;
}
.m261 .m-form input[type="email"]::placeholder { color: var(--m-mute); }
.m261 .m-form input[type="email"]:focus-visible { outline: 3px solid var(--m-blue); outline-offset: 1px; }
.m261 .m-form input[aria-invalid="true"] { border-color: #b4202c; }
.m261 .m-field-error { display: block; min-height: 1.3em; margin-top: .35rem; font-size: .84rem; color: #b4202c; }
html[data-theme='dark'] .m261 .m-field-error { color: #ff9aa2; }
.m261 .m-check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; font-size: .9rem !important; line-height: 1.5; margin: .4rem 0 1.4rem !important; cursor: pointer; }
.m261 .m-check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--m-blue); flex: none; }
.m261 .m-form .m-btn { width: 100%; padding: .95rem 1.3rem; }
.m261 .m-form .m-btn[disabled] { opacity: .6; cursor: progress; }
.m261 .m-form-legal { margin: 1rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--m-mute); }
.m261 .m-form-legal a { color: var(--m-blue); text-decoration: underline; }
.m261 .m-form-status { margin-top: 1rem; font-size: .92rem; line-height: 1.55; }
.m261 .m-form-status:empty { display: none; }
.m261 .m-form-status.is-success { padding: .85rem 1rem; border-left: 4px solid var(--m-green); background: var(--m-bg); }
.m261 .m-form-status.is-error { padding: .85rem 1rem; border-left: 4px solid #b4202c; background: var(--m-bg); }
.m261 .m-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ─── MEDIA ─── */
.m261 .m-video { position: relative; aspect-ratio: 16 / 9; background: var(--m-ink); border-radius: 3px; overflow: hidden; }
.m261 .m-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m261 .m-video .consent-embed-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .9rem;
  padding: 2rem; color: #fff; text-align: left;
  background: linear-gradient(0deg, rgba(24,35,45,.92) 0%, rgba(24,35,45,.35) 70%), url('/images/ztt/m261/m261-row-poster.webp') center / cover;
}
.m261 .m-video .consent-embed-placeholder p { color: #d3dde5; max-width: 48ch; margin: .3rem 0 0; }
.m261 .m-video-meta { margin: .8rem 0 0; font-size: .88rem; color: var(--m-mute); }

.m261 .m-gallery {
  display: grid; gap: .8rem; margin-top: 2.8rem;
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px;
  grid-template-areas:
    "open row     row  city"
    "open install site solar"
    "ware ware    site solar";
}
.m261 .m-motion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .9rem; }
.m261 .m-motion p { margin: 0; font-size: .84rem; color: var(--m-mute); }
.m261 .m-motion button { font: 600 .84rem/1 'Inter', sans-serif; padding: .55rem .9rem; border: 1.5px solid var(--m-ink); border-radius: 3px; background: transparent; color: var(--m-ink); cursor: pointer; }
.m261 .m-motion button:hover { background: var(--m-ink); color: var(--m-bg); }

.m261 .m-factory { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 2rem 3rem; align-items: center; margin-top: 4.5rem; }
.m261 .m-factory .m-media { aspect-ratio: 16 / 9; }
.m261 .m-factory p { color: var(--m-mute); line-height: 1.7; margin: 0 0 1.2rem; }

/* ─── INSTALLATIONS: one ledger row per project ─── */
.m261 .m-installs { list-style: none; margin: 0; padding: 0; }
.m261 .m-install { display: grid; grid-template-columns: 220px minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem 2rem; align-items: start; padding: 1.4rem 0; border-bottom: 1px solid var(--m-line); }
.m261 .m-install:first-child { padding-top: 0; }
.m261 .m-install img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; background: var(--m-line); }
.m261 .m-install h3 { margin: 0 0 .3rem; font-family: var(--m-cond); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.m261 .m-install h3 a { color: var(--m-ink); text-decoration: underline; text-decoration-color: var(--m-line); text-underline-offset: 4px; }
.m261 .m-install h3 a:hover { text-decoration-color: var(--m-blue); color: var(--m-blue); }
.m261 .m-install-head p { margin: 0; color: var(--m-mute); font-size: .9rem; }
.m261 .m-install dl { margin: 0; display: grid; gap: .5rem; }
.m261 .m-install dl div { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; font-size: .9rem; line-height: 1.5; }
.m261 .m-install dt { color: var(--m-mute); }
.m261 .m-install dd { margin: 0; }

/* ─── CONTACT ─── */
.m261 .m-contact { background: var(--m-blue); color: #fff; padding: 4.5rem 0; position: relative; }
html[data-theme='dark'] .m261 .m-contact { background: #173a78; }
.m261 .m-contact::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 18%; background: var(--m-green); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
html[data-theme='dark'] .m261 .m-contact::after { background: #2ba84a; }
.m261 .m-contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem 4rem; align-items: end; }
.m261 .m-contact p { color: #dce6f6; line-height: 1.7; max-width: 54ch; margin: 1rem 0 0; }
.m261 .m-contact-list { font-style: normal; display: grid; gap: .45rem; }
.m261 .m-contact-list a { color: #fff; font-size: 1.02rem; }
.m261 .m-btn-light { background: #fff; border-color: #fff; color: #18232d; }
.m261 .m-btn-light:hover { background: #18232d; border-color: #18232d; color: #fff; }
.m261 .m-btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.m261 .m-btn-ghost:hover { background: #fff; color: #18232d; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1080px) {
  .m261 .m-gallery {
    grid-template-columns: 1fr 1fr; grid-auto-rows: 240px;
    grid-template-areas: "row row" "open city" "open install" "site solar" "site solar" "ware ware";
  }
  .m261 .m-install { grid-template-columns: 180px minmax(0, 1fr); }
  .m261 .m-install dl { grid-column: 2; }
  .m261 .m-contact::after { width: 12%; }
}
@media (max-width: 860px) {
  .m261 .m-sec { padding: 4rem 0; }
  .m261 .m-hero-grid, .m261 .m-overview, .m261 .m-tech, .m261 .m-access, .m261 .m-factory, .m261 .m-contact-grid { grid-template-columns: 1fr; }
  .m261 .m-hero-unit { order: 2; max-width: 480px; margin-inline: auto; }
  .m261 .m-hero-unit { margin-top: 1rem; }
  .m261 .m-hero-unit img { height: auto; min-height: 0; width: min(62vw, 300px); }
  .m261 .m-hero-unit figcaption { display: none; }
  .m261 .m-hero-copy { padding-bottom: 0; }
  .m261 .m-overview-clip { max-width: 380px; }
  .m261 .m-adv thead { display: none; }
  .m261 .m-adv, .m261 .m-adv tbody, .m261 .m-adv tr, .m261 .m-adv th, .m261 .m-adv td { display: block; width: auto !important; }
  .m261 .m-adv tr { padding: 1rem 0; border-top: 1px solid var(--m-line); }
  .m261 .m-adv tbody th, .m261 .m-adv td { border: 0; padding: .15rem 0; }
  .m261 .m-contact::after { display: none; }
}
@media (max-width: 640px) {
  body.m261 { --m-wrap: calc(100% - 2rem); }
  .m261 .m-plate dl { grid-template-columns: 1fr; }
  .m261 .m-plate dl > div:nth-child(odd):not(.m-plate-wide) { padding-right: 0; border-right: 0; }
  .m261 .m-plate dl > div:nth-child(even) { padding-left: 0; }
  .m261 .m-plate .m-plate-big { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .m261 .m-diagram { grid-template-columns: 1fr; gap: 0; }
  .m261 .m-dg-link { justify-content: center; padding: .9rem 0; }
  .m261 .m-dg-link::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid var(--m-ink); }
  .m261 .m-specs > div { grid-template-columns: 1fr; gap: .1rem; }
  .m261 .m-file { grid-template-columns: minmax(0, 1fr) auto; }
  .m261 .m-file > div { grid-column: 1 / -1; }
  .m261 .m-file-main { padding: 1.1rem; }
  .m261 .m-docs { columns: 1; }
  .m261 .m-form { padding: 1.3rem; }
  .m261 .m-gallery { gap: .6rem; grid-auto-rows: 190px; }
  .m261 .m-media figcaption { font-size: .7rem; left: .4rem; bottom: .4rem; }
  .m261 .m-video:has(.consent-embed-placeholder:not([hidden])) { aspect-ratio: auto; min-height: 300px; }
  .m261 .m-video .consent-embed-placeholder { padding: 1.3rem; }
  .m261 .m-install { grid-template-columns: 1fr; }
  .m261 .m-install dl { grid-column: auto; }
  .m261 .m-install dl div { grid-template-columns: 6.5rem 1fr; }
}
@media (max-width: 380px) {
  .m261 .m-gallery { grid-template-columns: 1fr; grid-template-areas: none; grid-auto-rows: 320px; }
  .m261 .m-gallery .m-media { grid-area: auto !important; }
}