/* --------------------------------------------------------------------------
   Rolling section list for phones and tablets (Services, Case Studies).

   Below 1600px the left-hand section list (.toc-rail) is not used, so
   tocroll.js builds this bar from it instead: a short strip that sticks to
   the top of the window and shows the section being read, with the previous
   and next sections peeking in above and below it and fading out. The list
   rolls as you scroll. Tapping the strip opens the full list, with subtitles,
   in the same full-page overlay as the site menu (.tkmenu, menu.css).
   -------------------------------------------------------------------------- */
.tocroll{display:none;}
@media (max-width:1599px){
  /* Two looks, cross-faded (tocroll.js adds .solo):
     - with the site's header bar showing above it, or before it is pinned, the
       strip is part of the page: white, dark text, no bottom edge, fading out
       into the content below;
     - on its own at the top of the window ("solo"), it is the header: the
       header's blue and gold, white text, with the logo and the menu button.
     The two backgrounds are separate layers (::after white, ::before blue), so
     the change is a fade rather than a jump. */
  .tocroll{display:block; position:sticky; top:var(--tr-top, 0px); z-index:30; height:78px; margin-bottom:-24px;
        pointer-events:none;
        transition:top .32s ease;} /* follows the float-bar sliding in and out above it */
  .tocroll::before, .tocroll::after{content:""; position:absolute; left:0; right:0; top:0; z-index:-1;
        transition:opacity .35s ease; pointer-events:none;}
  /* white: solid behind the text and 12px under it, then fading out over 12px */
  .tocroll::after{height:78px; background:linear-gradient(180deg, #fff 0, #fff 66px, rgba(255,255,255,0) 100%);}
  /* blue: the header's gradient, gold line and shadow */
  .tocroll::before{height:54px; opacity:0;
        background:linear-gradient(115deg,rgba(10,162,245,.96) 0%,rgba(0,121,197,.96) 100%);
        border-bottom:3px solid var(--gold, #f6c776); box-shadow:0 4px 18px rgba(0,20,40,.3);}
  .tocroll.solo::before{opacity:1;}
  .tocroll.solo::after{opacity:0;}
  .tr-btn{display:flex; align-items:center; gap:12px; width:100%; max-width:900px; height:54px;
        margin:0 auto; padding:0 20px; background:none; border:0; cursor:pointer; pointer-events:auto;
        text-align:left; font:inherit; color:inherit;}
  .tr-lab{flex:none; font-family:var(--display, 'Poppins', sans-serif); font-weight:600; font-size:13px;
        color:var(--ink, #0d2540); transition:color .35s ease;}
  /* the window onto the list: 54px tall, one 18px row in the middle, the rows
     above and below sitting close to it and fading out well inside the window */
  .tr-win{position:relative; flex:1; min-width:0; height:54px; overflow:hidden;
        box-shadow:inset 2px 0 0 0 var(--line-l, #dfe6ee); transition:box-shadow .35s ease;
        -webkit-mask-image:linear-gradient(180deg, transparent 8%, #000 36%, #000 64%, transparent 92%);
        mask-image:linear-gradient(180deg, transparent 8%, #000 36%, #000 64%, transparent 92%);}
  .tr-win::before{content:""; position:absolute; left:0; top:18px; width:2px; height:18px;
        background:var(--blue, #0095eb); transition:background .35s ease;} /* the current-section marker */
  .tr-list{display:block; transition:transform .45s cubic-bezier(.22,1,.36,1); will-change:transform;}
  .tr-it{display:block; height:18px; line-height:18px; padding-left:14px; font-size:13px;
        color:var(--slate, #5b6f84); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        opacity:.7; transition:opacity .3s ease, color .35s ease;}
  .tr-it.cur{color:var(--ink, #0d2540); font-weight:600; opacity:1;}
  .tr-it small{font-size:11.5px; font-weight:400; opacity:.8;}
  .tr-it small::before{content:"–"; margin:0 7px 0 8px; opacity:.7;} /* the dash before the subtitle */
  .tr-chev{flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px;
        background:#fff; border:1px solid var(--line-l, #dfe6ee); border-radius:50%; color:var(--slate, #5b6f84);
        transition:color .2s ease, border-color .2s ease, background .35s ease;}
  .tr-chev svg{width:15px; height:15px; display:block;}
  .tr-btn:hover .tr-chev, .tr-btn:focus-visible .tr-chev{color:var(--blue-d, #0079c5); border-color:var(--blue, #0095eb);}
  /* solo: the same parts in the header's colours */
  .tocroll.solo .tr-lab{color:#fff;}
  .tocroll.solo .tr-win{box-shadow:inset 2px 0 0 0 rgba(255,255,255,.3);}
  .tocroll.solo .tr-win::before{background:var(--gold, #f6c776);}
  .tocroll.solo .tr-it{color:#e6f2fc; opacity:.75;}
  .tocroll.solo .tr-it.cur{color:#fff; opacity:1;}
  .tocroll.solo .tr-chev{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); color:#fff;}
  .tocroll.solo .tr-btn:hover .tr-chev, .tocroll.solo .tr-btn:focus-visible .tr-chev{color:var(--gold, #f6c776); border-color:var(--gold, #f6c776);}
  /* the other spacing to compare (tocroll.js adds .roomy): the earlier 22px rows,
     with the rows above and below fading right out to the window's edges */
  .tocroll.roomy .tr-it{height:22px; line-height:22px;}
  .tocroll.roomy .tr-win{-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 36%, #000 64%, transparent 100%);
        mask-image:linear-gradient(180deg, transparent 0, #000 36%, #000 64%, transparent 100%);}
  .tocroll.roomy .tr-win::before{top:17px; height:20px;}
  /* anchors stop clear of the float-bar and this strip */
  .toc-secs .band[id]{scroll-margin-top:118px;}
}
@media (max-width:480px){ .tr-lab{display:none;} .tr-btn{padding:0 14px;} }
/* a section's step number, in the strip (tablet width up) and in the left-hand list */
.tn{font-family:var(--mono, 'IBM Plex Mono', monospace); font-weight:600; font-size:.82em; letter-spacing:.06em;
      color:var(--blue-d, #0079c5); margin-right:8px; transition:color .35s ease;}
.tocroll.solo .tn, .toc-back .tn{color:var(--gold, #f6c776);}
@media (max-width:760px){ .tr-it .tn{display:none;} }

/* "Solo" (tocroll.js): reading down the page, the site's header bar is tucked away
   and the strip stands in for it, carrying the logo (left) and a menu button
   (right); scrolling up brings the header bar back and fades these two out. */
html.tr-solo .floatbar{transform:translateY(-110%) !important;}
html.tr-solo .fab-menu{opacity:0 !important; pointer-events:none !important;}
.tr-logo, .tr-burger{position:absolute; top:9px; height:36px; opacity:0; pointer-events:none;
      transition:opacity .28s ease;}
.tocroll.solo .tr-logo, .tocroll.solo .tr-burger{opacity:1; pointer-events:auto;}
/* the logo: the full one, name and all, from tablet width up; on a phone only its
   mark, which is the left end of the same image. The menu button is the same
   three-line mark as the header's (.tkl, menu.css). */
.tr-logo{left:14px; display:flex; align-items:center;}
.tr-logo span{display:block; height:32px; overflow:hidden;}
.tr-logo img{display:block; height:32px; width:auto; max-width:none;}
.tr-burger{right:10px; width:38px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer;}
.tr-btn{transition:padding .28s ease;}
.tocroll.solo .tr-btn{padding-left:182px; padding-right:54px;}
@media (max-width:760px){
  .tr-logo span{width:30px;}
  .tocroll.solo .tr-btn{padding-left:58px;}
}
@media (prefers-reduced-motion:reduce){ .tr-logo, .tr-burger, .tr-btn, .tocroll::before, .tocroll::after{transition:none;} }

/* the full list: the site menu's overlay, with smaller rows and the subtitles always shown.
   Its rows carry each section's full title; the short names stay on the left-hand list. */
.tocmenu{clip-path:circle(0px at 50% 27px);}
.tocmenu.on{clip-path:circle(142% at 50% 27px);}
.tocmenu .tm-h{position:absolute; top:26px; left:max(22px, 8vw); z-index:3; margin:0;
      font-family:var(--mono, 'IBM Plex Mono', monospace); font-weight:600; font-size:12px;
      letter-spacing:.16em; text-transform:uppercase; color:var(--gold, #f6c776);}
.tocmenu .tk-nav a{font-size:clamp(17px, 2.7vh, 25px); line-height:1.2; padding:.9vh 0;}
.tocmenu .tk-nav a .t{display:block;} /* a block, so the number lines up with the first line of a long title */
.tocmenu .tk-nav a:nth-child(n+8){transition-delay:.5s;}
.tocmenu .tk-nav a .sub{display:block; max-width:56ch; max-height:none; opacity:1; transform:none; overflow:visible;
      font-family:var(--sans, 'Inter', sans-serif); font-weight:400; font-size:13.5px; line-height:1.4;
      letter-spacing:0; color:#b9cde0; margin-top:1px;}
.tocmenu .tk-nav a:hover .sub, .tocmenu .tk-nav a:focus-visible .sub{transform:translateX(10px);}
/* the row-spacing switch in the full list (not shown on the live site) */
.tocmenu .tm-opt{position:absolute; left:max(22px, 8vw); bottom:16px; z-index:3; cursor:pointer;
      font-family:var(--mono, 'IBM Plex Mono', monospace); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
      color:#9fb4c8; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 12px;}
.tocmenu .tm-opt:hover, .tocmenu .tm-opt:focus-visible{color:var(--gold, #f6c776); border-color:var(--gold, #f6c776);}
@media (max-width:600px){ .tocmenu .tm-h, .tocmenu .tm-opt{left:22px;} }
@media (prefers-reduced-motion:reduce){ .tr-list, .tocroll{transition:none;} }
@media print{ .tocroll, .tocmenu{display:none !important;} }