/* ==========================================================================
   Smart 7-in-1 Soil Tester — page styles.

   Two parts. The opening film (.sfilm) is a tall section with a sticky stage the
   scrollbar drives, in the same family as the pest page's films. Below it the
   page returns to the site's ordinary ground: bone, olive ink, orange kept for
   action. Everything is namespaced so nothing here can reach another page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The opening film
   --------------------------------------------------------------------------
   Static first. .sstatic is the whole opening on its own; soil.js only swaps in
   the stage (.is-film) once it knows the film can run, so a page without the
   film, without JavaScript or with reduced motion never has an empty tall
   section to scroll through. */

/* over the award band, which is dark but scrolls as an ordinary section, the bar
   takes a dark ground of its own so the links never sit on the photographs */
.nav.over-flat:not(.menu-open){background:rgba(23,29,19,.84);border-bottom-color:rgba(245,239,229,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}

.sfilm{position:relative}
.sstage{display:none}
.sfilm.is-film{height:var(--sfilm-h,540vh);background:#0B0F07}
.sfilm.is-film .sstage{display:block}
.sfilm.is-film .sstatic{display:none}

/* the site's own two motion exits, the same as the pest page */
@media (prefers-reduced-motion:reduce),
       (orientation:landscape) and (pointer:coarse) and (max-height:480px){
  .sfilm.is-film{height:auto;background:none}
  .sfilm.is-film .sstage{display:none}
  .sfilm.is-film .sstatic{display:block}
}

.sstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:#0B0F07;color:var(--bone);isolation:isolate}

/* The film fills the frame edge to edge. It is composed with room above the
   handle and below the soil line, so the top and bottom crop a wide window
   makes never reaches the hardware. --sfocus moves the crop if a later cut
   needs it. */
.svid,.spost{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--sfocus,50% 50%)}
.spost{background:#0B0F07 var(--sfocus,50% 50%)/cover no-repeat;opacity:1;
  transition:opacity .7s var(--ease)}
.sstage.film-ready .spost{opacity:0}
.svid{opacity:0;transition:opacity .7s var(--ease)}
.sstage.film-ready .svid{opacity:1}

.sring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border:1px solid rgba(245,239,229,.2);border-top-color:rgba(245,239,229,.7);
  border-radius:50%;animation:sspin 1s linear infinite;opacity:.75;transition:opacity .4s linear}
.sstage.film-ready .sring{opacity:0}
@keyframes sspin{to{transform:rotate(360deg)}}

/* a quiet vignette only; each block of words brings its own scrim */
.sveil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 96% 84% at 56% 48%,
    rgba(8,11,5,0) 40%,rgba(8,11,5,.34) 82%,rgba(8,11,5,.56) 100%)}
/* Over a dark stage the bar turns to cream type with no ground of its own, and a
   sunrise sky is the one thing cream type cannot sit on. A shallow shade under
   the bar keeps the links legible whatever the frame behind them is doing. */
.stop{position:absolute;left:0;right:0;top:0;height:calc(var(--nav-h) + 70px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,5,.5) 0%,rgba(8,11,5,.22) 55%,rgba(8,11,5,0) 100%)}

/* The film ends on a frame of warm light and earth, and the page below is bone.
   Over the last stretch of scroll the foot of the frame settles into that ground
   so the film hands over rather than stopping at a hard edge. */
.sfloor{position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(to top,var(--bone) 0%,rgba(245,239,229,.6) 38%,rgba(245,239,229,0) 100%);
  opacity:var(--floor,0)}

/* ---- words over the film ------------------------------------------------- */
.sbeats{position:absolute;inset:0;pointer-events:none}
.sbeat{position:absolute;inset:0;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 12px) var(--pad) clamp(88px,12vh,132px)}
.sbeat .sb{position:relative;isolation:isolate;max-width:min(640px,46vw);
  opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.sbeat.on .sb,.sbeat .sb:focus-within{opacity:1;transform:none}
.sbeat.on .sb{pointer-events:auto}
/* the scrim belongs to the words and arrives with them, so the picture is only
   darkened where there is something to read over it */
.sbeat .sb::before{content:"";position:absolute;inset:-60% -46% -60% -70%;z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 44% 50%,
    rgba(8,12,4,.62) 0%,rgba(8,12,4,.44) 42%,rgba(8,12,4,.16) 70%,rgba(8,12,4,0) 90%)}
.sbeat .kicker{color:var(--bone);opacity:.86;text-shadow:var(--tshadow);margin-bottom:0}
.sbeat .kicker::before{background:var(--sand);opacity:1}
/* "Smart 7-in-1" over "Soil Tester": the name is held together by .nw, and the
   measure is set in em so the break lands between the two halves at any size.
   The block has to stay inside the quiet left side of the frame, clear of the
   case, which starts a little over a third of the way across. */
.sbeat h1,.sbeat .sh{font-family:var(--display);font-weight:400;color:var(--bone);
  margin:18px 0 0;letter-spacing:-.026em;line-height:1.02;
  font-size:clamp(2.4rem,4.6vw,4.7rem);text-shadow:var(--tshadow);max-width:6.2em}
/* the Malay name breaks well at a wider measure: "Penguji Tanah / Pintar 7 dalam 1" */
html[lang="ms"] .sbeat h1{max-width:7.3em}
.nw{white-space:nowrap}
.sbeat .lede{margin:clamp(16px,2.2vh,26px) 0 0;max-width:30ch;color:var(--bone);opacity:.9;
  font-size:clamp(1.06rem,1.55vw,1.36rem);line-height:1.45;text-shadow:var(--tshadow)}
.sbeat .btnrow{margin-top:clamp(24px,3.4vh,38px)}

/* The illustrative note sits in the corner while the screen counts up. It is
   page text rather than part of the film, and it keeps clear of the screen. */
.snote{position:absolute;left:var(--pad);bottom:clamp(26px,4.4vh,44px);margin:0;
  max-width:min(420px,60vw);font-family:var(--mono);font-size:clamp(10px,.9vw,11px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);text-shadow:var(--tshadow);
  opacity:0;transition:opacity .5s linear;pointer-events:none}
.snote.on{opacity:.78}

.scue{position:absolute;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%);
  margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bone);text-shadow:var(--tshadow);opacity:0;transition:opacity .5s linear;
  pointer-events:none}
.scue.on{opacity:.8}
.scue i{display:block;width:1px;height:34px;background:rgba(245,239,229,.28);position:relative;overflow:hidden}
.scue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--bone);
  animation:scuerun 2.2s var(--ease-soft) infinite}
@keyframes scuerun{to{top:100%}}

/* Visible for the whole of the film, bottom right, where it never covers the
   hardware or the screen. It is a real link to the first section, so it works
   before the script has run and with the script gone. */
.sskip{position:absolute;right:var(--pad);bottom:clamp(20px,3.6vh,36px);z-index:3;
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;
  border:1px solid rgba(245,239,229,.38);border-radius:999px;
  background:rgba(10,14,6,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;opacity:0;visibility:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),opacity .4s linear,visibility .4s}
/* shown for the whole film and gone once the page has taken over */
.sskip.on{opacity:1;visibility:visible}
.sskip:hover{border-color:var(--bone);background:rgba(10,14,6,.5)}
.sskip svg{width:10px;height:10px;flex:0 0 auto}

/* ---- screens that are not wide ---------------------------------------------
   A 16:9 film filling a tall frame shows about a third of its width, which
   would cut the case, the cable or the probe out of shot. Below 6:5 the film is
   shown whole, across the full width, and the words move under it instead of
   over it. The site's other films make the same trade on phones. */
@media (max-aspect-ratio:6/5){
  .svid,.spost{inset:auto 0 auto 0;top:calc(var(--nav-h) + 4vh);height:auto;aspect-ratio:16/9}
  .spost{height:56.25vw}
  .sstage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 60% at 50% 28%,#1B2410 0%,#0B0F07 70%)}
  .svid,.spost,.sveil,.sfloor,.sbeats{z-index:1}
  .sveil{display:none}
  .sbeat{align-items:flex-end;padding:0 var(--pad) clamp(96px,15vh,150px)}
  .sbeat .sb{max-width:100%}
  .sbeat .sb::before{display:none}
  .sbeat h1,.sbeat .sh{font-size:clamp(2.1rem,8.6vw,3.2rem)}
  .sbeat .lede{font-size:clamp(1rem,4vw,1.16rem)}
  .snote{bottom:auto;top:calc(var(--nav-h) + 4vh + 56.25vw + 14px);max-width:none;right:var(--pad)}
  /* under the picture rather than beside the skip button, which it would collide
     with on a phone */
  .scue{bottom:auto;top:calc(var(--nav-h) + 4vh + 56.25vw + 18px)}
  .scue i{height:22px}
  .sfloor{display:none}
}

/* phones: the same film in about three quarters of the thumb travel */
@media (max-width:860px){
  .sfilm.is-film{height:calc(var(--sfilm-h,540vh) * .72)}
  .sskip{padding:0 14px;letter-spacing:.18em}
}
@media (max-height:560px){ .sbeat .lede{display:none} }

/* --------------------------------------------------------------------------
   The static opening
   --------------------------------------------------------------------------
   The site's product hero, unchanged in form, so the page never opens on
   anything less finished than it did before the film. */
.sstatic .kicker{margin-bottom:24px}
.sstatic .lede{max-width:34ch}

/* --------------------------------------------------------------------------
   Below the film
   -------------------------------------------------------------------------- */

/* ---- overview ----------------------------------------------------------------
   The rule under the kicker is the datum for both columns: the heading and the
   paragraph begin on it together, instead of being hung from the bottom of the
   section and drifting apart at every width. */
.sov .kicker{margin-bottom:clamp(24px,3.2vh,34px)}
.sov-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,5vw,92px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(24px,3.4vh,40px)}
.sov-grid .h2{max-width:13ch}
/* the paragraph's first line sits on the heading's, not on the box */
.sov-b{margin-top:0;padding-top:clamp(3px,.6vw,9px);max-width:52ch}

/* the seven, written the way the screen writes them */
.sov-syms{margin-top:clamp(28px,3.6vh,42px);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sov-syms span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;line-height:1;
  color:var(--text-2);background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:8px 13px}
.sov-syms .lb{border:0;background:none;padding:0 8px 0 0;color:var(--text-3);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}

/* the award, as a card that leads to the section that evidences it */
.sov-award{margin-top:clamp(38px,5.4vh,64px);display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,30px);
  padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px);text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.sov-award:hover{border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 26px 48px -34px rgba(36,40,24,.5)}
.sov-award .mdl svg{width:clamp(34px,3.2vw,44px);height:auto;display:block;
  filter:drop-shadow(0 6px 10px rgba(36,40,24,.22))}
.sov-award .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3)}
.sov-award .v{display:block;margin-top:6px;font-size:clamp(1rem,1.25vw,1.14rem);color:var(--text)}
.sov-award .go{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--text-2);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.sov-award .go svg{width:13px;height:13px}
.sov-award:hover .go{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:900px){.sov-grid{grid-template-columns:1fr}.sov-b{padding-top:0}}
@media (max-width:520px){
  .sov-award{grid-template-columns:auto minmax(0,1fr);row-gap:16px}
  .sov-award .go{grid-column:2;justify-self:start}
}

/* ---- the seven readings ------------------------------------------------------
   The site's reading cards, without the fill bars: a bar implies a level, and
   these cards describe what a reading is, not a value. */
.srd .kicker{margin-bottom:clamp(24px,3.2vh,34px)}
.srd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,88px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(24px,3.4vh,40px)}
.soil7.plain .sc{gap:10px}
.soil7.plain .sc p{margin-top:2px}
/* the screen in its bezel: black surround, a grey inner frame, then the glass */
.sscreen{margin:0}
.sscreen .bez{background:#16191d;border-radius:18px;padding:clamp(12px,1.5vw,20px);
  box-shadow:inset 0 0 0 1px #2c3137,0 28px 56px -30px rgba(36,40,24,.55)}
.sscreen .bez img{width:100%;height:auto;display:block;border-radius:3px;
  outline:clamp(6px,.7vw,10px) solid #4a5058;outline-offset:0}
.sscreen figcaption{margin-top:14px;font-size:.86rem;line-height:1.5;color:var(--text-2);max-width:52ch}
@media (max-width:900px){.srd-grid{grid-template-columns:1fr;gap:clamp(26px,4vh,36px)}}

/* ---- in use ------------------------------------------------------------------
   Each step carries a drawing of itself. They are line drawings in the page's own
   ink, and they draw themselves in when the row arrives: the case and its
   connector, the probe standing in the ground, seven tiles filling one screen. */
.suse{margin-top:clamp(40px,6vh,68px);list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,34px)}
/* each card's drawing starts a beat after the one before it */
.suse li{--t:0s}
.suse li:nth-child(2){--t:.09s}
.suse li:nth-child(3){--t:.18s}

.ufig{margin:0 0 clamp(18px,2.4vh,26px);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:linear-gradient(168deg,var(--paper),var(--bone-2))}
.ufig .art{display:block;width:100%;height:auto;aspect-ratio:200/140}
.ufig .art [data-draw]{fill:none;stroke:var(--text-2);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ufig .art .ac{stroke:var(--sage);stroke-width:2.4}
.ufig .art .fl{fill:var(--sage-soft);stroke:none}
.ufig .art .cl circle{fill:var(--line-strong)}
.ufig .art .tl rect{fill:var(--bone-2);stroke:var(--line-2);stroke-width:1.2}
.ufig .art .bar path{fill:none;stroke:var(--sage);stroke-width:3;stroke-linecap:round}

/* every stroked shape carries pathLength="1", so one dash length draws them all */
.suse [data-draw]{stroke-dasharray:1.02;stroke-dashoffset:1.02;
  transition:stroke-dashoffset 1s var(--ease) calc(var(--t) + var(--d,0s))}
.suse.in [data-draw]{stroke-dashoffset:0}
.suse [data-fade]{opacity:0;transition:opacity .6s var(--ease) calc(var(--t) + var(--d,0s))}
.suse.in [data-fade]{opacity:1}

.suse .n{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--sage);
  border-top:1px solid var(--line-strong);padding-top:clamp(15px,2vh,21px)}
.suse h3{margin-top:14px;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.02em}
.suse p{margin-top:12px;color:var(--text-2);max-width:34ch}
@media (max-width:860px){.suse{grid-template-columns:1fr;gap:clamp(30px,5vh,46px)}}
@media (prefers-reduced-motion:reduce){
  .suse [data-draw]{stroke-dashoffset:0;transition:none}
  .suse [data-fade]{opacity:1;transition:none}
}

/* ---- in the field -------------------------------------------------------------- */
#field .h2{max-width:18ch}
.sfield{margin-top:clamp(40px,6vh,68px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-bottom:0}
.sfield figure{margin:0}
.sfield .ph{aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--bone-2);
  border:1px solid var(--line)}
.sfield img{width:100%;height:100%;object-fit:cover;display:block}
.sfield figcaption{margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--text-2);max-width:34ch}
@media (max-width:1000px){.sfield{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.sfield{gap:10px}.sfield figcaption{font-size:.84rem}}

/* ---- the hardware ------------------------------------------------------------
   The picture and the list are one thing: six markers on the render, six rows
   beside it, and pointing at either lights the other. */
.shw{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4.6vw,80px);align-items:start}
.shw figure{margin:0}
.shwfig .shot{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:var(--bone-2)}
.shwfig .shot img{width:100%;height:auto;display:block}
.shw figcaption{margin-top:14px;font-size:.9rem;color:var(--text-2);line-height:1.55;max-width:46ch}

/* the markers are buttons: pointing at one previews its row, clicking holds the
   pair lit (soil.js puts .is-on on both), clicking again lets it go */
/* the button is a finger-sized 44px square so it can be tapped on a phone; the
   dot people see is the smaller circle inside it */
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:44px;height:44px;-webkit-appearance:none;appearance:none;padding:0;
  border:0;background:none;font:inherit;cursor:pointer;display:grid;place-items:center}
.pin i{font-style:normal;font-family:var(--mono);font-size:11px;line-height:1;color:var(--text);
  width:clamp(26px,2.1vw,30px);height:clamp(26px,2.1vw,30px);border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,253,248,.93);border:1px solid var(--line-2);
  box-shadow:0 8px 18px -10px rgba(18,22,10,.7);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.pin:focus-visible{outline:0}
.pin:focus-visible i{outline:2px solid var(--accent);outline-offset:3px}

.shw .specs{margin-top:clamp(24px,3.4vh,36px)}
.shw .spec{grid-template-columns:minmax(120px,.5fr) 1.5fr}
.shw .spec[data-pin]{position:relative;isolation:isolate;cursor:pointer}
/* the lit row: a panel behind it, an accent edge, the label in orange and the
   sentence a shade heavier */
.shw .spec[data-pin]::before{content:"";position:absolute;z-index:-1;inset:0 -16px;
  border-radius:14px;background:var(--paper);opacity:0;transform:scale(.99);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.shw .spec[data-pin]::after{content:"";position:absolute;left:-16px;top:6px;bottom:7px;width:2px;
  border-radius:2px;background:var(--accent);opacity:0;transition:opacity .35s var(--ease)}
.shw .spec .k,.shw .spec .v{transition:color .35s var(--ease),font-weight .2s var(--ease)}
.shw .spec:hover .k{color:var(--accent)}
.shw .spec.is-on::before{opacity:1;transform:none}
.shw .spec.is-on::after{opacity:1}
.shw .spec.is-on .k{color:var(--accent)}
.shw .spec.is-on .v{font-weight:600}
/* hover previews the pair, a click holds it */
.shw:has(.spec[data-pin="1"]:hover) .pin[data-n="1"] i,
.shw:has(.spec[data-pin="2"]:hover) .pin[data-n="2"] i,
.shw:has(.spec[data-pin="3"]:hover) .pin[data-n="3"] i,
.shw:has(.spec[data-pin="4"]:hover) .pin[data-n="4"] i,
.shw:has(.spec[data-pin="5"]:hover) .pin[data-n="5"] i,
.shw:has(.spec[data-pin="6"]:hover) .pin[data-n="6"] i,
.pin:hover i,.pin.is-on i{background:var(--accent);border-color:var(--accent);color:#fff;
  transform:scale(1.16);box-shadow:0 10px 22px -10px rgba(224,86,22,.85)}
@media (max-width:900px){.shw{grid-template-columns:1fr}}
@media (max-width:760px){.shw .spec{grid-template-columns:1fr}}
@media (max-width:520px){.pin i{width:25px;height:25px;font-size:10px}}
@media (prefers-reduced-motion:reduce){
  .pin i,.shw .spec[data-pin]::before,.shw .spec[data-pin]::after,
  .shw .spec .k,.shw .spec .v{transition:none}
}

/* ---- recognition and documents ------------------------------------------------
   The award gets the page's one dark band: a deeper ground than the closer that
   follows it, a drawn medal for a mark, and both documents shown large enough to
   be read rather than filed in a corner. */
.sec.dark.srecsec{background:var(--forest-3)}
.srecsec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(54% 44% at 80% 4%,rgba(174,190,140,.17),transparent 68%)}
.srecsec .wrap{position:relative;z-index:1}
/* the closer is a lighter forest, so the two bands need a seam */
.closer{border-top:1px solid rgba(245,239,229,.14)}

.srec-title{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);align-items:center}
.srec-title .h1{font-size:clamp(2.6rem,6vw,4.9rem);max-width:12ch}
.srec-title .lede{max-width:60ch}
.srec-medal svg{width:clamp(88px,10vw,148px);height:auto;display:block;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.45))}

.sdocs{margin-top:clamp(46px,7vh,84px);display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,.82fr);gap:clamp(16px,2.2vw,30px);
  align-items:start}
.sdocs figure{margin:0}
.sdocs a{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--forest-2);
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.sdocs a:hover{border-color:var(--sage-soft);transform:translateY(-4px);
  box-shadow:0 34px 60px -40px rgba(0,0,0,.85)}
.sdocs img{width:100%;height:auto;display:block}
.sdocs figcaption{margin-top:14px;font-size:.9rem;line-height:1.55;color:var(--text-2)}

.srec .specs{margin-top:clamp(44px,6.4vh,74px)}
.srec .spec{grid-template-columns:minmax(150px,.52fr) 1.48fr}
@media (max-width:900px){
  .srec-title{grid-template-columns:1fr;justify-items:start}
  .srec-medal{order:-1}
  .sdocs{grid-template-columns:1fr;gap:clamp(26px,4vh,36px)}
  .sdocs .doc{max-width:460px}
}
@media (max-width:760px){.srec .spec{grid-template-columns:1fr}}