/* Shared full-screen standards section, matching the homepage implementation. */
.s5-top{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.8vh,18px);
  text-align:center;
  padding:clamp(22px,4.5vh,52px) 24px clamp(18px,3.5vh,40px);
}
.s5-top h2{
  font-size:clamp(24px,2.8vw,44px);
  font-weight:700;
  line-height:1.05;
  color:var(--prime);
  text-transform:uppercase;
}
.s5-top .lead{
  max-width:720px;
  color:#000;
  font-size:clamp(14px,1.45vw,21px);
  font-weight:400;
  line-height:1.4;
  text-wrap:pretty;
}
.s5-band{flex:1;min-height:0;display:flex;position:relative}
.s5-band::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  z-index:2;
  background:repeating-linear-gradient(90deg,var(--prime) 0 16px,transparent 16px 30px);
}
.s5-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  text-decoration:none;
  color:var(--dark);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  padding:clamp(20px,4.5vh,48px) clamp(14px,1.6vw,28px) clamp(18px,3.5vh,36px);
  transition:background-color .35s ease,color .35s ease;
}
.s5-col:not(:last-child){border-right:1px solid var(--rail)}
.s5-col:hover,.s5-col:focus-visible{background:var(--prime);color:#fff;outline:none}
.s5-col > *{position:relative;z-index:1}
.s5-scope{
  font-size:clamp(13px,1.2vw,17px);
  font-weight:400;
  color:var(--prime);
  text-transform:lowercase;
  letter-spacing:.03em;
  line-height:1;
  transition:color .35s ease;
}
.s5-ico{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:clamp(12px,2.5vh,24px) 0;
}
.s5-ico svg{
  height:100%;
  max-height:clamp(150px,28vh,280px);
  width:auto;
  max-width:96%;
  display:block;
  fill:none;
  stroke:var(--prime);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .35s ease,stroke-width .35s ease;
}
.s5-ico svg .dot{fill:var(--prime);stroke:none;transition:fill .35s ease}
.s5-ico svg .thin{stroke-width:.55;opacity:.55}
.s5-val{
  font-size:clamp(28px,3vw,48px);
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.s5-std{
  margin-top:clamp(6px,1.2vh,12px);
  font-size:clamp(12px,1vw,15px);
  font-weight:400;
  line-height:1.4;
  text-wrap:pretty;
  max-width:30em;
  min-height:4.2em;
}
.s5-lab{
  margin-top:clamp(4px,1vh,10px);
  font-size:clamp(10px,.85vw,12px);
  font-weight:400;
  color:rgba(1,0,1,.55);
  text-transform:uppercase;
  letter-spacing:.05em;
  min-height:2.4em;
  transition:color .35s ease;
}
.s5-col:hover .s5-scope,.s5-col:focus-visible .s5-scope,
.s5-col:hover .s5-lab,.s5-col:focus-visible .s5-lab{color:#fff}
.s5-col:hover .s5-ico svg,.s5-col:focus-visible .s5-ico svg{stroke:#fff;stroke-width:1.3}
.s5-col:hover .s5-ico svg .dot,.s5-col:focus-visible .s5-ico svg .dot{fill:#fff}
.s5-ico svg > *{transform-box:fill-box;transform-origin:center}

@keyframes s5-sound-wave{
  0%,100%{opacity:1;transform:none}
  50%{opacity:.25;transform:translateX(4px) scale(1.07)}
}
@keyframes s5-dot-pulse{
  0%,100%{opacity:1;transform:none}
  50%{opacity:.65;transform:scale(1.28)}
}
.s5-col:nth-child(1):hover .s5-ico path:nth-of-type(1),
.s5-col:nth-child(1):focus-visible .s5-ico path:nth-of-type(1){animation:s5-sound-wave 1.8s ease-in-out infinite}
.s5-col:nth-child(1):hover .s5-ico path:nth-of-type(2),
.s5-col:nth-child(1):focus-visible .s5-ico path:nth-of-type(2){animation:s5-sound-wave 1.8s ease-in-out .18s infinite}
.s5-col:nth-child(1):hover .s5-ico path:nth-of-type(3),
.s5-col:nth-child(1):focus-visible .s5-ico path:nth-of-type(3){animation:s5-sound-wave 1.8s ease-in-out .36s infinite}
.s5-col:nth-child(1):hover .s5-ico .dot,
.s5-col:nth-child(1):focus-visible .s5-ico .dot{animation:s5-dot-pulse 1.8s ease-in-out infinite}

@keyframes s5-flame-outer{
  0%,100%{d:path("M60 12 C60 34 36 42 36 68 A24 24 0 0 0 84 68 C84 52 72 44 68 28 C64 40 56 44 60 12 Z")}
  28%{d:path("M56 8 C62 31 36 42 36 68 A24 24 0 0 0 84 68 C84 52 74 43 70 25 C65 38 55 42 56 8 Z")}
  58%{d:path("M63 10 C57 34 36 42 36 68 A24 24 0 0 0 84 68 C84 52 70 46 67 30 C63 42 59 45 63 10 Z")}
  78%{d:path("M59 6 C64 30 36 42 36 68 A24 24 0 0 0 84 68 C84 52 73 42 69 24 C63 37 55 41 59 6 Z")}
}
@keyframes s5-flame-inner{
  0%,100%{d:path("M60 62 C60 70 52 72 52 82 A8 8 0 0 0 68 82 C68 74 62 72 62 66")}
  28%{d:path("M57 59 C61 69 52 72 52 82 A8 8 0 0 0 68 82 C68 74 64 71 63 64")}
  58%{d:path("M62 61 C58 70 52 72 52 82 A8 8 0 0 0 68 82 C68 74 61 73 60 67")}
  78%{d:path("M59 57 C62 68 52 72 52 82 A8 8 0 0 0 68 82 C68 74 63 70 62 63")}
}
.s5-col:nth-child(2):hover .s5-ico .flame-outer,
.s5-col:nth-child(2):focus-visible .s5-ico .flame-outer{animation:s5-flame-outer 1.35s ease-in-out infinite}
.s5-col:nth-child(2):hover .s5-ico .flame-inner,
.s5-col:nth-child(2):focus-visible .s5-ico .flame-inner{animation:s5-flame-inner 1.05s ease-in-out infinite}

@keyframes s5-air-flow{
  0%,100%{opacity:1;transform:none}
  50%{opacity:.2;transform:translateX(6px)}
}
.s5-col:nth-child(3):hover .s5-ico path:nth-of-type(1),
.s5-col:nth-child(3):focus-visible .s5-ico path:nth-of-type(1){animation:s5-air-flow 1.65s ease-in-out infinite}
.s5-col:nth-child(3):hover .s5-ico path:nth-of-type(2),
.s5-col:nth-child(3):focus-visible .s5-ico path:nth-of-type(2){animation:s5-air-flow 1.65s ease-in-out .22s infinite}
.s5-col:nth-child(3):hover .s5-ico path:nth-of-type(3),
.s5-col:nth-child(3):focus-visible .s5-ico path:nth-of-type(3){animation:s5-air-flow 1.65s ease-in-out .44s infinite}
.s5-col:nth-child(3):hover .s5-ico .dot,
.s5-col:nth-child(3):focus-visible .s5-ico .dot{animation:s5-dot-pulse 1.65s ease-in-out infinite}

@keyframes s5-ripple{
  0%,100%{opacity:1;transform:none}
  50%{opacity:.15;transform:scale(1.12)}
}
.s5-col:nth-child(4):hover .s5-ico circle:nth-of-type(1),
.s5-col:nth-child(4):focus-visible .s5-ico circle:nth-of-type(1){animation:s5-ripple 1.8s ease-out infinite}
.s5-col:nth-child(4):hover .s5-ico circle:nth-of-type(2),
.s5-col:nth-child(4):focus-visible .s5-ico circle:nth-of-type(2){animation:s5-ripple 1.8s ease-out .3s infinite}
.s5-col:nth-child(4):hover .s5-ico circle:nth-of-type(3),
.s5-col:nth-child(4):focus-visible .s5-ico circle:nth-of-type(3){animation:s5-ripple 1.8s ease-out .6s infinite}
.s5-col:nth-child(4):hover .s5-ico .dot,
.s5-col:nth-child(4):focus-visible .s5-ico .dot{animation:s5-dot-pulse 1.8s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .s5-col:hover .s5-ico svg > *,.s5-col:focus-visible .s5-ico svg > *{animation:none !important}
}
@media (max-width:1000px){
  .s5-band{display:grid;grid-template-columns:repeat(2,1fr)}
  .s5-col{border-right:0 !important;border-bottom:1px solid var(--rail)}
  .s5-col:nth-child(odd){border-right:1px solid var(--rail) !important}
  .s5-col:nth-child(n+3){border-bottom:0}
  .s5-ico svg{max-height:clamp(120px,20vh,190px)}
}
/* ===== phones (noa, 30.7.26) — four rows, icon left, text right =====
   Replaces a block that gave up on the snap: it set `.frame.s5{height:auto;
   overflow:visible}` and stacked the four full cards, which came to 1592px at 390 —
   more than twice the 760px a section actually gets. The section keeps the snap now
   and is RE-COMPOSED: each certificate is one band-width row with a small static icon
   (the hover animations are dead on touch anyway — the animation question is layer 3).
   `.s5-col` has no wrapper around its text, so the row is a 2-column GRID with the icon
   spanning all four text rows, rather than a flex row. Text left, icon RIGHT, and the
   icon is sized to the row rather than kept as a small mark (noa, 30.7.26) — `--s5ico`
   scales with the viewport and the text column takes what is left. Rows are flex:1 1 0
   inside the band so the four are exactly equal regardless of how much the std text of
   one certificate wraps. Breakpoint moved 760 -> 767 to match the rest of the site. */
/* TABLET (768-1000): give the graphic the room it was missing. The `max-height` cap was
   never the limiter here — measured at 834 the icon SLOT itself was only 73px tall and the
   svg filled it completely, because 250px of the 323px cell went to column padding, the
   icon's own vertical margin and the two text lines. Tightening those three is what makes
   the drawing bigger (noa: "בתקנים להגדיל את הגרפיקות"), so the cap is raised to match.
   Scoped above 767 so the phone's row layout below is untouched. */
@media (min-width:768px) and (max-width:1000px){
  .s5-col{padding:clamp(12px,1.8vh,20px) clamp(14px,1.6vw,28px) clamp(10px,1.6vh,18px)}
  .s5-ico{margin:clamp(6px,1vh,10px) 0}
  .s5-ico svg{max-height:none;max-width:100%}
}

@media (max-width:767px){
  .s5-top{padding:20px 8px 16px;gap:6px}
  .s5-top h2{font-size:26px}
  .s5-top .lead{font-size:14px;line-height:1.35}
  .s5-band{display:flex;flex-direction:column}
  .s5-col{--s5ico:clamp(76px,26vw,110px);
          flex:1 1 0;min-height:0;
          display:grid;grid-template-columns:1fr var(--s5ico);column-gap:14px;align-content:center;
          padding:8px clamp(8px,2.2vw,32px);
          border-right:0 !important;border-bottom:1px solid var(--rail) !important}
  /* the 2-up block above sets border-right on :nth-child(odd) with !important, and that
     selector outranks a plain .s5-col — without this the 1st and 3rd rows draw a right
     rail that reads as a phantom second column */
  .s5-col:nth-child(odd){border-right:0 !important}
  .s5-col:last-child{border-bottom:0 !important}
  .s5-ico{grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:center;
          flex:none;width:var(--s5ico);margin:0}
  .s5-ico svg{max-height:var(--s5ico);max-width:var(--s5ico)}
  .s5-scope,.s5-val,.s5-std,.s5-lab{grid-column:1}
  .s5-scope{font-size:12px}
  .s5-val{font-size:24px}
  .s5-std{margin-top:2px;font-size:12px;min-height:0}
  .s5-lab{margin-top:3px;font-size:10px;min-height:0}
}