/* ==========================================================================
   dam-co-uk — "The Linkage"
   Source · pathway · receptor. A report set as a drawing.
   base.css owns: reset, wrap, header mechanics, mega, buttons, footer skeleton,
   reveals, preloader shell, hero headline contract, responsive rules.
   ========================================================================== */

:root{
  /* ground: SOLID WHITE. Never bone, never cream. */
  --ink:        #15181a;
  --ink-2:      #15181a;   /* ink bands */
  --ink-3:      #1e2225;   /* mega panel */
  --surface:    #ffffff;
  --surface-2:  #ffffff;
  --text:       #f4f2ee;
  --muted:      rgba(244,242,238,.58);
  --ink-text:   #15181a;
  --ink-mute:   #5f6468;

  --earth:      #5c3a21;   /* the one brand band */
  --sand:       #c9b48a;
  --steel:      #6a6f73;
  --panel:      #f4f2ee;   /* legend + risk blocks only */

  --accent:     #5c3a21;
  --accent-lit: #c9b48a;
  --accent-2:   #c9b48a;

  --line:       rgba(244,242,238,.16);
  --line-d:     rgba(21,24,26,.14);
  --rule:       rgba(21,24,26,.14);

  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Maven Pro", system-ui, sans-serif;
  --font-mono:    "Share Tech Mono", ui-monospace, monospace;

  --wrap-max: 1240px;
  --radius:   2px;
}

body{ background:#fff; color:var(--ink-text); font-size:16.5px; }
::selection{ background:var(--earth); color:#fff; }
:focus-visible{ outline:2px solid var(--earth); outline-offset:3px; }
.sect--dark-2 :focus-visible,.rail :focus-visible,.foot :focus-visible,.hdr :focus-visible{ outline-color:var(--sand); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:#fff; padding:.7rem 1rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- shared small marks ---------- */
.node{ display:inline-block; width:6px; height:6px; background:var(--sand); border:1px solid var(--ink); flex:none; }

/* the linkage line: hairline + a square node at each end.
   Only where two things are genuinely linked — never as ornament. */
.link{
  display:block; position:relative; height:1px; margin-top:.72rem;
  background:rgba(21,24,26,.26); min-width:14px;
}
.link::before,.link::after{
  content:""; position:absolute; top:-2.5px; width:5px; height:5px;
  background:var(--sand); border:1px solid var(--ink);
}
.link::before{ left:0; }
.link::after{ right:0; }
.link--dark{ background:rgba(244,242,238,.3); }

/* ==========================================================================
   PRELOADER — the three-node motif
   ========================================================================== */
.pre__mark svg{ width:132px; height:40px; overflow:visible; }
.pm__n{ fill:none; stroke:var(--sand); stroke-width:1.4; }
.pm__n--1{ fill:var(--sand); }
.pm__n--3{ fill:var(--sand); }
.pm__l{ stroke:var(--sand); stroke-width:1.4; transform-origin:left center; animation:pmline .9s var(--ease) both; }
.pm__l--1{ animation-delay:.05s; }
.pm__l--2{ animation-delay:.4s; }
.pm__n--2{ animation:pmnode .45s var(--ease) .32s both; }
.pm__n--3{ animation:pmnode .45s var(--ease) .68s both; }
@keyframes pmline{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes pmnode{ from{ opacity:0; } to{ opacity:1; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{ background:var(--ink); border-bottom:1px solid rgba(244,242,238,.13); }
.hdr__in{ min-height:74px; gap:.9rem; }

.brand{ display:flex; align-items:center; gap:.62rem; color:var(--text); }
.brand__glyph{ width:34px; height:24px; flex:none; color:var(--text); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--font-display); font-size:1.52rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
}
.brand__sub{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.19em;
  text-transform:uppercase; color:rgba(244,242,238,.55); margin-top:.3rem;
}

.nav__link{ font-size:.83rem; letter-spacing:.015em; border-radius:0; }
.nav__link:hover{ color:var(--sand); background:rgba(244,242,238,.05); }
.nav__item.is-open > .nav__link{ color:var(--sand); }
.mega{ background:#1b1f22; border-color:rgba(244,242,238,.15); border-radius:0; }
.mega__h{ color:var(--sand); }
.mega a:hover{ color:var(--sand); }
.mega__note{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.2rem;
  justify-content:space-between;
  margin-top:1.1rem; padding-top:.85rem;
  border-top:1px solid rgba(244,242,238,.13);
  font-size:.76rem; line-height:1.5; color:rgba(244,242,238,.6);
}
.mega__note a{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sand); white-space:nowrap;
}

.hdr__tel{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  margin-left:.5rem; padding:.62rem .85rem;
  border:1px solid rgba(244,242,238,.26);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em;
  color:var(--text); white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.hdr__tel:hover{ background:var(--sand); border-color:var(--sand); color:var(--ink); }
.hdr__node{ width:5px; height:5px; background:var(--sand); flex:none; }
.hdr__tel:hover .hdr__node{ background:var(--ink); }

@media (max-width:1180px){ .hdr__tel{ display:none; } }
@media (min-width:1024px){ .nav__foot{ display:none; } }

/* ==========================================================================
   HERO — white ground, the linkage plan
   ========================================================================== */
.hero{
  background:#fff; color:var(--ink-text);
  padding-block:clamp(2rem,4.6vw,4rem) clamp(1.8rem,3.6vw,3rem);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.6rem,3.8vw,3.4rem);
  align-items:center;
  min-height:min(760px,calc(100svh - 74px));
}
.hero__copy{ min-width:0; }

.hero__eyebrow{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.3rem;
}

/* font-size stays on the token so the JS fitter can keep driving it */
.hero__h1{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--h1-size,clamp(2.5rem,7.4vw,4.9rem));
  line-height:.94; letter-spacing:-.012em;
}
.hero__h1 .line{ padding-block:.09em; }

.hero__lead{
  margin-top:1.35rem; max-width:46ch;
  font-size:clamp(.96rem,1.5vw,1.04rem); line-height:1.7;
  color:var(--ink-mute); overflow-wrap:anywhere;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.7rem; }
.hero__cta .btn{ border-radius:0; padding:.92rem 1.3rem; font-size:.83rem; letter-spacing:.02em; }
.btn--line{ border:1px solid rgba(21,24,26,.34); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.hero__strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem;
  margin-top:2rem; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-mute);
}
.hero__strip i{ display:block; width:16px; height:1px; background:rgba(21,24,26,.35); }

/* ---------- the plan figure ---------- */
.plan{
  margin:0; min-width:0;
  border:1px solid var(--rule); background:#fff;
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px -46px rgba(21,24,26,.55);
}
.plan__head{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.6rem .8rem; border-bottom:1px solid var(--rule);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel);
}
.plan__fig{ color:var(--ink); }
.plan__svg{ display:block; width:100%; height:auto; aspect-ratio:480/496; }
.plan__t{ font-family:var(--font-mono); }

.legend{ background:var(--panel); border-top:1px solid var(--rule); padding:.7rem .8rem .65rem; }
.legend__list{ display:grid; gap:.42rem; }
.legend__list li{
  display:grid; grid-template-columns:15px minmax(0,1fr); gap:.55rem;
  align-items:start; font-size:.67rem; line-height:1.4; color:#4a4f53;
}
.legend__list b{ color:var(--ink); font-weight:600; }
.legend__sw{ display:block; width:15px; height:10px; margin-top:.2rem; }
.legend__sw--source{
  border:1px solid var(--earth);
  background:repeating-linear-gradient(45deg,var(--earth) 0 1px,transparent 1px 4px);
}
.legend__sw--path{ height:0; border-top:2px dashed var(--earth); margin-top:.5rem; }
.legend__sw--rec{
  border:1.5px solid var(--ink);
  background:radial-gradient(circle at 50% 50%, var(--ink) 0 1.5px, transparent 1.7px);
}
.legend__note{
  margin-top:.55rem; font-family:var(--font-mono); font-size:.54rem;
  letter-spacing:.11em; text-transform:uppercase; color:#7a7f83;
}
.legend--flat{ border:0; border-top:1px solid var(--rule); }

/* ==========================================================================
   DATA RAIL — the title block under the hero
   ========================================================================== */
.rail{ background:var(--ink); color:var(--text); border-top:1px solid rgba(201,180,138,.4); }
.rail__in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; padding-block:1.05rem; }
.rail__item{ min-width:0; padding-left:1.05rem; border-left:1px solid rgba(244,242,238,.16); }
.rail__item:first-child{ padding-left:0; border-left:0; }
.rail__k{
  display:block; font-family:var(--font-mono); font-size:.54rem; letter-spacing:.21em;
  text-transform:uppercase; color:var(--sand); margin-bottom:.25rem;
}
.rail__v{
  display:block; font-family:var(--font-mono); font-size:.82rem;
  color:rgba(244,242,238,.92); overflow-wrap:anywhere;
}
.rail__v a:hover{ color:var(--sand); }

/* ==========================================================================
   SECTION HEAD — numbered like report clauses
   ========================================================================== */
.sect--light{ background:#fff; color:var(--ink-text); }
.sect--dark-2{ background:var(--ink); color:var(--text); }

.cl__num{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--font-mono); font-size:.61rem; letter-spacing:.21em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.15rem;
}
.cl__num span{
  display:inline-grid; place-items:center; min-width:2.15rem; padding:.2rem .4rem;
  border:1px solid var(--rule); color:var(--ink);
  font-size:.66rem; letter-spacing:.06em;
}
.cl__row{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr);
  gap:clamp(1.1rem,3.6vw,3.2rem); align-items:end;
}
.sect--dark-2 .cl__num{ color:rgba(244,242,238,.55); }
.sect--dark-2 .cl__num span{ border-color:rgba(244,242,238,.26); color:var(--sand); }

.sect__h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.95rem,4.6vw,3.25rem); line-height:.98; letter-spacing:-.006em;
  color:inherit;
}
.sect--dark-2 .sect__h2{ color:var(--text); }
.sect__lead{
  font-size:.95rem; line-height:1.68; max-width:42ch;
  color:var(--ink-mute); overflow-wrap:anywhere;
}
.sect--dark-2 .sect__lead{ color:rgba(244,242,238,.64); }

/* ==========================================================================
   01 — WHAT WE DO
   ========================================================================== */
.s1__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
.spec{ display:grid; border-top:1px solid var(--rule); }
.spec__row{
  display:grid; grid-template-columns:minmax(min(150px,100%),.52fr) 26px minmax(0,1.5fr);
  gap:.85rem; align-items:start; padding:1.1rem 0; border-bottom:1px solid var(--rule);
}
.spec__k{
  font-family:var(--font-display); font-size:1.3rem; font-weight:600;
  line-height:1.12; letter-spacing:.01em; min-width:0;
}
.spec__v{ font-size:.9rem; line-height:1.62; color:var(--ink-mute); min-width:0; }

/* ---------- figures ---------- */
.fig{ margin:0; min-width:0; }
.fig__frame{ position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--rule); }
.fig__frame img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover; object-position:center;
}
.fig--wide .fig__frame img{ aspect-ratio:1400/1266; }
.fig--s1 .fig__frame img{ aspect-ratio:4/3; }
.s3__photo{ margin-top:clamp(1.8rem,4vw,3rem); }
.s3__photo .fig__frame img{ aspect-ratio:2.5/1; }
.fig__cap{
  display:flex; gap:.6rem; align-items:baseline; margin-top:.55rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.45; color:var(--ink-mute);
}
.fig__cap span{ color:var(--ink); flex:none; }
.sect--dark-2 .fig__cap{ color:rgba(244,242,238,.52); }
.sect--dark-2 .fig__cap span{ color:var(--sand); }

/* ==========================================================================
   02 — SERVICES, as a clause table on ink
   ========================================================================== */
.svc{ border-top:1px solid rgba(244,242,238,.22); }
.svc__head,.svc__row{
  display:grid;
  grid-template-columns:3.2rem minmax(min(190px,100%),1.02fr) minmax(0,1.35fr);
  gap:clamp(.7rem,2vw,1.6rem); align-items:start;
}
.svc__head{
  padding:.55rem 0; border-bottom:1px solid rgba(244,242,238,.22);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.21em;
  text-transform:uppercase; color:rgba(244,242,238,.45);
}
.svc__group{ border-bottom:1px solid rgba(244,242,238,.15); }
.svc__group:last-child{ border-bottom:0; }
.svc__phase{
  display:flex; align-items:center; gap:.8rem;
  padding:1.35rem 0 .5rem;
  font-family:var(--font-mono); font-size:.59rem; letter-spacing:.23em;
  text-transform:uppercase; color:var(--sand);
}
.svc__pn{
  display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; flex:none;
  border:1px solid rgba(201,180,138,.5); font-size:.55rem; letter-spacing:0;
}
.svc__phase .link{ flex:1 1 auto; width:auto; margin-top:0; background:rgba(244,242,238,.18); }
.svc__row{
  padding:.9rem 0; border-top:1px solid rgba(244,242,238,.09);
  transition:background .2s var(--ease);
}
.svc__row:hover{ background:rgba(244,242,238,.04); }
.svc__n{ font-family:var(--font-mono); font-size:.64rem; color:rgba(244,242,238,.4); padding-top:.25rem; }
.svc__name{
  font-family:var(--font-display); font-size:1.2rem; font-weight:600; line-height:1.16;
  color:var(--text); overflow-wrap:anywhere; transition:color .2s;
}
.svc__name:hover{ color:var(--sand); }
.svc__ans{ font-size:.845rem; line-height:1.56; color:rgba(244,242,238,.6); min-width:0; overflow-wrap:anywhere; }

/* ==========================================================================
   03 — THE LINKAGE
   ========================================================================== */
.s3__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:start;
}
.s3__copy{ min-width:0; }
.s3__copy > p{
  font-size:.94rem; line-height:1.7; color:#3f4448;
  max-width:52ch; margin-bottom:1rem; overflow-wrap:anywhere;
}
.s3__copy > .s3__pull{
  font-family:var(--font-display); font-size:1.32rem; line-height:1.22;
  color:var(--ink); border-left:2px solid var(--sand);
  padding-left:1rem; margin:1.5rem 0 1.8rem; max-width:40ch;
}
.section-dwg{ margin:0; border:1px solid var(--rule); background:#fff; min-width:0; }
.section-dwg__svg{ display:block; width:100%; height:auto; aspect-ratio:520/320; }

/* ==========================================================================
   04 — IN THE FIELD
   ========================================================================== */
.s4__grid{
  display:grid; grid-template-columns:repeat(3,minmax(min(220px,100%),1fr));
  gap:clamp(1rem,2.2vw,1.8rem);
}
.s4__grid .fig__frame img{ aspect-ratio:4/3; }

/* ==========================================================================
   05 — EVIDENCE
   ========================================================================== */
.s5__grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.78fr);
  gap:clamp(1.6rem,4vw,3rem); align-items:start;
}
.plate{ margin:0; background:var(--ink); color:var(--text); padding:.7rem; min-width:0; }
.plate__bar{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.15rem .1rem .6rem; margin-bottom:.7rem;
  border-bottom:1px solid rgba(244,242,238,.18);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(244,242,238,.55);
}
.plate__bar span:last-child{ color:var(--sand); text-align:right; }
.plate__img{ background:#fff; }
.plate__img img{
  display:block; width:100%; height:auto; aspect-ratio:1600/1034; object-fit:contain;
}
.plate__cap{
  display:flex; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap;
  padding-top:.6rem; font-family:var(--font-mono); font-size:.54rem;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(244,242,238,.45);
}
.s5__facts{ display:grid; border-top:1px solid var(--rule); margin:0; }
.s5__facts > div{ padding:1rem 0; border-bottom:1px solid var(--rule); }
.s5__facts dt{
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel); margin-bottom:.35rem;
}
.s5__facts dd{ margin:0; font-size:.885rem; line-height:1.6; color:#3f4448; overflow-wrap:anywhere; }

/* ==========================================================================
   06 — CLIENTS & SECTORS
   ========================================================================== */
.sectors{
  display:grid; grid-template-columns:repeat(2,minmax(min(280px,100%),1fr));
  gap:0 clamp(1.4rem,3vw,2.8rem);
  border-top:1px solid rgba(244,242,238,.18);
}
.sectors li{
  display:grid; grid-template-columns:minmax(min(112px,100%),auto) 26px minmax(0,1fr);
  gap:.7rem; align-items:start; padding:1.1rem 0;
  border-bottom:1px solid rgba(244,242,238,.18);
}
.sectors__k{
  font-family:var(--font-display); font-size:1.22rem; font-weight:600;
  line-height:1.15; color:var(--text); min-width:0;
}
.sectors__v{ font-size:.855rem; line-height:1.56; color:rgba(244,242,238,.6); min-width:0; }
.s6__more{
  margin-top:1.9rem; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.15em; text-transform:uppercase;
}
.s6__more a{ color:var(--sand); border-bottom:1px solid rgba(201,180,138,.42); padding-bottom:.22rem; }
.s6__more a:hover{ color:#fff; border-color:#fff; }

/* ==========================================================================
   07 — CONTACT, the one earth band
   ========================================================================== */
.s7{ background:var(--earth); color:#fff; }
.s7 .cl__num{ color:rgba(255,255,255,.62); }
.s7 .cl__num span{ border-color:rgba(255,255,255,.32); color:#fff; }
.s7 .sect__h2{ color:#fff; }
.s7 .sect__lead{ color:rgba(255,255,255,.74); }
.s7__grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.78fr);
  gap:clamp(1.6rem,4vw,3rem); align-items:start;
  border-top:1px solid rgba(255,255,255,.22);
  padding-top:clamp(1.4rem,3vw,2.2rem);
}
.s7__call{ min-width:0; }
.s7__tel{
  display:block; font-family:var(--font-mono); font-size:clamp(1.75rem,4.4vw,2.8rem);
  line-height:1.05; color:#fff; overflow-wrap:anywhere; transition:color .2s;
}
.s7__tel:hover{ color:var(--sand); }
.s7__mail{
  display:inline-block; margin-top:.7rem; font-size:1rem; color:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:.12rem;
  overflow-wrap:anywhere;
}
.s7__mail:hover{ color:#fff; border-color:#fff; }
.s7__btns{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.6rem; }
.s7__btns .btn{ border-radius:0; padding:.92rem 1.3rem; font-size:.82rem; }
.s7 .btn--solid{ background:var(--sand); color:var(--ink); }
.s7 .btn--solid:hover{ filter:brightness(1.06); }
.s7 .btn--ghost{ border:1px solid rgba(255,255,255,.42); color:#fff; }
.s7 .btn--ghost:hover{ border-color:var(--sand); color:var(--sand); }

.s7__k{
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:.7rem;
}
.s7__addr address{ font-size:.94rem; line-height:1.72; color:rgba(255,255,255,.92); overflow-wrap:anywhere; }
.s7__note{
  display:flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sand);
}
.s7__note .node{ border-color:rgba(255,255,255,.5); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--ink); border-top:1px solid rgba(244,242,238,.16); }
.foot__brand{ min-width:0; }
.brand--foot{ margin-bottom:1.3rem; }
.foot__line{ font-size:.83rem; line-height:1.62; color:rgba(244,242,238,.6); max-width:34ch; }
.foot__line--mono{
  font-family:var(--font-mono); font-size:.73rem; line-height:1.95;
  letter-spacing:.04em; color:rgba(244,242,238,.78); max-width:none; margin-top:1.1rem;
  overflow-wrap:anywhere;
}
.foot__line--mono a:hover{ color:var(--sand); }
.foot__nav a{ overflow-wrap:anywhere; }
.foot__nav a:hover{ color:var(--sand); }
.foot__bottom{ color:rgba(244,242,238,.42); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); min-height:0; gap:2.2rem; }
  .hero__copy{ order:1; }
  .plan{ order:2; max-width:540px; width:100%; }
  .hero__h1{ font-size:var(--h1-size,clamp(2.4rem,7.6vw,3.6rem)); }

  .cl__row{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1rem; }
  .s1__grid,.s3__grid,.s5__grid,.s7__grid{ grid-template-columns:minmax(0,1fr); }
  .s4__grid{ grid-template-columns:repeat(2,minmax(min(220px,100%),1fr)); }

  .svc__head{ display:none; }
  .svc__row{ grid-template-columns:2.2rem minmax(0,1fr); padding:1rem 0; }
  .svc__ans{ grid-column:2; margin-top:.4rem; }
  .svc__n{ padding-top:.3rem; }

  .sectors{ grid-template-columns:minmax(0,1fr); }
  .rail__in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem .8rem; }
  .rail__item:nth-child(odd){ padding-left:0; border-left:0; }
}

@media (max-width:700px){
  .s4__grid{ grid-template-columns:minmax(0,1fr); }
  .s3__photo .fig__frame img{ aspect-ratio:4/3; }
  .spec__row{ grid-template-columns:minmax(0,1fr); gap:.45rem; }
  .spec__row .link{ display:none; }
  .sectors li{ grid-template-columns:minmax(0,1fr); gap:.35rem; }
  .sectors li .link{ display:none; }
  .hero__strip{ font-size:.58rem; gap:.45rem .7rem; }
  .hero__strip i{ width:10px; }
}

@media (max-width:420px){
  .brand__name{ font-size:1.34rem; letter-spacing:.14em; }
  .brand__sub{ font-size:.48rem; letter-spacing:.16em; }
  .brand__glyph{ width:28px; height:20px; }
  .svc__row{ grid-template-columns:1.9rem minmax(0,1fr); gap:.6rem; }
  .plate__bar{ flex-direction:column; gap:.3rem; }
  .plate__bar span:last-child{ text-align:left; }
}

@media (min-width:1024px){
  .plan{ max-width:540px; margin-left:auto; }
}