/* ==========================================================================
   The typeface
   Plus Jakarta Sans, served from here rather than from Google. One variable
   file per writing system carries every weight the site uses, so the whole
   range from 200 to 800 is two files and not six, and the unicode-range on
   each means the second is only fetched if a character in it is actually on
   the page.

   font-display: swap, not block: if the file is slow or never arrives the
   text is still read in the fallback face, rather than the page standing
   empty waiting for it.
   ========================================================================== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Advancelink, version 2.

   The layout and motion language of the video hero (Plus Jakarta Sans, pill
   controls, a masked headline, one reference unit on desktop) carried across
   every page, in version 1's colours and with version 1's logo. The current
   site is untouched; this is a separate set of pages under /v2/.

   Contents
     1  Tokens            v1's palette, the v2 unit, easing, the globe tint
     2  Base
     3  The home frame    one screen, the video behind it
     4  Nav               shared by every page
     5  Home hero copy
     6  Home breakpoints  tablet 1160, mobile 552, narrow 385, short landscape
     7  Inner pages       fixed nav, page hero, sections, footer, form
     8  Entrance and scroll reveals
   ========================================================================== */

/* ------------------------------------------------------------ 1 tokens */
:root{
  /* the desktop layout is authored against a 1280 x 800 render and scales
     as one piece through this unit */
  --u: min(calc(100vw / 1280), calc(100dvh / 760));

  /* version 1's palette */
  --canvas:        #121214;
  --canvas-rgb:    18, 18, 20;
  --plate:         #18191d;
  --plate-rgb:     24, 25, 29;
  --obsidian:      #1e1f24;
  --iron:          #2e3038;
  --text:          #ffffff;
  --text-2:        #c8cad0;
  --text-3:        #aeaeb7;
  --text-4:        #85858f;
  --hairline:      rgba(217, 218, 229, 0.20);
  --hairline-soft: rgba(217, 218, 229, 0.11);
  --hairline-lift: rgba(217, 218, 229, 0.42);
  --gold:          #e7b540;
  --gold-rgb:      231, 181, 64;
  --crimson:       #f54c3d;
  --crimson-rgb:   245, 76, 61;
  --accent-soft:   rgba(231, 181, 64, 0.14);

  /* the hero's roles, filled from that palette */
  --ink:        var(--text);
  --ink-muted:  var(--text-2);
  --panel:      var(--plate);
  --white-btn:  #fdfdfd;
  --btn-ink:    #070707;
  --glass-fill: rgba(var(--canvas-rgb), .78);
  --glass-line: var(--hairline);

  --dx: 8.5;    /* hero block optical offset, solved against the reference render */
  --dy: 13.1;

  --nav-h: calc(67 * var(--u));
  --gutter: clamp(20px, 5vw, 48px);
  --page: 1200px;

  --e-reveal: cubic-bezier(.16, 1, .3, 1);   /* long, graceful settle */
  --e-soft:   cubic-bezier(.25, .8, .3, 1);  /* supporting elements   */

  /* The globe is filmed in violet, which version 1's palette does not have.
     This turns it to the logo's gold. hue-rotate alone keeps the luminance,
     and violet is dark, so it came out a muddy amber; the brightness puts
     back what the turn took away. Found by running the filter's own maths
     over the clip's colours: violet at hue 257 lands at 38-45. White and
     black are unmoved, so the stars stay white.
     It stops short of the violet's full brightness: gold is far lighter to
     the eye than violet at the same strength, and at 1.8 the brightest arcs
     behind the subtitle reached the same lightness as the text on them. */
  --globe-tint: hue-rotate(154deg) saturate(.8) brightness(1.5);
  --poster: url("images/globe-poster.webp");
}
@supports not (height: 100dvh){
  :root{ --u: min(calc(100vw / 1280), calc(100vh / 760)); }
}

/* -------------------------------------------------------------- 2 base */
*{box-sizing:border-box}
html{background:var(--canvas)}
/* No background on the body: the grid below is a negative-z-index child of it,
   which paints before the body's own background would, so a colour here wipes
   it out. The root's colour already covers the window. */
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  color:var(--ink);
}
::selection{background:var(--gold);color:#070707}

/* Version 1's ground, carried over, but given to three sections rather than
   to the whole page: one fine hairline grid, a single line weight and a single
   cell size, faded out at the edges of the section it belongs to so it reads
   as a change of surface rather than as a pattern laid over everything. The
   lines are a warm silver rather than white, so they sit with the gold.

   It is drawn below the section's own tint and below the field canvas, so the
   order behind a section is ground, grid, points, words. */
.band--grid{position:relative;isolation:isolate}
.band--grid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(226, 221, 208, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 221, 208, .10) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 52%, transparent 100%);
          mask-image:radial-gradient(ellipse at 50% 50%, #000 52%, transparent 100%);
}
img{max-width:100%}

a:focus-visible,button:focus-visible{outline:2px solid var(--gold);
  outline-offset:3px;border-radius:99px}

.tone-gold{color:var(--gold)}
.tone-red{color:var(--crimson)}

/* ---------------------------------------------------- 3 the home frame */
/* The hero is the home page's first screen; the rest of the page scrolls on
   below it. Its height is the small viewport rather than the dynamic one:
   on a phone the dynamic height grows as the address bar slides away, which
   would move every section below it mid-scroll. Its width is the page's, not
   100vw, which on a desktop includes the scrollbar and would scroll sideways. */
.hero{position:relative;width:100%;height:100svh;overflow:hidden;background:var(--canvas)}
@supports not (height: 100svh){ .hero{height:100vh} }

/* 1280:800 bleed box, always covering the viewport */
.bg{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:max(100vw, calc(100dvh * 1.6));
  height:max(62.5vw, 100dvh);
  background-color:#000;
}
@supports not (height: 100dvh){
  .bg{width:max(100vw, calc(100vh * 1.6));height:max(62.5vw, 100vh)}
}
.bg-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:51% 8%;      /* framing inherited from the still it replaces */
  display:block;
  background-color:#000;
  pointer-events:none;
  opacity:0;
  filter:var(--globe-tint);
  transition:opacity .9s linear;
}
.bg-video.is-active{opacity:1}



/* --------------------------------------------------------------- 4 nav */
/* fixed on every page, clear over the top and glass once the page moves
   under it */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);
     display:flex;align-items:center;
     padding-left:calc(24.5 * var(--u));padding-right:calc(50.7 * var(--u));z-index:3;
     border-bottom:1px solid transparent;
     transition:background .25s ease,border-color .25s ease,-webkit-backdrop-filter .25s ease,backdrop-filter .25s ease}
.nav.is-scrolled{
  background:rgba(var(--canvas-rgb),.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--hairline-soft)}

/* version 1's lockup: the gold and crimson mark, then the name */
.logo{
  display:inline-flex;align-items:center;gap:calc(9 * var(--u));
  line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.logo img{display:block;height:calc(30 * var(--u));width:auto}
.logo span{font-weight:700;font-size:calc(16.5 * var(--u));letter-spacing:calc(-0.2 * var(--u))}

/* In the masthead the mark is given more of the bar, and the registration
   number sits under the name as it does in version 1: paperwork, not brand,
   so it is a size and a weight below the name, in tabular figures and the
   muted tone, and it can never outweigh the name above it. The footer keeps
   the smaller lockup. */
.nav .logo img{height:calc(42 * var(--u))}
.nav .logo__name{display:flex;flex-direction:column;justify-content:center;
  font-size:calc(17.5 * var(--u));line-height:1.04}
.nav .logo__name > span:first-child{font-size:inherit;font-weight:700;letter-spacing:calc(-0.2 * var(--u))}
.nav .logo__reg{margin-top:calc(4 * var(--u));font-size:calc(10.4 * var(--u));font-weight:500;
  letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--text-4)}

.nav-links{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateX(calc(-23 * var(--u)));
  display:flex;align-items:center;gap:calc(24.3 * var(--u));white-space:nowrap;
}
.nav-links a{
  position:relative;
  color:var(--ink-muted);text-decoration:none;font-size:calc(11.5 * var(--u));
  font-weight:500;letter-spacing:calc(-0.15 * var(--u));line-height:1;
  transition:color .18s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
/* a gold rule wipes in under the link being pointed at */
.nav-links a::before{content:"";position:absolute;left:0;right:0;bottom:calc(-7 * var(--u));height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--e-soft)}
.nav-links a:hover::before{transform:scaleX(1)}
/* the page you are on, marked the way version 1 marks it: a gold point */
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;top:calc(100% + 7 * var(--u));
  width:calc(4 * var(--u));height:calc(4 * var(--u));margin-left:calc(-2 * var(--u));
  border-radius:50%;background:var(--gold);
}

.nav-actions{margin-left:auto;display:flex;align-items:center;gap:calc(6.8 * var(--u))}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;
}

.btn-call{
  height:calc(28 * var(--u));padding:0 calc(12.9 * var(--u));
  border-radius:calc(14 * var(--u));background:var(--panel);color:#e8e8e8;
  border:1px solid var(--hairline-soft);
  font-size:calc(11.5 * var(--u));font-weight:500;letter-spacing:calc(-0.15 * var(--u));
  transition:background .18s ease,color .18s ease;
}
.btn-call:hover{background:var(--obsidian);color:#fff}

.btn-nav-start{
  height:calc(28 * var(--u));padding-left:calc(13.5 * var(--u));
  padding-right:calc(14.5 * var(--u));border-radius:calc(14 * var(--u));
  background:var(--white-btn);color:var(--btn-ink);font-size:calc(11.1 * var(--u));
  font-weight:500;letter-spacing:0;gap:calc(7 * var(--u));
  transition:background .18s ease;
}
.btn-nav-start:hover{background:#fff}
.btn-nav-start .arw{width:calc(11.5 * var(--u));height:calc(9.6 * var(--u))}

.burger{
  display:none;margin-left:auto;width:calc(40 * var(--u));
  height:calc(28 * var(--u));align-items:center;justify-content:center;
  background:var(--panel);border-radius:calc(14 * var(--u));border:1px solid var(--hairline-soft);
  cursor:pointer;padding:0;
}
.burger span{display:block;width:16px;height:1.5px;background:#ededed;border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;
  background:#ededed;border-radius:2px}
.burger span::before{top:-5px}
.burger span::after{top:5px}
/* Open, it is a close. The middle bar goes, the outer two meet in the centre
   and cross - which is the one thing the control has to say once the menu is
   up, and it was not saying it. */
.burger span,.burger span::before,.burger span::after{
  transition:transform .24s var(--e-soft), top .24s var(--e-soft), background-color .18s linear}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.arw{flex:0 0 auto;display:block}

/* how far down the page the reader is, along the nav's lower edge */
.nav__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.nav__progress i{display:block;height:100%;background:linear-gradient(90deg, var(--crimson), var(--gold));
  transform:scaleX(var(--p, 0));transform-origin:0 50%}

.menu{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes menuRow{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------- 5 home hero copy */
.hero-inner{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u)));
  width:max-content;text-align:center;z-index:2;
}

/* A still pool of the canvas behind the copy. The violet globe was dark
   enough to set white text straight onto; the gold one is not, where its
   arcs cross the subtitle. The pool sits inside the copy's own layer, so it
   never moves: the video is still the only thing behind it. */
.hero-inner::before{
  content:"";position:absolute;z-index:-1;inset:-22% -14%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--canvas-rgb),.58) 0%, rgba(var(--canvas-rgb),.38) 55%, rgba(var(--canvas-rgb),0) 100%);
}

/* two block lines rather than a <br>, because the entrance masks each line */
.ln{display:block}
.ln-i{display:block}
.hero-inner h1{margin:0;display:flex;flex-direction:column;
  font-weight:500;font-size:calc(89 * var(--u));
   line-height:calc(90 * var(--u));letter-spacing:calc(-1 * var(--u));color:var(--ink)}

.hero-inner .sub{
  margin:calc(16.1 * var(--u)) 0 0;font-weight:300;font-size:calc(17.4 * var(--u));
  line-height:calc(27 * var(--u));letter-spacing:calc(-0.30 * var(--u));color:#ececf0;
}

.hero-inner .ctas{margin-top:calc(21.8 * var(--u));display:flex;align-items:center;
      justify-content:center;transform:translateX(calc(-0.75 * var(--u)));
      gap:calc(7 * var(--u))}

.btn-lg{height:calc(39 * var(--u));border-radius:calc(19.5 * var(--u));
        font-size:calc(13.3 * var(--u));font-weight:500;
        letter-spacing:calc(-0.3 * var(--u));gap:calc(9 * var(--u))}
.btn-primary{background:var(--white-btn);color:var(--btn-ink);
  padding-left:calc(18.2 * var(--u));padding-right:calc(19.2 * var(--u));
  transition:background .18s ease,transform .18s ease}
.btn-primary:hover{background:#fff}
.btn-ghost{background:var(--glass-fill);color:#dcdde2;padding:0 calc(17.4 * var(--u));
  border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);transition:background .18s ease,border-color .18s ease}
.btn-ghost:hover{background:rgba(var(--canvas-rgb),.66);border-color:var(--hairline-lift)}
.btn-lg .arw{width:calc(13 * var(--u));height:calc(10.8 * var(--u))}

/* ---------------------------------------------------- 6 breakpoints */
/* TABLET — at ~1155px the 11.5u nav label drops under 10.5px, the 13.3u CTA
   label under 12px, the 28u pill under 25px, the 17.4u subtitle under
   15.5px. Everything holds at 1160.
   The second term keeps the widest line of the home hero inside the screen
   with 36px either side: "Where technology" measures 771u, so 780 (a little
   headroom) where the reference used 575 for "Cross-border". */
@media (max-width:1160px){
  :root{ --u: min(
      max(0.9px, min(calc(100vw / 1280), calc(100dvh / 760))),
      calc((100vw - 72px) / 780),
      calc(100dvh / 620)
    );
    --nav-h: max(58px, calc(67 * var(--u)));
  }
  .nav{padding-left:max(24px, calc(28 * var(--u)));
       padding-right:max(24px, calc(28 * var(--u)))}
  .logo img{height:max(28px, calc(30 * var(--u)))}
  .logo span{font-size:max(15.5px, calc(16.5 * var(--u)))}
  .nav .logo img{height:max(38px, calc(42 * var(--u)))}
  .nav .logo__name{font-size:max(16px, calc(17.5 * var(--u)))}
  .nav .logo__reg{font-size:max(9.8px, calc(10.4 * var(--u)))}
  .nav-links,.nav-actions{display:none}
  .burger{display:flex;width:max(46px, calc(48 * var(--u)));
          height:max(38px, calc(34 * var(--u)));border-radius:999px}
  .hero-inner{max-width:calc(100vw - 48px)}
  .hero-inner .sub{font-size:max(16px, calc(17.4 * var(--u)));line-height:max(25px, calc(27 * var(--u)))}
  .hero-inner .ctas{margin-top:max(26px, calc(21.8 * var(--u)));gap:max(10px, calc(7 * var(--u)))}
  .btn-lg{height:max(44px, calc(39 * var(--u)));border-radius:max(22px, calc(19.5 * var(--u)));
          font-size:max(15px, calc(13.3 * var(--u)));gap:max(10px, calc(9 * var(--u)))}
  .btn-primary{padding-left:max(21px, calc(18.2 * var(--u)));
               padding-right:max(22px, calc(19.2 * var(--u)))}
  .btn-ghost{padding-left:max(20px, calc(17.4 * var(--u)));
             padding-right:max(21px, calc(18.4 * var(--u)))}
  .btn-lg .arw{width:max(14px, calc(13 * var(--u)));height:max(11.6px, calc(10.8 * var(--u)))}
  .menu{position:fixed;top:calc(var(--nav-h) - 6px);
        right:max(24px, calc(28 * var(--u)));width:min(320px, calc(100vw - 48px));
        background:rgba(var(--canvas-rgb),.88);-webkit-backdrop-filter:blur(22px);
        backdrop-filter:blur(22px);border:1px solid var(--hairline-soft);
        border-radius:20px;padding:10px 8px 12px;flex-direction:column;
        box-shadow:0 24px 60px rgba(0,0,0,.55);transform-origin:top right;z-index:5}
  .menu.open{display:flex;animation:menuIn .18s ease both}
  .menu a{color:var(--ink-muted);text-decoration:none;font-size:15px;font-weight:500;
          letter-spacing:calc(-0.15 * var(--u));padding:12px 14px;border-radius:12px;
          transition:background .18s ease,color .18s ease}

  /* ---- the menu is a list of destinations, not a stack of words ----
     Each link is a row now: a hairline under it, a chevron at the end that
     says it goes somewhere, and - on the page you are already on - the gold
     the rest of the site uses to mean "this one", with a bar down the left
     edge. They arrive one after another rather than all together, which is
     the difference between a panel appearing and a menu opening. */
  .menu{padding:12px 8px 14px}
  .menu::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), var(--crimson), transparent);
    opacity:.55}
  .menu a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}
  /* the chevron: two borders of a square, turned */
  .menu a:not(.m-start)::after{content:"";width:6px;height:6px;flex:none;margin-right:2px;
    border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.45;
    transition:opacity .18s ease, transform .18s var(--e-soft)}
  .menu a:not(.m-start):hover::after,
  .menu a:not(.m-start):active::after{opacity:.9;transform:rotate(45deg) translate(2px,-2px)}
  /* a line between the destinations, and nothing above the first */
  .menu a + a::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
    background:var(--hairline-soft)}
  .menu a:hover{background:rgba(255,255,255,.06);color:#fff}
  .menu a[aria-current="page"]{color:var(--gold);background:rgba(var(--gold-rgb), .07);
    box-shadow:inset 2px 0 0 var(--gold)}
  .menu a[aria-current="page"]::after{opacity:.85}
  .menu .divider{height:1px;background:var(--hairline-soft);margin:8px 14px}
  /* the button is the end of the list, so it arrives last */
  .menu.open > *{animation:menuRow .34s var(--e-soft) both}
  .menu.open > *:nth-child(1){animation-delay:.03s}
  .menu.open > *:nth-child(2){animation-delay:.06s}
  .menu.open > *:nth-child(3){animation-delay:.09s}
  .menu.open > *:nth-child(4){animation-delay:.12s}
  .menu.open > *:nth-child(5){animation-delay:.14s}
  .menu.open > *:nth-child(6){animation-delay:.17s}
  .menu .m-start{display:flex;align-items:center;justify-content:center;gap:9px;
    background:var(--white-btn);color:var(--btn-ink);margin:6px 8px 0;padding:13px 16px;
    border-radius:14px;font-weight:600}
  .menu .m-start:hover{background:#fff;color:var(--btn-ink)}
  .menu .m-start .arw{width:13px;height:11px}
}

/* MOBILE — the side margin falls under 24px at ~550px and the subtitle's
   3-line composition collapses into ragged wrapping at ~535px. The subtitle
   becomes a fluid measure, and the headline is sized from the width. */
@media (max-width:552px){
  :root{--u:1px;--nav-h:56px}
  .nav{padding:0 20px}
  .logo{gap:8px}
  .logo img{height:26px}
  .logo span{font-size:15.5px;letter-spacing:-.2px}
  .nav .logo img{height:34px}
  .nav .logo__name{font-size:15.5px}
  .nav .logo__reg{margin-top:3px;font-size:9.5px}
  .burger{width:42px;height:36px}
  .hero-inner{position:absolute;left:0;right:0;top:50%;width:auto;max-width:none;
              padding:0 20px;transform:translateY(-47%)}
  /* "Where technology" ink is 8.52x the font size; 9.2 leaves the same
     headroom the reference's 6.9 left over "Cross-border" */
  .hero-inner h1{font-size:min(74px, calc((100vw - 44px) / 9.2));line-height:1.04;letter-spacing:-.02em}
  .hero-inner .sub{margin-top:16px;font-size:clamp(15.5px, 4vw, 16.5px);line-height:1.6;
       letter-spacing:0;max-width:42ch;margin-left:auto;margin-right:auto}
  .hero-inner .sub br{display:none}
  .hero-inner .ctas{margin-top:24px;gap:10px;transform:none;flex-wrap:wrap}
  .btn-lg{height:46px;border-radius:23px;font-size:15px;gap:9px}
  .btn-primary{padding-left:20px;padding-right:21px}
  .btn-ghost{padding-left:19px;padding-right:20px}
  .btn-lg .arw{width:13px;height:11px}
  .menu{top:50px;left:16px;right:16px;width:auto}
  .menu a{font-size:15.5px;padding:13px 14px}
  .menu .m-start{padding:14px 16px}
}

/* NARROW PHONES — the CTA pair measures 345px, so it stops fitting inside
   the 40px side padding at 386px */
@media (max-width:385px){
  .hero-inner .ctas{flex-direction:column;align-items:center}
  .hero-inner .btn-lg{width:min(100%,272px)}
}

/* SHORT LANDSCAPE */
@media (max-width:552px) and (max-height:460px){
  .hero-inner h1{font-size:min(44px, calc((100vw - 44px) / 9.2))}
  .hero-inner .sub{margin-top:12px;font-size:15px;line-height:1.5}
  .hero-inner .ctas{margin-top:18px}
  .hero-inner{transform:translateY(-44%)}
}

/* ========================================================================
   7 INNER PAGES

   Same nav, same pills, same headline move. Type below a hero is set in px
   and clamp rather than the reference unit: the unit exists to hold one
   composed screen together, and a long page of reading has no such screen.
   These sections serve the inner pages and the home page below its hero.
   ======================================================================== */

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
/* version 1's crimson diamond */
.eyebrow::before{content:"";width:7px;height:7px;background:var(--crimson);transform:rotate(45deg);flex:none}

/* ---- page hero ---- */
.page-hero{position:relative;overflow:hidden;text-align:center;
  padding:calc(var(--nav-h) + clamp(72px, 11vw, 150px)) var(--gutter) clamp(64px, 8vw, 112px)}
/* the home page's globe, still and far back, so every page opens on it */
.page-hero__bg{position:absolute;inset:0;pointer-events:none;
  background:#000 var(--poster) 51% 30% / cover no-repeat;
  filter:var(--globe-tint);opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%)}
.page-hero__in{position:relative;max-width:980px;margin:0 auto}
.page-hero h1{margin:22px 0 0;display:flex;flex-direction:column;
  font-weight:500;font-size:clamp(40px, 6.3vw, 86px);
  line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.page-hero .sub{margin:22px auto 0;max-width:58ch;font-weight:300;
  font-size:clamp(16px, 1.45vw, 19px);line-height:1.6;letter-spacing:-.01em;color:var(--text-2)}
.page-hero .ctas{margin-top:32px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.page-hero .btn-lg,.section .btn-lg{height:46px;border-radius:23px;font-size:15px;gap:9px;letter-spacing:-.01em}
.page-hero .btn-primary,.section .btn-primary{padding:0 21px 0 20px}
.page-hero .btn-ghost,.section .btn-ghost{padding:0 20px 0 19px}
.page-hero .btn-lg .arw,.section .btn-lg .arw{width:13px;height:11px}

/* in-page index under the hero */
.jump{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:36px}
.jump a{color:var(--text-3);text-decoration:none;font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:999px;border:1px solid var(--hairline-soft);
  transition:color .18s ease,border-color .18s ease}
.jump a:hover{color:#fff;border-color:var(--hairline-lift)}

/* ---- sections ---- */
.section{padding:clamp(72px, 9vw, 128px) 0;scroll-margin-top:calc(var(--nav-h) + 48px)}
.section--rule{border-top:1px solid var(--hairline-soft)}
.section--plate{background:rgba(var(--plate-rgb),.55)}
/* a section that carries a header bar takes its top spacing from the bar */
.section--indexed{padding-top:0}
.h2{margin:0;font-weight:500;font-size:clamp(32px, 4.3vw, 62px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h3{margin:0;font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.01em}
.lede{margin:18px 0 0;font-weight:300;font-size:clamp(16px, 1.35vw, 18px);line-height:1.65;color:var(--text-2);max-width:60ch}
.body{margin:16px 0 0;font-size:16px;line-height:1.7;color:var(--text-2);max-width:62ch}
.small{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--text-3)}
.hl{color:#fff;font-weight:500}
.head{display:flex;align-items:end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(32px, 4vw, 52px)}
.section--indexed .head{margin-bottom:clamp(36px, 4.5vw, 60px)}
.head .lede{margin:0;max-width:44ch}

.link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-decoration:none;font-weight:500;font-size:15px}
.link .arw{width:12px;height:10px;transition:transform .18s ease}
.link:hover .arw{transform:translateX(3px)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px, 6vw, 96px);align-items:start}
/* The one split where the two sides are nowhere near the same height: the
   pile and its four layers run to 849px against 286px of prose, because in a
   column this narrow the pile sits above the list instead of beside it. Left
   at the top, the text had 560px of nothing under it. Centred, the gap is
   shared and the prose sits against the middle of the pile it describes.
   Anything too old for :has() keeps the old alignment, which is not broken,
   only unbalanced. */
@supports selector(:has(*)) {
  /* and more air between the two: the prose runs to a hard edge and the pile
     begins almost at once, so at 96px they read as one block. The other
     splits are text beside text and do not want it. */
  .split:has(.stack){align-items:center;gap:clamp(36px, 8vw, 150px)}
}

.panel{background:rgba(var(--plate-rgb),.78);border:1px solid var(--hairline-soft);
  border-radius:22px;padding:clamp(24px, 3vw, 36px)}
.panel > .eyebrow{margin-bottom:24px}

.grid-3{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4, 1fr);gap:14px}
.card{background:rgba(var(--plate-rgb),.78);border:1px solid var(--hairline-soft);border-radius:20px;
  padding:clamp(22px, 2.4vw, 30px);display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:var(--hairline)}
.card .small{flex:1}
.card .link{margin-top:22px}
.card__no{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--gold);margin:0 0 18px}

.tags{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:13px;color:var(--text-2);padding:7px 14px;border-radius:999px;border:1px solid var(--hairline-soft)}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ticks li{position:relative;padding:15px 0 15px 34px;border-bottom:1px solid var(--hairline-soft);
  color:var(--text-2);font-size:15.5px;line-height:1.5}
.ticks li:first-child{border-top:1px solid var(--hairline-soft)}
.ticks li::before{content:"";position:absolute;left:4px;top:21px;width:12px;height:6px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}

/* the four layers, top of the stack first, dotted in version 1's legend colours */
.layers{list-style:none;margin:0;padding:0}
.layers li{display:grid;grid-template-columns:14px 1fr;gap:4px 16px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--hairline-soft)}
.layers li:last-child{border-bottom:0;padding-bottom:0}
.layers li:first-child{padding-top:0}
.layers i{width:8px;height:8px;border-radius:1px;transform:rotate(45deg);background:var(--text-4);align-self:center}
.layers .is-assurance i{background:var(--crimson)}
.layers .is-apps i{background:var(--gold)}
.layers b{font-weight:600;font-size:16px}
.layers span{grid-column:2;font-size:14.5px;color:var(--text-3);line-height:1.55}

/* mission and vision: two statements, one gold and one red */
.purpose{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.purpose .panel{padding:clamp(28px, 3.6vw, 48px);position:relative;overflow:hidden}
.purpose .panel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--gold);opacity:.8}
.purpose .panel.is-red::before{background:var(--crimson)}
.purpose .panel:not(.is-red) .eyebrow::before{background:var(--gold)}
.purpose .panel > .eyebrow{margin-bottom:0}
.purpose p.statement{margin:18px 0 0;font-weight:400;font-size:clamp(20px, 2.1vw, 27px);line-height:1.4;letter-spacing:-.015em;text-wrap:pretty}

/* the three service lines */
.line{display:grid;grid-template-columns:120px 1fr;gap:clamp(20px, 4vw, 56px)}
.line__no{font-size:clamp(44px, 5vw, 72px);font-weight:500;letter-spacing:-.03em;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--hairline-lift)}
.line .h2 + .lede{max-width:62ch}

/* a label over a heading */
.eyebrow + .h2{margin-top:18px}

/* The company's name across the whole width, just before the page closes.
   "Advancelink Company" in this face is 10.36 times its size wide, so the
   size is the width over 10.6. Container units measure the page rather than
   the window, which on a desktop includes the scrollbar. */
.wordmark{container-type:inline-size;overflow:hidden;text-align:center;
  padding:clamp(44px, 6vw, 84px) 0 0;border-top:1px solid var(--hairline-soft)}
.wordmark span{display:block;padding-bottom:.26em;
  white-space:nowrap;font-weight:800;letter-spacing:-.035em;line-height:.92;
  font-size:calc((100vw - 2 * var(--gutter)) / 10.6);
  font-size:calc((100cqi - 2 * var(--gutter)) / 10.6);
  color:transparent;-webkit-text-stroke:1px rgba(var(--gold-rgb),.5);
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.2), rgba(var(--gold-rgb),0) 85%);
  -webkit-background-clip:text;background-clip:text}

/* how a project runs */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, 1fr);gap:14px;counter-reset:step}
.steps li{padding:26px 24px 28px;border-radius:20px;border:1px solid var(--hairline-soft);background:rgba(var(--plate-rgb),.6)}
.steps li::before{counter-increment:step;content:"0" counter(step);display:block;
  font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--crimson);margin-bottom:34px}
.steps li:last-child::before{color:var(--gold)}

/* closer */
.closer{text-align:center}
.closer p{margin:0 auto;max-width:30ch;font-weight:400;font-size:clamp(24px, 3vw, 40px);line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.closer .btn{margin-top:32px}

/* ---- contact ---- */
.field{display:grid;gap:8px;margin:0 0 18px}
.field span{font-size:13px;font-weight:500;color:var(--text-3)}
.input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--hairline);border-radius:14px;
  padding:13px 16px;color:#fff;font:inherit;font-size:15px;line-height:1.5;
  transition:border-color .18s ease,box-shadow .18s ease}
.input::placeholder{color:var(--text-4)}
.input:focus{outline:none;border-color:rgba(var(--gold-rgb),.7);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.input{resize:vertical;min-height:150px}
.form-note{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--text-3);min-height:1.55em}
.form-note a{color:var(--gold)}

.reach{margin:0;display:grid;gap:0}
.reach div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--hairline-soft)}
.reach div:first-child{padding-top:0}
.reach dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);padding-top:3px}
.reach dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.reach a{color:#fff;text-decoration:none;border-bottom:1px solid var(--hairline);transition:border-color .18s ease}
.reach a:hover{border-color:var(--gold)}
.map{margin-top:26px;border-radius:20px;overflow:hidden;border:1px solid var(--hairline-soft);aspect-ratio:4 / 3;background:var(--plate)}
.map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.4) contrast(.95)}

/* ---- footer ---- */
/* ---- the footer, uncovered rather than arrived at ----
   The footer is pinned to the bottom of the window and the page is laid over
   the top of it, opaque. Scrolling does not bring the footer up; it slides the
   page off it. The space that lets that happen is the margin under <main>,
   which is exactly the footer's own height - measured by the script, because
   this footer is 439px across a desktop and 700 down a phone.

   Only switched on when the whole footer can be shown at once: on a short
   window a pinned footer taller than the glass can never finish being
   revealed, so there the script leaves it alone and it sits at the end of the
   page as before. */
html.reveal-footer .footer{position:fixed;left:0;right:0;bottom:0;z-index:0}
html.reveal-footer main{position:relative;z-index:1;background:var(--canvas);
  margin-bottom:var(--footer-h, 0px)}

.footer{border-top:1px solid var(--hairline-soft);padding:clamp(56px, 7vw, 88px) 0 28px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
.footer .logo{--u:1px}
.footer__blurb{margin:18px 0 0;max-width:34ch;font-size:14.5px;line-height:1.6;color:var(--text-3)}
.footer h2{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer li{font-size:14.5px;line-height:1.55;color:var(--text-3)}
/* Two ways to write to us and one place to find us: the addresses belong
   together, the postal address is a different kind of thing, so the gap does
   the grouping instead of leaving three evenly spaced lines that read as one
   undifferentiated list. */
.footer ul.footer__reach{gap:5px}
.footer ul.footer__reach li:last-child{margin-top:26px}
.footer li a{color:var(--text-2);text-decoration:none;transition:color .18s ease}
.footer li a:hover{color:#fff}
.footer__bar{margin-top:56px;padding-top:22px;border-top:1px solid var(--hairline-soft);
  display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:13px;color:var(--text-4)}
/* Friday keeps its own line: it is the day that reads differently, and set
   beside the rest it looked like one long sentence. Set to the right edge
   while it sits opposite the copyright, and back to the left once the bar has
   wrapped and it has the width to itself. */
.footer__count{font-variant-numeric:tabular-nums;color:var(--text-4)}
.footer__count[hidden]{display:none}
.footer__hours{text-align:right;line-height:1.6}
@media (max-width:680px){ .footer__hours{text-align:left} }

/* inside a service line the four cards share the narrower column, so they
   pair up sooner than a full-width grid of four would */
@media (max-width:1160px){ .line .grid-4{grid-template-columns:1fr 1fr} }
@media (max-width:980px){
  .split,.purpose{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4,.steps{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .line{grid-template-columns:1fr;gap:14px}
  .line__no{font-size:40px}
  .grid-4,.steps{grid-template-columns:1fr}
  .reach div{grid-template-columns:1fr;gap:4px}
  /* The footer ran to a screen and a quarter on a phone, four blocks stacked
     one under another. Two of them are short lists of links and sit happily
     side by side; the brand line and the address need the full width. That,
     and taking the air out of the spacing a phone does not have room for,
     is most of it - the links keep their tap padding, which is the one thing
     here worth the height it costs. */
  .footer{padding-top:40px}
  /* not an even split: the service names are long and the two company
     links are short, so an even one wrapped "Training and development"
     onto a second line and left the other column half empty */
  .footer__grid{grid-template-columns:1.35fr 1fr;gap:26px 20px}
  .footer__grid > :first-child,
  .footer__grid > :last-child{grid-column:1 / -1}
  /* A footer is read once, if at all. It can sit a step below the body type
     the page is actually read in - but only a step: nothing here goes under
     11px, which is where a label stops being small and starts being a
     smudge. The links keep their 42px tap target either way. */
  .footer__blurb{margin-top:12px;font-size:13.5px}
  .footer li{font-size:13.5px}
  .footer h2{margin-bottom:10px;font-size:11px}
  .footer__bar{margin-top:32px;padding-top:18px}
  .head{display:block}
  .head .lede{margin-top:14px}
}

/* ========================================================================
   8 ENTRANCE — runs once on load, then detaches. The video is the stage and
   is never animated; only the foreground performs.
     A  masked line rise   headlines — the signature move
     B  lift + focus       subtitle — blur settling to 0
     C  settle             pills and CTAs — rise + small scale
     D  quiet lift         logo, nav links, eyebrow — opacity + rise
   ======================================================================== */

/* resting state while fonts resolve — stage lit, cast offstage */
html.anim .ln{overflow:hidden;padding-top:.26em;margin-top:-.26em;margin-bottom:-.26em}
html.anim .ln-i{transform:translateY(100%);padding-bottom:.26em}
html.anim .logo, html.anim .nav-links a, html.anim .nav-actions .btn,
html.anim .burger, html.anim .sub, html.anim .ctas .btn, html.anim .page-hero .eyebrow,
html.anim .page-hero .jump{opacity:0}
html.anim .ln-i, html.anim .logo, html.anim .nav-links a, html.anim .nav-actions .btn,
html.anim .sub, html.anim .ctas .btn{will-change:transform,opacity}

@keyframes lineRise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes subIn{from{opacity:0;transform:translateY(calc(14 * var(--u)));filter:blur(4px)}
                 to{opacity:1;transform:none;filter:blur(0)}}
@keyframes subInFlat{from{opacity:0;transform:translateY(calc(12 * var(--u)))}
                     to{opacity:1;transform:none}}
@keyframes pillIn{from{opacity:0;transform:translateY(calc(8 * var(--u))) scale(.972)}
                  to{opacity:1;transform:none}}
@keyframes liftIn{from{opacity:0;transform:translateY(calc(9 * var(--u)))}
                  to{opacity:1;transform:none}}

html.anim.go .ln-i{animation:lineRise 1.05s var(--e-reveal) both}
html.anim.go .ln:nth-child(1) .ln-i{animation-delay:.12s}
html.anim.go .ln:nth-child(2) .ln-i{animation-delay:.22s}
html.anim.go .logo{animation:liftIn .62s var(--e-soft) .46s both}
html.anim.go .page-hero .eyebrow{animation:liftIn .62s var(--e-soft) .04s both}
html.anim.go .nav-links a{animation:liftIn .55s var(--e-soft) both}
html.anim.go .nav-links a:nth-child(1){animation-delay:.540s}
html.anim.go .nav-links a:nth-child(2){animation-delay:.585s}
html.anim.go .nav-links a:nth-child(3){animation-delay:.630s}
html.anim.go .nav-links a:nth-child(4){animation-delay:.675s}
html.anim.go .nav-links a:nth-child(5){animation-delay:.720s}
html.anim.go .sub{animation:subIn .85s var(--e-reveal) .58s both}
html.anim.go .btn-call{animation:pillIn .55s var(--e-soft) .68s both}
html.anim.go .burger{animation:pillIn .55s var(--e-soft) .68s both}
html.anim.go .btn-nav-start{animation:pillIn .55s var(--e-soft) .73s both}
html.anim.go .ctas .btn-primary{animation:pillIn .70s var(--e-reveal) .90s both}
html.anim.go .ctas .btn-ghost{animation:pillIn .70s var(--e-reveal) .97s both}
html.anim.go .page-hero .jump{animation:liftIn .6s var(--e-soft) 1.02s both}

/* mobile: same language, restrained — drop the focus pull */
@media (max-width:552px){
  html.anim.go .sub{animation-name:subInFlat}
  html.anim.go .ln-i{animation-duration:.92s}
  html.anim.go .ctas .btn-primary{animation-delay:.84s}
  html.anim.go .ctas .btn-ghost{animation-delay:.90s}
}

/* Below the hero, the same quiet lift as each block comes into view. Nothing
   is hidden unless the script is there to bring it back: it sets .rise on
   the root, and the head script takes it off again if the script never
   arrives. */
html.rise [data-rise]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--e-reveal),transform .9s var(--e-reveal);transition-delay:var(--d, 0s)}
html.rise [data-rise].is-in{opacity:1;transform:none}
/* a printed page has no scrolling to bring anything in */
@media print{ html.rise [data-rise]{opacity:1;transform:none} }

/* reduced motion — belt and braces alongside the script's own opt-out */
@media (prefers-reduced-motion:reduce){
  html.anim .ln{overflow:visible;padding-top:0;margin:0}
  html.anim .ln-i{transform:none;padding-bottom:0}
  html.anim .logo, html.anim .nav-links a, html.anim .nav-actions .btn,
  html.anim .burger, html.anim .sub, html.anim .ctas .btn, html.anim .page-hero .eyebrow,
  html.anim .page-hero .jump{opacity:1}
  html.rise [data-rise]{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ========================================================================
   9 THE HOME PAGE BELOW ITS HERO

   Version 1 stacks centred bands of cards down the page. This reads
   differently on purpose: a section's label stays with the reader in a
   narrow left column while its content scrolls past it, lists are rows
   between hairlines rather than cards, the four delivery words run edge to
   edge and change sides, the three lines of work sit in one uneven block,
   and the page closes on its one filled panel.
   ======================================================================== */
.band{padding:0 0 clamp(76px, 9vw, 132px);scroll-margin-top:calc(var(--nav-h) + 48px)}
/* every other section stands on a lighter ground, so the join between two of
   them is a change of surface and not only a line */
.band--tint{background:rgba(var(--plate-rgb), .45)}

/* ---- a section's own header bar ----
   The number and name of the section, on a rule across the page, and it
   holds under the nav for as long as you are inside that section. Version 1
   labels a section once, in small grey capitals above the copy, which is
   easy to scroll straight past; this says where you are the whole way down. */
.band__top{position:sticky;top:calc(var(--nav-h) - 1px);z-index:2;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline-soft);
  background:rgba(var(--canvas-rgb), .9);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.band__top > div{max-width:var(--page);margin:0 auto;padding:15px var(--gutter);
  display:flex;align-items:center;gap:14px}
.band__no{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--gold);flex:none}
.band__no::after{content:"";display:inline-block;width:22px;height:1px;background:var(--hairline-lift);
  margin:0 0 5px 14px}
.band__name{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}

.band__wrap,.band__body{padding-top:clamp(52px, 6vw, 88px)}
.band__wrap{max-width:var(--page);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
  display:grid;grid-template-columns:minmax(260px, 390px) minmax(0, 1fr);gap:clamp(26px, 4.2vw, 60px)}

/* the heading holds its place while the content goes by */
.band__label{position:sticky;top:calc(var(--nav-h) + 74px);align-self:start}
.band__label h2{margin:0;font-weight:500;font-size:clamp(30px, 3.8vw, 52px);line-height:1.06;
  letter-spacing:-.03em;color:var(--text);text-wrap:balance}
.band__label p{margin:20px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-3)}
.band__label .link{margin-top:22px}
@media (max-width:900px){
  .band__wrap{grid-template-columns:1fr;gap:28px}
  .band__label{position:static}
}

/* a term and what it means, hairline to hairline */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline-soft)}
.rows li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px 40px;
  padding:clamp(18px, 2.2vw, 28px) 0;border-bottom:1px solid var(--hairline-soft)}
.rows h3{margin:0;font-weight:500;font-size:clamp(19px, 1.9vw, 25px);line-height:1.25;letter-spacing:-.015em;
  transition:color .2s ease}
.rows li:hover h3{color:var(--gold)}
.rows p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
@media (max-width:640px){ .rows li{grid-template-columns:1fr;gap:8px} }

/* the four delivery words, edge to edge, changing sides as they go */
/* it opens under the section's header bar, so it takes the same top space
   every other section's content does */
.deliver{list-style:none;margin:clamp(52px, 6vw, 88px) 0 0;padding:0;border-top:1px solid var(--hairline-soft)}
.deliver > li{position:relative;border-bottom:1px solid var(--hairline-soft);padding:clamp(26px, 3.6vw, 52px) 0}
.deliver > li:last-child{border-bottom:0;padding-bottom:0}
.deliver__in{position:relative;z-index:1;max-width:var(--page);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;align-items:center}
/* Version 1 gives each of these a screen of its own and cascades its letters
   in as it arrives. Here they are a list, so the handover is done in place:
   the word nearest the middle of the window is the one lit, the others stand
   back, and a word's letters climb in the first time it is reached. */
.deliver__word{margin:0;padding-bottom:.2em;
  font-weight:500;font-size:clamp(40px, 7vw, 96px);line-height:.98;letter-spacing:-.035em;
  color:var(--text-4);
  transition:color .45s var(--e-soft),-webkit-text-stroke-color .45s var(--e-soft)}
.deliver > li.is-live .deliver__word{color:var(--text)}
.deliver__note{transition:opacity .45s var(--e-soft),color .45s ease}
.deliver > li:not(.is-live) .deliver__note{opacity:.42}

.deliver__word .no{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--crimson);margin-bottom:16px}
.deliver > li:hover .deliver__word{color:var(--gold)}
.deliver__note{margin:0;font-size:clamp(16px, 1.4vw, 18px);line-height:1.6;color:var(--text-2);max-width:34ch}
/* every second word sits on the right, its line opposite */
.deliver > li:nth-child(even) .deliver__word{grid-column:2;grid-row:1}
.deliver > li:nth-child(even) .deliver__note{grid-column:1;grid-row:1;justify-self:end;text-align:right}
@media (max-width:760px){
  .deliver__in{grid-template-columns:1fr;gap:12px}
  .deliver > li:nth-child(even) .deliver__word,
  .deliver > li:nth-child(even) .deliver__note{grid-column:1;grid-row:auto;justify-self:start;text-align:left}
}

/* three lines of work in one uneven block: the first is the page's filled
   panel and stands the full height beside the other two */
/* The cards share the right half of the band with the heading, so there is
   only ever about 630px for them: three abreast makes three ribbons. The one
   a project usually starts with takes the full width instead and the other
   two sit under it.

   It used to span two rows down the left, which worked when its paragraph
   was four lines; with the shorter copy that left a tall gold rectangle two
   thirds empty - 350px of it. */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.bento a{display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  border:1px solid var(--hairline-soft);border-radius:22px;background:rgba(var(--plate-rgb),.78);
  padding:clamp(24px, 2.6vw, 34px);color:inherit;text-decoration:none;
  transition:border-color .2s ease,transform .2s ease}
.bento a:hover{transform:translateY(-2px);border-color:var(--hairline-lift)}
.bento h3{margin:0 0 12px;font-weight:600;font-size:19px;letter-spacing:-.01em}
.bento p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-3)}
.bento .card__mark{width:28px;height:28px;color:var(--gold);margin-bottom:26px;flex:none}
/* qualified to beat the panel styling above, which names the anchor */
.bento a.bento__lead{grid-column:1 / -1;background:var(--gold);border-color:var(--gold);color:#070707}
.bento a.bento__lead:hover{border-color:var(--gold)}
.bento__lead h3{font-size:clamp(24px, 2.6vw, 34px);font-weight:500;line-height:1.15;letter-spacing:-.02em}
/* the measure was set for a tall narrow card; across the full width it can
   take more of the line before it wraps, which uses the card rather than
   leaving its right half empty */
.bento__lead p{color:rgba(7,7,7,.74);font-size:15.5px;max-width:58ch}
.bento__lead .card__mark,.bento__lead .link{color:#070707}
@media (max-width:900px){ .bento{grid-template-columns:1fr} }

/* a statement, set larger than the copy around it */
.statement{margin:0;font-weight:400;font-size:clamp(21px, 2.3vw, 30px);line-height:1.36;letter-spacing:-.02em;text-wrap:pretty}
.statement + .body{margin-top:24px}

/* the stack, as a band under the statement */
.layers-band{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:24px;
  margin-top:clamp(34px, 4.5vw, 60px);padding-top:26px;border-top:1px solid var(--hairline-soft)}
.layers-band i{display:block;width:8px;height:8px;border-radius:1px;transform:rotate(45deg);background:var(--text-4)}
.layers-band .is-assurance i{background:var(--crimson)}
.layers-band .is-apps i{background:var(--gold)}
.layers-band b{display:block;font-weight:600;font-size:16px;margin:14px 0 8px}
.layers-band span{display:block;font-size:14px;line-height:1.55;color:var(--text-3)}

/* the four stages, on one line */
.track{list-style:none;position:relative;margin:clamp(30px, 4vw, 50px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4, 1fr);gap:22px}
.track::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--hairline-soft)}
.track > li{position:relative;padding-top:40px}
.track > li::before{content:"";position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--canvas);border:1.5px solid var(--hairline-lift);box-sizing:border-box}
/* the last stage is the one that keeps going */
/* The last stage used to be gold for good: it was the end of the line, and
   the end of the line was the point. Now that the timeline walks itself, the
   gold belongs to whichever stage is being named - a fourth one that is lit
   whatever is happening reads as the only one that matters. */
.track__no{position:absolute;top:-1px;left:24px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--crimson)}
.track h3{margin:0 0 10px;font-weight:600;font-size:18px;letter-spacing:-.01em}
.track p{margin:0;font-size:14.5px;line-height:1.62;color:var(--text-2)}
@media (max-width:820px){
  .track{grid-template-columns:1fr;gap:0}
  .track::before{left:6px;right:auto;top:10px;bottom:10px;width:1px;height:auto}
  .track > li{padding:0 0 28px 34px}
  .track > li::before{top:4px}
  .track__no{position:static;display:block;margin-bottom:8px}
}

/* the five points, two at a time */
.points{list-style:none;margin:clamp(30px, 4vw, 48px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.points li{position:relative;padding:16px 0 16px 30px;border-top:1px solid var(--hairline-soft);
  font-size:15.5px;line-height:1.55;color:var(--text-2)}
.points li::before{content:"";position:absolute;left:2px;top:23px;width:11px;height:6px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}
@media (max-width:640px){ .points{grid-template-columns:1fr} }

/* the close: the page's one filled panel, in the brand's gold */
.close-band{background:var(--gold);color:#070707;text-align:center;padding:clamp(60px, 8vw, 104px) 0}
.close-band .wrap{max-width:900px}
.close-band h2{margin:0;font-weight:500;font-size:clamp(34px, 5vw, 64px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
/* the logo's red as it is drawn, which only works on a light ground */
.close-band .tone{color:#870d04}
.close-band p{margin:20px auto 0;max-width:52ch;font-size:clamp(16px, 1.4vw, 18px);line-height:1.6;color:rgba(7,7,7,.76)}
.close-band .actions{margin-top:32px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.close-band .btn-primary{background:#070707;color:#fff}
.close-band .btn-primary:hover{background:#242428}
.close-band .btn-ghost{background:rgba(7,7,7,.05);border-color:rgba(7,7,7,.3);color:#070707;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.close-band .btn-ghost:hover{background:rgba(7,7,7,.11);border-color:rgba(7,7,7,.5)}
.close-band .btn-lg{height:46px;border-radius:23px;font-size:15px;gap:9px;letter-spacing:-.01em}
.close-band .btn-primary{padding:0 21px 0 20px}
.close-band .btn-ghost{padding:0 20px 0 19px}
.close-band .btn-lg .arw{width:13px;height:11px}

/* ========================================================================
   10 THINGS TO TOUCH

   The pieces of version 2 that answer back: the curtain between pages, the
   layer stack you can turn, the stage timeline you can step through, and
   the light that follows the cursor across a panel. Every one of them is
   an addition to a page that already reads without it, and all of them
   stand down under prefers-reduced-motion.
   ======================================================================== */

/* ---- the opening ----
   Version 1's loading screen, carried over: the ground, a hairline filling
   gold while the globe loads, and the company's name rising letter by letter
   under it. It holds the page only as long as it has to - the script hands
   over as soon as the clip can be drawn, and never waits more than a few
   seconds - and the stylesheet carries its own time-out as well, so a script
   that never runs cannot leave the reader looking at a curtain. */
.intro{display:none;--mark:min(60vmin, 600px)}
html.intro-live .intro{display:block;position:fixed;inset:0;z-index:10;pointer-events:none;
  animation:introBail .5s 6s both}

/* The mark, gathered out of the same four shapes the fields are drawn with.
   It leaves before the ground does - a little quicker, and opening outwards as
   it goes - or it hangs over the page for the moment the ground takes to fade
   and reads as something left behind rather than something handing over. */
.intro__mark{position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .42s ease, transform .7s var(--e-reveal)}
html.intro-out .intro__mark{opacity:0;transform:scale(1.07)}
.intro::before{content:"";position:absolute;inset:0;background:var(--canvas);
  transition:opacity .8s ease}
html.intro-go .intro::before{opacity:0}

.intro__load{position:absolute;left:50%;top:50%;width:132px;height:1px;margin-left:-66px;
  overflow:hidden;background:rgba(226, 221, 208, .12);transition:opacity .35s ease}
.intro__load i{position:absolute;inset:0;background:var(--gold);transform-origin:left center;
  animation:introLoad 2.2s cubic-bezier(.2, .7, .2, 1) both}
html.intro-go .intro__load,
html.intro-form .intro__load{opacity:0}

.intro__word{position:absolute;left:0;right:0;top:50%;
  margin:calc(var(--mark) / 2 + 14px) 0 0;padding:0 16px;
  text-align:center;font-weight:700;font-size:clamp(19px, 2.1vw, 30px);
  letter-spacing:.02em;color:#fff;
  transition:opacity .6s ease, translate .8s var(--e-reveal)}
.intro__word .ch{display:inline-block;white-space:pre;opacity:0;
  transform:translateY(.65em);filter:blur(6px);
  transition:opacity .6s ease, transform .9s var(--e-reveal), filter .6s ease;
  transition-delay:calc(var(--i, 0) * 26ms)}
html.intro-word .intro__word .ch{opacity:1;transform:none;filter:none}
html.intro-out .intro__word{opacity:0;translate:0 -18px}
@keyframes introLoad{from{transform:scaleX(0)} to{transform:scaleX(.86)}}
@keyframes introBail{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){ .intro{display:none !important} }

/* ---- between pages ----
   A leaving page fades to the canvas colour and the next one fades up from
   it, so the two feel like one place rather than two documents. Only pages
   inside version 2 do this; anything else is a normal navigation. */
.curtain{position:fixed;inset:0;z-index:9;pointer-events:none;background:var(--canvas);
  opacity:0;transition:opacity .34s ease}
html.is-leaving .curtain{opacity:1;transition-duration:.3s}
html.is-arriving .curtain{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){ .curtain{display:none} }

/* ---- the layer stack ----
   Version 1 builds this in WebGL. Here it is four plates in CSS 3D: the
   whole stack turns with the pointer, and the layer under the pointer, or
   under the name beside it, lifts out of the pile. The names are real
   buttons, so it works from a keyboard and on a touch screen; the plates
   themselves are decoration and hidden from screen readers. */
/* The scene and the names sit side by side when there is room for both and
   go one above the other when there is not. That is decided by the width the
   stack itself has, not the width of the window, because the about page puts
   it in half a column while the home page gives it the full one. */
.stack{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:26px 36px;align-items:center}

/* The whole pile is measured from the room the scene has, so it is drawn
   whole wherever it is put: the home page gives it half a wide column, the
   about page a narrower one, a phone the full width. A turned plate reaches
   about one and a half times its own side across and, with the depth between
   the plates, close to twice it down the page, which is where the 60% and
   the ratio below come from. Past the scene it clips rather than letting the
   page scroll sideways, but not until well clear of the plates, so their
   shadows still fall properly. */
.stack__scene{position:relative;perspective:1000px;container-type:inline-size;
  /* the ratio sets the height off the width; the ceiling is where the plates
     stop growing, so past it the box only gets wider and they hold the
     middle of it */
  aspect-ratio:1 / 1.14;max-height:456px;width:100%;
  overflow:hidden;overflow:clip;overflow-clip-margin:64px}
/* The deck is a single point at the middle of the scene rather than a box
   filling it: a box this size, turned, would reach past the scene and push
   the page sideways on a phone, where a point cannot. The plates hang off
   the point and are what the scene is measured against. */
.stack__plates{--tile:clamp(158px, 17.5vw, 240px);  /* without container queries */
  --tile:min(60cqi, 240px);
  --step:calc(var(--tile) * .135);  /* depth from one plate to the next */
  --rise:calc(var(--tile) * .19);   /* how far the picked plate comes out */
  position:absolute;left:50%;top:50%;width:0;height:0;
  list-style:none;margin:0;padding:0;transform-style:preserve-3d;
  transform:rotateX(calc(56deg + var(--tilt, 0deg))) rotateZ(calc(-34deg + var(--spin, 0deg)));
  transition:transform .5s var(--e-soft)}
.stack__plates li{position:absolute;left:50%;top:50%;width:var(--tile);aspect-ratio:1;
  translate:-50% -50%;transform:translateZ(calc(var(--z) * var(--step)));
  border:1px solid var(--hairline-lift);border-radius:12px;
  background:linear-gradient(135deg, rgba(var(--plate-rgb),.95), rgba(var(--plate-rgb),.5));
  box-shadow:0 24px 50px rgba(0,0,0,.4);cursor:pointer;
  transition:transform .45s var(--e-soft),border-color .3s ease,background .3s ease,box-shadow .3s ease}
.stack__plates li.is-on{
  transform:translateZ(calc(var(--z) * var(--step) + var(--rise)));
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(var(--gold-rgb),.34), rgba(var(--gold-rgb),.08));
  box-shadow:0 30px 60px rgba(0,0,0,.5)}
/* the top plate carries the second brand colour, as it does in version 1 */
.stack__plates li.is-assurance{border-color:rgba(245,76,61,.6)}
.stack__plates li.is-apps{border-color:rgba(var(--gold-rgb),.55)}

.stack__keys{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline-soft)}
.stack__keys li{border-bottom:1px solid var(--hairline-soft)}
.stack__keys button{display:block;width:100%;padding:15px 0;background:none;border:0;cursor:pointer;
  font:inherit;text-align:left;color:inherit}
.stack__keys b{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;transition:color .2s ease}
.stack__keys i{width:8px;height:8px;border-radius:1px;rotate:45deg;background:var(--text-4);flex:none;transition:background .2s ease}
.stack__keys .is-assurance i{background:var(--crimson)}
.stack__keys .is-apps i{background:var(--gold)}
.stack__keys span{display:block;margin-top:7px;font-size:14px;line-height:1.55;color:var(--text-3)}
.stack__keys button[aria-pressed="true"] b{color:var(--gold)}
.stack__keys button[aria-pressed="true"] i{background:var(--gold)}

/* ---- the stage timeline ----
   The four stages on one line, with the line filling gold up to whichever
   stage you are on. Pointing, clicking and tabbing all pick one. */
.track{list-style:none;position:relative;margin:clamp(30px, 4vw, 50px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4, 1fr);gap:22px}
.track::before,.track::after{content:"";position:absolute;left:var(--line-a, 0px);top:6px;height:1px}
.track::before{width:var(--line-len, 100%);background:var(--hairline-soft)}
.track::after{width:var(--fill, 0px);background:var(--gold);transition:width .45s var(--e-soft)}
/* the marks and the numbers stand above the line, so it runs behind them
   rather than through them */
.track > li{position:relative;z-index:1}
.track button{display:block;width:100%;padding:40px 0 0;background:none;border:0;cursor:pointer;
  font:inherit;text-align:left;color:inherit}
.track__dot{position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;box-sizing:border-box;
  background:var(--canvas);border:1.5px solid var(--hairline-lift);
  transition:background .3s ease,border-color .3s ease,transform .3s var(--e-soft)}
.track__no{position:absolute;top:-1px;left:17px;padding:0 7px;font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--text-4);background:var(--canvas);transition:color .25s ease}
.track__title{display:block;margin-bottom:10px;font-weight:600;font-size:18px;letter-spacing:-.01em;
  transition:color .25s ease}
.track__text{display:block;font-size:14.5px;line-height:1.62;color:var(--text-4);transition:color .25s ease}
.track > li.is-on .track__dot{background:var(--gold);border-color:var(--gold);transform:scale(1.15)}
.track > li.is-on .track__no{color:var(--gold)}
.track > li.is-on .track__text{color:var(--text-2)}
/* the stage under the pointer, or tabbed to, names itself in gold */
.track > li.is-on .track__title,
.track > li:hover .track__title,
.track button:focus-visible .track__title{color:var(--gold)}
@media (max-width:820px){
  .track{grid-template-columns:1fr;gap:0}
  .track::before,.track::after{left:6px;top:var(--line-a, 10px);width:1px;height:auto}
  .track::before{right:auto;bottom:auto;height:var(--line-len, calc(100% - 20px))}
  .track::after{height:var(--fill, 0px);width:1px;transition:height .45s var(--e-soft)}
  .track button{padding:0 0 28px 34px}
  .track__dot{top:4px}
  .track__no{position:static;display:block;margin-bottom:8px;padding:0;background:none}
}

/* ---- the field behind a section ----
   Version 1 draws a particle object across the whole page in WebGL. Here it
   is a much quieter thing: a few hundred points on a slowly turning form,
   drawn on a 2D canvas behind the copy and faded out at the edges, so the
   section has depth behind it without competing with what is written on it.
   The script draws nothing while the section is off screen, and holds a
   single still frame for anyone who has asked for reduced motion. */
/* The canvas is put below the section's own content rather than the content
   being lifted above it: lifting it meant giving every child position:relative,
   which took position:sticky off the section's header bar and then shifted the
   bar down by the very offset it was meant to stick at. */
.band--field{position:relative;isolation:isolate}
/* Named for what it is. "field" alone also means the wrapper round a label
   and its input, and whichever rule came second won: the contact form's
   labels were being laid out as full-screen canvases. */
.wave{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  opacity:.62;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent)}

/* ---- 02 as a stage ----
   Version 1 gives each delivery word a screen of its own: the section is as
   tall as the four of them put together, a panel inside it is pinned to the
   window, and the words cross-fade over the object while the scroll runs
   past. Nothing moves except what is being read.

   Without the script it is four rows in a list, which is exactly what it was
   before and what still renders if the script never arrives. */
html.v2-ready .band--acts{height:calc(var(--acts, 4) * 100vh)}
html.v2-ready .band--acts .deliver__sticky{
  position:sticky;top:calc(var(--nav-h) + var(--bar, 50px));
  height:calc(100vh - var(--nav-h) - var(--bar, 50px));
  overflow:hidden;overflow:clip;isolation:isolate}
html.v2-ready .band--acts .deliver{position:absolute;inset:0;margin:0;padding:0;border:0}
html.v2-ready .band--acts .deliver > li{
  position:absolute;inset:0;display:grid;align-content:center;
  margin:0;padding:0;border:0;overflow:visible;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--e-soft)}
html.v2-ready .band--acts .deliver > li.is-live{opacity:1;pointer-events:auto}
/* the line no longer slides in from the side: it is a screen of its own now */
html.v2-ready .band--acts .deliver__in{transform:none;opacity:1;transition:none}

/* Each act carries its own scrim, shaped to the side its copy sits on, so the
   words stay readable over the object without darkening the whole of it. The
   object holds one half of the screen and the type holds the other, and the
   scrim only has to cover the column the words are in. */
html.v2-ready .band--acts .deliver > li::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--canvas-rgb), .88) 20%, rgba(var(--canvas-rgb), 0) 62%)}
html.v2-ready .band--acts .deliver > li:nth-child(even)::before{
  background:linear-gradient(270deg, rgba(var(--canvas-rgb), .88) 20%, rgba(var(--canvas-rgb), 0) 62%)}

/* the word is spelled in, letter by letter, as version 1 spells its acts */
html.v2-ready .band--acts .deliver__word .ch{display:inline-block;white-space:pre;
  opacity:0;transform:translateY(.42em);filter:blur(7px);
  transition:opacity .5s ease, transform .75s var(--e-reveal), filter .5s ease;
  transition-delay:calc(var(--i, 0) * 24ms)}
html.v2-ready .band--acts .deliver > li.is-live .deliver__word .ch{
  opacity:1;transform:none;filter:none}
html.v2-ready .band--acts .deliver__note{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease .2s, transform .65s var(--e-reveal) .2s}
html.v2-ready .band--acts .deliver > li.is-live .deliver__note{opacity:1;transform:none}

/* The object behind the four delivery words. It covers the section, but what
   is drawn on it is the size of a screen and follows the reader down, so the
   words pass in front of one object rather than four. Softened at the top and
   bottom so it arrives and leaves rather than being cut. */
.forms{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent)}

/* ---- the rail down the side ----
   Version 1's map of the page, carried over: one diamond per section on a
   line that fills as far as the reader has come, every diamond a link to that
   section, and the name of the one being pointed at swinging out over the
   page. The labels are taken out of flow, so the rail is only as wide as its
   marks. Version 2 numbers its sections, so the marks carry those numbers. */
.rail{position:fixed;right:clamp(14px, 2.2vw, 30px);top:50%;transform:translateY(-50%);z-index:4}
.rail ol{margin:0;padding:0;list-style:none}
.rail__line,.rail__fill{position:absolute;right:9px;width:1px;pointer-events:none}
.rail__line{top:11px;bottom:11px;background:var(--hairline)}
.rail__fill{top:11px;height:0;background:rgba(var(--gold-rgb), .45);
  transition:height .45s var(--e-soft)}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;
  padding:7px 0 7px 20px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.rail i{width:7px;height:7px;flex:none;margin-right:6px;border-radius:1px;rotate:45deg;
  background:var(--text-4);opacity:.5;
  transition:background-color .3s ease,opacity .3s ease,scale .3s ease}
.rail span{position:absolute;right:24px;top:50%;translate:8px -50%;
  padding:5px 11px;border:1px solid var(--hairline);border-radius:999px;
  background:rgba(var(--plate-rgb), .92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;color:var(--text-2);opacity:0;pointer-events:none;
  transition:opacity .25s ease,translate .25s ease,color .25s ease,border-color .25s ease}
.rail span b{color:var(--gold);font-weight:700;margin-right:7px}
/* one name at a time: the marks sit closer together than the names are tall */
.rail a:hover span,.rail a:focus-within span{opacity:1;translate:0 -50%}
.rail a:hover i{background:var(--text-2);opacity:1}
.rail a:hover span{color:var(--text);border-color:var(--hairline-lift)}
.rail a[aria-current] i{background:var(--gold);opacity:1;scale:1.25}
.rail a[aria-current] span{color:var(--text);border-color:rgba(var(--gold-rgb), .45)}
/* it arrives with the masthead */
html.anim .rail{opacity:0}
html.anim.go .rail{animation:railIn .7s var(--e-soft) .86s both}
@keyframes railIn{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
/* no room for it beside the copy on a narrow or short window */
/* Once the page is narrower than its own measure, the copy reaches out to
   within a gutter of the edge, and the target around each mark - which is
   wider than the mark, and invisible - would take clicks off the last few
   pixels of it. The target loses that width before the copy arrives. */
@media (max-width:1220px){ .rail a{padding-left:8px} }
@media (max-width:980px){ .rail{display:none} }
@media (max-height:460px){ .rail{display:none} }
@media (prefers-reduced-motion:reduce){ html.anim .rail{opacity:1} }

/* ---- the light under the cursor ----
   A panel lights where the pointer is, which makes a page of dark panels
   feel touched rather than printed. */
.bento a,.card{position:relative;overflow:hidden}
.bento a::after,.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb),.11), transparent 72%)}
.bento a:hover::after,.card:hover::after{opacity:1}
.bento a.bento__lead::after{
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 72%)}

@media (prefers-reduced-motion:reduce){
  .stack__plates,.stack__plates li,.track::after,.track__dot{transition:none}
  .bento a::after,.card::after{display:none}
}

/* ==========================================================================
   On a phone
   The two things a phone really changes: what a page costs to load, and that
   the pointer is a fingertip about ten millimetres across rather than a
   cursor one pixel wide.
   ========================================================================== */
@media (max-width: 899px) {
  /* The hero still, cut to the screen it is shown on: 27KB instead of 241.
     The full-size frame stays for anything wider, where it is seen at size. */
  :root { --poster: url("images/globe-poster-mobile.webp"); }
}

@media (max-width: 760px) {
  /* A finger is not a cursor. These lines were 18px tall with 16px between
     them - a 33px pitch, where the thing doing the aiming is about 44. The
     padding goes on the link itself, so what grows is the target rather than
     only the space around it, and the gap comes down to keep the column
     looking much as it did. */
  .footer ul { gap: 2px; }
  .footer ul.footer__reach { gap: 2px; }
  .footer ul.footer__reach li:last-child { margin-top: 28px; }
  /* The padding is what holds a link open as something a thumb can hit.
     At 10px each line sat 22px clear of the next, which read as a list of
     separate things rather than one column; at 7px the gap is 16px and the
     target is still 35px, which is small but comfortably hittable for a
     secondary link with clear space around it. */
  /* block, not inline-block: an inline-block still sits on a text baseline,
     so the list was carrying a few pixels of leading above and below every
     link that no padding setting could reach. As a block the line box is
     exactly the link, the padding is the whole of the spacing, and the
     target grows to the full width of the column rather than the words. */
  .footer li a { display: block; padding: 7px 0; }

  /* the same for the addresses and numbers written out on the contact page */
  .panel dd a { display: inline-block; padding: 7px 0; }

  /* and the pills under a page's headline, which were 34 */
  .jump a { min-height: 42px; display: inline-flex; align-items: center; }

  /* A thumb reaches the foot of a phone far more easily than the top, and the
     first thing most readers want from a page like this is to ask a question.
     The hero's two buttons take the full width there, so neither can be
     missed nor mistaken for the other. */
  .hero-inner .ctas { flex-direction: column; align-items: stretch; }
  .hero-inner .ctas .btn { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  /* ---- the reading sizes settle ----------------------------------------
     Body copy was arriving at 16px, 15.5px and 14.5px depending on which
     block it sat in. On a wide screen those differences are deliberate and
     invisible: the blocks sit side by side at different widths, and the type
     is sized to the measure it is set in. Stacked into one 335px column on a
     phone, every paragraph has the same measure, and three sizes doing one
     job just read as the page changing its mind halfway down.

     So on a phone there is one size for anything meant to be read through,
     and the smaller sizes are kept for what is only glanced at. 16.5px also
     brings the line down to about 43 characters, from 47. */
  .hero-inner .sub,
  .band__label p,
  .rows p,
  .bento p,
  .track__text,
  .deliver__note,
  .body { font-size: 16.5px; line-height: 1.6;
          /* keeps a paragraph from ending on a single word, which a narrow
             column makes far more likely; ignored where unsupported */
          text-wrap: pretty; }

  /* A step down from 16.5px. Worth knowing what this does and does not buy:
     the paragraphs wrap to the same number of lines at 16.5px and at 15px -
     4, 4 and 3 in the three service cards - so nothing is gained by the text
     reflowing. All that comes back is the leading, about 3px a line. It is a
     real reduction and 15.5px is still a comfortable reading size, but the
     thing that would actually take a line out of those cards is five fewer
     words, not a smaller font. */
  .hero-inner .sub,
  .band__label p,
  .rows p,
  .bento p,
  .track__text,
  .deliver__note,
  .body { font-size: 15.5px; }
  /* the lead paragraph keeps its step above that */
  .statement { font-size: 20px; line-height: 1.4; }

  /* ---- and nothing is set below what a phone can resolve ---------------
     The registration number under the logo was 9.5px. At arm's length that
     is not small type, it is a smudge. */
  .nav .logo__reg { font-size: 11px; letter-spacing: .14em; }
  .deliver__word .no,
  .track__no { font-size: 12.5px; }
  .footer__bar,
  .footer__hours { font-size: 12.5px; }

  /* ---- 03 the cards close up -------------------------------------------
     Each card was a mark, then a heading, then a paragraph, then a link,
     stacked. The mark alone cost 54px of a 276px card - 28px of icon and
     26px of margin under it - to say in a picture what the heading says in
     words directly below.

     Side by side they cost one row between them. The icon becomes the
     heading's own mark rather than a separate announcement, the paragraph
     keeps the full width underneath, and the card loses about a sixth of
     its height without losing anything that was in it. */
  .bento a > div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
  .bento .card__mark{width:22px;height:22px;margin-bottom:0}
  .bento h3{margin:0;grid-column:2}
  .bento a > div > p{grid-column:1 / -1;margin-top:10px}
  .bento a{padding:15px;gap:14px}
  .bento{gap:12px}

  /* ---- 01 and 06 get a hierarchy instead of a wall ---------------------
     Four sectors, each a name and a description, and the description was
     arriving at nearly the same brightness as the name: white at 18.7:1
     against the page, the line under it at 11.4:1. Eight blocks of equal
     weight is what makes a short list feel like a lot - the eye has nowhere
     to land first.

     Stepping the descriptions back lets the four names be scanned and the
     detail be read second, and costs no height at all. They stay well above
     the 4.5:1 the guidelines ask for. */
  .rows p,
  .ticks li{color:var(--text-3)}
  .rows li{padding:20px 0}

  /* ---- 05 shows one stage at a time ------------------------------------
     The timeline is a thing you move through: four stages, one of them the
     one you are on. On a wide screen the four sit side by side and all four
     paragraphs can be read at a glance. Stacked into one column on a phone
     they become 1,033px of wall, 56% of it paragraphs for stages you are not
     looking at.

     So the stages keep their numbers and their names - the whole shape of
     the process stays visible and tappable - and only the one that is live
     carries its paragraph. The others are still in the page for a search
     engine to read; they are folded, not removed. */
  .track > li .track__text{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .42s var(--e-soft), opacity .3s ease, margin-top .42s var(--e-soft)}
  .track > li.is-on .track__text{max-height:260px;opacity:1;margin-top:8px}
  .track button{padding-bottom:18px}
  .track > li.is-on .track__title{color:var(--gold)}

  /* ---- 04 keeps the plates, at the size a phone has room for ------------
     The pile and the four lines under it say the same thing: the pile is the
     picture, the lines are the words. Both earn their place, but 382px of
     picture above 324px of words is most of a screen spent twice.

     Capping the height alone was not enough, and made things worse: the
     plates are sized off the scene's WIDTH, so shortening the box left them
     the same size and they painted 32px past it - over the top of the first
     line of text below. The measured stack is about 1.48 times the plate,
     so the plate is now limited by the box's height as well as its width,
     whichever binds first. That holds at any screen width; a figure tied to
     one axis inside a box capped on the other cannot. */
  .stack__scene{max-height:250px;container-type:size}
  .stack__plates{--tile:min(46cqi, 64cqb, 240px)}
  .stack{gap:18px}

  /* ---- the four acts take half the scroll ------------------------------
     The stage gives each act a screen of its own, which on a desktop is a
     held moment and on a phone is four screens of scrolling out of thirteen.
     Half a screen each makes the section two screens instead of four.

     Measured against a thumb, which moves the page 300-500px in one swipe:

        per act    a swipe is
        847px      half an act   (a screen each - the desktop setting)
        468px      one act       (65vh each)
        306px      more than one (50vh each - this)

     At this setting one swipe carries past an act, so they arrive faster
     than they can be read. 65vh is where one movement is one idea; change
     the 50vh below to 65vh for that. */
  html.v2-ready .band--acts{height:calc(var(--acts, 4) * 50vh)}

  /* ---- the headings come down to the size of the screen ----------------
     Every section heading was arriving at its clamp() floor - 30px, 32px,
     34px - which are sizes chosen for a column three times this wide. On a
     375px screen they ran to three and four lines each and the six of them
     together took 71% of a screen's height before a word of the page had
     been read.

     Measured at 30, 28, 26, 24 and 22px: 26px is where no heading runs past
     three lines, and the six together fall to 44%. Below that nothing more
     is gained - 24px and 22px both give 36% - and the headings start to look
     like body copy, so 26px is the floor rather than the smallest that fits. */
  .band__label h2,
  .close-band h2,
  .h2 { font-size: 26px; line-height: 1.1; }

  /* The lead paragraph was 20px in a 335px column, which is 30 characters to
     the line - short enough that a sentence shatters into ribbons. 18px puts
     it at 32 and takes a line off the longest of them. */
  .statement,
  .purpose p.statement { font-size: 18px; line-height: 1.45; }

  /* The service cards carried 24px of padding inside a 20px page margin, so
     their text had 285px of a 375px screen to live in. 18px gives it 297px
     and takes 63px off the height of the three cards together. */
  .bento a { padding: 18px; gap: 18px; }

  /* ---- the three service cards are one column here ---------------------
     The first is the feature card on a desktop: it stands the full height
     beside the other two, and its heading is sized to say so. Stacked, that
     difference has nothing left to point at, so the three read as one set. */
  .bento h3 { font-size: 19px; line-height: 1.22; }
}

/* ==========================================================================
   The cursor
   Built by the pointer module, which only runs for a mouse or a trackpad and
   sets .has-cursor when it does - so the system cursor is hidden only where
   something has replaced it. Fields you type into keep the system I-beam.
   The dot and the ring are positioned by transform from the script, and
   everything that changes with the mode is on their inner <i>, so a change of
   size never fights the position. Above everything, including the opening.
   ========================================================================== */
html.has-cursor,
html.has-cursor * { cursor: none !important; }
html.has-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html.has-cursor textarea,
html.has-cursor [contenteditable="true"] { cursor: text !important; }
html.has-cursor select { cursor: default !important; }

.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.cursor.is-on { opacity: 1; }
.cursor[data-mode="text"] { opacity: 0; }

.cursor__ring,
.cursor__dot {
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  will-change: transform;
}
.cursor__ring i,
.cursor__dot i,
.cursor__ring b {
  position: absolute;
  left: 0; top: 0;
  translate: -50% -50%;
  border-radius: 50%;
}
.cursor__dot i {
  width: 6px; height: 6px;
  background: var(--gold);
  transition: width .25s ease, height .25s ease, background-color .2s ease, opacity .2s ease;
}
.cursor__ring i {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(var(--gold-rgb), .62);
  background: rgba(var(--gold-rgb), 0);
  transition:
    width .38s cubic-bezier(.2, .8, .2, 1), height .38s cubic-bezier(.2, .8, .2, 1),
    border-color .25s ease, background-color .25s ease, border-width .25s ease, scale .2s ease;
}
.cursor__ring b {
  border-radius: 0;
  font: 600 10px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #070707;
  opacity: 0;
  transition: opacity .2s ease;
}

.cursor[data-mode="link"] .cursor__ring i {
  width: 54px; height: 54px;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), .10);
}
.cursor[data-mode="link"] .cursor__dot i { width: 4px; height: 4px; }

.cursor[data-mode="press"] .cursor__ring i {
  width: 62px; height: 62px;
  border-color: var(--crimson);
  background: rgba(var(--crimson-rgb), .14);
}
.cursor[data-mode="press"] .cursor__dot i { background: var(--crimson); }

.cursor[data-mode="card"] .cursor__ring i {
  width: 64px; height: 64px;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), .92);
}
.cursor[data-mode="card"] .cursor__ring b { opacity: 1; transition-delay: .1s; }
.cursor[data-mode="card"] .cursor__dot i { opacity: 0; }

/* over the gold panel and the white button the ring goes dark to stay seen */
.cursor.is-onlight .cursor__ring i { border-color: rgba(7, 7, 7, .78); background: rgba(7, 7, 7, .06); }
.cursor.is-onlight .cursor__dot i { background: #070707; }
.cursor.is-onlight[data-mode="card"] .cursor__ring i { background: #070707; border-color: #070707; }
.cursor.is-onlight[data-mode="card"] .cursor__ring b { color: var(--gold); }

.cursor.is-down .cursor__ring i { scale: .82; }