/* Mukhtar website, 1 November 2026 (owner approved): a private concierge
   for experiences beyond the ordinary. Pure black #191919 and white, EB Garamond for
   headings, Arimo for text, Julius Sans One only in the MUKHTAR wordmark.
   No green. Content photos in their own colour, softly toned (2.0.1); the
   motion is the model's: the aperture on pills, gentle fades, the sliding
   underline. The bar, the phone menu, the footer, the floating "Make an
   enquiry" pill and the enquiry form are written by tools/chrome.mjs. */
:root{--ink:#191919;--mist:#F2F2F2;--line:#E5E5E5;--line-d:#333;--ink2:#6B6B6B;--ink3:#A3A3A3;--g:64px;--sans:Arimo,Helvetica,Arial,sans-serif;--serif:'EB Garamond',Georgia,serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font:400 16px/26px var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
/* Photos, the model's way (2.0.1, 1 November 2026): content photos in their
   own colour, softly toned. Black and white only for the brand moments, the
   home hero and Member sign in, and the service shots, white gloves and
   cufflinks (class="bw"). The Kickstart logo keeps its official colours (MoU
   clause 7.1) and the app screens show as they are (class="keep"). */
img{filter:saturate(.88) contrast(.96) brightness(.97)}
img.bw{filter:grayscale(1)}
img.keep{filter:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}
.caps{display:block;font:500 11px/16px var(--sans);letter-spacing:.2em;text-transform:uppercase}
.wrap{max-width:1328px;margin:0 auto;padding:0 var(--g)}
.muted{color:var(--ink2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--ink);padding:10px 16px}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.u{text-decoration:underline;text-underline-offset:3px}
.pill{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;border:1px solid transparent;border-radius:999px;font:500 14px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:color .45s var(--ease),border-color .45s var(--ease)}
/* The aperture (2.0.1, learned from the model): on hover a fill grows as a
   circle from the pointer (site.js gives the point as --x and --y), the words
   change colour with it, and it closes on leave. Solid pills invert the same
   way. Keyboard focus shows it filled; reduced motion makes it a plain colour
   change. */
.pill:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ap);clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .45s var(--ease);pointer-events:none}
.pill.w{background:#fff;color:var(--ink);--ap:var(--ink);--apc:#fff;--apb:#fff}
.pill.b{background:var(--ink);color:#fff;--ap:#fff;--apc:var(--ink);--apb:var(--ink)}
@media (hover:hover){.pill:not([disabled]):hover{color:var(--apc);border-color:var(--apb)}.pill:not([disabled]):hover:before{clip-path:circle(160% at var(--x,50%) var(--y,50%))}}
.pill:focus-visible{color:var(--apc);border-color:var(--apb)}
.pill:focus-visible:before{clip-path:circle(160% at var(--x,50%) var(--y,50%))}
.pill.sm{height:32px;padding:0 18px;font-size:13px}
.pill[disabled]{opacity:.5;cursor:default}
.tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(25,25,25,.7);color:#fff;font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:6px 8px}
.it{font:italic 400 17px/22px var(--serif);color:var(--ink2)}

/* the M and the wordmark */
.brand{display:flex;align-items:center;gap:16px}
.brand svg{width:40px;height:33.3px;display:block;flex:none}
.brand span{font:400 15px/1 'Julius Sans One',sans-serif;letter-spacing:.42em}

/* top bar */
.hdr{background:var(--ink);color:#fff;height:80px;position:relative;z-index:10}
.hdr .bar{height:100%;display:flex;align-items:center;padding:0 48px}
.nav{position:relative;display:flex;gap:40px;margin-left:56px;font:500 11px/16px var(--sans);letter-spacing:.2em;text-transform:uppercase}
.nav>div{position:relative;height:80px;display:flex;align-items:center}
.nav>div>a{display:flex;align-items:center;gap:8px;height:100%}
.nav>div>a[aria-current] span{box-shadow:0 8px 0 -7px #fff}
.nav .chev{opacity:.8;transition:transform .2s}
.drop{display:flex;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;position:absolute;top:80px;left:-28px;background:var(--ink);padding:26px 28px 30px;flex-direction:column;gap:20px;min-width:240px}
.has:hover .drop,.has:focus-within .drop{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* the thin line that slides under the hovered or current item (site.js) */
.nl{position:absolute;left:0;top:0;height:1px;width:0;background:#fff;opacity:0;pointer-events:none;transition:transform .4s var(--ease),width .4s var(--ease),opacity .25s var(--ease)}
.nav.lined>div>a[aria-current] span{box-shadow:none}
.has:hover .chev,.has:focus-within .chev{transform:rotate(180deg)}
.drop a:hover,.right .login:hover,.ftr a:hover{opacity:.7}
.right{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:14px}
.right .pill{height:38px;padding:0 20px;font-size:13.5px}
.vr{width:1px;height:22px;background:rgba(255,255,255,.45)}
.login{display:flex;align-items:center;gap:10px}
.burger{display:none;flex-direction:column;gap:7px;width:24px;margin-left:auto;padding:12px 0;background:none;border:0;cursor:pointer}
.burger i{display:block;height:1.5px;background:#fff}

/* phone menu */
.menu{position:fixed;inset:0;z-index:50;background:var(--ink);color:#fff;overflow:auto}
.menu[hidden]{display:none}
.menu:not([hidden]){animation:rise .25s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.menu-open body{overflow:hidden}
.menu .mbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.menu .mbar .brand svg{width:32px;height:26.7px}
.mclose{background:none;border:0;padding:8px;margin-right:-8px;cursor:pointer;color:#fff}
.menu ul{list-style:none;padding:16px 24px 0}
.menu li>a{border-bottom:1px solid var(--line-d);padding:20px 0;font:500 13px/16px var(--sans);letter-spacing:.2em;text-transform:uppercase;display:block}
.menu .sub{display:flex;flex-direction:column;gap:18px;padding:18px 0 22px 16px;border-bottom:1px solid var(--line-d)}
.menu .sub a{font:400 15px/20px var(--sans);color:rgba(255,255,255,.85)}
.menu .foot{padding:40px 24px;display:flex;flex-direction:column;gap:22px;align-items:center}
.menu .foot .pill{width:100%}

/* hero */
.hero{position:relative;height:680px;background:#111;color:#fff;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,25,25,.15),rgba(25,25,25,0) 40%,rgba(25,25,25,.6)),linear-gradient(90deg,rgba(25,25,25,.45),rgba(25,25,25,0) 60%)}
.hero .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:96px}
.hero h1{font-size:76px;line-height:80px;max-width:820px}
.hero .sub{font:italic 400 26px/32px var(--serif);color:rgba(255,255,255,.9);margin-top:6px}
.hero .sub{text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero .pill{align-self:flex-start;margin-top:36px}
.hero.short{height:560px}
.hero.mood:after{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 45%,rgba(0,0,0,.4))}
.hero.mood .wrap{padding-bottom:60px}
.lk{display:flex;align-items:center;gap:22px;color:#fff}
.lk svg{width:46px;height:38.3px;display:block}
.lk span{font:400 19px/1 'Julius Sans One',sans-serif;letter-spacing:.5em}

/* sections */
.sec{padding:112px 0}
.sec.top{padding-top:72px}
.mist{background:var(--mist)}
.intro{text-align:center;padding:112px 0 72px}
.intro h2,.head h2{font-size:48px;line-height:54px}
.intro p{font-size:18px;color:var(--ink2);margin-top:12px}
.intro .pill{margin-top:32px}
.head{margin-bottom:48px}
.head .caps{color:var(--ink2);margin-bottom:14px}
.head.c{text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.crd{background:#fff}
.ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#222}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crd .tx{padding:28px 28px 34px}
.crd h3{font-size:32px;line-height:36px}
.crd p{color:var(--ink2);font-size:15px;line-height:24px;margin:10px 0 24px;min-height:48px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.post .ph{aspect-ratio:3/2}
.post .it{margin-top:20px}
.post h3{font-size:36px;line-height:40px;margin:4px 0 20px}
.lede{font-size:18px;line-height:30px;color:var(--ink2);max-width:640px}

/* dark band */
.band{background:var(--ink);color:#fff;padding:128px 0;text-align:center}
.band .caps{color:var(--ink3)}
.band h2{font-size:56px;line-height:62px;margin-top:18px}
.band p{color:var(--ink3);margin-top:12px}
.band .pill{margin-top:36px}
.band.left{text-align:left}
.band.left h2{margin:18px 0 56px;font-size:48px;line-height:54px}
.band.left .pill{margin-top:0}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;border-top:1px solid var(--line-d);padding-top:40px;margin-bottom:56px}
.three h3{font-size:28px;line-height:32px;margin-bottom:8px}
.three p{color:var(--ink3);font-size:15px;line-height:24px;margin:0}
.band .quiet{margin-top:18px;font-size:13px;color:rgba(255,255,255,.75)}
.band .quiet a{text-decoration:underline;text-underline-offset:3px}

/* membership */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mem{scroll-margin-top:24px}
.mem .ph{aspect-ratio:3/2}
.mem .caps{color:var(--ink2);margin:28px 0 10px}
.mem h3{font-size:40px;line-height:44px}
.mem p{color:var(--ink2);margin:8px 0 24px}
.app3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;text-align:center}
.phone{width:264px;margin:0 auto;background:var(--ink);border-radius:42px;padding:9px}
.phone img{width:100%;border-radius:34px}
.app3 h3{font-size:28px;line-height:34px;margin:32px auto 0;max-width:300px}

/* enquiry form */
.enq{background:var(--mist);padding:112px 0}
.enq .box{max-width:560px;margin:0 auto}
.enq h1{font-size:56px;line-height:62px;text-align:center}
.enq h2{font-size:34px;line-height:42px;text-align:center}
.enq .sub{text-align:center;font-size:14px;color:var(--ink2);margin-top:10px}
.enq .sub a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.eq{position:relative}
.eq .f2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.eq .ph2{display:grid;grid-template-columns:120px 1fr;gap:28px}
.eq input[type=text],.eq input[type=email],.eq input[type=tel],.eq select,.eq textarea{display:block;width:100%;margin-top:26px;height:42px;padding:14px 0 8px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font-size:15px;line-height:18px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.eq ::placeholder{color:var(--ink2);opacity:1}
.eq select{padding-right:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23191919' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 2px center;cursor:pointer}
.eq select:has(option[value=""]:checked){color:var(--ink2)}
.eq textarea{height:104px;resize:vertical}
.eq input:focus,.eq select:focus,.eq textarea:focus{border-bottom-width:2px;padding-bottom:7px}
.eq [aria-invalid=true]{border-bottom-style:dashed}
.ck{display:flex;gap:12px;font-size:13px;line-height:20px;color:var(--ink2);margin-top:20px;cursor:pointer}
.ck.first{margin-top:32px}
.ck input{flex:none;width:16px;height:16px;margin-top:2px;border:1px solid var(--ink);border-radius:0;background:#fff;-webkit-appearance:none;appearance:none;cursor:pointer}
.ck input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center}
.ck input[aria-invalid=true]{outline:1px dashed var(--ink);outline-offset:2px}
.ck a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.req{font-size:12px;color:var(--ink2);margin-top:12px}
.send{text-align:center;margin-top:36px}
.status{text-align:center;font-size:14px;line-height:22px;margin-top:18px;min-height:22px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Member sign in: the Mukhtar sign in of 1 November 2026 (owner approved),
   the same page in every portal. Every class starts msi- and every rule
   sits under .msi, so nothing here reaches the rest of the site. On the
   website the page sits between the bar and the footer, so the photo is
   held by the section, not the window. */
.msi {
  --msi-ink: #191919;
  --msi-white: #ffffff;
  --msi-ink-2: #6b6b6b;      /* secondary text on white */
  --msi-line: #949494;       /* resting outline: 3:1 on white */
  --msi-icon: #8a8a8a;
  --msi-off: #a3a3a3;        /* switched-off links on white */
  --msi-error: #b42318;
  --msi-shade-top: rgba(25, 25, 25, .62);
  --msi-shade-mid: rgba(25, 25, 25, .42);
  --msi-shade-low: rgba(25, 25, 25, .66);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--msi-ink);
  color: var(--msi-white);
  font-family: Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  color-scheme: light;
}
.msi *, .msi *::before, .msi *::after { box-sizing: border-box; }
.msi [hidden] { display: none !important; }

/* The photo, darkened so the white mark and the line under the card read. */
.msi .msi-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--msi-ink); }
.msi .msi-bg picture { display: contents; }
.msi .msi-bg img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 72%;
  display: block; filter: none; border: 0;
}
.msi .msi-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--msi-shade-top) 0%, var(--msi-shade-mid) 46%, var(--msi-shade-low) 100%);
}

/* The mark sits at the same height on every step, so it does not jump when
   the card grows. The block is placed as if it were about 730 px tall and
   centred, so the tallest step still fits a 900 px screen. */
.msi .msi-page {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  margin: 0;
  padding: max(40px, calc(50vh - 365px)) 16px 32px;
  padding-top: max(40px, calc(50svh - 365px));
}

/* Mark, then the name in wide capitals. */
.msi .msi-brand { display: flex; flex-direction: column; align-items: center; color: var(--msi-white); margin: 0 0 46px; }
.msi .msi-brand svg { width: 66px; height: 55px; display: block; overflow: visible; }
.msi .msi-wm {
  font-family: "Julius Sans One", Arimo, sans-serif;
  font-size: 32px; line-height: 1; letter-spacing: .55em; font-weight: 400;
  margin: 36px -.55em 0 0; padding: 0; /* the last letter's spacing would push the word off centre */
  color: var(--msi-white); text-transform: none;
}

/* The card: white, square, lots of room. */
.msi .msi-card {
  width: min(540px, 100%);
  margin: 0;
  background: var(--msi-white); color: var(--msi-ink);
  padding: 72px 64px 72px;
  text-align: center;
  border: 0; border-radius: 0; box-shadow: none;
  color-scheme: light;
}
.msi .msi-h1 {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: -.005em;
  color: var(--msi-ink); text-transform: none;
  margin: 0 0 50px; padding: 0;
}
.msi .msi-h1 + .msi-sub { margin-top: -28px; }
.msi .msi-sub { font-size: 14px; line-height: 1.55; color: var(--msi-ink-2); margin: 0 auto 32px; padding: 0; max-width: 340px; }
.msi .msi-sub b { color: var(--msi-ink); font-weight: 500; overflow-wrap: anywhere; }

.msi .msi-form { width: min(320px, 100%); margin: 0 auto; padding: 0; text-align: left; }

/* Pill fields with a small grey icon inside on the left. */
.msi .msi-field { position: relative; margin: 0 0 18px; padding: 0; }
.msi .msi-field .msi-ic { position: absolute; left: 18px; top: 13px; width: 16px; height: 16px; color: var(--msi-icon); pointer-events: none; }
.msi .msi-input {
  display: block; width: 100%; height: 42px; margin: 0;
  border: 1px solid var(--msi-line); border-radius: 999px;
  padding: 0 18px 0 44px;
  font: 400 14px/1 Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: normal; text-transform: none;
  color: var(--msi-ink); background: var(--msi-white);
  outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.msi .msi-input::placeholder { color: #757575; opacity: 1; text-transform: none; letter-spacing: normal; }
.msi .msi-input:focus, .msi .msi-input:focus-visible { border-color: var(--msi-ink); box-shadow: 0 0 0 1px var(--msi-ink); outline: none; }
.msi .msi-input[readonly], .msi .msi-input:disabled { color: var(--msi-ink-2); opacity: 1; -webkit-text-fill-color: var(--msi-ink-2); }
.msi .msi-field.msi-has-eye .msi-input { padding-right: 48px; }
.msi .msi-input[aria-invalid="true"] { border-color: var(--msi-error); box-shadow: 0 0 0 1px var(--msi-error); }
.msi .msi-eye {
  position: absolute; right: 4px; top: 3px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; margin: 0; padding: 0;
  border: 0; background: none; color: var(--msi-icon); cursor: pointer; opacity: 1;
}
.msi .msi-eye svg { width: 17px; height: 17px; }
.msi .msi-eye:hover { color: var(--msi-ink); }
.msi .msi-eye:focus { outline: none; }
.msi .msi-eye:focus-visible { outline: 2px solid var(--msi-ink); outline-offset: 0; }

.msi .msi-err { color: var(--msi-error); font-size: 13px; line-height: 1.45; margin: -10px 20px 18px; padding: 0; text-align: left; }
.msi .msi-err.msi-center { text-align: center; margin: 18px 0 0; }

.msi .msi-aside { display: flex; justify-content: flex-end; margin: -8px 4px 0; }
.msi .msi-quiet {
  font: 400 13px/1.4 Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: normal; text-transform: none;
  color: var(--msi-ink-2);
  background: none; border: 0; margin: 0; padding: 4px 0; cursor: pointer; text-decoration: none; opacity: 1;
}
.msi .msi-quiet:hover { color: var(--msi-ink); text-decoration: underline; text-underline-offset: 3px; }
.msi .msi-quiet:focus { outline: none; }
.msi .msi-quiet:focus-visible { outline: 2px solid var(--msi-ink); outline-offset: 2px; border-radius: 2px; }
.msi .msi-quiet:disabled { color: var(--msi-off); cursor: default; text-decoration: none; opacity: 1; }
.msi .msi-quiet.msi-inline { text-decoration: underline; text-underline-offset: 3px; padding: 0; }

/* The black pill. */
.msi .msi-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 116px; height: 40px; padding: 0 30px; margin: 32px auto 0;
  border: 0; border-radius: 999px; background: var(--msi-ink); color: var(--msi-white);
  font: 500 14px/1 Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: normal; text-transform: none;
  cursor: pointer; opacity: 1; box-shadow: none; -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.msi .msi-btn:hover { background: #000; }
.msi .msi-btn:focus { outline: none; }
.msi .msi-btn:focus-visible { outline: 2px solid var(--msi-ink); outline-offset: 3px; }
.msi .msi-btn[aria-busy="true"] { cursor: progress; background: var(--msi-ink); color: var(--msi-white); }
/* Some portals keep the button switched off until the field has something
   in it (Partner email, Books forgot and new password). */
.msi .msi-btn:disabled:not([aria-busy="true"]) { background: #e3e3e3; color: #6b6b6b; cursor: default; }
.msi .msi-spin {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: msi-spin .8s linear infinite; flex: none;
}
.msi .msi-spin.msi-dark { border-color: rgba(25, 25, 25, .18); border-top-color: var(--msi-ink); }
@keyframes msi-spin { to { transform: rotate(360deg); } }

.msi .msi-note { font-size: 13px; line-height: 1.5; color: var(--msi-ink-2); text-align: center; margin: 22px 0 0; padding: 0; }
.msi .msi-note .msi-t, .msi .msi-quiet .msi-t { font-variant-numeric: tabular-nums; }
.msi .msi-note .msi-t { color: var(--msi-ink); }

/* Six round boxes for the code. */
.msi .msi-otp { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.msi .msi-otp input, .msi .msi-otp .msi-box {
  flex: 0 1 46px; min-width: 0; width: 46px; height: auto; aspect-ratio: 1 / 1; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--msi-line); background: var(--msi-white); color: var(--msi-ink);
  text-align: center; font: 500 20px/1 Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
  outline: none; box-shadow: none; caret-color: var(--msi-ink); opacity: 1; -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.msi .msi-otp input:not(:placeholder-shown), .msi .msi-otp .msi-box.msi-filled { border-color: var(--msi-ink); }
.msi .msi-otp input:focus, .msi .msi-otp .msi-box.msi-on { border-color: var(--msi-ink); box-shadow: 0 0 0 1px var(--msi-ink); }
.msi .msi-otp[data-bad="true"] input, .msi .msi-otp[data-bad="true"] .msi-box { border-color: var(--msi-error); }
.msi .msi-otp[data-bad="true"] input:focus, .msi .msi-otp[data-bad="true"] .msi-box.msi-on { box-shadow: 0 0 0 1px var(--msi-error); }
.msi .msi-otp input[readonly], .msi .msi-otp input:disabled, .msi .msi-otp .msi-box.msi-off {
  color: var(--msi-ink-2); -webkit-text-fill-color: var(--msi-ink-2); border-color: var(--msi-line); box-shadow: none; background: var(--msi-white);
}
/* The Corporate Portal draws the six boxes over one real input. */
.msi .msi-code { position: relative; }
.msi .msi-code .msi-otp .msi-box { display: grid; place-items: center; }
.msi .msi-code-input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: transparent; -webkit-text-fill-color: transparent;
  caret-color: transparent; font-size: 16px; letter-spacing: 0; opacity: 0; outline: none; box-shadow: none;
  cursor: text;
}
.msi .msi-code-input:disabled { cursor: default; }
.msi .msi-caret { display: block; width: 1.5px; height: 22px; background: var(--msi-ink); animation: msi-blink 1.1s steps(1) infinite; }
@keyframes msi-blink { 50% { opacity: 0; } }

.msi .msi-checking:empty { display: none; }
.msi .msi-checking { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--msi-ink-2); margin: 20px 0 0; min-height: 19px; }
.msi .msi-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin: 26px 0 0; padding: 0; }

.msi .msi-meter { display: flex; gap: 6px; margin: -8px 20px 18px; }
.msi .msi-meter span { flex: 1; height: 3px; border-radius: 3px; background: #e5e5e5; }
.msi .msi-meter span.msi-on { background: var(--msi-ink); }

.msi .msi-done-ic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--msi-ink); display: grid; place-items: center; margin: 0 auto 26px; color: var(--msi-ink); }
.msi .msi-done-ic svg { width: 20px; height: 20px; }

/* One small white line under the card. */
.msi .msi-below { margin: 36px 0 0; padding: 0; font: 500 13px/1.5 Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--msi-white); text-align: center; letter-spacing: .01em; }
.msi .msi-below a { color: var(--msi-white); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.msi .msi-below a:focus { outline: none; }
.msi .msi-below a:focus-visible { outline: 2px solid var(--msi-white); outline-offset: 3px; }

.msi .msi-sub, .msi .msi-err, .msi .msi-note, .msi .msi-below { text-wrap: balance; }
.msi .msi-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.msi .msi-card > * { animation: msi-rise .2s ease-out both; }
@keyframes msi-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Phones: same moment, closer in. Fields and button are bigger to the
   thumb, and the typing is 16 px so the phone does not zoom in on it. */
@media (max-width: 600px) {
  .msi .msi-page { padding: max(36px, calc(50vh - 360px)) 16px 28px; padding-top: max(36px, calc(50svh - 360px)); }
  .msi .msi-brand { margin-bottom: 32px; }
  .msi .msi-brand svg { width: 50px; height: 42px; }
  .msi .msi-wm { font-size: 22px; margin-top: 24px; }
  .msi .msi-card { padding: 44px 24px 40px; }
  .msi .msi-h1 { font-size: 31px; margin-bottom: 30px; }
  .msi .msi-h1 + .msi-sub { margin-top: -16px; }
  .msi .msi-sub { margin-bottom: 26px; }
  .msi .msi-form { width: 100%; }
  .msi .msi-field .msi-ic { top: 15px; }
  .msi .msi-input { height: 46px; font-size: 16px; }
  .msi .msi-eye { top: 5px; }
  .msi .msi-btn { width: 100%; height: 46px; font-size: 15px; margin-top: 28px; }
  .msi .msi-otp { gap: 8px; }
  .msi .msi-otp input, .msi .msi-otp .msi-box { flex-basis: 44px; width: 44px; font-size: 18px; }
  .msi .msi-below { margin-top: 26px; }
}
@media (max-width: 359.98px) { .msi .msi-otp { gap: 6px; } }
@media (max-height: 880px) and (min-width: 601px) {
  .msi .msi-page { padding-top: 32px; padding-bottom: 28px; }
  .msi .msi-brand { margin-bottom: 30px; }
  .msi .msi-brand svg { width: 56px; height: 47px; }
  .msi .msi-wm { margin-top: 26px; font-size: 27px; }
  .msi .msi-card { padding-top: 48px; padding-bottom: 46px; }
  .msi .msi-h1 { font-size: 37px; margin-bottom: 34px; }
  .msi .msi-h1 + .msi-sub { margin-top: -18px; }
  .msi .msi-sub { margin-bottom: 26px; }
  .msi .msi-btn { margin-top: 26px; }
  .msi .msi-note { margin-top: 18px; }
  .msi .msi-links { margin-top: 20px; }
  .msi .msi-below { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .msi .msi-card > * { animation: none; }
  .msi .msi-spin { animation-duration: 2s; }
  .msi .msi-caret { animation: none; }
}

/* The website: between the bar and the footer. */
.si.msi{min-height:0;overflow:hidden}
.si.msi .msi-bg{position:absolute}
.si.msi .msi-page{min-height:0;padding:88px 16px 112px}
@media (max-width: 600px){.si.msi .msi-page{padding:56px 16px 64px}}

/* page openers without a photograph */
.plain{padding:112px 0 32px}
.plain h1{font-size:64px;line-height:68px}
.plain .lede{margin-top:16px}

/* about */
.founders img{width:100%;height:auto}
.founders p{font:400 26px/34px var(--serif);max-width:820px;margin-bottom:40px}
.links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:40px;font-size:15px}
.links a{text-decoration:underline;text-underline-offset:3px}

/* contact */
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;border-top:1px solid var(--line);padding-top:40px}
.reach h2{font-size:28px;line-height:32px;margin-bottom:8px}
.reach p{color:var(--ink2);font-size:15px;line-height:24px;margin-bottom:16px}
.reach a.u{font-size:15px}

/* legal pages */
.doc{max-width:760px;padding:96px 0 112px}
.doc h1{font-size:56px;line-height:62px}
.doc .meta{color:var(--ink2);font-size:14px;line-height:22px;margin:12px 0 32px}
.doc h2{font-size:30px;line-height:36px;margin:48px 0 4px}
.doc h3{font-size:22px;line-height:28px;margin:28px 0 0}
.doc p,.doc li{color:#333;margin-top:12px}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin-top:8px}
.doc a{text-decoration:underline;text-underline-offset:3px}

/* Kickstart */
.ks h1{font-size:76px;line-height:80px}
.ks-x{font-weight:300;font-size:.8em;opacity:.85}
.ks-x~.hl{color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{font-size:48px;line-height:54px}
.split .lede{margin-top:16px}
.ks-logo{display:flex;align-items:center;gap:20px;margin-top:32px;font-size:13px;color:var(--ink2)}
.ks-logo img{width:180px;height:auto;background:#fff;padding:12px 16px;border:1px solid var(--line)}
.split figure img{width:100%;height:auto}
.split figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:14px;color:var(--ink2)}
.split figcaption a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--ink);padding-top:32px}
.facts h3{font-size:26px;line-height:30px;margin-bottom:8px}
.facts p{color:var(--ink2);font-size:15px;line-height:24px}
.ups{list-style:none;border-top:1px solid var(--line)}
.ups li{display:grid;grid-template-columns:120px 1fr 240px;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.ups .st{font:500 11px/16px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.ups h3{font-size:28px;line-height:32px}
.ups p{color:var(--ink2);margin-top:4px}
.ups li>div a{display:inline-block;margin-top:8px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.ups .th img{width:100%;aspect-ratio:5/3;object-fit:cover}
.gal{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal li.wide{grid-column:span 4}
.gal a{display:block;position:relative;overflow:hidden;background:#222}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:opacity .2s}
.gal li.wide img{aspect-ratio:5/2}
.gal a:hover img{opacity:.9}
.gal .cap{display:block;font-size:13px;color:var(--ink2);margin-top:8px}
.gal figure{margin:0}
.more{margin-top:32px;color:var(--ink2);font-size:14px}

/* the floating "Make an enquiry" pill (2.0.1): at the bottom right of
   every page but enquire and sign in. It sits in a line just above the
   footer and is sticky, so it rides the bottom of the screen and stops
   above the footer instead of covering its links. */
.enqf{position:sticky;bottom:8px;z-index:30;height:0;display:flex;justify-content:flex-end;padding:0 24px;pointer-events:none}
.enqf .pill{pointer-events:auto;transform:translateY(calc(-100% - 16px));box-shadow:0 0 0 1px rgba(255,255,255,.5),0 8px 24px rgba(0,0,0,.2)}

/* footer */
.ftr{background:var(--ink);color:#fff;padding:80px 0 36px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px}
.fgrid h2{font:500 11px/16px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-bottom:18px}
.fgrid a{display:block;font-size:14px;line-height:20px;margin-bottom:12px}
.fb svg{height:34px;width:auto;display:block}
.fb p{color:var(--ink3);font-size:14px;line-height:22px;margin-top:24px;max-width:260px}
.fb .line{color:#fff;font:400 18px/26px var(--serif)}.fb .line em{display:block;color:var(--ink3)}
.hero .tl{margin-top:36px}
.si+.ftr,.band+.ftr{border-top:1px solid var(--line-d)}
.fbot{border-top:1px solid var(--line-d);margin-top:56px;padding-top:24px;font-size:12px;color:var(--ink3)}

@media (max-width:1100px){
  .hdr{height:64px}.hdr .bar{padding:0 24px}
  .nav,.right{display:none}
  .burger{display:flex}
  .hdr .brand svg{width:32px;height:26.7px}
}
@media (max-width:760px){
  :root{--g:24px}
  body{font-size:15px;line-height:24px}
  .hero{height:600px}.hero.short{height:480px}
  .hero .wrap{padding-bottom:48px}
  .hero h1,.ks h1{font-size:44px;line-height:48px}
  .hero .sub{font-size:22px;line-height:28px}
  .hero .pill{margin-top:28px}
  .hero.mood .wrap{padding-bottom:40px}
  .lk{gap:16px}.lk svg{width:34px;height:28.3px}.lk span{font-size:15px}
  .sec{padding:72px 0}.sec.top{padding-top:48px}
  .intro{padding:72px 0 40px}
  .intro h2,.head h2,.split h2{font-size:34px;line-height:40px}
  .intro p,.lede{font-size:16px;line-height:26px}
  .head{margin-bottom:32px}
  .cards,.duo,.two,.app3,.three,.split,.reach{grid-template-columns:1fr}
  .cards{gap:20px}.duo,.two,.split,.reach{gap:48px}.app3{gap:56px}
  .crd .tx{padding:24px 22px 28px}.crd h3{font-size:28px;line-height:32px}.crd p{min-height:0}
  .post h3{font-size:30px;line-height:34px}
  .mem h3{font-size:32px;line-height:36px}
  .phone{width:236px}
  .app3 h3{font-size:24px;line-height:30px;margin-top:24px}
  .band{padding:80px 0}
  .band h2{font-size:36px;line-height:42px}
  .band.left h2{font-size:34px;line-height:40px;margin-bottom:40px}
  .three{gap:28px;padding-top:32px;margin-bottom:40px}
  .three h3{font-size:24px;line-height:28px}
  .enq{padding:72px 0}
  .enq h1{font-size:40px;line-height:46px}
  .enq h2{font-size:28px;line-height:34px}
  .eq .ph2{grid-template-columns:96px 1fr;gap:20px}.eq .f2{gap:20px}
  .send .pill{width:100%}
  .plain{padding:72px 0 16px}.plain h1{font-size:44px;line-height:48px}
  .founders p{font-size:22px;line-height:30px}
  .doc{padding:64px 0 80px}.doc h1{font-size:40px;line-height:46px}.doc h2{font-size:26px;line-height:32px}
  .facts{grid-template-columns:1fr 1fr;gap:28px}
  .ups li{grid-template-columns:1fr;gap:12px}
  .gal{grid-template-columns:1fr 1fr}.gal li.wide{grid-column:span 2}.gal li.wide img{aspect-ratio:3/2}
  .ftr{padding:56px 0 32px}
  .fgrid{grid-template-columns:1fr 1fr;gap:8px 24px}
  .fb{grid-column:1/3;margin-bottom:32px}
  .fgrid>div:not(.fb){margin-bottom:24px}
  .fbot{margin-top:24px}
  .enqf{padding:0 16px;bottom:0}
  .enqf .pill{height:36px;padding:0 16px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .pill,.pill:before,.drop,.nl{transition:none}
  .menu:not([hidden]){animation:none}
}