/* ==========================================================================
   THE GUARANTEE — the seal band. Shared by the homepage and /system.

   Load AFTER system.css:

     <link rel="stylesheet" href="/css/system.css">
     <link rel="stylesheet" href="/css/guarantee.css">

   These rules used to live in the inline <style> in index.html. They are in
   a file now because /system states the same promise and had grown a second,
   different-looking guarantee of its own — two versions of the biggest claim
   on the site, styled two ways. One definition, both pages.

   Tokens, type, .sec and .label come from system.css. No hardcoded colours.
   ========================================================================== */

.gte{
  position:relative;z-index:1;
  /* Seal first, copy second. The seal used to sit in a narrow right-hand
     column below the argument, which meant the one genuinely distinctive
     object in the section was the last thing anybody looked at. Reading
     order on a left-to-right page puts it first. */
  display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,72px);align-items:center;
}
/* NO border, NO background, NO padding, NO box-shadow — and that is the point.
   This used to be a bordered oxblood card inside a section that already had a
   ground, so the biggest promise on the site was delivered from inside a box
   that looked like every other box. The glow ground below belongs to the
   SECTION; the content just sits on it. */
@media (max-width:820px){
  .gte{grid-template-columns:1fr;gap:clamp(26px,6vw,40px);justify-items:center;text-align:center}
  .gte-list li{text-align:left}
}

/* The section's own ground. Two warm blooms — one centred on the seal, one
   behind the copy — over a vignette that drops the edges. Gradients on the
   section itself, so there is nothing to draw a border around. */
.gte-sec{
  position:relative;overflow:hidden;
  background:
    radial-gradient(52% 78% at 26% 50%,color-mix(in srgb,var(--ox) 62%,transparent),transparent 70%),
    radial-gradient(64% 86% at 88% 34%,color-mix(in srgb,var(--ox-2) 42%,transparent),transparent 72%),
    radial-gradient(130% 110% at 50% 50%,transparent 42%,color-mix(in srgb,var(--ox-deep) 76%,transparent) 100%),
    var(--brown-2);
}
/* Hairline top edge, same device as the logo band: one lit seam is what makes
   a colour change read as a deliberate panel instead of a rendering artefact. */
.gte-sec::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 46%,transparent),transparent);
}
.gte-sec>.wrap{position:relative;z-index:1}
.gte-sec h2{max-width:20ch}
@media (max-width:820px){.gte-sec h2{max-width:none}}

/* ---- THE SEAL -----------------------------------------------------------
   A flat PNG now. This was an inline SVG assembled out of two text arcs, a
   drawn notched banner and the mascot dropped in through <image href>, because
   at the time there was no badge artwork to use. There is now, so the markup is
   one <img> and the rules that styled the arcs (.seal-arc, .seal-word) are
   gone. If you are looking for them in git history: they were removed with the
   swap, not lost.

   Everything below still applies, because it never touched the SVG internals:
   the size, the float, and the drop shadow that lifts the badge off the ground.

   Palette is inverted against the section: a cream disc inside an oxblood
   ring. That inversion is the whole reason it reads as a stamped thing rather
   than another card — it is the only cream circle on the page.               */
.gte-seal{position:relative;display:grid;place-items:center;width:100%;isolation:isolate}
.seal{
  position:relative;z-index:1;
  width:clamp(196px,20vw,276px);height:auto;
  filter:drop-shadow(0 22px 42px color-mix(in srgb,var(--ox-deep) 76%,transparent));
  animation:sealFloat 11s ease-in-out infinite;
}
/* Rings. Three concentric hairlines pushed out from under the seal on a stagger,
   fading as they widen — the badge reads as something being stamped down rather
   than a graphic sitting still. Transform + opacity only, so the whole thing
   runs on the compositor.

   Deliberately NOT a rotation of the seal itself. A turning ring was the first
   instinct here and it is the wrong one: this badge carries the biggest claim
   on the page and a ring in permanent motion means the company name is almost
   never level. A stamp should look stamped; the motion happens around it. */
.gte-rings{position:absolute;z-index:0;inset:0;display:grid;place-items:center;pointer-events:none}
.gte-rings i{
  grid-area:1/1;display:block;
  width:clamp(196px,20vw,276px);aspect-ratio:1;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  opacity:0;animation:sealRing 7s ease-out infinite;
}
.gte-rings i:nth-child(2){animation-delay:2.33s}
.gte-rings i:nth-child(3){animation-delay:4.66s}
@keyframes sealRing{
  0%  {transform:scale(.94);opacity:0}
  18% {opacity:.5}
  100%{transform:scale(1.62);opacity:0}
}
@keyframes sealFloat{
  0%,100%{transform:translateY(-5px)}
  50%    {transform:translateY(5px)}
}
@media (prefers-reduced-motion:reduce){
  .seal{animation:none}
  .gte-rings i{animation:none;opacity:.22}
  .gte-rings i:nth-child(2){transform:scale(1.22)}
  .gte-rings i:nth-child(3){transform:scale(1.44)}
}

.gte-body{margin:0;font-size:clamp(15.5px,1.4vw,17px);line-height:1.62;color:var(--sand-2);max-width:54ch}
/* The promise is the sentence the whole section exists to deliver, so it is
   set at headline scale and given air rather than a rule or a box. It has to
   survive somebody who only skims. */
.gte-promise{
  margin:clamp(18px,2vw,26px) 0 0;
  font-weight:900;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(23px,2.9vw,38px);color:var(--sand);
}
.gte-promise em{font-style:normal;color:var(--accent)}

/* Two columns, not a wrapping flex row and not a stack. Wrapping left the
   third claim hanging under a ragged pair; stacking repeated the shape of the
   numbered list two sections up. A fixed 2-up puts the odd item at the start
   of its own row, which reads as deliberate. */
.gte-list{
  list-style:none;margin:clamp(20px,2.3vw,28px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(16px,1.9vw,24px);
}
/* Stacked under 820. width:max-content + auto margins centres the LIST as a
   block while the rows stay flush left inside it — justify-items:center
   centres each row on its own text length, which leaves the ticks in a ragged
   column and looks like a rendering fault. */
@media (max-width:820px){.gte-list{grid-template-columns:1fr;width:max-content;max-width:100%;margin-inline:auto;justify-items:start}}
.gte-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:var(--sand)}
/* Checkmark drawn from two borders rather than a glyph or an icon font, so it
   sits identically in every browser and inherits the accent token. */
.gte-list li::after{
  content:"";position:absolute;left:5px;top:.3em;width:5px;height:9px;
  border:solid var(--accent);border-width:0 1.9px 1.9px 0;transform:rotate(45deg);
}

/* SIGNED, not credited.
   This was a single 13px grey line: name, middot, job title, then the package
   qualifier in caps immediately after it, all at the same weight on the same
   baseline. Three unrelated pieces of information reading as one sentence, and
   the only one set loud enough to notice was the legal footnote.

   A guarantee is a promise by a person, so the person is now the loudest thing
   in the block and the qualifier is the quietest. The rule above the row and
   the accent stroke beside the name are what separate it from the tick list
   without adding another box to a section whose whole design is that it has
   none. */
.gte-sign{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px clamp(16px,2vw,28px);
  margin:clamp(22px,2.6vw,32px) 0 0;
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
}
.gte-by{
  margin:0;display:grid;gap:3px;
  padding-left:14px;border-left:2px solid var(--accent);
}
.gte-by-k{
  font-weight:800;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sand-3);
}
.gte-by b{
  font-size:clamp(16px,1.5vw,18.5px);font-weight:800;
  letter-spacing:-.01em;line-height:1.15;color:var(--sand);
}
.gte-by-r{font-size:13px;line-height:1.3;color:var(--sand-2)}
/* The package qualifier. It used to be a pill above the headline; a legal
   footnote does not belong at the top of an argument, and the pill was one
   more box in a section that was already all boxes. It is still here, still
   readable, and now unmistakably the smallest claim in the block. */
.gte-only{
  font-weight:800;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sand-3);
}

/* AFTER the base rules, not before them. These are all single-class selectors,
   so specificity is tied and source order is the only thing deciding the
   winner — written above .gte-by, the unsetting of the border simply loses and
   the stroke stays on at 390.

   The accent stroke is a left edge, and a left edge points at nothing once the
   column is centred, so it comes off with the alignment rather than hanging
   beside centred text. */
@media (max-width:820px){
  .gte-sign{justify-content:center;text-align:center}
  .gte-by{border-left:0;padding-left:0;justify-items:center}
}