/* ==========================================================================
   Service pages — three layouts on trial.

   The reference's block system carried into the site's palettes: its blue
   blocks are the brand yellow, its navy blocks white on the dark palette
   (as on the About page), so the staircases and frames never sink into the
   ground. Corners stay square, as in the reference.
   ========================================================================== */

.tgla-service{--sv-a:var(--yellow);--sv-b:var(--navy);--sv-ghost:rgba(var(--navy-rgb),.08)}
[data-palette="nightfall"] .tgla-service{--sv-b:#fff;--sv-ghost:rgba(255,255,255,.08)}

@keyframes sv-in-l{from{opacity:0;translate:-60px 0}to{opacity:1;translate:0 0}}
@keyframes sv-in-r{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}
@keyframes sv-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sv-panel{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* The reference's short bar above every section label. */
.tgla-service .hb .eyebrow::before,
.sv-ov-copy .eyebrow::before,
.sv-in-copy .eyebrow::before{content:'';display:block;width:40px;height:2px;margin-bottom:14px;background:var(--yellow)}
.tgla-service .hb.mid .eyebrow::before{margin-left:auto;margin-right:auto}

/* The reference's slow, long entrance: cards converge from the sides. */
.js .tgla-service .rv{transition-duration:1.1s}
.js .rv.sv-from-l{transform:translateX(-7vh)}
.js .rv.sv-from-t{transform:translateY(-7vh)}
.js .rv.sv-from-r{transform:translateX(7vh)}
.js .rv.sv-from-l.in,.js .rv.sv-from-t.in,.js .rv.sv-from-r.in{transform:none}

.sv-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-alt);font-size:13px;letter-spacing:.06em;
  color:var(--text);transition:color .25s}
.sv-back svg{transition:transform .3s var(--ease)}
.sv-back:hover{color:var(--yellow)}
.sv-back:hover svg{transform:translateX(-4px)}

/* Checked list, used by the plans. */
.sv-checks,.sv-pl-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.sv-checks li,.sv-pl-list li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.55;color:var(--text)}
.sv-checks li::before,.sv-pl-list li::before{content:'';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:var(--yellow);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/100% no-repeat}
.sv-checks li::after,.sv-pl-list li::after{content:'';position:absolute;left:6px;top:6px;width:8px;height:5px;border-left:2px solid var(--navy);
  border-bottom:2px solid var(--navy);transform:rotate(-45deg)}

/* Block staircases at a band's corners. */
.sv-stair{position:absolute;z-index:0;pointer-events:none}
.sv-stair i{position:absolute;display:block}
.sv-stair-tl{top:0;left:0}
.sv-stair-tl i:nth-child(1){top:0;left:0;width:80px;height:80px;background:var(--sv-b)}
.sv-stair-tl i:nth-child(2){top:80px;left:0;width:200px;height:80px;background:var(--sv-ghost)}
.sv-stair-br{right:0;bottom:0}
.sv-stair-br i:nth-child(1){right:0;bottom:0;width:140px;height:140px;background:var(--sv-a)}
.sv-stair-br i:nth-child(2){right:140px;bottom:0;width:80px;height:80px;background:var(--sv-b)}
.sv-stair-y i:nth-child(1){background:var(--sv-a)}
.sv-stair-tr{top:0;right:0}
.sv-stair-tr i{top:0;right:0;width:140px;height:140px;background:var(--sv-b)}
.sv-kf > .shell,.sv-nb > .shell{position:relative;z-index:1}

/* ==========================================================================
   Layout 1 · Reference
   ========================================================================== */

/* ------------------------------------------------------------ title mosaic */
.sv-mo{position:relative;overflow:hidden;padding:clamp(84px,9vw,124px) 0 clamp(120px,12.5vw,184px);background:var(--off);text-align:center}
.sv-mo-head{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px}
.sv-mo-head .sv-back{animation:sv-rise .9s var(--ease) .2s both}
.sv-mo h1{max-width:700px;font-size:clamp(44px,5.6vw,76px);line-height:1.02;letter-spacing:-.02em;animation:sv-rise 1.1s var(--ease) .25s both}
.sv-mo-lead{max-width:40ch;font-family:var(--f-head);font-weight:500;font-size:clamp(17px,1.6vw,21px);color:var(--yellow);
  animation:sv-rise 1.1s var(--ease) .35s both}

.sv-mo-tiles{position:absolute;inset:0;pointer-events:none}
.sv-mo-t,.sv-mo-ph{position:absolute;margin:0}
.sv-mo-t1{left:0;top:0;width:120px;height:120px;background:var(--sv-b)}
.sv-mo-ph1{left:120px;top:120px;width:214px;height:214px}
.sv-mo-t2{left:0;bottom:0;width:120px;height:80px;background:var(--sv-a)}
.sv-mo-ph2{right:120px;top:0;width:214px;height:214px}
.sv-mo-t3{right:0;bottom:80px;width:120px;height:120px;background:var(--sv-a)}
.sv-mo-t4{right:0;bottom:0;width:240px;height:80px;background:var(--sv-b)}
.sv-mo-ph{overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.35)}
.sv-mo-ph img{display:block;width:100%;height:100%;object-fit:cover}
.sv-mo-t1,.sv-mo-ph1,.sv-mo-t2{animation:sv-in-l 1.4s var(--ease) .4s both}
.sv-mo-ph2,.sv-mo-t3,.sv-mo-t4{animation:sv-in-r 1.4s var(--ease) .4s both}

/* --------------------------------------------------------------- overview */
.sv-ov-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:center}
.sv-ov-block h3{margin:26px 0 12px;font-size:clamp(24px,2.4vw,30px)}
.sv-ov-block:first-of-type h3{margin-top:4px}
.sv-ov-block p{font-size:16.5px;line-height:1.78}
.sv-ov-vis{position:relative;display:flex;justify-content:flex-end;padding:0 0 clamp(50px,6vw,90px) clamp(50px,6vw,90px)}
.sv-ov-photo{position:relative;z-index:2;width:min(100%,520px);aspect-ratio:1;margin:0;overflow:hidden;box-shadow:0 34px 70px rgba(6,4,20,.45)}
.sv-ov-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.sv-ov-vis:hover .sv-ov-photo img{transform:scale(1.06)}
.sv-ov-sq{position:absolute;aspect-ratio:1}
.sv-ov-sq-lg{left:0;bottom:0;z-index:1;width:clamp(160px,18vw,260px);background:var(--sv-a)}
.sv-ov-sq-sm{left:clamp(160px,18vw,260px);bottom:0;z-index:3;width:clamp(60px,7vw,100px);background:var(--sv-b)}

/* ----------------------------------------------------------- key features */
.sv-kf{position:relative;overflow:hidden}
.sv-kf .hb{max-width:620px}
.sv-kf-row{display:grid;gap:20px;margin:0 auto 20px}
.sv-kf-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-kf-row-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px}
.sv-kf-row-1{grid-template-columns:minmax(0,1fr);max-width:400px}
.sv-kf-card{position:relative;padding:40px;background:var(--card);
  transition:box-shadow .3s var(--ease),transform .6s var(--ease),opacity 1.1s var(--ease)}
.sv-kf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--yellow);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .45s var(--ease)}
.js .sv-kf-card.rv.in:hover,.sv-kf-card:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.sv-kf-card:hover::before{transform:scaleX(1)}
.sv-kf-card h3{margin-bottom:12px;font-size:24px}
.sv-kf-card p{font-size:15.5px;line-height:1.72}

/* ---------------------------------------------------------- transit plans */
.sv-pl .hb{max-width:520px}
.sv-pl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sv-pl-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:32px 40px 40px;
  background:var(--card);border:1px solid var(--line);transition:border-color .3s,transform .5s var(--ease),box-shadow .5s var(--ease)}
.js .sv-pl-card.rv.in:hover,.sv-pl-card:hover{border-color:rgba(var(--yellow-rgb),.6);transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.sv-pl-card h3{margin-bottom:10px;font-size:28px}
.sv-pl-card > p{font-size:15.5px;line-height:1.72}
.sv-pl-fig{display:flex;align-items:baseline;gap:10px;margin:22px 0 24px}
.sv-pl-fig b{font-family:var(--f-head);font-weight:800;font-size:clamp(44px,4.6vw,60px);line-height:1;color:var(--ink);transition:color .3s}
.sv-pl-fig span{font-size:16px;color:var(--text)}
.sv-pl-card:hover .sv-pl-fig b{color:var(--yellow)}
.sv-pl-list{margin-top:28px;padding-top:26px;border-top:1px solid var(--line);align-self:stretch}

/* ----------------------------------------------------------- testimonials */
.sv-tst{overflow:hidden;padding-bottom:clamp(90px,11vw,160px)}
.sv-tst-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:44px}
.sv-tst-head .hb{max-width:470px;margin-bottom:0}
.sv-tst-lead{font-size:16.5px;line-height:1.75}
/* Starts on the shell's left edge and runs off the right of the window. */
.sv-tst-rail{padding-left:max(28px,calc((100vw - 1200px) / 2 + 28px))}
.sv-tst-track{display:flex;gap:32px;transition:transform .5s var(--ease);will-change:transform}
.sv-tst-card{flex:0 0 clamp(290px,31vw,392px);margin:0;padding:clamp(30px,3.4vw,48px);background:var(--card);
  transition:background .35s var(--ease)}
.sv-tst-who{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sv-tst-av{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--yellow);
  color:var(--navy);font-family:var(--f-head);font-weight:800;font-size:15px;transition:background .35s,color .35s}
.sv-tst-who strong{display:block;font-family:var(--f-head);font-size:20px;line-height:1.2;color:var(--ink);transition:color .35s}
.sv-tst-who small{display:block;font-size:15px;color:var(--text);transition:color .35s}
.sv-tst-card blockquote{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(16px,1.3vw,18px);line-height:1.6;
  color:var(--ink);transition:color .35s}
.sv-tst-card:hover{background:var(--yellow)}
.sv-tst-card:hover .sv-tst-av{background:var(--navy);color:#fff}
.sv-tst-card:hover strong,.sv-tst-card:hover blockquote{color:var(--navy)}
.sv-tst-card:hover small{color:rgba(var(--navy-rgb),.7)}
.sv-tst-bars{display:flex;gap:10px;margin-top:40px}
.sv-tst-bar{flex:0 1 120px;padding:8px 0;border:0;background:none;cursor:pointer}
.sv-tst-bar i{display:block;height:4px;background:var(--line);transition:background .3s}
.sv-tst-bar:hover i{background:rgba(var(--yellow-rgb),.5)}
.sv-tst-bar.on i{background:var(--yellow)}

/* ==========================================================================
   Layout 2 · tgl.co
   ========================================================================== */

/* ------------------------------------------------- split hero, stepped base */
.sv-sh{position:relative;padding-top:clamp(48px,6vw,80px);background:var(--white)}
.sv-sh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(28px,4vw,60px);align-items:end}
.sv-sh-copy{display:flex;flex-direction:column;justify-content:flex-end}
.sv-sh-text{padding-bottom:clamp(30px,4vw,48px)}
.sv-sh-text .sv-back{margin-bottom:22px}
.sv-sh h1{margin:4px 0 18px;font-size:clamp(46px,5.8vw,80px);line-height:1;letter-spacing:-.02em}
.sv-sh-lead{max-width:56ch;margin-bottom:26px;font-size:16.5px;line-height:1.75}
.sv-sh-acts{display:flex;flex-wrap:wrap;gap:12px}
.sv-sh-base{position:relative;height:300px;margin-top:clamp(8px,2vw,24px)}
.sv-sh-b{position:absolute;display:block}
.sv-sh-b-top{left:33%;bottom:120px;width:34%;height:180px;background:var(--sv-b)}
.sv-sh-b-l{left:0;bottom:0;width:33%;height:120px;background:var(--sv-a)}
.sv-sh-b-m{left:33%;bottom:0;width:34%;height:120px;background:var(--sv-ghost)}
.sv-sh-b-r{right:0;bottom:0;width:33%;height:120px;background:var(--sv-a)}
.sv-sh-vis{position:relative;display:flex;align-items:flex-end;height:100%;min-height:clamp(420px,48vw,660px)}
.sv-sh-photo{position:relative;z-index:1;width:67%;height:100%;min-height:inherit;margin:0;overflow:hidden}
.sv-sh-photo img{display:block;width:100%;height:100%;object-fit:cover;animation:pg-zoom 2.6s var(--ease) both}
.sv-sh-b-foot{position:relative;flex:0 0 33%;height:120px;background:var(--sv-b)}

/* -------------------------------------------------------- highlight strip */
.sv-hl{padding:clamp(28px,3.4vw,40px) 0;background:var(--off)}
.sv-hl-list{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.sv-hl-item{position:relative;display:flex;align-items:center;gap:16px;padding:20px 22px;overflow:hidden;background:var(--card);
  border:1px solid var(--line)}
.sv-hl-item::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease) calc(.3s + var(--k) * .15s)}
.sv-hl-list.in .sv-hl-item::after{transform:none}
.sv-hl-tick{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;background:var(--yellow);color:var(--navy);
  transition:transform .5s var(--ease)}
[data-palette="nightfall"] .sv-hl-tick{color:#fff}
.sv-hl-item:hover .sv-hl-tick{transform:rotate(-8deg) scale(1.06)}
.sv-hl-t{font-family:var(--f-head);font-weight:700;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.35;color:var(--ink)}
.js .sv-hl-list .sv-hl-item{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--k) * .12s)}
.js .sv-hl-list.in .sv-hl-item{opacity:1;transform:none}

/* ---------------------------------------------------------- accordion */
.sv-acc{border-top:1px solid var(--line)}
.sv-acc-item{border-bottom:1px solid var(--line)}
.sv-acc-h{margin:0;font-size:inherit}
.sv-acc-q{display:grid;grid-template-columns:40px minmax(0,1fr) 32px;align-items:center;gap:14px;width:100%;padding:22px 0;border:0;
  background:none;color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:clamp(17px,1.8vw,21px);line-height:1.3;
  text-align:left;cursor:pointer;transition:color .25s}
.sv-acc-n{font-family:var(--f-alt);font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--text)}
.sv-acc-q:hover,.sv-acc-q[aria-expanded="true"]{color:var(--yellow)}
.sv-acc-q[aria-expanded="true"] .faq-pm{background:var(--yellow);border-color:var(--yellow);transform:rotate(180deg)}
[data-palette="nightfall"] .sv-acc-q[aria-expanded="true"] .faq-pm{color:#fff}
.sv-acc-q[aria-expanded="true"] .faq-pm::after{transform:translate(-50%,-50%) rotate(0)}
.sv-acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.sv-acc-item.open .sv-acc-a{grid-template-rows:1fr}
.sv-acc-a > div{overflow:hidden}
.sv-acc-a p{padding:0 46px 24px 54px;font-size:15.5px;line-height:1.8}

/* --------------------------------------------------------- statement band */
.sv-st-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.sv-st-tray{position:relative;height:clamp(300px,30vw,390px);overflow:hidden;border:1px solid var(--band-line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(var(--yellow-rgb),.05))}
.sv-st-tags{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.sv-tag{position:absolute;left:0;top:0;padding:12px 20px;border:1px solid rgba(255,255,255,.28);border-radius:40px;
  background:#1B1748;color:#fff;font-family:var(--f-head);font-weight:700;font-size:clamp(13px,1.2vw,15px);line-height:1;
  white-space:nowrap;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform}
.sv-tag.is-y{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.sv-tag.is-drag{cursor:grabbing;box-shadow:0 18px 30px rgba(0,0,0,.45)}
/* Without the simulation the tags sit in rows along the tray's floor. */
.sv-st-tray:not(.is-live) .sv-st-tags{position:absolute;display:flex;flex-wrap:wrap;align-content:flex-end;gap:10px;padding:20px}
.sv-st-tray:not(.is-live) .sv-tag{position:static;cursor:default}
.sv-st-hint{position:absolute;top:14px;right:16px;display:flex;align-items:center;gap:6px;margin:0;font-family:var(--f-alt);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);pointer-events:none;transition:opacity .4s}
.sv-st-tray:not(.is-live) .sv-st-hint,.sv-st-tray.is-touched .sv-st-hint{opacity:0}
.sv-st-text{font-family:var(--f-head);font-weight:500;font-size:clamp(21px,2.3vw,31px);line-height:1.42;color:var(--ink)}
.sv-st-text .w{opacity:.2;transition:opacity .35s ease}
.sv-st-text .w.lit{opacity:1}
.sv-st-link{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:0 0 8px;border:0;background:none;
  color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:clamp(20px,2vw,26px);cursor:pointer}
/* The band is dark on one palette and light on another: ink for the words, the yellow for the rule. */
.sv-st-link::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--yellow);transform:scaleX(.35);
  transform-origin:0 50%;transition:transform .5s var(--ease)}
.sv-st-link svg{color:var(--yellow);transition:transform .4s var(--ease)}
[data-palette="nightfall"] .sv-st-link svg{color:var(--ink)}
.sv-st-link:hover::after{transform:none}
.sv-st-link:hover svg{transform:translateX(6px)}

/* ------------------------------------------------------- feature columns */
.sv-cols-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sv-col{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);background:var(--card);
  transition:box-shadow .3s var(--ease),transform .5s var(--ease),opacity 1.1s var(--ease)}
.js .sv-col.rv.in:hover,.sv-col:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.sv-col-ic{margin-bottom:26px;line-height:0}
.pix .px-a{fill:var(--yellow)}
.pix .px-b{fill:var(--navy)}
[data-palette="nightfall"] .pix .px-b{fill:#fff}
.pix rect{transform-box:fill-box;transform-origin:center}
.sv-col:hover .pix rect{animation:sv-px .55s var(--ease) both;animation-delay:var(--d)}
@keyframes sv-px{0%{opacity:.2;transform:scale(.3)}100%{opacity:1;transform:none}}
.sv-col h3{margin-bottom:12px;font-size:clamp(21px,2vw,24px)}
.sv-col > p{margin-bottom:20px;font-size:15.5px;line-height:1.72}
.sv-col-list{display:grid;gap:12px;margin:0 0 30px;padding:0;list-style:none;counter-reset:c}
.sv-col-list li{display:flex;gap:12px;padding-top:12px;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink);counter-increment:c}
.sv-col-list li::before{content:counter(c) ')';flex:0 0 22px;font-family:var(--f-alt);font-size:13px;color:var(--yellow);padding-top:2px}
.sv-col-btn{align-self:flex-start;margin-top:auto}

/* ------------------------------------------------------- benefits circle */
.sv-ob-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,70px);align-items:center}
.sv-ob-copy .hb{margin-bottom:0}
.sv-ob-wheel{position:relative;width:min(100%,600px);aspect-ratio:1;margin:0 auto}
.sv-ob-ring{position:absolute;inset:7%;border:1px dashed var(--line);border-radius:50%}
.sv-ob-ring::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:var(--yellow);
  animation:spin 14s linear infinite}
.sv-ob-hand{position:absolute;left:50%;top:50%;width:43%;height:2px;background:linear-gradient(90deg,transparent 30%,var(--yellow));
  transform-origin:0 50%;transform:rotate(var(--a,-90deg));transition:transform .8s var(--ease)}
.sv-ob-core{position:absolute;inset:18%;display:grid;place-items:center;padding:7%;border:1px solid var(--line);border-radius:50%;
  background:var(--card);text-align:center;box-shadow:inset 0 0 0 12px rgba(var(--yellow-rgb),.04),0 30px 60px rgba(0,0,0,.3)}
.sv-ob-panel{animation:sv-rise .55s var(--ease)}
.sv-ob-big{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:12px;background:rgba(var(--yellow-rgb),.14);
  color:var(--yellow)}
.sv-ob-panel h3{margin-bottom:8px;font-size:clamp(17px,1.7vw,21px)}
.sv-ob-panel p{font-size:clamp(13px,1.1vw,14.5px);line-height:1.62}
.sv-ob-items{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.sv-ob-items li{position:absolute;left:calc(50% + 43% * cos(calc(var(--i) * 360deg / var(--n) - 90deg)));
  top:calc(50% + 43% * sin(calc(var(--i) * 360deg / var(--n) - 90deg)));transform:translate(-50%,-50%)}
.sv-ob-item{display:grid;place-items:center;width:clamp(50px,5.4vw,64px);height:clamp(50px,5.4vw,64px);border:1px solid var(--line);
  background:var(--card);color:var(--yellow);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .45s var(--ease),box-shadow .3s}
.sv-ob-item:hover{border-color:var(--yellow);transform:scale(1.08)}
.sv-ob-item.on{background:var(--yellow);border-color:var(--yellow);color:var(--navy);transform:scale(1.14);
  box-shadow:0 0 0 8px rgba(var(--yellow-rgb),.14)}
[data-palette="nightfall"] .sv-ob-item.on{color:#fff}
.sv-ob-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   Layout 3 · Journey
   ========================================================================== */

/* ---------------------------------------------------------- cinematic hero */
.sv-cine{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(90vh,860px);overflow:hidden;
  background:#07061A;color:#fff}
.sv-cine-bg{position:absolute;inset:0}
.sv-cine-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-cine-shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,6,26,.92) 0%,rgba(7,6,26,.62) 46%,rgba(7,6,26,.12) 100%),
             linear-gradient(0deg,rgba(7,6,26,.95) 0%,transparent 42%)}
/* A photograph behind the words carries more light than the footage does, and
   a bright sky reaches further across, so the words get more ground under them
   while the picture still comes through on the open side. */
.sv-cine.is-photo .sv-cine-shade{
  background:linear-gradient(90deg,rgba(7,6,26,.95) 0%,rgba(7,6,26,.82) 46%,rgba(7,6,26,.34) 100%),
             linear-gradient(0deg,rgba(7,6,26,.96) 0%,transparent 46%)}
/* Full width: auto side margins on a flex item would otherwise shrink it to its content. */
.sv-cine-in,.sv-cine-foot{width:100%}
.sv-cine-in{position:relative;z-index:2;padding-top:clamp(90px,12vw,150px);padding-bottom:clamp(26px,3vw,40px)}
.sv-cine .ld{animation:lift .9s var(--ease) both}
.sv-cine .ld2{animation-delay:.12s}.sv-cine .ld3{animation-delay:.24s}.sv-cine .ld4{animation-delay:.36s}.sv-cine .ld5{animation-delay:.5s}
.sv-cine .sv-back{color:rgba(255,255,255,.66)}
.sv-cine .eyebrow{margin:18px 0 10px}
.sv-cine-h{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;color:#fff}
.sv-cine-a{font-size:clamp(46px,6.6vw,94px);line-height:.98;letter-spacing:-.02em}
.sv-cine-b{font-size:clamp(21px,2.5vw,34px);font-weight:500;line-height:1.2;color:var(--yellow)}
.sv-cine-p{max-width:56ch;margin-bottom:28px;font-size:17px;line-height:1.72;color:rgba(255,255,255,.8)}
.sv-cine-acts{display:flex;flex-wrap:wrap;gap:12px}
.sv-cine-acts .btn-o{color:#fff;border-color:rgba(255,255,255,.35)}
.sv-cine-acts .btn-o:hover{color:var(--navy);border-color:var(--yellow)}
.sv-cine-foot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:clamp(22px,3vw,34px)}
.sv-lane{display:flex;margin:0;border:1px solid rgba(255,255,255,.16);background:rgba(10,8,32,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sv-lane > div{padding:12px clamp(14px,2vw,24px);border-right:1px solid rgba(255,255,255,.12)}
.sv-lane > div:last-child{border-right:0}
.sv-lane dt{font-family:var(--f-alt);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sv-lane dd{margin:4px 0 0;font-family:var(--f-head);font-weight:700;font-size:clamp(15px,1.5vw,19px);color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-lane-v.flip{animation:sv-flip .55s var(--ease)}
@keyframes sv-flip{0%{opacity:0;transform:perspective(200px) rotateX(-80deg)}100%{opacity:1;transform:none}}
.sv-cine-scroll{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-alt);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sv-cine-scroll i{position:relative;display:block;width:1px;height:46px;overflow:hidden;background:rgba(255,255,255,.2)}
.sv-cine-scroll i::after{content:'';position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--yellow);
  animation:sv-drop 1.8s ease-in-out infinite}
@keyframes sv-drop{to{top:100%}}
/* Services with no lanes of their own: their three headline features. */
.sv-feats{flex-wrap:wrap;padding:0;list-style:none}
.sv-feats li{display:flex;align-items:center;gap:10px;padding:14px clamp(14px,2vw,22px);border-right:1px solid rgba(255,255,255,.12);
  font-family:var(--f-head);font-weight:700;font-size:clamp(13.5px,1.2vw,15.5px);color:#fff}
.sv-feats li:last-child{border-right:0}
.sv-feats svg{flex:0 0 auto;color:var(--yellow)}

/* ------------------------------------------------------------ offer switch */
.sv-of .hb{max-width:640px}
.sv-of-box{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);border:1px solid var(--line);background:var(--card)}
.sv-of-tabs{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.sv-of-tab{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:12px;flex:1 1 0;
  padding:24px 26px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font-family:var(--f-head);
  font-weight:700;font-size:clamp(17px,1.8vw,22px);text-align:left;cursor:pointer;transition:color .3s,background .3s}
.sv-of-tab:last-child{border-bottom:0}
.sv-of-tab::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--yellow);transform:scaleY(0);
  transition:transform .45s var(--ease)}
.sv-of-n{font-family:var(--f-alt);font-weight:400;font-size:12px;letter-spacing:.14em}
.sv-of-tab svg{opacity:0;color:var(--yellow);transform:translateX(-8px);transition:opacity .3s,transform .4s var(--ease)}
.sv-of-tab:hover{color:var(--ink)}
.sv-of-tab.on{color:var(--ink);background:rgba(var(--yellow-rgb),.07)}
.sv-of-tab.on::before{transform:none}
.sv-of-tab.on svg{opacity:1;transform:none}
.sv-of-stage{position:relative;min-height:440px}
.sv-of-panel{display:grid;grid-template-rows:auto 1fr;height:100%}
.sv-of-panel.on{animation:sv-panel .6s var(--ease)}
.sv-of-copy{padding:28px clamp(24px,3vw,38px) 34px}
.sv-of-copy h3{margin-bottom:10px;font-size:clamp(22px,2.3vw,28px)}
.sv-of-copy p{margin-bottom:18px;font-size:16px;line-height:1.72}
.sv-of-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:700;color:var(--yellow)}
.sv-of-more svg{transition:transform .35s var(--ease)}
.sv-of-more:hover svg{transform:translateX(5px)}

/* The scenes. */
.sv-art{position:relative;height:clamp(190px,20vw,240px);overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 100%,rgba(var(--yellow-rgb),.12),transparent 60%),var(--off)}
.sv-art .veh{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}

/* ------------------------------------------------------------ why choose */
.sv-wy-list{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 clamp(20px,3vw,40px);margin:12px 0 0;padding:0;
  list-style:none;border-top:1px solid var(--band-line)}
.sv-wy-item{position:relative;padding:34px 0 10px;outline:none;transition:opacity .45s var(--ease)}
.sv-wy-item::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:3px;background:var(--yellow);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .7s var(--ease)}
.sv-wy-item.on::before,.sv-wy-item:hover::before,.sv-wy-item:focus-visible::before{transform:none}
.sv-wy-list.is-pointing .sv-wy-item:not(:hover){opacity:.42}
.sv-wy-n{display:block;font-family:var(--f-head);font-weight:800;font-size:clamp(72px,9vw,128px);line-height:.9;color:transparent;
  -webkit-text-stroke:1.5px rgba(var(--yellow-rgb),.7);
  background:linear-gradient(var(--yellow),var(--yellow)) left bottom / 100% 0 no-repeat;-webkit-background-clip:text;background-clip:text;
  transition:background-size .8s var(--ease)}
.sv-wy-item.on .sv-wy-n,.sv-wy-item:hover .sv-wy-n,.sv-wy-item:focus-visible .sv-wy-n{background-size:100% 100%}
/* On the dark palette this band is the light relief band: outlines in ink. */
/* The numeral is an outline, so its stroke follows the ground it stands on:
   navy on a pale band, white on the dark one. */
[data-palette="nightfall"] .sv-wy-n{-webkit-text-stroke-color:rgba(255,255,255,.42)}
[data-palette="nightfall"] .sec-navy .sv-wy-n{-webkit-text-stroke-color:rgba(22,19,62,.32)}
[data-palette="nightfall"] .sv-wy-item.on .sv-wy-n,[data-palette="nightfall"] .sv-wy-item:hover .sv-wy-n{-webkit-text-stroke-color:var(--yellow)}
.sv-wy-item h3{margin:20px 0 10px;font-size:clamp(22px,2.2vw,28px);color:var(--ink)}
.sv-wy-item p{max-width:34ch;font-size:16px;line-height:1.72;color:var(--text)}

/* ---------------------------------------------------------------- journey */
.sv-jy-stage{position:relative}
.sv-jy-svg{display:block;width:100%;height:clamp(110px,15vw,190px);overflow:visible}
.sv-jy-base{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 10;vector-effect:non-scaling-stroke}
.sv-jy-fill{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sv-jy-veh{position:absolute;left:0;top:0;z-index:2;width:clamp(96px,10vw,132px);pointer-events:none;will-change:transform}
.sv-jy-veh .veh{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.sv-jy-veh.is-ship{width:clamp(104px,11vw,144px)}
/* A service with no vehicle sends its mark along the arc. */
.sv-jy-veh.sv-jy-puck{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--navy);
  box-shadow:0 0 0 9px rgba(var(--yellow-rgb),.16),0 14px 24px rgba(0,0,0,.35)}
.sv-jy-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:24px;margin:0;padding:0;
  list-style:none}
.sv-jy-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:22px 12px 0;border:0;
  background:none;color:var(--text);text-align:center;cursor:pointer}
.sv-jy-dot{position:absolute;left:50%;top:-11px;width:22px;height:22px;margin-left:-11px;border:3px solid var(--line);border-radius:50%;
  background:var(--off);transition:border-color .3s,background .3s,transform .45s var(--ease),box-shadow .3s}
.sv-jy-step.past .sv-jy-dot{border-color:var(--yellow)}
.sv-jy-step:hover .sv-jy-dot{transform:scale(1.15);border-color:var(--yellow)}
.sv-jy-step.on .sv-jy-dot{background:var(--yellow);border-color:var(--yellow);transform:scale(1.25);
  box-shadow:0 0 0 9px rgba(var(--yellow-rgb),.16)}
.sv-jy-k{font-family:var(--f-alt);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.sv-jy-step strong{font-family:var(--f-head);font-weight:700;font-size:clamp(19px,2vw,24px);color:var(--ink);transition:color .3s}
.sv-jy-p{max-width:30ch;font-size:15.5px;line-height:1.65;transition:color .3s}
.sv-jy-step.on strong{color:var(--yellow)}
.sv-jy-step.on .sv-jy-p{color:var(--ink)}

/* ---------------------------------------------------------- FAQ, no photo */
/* The service's vehicle, or its mark, on a drawing-board tile. */
.sv-faq-mark{display:grid;place-items:center;border:1px solid var(--line);
  background:linear-gradient(rgba(var(--navy-rgb),.06) 1px,transparent 1px) 0 0 / 32px 32px,
             linear-gradient(90deg,rgba(var(--navy-rgb),.06) 1px,transparent 1px) 0 0 / 32px 32px,
             radial-gradient(120% 90% at 50% 100%,rgba(var(--yellow-rgb),.18),transparent 62%),var(--card)}
[data-palette="nightfall"] .sv-faq-mark{
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0 / 32px 32px,
             linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0 / 32px 32px,
             radial-gradient(120% 90% at 50% 100%,rgba(var(--yellow-rgb),.16),transparent 62%),var(--card)}
.sv-faq-veh{width:76%}
.sv-faq-veh.is-wide{width:88%}
.sv-faq-veh .veh{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));animation:sv-float 5s ease-in-out infinite}
@keyframes sv-float{50%{transform:translateY(-8px)}}
.sv-faq-ic{color:var(--yellow)}
.sv-faq-ic svg{display:block;width:clamp(96px,12vw,140px);height:auto}

/* ------------------------------------------------------------ layout bar */
.sv-bar a{white-space:nowrap}

/* ------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .sv-mo-t1{width:60px;height:60px}
  .sv-mo-ph1{left:60px;top:60px;width:130px;height:130px}
  .sv-mo-t2{width:60px;height:40px}
  .sv-mo-ph2{right:60px;width:130px;height:130px}
  .sv-mo-t3{bottom:40px;width:60px;height:60px}
  .sv-mo-t4{width:120px;height:40px}
  .sv-ob-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  .sv-ov-grid,.sv-tst-head,.sv-sh-grid,.sv-st-grid,.sv-of-box{grid-template-columns:1fr}
  .sv-ov-vis{justify-content:center}
  .sv-sh-base{height:200px}
  .sv-sh-b-top{bottom:80px;height:120px}
  .sv-sh-b-l,.sv-sh-b-m,.sv-sh-b-r{height:80px}
  .sv-sh-vis{min-height:0;height:auto}
  .sv-sh-photo{height:clamp(260px,60vw,420px);min-height:0}
  .sv-sh-b-foot{height:80px}
  .sv-sh-copy{order:0}
  .sv-hl-list,.sv-cols-grid,.sv-kf-row-3,.sv-kf-row-2,.sv-pl-grid,.sv-wy-list{grid-template-columns:1fr}
  .sv-kf-row-2{max-width:none}
  .sv-of-tabs{border-right:0;border-bottom:1px solid var(--line)}
  .sv-of-tab{padding:18px 20px}
  .sv-of-stage{min-height:0}
  .sv-wy-item{padding-top:26px}

  /* The ring becomes a grid of tiles above the explanation. */
  .sv-ob-wheel{aspect-ratio:auto;width:100%}
  .sv-ob-ring,.sv-ob-hand{display:none}
  .sv-ob-items{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .sv-ob-items li{position:static;transform:none}
  .sv-ob-item{width:100%;height:auto;aspect-ratio:1}
  .sv-ob-item.on{transform:none}
  .sv-ob-core{position:relative;inset:auto;margin-top:12px;padding:26px;border-radius:0;box-shadow:none}

  /* The flight becomes a line down the left, the steps stacked beside it. */
  .sv-jy-svg,.sv-jy-veh{display:none}
  .sv-jy-steps{grid-template-columns:1fr;gap:0;padding-left:34px;border-left:2px solid var(--line);margin-left:12px}
  .sv-jy-step{align-items:flex-start;padding:4px 0 26px;text-align:left}
  .sv-jy-dot{left:-46px;top:6px;margin-left:0}
}

@media (max-width:640px){
  .sv-mo-t1{width:28px;height:28px}
  .sv-mo-ph1{left:28px;top:28px;width:64px;height:64px}
  .sv-mo-t2{width:28px;height:20px}
  .sv-mo-ph2{right:28px;width:64px;height:64px}
  .sv-mo-t3{bottom:20px;width:28px;height:28px}
  .sv-mo-t4{width:56px;height:20px}
  .sv-mo{padding-top:110px}
  .sv-stair{transform:scale(.5);transform-origin:0 0}
  .sv-stair-br{transform-origin:100% 100%}
  .sv-stair-tr{transform-origin:100% 0}
  .sv-lane{flex-wrap:wrap}
  .sv-feats{flex-direction:column;width:100%}
  .sv-feats li{padding:11px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .sv-feats li:last-child{border-bottom:0}
  .sv-cine-scroll{display:none}
  .sv-ob-items{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sv-acc-a p{padding:0 0 22px 54px}
  .sv-st-tray{height:380px}
  .sv-tag{padding:10px 16px}
}

@media (prefers-reduced-motion:reduce){
  .sv-art *,.sv-ob-ring::after,.sv-cine-scroll i::after,.sv-faq-veh .veh{animation:none!important}
}

/* tgl.co's closing greeting, cycling through five languages. */
.sv-hello{display:inline-block;padding:0 .12em;border-bottom:3px solid currentColor}
.sv-hello.is-in{animation:sv-rise .5s var(--ease)}

/* ------------------------------------------------- the headed sections */
/* The client's own pages explain the service at length after the capability
   columns. Each point is a card with a mark of its own on a badge over the
   corner: a flat grid of numbered boxes read as a table of contents rather
   than as something worth reading. */
.sv-gd-list{list-style:none;margin:40px 0 0;padding:26px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:20px}
.sv-gd-item{position:relative;padding:36px 26px 26px;border-radius:5px;
  background:var(--card);border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
/* The rule runs down as the pointer arrives. */
.sv-gd-item::before{content:'';position:absolute;left:-1px;top:18px;bottom:18px;width:3px;
  border-radius:3px;background:var(--yellow);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--ease)}
.sv-gd-ic{position:absolute;top:-23px;left:24px;display:grid;place-items:center;
  width:50px;height:50px;border-radius:14px;background:var(--off);
  border:1px solid var(--line);color:var(--yellow);
  transition:background .4s,border-color .4s,color .4s,transform .5s var(--ease),box-shadow .4s}
.sv-gd-n{position:absolute;top:14px;right:20px;font-family:var(--f-alt);font-size:11px;
  letter-spacing:.2em;color:var(--text);opacity:.8;transition:color .35s,opacity .35s}
.sv-gd-item h3{font-family:var(--f-head);font-size:17px;line-height:1.3;margin:0 0 10px;
  padding-right:34px}
.sv-gd-item p{font-size:14px;line-height:1.7;color:var(--text);margin:0}
.sv-gd-item:hover,.sv-gd-item:focus-within{transform:translateY(-6px);
  border-color:rgba(var(--yellow-rgb),.45);box-shadow:0 20px 38px rgba(var(--navy-rgb),.14)}
.sv-gd-item:hover::before,.sv-gd-item:focus-within::before{transform:scaleY(1)}
.sv-gd-item:hover .sv-gd-ic,.sv-gd-item:focus-within .sv-gd-ic{background:var(--yellow);
  border-color:var(--yellow);color:var(--navy);transform:translateY(-3px) rotate(-6deg);
  box-shadow:0 12px 24px rgba(var(--yellow-rgb),.36)}
.sv-gd-item:hover .sv-gd-n,.sv-gd-item:focus-within .sv-gd-n{color:var(--yellow);opacity:1}

/* --------------------------------------------------- the keyword strip */
.sv-tags{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;padding:0}
.sv-tags li{padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font-family:var(--f-alt);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text);transition:border-color .3s,color .3s,transform .3s var(--ease)}
.sv-tags li:hover{border-color:rgba(var(--yellow-rgb),.55);color:var(--ink);transform:translateY(-2px)}
/* The figure leads, the words follow it in the same chip. */
.sv-tags li b{margin-right:7px;font-family:var(--f-head);font-weight:700;font-size:13.5px;
  letter-spacing:.02em;color:var(--ink)}

/* ------------------------------- the points under each capability column */
.sv-wy-pts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
/* The columns sit on the alternating band, which is light in Nightfall and
   dark in the rest, so the points take the band's own body colour rather than
   the page's. */
.sv-wy-pts li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.55;
  color:var(--text)}
.sv-wy-pts li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--yellow)}

/* ------------------------------------------- a list inside an answer */
.faq-pts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.faq-pts li{position:relative;padding-left:18px;font-size:14px;line-height:1.6;color:var(--text)}
.faq-pts li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--yellow)}

/* -------------------------------------------- why choose, with figures only */
/* Where a service has no numbered reasons the heading sat alone against an
   empty half page. Its figures go beside it, and the two share the row. */
.sv-wy-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,56px);align-items:end}
.sv-wy-top .hb{margin-bottom:0}
/* One grid for the block, not a flex line per row: the figures share a
   column and are set to its right edge so the plus signs stack whatever the
   number's width, the labels share the next and start together, and the two
   cells of a row meet so the hairline runs unbroken under both. */
.sv-wy-figs{display:grid;grid-template-columns:max-content minmax(0,1fr);
  align-items:baseline;padding-top:0;border-top:0;gap:0}
.sv-wy-figs .stat{display:contents}
.sv-wy-figs .stat-n,.sv-wy-figs .stat-l{padding:13px 0;border-top:1px solid var(--band-line)}
.sv-wy-figs .stat-n{font-size:clamp(28px,3vw,36px);line-height:1.05;color:var(--ink);text-align:right}
.sv-wy-figs .stat-l{text-align:left;color:var(--text);padding-left:22px;margin-top:0}
@media(max-width:860px){
  .sv-wy-top{grid-template-columns:1fr}
}

/* The cards wrapped three and two, which left the last row hanging to the left
   of a gap. Laid out as a flex row they sit centred under the row above. */
.sv-gd-list{display:flex;flex-wrap:wrap;justify-content:center}
.sv-gd-item{flex:0 1 calc((100% - 40px) / 3)}
/* The industries a service names, as chips under its heading. */
.sv-gd-chips{margin-top:6px}
/* A closing statement stands on its own, so it keeps no gap for the cards
   that are not there. */
.sv-gd .hb.mid{margin-bottom:0}

/* A section with one or two cards spreads them across the row rather than
   leaving a lone third of a card adrift in the middle. */
.sv-gd-list.is-1 .sv-gd-item{flex-basis:100%}
.sv-gd-list.is-2 .sv-gd-item{flex-basis:calc((100% - 20px) / 2)}
@media(max-width:1000px){.sv-gd-item{flex-basis:calc((100% - 20px) / 2)}}
@media(max-width:680px){.sv-gd-item{flex-basis:100%}}