@font-face { font-family: Plex; font-weight: 400; font-display: swap; src: url(/shared/fonts/IBMPlexSans-Regular.woff2) format("woff2"); }
@font-face { font-family: Plex; font-weight: 500; font-display: swap; src: url(/shared/fonts/IBMPlexSans-Medium.woff2) format("woff2"); }
@font-face { font-family: PlexMono; font-weight: 400; font-display: swap; src: url(/shared/fonts/IBMPlexMono-Regular.woff2) format("woff2"); }
/* Arabic appears only inside the demonstrations, so its font is fetched only when those letters are drawn */
@font-face { font-family: Kufi; font-weight: 100 900; font-display: swap; src: url(/shared/fonts/NotoKufiArabic-VF.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
/* The home page built on the generated pictures and films. Pictures and plain type; nothing drawn but the brand's own rows and icons. White ground, navy, Plex at Regular with size carrying
   the hierarchy, soft corners, no rules or borders, no small labels above headings. Motion is limited to how
   things arrive (words and photographs settle into place) and to the reader's own scroll and pointer. */
:root {
  --navy: #001f51; --deep: #00163c; --copper: #be6a02; --slate: #5b6b85; --ink: #2b3b57; --white: #ffffff;
  --mist: #eef2f8; --mist2: #e3e9f3; --lift: #102c5c; --n60: #667997; --n40: #99a5b9; --n20: #ccd2dc; --n12: #e0e4ea;
  --side: 20px; --section: 64px; --bar: 64px; --r: 20px;
  /* The brand's type scale, from the guideline: "Six sizes. Nothing in between." 62 / 42 / 24 / 18 / 14 / 11, all
     in Regular. Title, Heading and Subheading step down on narrower screens, as on the live site; Lead, Body and
     Caption never change. */
  --t-title: 40px; --t-head: 30px; --t-sub: 22px; --t-lead: 18px; --t-body: 14px; --t-cap: 11px;
  --ease: cubic-bezier(.2, .7, .2, 1); --out: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 30px 70px rgba(0, 31, 81, .14), 0 6px 16px rgba(0, 31, 81, .05);
  --soft: 0 14px 36px rgba(0, 31, 81, .09);
}
@media (min-width: 720px) { :root { --side: 44px; --section: 96px; --r: 24px; --t-title: 54px; --t-head: 36px; --t-sub: 24px; } }
@media (min-width: 1100px) { :root { --side: 88px; --section: 128px; --bar: 76px; --r: 28px; --t-title: 62px; --t-head: 42px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The page itself keeps a chosen row still while its neighbours open and close (see the script), so the browser's own
   scroll anchoring is switched off: with both at work the row drifted. Every picture has its space reserved, so
   nothing else on the page shifts as it loads. */
html { background: #ffffff; -webkit-text-size-adjust: 100%; overflow-anchor: none; }
body { font: 400 var(--t-body)/1.7 Plex, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
h1, h2, h3, b { font-weight: 400; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); border-radius: 12px; }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--side); }
.mono { font-family: PlexMono, ui-monospace, monospace; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; }
.skip:focus { left: 8px; }
.ico { width: 24px; height: 24px; flex: 0 0 auto; }
.ico.back { transform: scaleX(-1); }
::selection { background: var(--navy); color: #ffffff; }

/* type: one weight, size does the work */
.h1 { font-size: var(--t-title); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.h2 { font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; color: var(--navy); text-wrap: balance; }
.h3 { font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.lede { margin-top: 16px; max-width: 560px; font-size: var(--t-lead); line-height: 1.6; color: var(--ink); }
/* Paragraphs are set justified, as in the brand's documents. Hyphenation keeps the spaces between words even on short
   lines; a word is only broken when it is long, and never close to either end. */
.lede, .hero-sub, .open-lead, .row-tx p, .step-b, .wc-p, .svc-l, .svc-b, .svc-e, .xr-lead, .xr-steps p, .pair-tx p, .mv-p, .val-p, .fd-bio, .doc p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 9 4 4; }
@media (max-width: 719px) { .lede, .hero-sub, .open-lead, .row-tx p, .step-b, .wc-p, .svc-l, .svc-b, .svc-e, .xr-lead, .xr-steps p, .pair-tx p, .mv-p, .val-p, .fd-bio, .doc p { hyphenate-limit-chars: 6 3 3; } }
/* the large opening statement stays ragged: at that size justified lines open wide gaps between the words */

/* buttons: soft corners, never capsules */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px;
  background: var(--navy); color: #ffffff; font: 500 var(--t-body)/1 Plex, sans-serif; white-space: nowrap; transition: transform .4s var(--out), box-shadow .4s var(--out), background .4s, color .4s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lift); transform: translateY(101%); transition: transform .5s var(--out); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 31, 81, .22); }
.btn:hover::after { transform: none; }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
.btn .ico { width: 18px; height: 18px; transition: transform .4s var(--out); }
.btn:hover .ico:not(.wa) { transform: translateX(4px); }
.btn.alt { background: var(--mist); color: var(--navy); } .btn.alt::after { background: var(--mist2); }
.btn.light { background: #ffffff; color: var(--navy); } .btn.light::after { background: var(--mist); }
.btn.glass { background: rgba(255, 255, 255, .14); color: #ffffff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn.glass::after { background: rgba(255, 255, 255, .14); }
.btn.sm { height: 42px; padding: 0 18px; border-radius: 12px; }
.btn:disabled { background: var(--n12); color: var(--n60); cursor: default; transform: none; box-shadow: none; }
.btn:disabled::after { display: none; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* things arrive quietly */
html.js .rv { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--out), transform 1.1s var(--out); }
html.js .rv.in { opacity: 1; transform: none; }
/* a heading arrives word by word, each rising from behind its own line */
html.js .rise .wd > span { transform: translateY(112%); transition: transform 1.1s var(--out); transition-delay: calc(var(--i) * 50ms); }
html.js .rise.in .wd > span { transform: none; }
/* a picture that may come alive: the still is always there, and its film is laid over it and fades in once it plays */
.m { position: relative; overflow: hidden; background: var(--mist); }
.m-in { position: absolute; inset: 0; }
.m-in img, .m-in video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-in img { transition: transform 1.8s var(--out); }
/* a film is shown a hair larger than its frame, so the thin dark edge that slowing a film can leave is never seen */
.m-in video { opacity: 0; transform: scale(1.03); transition: opacity 1.2s var(--ease), transform 1.8s var(--out); }
.m-in video.on { opacity: 1; }
.ph { border-radius: var(--r); }
html.js .ph[data-reveal] { clip-path: inset(9% 7% 9% 7% round var(--r)); transition: clip-path 1.5s var(--out); }
html.js .ph[data-reveal].in { clip-path: inset(0 round var(--r)); }
/* a picture is unveiled from its top edge down, and settles from slightly large to its true size as it appears */
html.js .unveil { clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path 1.5s var(--out); }
html.js .unveil.in { clip-path: inset(0 0 0 0 round var(--r)); }
html.js .unveil.in .m-in img { animation: settle 2s var(--out) backwards; }
@keyframes settle { from { transform: scale(1.18); } }
/* taller than its frame, so it can drift a little slower than the page (the script moves it) */
.par .m-in { top: -8%; bottom: -8%; }
/* resting the pointer on a picture, or on the block it belongs to, brings it a little closer */
@media (hover: hover) {
  .zoom:hover .m-in img, .wc:hover .zoom .m-in img, .svc:hover .zoom .m-in img, .mv-card:hover .zoom .m-in img, .step:hover .zoom .m-in img, .pair-grid:hover .zoom .m-in img { transform: scale(1.05); }
  .zoom:hover .m-in video, .wc:hover .zoom .m-in video, .svc:hover .zoom .m-in video, .mv-card:hover .zoom .m-in video, .step:hover .zoom .m-in video { transform: scale(1.08); }
}

/* ---------------------------------------------------------------- header: white over the film, a white bar after it */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; transition: transform .5s var(--out); view-transition-name: site-bar; }
.top::before { content: ""; position: absolute; inset: 8px max(8px, calc(var(--side) - 22px)); z-index: -1; border-radius: 20px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.3) blur(22px); backdrop-filter: saturate(1.3) blur(22px);
  box-shadow: 0 14px 36px rgba(0, 31, 81, .1); opacity: 0; transform: scale(.985); transition: opacity .4s var(--ease), transform .6s var(--out); }
.top.scrolled::before { opacity: 1; transform: none; }
.top.away { transform: translateY(-100%); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: var(--bar); }
.brand { position: relative; display: inline-flex; }
.brand .lockup { height: 36px; width: auto; }      /* a fifth larger, at his word (9 October) */
@media (min-width: 1100px) { .brand .lockup { height: 43px; } }
.lk-day { display: inline-flex; transition: opacity .4s; }
.lk-night { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.nav { display: none; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a:not(.btn) { padding: 10px 16px; border-radius: 12px; font-size: var(--t-body); color: var(--navy); transition: background .3s, color .4s; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { background: var(--mist); }
.top.over .nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
.nav .btn { margin-inline-start: 14px; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-inline-start: auto; margin-inline-end: -12px; border-radius: 14px; color: var(--navy); transition: color .4s; }
@media (min-width: 1100px) { .nav { display: flex; } .menu-btn { display: none; } }
.top.over .lk-day { opacity: 0; } .top.over .lk-night { opacity: 1; }
.top.over .nav a:not(.btn), .top.over .menu-btn { color: #ffffff; }
.top.over .nav a:not(.btn):hover { background: rgba(255, 255, 255, .14); }
.top.over .nav .btn { background: #ffffff; color: var(--navy); } .top.over .nav .btn::after { background: var(--mist); }
.sheet { position: fixed; inset: 0; z-index: 50; background: #ffffff; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.sheet.open { opacity: 1; visibility: visible; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; height: var(--bar); }
.sheet-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sheet-nav a { font-size: var(--t-head); letter-spacing: -.015em; color: var(--navy); padding: 8px 0; }
.sheet-foot { padding-bottom: 32px; } .sheet-foot .btn { width: 100%; }

/* ---------------------------------------------------------------- the first screen: the office floor at dusk with one lamp on, and one sentence */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; color: #ffffff; background: var(--deep); }
.hero-media { position: absolute; inset: 0; background: var(--deep); }
/* The picture: a very large office at dusk with one screen still at work, to the right of centre. On a screen
   wider than it is tall the picture is shown closer than it was taken (see .hero-pic), so the desk and its lit
   screen are a subject of the picture and not a detail of it; the screen sits to the right of the headline, above
   the buttons. On an upright screen the picture is as tall as the screen and slid across until the monitor and its
   lamps sit in the middle, lifted so they are above the headline; below, it fades into the page's own navy. */
.hero-media > .m-in { inset: 0; }
/* The photograph keeps its own shape and is shown at about one and a half times the size that would just cover the
   screen (11 October: at the covering size the monitor was 250 pixels wide on a laptop and nothing on it could look
   good). It is held by the desk: the point 76% across and 56% down the picture, between the monitor and its lamps,
   sits 74% across and 44% down the screen, so the room's long rows and far windows stay to the left of it. Because
   the picture keeps its shape, the monitor's film is placed on it by shares of the picture and stays exactly on the
   monitor at every screen size. 277.7 = 179.17 (the picture's width for a given height) x 1.55. */
.hero-pic { position: absolute; top: 44%; left: 74%; width: max(155%, 277.7vh, 1722px); width: max(155%, 277.7svh, 1722px); aspect-ratio: 2752 / 1536; transform: translate(-76%, -56%); }
/* the monitor's film: the screen, its frame and the light round it, feathered into the photograph beneath */
.hero-screen { position: absolute; background: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
.hero-screen .m-in video { transform: none; transition: opacity .6s var(--ease); }
@media (orientation: portrait) {
  .hero-media > .m-in { inset: auto; left: 0; top: -29%; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%); mask-image: linear-gradient(to bottom, #000 74%, transparent 99%); }
  /* upright, the picture is as tall as the screen and is slid across until the monitor and its lamps sit in the middle */
  .hero-pic { top: 0; left: 50%; width: auto; height: 100%; transform: translateX(-76.3%); }
}
/* a little darker at the top for the menu and at the foot for the words; the lamp and the coast lights stay clear */
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 16, 46, .5) 0%, rgba(0, 16, 46, .06) 24%, rgba(0, 16, 46, .1) 46%, rgba(0, 16, 46, .8) 100%); }
.hero-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(36px, 7vh, 80px); }
.hero .h1 { max-width: 15.5em; }
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.wd > span { display: inline-block; }
html.js .hero:not(.go) .wd > span { transform: translateY(110%); }
html.js .hero.go .wd > span { animation: rise 1.1s var(--out) both; animation-delay: calc(var(--i) * 45ms + 150ms); }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
.hero-row { display: grid; gap: 24px; margin-top: clamp(24px, 4vh, 44px); }
.hero-sub { max-width: 620px; font-size: var(--t-lead); line-height: 1.6; color: rgba(255, 255, 255, .9); }
html.js .hero:not(.go) .hero-row { opacity: 0; }
html.js .hero.go .hero-row { animation: fadeup 1.1s var(--out) .75s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 559px) { .hero .btns .btn { flex: 1 1 100%; } }
@media (min-width: 1000px) { .hero-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ---------------------------------------------------------------- who we are, in three sentences, and where */
.intro { padding-top: clamp(20px, 3vh, 40px); }
/* one large picture, and the statement on a sheet of frosted glass laid over its quieter half */
.intro-panel { position: relative; border-radius: var(--r); overflow: hidden; background: var(--mist); }
.intro-ph { aspect-ratio: 4 / 3; }
.intro-ph img { object-position: 78% 50%; }
.intro-glass { position: relative; margin: -72px 12px 12px; padding: 26px 24px 28px; border-radius: calc(var(--r) - 8px); background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }
.say { font-size: var(--t-head); line-height: 1.2; letter-spacing: -.015em; color: var(--navy); }
.intro-more { margin-top: 24px; }
@media (min-width: 1000px) {
  .intro-panel { display: flex; align-items: center; min-height: min(86vh, 780px); padding: 16px; }
  .intro-ph { position: absolute; inset: 0; aspect-ratio: auto; }
  .intro-glass { margin: 0; width: min(640px, 54%); padding: clamp(32px, 3.6vw, 56px); border-radius: calc(var(--r) - 10px); }
  .intro-more { margin-top: 32px; }
}
.ph.wide { margin-top: clamp(48px, 8vh, 104px); aspect-ratio: 4 / 3; }
@media (min-width: 720px) { .ph.wide { aspect-ratio: 21 / 10; } }

/* ---------------------------------------------------------------- what we build: an index of rows; a row opens to its words and its photograph */
.idx { padding-top: var(--section); }
.idx-list { display: grid; gap: 8px; margin-top: clamp(36px, 6vh, 72px); overflow-anchor: none; }
.row { border-radius: var(--r); background: #ffffff; transition: background .6s var(--ease); }
.row.open { background: var(--mist); }
.row-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; width: 100%; padding: 22px 22px; border-radius: var(--r); text-align: start; }
.row-n { display: flex; align-items: center; gap: .34em; font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; color: var(--n40); transition: color .45s var(--ease), transform .7s var(--out); }
/* the brand's own icon for the service, drawn at the weight of the letters beside it */
.row-n .ico { width: .6em; height: .6em; flex: 0 0 auto; }
.row-l { grid-column: 1; font-size: var(--t-lead); line-height: 1.5; color: var(--slate); }
.row-i { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--mist); color: var(--navy); transition: transform .6s var(--out), background .4s, color .4s; }
.row.open .row-n { color: var(--navy); }
.row.open .row-i { transform: rotate(90deg); background: var(--navy); color: #ffffff; }
@media (hover: hover) { .row:not(.open) .row-b:hover .row-n { color: var(--navy); transform: translateX(14px); } }
.row-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--out); }
.row.open .row-more { grid-template-rows: 1fr; }
.row-in { min-height: 0; overflow: hidden; display: grid; gap: 24px; padding: 0 22px; opacity: 0; transition: opacity .6s var(--ease), padding .8s var(--out); }
.row.open .row-in { opacity: 1; padding-bottom: 24px; }
/* the description and the note under it share one size; the note is told apart by weight, its opening words in Medium */
.row-tx { max-width: 480px; font-size: var(--t-lead); line-height: 1.6; }
.row-tx p + p { margin-top: 14px; }
.note b { font-weight: 500; color: var(--navy); }
.row-ph { aspect-ratio: 16 / 10; border-radius: calc(var(--r) - 8px); background: var(--n12); }
/* each picture is held on the part that matters (its --focus), so a shallow cut still shows the subject */
.row-ph img, .row-ph video { object-position: var(--focus, 50% 50%); }
.row-ph .m-in { transform: scale(1.12); transition: transform 1.6s var(--out); }
.row.open .row-ph .m-in { transform: none; }
@media (min-width: 1000px) {
  .row-b { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto; gap: 24px; padding: 24px 36px; }
  .row-l { grid-column: 2; } .row-i { grid-column: 3; }
  /* the words start directly under the row's name; the picture takes exactly their height, so the open row fits
     on the screen and nothing is left empty between the name and the words */
  .row-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: stretch; padding-inline: 36px; }
  .row-ph { aspect-ratio: auto; min-height: 200px; }
  .row.open .row-in { padding-bottom: 36px; }
}

/* ---------------------------------------------------------------- how it works: three steps; on a wide screen the page moves sideways through them */
.how { padding-top: var(--section); }
/* beside the heading, a still field of the brand's rows: the pattern, on white, next to the pictures and never on them */
.how-head { display: grid; gap: 28px; align-items: end; }
.how-rows { display: none; }
.how-rows svg { display: block; width: 100%; height: auto; }
@media (min-width: 1000px) { .how-head { grid-template-columns: minmax(0, 1fr) minmax(0, 34vw); } .how-rows { display: block; } }
.how-track { display: grid; gap: 12px; margin-top: clamp(36px, 6vh, 64px); padding-inline: var(--side); }
.step { display: grid; border-radius: var(--r); background: var(--mist); overflow: hidden; }
.step-tx { padding: 30px 24px 34px; }
.step-n { font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; color: var(--navy); white-space: nowrap; }
.step-n .num { margin-inline-end: .22em; color: var(--n40); }
.step-p { margin-top: 16px; font-size: var(--t-lead); color: var(--navy); }
.step-b { margin-top: 8px; max-width: 380px; font-size: var(--t-body); line-height: 1.7; }
.step-ph { order: -1; aspect-ratio: 16 / 10; }
.st3 { background: var(--navy); }
.st3 .step-n, .st3 .step-p { color: #ffffff; } .st3 .step-n .num { color: rgba(255, 255, 255, .45); } .st3 .step-b { color: rgba(255, 255, 255, .84); }
@media (min-width: 1000px) {
  .how-pinned .how-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--bar); overflow: hidden; }
  .how-pinned .how-track { display: flex; width: max-content; will-change: transform; }
  .step { flex: 0 0 auto; grid-template-columns: clamp(300px, 26vw, 420px) minmax(0, 1fr); height: min(58vh, 580px); }
  /* held to the screen, the steps centre themselves in it, which already leaves room above the heading */
  .how.how-pinned { padding-top: 0; }
  .step-tx { display: flex; flex-direction: column; padding: 32px 36px; }
  .step-p { margin-top: auto; padding-top: 20px; }
  .step-ph { order: 0; aspect-ratio: auto; margin: 14px; border-radius: calc(var(--r) - 12px); }
  /* to scale: a short review, a longer build, and a third step that runs off the screen */
  .st1 { width: 62vw; } .st2 { width: 78vw; } .st3 { width: 150vw; }
  .how:not(.how-pinned) .how-track { grid-template-columns: 1fr; } .how:not(.how-pinned) .step { width: auto; }
}

/* ---------------------------------------------------------------- why organisations choose Codebay: three reasons, each under a tall picture */
.why { padding-top: var(--section); }
.why-cols { display: grid; gap: 48px; margin-top: clamp(36px, 6vh, 72px); }
html.js .wc.rv { transition-delay: calc(var(--d) * 120ms); }
.wc-ph { aspect-ratio: 16 / 11; border-radius: var(--r); }
.wc-ph img, .wc-ph video { object-position: var(--focus, 50% 50%); }
.wc-h { margin-top: 20px; font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.005em; color: var(--navy); }
.wc-p { margin-top: 8px; max-width: 360px; font-size: var(--t-body); line-height: 1.7; }
@media (min-width: 1000px) {
  .why-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 36px); }
  .wc-ph { aspect-ratio: 1 / 1; }      /* square, so the three reasons and their words fit one screen */
}

/* ---------------------------------------------------------------- the founder, and the organisations he has worked for */
.founder { padding-top: var(--section); }
.fd-panel { position: relative; display: grid; border-radius: var(--r); background: var(--navy); color: #ffffff; overflow: hidden; }
.fd-ph { position: relative; order: 2; display: flex; justify-content: flex-end; align-items: flex-end; }
.fd-ph img { position: relative; width: min(100%, 380px); height: auto; }
/* Behind the founder, the same faded Harbour field as the mission and vision tiles (his word, 11 October). It is
   strongest behind his head and shoulders and is gone before it reaches the words: on a narrow screen it fades
   upwards, on a wide one towards the text beside him. */
.fd-bg { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 96%); mask-image: linear-gradient(to top, #000 30%, transparent 96%); transition: transform 1.4s var(--out); }
.fd-bg svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) { .fd-panel:hover .fd-bg { transform: translate(10px, 8px); } }
.fd-tx { padding: 40px 24px 8px; }
.fd-bio { max-width: 500px; margin-top: 20px; font-size: var(--t-body); line-height: 1.7; color: rgba(255, 255, 255, .84); }
.fd-name { margin-top: 28px; font-size: var(--t-lead); }
.fd-name span { display: block; font-size: var(--t-body); color: rgba(255, 255, 255, .62); }
.fd-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media (min-width: 1000px) {
  .fd-panel { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: end; }
  .fd-ph { order: 0; justify-content: flex-start; align-self: stretch; }
  .fd-bg { -webkit-mask-image: linear-gradient(100deg, #000 22%, transparent 94%); mask-image: linear-gradient(100deg, #000 22%, transparent 94%); }
  .fd-ph img { width: 100%; max-width: 680px; transform: scaleX(-1); }      /* he faces his words */
  .fd-tx { align-self: center; padding: 88px clamp(40px, 6vw, 104px) 88px clamp(24px, 4vw, 72px); }
}
/* the organisations, moving, as on the existing website: two bands in opposite directions; hover holds them */
.logos-sec { padding-top: clamp(64px, 10vh, 120px); }
/* the logo bands carry their own air beneath them, so the closing band sits a little closer */
.logos-sec + .cta { padding-top: calc(var(--section) - 36px); }
.logos-h { font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.005em; color: var(--navy); }
.marquees { margin-top: 40px; display: flex; flex-direction: column; gap: 8px; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee { overflow: hidden; }
.marquee .track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee.rev .track { animation-direction: reverse; animation-duration: 40s; }
.marquees:hover .track, body.calm .marquee .track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lg { flex: 0 0 auto; width: 240px; height: 108px; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.lg img { width: 100%; height: 40px; object-fit: contain; filter: grayscale(1) brightness(.72) contrast(1.2); opacity: .62; transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease); }
.lg img.tall { height: 58px; }
.lg img.mono, .lg:hover img.mono { filter: grayscale(1) brightness(0); opacity: .5; }
.lg:hover img { filter: none; opacity: 1; transform: scale(1.06); }
@media (max-width: 719px) { .lg { width: 170px; height: 88px; padding: 0 16px; } .lg img { height: 32px; } .lg img.tall { height: 46px; } }

/* ---------------------------------------------------------------- Contact: the enquiry, in full, on white, so the page stands apart from the navy footer */
.close { padding-top: clamp(36px, 6vh, 64px); background: #ffffff; }
.close-grid { display: grid; gap: 12px; }
/* the direct ways to reach us, in a Mist tile like the form's; the Harbour field lies faded in its lower corner and
   dissolves towards the words, so it fills the tile without drawing the eye from the form */
.reach { position: relative; overflow: hidden; display: flex; align-items: flex-start; min-height: 320px; border-radius: var(--r); background: var(--mist); color: var(--navy); }
.reach-bg { position: absolute; inset: 30% 0 0 12%; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom right, transparent 26%, #000 92%); mask-image: linear-gradient(to bottom right, transparent 26%, #000 92%); }
.reach-bg svg { display: block; width: 100%; height: 100%; }
.reach-tx { position: relative; display: grid; gap: 18px; justify-items: start; padding: 28px 22px; }
.reach-q { font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.005em; }
.reach-tx .btn:hover .ico { transform: none; }
.reach-where { display: flex; align-items: center; gap: 10px; font-size: var(--t-body); color: var(--ink); }
.reach-where .ico { width: 18px; height: 18px; color: var(--navy); }
.reach .soc { background: #ffffff; }
.reach .soc:hover { background: #ffffff; box-shadow: var(--soft); }
@media (min-width: 1000px) { .reach-tx { padding: 52px; } }
html.js .close .ask-card.rv { transition-delay: 130ms; }
/* the form in a Mist card with its fields in white, as on the existing website */
.close .ask-card { padding: 28px 22px; border-radius: var(--r); background: var(--mist); color: var(--ink); }
.close .ask-card .ask input[type="text"], .close .ask-card .ask input[type="email"], .close .ask-card .ask input[type="tel"], .close .ask-card .ask textarea, .close .ask-card .opt-in, .close .ask-card .human { background: #ffffff; }
.close .ask-card .opt input:checked + .opt-in { background: var(--navy); }
.close .ask-card .ask-bar { background: rgba(0, 31, 81, .1); }
.close .ask-count { order: 2; min-width: 0; font-family: Plex, sans-serif; font-size: var(--t-body); }
.ask-done { font-size: var(--t-lead); color: var(--ink); }
@media (min-width: 1000px) { .close-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: stretch; } .close .ask-card { padding: 52px; } }

/* the enquiry keeps the live form's behaviour and shape; only its type moves onto the brand's scale */
.ask .ask-h { font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.005em; margin-bottom: 24px; }
form.ask input[type="text"], form.ask input[type="email"], form.ask input[type="tel"], form.ask textarea { font-size: var(--t-lead); padding: 15px 18px; border-radius: 14px; }
.ask .opt-in { min-height: 54px; border-radius: 14px; font-size: var(--t-body); }
.ask .human { min-height: 60px; border-radius: 14px; font-size: var(--t-body); }
.ask .human-s, .ask .ask-hint, .ask .ask-err, .ask .ask-count { font-size: var(--t-body); }
.ask .ask-enter { font-size: var(--t-cap); }

/* ---------------------------------------------------------------- inner pages: the opening (a name, two sentences, one wide picture) */
.page-open { padding-top: calc(var(--bar) + clamp(48px, 8vh, 104px)); }
.page-open .h1 { max-width: 14em; color: var(--navy); }
.open-head { display: grid; gap: 28px; align-items: end; }
/* The rows are always faded: pale tints, and dissolving towards the words so they never pull the eye from them. */
.open-rows { display: none; }
.open-rows, .how-rows { opacity: .8; -webkit-mask-image: linear-gradient(to right, transparent, #000 70%); mask-image: linear-gradient(to right, transparent, #000 70%); }
.open-rows svg { display: block; width: 100%; height: auto; }
@media (min-width: 1000px) { .open-head { grid-template-columns: minmax(0, 1fr) minmax(0, 34vw); } .open-rows { display: block; } }
.open-lead { margin-top: 20px; max-width: 600px; font-size: var(--t-lead); line-height: 1.6; color: var(--ink); }
.sec-more { margin-top: clamp(28px, 4vh, 48px); }
.how-more { margin-top: 24px; }

/* ---------------------------------------------------------------- What we build: each service in full, picture and words side by side */
.svcs { padding-top: var(--section); }
.svc { display: grid; gap: 28px; align-items: center; scroll-margin-top: calc(var(--bar) + 24px); }
.svc + .svc { margin-top: clamp(72px, 12vh, 160px); }
.svc-ph { aspect-ratio: 4 / 3; border-radius: var(--r); }
.svc-ph img, .svc-ph video { object-position: var(--focus, 50% 50%); }
.svc-n { display: flex; align-items: center; gap: .34em; font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; color: var(--navy); }
.svc-n .ico { width: .6em; height: .6em; flex: 0 0 auto; }
.svc-l { margin-top: 14px; font-size: var(--t-lead); line-height: 1.6; letter-spacing: 0; color: var(--navy); }
.svc-b { margin-top: 12px; max-width: 480px; font-size: var(--t-body); line-height: 1.7; }
.svc-scope { display: grid; gap: 6px; margin-top: 20px; font-size: var(--t-body); color: var(--navy); }
.svc-scope li { display: flex; align-items: flex-start; gap: 12px; }
.svc-scope .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--n60); }
html.js .svc-tx.rv .svc-scope li { opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--out), transform .8s var(--out); transition-delay: calc(.35s + var(--k) * 80ms); }
html.js .svc-tx.rv.in .svc-scope li { opacity: 1; transform: none; }
.svc-e { margin-top: 20px; max-width: 480px; font-size: var(--t-body); line-height: 1.7; }
/* side by side, the picture is exactly as tall as the words beside it, held on the part that matters */
@media (min-width: 1000px) { .svc { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 112px); align-items: stretch; } .svc.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .svc.rev .svc-ph { order: 2; } .svc-ph { aspect-ratio: auto; min-height: 240px; } }

/* Engineering resources: the page's one navy panel, in two halves. The brand's rows lie faded behind the right half and
   fade out towards the words on the left; the four steps and the disciplines are frosted glass, so the rows show through
   them softened. Glass here is a translucent white with the ground blurred behind it, and no edge line. */
.xr { padding-top: var(--section); scroll-margin-top: var(--bar); }
.xr-panel { position: relative; overflow: hidden; border-radius: var(--r); background: var(--navy); color: #ffffff; padding: clamp(32px, 5.4vw, 80px) clamp(22px, 5vw, 80px); }
.xr-bg { position: absolute; inset: 38% 0 0 0; opacity: .6; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%); mask-image: linear-gradient(to bottom, transparent, #000 34%); }
.xr-bg svg { display: block; width: 100%; height: 100%; }
.xr-grid { position: relative; display: grid; gap: 40px; }
.xr-lead { margin-top: 16px; max-width: 520px; font-size: var(--t-lead); line-height: 1.6; color: rgba(255, 255, 255, .84); }
.xr-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.xr-skills li, .xr-steps li { background: rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.xr-skills li { padding: 9px 16px; border-radius: 14px; font-size: var(--t-body); line-height: 1.7; font-weight: 500; color: #ffffff; }
.xr-h { font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.005em; }
.xr-steps { display: grid; gap: 10px; margin-top: 20px; }
.xr-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 22px 20px; border-radius: 20px; }
html.js .xr-steps li.rv { transition: opacity 1s var(--out) calc(var(--d) * 110ms), transform 1.1s var(--out) calc(var(--d) * 110ms), background .4s var(--ease); }
.xr-skills li { transition: background .4s var(--ease), transform .5s var(--out); }
@media (hover: hover) { .xr-steps li:hover, .xr-skills li:hover { background: rgba(255, 255, 255, .17); } .xr-skills li:hover { transform: translateY(-2px); } .xr-steps li:hover .ico { transform: scale(1.14); } }
.xr-steps .ico { width: 24px; height: 24px; margin-top: 1px; color: #ffffff; transition: transform .6s var(--out); }
.xr-steps h4 { font-weight: 400; font-size: var(--t-lead); line-height: 1.45; color: #ffffff; }
.xr-steps .num { margin-right: 10px; color: rgba(255, 255, 255, .5); }
.xr-steps p { margin-top: 2px; font-size: var(--t-body); line-height: 1.7; color: rgba(255, 255, 255, .8); }
@media (min-width: 1000px) {
  .xr-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 104px); align-items: center; }
  .xr-bg { inset: 0 0 0 auto; width: 60%; opacity: 1; -webkit-mask-image: linear-gradient(to right, transparent, #000 42%); mask-image: linear-gradient(to right, transparent, #000 42%); }
}

/* ---------------------------------------------------------------- How we work: the stages one under another, two statements, the questions */
.how-col .how-track { margin-top: clamp(28px, 5vh, 56px); }
/* each stage holds its place near the top while the next slides over it, leaving the edge of the one beneath in view */
.st1 { --n: 0; } .st2 { --n: 1; } .st3 { --n: 2; }
.how-track.stacked { gap: 28px; }
.how-track.stacked .step { position: sticky; top: calc(var(--bar) + 16px + var(--n) * 20px); transform-origin: 50% 0; will-change: transform; }
.how-track.stacked .st2, .how-track.stacked .st3 { box-shadow: 0 -22px 44px rgba(0, 31, 81, .1); }
/* two assurances as a pair of tiles of one design: icon, statement, sentence, then the thing itself set out in white */
.assure { padding-top: var(--section); }
.assure-grid { display: grid; gap: 12px; }
.as-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 48px); border-radius: var(--r); background: var(--mist); }
html.js .as-card.rv { transition-delay: calc(var(--d) * 130ms); }
.as-bg { position: absolute; inset: 0 0 46% 40%; pointer-events: none; -webkit-mask-image: linear-gradient(to top right, transparent 30%, #000 92%); mask-image: linear-gradient(to top right, transparent 30%, #000 92%); }
.as-bg svg { display: block; width: 100%; height: 100%; }
.as-i { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #ffffff; }
.as-i .ico { width: 24px; height: 24px; }
.as-h { position: relative; margin-top: 28px; max-width: 12em; font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; color: var(--navy); text-wrap: balance; }
.as-p { position: relative; margin-top: 14px; max-width: 520px; font-size: var(--t-lead); line-height: 1.6; text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 9 4 4; }
.as-rows, .as-tiles { position: relative; margin-top: auto; padding-top: 32px; display: grid; gap: 8px; }
.as-rows li { display: grid; grid-template-columns: 22px minmax(0, 7em) minmax(0, 1fr); gap: 14px; align-items: center; min-height: 60px; padding: 12px 20px; border-radius: 16px; background: #ffffff; transition: transform .5s var(--out), box-shadow .5s var(--out); }
.as-rows .ico, .as-tiles .ico { width: 22px; height: 22px; color: var(--navy); }
.as-rows b { font-weight: 400; font-size: var(--t-lead); color: var(--navy); }
.as-rows span { font-size: var(--t-body); line-height: 1.5; color: var(--slate); }
.as-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* on a narrow screen each stage's price sits under its name, not squeezed beside it */
@media (max-width: 719px) { .as-rows li { grid-template-columns: 22px minmax(0, 1fr); gap: 2px 14px; } .as-rows span { grid-column: 2; } }
.as-tiles li { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 96px; padding: 16px 18px; border-radius: 16px; background: #ffffff; font-size: var(--t-body); color: var(--navy); transition: transform .5s var(--out), box-shadow .5s var(--out); }
@media (min-width: 1000px) { .assure-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .as-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .as-tiles li { min-height: 196px; } }
@media (hover: hover) { .as-rows li:hover, .as-tiles li:hover { transform: translateY(-3px); box-shadow: var(--soft); } }
.faq { padding-top: var(--section); }
.faq-list { display: grid; gap: 8px; margin-top: clamp(28px, 5vh, 56px); overflow-anchor: none; }
.faq .row-b { grid-template-columns: minmax(0, 1fr) auto; }
.faq .row-n { display: block; font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.005em; color: var(--navy); }
.faq .row-i { grid-column: 2; }
.faq .row-in { grid-template-columns: minmax(0, 1fr); }
.faq .row-tx { max-width: 620px; font-size: var(--t-body); line-height: 1.7; }

/* ---------------------------------------------------------------- About: mission and vision as two tiles of one design, the principles as four tiles */
.mv { padding-top: var(--section); }
.mv-grid { display: grid; gap: 12px; }
.mv-card { position: relative; display: flex; align-items: flex-end; min-height: 340px; border-radius: var(--r); overflow: hidden; background: var(--navy); color: #ffffff; transition: transform .6s var(--out), box-shadow .6s var(--out); }
html.js .mv-card.rv { transition: opacity 1s var(--out) calc(var(--d, 0) * 130ms), transform 1.1s var(--out) calc(var(--d, 0) * 130ms), box-shadow .6s var(--out); }
.mv-tx { position: relative; flex: 1 1 auto; padding: clamp(26px, 3.4vw, 52px); }
.mv-h { font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; }
.mv-p { margin-top: 14px; max-width: 540px; font-size: var(--t-lead); line-height: 1.6; color: rgba(255, 255, 255, .86); }
/* the Harbour field, faded into the upper corner */
.mv-bg { position: absolute; inset: 0 0 30% 22%; pointer-events: none; -webkit-mask-image: linear-gradient(to top right, transparent 22%, #000 88%); mask-image: linear-gradient(to top right, transparent 22%, #000 88%); transition: transform 1.4s var(--out); }
.mv-bg svg { display: block; width: 100%; height: 100%; }
/* side by side, the two sentences take the same three lines of room, so the two headings stand level */
@media (min-width: 1000px) { .mv-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .mv-card { min-height: 420px; } .mv-p { min-height: 4.8em; } }
@media (hover: hover) { .mv-card:hover { box-shadow: 0 30px 60px rgba(0, 31, 81, .22); } .mv-card:hover .mv-bg { transform: translate(-10px, 8px); } }

.vals { padding-top: var(--section); }
.vals-list { display: grid; gap: 12px; margin-top: clamp(28px, 5vh, 56px); }
.val { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; min-height: 240px; padding: clamp(24px, 2.8vw, 40px); border-radius: var(--r); background: var(--mist); color: var(--navy); }
html.js .val.rv { transition: opacity 1s var(--out) calc(var(--d) * 90ms), transform 1.1s var(--out) calc(var(--d) * 90ms), background .5s var(--ease), color .5s var(--ease), box-shadow .6s var(--out); }
.val-i { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #ffffff; transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--out); }
.val-i .ico { width: 24px; height: 24px; }
.val-tx { position: relative; }
.val-h { font-size: var(--t-head); line-height: 1.12; letter-spacing: -.015em; }
.val-p { margin-top: 10px; max-width: 440px; font-size: var(--t-lead); line-height: 1.6; color: var(--ink); transition: color .5s var(--ease); }
/* the brand's symbol, very large and very faint, in the corner of each tile */
.val-mark { position: absolute; right: -56px; bottom: -72px; width: 300px; opacity: .055; pointer-events: none; transition: transform 1.4s var(--out), opacity .5s var(--ease); }
.val-mark .sym { display: block; width: 100%; height: auto; }
.val-mark .sym .dot { fill: currentColor; }
@media (min-width: 720px) { .vals-list { grid-template-columns: 1fr 1fr; gap: 16px; } .val { min-height: 280px; } }
@media (hover: hover) {
  .val:hover { background: var(--navy); color: #ffffff; box-shadow: 0 30px 60px rgba(0, 31, 81, .2); }
  .val:hover .val-p { color: rgba(255, 255, 255, .86); }
  .val:hover .val-i { background: #ffffff; color: var(--navy); transform: scale(1.06); }
  .val:hover .val-mark { transform: rotate(38deg) scale(1.06); opacity: .09; }
}

/* ---------------------------------------------------------------- Privacy */
.doc { display: grid; gap: 32px; max-width: 640px; padding-top: clamp(40px, 6vh, 72px); }
.doc h2 { font-size: var(--t-sub); letter-spacing: -.005em; color: var(--navy); }
.doc p { margin-top: 6px; font-size: var(--t-body); line-height: 1.7; }
.doc .upd { font-size: var(--t-cap); color: var(--slate); }
.page-end { height: var(--section); }
/* the switch that turns analytics off, under that section of the privacy notice */
.doc .doc-act { margin-top: 18px; text-align: left; } .doc .doc-act .btn[disabled] { opacity: .7; cursor: default; }
/* the analytics choice, shown only to visitors who look European (analytics.js): one calm bar on the navy, the
   site's own buttons, nothing over the page's words until it is answered */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--navy); color: #ffffff; box-shadow: 0 -16px 40px rgba(0, 31, 81, .22); animation: fadeup .5s var(--out) both; }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-top: 18px; padding-bottom: 18px; }
.consent p { max-width: 720px; font-size: var(--t-body); line-height: 1.6; color: rgba(255, 255, 255, .86); text-align: left; }
.consent a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.consent-btns { display: flex; gap: 10px; flex: none; }
@media (max-width: 559px) { .consent-btns { width: 100%; } .consent-btns .btn { flex: 1; } }
/* the page for an address that does not exist: its two ways on sit under the opening words */
.nf-btns { margin-top: 36px; }

/* ---------------------------------------------------------------- the closing band: the offer on navy, the office at dusk beside it */
.cta { padding-block: var(--section) clamp(56px, 8vh, 104px); }
.cta-panel { display: grid; border-radius: var(--r); background: var(--navy); color: #ffffff; overflow: hidden; }
.cta-tx { padding: clamp(36px, 6vw, 96px) clamp(24px, 5vw, 88px); align-self: center; }
.cta-tx .h2 { color: #ffffff; }
.cta-tx .lede { color: rgba(255, 255, 255, .86); }
.cta-tx .btns { margin-top: 36px; }
.cta-ph { min-height: 240px; margin: 0 14px 14px; border-radius: calc(var(--r) - 12px); background: var(--deep); }
.cta-ph img { object-position: 72% 50%; }
@media (min-width: 1000px) { .cta-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .cta-ph { margin: 14px 14px 14px 0; min-height: 440px; } }

/* ---------------------------------------------------------------- footer: the existing website's, part for part */
.foot { position: relative; background: var(--navy); color: rgba(255, 255, 255, .76); padding-block: 80px 40px; overflow: hidden; }
/* the symbol, very large and very faint, in the corner */
.foot-mark { position: absolute; right: -90px; bottom: -150px; width: 520px; opacity: .06; pointer-events: none; }
.foot-mark .sym { width: 100%; height: auto; }
.foot .wrap { position: relative; }
.foot .lockup { height: 36px; width: auto; }      /* a fifth larger than on the existing website, at his word */
.foot-cols { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 720px) { .foot-cols { grid-template-columns: 2fr 1fr 1fr; } }
.foot-line { margin-top: 24px; max-width: 380px; font-size: var(--t-lead); line-height: 1.6; }
.foot h2 { font-size: var(--t-body); line-height: 1.7; font-weight: 500; color: #ffffff; }
.foot ul { display: grid; gap: 8px; margin-top: 12px; font-size: var(--t-body); }
/* links brighten when rested on; the white WhatsApp button keeps its navy words */
.foot a:not(.btn) { transition: color .2s; } .foot a:not(.btn):hover { color: #ffffff; }
.foot li a { display: inline-block; transition: color .2s, transform .5s var(--out); } @media (hover: hover) { .foot li a:hover { transform: translateX(5px); } }
.foot-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
/* the social squares, as on the existing website: Mist on white; on the navy footer a tenth of white with nothing
   blurred behind it, so the faint symbol shows through */
.socials { display: inline-flex; gap: 10px; }
.soc { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mist); color: var(--navy); transition: transform .3s var(--ease), background .3s; }
.soc .ico { width: 20px; height: 20px; }
.soc:hover { transform: translateY(-2px); background: var(--mist2); }
.foot .soc, .fd-links .soc { width: 44px; height: 44px; background: rgba(255, 255, 255, .1); color: #ffffff; }
.foot .soc:hover, .fd-links .soc:hover { background: rgba(255, 255, 255, .2); }
.foot-reg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 16px; font-size: var(--t-cap); line-height: 1.5; color: rgba(255, 255, 255, .5); }
.foot-cols + .foot-reg { margin-top: 64px; }
.foot-reg .ar { font-family: Kufi, Plex, sans-serif; }
.motion-sw { color: inherit; font-size: inherit; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; transition: color .3s, background .3s; }
.motion-sw:hover { color: #ffffff; background: rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------------- one page gives way to the next */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .26s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .7s var(--out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------------------------------------------------------------- for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .rv { opacity: 1 !important; transform: none !important; }
  html.js .rise .wd > span { transform: none !important; } html.js .unveil { clip-path: none !important; } html.js .svc-scope li { opacity: 1 !important; transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.js .hero .wd > span { transform: none !important; } html.js .hero .hero-row { opacity: 1 !important; }
  html.js .ph[data-reveal] { clip-path: inset(0 round var(--r)) !important; } .row-ph .m-in { transform: none !important; }
  /* held still, the two bands become one even grid of all fifteen */
  .marquees { display: grid; grid-template-columns: repeat(3, 1fr); padding-inline: var(--side); -webkit-mask-image: none; mask-image: none; }
  .marquee, .marquee .track { display: contents; }
  .marquee .lg { width: auto; }
  .marquee .lg[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 720px) { .marquees { grid-template-columns: repeat(5, 1fr); } }

/* the enquiry form, as on the live site */
.ask { position: relative; display: flex; flex-direction: column; min-height: 460px; }
.ask-top { display: flex; align-items: center; gap: 16px; }
.ask-count { font-size: 13px; color: var(--slate); min-width: 44px; }
.ask-bar { flex: 1; height: 8px; border-radius: 2px; background: rgba(0, 31, 81, .08); overflow: hidden; }
.ask-bar i { display: block; height: 100%; background: var(--navy); border-radius: 2px; transform-origin: left center; transform: scaleX(.17); transition: transform .6s var(--ease); }
[dir="rtl"] .ask-bar i { transform-origin: right center; }
.ask-qs { flex: 1; display: flex; align-items: center; padding-block: 40px 24px; }
.q { width: 100%; }
.q[hidden] { display: none; }
.q.from-next { animation: qin .55s var(--ease) both; } .q.from-back { animation: qback .55s var(--ease) both; }
@keyframes qin { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes qback { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
.q fieldset { border: 0; min-width: 0; }
.ask-h { display: block; font-size: 28px; line-height: 1.2; letter-spacing: -.015em; color: var(--navy); margin-bottom: 28px; }
@media (min-width: 1100px) { .ask-h { font-size: 38px; } }
[lang="ar"] .ask-h { letter-spacing: 0; line-height: 1.55; }
.ask input[type="text"], .ask input[type="email"], .ask input[type="tel"], .ask textarea {
  width: 100%; font: inherit; font-size: 20px; line-height: 1.4; color: var(--navy); background: var(--mist); border: 0; border-radius: 16px; padding: 18px 20px;
  transition: background .25s, box-shadow .25s; resize: none; }
.ask input + input { margin-top: 12px; }
.ask input::placeholder, .ask textarea::placeholder { color: var(--n40); }
.ask input:focus, .ask textarea:focus { outline: none; background: #ffffff; box-shadow: 0 0 0 2px var(--navy), 0 12px 28px rgba(0, 31, 81, .08); }
[dir="rtl"] .ask input[dir="ltr"] { text-align: right; }
.opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .opts { grid-template-columns: repeat(2, 1fr); } }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-in { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border-radius: 16px; background: var(--mist); color: var(--navy); font-size: 17px; line-height: 1.3;
  transition: background .25s, color .25s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.opt-in .ico { width: 22px; height: 22px; }
.opt:hover .opt-in { transform: translateY(-2px); box-shadow: var(--soft); }
.opt input:checked + .opt-in { background: var(--navy); color: #ffffff; }
.opt input:focus-visible + .opt-in { box-shadow: 0 0 0 2px var(--navy), 0 0 0 5px #fff; }
.human { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 16px 20px; border-radius: 18px; background: var(--mist); color: var(--navy); font-size: 18px; cursor: pointer; }
.human input { position: absolute; opacity: 0; pointer-events: none; }
.human .box { flex: 0 0 32px; height: 32px; border-radius: 9px; background: #ffffff; box-shadow: inset 0 0 0 2px var(--n20); display: flex; align-items: center; justify-content: center; color: #ffffff; transition: background .3s, box-shadow .3s; }
.human .box .ico { width: 20px; height: 20px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s var(--ease); }
.human input:focus-visible + .box { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 3px #fff, 0 0 0 5px var(--navy); }
.human.busy .box { box-shadow: inset 0 0 0 2px var(--navy); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 5px var(--n20); } }
.human.ok .box { background: var(--navy); box-shadow: none; }
.human.ok .box .ico { opacity: 1; transform: none; }
.human-t { flex: 1; }
.human-s { font-size: 14px; color: var(--slate); }
.ask-hint { margin-top: 14px; font-size: 14px; color: var(--slate); }
.ask-err { min-height: 24px; font-size: 15px; color: #a3212a; }
.ask.shake .q:not([hidden]) { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ask-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.ask-nav[hidden], .ask-nav [hidden] { display: none; }
.ask-enter { font-size: 13px; color: var(--slate); margin-inline-start: 6px; }
@media (max-width: 719px) { .ask-enter { display: none; } }
.ico.back { transform: scaleX(-1); } [dir="rtl"] .ico.back { transform: none; }
.hp { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; inset-inline-start: -9999px; }
/* the full-screen layer every "Book a review" opens */
.ask-layer { position: fixed; inset: 0; z-index: 60; background: #ffffff; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.ask-layer.open { opacity: 1; visibility: visible; }
.ask-layer-bar { display: flex; align-items: center; justify-content: space-between; height: 72px; flex: 0 0 auto; }
.ask-layer .ask-close { display: inline-flex; background: var(--mist); margin-inline-end: 0; }
.ask-layer .ask-close:hover { background: #e3e9f3; }
@media (min-width: 1100px) { .ask-layer-bar { height: 84px; } }
.ask-layer-body { flex: 1; display: flex; align-items: center; padding-block: 24px 48px; }
.ask-layer-body .ask { width: 100%; max-width: 760px; margin: 0 auto; }
.ask-layer .ask { transform: translateY(18px); transition: transform .5s var(--ease); }
.ask-layer.open .ask { transform: none; }
/* on Contact: the form in a Mist card, fields in white */
.ask-card { background: var(--mist); border-radius: 32px; padding: 28px 22px; }
@media (min-width: 1100px) { .ask-card { padding: 48px; } }
.ask-card .ask input[type="text"], .ask-card .ask input[type="email"], .ask-card .ask input[type="tel"], .ask-card .ask textarea, .ask-card .opt-in, .ask-card .human { background: #ffffff; }
.ask-card .ask-bar { background: rgba(0, 31, 81, .1); }