/* /architectural-lighting-control/ (#9034). Ported from the approved v1 mockup
   (_kim/mockups/architectural-page/). Built on the ENTTEC design system tokens; everything is
   scoped under .arch2 and body.arch-page. Sections are labelled by mockup version (v2.x / v3.x)
   because later blocks deliberately override earlier ones; a consolidation pass is still due
   (it was not done before launch on 2026-10-05). */

/* ---- page chrome: same treatment as the project pages ---- */
body.arch-page #wrapper > header.header { display: none; }
body.arch-page.noBannerApplied { --navbar-header-color: #fff; --navbar-header-color-light: #fff; --header-icons: 0; }
body.arch-page.noBannerApplied #navbar .white-logo { display: block !important; }
body.arch-page.noBannerApplied #navbar .black-logo { display: none !important; }
body.arch-page main { padding: 0 !important; max-width: none !important; }

/* --a-pad: every section band's top/bottom spacing (Kim, 2026-10-05: was 140px, copied 8 times). */
.arch2 { --a-pad: clamp(48px, 7vw, 96px); --a-night: #070a0f; --a-night-2: #0d131b; --a-line: rgba(255,255,255,.12); --a-soft: rgba(255,255,255,.72); --a-link: var(--enttec-blue); }
.arch2 h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
.arch2 h3 { font-size: 19px; line-height: 1.25; font-weight: 600; }
.arch2 p { margin: 0; }
.arch2 section { position: relative; }

/* ============ 1. HERO ============ */
.a-hero { display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--a-night); }
.a-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
/* The scrim is what makes the text readable: dark from the left and from the bottom,
   so the facade stays bright on the right where the text is not. */
.a-hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7,10,15,.92) 0%, rgba(7,10,15,.72) 38%, rgba(7,10,15,.15) 70%, rgba(7,10,15,0) 100%),
  linear-gradient(0deg, rgba(7,10,15,.85) 0%, rgba(7,10,15,0) 45%); }
.a-hero__inner { position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding-top: clamp(120px, 10vw, 150px); padding-bottom: clamp(48px, 5vw, 72px); }
.a-hero__kicker { color: var(--enttec-blue); font-weight: 600; font-size: 16px; margin-bottom: 18px !important; }
.a-hero h1 { color: #fff; font-size: clamp(38px, 6.6vw, 96px); line-height: .98; letter-spacing: -.035em; font-weight: 800; max-width: none; text-wrap: balance; }
.a-hero__lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: rgba(255,255,255,.88); max-width: 36em; margin-top: 26px !important; }
.a-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.a-hero__credit { position: absolute; right: var(--eds-container-pad); bottom: 22px; z-index: 1; font-size: 13px; color: rgba(255,255,255,.62); }

/* ============ 2. NEEDS ============ */
.a-needs { padding: var(--a-pad) 0; background: #fff; }
.a-needs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.a-needs__head { position: sticky; top: 120px; }
.a-needs__head p { color: var(--enttec-muted); font-size: 18px; line-height: 1.55; margin-top: 20px; max-width: 40ch; }
.a-needs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.a-needs__list li { padding: 30px 0; border-top: 1px solid var(--enttec-line); }
.a-needs__list svg { width: 34px; height: 34px; fill: none; stroke: var(--enttec-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.a-needs__list svg .x { stroke: var(--enttec-muted); }
.a-needs__list p { color: var(--enttec-muted); margin-top: 8px; line-height: 1.55; }

/* ============ 3. SYSTEM (the bold moment) ============ */
.a-system { background: radial-gradient(1200px 500px at 15% 0%, rgba(14,165,223,.18), transparent 60%), radial-gradient(900px 500px at 90% 100%, rgba(127,84,179,.16), transparent 60%), var(--a-night); color: #fff; padding: var(--a-pad) 0; overflow: hidden; }
.a-system h2, .a-system h3 { color: #fff; }
.a-system__head { max-width: 640px; margin-bottom: 64px; }
.a-system__head p { color: var(--a-soft); font-size: 18px; margin-top: 18px; }
.a-chain { --chain-gap: clamp(40px, 3.6vw, 64px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--chain-gap); row-gap: 28px; position: relative; }
/* The signal line runs behind the four nodes; a single pulse travels along it. */
.a-chain::before { content: ""; position: absolute; left: 4%; right: 4%; top: 222px; height: 2px; background: rgba(14,165,223,.28); }
.a-chain::after { content: ""; position: absolute; left: 4%; top: 219px; width: 140px; height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, transparent, var(--enttec-blue), #fff, var(--enttec-blue), transparent); filter: blur(1px);
  animation: a-pulse 5.5s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes a-pulse { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(92vw - 160px)); opacity: 0; } }
.a-stage { position: relative; }
.a-stage__art { height: 190px; display: flex; align-items: flex-end; justify-content: center; }
.a-stage__art img { max-height: 180px; max-width: 100%; width: auto; height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.a-stage__art--pair img { max-width: 58%; }
.a-stage__art--pair img + img { margin-left: -14%; transform: translateY(14px); }
.a-stage__node { display: block; width: 18px; height: 18px; border-radius: 50%; margin: 24px 0 26px; background: var(--a-night); border: 2px solid var(--enttec-blue); box-shadow: 0 0 0 6px rgba(14,165,223,.14), 0 0 22px rgba(14,165,223,.6); position: relative; z-index: 1; }
.a-stage p { color: var(--a-soft); margin-top: 8px; line-height: 1.5; }
.a-stage__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px !important; }
.a-stage__links a { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; padding: 7px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,.28); transition: border-color .2s, background .2s; }
.a-stage__links a:hover { border-color: var(--enttec-blue); background: rgba(14,165,223,.12); }
.a-stage__links a:focus-visible { outline: 3px solid var(--enttec-blue); outline-offset: 2px; }

/* ============ 4. SIZES ============ */
.a-sizes { background: var(--enttec-panel); padding: var(--a-pad) 0; }
.a-sizes__head { max-width: 640px; margin-bottom: 48px; }
.a-sizes__head p { color: var(--enttec-muted); font-size: 18px; margin-top: 18px; }
.a-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -40px rgba(16,40,60,.35); }
.a-table-scroll:focus-visible { outline: 3px solid var(--a-link); outline-offset: 3px; }
.a-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.a-table th, .a-table td { padding: 18px 24px; text-align: left; vertical-align: top; font-size: 16px; border-bottom: 1px solid var(--enttec-line); }
.a-table tbody tr:last-child > * { border-bottom: 0; }
.a-table tbody th { color: var(--enttec-muted); font-weight: 600; width: 18%; }
.a-table thead th { padding-top: 36px; padding-bottom: 26px; position: relative; }
.a-table thead img { display: block; height: 120px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 20px; filter: drop-shadow(0 16px 18px rgba(16,40,60,.18)); }
.a-table__tier { display: block; font-family: var(--enttec-font-display); font-size: 20px; font-weight: 700; color: var(--enttec-ink); line-height: 1.2; }
.a-table__fit { display: block; font-size: 15px; color: var(--enttec-muted); font-weight: 400; margin-top: 6px; }
.a-table td strong { font-family: var(--enttec-font-display); font-size: 22px; color: var(--enttec-ink); }
/* The middle column is the common case: tint it top to bottom and flag it. */
.a-table .is-common { background: rgba(14,165,223,.06); }
.a-table thead .is-common { border-top: 3px solid var(--enttec-blue); }
.a-table__flag { position: absolute; top: 12px; left: 24px; font-size: 13px; font-weight: 600; color: var(--a-link); }

/* ============ 5. PROJECTS ============ */
.a-projects { background: var(--a-night); color: #fff; padding: var(--a-pad) 0; }
.a-projects h2 { color: #fff; }
.a-projects__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; }
.a-projects__head p { color: var(--a-soft); font-size: 18px; max-width: 34ch; }
.a-mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; gap: 16px; }
.a-tile--feature { grid-column: span 2; grid-row: span 2; }
.a-tile a { position: relative; display: block; height: 100%; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; background: var(--a-night-2); }
.a-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--eds-ease); }
.a-tile a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,10,15,.88) 0%, rgba(7,10,15,.25) 45%, rgba(7,10,15,0) 70%); }
.a-tile a:hover img { transform: scale(1.06); }
.a-tile a:focus-visible { outline: 3px solid var(--enttec-blue); outline-offset: 3px; }
.a-tile__text { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.a-tile__meta { font-size: 13px; color: rgba(255,255,255,.75); }
.a-tile__title { font-family: var(--enttec-font-display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.a-tile--feature .a-tile__title { font-size: clamp(26px, 2.6vw, 36px); }
.a-tile__products { font-size: 14px; color: var(--enttec-blue); }
.a-projects__more { margin-top: 40px !important; }

/* ============ 6. WHY ============ */
.a-why { background: #fff; padding: var(--a-pad) 0; }
.a-why__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.a-why__fig { margin: 0; border-radius: 22px; overflow: hidden; background: var(--a-night); aspect-ratio: 16 / 10; box-shadow: var(--eds-shadow-lift); }
.a-why__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-why__list { list-style: none; margin: 36px 0 0; padding: 0; }
.a-why__list li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--enttec-line); }
.a-why__list p { color: var(--enttec-muted); font-size: 17px; line-height: 1.55; }

/* ============ 7. FAQ ============ */
.a-faq { background: var(--enttec-panel); padding: clamp(48px, 5vw, 72px) 0; }
.a-faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.a-faq__head { position: sticky; top: 120px; }
.a-faq__head p { color: var(--enttec-muted); font-size: 18px; margin: 18px 0 26px; max-width: 34ch; }
.a-faq__list { max-width: 760px; }
.a-faq__list summary { font-size: 19px; padding-top: 18px; padding-bottom: 18px; }
.a-faq__list .eds-accordion__body p { font-size: 17px; line-height: 1.6; max-width: 62ch; }

/* ============ 8. CLOSE ============ */
.a-close { display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--a-night); }
.a-close__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.a-close__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,15,.9) 0%, rgba(7,10,15,.6) 50%, rgba(7,10,15,.2) 100%); }
.a-close__inner { position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding-block: clamp(56px, 6vw, 88px); }
.a-close h2 { color: #fff; max-width: 16ch; }
.a-close p { color: rgba(255,255,255,.85); font-size: 19px; max-width: 46ch; margin-top: 20px; }
.a-close__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .a-chain { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .a-chain::before, .a-chain::after { display: none; }
  .a-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
}
@media (max-width: 860px) {
  .a-needs__grid, .a-why__grid, .a-faq__grid { grid-template-columns: 1fr; }
  .a-needs__head, .a-faq__head { position: static; }
  .a-needs__list { grid-template-columns: 1fr; }
  .a-why__list li { grid-template-columns: 1fr; gap: 6px; }
  .a-projects__head { flex-direction: column; align-items: start; }
}
@media (max-width: 600px) {
  .a-hero h1 { font-size: 40px; }
  .a-hero__scrim { background: linear-gradient(0deg, rgba(7,10,15,.95) 0%, rgba(7,10,15,.7) 55%, rgba(7,10,15,.25) 100%); }
  .a-hero__credit { display: none; }
  .a-chain { grid-template-columns: 1fr; }
  .a-mosaic { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .a-tile--feature { grid-column: auto; grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .a-chain::after { animation: none; display: none; }
  .a-tile img { transition: none; }
  .a-tile a:hover img { transform: none; }
}

/* ELM is software: show it as an angled screen, the same treatment the ELM 2026 page uses. */
.a-stage__art--screen { perspective: 900px; }
.a-stage__art--screen img { max-height: 160px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14);
  transform: rotateY(18deg) rotateX(4deg); box-shadow: 0 30px 50px -20px rgba(0,0,0,.8), 0 0 40px rgba(14,165,223,.22); filter: none; }

/* v2.1: homepage product photography. Those are square shots on a light grey ground,
   so they read as tiles (the homepage's own treatment), not as floating cut-outs.
   Every stage's art row is the same height, so the signal line can sit at one fixed y. */
.a-stage__art { height: 150px; gap: 12px; justify-content: flex-start; align-items: flex-end; }
.a-stage__art img, .a-stage__art--pair img, .a-stage__art--pair img + img {
  width: 150px; height: 150px; max-width: none; max-height: none; object-fit: contain;
  margin: 0; transform: none; background: transparent; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)); }
/* A soft spotlight behind the products so the black housings separate from the dark band. */
.a-stage__art { position: relative; }
.a-stage__art::before { content: ""; position: absolute; left: -10%; right: 20%; bottom: -10px; height: 120%; z-index: -1;
  background: radial-gradient(closest-side, rgba(14,165,223,.22), rgba(14,165,223,0)); pointer-events: none; }
.a-chain::before { top: 183px; }
.a-chain::after { top: 180px; }
.a-table thead img { height: 140px; width: 140px; object-fit: contain; background: transparent; filter: drop-shadow(0 14px 16px rgba(16,40,60,.2)); }
@media (max-width: 600px) { .a-stage__art img, .a-stage__art--pair img, .a-stage__art--pair img + img { width: 140px; height: 140px; } .a-stage__art { height: 140px; } }

/* ELM is software: its white 2026 logo stands in for a product shot on the dark band. */
.a-stage__art img.a-stage__logo { width: auto; height: 130px; filter: drop-shadow(0 0 24px rgba(14,165,223,.35)); }

/* Each column shows every product it names (e.g. S-PLAY SP1-1 AND OCTO MK3). */
.a-table__pair { display: flex; align-items: flex-end; gap: 4px; height: 130px; margin-bottom: 20px; }
.a-table__pair img, .a-table thead .a-table__pair img { height: 120px; width: auto; max-width: 48%; margin: 0; object-fit: contain; }

/* v2.2 signal line fix. The line runs from the centre of the first node to the centre
   of the last one (nodes sit 9px into each 1/4 column, columns gap var(--chain-gap)), and the pulse
   is painted INSIDE the line as a moving background, so it can never overrun the ends. */
.a-chain { --col: calc((100% - 3 * var(--chain-gap)) / 4); }
.a-chain::before {
  left: 9px; right: calc(var(--col) - 9px); top: 182px; height: 3px; border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(14,165,223,0), var(--enttec-blue) 35%, #fff 50%, var(--enttec-blue) 65%, rgba(14,165,223,0)) no-repeat,
    rgba(14,165,223,.3);
  background-size: 160px 100%, 100% 100%;
  background-position: -160px 0, 0 0;
  box-shadow: 0 0 10px rgba(14,165,223,.25);
  animation: a-line-pulse 5.5s cubic-bezier(.45,.05,.55,.95) infinite;
}
.a-chain::after { display: none; }
@keyframes a-line-pulse {
  from { background-position: -160px 0, 0 0; }
  to   { background-position: calc(100% + 160px) 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .a-chain::before { animation: none; background-position: -160px 0, 0 0; } }
@media (max-width: 1100px) { .a-chain::before { display: none; } }


/* v2.2: "What a permanent / install needs". The measure fits "What a permanent" (16
   characters) but not "What a permanent install", and balance keeps the two lines even. */
.a-needs__head h2 { max-width: 17ch; text-wrap: balance; }

/* v2.3: make the signal chain read as LIVE, not dim.
   Line: a brighter blue-to-violet base (the ELM page's two glows) with the white pulse on top.
   Nodes: solid lit blue with a white core, plus a ring that pings out as the pulse reaches
   each one. The pulse crosses the line in 5.5s, so the four pings are spaced across that. */
.a-chain::before {
  height: 4px; top: 180px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), var(--enttec-blue) 35%, #fff 50%, var(--enttec-blue) 65%, rgba(255,255,255,0)) no-repeat,
    linear-gradient(90deg, var(--enttec-blue), var(--enttec-blue) 50%, #8b6fd6);
  background-size: 180px 100%, 100% 100%;
  box-shadow: 0 0 14px rgba(14,165,223,.55), 0 0 2px rgba(255,255,255,.4);
}
.a-stage__node {
  width: 20px; height: 20px; margin: 22px 0 24px; transform: translateX(-1px);
  background: radial-gradient(circle, #fff 0 3px, var(--enttec-blue) 4px 6px, var(--enttec-blue) 7px);
  border: 0; box-shadow: 0 0 0 4px rgba(14,165,223,.18), 0 0 18px 2px rgba(14,165,223,.75);
}
.a-stage__node::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--enttec-blue);
  opacity: 0; animation: a-node-ping 5.5s cubic-bezier(.45,.05,.55,.95) infinite;
}
.a-stage:nth-child(1) .a-stage__node::after { animation-delay: 0s; }
.a-stage:nth-child(2) .a-stage__node::after { animation-delay: 1.65s; }
.a-stage:nth-child(3) .a-stage__node::after { animation-delay: 3.1s; }
.a-stage:nth-child(4) .a-stage__node::after { animation-delay: 4.5s; }
@keyframes a-node-ping {
  0%   { transform: scale(1);   opacity: .9; }
  25%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .a-stage__node::after { animation: none; display: none; } }
/* ELM HUB alone: let it use the full pair width. */
.a-table__pair img:only-child { max-width: 100%; }

/* v2.4 Why ENTTEC: About-page photography. Team photo leads; each reason has its own photo. */
.a-why__grid { grid-template-columns: 6fr 6fr; align-items: stretch; }
.a-why__fig { aspect-ratio: auto; min-height: 100%; }
.a-why__list li { grid-template-columns: 148px 1fr; align-items: center; gap: 24px; padding: 22px 0; }
.a-why__list li > img { width: 148px; height: 100px; object-fit: cover; border-radius: 12px; display: block; }
.a-why__list h3 { margin-bottom: 6px; }
@media (max-width: 860px) { .a-why__fig { aspect-ratio: 3 / 2; } .a-why__list li { grid-template-columns: 112px 1fr; } .a-why__list li > img { width: 112px; height: 80px; } }
/* The award graphic carries its text on the left: keep that side in the crop. */
.a-why__list li:first-child > img { object-position: 0 50%; }

/* v2.5: the pulse needs contrast. The resting line drops to a deep, dim blue-violet so the
   travelling light (bright cyan with a white core) is what you see moving. */
.a-chain::before {
  height: 4px; top: 180px;
  background:
    linear-gradient(90deg, rgba(14,165,223,0) 0%, rgba(14,165,223,.9) 20%, var(--enttec-blue) 38%, #fff 50%, var(--enttec-blue) 62%, rgba(14,165,223,.9) 80%, rgba(14,165,223,0) 100%) no-repeat,
    linear-gradient(90deg, rgba(14,165,223,.32), rgba(139,111,214,.32));
  background-size: 260px 100%, 100% 100%;
  background-position: -260px 0, 0 0;
  box-shadow: 0 0 8px rgba(14,165,223,.35);
  animation-name: a-line-pulse-2;
}
@keyframes a-line-pulse-2 {
  from { background-position: -260px 0, 0 0; }
  to   { background-position: calc(100% + 260px) 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .a-chain::before { animation: none; } }

/* H1 on two lines, "Architectural / lighting control" (Kim, 2026-10-05, reversing v2.6's three):
   the base rule's text-wrap: balance picks that split, and the lede (36em) matches its width. */

/* v2.8 no flash on load: the theme adds .noBannerApplied with JS after load, so the white
   over-hero navbar must not wait for it. Same rules, keyed on the server-rendered class only. */
body.arch-page { --navbar-header-color: #fff; --navbar-header-color-light: #fff; --header-icons: 0; }
body.arch-page #navbar .white-logo { display: block !important; }
body.arch-page #navbar .black-logo { display: none !important; }

/* v2.9 needs icons: small looping animations that run on their own ("animate freely").
   Each loop has its own length so the six never move in step. Transforms, opacity and
   fill only, so they stay cheap. Reduced motion: every icon holds a finished, readable frame. */
.lc-tile { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(145deg, rgba(14,165,223,.12), rgba(14,165,223,.04)); margin-bottom: 18px; }
.lc { width: 44px; height: 44px; fill: none; stroke: var(--enttec-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lc * { transform-box: view-box; }

/* 24/7: a ring that never stops circling a play button */
.lc--loop .track { stroke: rgba(14,165,223,.22); }
.lc--loop .ring { stroke-dasharray: 28 72; transform-origin: 24px 24px; animation: lc-spin 2.4s linear infinite; }
.lc--loop .play { fill: var(--enttec-blue); stroke: none; transform-origin: 25px 24px; animation: lc-beat 2.4s ease-in-out infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }
@keyframes lc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }

/* Schedules: minute hand laps every 4s, hour hand every 48s */
.lc--clock .tick { stroke: rgba(14,165,223,.45); }
.lc--clock .hour, .lc--clock .min { transform-origin: 24px 24px; }
.lc--clock .min { animation: lc-spin 4s linear infinite; }
.lc--clock .hour { animation: lc-spin 48s linear infinite; }
.lc--clock .pin { fill: var(--enttec-blue); stroke: none; }

/* Network: waves leave the laptop, then each unit's status light answers */
.lc--net .w { opacity: 0; animation: lc-wave 2.8s ease-out infinite; }
.lc--net .w2 { animation-delay: .25s; }
.lc--net .led { fill: rgba(14,165,223,.25); stroke: none; animation: lc-led 2.8s steps(1) infinite; }
.lc--net .l1 { animation-delay: .7s; }
.lc--net .l2 { animation-delay: 1.1s; }
@keyframes lc-wave { 0% { opacity: 0; } 20% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes lc-led { 0% { fill: var(--enttec-blue); } 35%, 100% { fill: rgba(14,165,223,.25); } }

/* Scales: a level meter, each bar on its own rhythm */
.lc--bars .base { stroke: rgba(14,165,223,.45); }
.lc--bars .bar { fill: var(--enttec-blue); stroke: none; transform-origin: 0 36px; animation: lc-level 1.6s ease-in-out infinite alternate; }
.lc--bars .b1 { animation-duration: 1.3s; }
.lc--bars .b2 { animation-duration: 1.7s; animation-delay: -.4s; }
.lc--bars .b3 { animation-duration: 1.1s; animation-delay: -.9s; }
.lc--bars .b4 { animation-duration: 1.9s; animation-delay: -.2s; }
@keyframes lc-level { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Triggers: a spark runs down the wire into the building and the windows light up */
.lc--trigger .spark { fill: var(--enttec-blue); stroke: none; animation: lc-spark 3.2s ease-in infinite; }
.lc--trigger .win { fill: rgba(14,165,223,.15); stroke-width: 1.5; animation: lc-win 3.2s ease-out infinite; }
.lc--trigger .w2 { animation-delay: .12s; }
.lc--trigger .w3 { animation-delay: .24s; }
.lc--trigger .w4 { animation-delay: .36s; }
@keyframes lc-spark { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 34% { transform: translateX(15px); opacity: 1; } 40%, 100% { transform: translateX(15px); opacity: 0; } }
@keyframes lc-win { 0%, 36% { fill: rgba(14,165,223,.15); } 44%, 80% { fill: var(--enttec-blue); } 100% { fill: rgba(14,165,223,.15); } }

/* DIN rail: modules drop onto the rail one at a time, hold, then reset */
.lc--din .rail { stroke: rgba(14,165,223,.5); }
.lc--din .mod { fill: #fff; animation: lc-clip 3.6s cubic-bezier(.3,1.4,.5,1) infinite; }
.lc--din .m2 { animation-delay: .3s; }
.lc--din .m3 { animation-delay: .6s; }
@keyframes lc-clip { 0% { transform: translateY(-12px); opacity: 0; } 14% { transform: translateY(0); opacity: 1; } 78% { transform: translateY(0); opacity: 1; } 92%, 100% { transform: translateY(-12px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lc * { animation: none !important; }
  .lc--net .led, .lc--trigger .win { fill: var(--enttec-blue); }
  .lc--net .w { opacity: 1; }
  .lc--trigger .spark { opacity: 0; }
}

/* v3.0 product links: they must read as links to a product page, not as tags.
   Blue text, underline, a chevron that moves on hover; the visually hidden " product page"
   tells screen readers where each one goes. */
.a-stage__links { gap: 6px 22px; margin-top: 18px !important; }
.a-stage__links a.a-plink { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; border-radius: 0;
  background: none; color: var(--enttec-blue); font-size: 15px; font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(14,165,223,.45); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s; }
.a-plink svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--eds-ease); }
.a-stage__links a.a-plink:hover { color: #fff; background: none; text-decoration-color: #fff; text-decoration-thickness: 2px; }
.a-plink:hover svg { transform: translateX(3px); }
.a-stage__links a.a-plink:focus-visible { outline: 3px solid var(--enttec-blue); outline-offset: 3px; border-radius: 4px; }

/* v3.1 Why ENTTEC: no lead image. Heading, then one photo card per reason. */
.a-why__grid { display: block; }
.a-why__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.a-why__list li { display: flex; flex-direction: column; gap: 0; padding: 0; border-top: 0; }
.a-why__list li > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; margin-bottom: 22px; box-shadow: var(--eds-shadow-lift); }
.a-why__list li:first-child > img { object-position: 0 50%; }
.a-why__list h3 { font-size: 21px; margin-bottom: 8px; }
@media (max-width: 860px) { .a-why__list { grid-template-columns: 1fr; gap: 36px; } .a-why__list li > img { width: 100%; height: auto; } }


/* v3.4: light and dark alternate with clean edges (Kim preferred this to fades or all-dark).
   Why ENTTEC goes back to the side-image layout, with the office photo. */
.a-why__grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 100px); align-items: stretch; }
.a-why__fig { margin: 0; border-radius: 22px; overflow: hidden; min-height: 100%; aspect-ratio: auto; background: var(--enttec-panel); box-shadow: var(--eds-shadow-lift); }
.a-why__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-why__list { display: block; margin-top: 36px; }
.a-why__list li { display: grid; grid-template-columns: 148px 1fr; align-items: center; gap: 24px; padding: 22px 0; border-top: 1px solid var(--enttec-line); }
.a-why__list li > img { width: 148px; height: 100px; aspect-ratio: auto; object-fit: cover; border-radius: 12px; margin: 0; box-shadow: none; }
.a-why__list li:first-child > img { object-position: 0 50%; }
.a-why__list h3 { font-size: 19px; margin-bottom: 6px; }
@media (max-width: 860px) { .a-why__grid { grid-template-columns: 1fr; } .a-why__fig { aspect-ratio: 3 / 2; }
  .a-why__list li { grid-template-columns: 112px 1fr; } .a-why__list li > img { width: 112px; height: 80px; } }

/* v3.2 icons (restored): centred and heavier. The v1 rule `.a-needs__list svg { margin-bottom }` pushed
   every icon 8px above the tile centre; the tile owns the spacing now. */
.a-needs__list .lc { margin: 0; display: block; }
.lc-tile { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 20px; }
.lc { width: 50px; height: 50px; stroke-width: 2.6; }
.lc--loop .ring { stroke-width: 3.2; }
.lc--clock .min, .lc--clock .hour { stroke-width: 3; }
.lc--trigger .win { stroke-width: 2; }
/* Beat the v1 `.a-needs__list svg { stroke-width: 1.6 }` rule, which is more specific than `.lc`. */
.a-needs__list .lc, .a-why__reasons .lc { width: 50px; height: 50px; stroke-width: 2.6; stroke: var(--enttec-blue); }

/* v3.5: smaller icons in a smaller tile; stroke nudged up so lines keep their weight at the smaller size. */
.lc-tile { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 18px; }
.a-needs__list .lc, .a-why__reasons .lc { width: 36px; height: 36px; stroke-width: 2.8; }

/* v3.6: mirror the closing bridge photo so its empty sky sits on the left, behind the text. */
.a-close__img { transform: scaleX(-1); }

/* ===== v3.7 TABLET + MOBILE ===== */

/* 1. Header. Below 1200px the theme's header goes transparent once you scroll (the live project
   pages do the same; a site-wide theme issue). On this page, give it a solid frosted dark bar
   so content never shows through. */
@media (max-width: 1199px) {
  body.arch-page #navbar { background: rgba(10,14,20,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* 2. What a permanent install needs: two columns on tablet, compact icon-left rows on phone. */
@media (max-width: 860px) {
  .a-needs__list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .a-needs__list li { padding: 24px 0; }
}
@media (max-width: 600px) {
  .a-needs__head p { margin-bottom: 8px; }
  .a-needs__list { grid-template-columns: 1fr; }
  .a-needs__list li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 18px 0; }
  .a-needs__list .lc-tile { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; margin: 2px 0 0; }
  .a-needs__list .lc, .a-why__reasons .lc { width: 30px; height: 30px; }
  .a-why__reasons .lc-tile { width: 52px; height: 52px; border-radius: 14px; }
  .a-needs__list h3 { font-size: 17px; }
  .a-needs__list p { margin-top: 4px; font-size: 15px; }
}

/* 3. System chain goes VERTICAL below 1100px: nodes down the left, joined by a line, with the
   pulse running down each segment in turn (one segment per stage, staggered). */
@media (max-width: 1100px) {
  .a-chain { grid-template-columns: 1fr; row-gap: 48px; }
  .a-chain::before, .a-chain::after { display: none; }
  .a-stage { display: grid; grid-template-columns: 22px minmax(200px, 300px) 1fr; column-gap: 24px; align-items: start; position: relative; }
  .a-stage__art { grid-column: 2; grid-row: 1 / span 4; height: auto; justify-content: flex-start; }
  .a-stage__art img, .a-stage__art--pair img, .a-stage__art--pair img + img { width: 120px; height: 120px; }
  .a-stage__art img.a-stage__logo { width: auto; height: 110px; }
  .a-stage__node { grid-column: 1; grid-row: 1; margin: 4px 0 0; }
  .a-stage h3 { grid-column: 3; grid-row: 1; }
  .a-stage > p:not(.a-stage__links) { grid-column: 3; grid-row: 2; }
  .a-stage__links { grid-column: 3; grid-row: 3; }
  /* the segment from this node down to the next one */
  .a-stage:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 24px; width: 4px; height: calc(100% + 48px - 4px); border-radius: 4px;
    background:
      linear-gradient(180deg, rgba(14,165,223,0) 0%, rgba(14,165,223,.9) 20%, var(--enttec-blue) 38%, #fff 50%, var(--enttec-blue) 62%, rgba(14,165,223,.9) 80%, rgba(14,165,223,0) 100%) no-repeat,
      linear-gradient(180deg, rgba(14,165,223,.32), rgba(139,111,214,.32));
    background-size: 100% 120px, 100% 100%; background-position: 0 -120px, 0 0;
    animation: a-seg-pulse 4.5s cubic-bezier(.45,.05,.55,.95) infinite; }
  .a-stage:nth-child(2)::after { animation-delay: 1.5s; }
  .a-stage:nth-child(3)::after { animation-delay: 3s; }
  .a-stage__node { position: relative; z-index: 1; }
}
@keyframes a-seg-pulse { 0% { background-position: 0 -120px, 0 0; } 33%, 100% { background-position: 0 calc(100% + 120px), 0 0; } }
@media (max-width: 600px) {
  .a-chain { row-gap: 40px; }
  .a-stage { grid-template-columns: 22px 1fr; column-gap: 16px; }
  .a-stage__art { grid-column: 2; grid-row: 1; margin-bottom: 14px; }
  .a-stage__art img, .a-stage__art--pair img, .a-stage__art--pair img + img { width: 108px; height: 108px; }
  .a-stage__art img.a-stage__logo { height: 96px; }
  .a-stage__node { grid-row: 2; }
  .a-stage h3 { grid-column: 2; grid-row: 2; }
  .a-stage > p:not(.a-stage__links) { grid-column: 2; grid-row: 3; }
  .a-stage__links { grid-column: 2; grid-row: 4; }
  /* node sits beside the heading, which starts after the art row */
  .a-stage:not(:last-child)::after { top: calc(108px + 14px + 24px); height: calc(100% + 40px - 4px); }
}
@media (prefers-reduced-motion: reduce) { .a-stage::after { animation: none !important; } }

/* v3.8: the theme sets #navbar background with a stronger rule; win it on this page only. */
@media (max-width: 1199px) { body.arch-page #navbar { background: rgba(10,14,20,.92) !important; } }
/* v3.8 projects on tablet: six even tiles, two per row (no large feature tile). */
@media (max-width: 1100px) and (min-width: 601px) {
  .a-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
  .a-tile--feature { grid-column: auto; grid-row: auto; }
  .a-tile--feature .a-tile__title { font-size: 20px; }
}
/* The theme forces a transparent navbar with `body.noBannerApplied #navbar:not(.layout-fixed)` !important; match its specificity on this page. */
@media (max-width: 1199px) { body.arch-page #navbar:not(.layout-fixed), body.arch-page.noBannerApplied #navbar:not(.layout-fixed) { background: rgba(10,14,20,.92) !important; } }
/* v3.9: award thumbnail shows the right-hand side of the graphic (Kim). */
.a-why__list li:first-child > img { object-position: 100% 50%; }
/* v3.9 phone chain: every art row is the same height, so each node (and its segment start) lands at the same y. */
@media (max-width: 600px) {
  .a-stage__art { height: 108px; align-items: center; }
  .a-stage:not(:last-child)::after { top: calc(108px + 14px + 14px); height: calc(100% + 40px); }
}
@media (max-width: 600px) { .a-stage:not(:last-child)::after { height: calc(100% + 46px); } }
/* Award graphic: its wording sits on the left, so the thumbnail keeps the left side. */
.a-why__list li:first-child > img { object-position: 0 50%; }

/* v4.0 system chain alignment. The cut-outs are now trimmed to the product itself, so every
   product (and the ELM logo) sits on ONE baseline a fixed distance above the signal line, lines
   up with the left edge of its heading, and keeps its true proportions. Descriptions reserve two
   lines so the product links line up across all four stages. */
.a-stage__art, .a-stage__art--pair { height: 120px; align-items: flex-end; justify-content: flex-start; gap: 14px; }
.a-stage__art img, .a-stage__art--pair img, .a-stage__art--pair img + img {
  width: auto; height: auto; max-width: calc(50% - 7px); max-height: 104px; object-fit: contain; object-position: left bottom; }
.a-stage__art img.a-stage__logo { max-width: none; max-height: 112px; height: 112px; width: auto; }
.a-stage > p:not(.a-stage__links) { min-height: 3em; }
/* Links sit at the bottom of every stage, so a heading or description that wraps to an extra
   line in one column cannot push its links out of line with the other three. */
@media (min-width: 1101px) {
  .a-stage { display: flex; flex-direction: column; }
  .a-stage > .a-stage__links { margin-top: auto !important; padding-top: 18px; }
}
.a-chain::before { top: 151px; }
.a-stage__node { margin: 22px 0 24px; }
@media (max-width: 1100px) {
  .a-stage > p:not(.a-stage__links) { min-height: 0; }
  .a-stage__art, .a-stage__art--pair { height: 96px; }
  .a-stage__art img, .a-stage__art--pair img, .a-stage__art--pair img + img { max-height: 88px; width: auto; height: auto; }
  .a-stage__art img.a-stage__logo { height: 92px; max-height: 92px; }
}
@media (max-width: 600px) {
  .a-stage__art, .a-stage__art--pair { height: 84px; }
  .a-stage__art img, .a-stage__art--pair img, .a-stage__art--pair img + img { max-height: 76px; }
  .a-stage__art img.a-stage__logo { height: 80px; max-height: 80px; }
  .a-stage:not(:last-child)::after { top: calc(84px + 14px + 14px); }
}

/* v4.1 vertical chain: the desktop node spacing (v4.0) must not leak into the vertical layout.
   Segments run from this node centre to the next node centre. */
@media (max-width: 1100px) {
  .a-stage__node { margin: 4px 0 0; }
  .a-stage:not(:last-child)::after { top: 14px; height: calc(100% + 48px); }
}
@media (max-width: 600px) {
  .a-stage:not(:last-child)::after { top: calc(84px + 14px + 14px); height: calc(100% + 40px); }
}
@media (max-width: 1100px) { .a-stage:not(:last-child)::after { height: calc(100% + 54px); } }
@media (max-width: 600px) { .a-stage:not(:last-child)::after { height: calc(100% + 46px); } }


/* v4.3 size table photos: the trimmed cut-outs have very different proportions, so give every
   photo the same box (max 170 wide, 84 tall), sitting on one baseline, instead of half the column. */
.a-table__pair { height: 96px; align-items: flex-end; gap: 10px; }
.a-table__pair img, .a-table thead .a-table__pair img, .a-table__pair img:only-child { width: auto; height: auto; max-width: 170px; max-height: 84px; margin: 0; object-fit: contain; object-position: left bottom; }
@media (max-width: 600px) { .a-table__pair img, .a-table thead .a-table__pair img { max-width: 120px; max-height: 64px; } .a-table__pair { height: 72px; } }
/* the highlighted column has a 3px top border: take it out of the padding so all three photos share one baseline */
.a-table thead th.is-common { padding-top: 33px; }
@media (max-width: 600px) { .a-table__pair img, .a-table thead .a-table__pair img { max-width: calc(50% - 5px); } .a-table__pair img:only-child { max-width: 100%; } }

/* v4.4 BRAND BLUE ONLY. Every darkened or tinted blue above is now the real var(--enttec-blue).
   Contrast is solved by pairing, never by shifting the hue:
   - blue text only on the dark bands (passes on #070a0f); on white it is a fill or a rule, not text;
   - the table flag is white on a solid brand-blue pill (Kim's call 2026-10-01, after trying
     charcoal, 20% blue and three other styles; accepts 2.81:1 for that short label). */
.a-table__flag { color: #fff; background: var(--enttec-blue); border-radius: 100px; padding: 3px 10px; }
.a-table-scroll:focus-visible, .a-needs__list li:focus-visible { outline-color: var(--enttec-blue); }

/* v4.4 non-text contrast on LIGHT sections: brand blue on white is 2.81:1, under the 3:1 that
   icons and focus rings need (WCAG 1.4.11), so they pair with charcoal there; dark bands keep blue. */
.a-faq__list summary::after, .arch-faq__item summary::after { color: var(--enttec-ink); }
.a-table-scroll:focus-visible, .a-needs__list li:focus-visible, .a-faq__list summary:focus-visible, .a-why a:focus-visible { outline-color: var(--enttec-ink); }

/* v4.5 PROJECT COMPOSITES: the products used are baked into the lower right of each tile photo.
   The scrim darkens from the lower LEFT (behind the text) instead of the full bottom, so the
   products stay bright, and the text column stops short of them. Names still print as text. */
.a-tile--composite a::after { background:
  linear-gradient(0deg, rgba(7,10,15,.55) 0%, rgba(7,10,15,0) 40%),
  radial-gradient(90% 85% at 0% 100%, rgba(7,10,15,.9) 0%, rgba(7,10,15,.55) 45%, rgba(7,10,15,0) 75%); }
.a-tile--composite .a-tile__text { right: auto; max-width: 52%; }
/* Tile heights are fixed while widths follow the screen (about 1.4:1 at 1280, 2:1 at 1920), so the
   photo is always cropped somewhere. Pin it, and its hover zoom, to the bottom-right corner where the
   products sit: any crop then comes off the top or left, behind the text, never off the products. */
.a-tile--composite > a > img { object-position: right bottom; transform-origin: right bottom; }
.a-tile--feature.a-tile--composite .a-tile__text { max-width: 55%; }
@media (max-width: 600px) {
  .a-mosaic:has(.a-tile--composite) { grid-auto-rows: 240px; }
  .a-tile--composite .a-tile__text { left: 16px; bottom: 16px; }
}

/* v4.6 SENTRY ICON: a heartbeat that draws across, then an alert dot lights. */
.lc--pulse .track { stroke: rgba(14,165,223,.22); }
.lc--pulse .beat { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lc-draw 3s ease-in-out infinite; }
.lc--pulse .dot { fill: var(--enttec-blue); stroke: none; opacity: .25; animation: lc-alert 3s ease-in-out infinite; }
@keyframes lc-draw { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes lc-alert { 0%, 50% { opacity: .25; } 62%, 90% { opacity: 1; } 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .lc--pulse .beat { stroke-dashoffset: 0; } .lc--pulse .dot { opacity: 1; } }

/* v4.7 REAL SYSTEMS, ANIMATED: project tabs over one system-story stage at a time
   (render.php enttec_arch_render_systems, assets/architectural.js). Each stage's own
   look is in stages/<slug>.css; the shared shell and controls in the engine's sheet. */
.a-systems { background: #fff; padding: var(--a-pad) 0; }
.a-systems__head { max-width: 680px; margin-bottom: 36px; }
.a-systems__head p { color: var(--enttec-muted); font-size: 18px; margin-top: 18px !important; }
.a-sys__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.a-sys__tab { display: grid; gap: 2px; text-align: left; min-height: 56px; padding: 10px 18px; border-radius: 14px; cursor: pointer;
  background: var(--enttec-panel); border: 1.5px solid transparent; color: var(--enttec-ink); font: inherit;
  transition: border-color .2s var(--eds-ease), background .2s var(--eds-ease); }
.a-sys__tab-t { font-weight: 700; font-size: 16px; }
.a-sys__tab-s { font-size: 13px; color: var(--enttec-muted); }
.a-sys__tab:hover { border-color: var(--enttec-line); }
.a-sys__tab[aria-selected="true"] { background: #fff; border-color: var(--enttec-blue); box-shadow: 0 10px 24px -18px rgba(16,40,60,.45); }
.a-sys__tab:focus-visible { outline: 3px solid var(--enttec-ink); outline-offset: 2px; }
.a-sys__panel:focus-visible { outline: 3px solid var(--enttec-ink); outline-offset: 6px; border-radius: 12px; }
/* Without the tab script every story shows, stacked, and the tabs (which would do nothing) go. */
.a-sys:not(.is-live) .a-sys__tabs { display: none; }
.a-sys:not(.is-live) .a-sys__panel[hidden] { display: block; margin-top: 56px; }
/* "See a real system" under a size in the table. */
.a-table__see { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--enttec-ink); text-decoration: underline; text-decoration-color: var(--enttec-blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.a-table__see:focus-visible { outline: 3px solid var(--enttec-ink); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 600px) {
  .a-sys__tab { flex: 1 1 100%; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .a-sys__tab { transition: none; } }

/* v4.8 SENTRY, highlighted (Nicolas, 2026-10-01): copy left, a real ELM screenshot right
   (v4.9 replaced the CSS monitor mock-up). Green is ELM's own status colour. */
.a-sentry { background: var(--enttec-panel); padding: var(--a-pad) 0; }
.a-sentry__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.a-sentry__kicker { color: var(--enttec-ink); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px !important; display: inline-flex; align-items: center; gap: 8px; }
.a-sentry__kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3fb36b; box-shadow: 0 0 0 4px rgba(63,179,107,.18); }
.a-sentry__lede { color: var(--enttec-muted); font-size: 18px; line-height: 1.6; margin-top: 18px !important; max-width: 52ch; }
.a-sentry__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.a-sentry__points li { padding-left: 20px; border-left: 3px solid var(--enttec-blue); }
.a-sentry__points h3 { font-size: 17px; margin: 0; }
.a-sentry__points p { color: var(--enttec-muted); margin-top: 4px !important; line-height: 1.5; }
.a-sentry__note { margin-top: 24px !important; font-size: 15px; color: var(--enttec-ink); font-weight: 600; }
.a-sentry__more { margin-top: 10px !important; }
.a-sentry__more a { color: var(--enttec-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--enttec-blue); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.a-sentry__more a:hover { text-decoration-thickness: 3px; }
.a-sentry__more a:focus-visible { outline: 3px solid var(--enttec-ink); outline-offset: 3px; border-radius: 3px; }

/* v4.9 (Kim, 2026-10-02) */
/* Real systems: the whole diagram fits on screen. Each stage is as wide as the column
   allows, but never taller than about 62% of the viewport (--ss-ar is its viewBox
   width / height, so the width follows from the height cap). */
/* Each stage's viewBox width / height, on its panel too so the column beside the photos
   can be exactly as wide as the diagram it holds. */
.st-daewangam, #system-daewangam { --ss-ar: 1.3015; }
.st-tasman, #system-tasman { --ss-ar: 1.5; }
.st-csw, #system-csw { --ss-ar: 1.4528; }
.st-small, #system-small { --ss-ar: 1.5584; }
.st-landmark, #system-landmark { --ss-ar: 1.519; }
.st-facade, #system-facade { --ss-ar: 1.5; }
/* Per run too, so a size's second system sizes from its own stage. */
[data-stage="small"] { --ss-ar: 1.5584; } [data-stage="facade"] { --ss-ar: 1.5; } [data-stage="landmark"] { --ss-ar: 1.519; } [data-stage="facade-pixel"] { --ss-ar: 1.519; } [data-stage="landmark-pixel"] { --ss-ar: 1.519; }
#diagram-tasman-bridge { --ss-ar: 1.5; }
#diagram-csw-aesean-tod-skybridge { --ss-ar: 1.4528; }
#diagram-daewangam-park-footbridge { --ss-ar: 1.3015; }

/* ==== v5.0 (Kim, 2026-10-02): systems, Sentry and Why ENTTEC redone ================= */

/* --- How real systems run: the installation beside its diagram ---------------------
   Tabs on top. Each panel is two columns: what was built (photos, or the example's
   product) on the left, how it is wired on the right, with the steps and "Watch it run"
   under the diagram like a player. The engine's own desktop layout (controls in a left
   column) is overridden here only, so project pages keep theirs. */
.a-sys__panel { display: grid; gap: 28px; }
.a-sys__media { min-width: 0; }
.a-sys__photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a-sys__photos li.is-lead { grid-column: 1 / -1; }
.a-sys__photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--enttec-panel); }
.a-sys__photos li.is-lead img { aspect-ratio: 4 / 3; border-radius: 16px; }
/* Tablet: one row of three, so the photos do not push the diagram off the screen. */
@media (min-width: 601px) and (max-width: 899px) {
  .a-sys__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-sys__photos li.is-lead { grid-column: auto; }
  .a-sys__photos li.is-lead img { aspect-ratio: 3 / 2; border-radius: 12px; }
}
.a-sys__run { min-width: 0; }
.a-sys .ss-story { display: block; }
.a-sys .ss-stage { margin: 0; }
.a-sys .ss-bar { margin-top: 20px; gap: 14px; }
.a-sys .ss-caption { min-height: 3em; max-width: 64ch; }
/* Steps across, play button first: dot on a rail, its title under it. */
.a-sys .ss-controls { display: flex; align-items: flex-start; gap: 18px; flex-wrap: nowrap; }
.a-sys .ss-play, .a-sys .ss-replay { flex: none; }
.a-sys .ss-replay { order: 2; }
.a-sys .ss-dots { order: 1; flex: 1 1 auto; display: flex; gap: 0; min-width: 0; }
@media (min-width: 701px) {
  .a-sys .ss-dots .ss-dot { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 20px 12px 0 0; align-items: flex-start; justify-content: flex-start; text-align: left; line-height: 1.3; }
  .a-sys .ss-dot__n { left: 0; top: 0; margin-top: 0; }
  .a-sys .ss-dot__bar { left: 18px; top: 5.5px; width: calc(100% - 22px); height: 3px; }
  .a-sys .ss-dot__bar::after { transform-origin: left; transform: scaleX(var(--p, 0)); }
}
@media (min-width: 900px) {
  .a-sys__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
  /* The whole diagram fits on screen: never taller than about 60% of the viewport. The
     column takes the diagram's width, so the steps under it line up with its edges. */
  .a-sys__run { width: min(100%, calc(var(--ss-ar, 1.4) * min(60vh, 580px))); }
}

/* --- Sentry: words on the left, the real screenshot on the right --------------------
   Left: the ELM mark and feature name, the heading, the lede, one detail line, the plan
   note. Right: the screenshot (no frame: it is already dark) with three numbered boxes
   drawn around the controls the numbered list explains; that list runs the full width
   under both columns. The whole band is capped
   and centred, so on a wide screen neither a middle gap nor a dead right strip opens. */
/* Same container width as Why ENTTEC after it (Kim, 2026-10-02): no cap of its own. */
.a-sentry__layout { display: grid; gap: 40px clamp(48px, 5vw, 80px); align-items: center; }
.a-sentry__copy, .a-sentry__visual { min-width: 0; }
.a-sentry__lockup { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; margin: 0 0 22px !important; }
.a-sentry__logo { grid-row: 1 / 3; width: 60px; height: auto; display: block; }
.a-sentry__name { align-self: end; font-family: Montserrat, var(--enttec-font-body, sans-serif); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--enttec-ink); }
.a-sentry__edition { align-self: start; font-size: 15px; line-height: 1.4; color: var(--enttec-muted); }
.a-sentry__lede { color: var(--enttec-ink); font-size: 18px; line-height: 1.6; margin-top: 18px !important; max-width: 62ch; }
.a-sentry__detail { color: var(--enttec-muted); font-size: 16px; line-height: 1.55; margin-top: 12px !important; max-width: 66ch; }
.a-sentry__note { margin-top: 22px !important; font-size: 15px; color: var(--enttec-ink); font-weight: 600; }
.a-sentry__note a { color: var(--enttec-ink); text-decoration: underline; text-decoration-color: var(--enttec-blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.a-sentry__note a:focus-visible { outline: 3px solid var(--enttec-ink); outline-offset: 3px; border-radius: 3px; }
.a-sentry__shot { margin: 0; padding: 0; background: none; box-shadow: none; }
.a-sentry__frame { position: relative; }
.a-sentry__frame img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -40px rgba(7,10,15,.6); }
.a-sentry__shot figcaption { margin-top: 12px; color: var(--enttec-muted); font-size: 14px; line-height: 1.5; }
.a-sentry__marks { position: absolute; inset: 0; pointer-events: none; }
.a-sentry__mark { position: absolute; box-sizing: border-box; border: 2px solid var(--enttec-blue); border-radius: 6px; background: rgba(14,165,223,.08); }
.a-sentry__badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--enttec-blue); color: #fff; font-weight: 700; font-size: 12px; line-height: 1; flex: none; }
/* The number sits just outside its box, over plain page or empty screen, never on a word. */
.a-sentry__mark .a-sentry__badge { position: absolute; box-shadow: 0 0 0 3px var(--enttec-panel); }
.a-sentry__mark .a-sentry__badge.is-above { left: 50%; top: -6px; transform: translate(-50%, -100%); }
.a-sentry__mark .a-sentry__badge.is-left { left: -8px; top: 50%; transform: translate(-100%, -50%); }
.a-sentry__points { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px clamp(28px, 4vw, 56px); }
.a-sentry__points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 0; border: 0; }
.a-sentry__points h3 { font-size: 16px; margin: 1px 0 4px; }
.a-sentry__points p { color: var(--enttec-muted); font-size: 15px; line-height: 1.5; margin: 0 !important; }
@media (min-width: 700px) { .a-sentry__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .a-sentry__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
/* Phone: the screenshot is too small to mark cleanly (and a badge outside it would push past
   the gutter), so the boxes go and the list reads as plain text. */
@media (max-width: 600px) { .a-sentry__marks, .a-sentry__points .a-sentry__badge { display: none; } .a-sentry__points li { grid-template-columns: 1fr; } }

/* --- Why ENTTEC: words first, each reason with a small icon that plays once --------- */
.a-why__layout { display: grid; gap: 40px clamp(48px, 7vw, 120px); }
.a-why__head p { color: var(--enttec-muted); font-size: 19px; line-height: 1.55; margin-top: 18px !important; max-width: 30ch; }
.a-why__reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
/* Icon size and stroke come from the needs list's own rules (shared selectors above). */
.a-why__reasons li { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; }
.a-why__reasons .lc-tile { margin: 0; }
@media (max-width: 600px) { .a-why__reasons li { grid-template-columns: 52px 1fr; gap: 16px; } }
.a-why__reasons h3 { font-size: 22px; margin: 4px 0 8px; }
.a-why__reasons p { color: var(--enttec-muted); font-size: 17px; line-height: 1.55; max-width: 52ch; }
@media (min-width: 900px) {
  .a-why__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .a-why__head { position: sticky; top: 120px; }
}
/* The three icons belong to the needs set: same tile, size and stroke (shared selectors
   above), and the same kind of loop: always moving a little, never resting long. */
/* Award: two sparkles take turns twinkling while the cup gently rocks */
.lc--award .cup { transform-origin: 24px 26px; animation: lc-rock 2.4s ease-in-out infinite; }
.lc--award .shine { stroke: var(--enttec-blue); transform-origin: 38px 6px; animation: lc-twinkle 2.4s ease-in-out infinite; }
.lc--award .s2 { transform-origin: 10px 4.5px; animation-delay: -1.2s; }
@keyframes lc-rock { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes lc-twinkle { 0%, 100% { opacity: .15; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(90deg); } }
/* Support: the pin bobs and a ring ripples out from under it, every 2.4s */
.lc--support .pin { transform-origin: 24px 36px; animation: lc-bob 2.4s ease-in-out infinite; }
.lc--support .ring { stroke: rgba(14,165,223,.7); transform-origin: 24px 38px; animation: lc-ripple 2.4s ease-out infinite; }
@keyframes lc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes lc-ripple { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
/* Built to stay installed: a gear that keeps turning, like kit that keeps being serviced */
.lc--years .gear { transform-origin: 24px 24px; animation: lc-spin 8s linear infinite; }
.lc--years .teeth { stroke-width: 5; stroke-linecap: butt; }
.lc--years .hub { fill: rgba(14,165,223,.18); }
/* Reduced motion: the shared `.lc *` rule stops them; keep both sparkles visible. */
@media (prefers-reduced-motion: reduce) { .lc--award .shine { opacity: 1; } }

/* ==== v5.1 (Kim, 2026-10-02): project diagrams open from their tiles =================
   The tile stays one link to its project page. "View system diagram" is a sibling pill
   laid over the tile's top-right corner (z-index above the link), and opens a <dialog>. */
.a-tile { position: relative; }
.a-tile__diagram { position: absolute; top: 14px; right: 14px; z-index: 2; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--enttec-ink); font: 600 14px/1 var(--enttec-font-body, sans-serif); cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); transition: background .2s var(--eds-ease), color .2s var(--eds-ease); }
.a-tile__diagram:hover { background: var(--enttec-blue); color: #fff; }
.a-tile__diagram:focus-visible { outline: 3px solid var(--enttec-blue); outline-offset: 3px; }
.a-dlg { width: min(1240px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 20px; background: #fff; color: var(--enttec-ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.a-dlg::backdrop { background: rgba(7,10,15,.72); }
.a-dlg[open] { animation: a-dlg-in .28s var(--eds-ease); }
@keyframes a-dlg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.a-dlg__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--enttec-line); }
.a-dlg__head h3 { margin: 0; font-size: 20px; }
.a-dlg__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--enttec-line); border-radius: 50%; background: #fff; cursor: pointer; }
.a-dlg__close svg { width: 20px; height: 20px; fill: none; stroke: var(--enttec-ink); stroke-width: 2; stroke-linecap: round; }
.a-dlg__close:hover { border-color: var(--enttec-blue); }
.a-dlg__close:focus-visible { outline: 3px solid var(--enttec-blue); outline-offset: 2px; }
.a-dlg__body { padding: 24px; }
@media (max-width: 600px) {
  .a-dlg { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .a-dlg__body { padding: 16px; }
  .a-tile__diagram { top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .a-dlg[open] { animation: none; } .a-tile__diagram { transition: none; } }

/* v5.2: the size diagrams live inside the size band, under the table. Jumping to them lands
   on the tab row with room for the fixed header (and the admin bar when logged in). */
.a-sizes .a-sys { margin-top: clamp(48px, 6vw, 72px); scroll-margin-top: calc(var(--enttec-adminbar-h, 0px) + var(--enttec-fixed-h, 72px) + 24px); }
.a-sys__panel { scroll-margin-top: calc(var(--enttec-adminbar-h, 0px) + var(--enttec-fixed-h, 72px) + 24px); }
/* On the grey size band, unselected tabs get a white fill so they still read as buttons. */
.a-sizes .a-sys__tab { background: #fff; }

/* v5.3 dialogs: the page behind cannot scroll, and on a desktop the whole diagram fits the
   screen with no scrolling inside: a narrower photo column, the diagram sized to the space
   left once the header, caption and controls (about 330px) are taken off the height. */
html.arch-dlg-open, html.arch-dlg-open body { overflow: hidden; }
.a-dlg { overscroll-behavior: contain; }
@media (min-width: 900px) {
  .a-dlg .a-dlg__body { padding: 20px 24px 24px; }
  .a-dlg .a-sys__panel, .a-dlg__body.a-sys__panel { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; }
  .a-dlg .a-sys__run { width: min(100%, calc(var(--ss-ar, 1.4) * (100vh - 48px - 330px))); justify-self: center; }
  .a-dlg .ss-bar { margin-top: 14px; gap: 10px; }
  .a-dlg .ss-caption { min-height: 0; }
}

/* v5.4: a size's system switch (shown only when a size has two built systems). */
.a-sys__runs { min-width: 0; }
.a-sys__switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: #fff; border: 1px solid var(--enttec-line); }
.a-sys__switch-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--enttec-muted); font: 600 14px/1 var(--enttec-font-body, sans-serif); cursor: pointer; transition: background .2s var(--eds-ease), color .2s var(--eds-ease); }
.a-sys__switch-btn[aria-pressed="true"] { background: var(--enttec-blue); color: #fff; }
.a-sys__switch-btn:focus-visible { outline: 3px solid var(--enttec-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .a-sys__switch-btn { transition: none; } }
/* The needs list's "see more" link (the Sentry item), and the jump target below the header. */
.a-needs__more { margin-top: 10px !important; }
.a-needs__more a { color: var(--enttec-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--enttec-blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.a-needs__more a:focus-visible { outline: 3px solid var(--enttec-ink); outline-offset: 3px; border-radius: 3px; }
#sentry { scroll-margin-top: calc(var(--enttec-adminbar-h, 0px) + var(--enttec-fixed-h, 72px) + 8px); }

/* ==== v6.1 (Kim, 2026-10-02): Choose by project size =================================
   The comparison table first, then the three sizes as tabs (universes first), each panel
   with that size's products and specs beside its diagram. The diagram column hugs the
   right edge of the container, like the rest of the page. */
.a-sys--scale { margin-top: clamp(32px, 4vw, 48px); }
.a-sys--scale .a-sys__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.a-stop { position: relative; display: grid; align-content: start; gap: 4px; min-height: 0; padding: 18px 20px 18px; border-radius: 16px; text-align: left; }
.a-stop__u { font-family: Montserrat, var(--enttec-font-body, sans-serif); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; color: var(--enttec-ink); margin-bottom: 6px; }
.a-stop .a-sys__tab-t { font-size: 16px; }
.a-stop .a-sys__tab-s { font-size: 14px; }
.a-stop__flag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: #e7f6fc; color: var(--enttec-ink); font-size: 12px; font-weight: 700; }
.a-stop[aria-selected="true"] .a-stop__u { color: var(--enttec-blue); }

/* The selected size's products and specs, beside its diagram. */
.a-size-card { display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: #fff; }
.a-size-card__products { display: flex; align-items: flex-end; gap: 14px; min-height: 90px; }
.a-size-card__products img { width: auto; max-width: 48%; max-height: 110px; height: auto; object-fit: contain; }
.a-size-card__fit { font-weight: 700; color: var(--enttec-ink); margin: 0 !important; }
.a-size-card__specs { margin: 0; display: grid; gap: 10px; }
.a-size-card__specs div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--enttec-line); }
.a-size-card__specs dt { font-size: 14px; color: var(--enttec-muted); }
.a-size-card__specs dd { margin: 0; font-size: 15px; color: var(--enttec-ink); }

@media (max-width: 700px) {
  .a-sys--scale .a-sys__tabs { grid-template-columns: 1fr; }
  .a-stop { padding: 14px 16px; }
  .a-stop__u { font-size: 20px; margin-bottom: 2px; }
}
/* v6.3 (Kim, 2026-10-02): compact size tabs in a row; under them the product on the left
   and the diagram on the right. The diagram has a fixed size (viewport height x its shape),
   and only the product column flexes, so the diagram stays big and no gap opens. */
.a-sizes .a-sys--scale .a-sys__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.a-sizes .a-stop { padding: 12px 20px; min-height: 48px; border-radius: 14px; align-content: center; }
.a-sizes .a-stop .a-sys__tab-t { font-size: 16px; }
@media (min-width: 900px) {
  /* v6.4 (Kim, 2026-10-02): left (narrower) = the three tabs in a row, the product and its
     note, then the diagram's heading, caption and steps; right (wider) = the switch and the
     diagram. The wrappers in between are display: contents, so these parts become cells of
     one grid; the DOM order (and so the reading order) is unchanged. */
  .a-sizes .a-sys { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "tabs switch" "media stage" "bar stage"; column-gap: clamp(28px, 3vw, 48px); row-gap: 20px; align-items: start; }
  .a-sizes .a-sys--scale .a-sys__tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .a-sizes .a-stop { padding: 12px 14px; text-align: center; justify-content: center; }
  .a-sizes .a-stop .a-sys__tab-t { font-size: 15px; white-space: nowrap; }
  .a-sizes .a-stop { padding: 12px 10px; }
  .a-sizes .a-sys__panel:not([hidden]), .a-sizes .a-sys__runs, .a-sizes .a-sys__run:not([hidden]), .a-sizes .a-sys__run:not([hidden]) > .ss-story { display: contents; }
  .a-sizes .a-sys__media { grid-area: media; }
  .a-sizes .a-sys__switch { grid-area: switch; justify-self: start; margin: 0; }
  .a-sizes .ss-stage { grid-area: stage; width: 100%; }
  .a-sizes .ss-bar { grid-area: bar; margin-top: 0; }
}

/* Mid-size screens: a slightly wider left column so the three tab names stay on one line. */
@media (min-width: 900px) and (max-width: 1199px) { .a-sizes .a-sys { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .a-sizes .a-stop .a-sys__tab-t { font-size: 14px; } .a-sizes .a-stop { padding: 10px 8px; } }

/* ============================================================================================
   v7 WHITESPACE AND MOBILE PASS (Kim, 2026-10-05, after Nicolas's review of the test page).
   Iterated in _kim/mockups/arch-tighten/ (fix IDs K*, W*, M* there). Values that simply
   changed were edited where they are first set (--a-pad, hero, close, FAQ); this block holds
   the new layouts, so it has to stay last.
   ============================================================================================ */

/* Content capped at 1240px with the 2026 product pages' own gutter ladder (enttec-product-pages
   product-pages.css, .epp--splay), so this page sits at the same width as the pages it links to (K10). */
.arch2 { --eds-container: min(1240px, 100% - 2 * clamp(20px, 4vw, 60px)); }

/* Project tiles: sized from their images' own 16:10 shape (the composites are 1600x1000 and
   1000x625) instead of fixed 280px rows, so the feature tile is no taller than its image and
   nothing in the composites is cropped. The feature spans two rows, so it lands at 16:10 too. */
@media (min-width: 1101px) {
  .a-mosaic { grid-auto-rows: auto; }
  .a-mosaic > .a-tile:not(.a-tile--feature) { aspect-ratio: 16 / 10; }
}

/* Headings and their line centred above full-width content, instead of a sticky left column
   that left half of each section empty (K5). Phones keep them left: centred text past two
   lines gets harder to read. */
@media (min-width: 601px) {
  .a-needs__grid, .a-why__layout, .a-faq__grid { display: block; }
  .a-needs__head, .a-why__head, .a-faq__head { position: static; }
  .a-needs__head, .a-system__head, .a-sizes__head, .a-why__head, .a-faq__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
  .a-needs__head h2, .a-system__head p, .a-sizes__head p, .a-why__head p { margin-inline: auto; }
  .a-why__head p { max-width: 52ch; }
  .a-projects__head { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .a-projects__head p { max-width: 52ch; }
}

/* Needs: six across three columns, then Sentry on its own tinted row (K4). */
@media (min-width: 861px) {
  .a-needs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .a-needs__list li { padding: 26px 0; }
}
.a-needs__list .a-needs__feature { order: 99; }
@media (min-width: 601px) {
  .a-needs__list .a-needs__feature { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title more" "icon text more"; column-gap: 24px; align-items: center;
    margin-top: 12px; padding: 24px 28px; border: 0; border-radius: 18px; background: var(--enttec-panel); }
  .a-needs__feature .lc-tile { grid-area: icon; margin: 0; }
  .a-needs__feature h3 { grid-area: title; }
  .a-needs__feature p:not(.a-needs__more) { grid-area: text; max-width: 70ch; }
  .a-needs__feature .a-needs__more { grid-area: more; margin: 0 !important; white-space: nowrap; }
}
/* Phones: the link sat in the 52px icon column and broke one word per line (M3). */
@media (max-width: 600px) { .a-needs__list .a-needs__more { grid-column: 2; } }

/* System chain, desktop: each step centred under the centred heading; the line runs from the
   first dot's centre to the last one's; titles fit one line (K11). */
@media (min-width: 1101px) {
  .a-chain { --chain-gap: clamp(20px, 2.2vw, 32px); }
  .a-chain .a-stage { text-align: center; align-items: center; }
  .a-chain .a-stage__art, .a-chain .a-stage__art--pair { justify-content: center; }
  .a-chain .a-stage__node { margin-inline: auto; }
  .a-chain .a-stage__links { justify-content: center; }
  .a-chain .a-stage p { margin-inline: auto; }
  .a-chain::before { left: calc(var(--col) / 2); right: calc(var(--col) / 2); }
  .a-chain .a-stage h3 { font-size: clamp(15px, 1.25vw, 18px); text-wrap: balance; }
}
/* System chain, phones (M11): product photo beside the title instead of a row above it, and the
   line measured from the dot, not from the stacked pixel sums above (v3.9 to v4.x), which went
   stale whenever an image size changed. One variable sets the gap and the line length. */
@media (max-width: 600px) {
  .a-chain { --gap-y: 28px; row-gap: var(--gap-y); }
  .a-chain .a-stage { grid-template-columns: 22px minmax(0, 1fr) 84px; column-gap: 14px; }
  .a-chain .a-stage__node { grid-column: 1; grid-row: 1; margin: 4px 0 0; }
  .a-chain .a-stage h3 { grid-column: 2; grid-row: 1; }
  .a-chain .a-stage > p:not(.a-stage__links) { grid-column: 2; grid-row: 2; }
  .a-chain .a-stage__links { grid-column: 2 / -1; grid-row: 3; margin-top: 10px !important; }
  .a-chain .a-stage__art, .a-chain .a-stage__art--pair { grid-column: 3; grid-row: 1 / span 2; height: auto; margin: 0;
    flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; }
  .a-chain .a-stage__art::before { display: none; }
  .a-chain .a-stage__art img, .a-chain .a-stage__art--pair img, .a-chain .a-stage__art--pair img + img {
    width: auto; height: auto; max-width: 84px; max-height: 52px; margin: 0; transform: none; }
  .a-chain .a-stage__art--pair img, .a-chain .a-stage__art--pair img + img { max-height: 36px; }
  .a-chain .a-stage__art img.a-stage__logo { height: 52px; max-height: 52px; }
  /* Dot centre: 4px margin + half its 20px box = 14px down each step; a 4px line on a dot centred at 9px. */
  .a-chain .a-stage:not(:last-child)::after { left: 7px; top: 14px; height: calc(100% + var(--gap-y)); }
}

/* Size table: columns share the width so the two-product column cannot squeeze the first, the
   photos shrink with their cell, and from tablet up it fits without scrolling (M2). The label
   column is tinted, corner included, with a solid colour: --enttec-line is 8% black, so a mix of
   it stays see-through (K9). */
.a-table { table-layout: fixed; }
.a-table thead tr > :first-child { width: 18%; }
.a-table thead .a-table__pair { min-width: 0; }
.a-table thead .a-table__pair img { flex: 0 1 auto; min-width: 0; max-width: calc(50% - 5px); height: auto; object-fit: contain; }
.a-table thead tr > td:first-child, .a-table tbody th { background: color-mix(in srgb, var(--enttec-panel), var(--enttec-ink) 5%); }
@media (min-width: 601px) { .a-table { min-width: 0; } }

/* Phones: the table becomes one card per size (render.php builds both from the same data) (M9). */
.a-scards { display: none; }
@media (max-width: 600px) {
  .a-sizes .a-table-scroll { display: none; }
  .a-scards { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
  .a-scard { position: relative; padding: 20px; border-radius: 8px; background: #fff; box-shadow: 0 20px 40px -32px rgba(16,40,60,.35); }
  .a-scard.is-common { background: #f0f9fd; }
  .a-scard__top { display: flex; align-items: center; gap: 16px; }
  .a-scard__pics { flex: none; display: flex; align-items: center; gap: 6px; width: 104px; height: 72px; }
  .a-scard__pics img { min-width: 0; max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(16,40,60,.2)); }
  .a-scard__pics img:not(:only-child) { max-width: 48%; }
  .a-scard .a-table__flag { position: static; display: inline-block; margin-bottom: 12px; }
  .a-scard__tier { font-size: 19px; line-height: 1.25; }
  .a-scard__fit { margin-top: 4px !important; font-size: 14px; line-height: 1.4; color: var(--enttec-muted); }
  .a-scard dl { display: grid; grid-template-columns: auto 1fr; margin: 16px 0 0; }
  .a-scard dt, .a-scard dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--enttec-line); font-size: 15px; line-height: 1.4; }
  .a-scard dt { padding-right: 16px; color: var(--enttec-muted); font-weight: 600; }
  .a-scard dd { text-align: right; color: var(--enttec-ink); }
  .a-scard dd strong { font-family: var(--enttec-font-display); }
  .a-scard .a-table__see { margin-top: 8px; }
}

/* Size tabs: a quiet segmented control, centred above the diagram (K15, K6). */
.a-sizes .a-sys--scale .a-sys__tabs { gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--enttec-panel), var(--enttec-ink) 5%); }
.a-sizes .a-sys--scale .a-sys__tab { background: transparent; border-color: transparent; box-shadow: none; color: var(--enttec-muted); border-radius: 12px;
  transition: background .2s var(--eds-ease), color .2s var(--eds-ease), box-shadow .2s var(--eds-ease); }
.a-sizes .a-sys--scale .a-sys__tab .a-sys__tab-t { font-weight: 600; }
.a-sizes .a-sys--scale .a-sys__tab:hover { border-color: transparent; color: var(--enttec-ink); }
.a-sizes .a-sys--scale .a-sys__tab[aria-selected="true"] { background: #fff; border-color: transparent; color: var(--enttec-ink);
  box-shadow: 0 1px 2px rgba(16,40,60,.10), 0 6px 14px -8px rgba(16,40,60,.30); }
.a-sizes .a-sys--scale .a-sys__tab[aria-selected="true"] .a-sys__tab-t { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .a-sizes .a-sys--scale .a-sys__tab { transition: none; } }
@media (min-width: 601px) {
  .a-sizes .a-sys--scale .a-sys__tabs { display: flex; flex-wrap: nowrap; width: fit-content; margin-inline: auto; justify-self: center; }
  .a-sizes .a-sys--scale .a-sys__tab { padding: 10px 24px; }
}
@media (max-width: 600px) {
  .a-sizes .a-sys--scale .a-sys__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-sizes .a-sys--scale .a-sys__tab { min-height: 48px; padding: 8px 6px; text-align: center; place-content: center; }
  .a-sizes .a-sys--scale .a-sys__tab-t { font-size: 14px; line-height: 1.25; }
}
/* From 900px: tabs across the top, then the switch, heading, caption and steps on the left,
   the diagram on the right (K6). */
@media (min-width: 900px) {
  .a-sizes .a-sys { grid-template-rows: auto auto auto 1fr; grid-template-areas: "tabs tabs" "switch stage" "media stage" "bar stage"; row-gap: 16px; }
  .a-sizes .a-sys--scale .a-sys__tabs { margin-bottom: 8px; }
  .a-sizes .a-stop .a-sys__tab-t { font-size: 16px; }
}
/* Steps as a vertical list from tablet up, so no label wraps (K12). */
@media (min-width: 601px) {
  .a-sizes .a-sys .ss-controls { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dots dots dots" "play . replay"; gap: 14px 12px; align-items: center; }
  .a-sizes .a-sys .ss-dots { grid-area: dots; order: 0; display: grid; gap: 0; }
  .a-sizes .a-sys .ss-dots .ss-dot { flex: none; min-height: 36px; padding: 0 0 0 30px; align-items: center; white-space: nowrap; line-height: 1.3; }
  .a-sizes .a-sys .ss-dot__n { left: 0; top: 50%; margin-top: -7px; }
  .a-sizes .a-sys .ss-dot__bar { left: 5.5px; top: calc(50% + 9px); width: 3px; height: calc(100% - 18px); }
  .a-sizes .a-sys .ss-dot__bar::after { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .a-sizes .a-sys .ss-play { grid-area: play; justify-self: start; }
  .a-sizes .a-sys .ss-replay { grid-area: replay; }
  .a-sizes .ss-story.is-idle .ss-play { grid-column: 1 / -1; }
}
/* Tablet, diagram full width above: heading, caption and buttons left, steps right. The controls
   wrapper is display: contents so its steps and buttons join this grid. */
@media (min-width: 601px) and (max-width: 899px) {
  .a-sizes .a-sys .ss-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(200px, 34%);
    grid-template-areas: "head head head dots" "cap cap cap dots" "play replay . dots"; column-gap: 12px; row-gap: 12px; align-items: start; }
  .a-sizes .a-sys .ss-head { grid-area: head; }
  .a-sizes .a-sys .ss-caption { grid-area: cap; min-height: 0; }
  .a-sizes .a-sys .ss-controls { display: contents; }
  .a-sizes .a-sys .ss-dots { grid-area: dots; align-self: center; padding-left: 24px; border-left: 1px solid var(--enttec-line); }
  .a-sizes .a-sys .ss-play, .a-sizes .ss-story.is-idle .ss-play { grid-area: play; grid-column: auto; justify-self: start; margin-top: 4px; }
  .a-sizes .a-sys .ss-replay { grid-area: replay; margin-top: 4px; }
}

/* Phones: the whole diagram fits, and "View full size" (added by architectural.js) opens it in
   #systems-zoom at a readable size (M1). Same size and type as the engine's "Watch it run". */
.ss-zoom { display: none; }
@media (max-width: 600px) {
  .a-sizes .ss-zoom { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 12px 0 0; padding: 0 16px;
    border: 1px solid #d9d9d9; border-radius: var(--enttec-radius-pill, 999px); background: #fff; color: var(--enttec-ink);
    font: 600 14px/1 var(--enttec-font-body, sans-serif); cursor: pointer; transition: border-color .2s var(--eds-ease); }
  .a-sizes .ss-zoom:hover { border-color: var(--enttec-blue); }
  .a-sizes .ss-zoom:focus-visible { outline: 2px solid var(--enttec-blue); outline-offset: 3px; }
  .a-sizes .ss-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
}
.a-dlg__head p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--enttec-muted); }
.a-zoom__pan { overflow: auto; -webkit-overflow-scrolling: touch; }
.a-zoom__pan svg.ss-stage { display: block; width: 960px; max-width: none; height: auto; }
/* The engine hides diagram labels on phones (4px when fitted); full size they read fine. */
.a-zoom .ss-name { display: inline; }

/* Sentry screenshot: a "Full size" chip opens it, marks included, in #sentry-shot at its
   native 940px; never upscaled, so it stays sharp. Phones swipe around it (K16). */
.a-sentry__frame > img { cursor: zoom-in; }
.a-sentry__open { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 0; border-radius: 999px; background: rgba(7,10,15,.6); color: #fff; font: 600 14px/14px var(--enttec-font-body, sans-serif);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  transition: background .2s var(--eds-ease), color .2s var(--eds-ease); }
.a-sentry__open::before { content: ""; position: absolute; inset: -7px -4px; }
.a-sentry__open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.a-sentry__open:hover { background: #fff; color: var(--enttec-ink); }
.a-sentry__open:focus-visible { outline: 3px solid var(--enttec-blue); outline-offset: 2px; }
.a-lightbox { width: min(988px, calc(100vw - 48px)); }
.a-lightbox .a-sentry__frame { width: 100%; max-width: 940px; margin-inline: auto; }
.a-lightbox .a-sentry__frame img { box-shadow: none; cursor: default; }
@media (max-width: 600px) {
  .a-lightbox { width: 100vw; }
  .a-lightbox .a-dlg__body { overflow: auto; }
  .a-lightbox .a-sentry__frame { width: 940px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .a-sentry__open, .a-sizes .ss-zoom { transition: none; } }

/* Project tiles' "View system diagram": frosted glass instead of solid white, so it sits on the
   photo; 8px/16px padding (sides twice the height, 4px steps); the chip is 30px tall and an
   invisible ::before stretches the tap area to 44px (M6). */
.a-tile__diagram { min-height: 0; padding: 8px 16px; line-height: 14px; background: rgba(7,10,15,.5); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.a-tile__diagram::before { content: ""; position: absolute; inset: -7px -4px; }
.a-tile__diagram:hover { background: #fff; color: var(--enttec-ink); box-shadow: none; }
.a-tile__diagram:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Other tap targets up to 44px (M6). */
.a-table__see { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; }
.a-stage__links a.a-plink { padding: 10px 0; }

/* Why ENTTEC: three reasons side by side, icon above the title so each line of text gets the
   full column and wraps to two lines, not three (K7). */
@media (min-width: 861px) {
  .a-why__reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .a-why__reasons li { grid-template-columns: 1fr; gap: 16px; }
  .a-why__reasons h3 { font-size: 20px; margin-top: 0; }
  .a-why__reasons p { max-width: none; }
}

/* FAQ: list centred under its heading (K8); a size down on phones (M8). */
@media (min-width: 601px) { .a-faq__list { max-width: 860px; margin-inline: auto; } .a-faq__head { margin-bottom: 28px; } }
@media (max-width: 600px) {
  .a-faq__list summary { font-size: 16px; line-height: 1.35; padding-top: 16px; padding-bottom: 16px; }
  .a-faq__list .eds-accordion__body p { font-size: 15px; }
  .a-faq__head h2 { font-size: 28px; }
}

/* Closing banner, phones: the photo as a band on top, the text under it on the dark ground (M10). */
@media (max-width: 600px) {
  .a-close { display: block; }
  .a-close__img { position: relative; display: block; height: 200px; }
  .a-close__scrim { inset: 0 0 auto; height: 200px; background: linear-gradient(0deg, var(--a-night) 0%, rgba(7,10,15,0) 60%); }
  .a-close__inner { padding: 8px 16px 48px; }
  .a-close h2 { font-size: 26px; line-height: 1.15; max-width: none; text-wrap: balance; }
  .a-close p { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .a-close__actions { margin-top: 24px; }
}