/* The team on the front page, and the page about Lesreg it leads to.
   The video frame (.vd) is the same on both: the navy of the stages, the
   mark, a glass play button, its title and length. */

/* ---------- the video frame ---------- */
.vd{ position:relative; display:block; aspect-ratio:16 / 9; border-radius:28px; overflow:hidden; isolation:isolate; color:var(--porcelain); text-decoration:none;
  background:radial-gradient(70% 90% at 50% 115%, #2B3F7C, #101A33 55%, #05080F); background-color:#05080F;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -40px rgba(14,15,16,.6); }
.vd-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(30% 45% at 30% 30%, rgba(36,54,232,.45), transparent 70%), radial-gradient(26% 40% at 78% 70%, rgba(242,138,62,.25), transparent 70%); }
.vd-mark{ position:absolute; left:28px; top:28px; width:40px; height:40px; }
.vd-mark svg{ width:100%; height:100%; }
.vd-play{ position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%; display:grid; place-items:center; isolation:isolate;
  color:var(--porcelain); background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 20px 40px rgba(0,0,0,.35);
  transition:transform .35s var(--ease), background .25s var(--ease); }
.vd-play::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.12) 45%, rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.vd-play svg{ width:30px; height:30px; margin-left:4px; }
@media (hover:hover){ a.vd:hover .vd-play{ transform:scale(1.08); background:var(--ultra); } }
a.vd:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--porcelain), 0 0 0 4px var(--ultra); }
.vd-cap{ position:absolute; left:28px; bottom:26px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; }
.vd-cap b{ font:500 20px/26px var(--sans); letter-spacing:-.01em; }
.vd-cap span{ font:400 14px/20px var(--sans); color:rgba(246,244,239,.7); }
.vd-len{ position:absolute; right:24px; bottom:26px; height:28px; padding:0 12px; border-radius:14px; display:grid; place-items:center;
  background:rgba(14,15,16,.6); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font:500 12.5px/1 var(--sans); }

/* ---------- the team on the front page ----------
   A navy stage that rises over the paper with rounded shoulders, so the
   change from the light integrations is plain. The film is the point of
   it: a short head over it, the film large in the middle, the two ways on
   under it. */
.tmv{ position:relative; z-index:1; margin:clamp(40px, 6vh, 72px) 0 0; border-radius:40px 40px 0 0; color:var(--porcelain); padding:clamp(72px, 11vh, 120px) 0 clamp(80px, 12vh, 140px);
  background:radial-gradient(60% 50% at 50% 60%, rgba(43,63,124,.6), transparent 70%), radial-gradient(40% 30% at 15% 0%, rgba(36,54,232,.18), transparent 70%), #05080F; }
.tmv-in{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
@media (max-width:1200px){ .tmv-in{ margin:0 var(--gut); } }
.tmv .label{ color:rgba(246,244,239,.6); }
.tmv-h{ margin-top:14px; font:500 64px/64px var(--sans); letter-spacing:-.035em; }
.tmv-h .acc{ color:rgba(246,244,239,.72); }
.tmv-vd{ width:100%; margin-top:clamp(32px, 5vh, 48px); text-align:left; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 50px 100px -40px rgba(0,0,0,.8); }
.tmv-vd .vd-play{ width:112px; height:112px; margin:-56px 0 0 -56px; }
.tmv-vd .vd-play svg{ width:38px; height:38px; }
.tmv-vd .vd-cap b{ font-size:24px; line-height:30px; }
.play .tmv-vd .vd-play, .tmv-vd .vd-play{ animation:tmv-breathe 3.2s ease-in-out infinite; }
@keyframes tmv-breathe{ 50%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 14px rgba(255,255,255,.05), 0 20px 40px rgba(0,0,0,.35); } }
.tmv-go{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 28px; margin-top:32px; }
.tmv-more{ display:inline-flex; align-items:center; gap:8px; font:500 15px/1 var(--sans); color:var(--porcelain); text-decoration:none; }
.tmv-more svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
@media (hover:hover){ .tmv-more:hover svg{ transform:translateX(3px); } }
@media (prefers-reduced-motion: reduce){ .tmv-vd .vd-play{ animation:none; } }

/* the rows of the team, as the page about Lesreg uses them */
.tmv-rows{ list-style:none; margin:28px 0 32px; padding:0; max-width:480px; }
.tmv-rows li{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:48px; padding:0 16px; border-bottom:1px solid var(--travertine); font:400 14px/22px var(--sans); color:var(--graphite); }
.tmv-rows b{ font-weight:400; color:var(--obsidian); }
.tmv-rows li.sel{ border-bottom:0; border-radius:12px; background:var(--limestone); }
.tmv-rows li.sel b{ font-weight:500; }

/* ---------- the page about Lesreg ---------- */

.om-top{ position:relative; color:var(--porcelain); padding:clamp(120px, 18vh, 170px) var(--gut) clamp(56px, 9vh, 96px);
  background:radial-gradient(70% 60% at 50% 0%, #18264A, #05080F 70%); background-color:#05080F; }
.om-top-in{ max-width:1100px; margin:0 auto; text-align:center; }
.om-top .label{ color:rgba(246,244,239,.6); }
.om-h1{ margin-top:16px; font:500 clamp(48px, 7vw, 96px)/.96 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
.om-h1 .acc{ font-family:var(--accent); font-style:italic; font-weight:300; letter-spacing:-.025em; color:rgba(246,244,239,.78); }
.om-lead{ max-width:34em; margin:24px auto 0; font:400 20px/30px var(--sans); color:rgba(246,244,239,.78); }
.om-vd{ margin:48px auto 0; max-width:1100px; }
/* until the film is in: the frame says so */
.vd-soon{ position:absolute; left:50%; top:calc(50% + 64px); transform:translateX(-50%); white-space:nowrap; font:400 14px/20px var(--sans); color:rgba(246,244,239,.7); }
.om-vd video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }

.om-cta{ max-width:720px; margin:clamp(56px, 9vh, 96px) auto 0; padding:0 var(--gut) clamp(72px, 12vh, 120px); box-sizing:content-box; }
.om-cta-in{ padding:32px; border-radius:28px; color:var(--porcelain); background:radial-gradient(70% 90% at 75% 115%, #2B3F7C, #101A33 55%, #05080F); }
.om-cta h2{ font:500 40px/44px var(--sans); letter-spacing:-.025em; }
.om-cta h2 .acc{ font-family:var(--accent); font-style:italic; font-weight:300; color:rgba(246,244,239,.78); }
.om-cta p{ margin-top:12px; font:400 17px/27px var(--sans); color:rgba(246,244,239,.75); }
.om-cta .btn{ margin-top:24px; }

@media (max-width:1023px){
}
@media (max-width:767px){
  .tmv{ padding:56px 0 64px; border-radius:28px 28px 0 0; }
  .tmv-vd{ margin-top:24px; }
  .tmv-vd .vd-play{ width:72px; height:72px; margin:-36px 0 0 -36px; }
  .tmv-vd .vd-play svg{ width:26px; height:26px; }
  .tmv-vd .vd-cap b{ font-size:15px; line-height:20px; }
  .tmv-h{ font-size:40px; line-height:44px; letter-spacing:-.025em; }
  .tmv-lead{ margin-top:16px; font-size:16px; line-height:26px; }
  .tmv-rows li{ padding:0 12px; font-size:13px; }
  .tmv-go{ margin-top:24px; width:100%; flex-direction:column; }
  .tmv .btn{ width:100%; justify-content:space-between; }
  .vd{ border-radius:22px; }
  .vd-mark{ left:16px; top:16px; width:28px; height:28px; }
  .vd-play{ width:64px; height:64px; margin:-32px 0 0 -32px; }
  .vd-play svg{ width:22px; height:22px; }
  .vd-cap{ left:16px; bottom:14px; }
  .vd-cap b{ font-size:15px; line-height:20px; } .vd-cap span{ font-size:12px; line-height:16px; }
  .vd-len{ right:14px; bottom:14px; height:24px; font-size:11px; }
  /* on a phone the note sits as a chip in the top corner, clear of the title */
  .vd-soon{ left:auto; right:14px; top:16px; transform:none; height:26px; padding:0 10px; border-radius:13px; display:grid; place-items:center; background:rgba(14,15,16,.6); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font-size:11.5px; }
  .om-lead{ font-size:16px; line-height:26px; }
  .om-vd{ margin-top:32px; }
  .om-cta-in{ padding:24px; }
  .om-cta h2{ font-size:30px; line-height:34px; }
  .om-cta .btn{ width:100%; justify-content:space-between; }
}

/* ---------- the page about Lesreg, on navy, in liquid glass ----------
   The navy of the opening carries on down the page. Each part has a head
   (label, H2 with its serif line, a paragraph) and a pane of glass held
   over a bloom of light, the same glass as the price calculator. The
   blooms are still: nothing moves while you read. */
body.om .tb, body.svc .tb{ background:linear-gradient(165deg, rgba(36,40,52,.96), rgba(14,15,16,.94)) !important; }
body.om{ background:#05080F; }
.ab{ position:relative; overflow:hidden; color:var(--porcelain); background:linear-gradient(#05080F, #0A1124 30%, #05080F 60%, #0A1124 85%, #05080F); }
.ab-s{ position:relative; max-width:1296px; margin:0 auto; padding:clamp(88px, 13vh, 144px) 0 0; }
@media (max-width:1440px){ .ab-s{ margin:0 var(--gut); } }
.ab .label{ color:rgba(246,244,239,.55); }
.ab-head{ position:relative; z-index:1; max-width:760px; }
.ab-h{ margin-top:16px; font:500 64px/64px var(--sans); letter-spacing:-.035em; text-wrap:balance; }
.ab-h .acc{ display:block; font-family:var(--accent); font-style:italic; font-weight:300; letter-spacing:-.02em; color:rgba(246,244,239,.72); }
.ab .ab-p{ margin-top:24px; max-width:36em; font:400 19px/30px var(--sans); color:rgba(246,244,239,.76); text-wrap:pretty; }
.ab .ab-p + .ab-p{ margin-top:14px; }
.ab-stage{ position:relative; margin-top:48px; }

/* the light under the glass */
.ab-bloom{ position:absolute; z-index:0; pointer-events:none; inset:-14% -8%; filter:blur(8px); }
.ab-b1{ background:radial-gradient(30% 50% at 18% 40%, rgba(36,54,232,.7), transparent 70%), radial-gradient(26% 40% at 88% 80%, rgba(242,138,62,.4), transparent 70%); }
.ab-b2{ background:radial-gradient(28% 60% at 12% 50%, rgba(36,54,232,.75), transparent 70%), radial-gradient(22% 50% at 62% 20%, rgba(110,170,255,.4), transparent 70%), radial-gradient(24% 60% at 94% 70%, rgba(242,138,62,.45), transparent 70%); }
.ab-b3{ background:radial-gradient(30% 70% at 80% 50%, rgba(36,54,232,.7), transparent 70%), radial-gradient(20% 60% at 20% 60%, rgba(110,170,255,.35), transparent 70%); }
.ab-b4{ background:radial-gradient(40% 40% at 30% 30%, rgba(36,54,232,.75), transparent 70%), radial-gradient(36% 34% at 80% 82%, rgba(242,138,62,.5), transparent 70%); }
.ab-b5{ background:radial-gradient(26% 50% at 86% 30%, rgba(36,54,232,.7), transparent 70%), radial-gradient(24% 40% at 10% 85%, rgba(242,138,62,.4), transparent 70%); }
.ab-b6{ background:radial-gradient(34% 50% at 50% 40%, rgba(36,54,232,.7), transparent 70%), radial-gradient(22% 36% at 90% 20%, rgba(110,170,255,.4), transparent 70%); }

/* the glass: Smoke with blur, and a rim lit from the top left */
.ab-gl{ position:relative; z-index:1; isolation:isolate; border-radius:32px; box-shadow:12px 24px 56px rgba(0,0,0,.35); }
.ab-gl::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(14,15,16,.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5); }
.ab-gl::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.1) 45%, rgba(255,255,255,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* Mikkel */
.ab-me{ padding-top:clamp(64px, 10vh, 112px); }
.ab-me-p{ display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:center; padding:20px; }
.ab-ph{ position:relative; margin:0; aspect-ratio:4/5; border-radius:22px; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(80% 70% at 50% 100%, #2B3F7C, #101A33 60%, #05080F); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.ab-ph-mg{ font:300 120px/1 var(--accent); font-style:italic; letter-spacing:-.04em; color:rgba(246,244,239,.9); }
.ab-ph-soon{ position:absolute; left:16px; bottom:16px; height:28px; padding:0 12px; border-radius:14px; display:grid; place-items:center;
  font:400 12px/1 var(--sans); color:rgba(246,244,239,.8); background:rgba(14,15,16,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.ab-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.ab-me-t{ padding:24px 32px 24px 0; }
.ab-me-t .ab-h{ font-size:56px; line-height:58px; }
.ab .ab-lead{ margin-top:24px; font:400 22px/33px var(--sans); letter-spacing:-.01em; color:var(--porcelain); text-wrap:pretty; }
.ab-lead + p{ margin-top:16px; font:400 17px/28px var(--sans); color:rgba(246,244,239,.72); text-wrap:pretty; }
.ab-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.ab-tags span{ height:36px; padding:0 14px; border-radius:18px; display:inline-flex; align-items:center; font:400 13px/1 var(--sans); color:rgba(246,244,239,.85);
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }

/* the four that make the difference, as a ledger in glass */
.ab-led{ list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ab-led li{ position:relative; display:flex; flex-direction:column; padding:28px 24px; }
.ab-led li + li::before{ content:""; position:absolute; left:0; top:28px; bottom:28px; width:1px; background:rgba(246,244,239,.12); }
.ab-n{ display:flex; align-items:flex-start; font:300 72px/72px var(--sans); letter-spacing:-.05em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ab-n small{ margin:10px 0 0 8px; font:500 17px/20px var(--sans); letter-spacing:0; color:rgba(246,244,239,.8); }
.ab-k{ margin-top:10px; font:500 15px/20px var(--sans); }
.ab-led p{ margin-top:12px; font:400 14.5px/22px var(--sans); color:rgba(246,244,239,.66); }

/* the way it goes, along a line of light */
.ab-steps{ list-style:none; margin:0; padding:40px 32px 36px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px; }
.ab-steps::marker{ content:none; }
.ab-steps li{ position:relative; padding-top:36px; }
.ab-steps li::before{ content:""; position:absolute; left:6px; right:-28px; top:6px; height:1px; background:linear-gradient(90deg, rgba(246,244,239,.5), rgba(246,244,239,.1)); }
.ab-steps li:last-child::before{ right:0; background:linear-gradient(90deg, rgba(246,244,239,.5), transparent); }
.ab-dot{ position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%; background:var(--porcelain); box-shadow:0 0 0 4px rgba(246,244,239,.14), 0 0 18px rgba(246,244,239,.55); }
.ab-steps li:last-child .ab-dot{ background:var(--ultra); box-shadow:0 0 0 4px rgba(36,54,232,.3), 0 0 22px rgba(80,100,255,.9); }
.ab-steps b{ display:block; font:500 20px/26px var(--sans); letter-spacing:-.015em; }
.ab-steps p{ margin-top:10px; font:400 15px/23px var(--sans); color:rgba(246,244,239,.68); }

/* AI against Lesreg: a pane of glass and a sheet of porcelain */
.ab-split{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.ab-split .ab-stage{ margin-top:0; }
.ab-vs{ display:grid; gap:12px; }
.ab-ai{ padding:28px 28px 24px; }
.ab-ai > b{ display:block; margin-top:10px; font:500 28px/32px var(--sans); letter-spacing:-.02em; }
.ab-ai ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.ab-ai li{ display:flex; align-items:center; gap:12px; font:400 15.5px/22px var(--sans); color:rgba(246,244,239,.7); }
.ab-ai li svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab-ai:not(.ab-ai-us) li svg{ stroke:rgba(246,244,239,.6); box-shadow:inset 0 0 0 1px rgba(246,244,239,.25); }
.ab-ai-us{ position:relative; z-index:1; border-radius:32px; background:var(--porcelain); color:var(--obsidian); box-shadow:12px 24px 56px rgba(0,0,0,.4); }
.ab .ab-ai-us .label{ color:var(--ash); }
.ab-ai-us li{ color:var(--obsidian); }
.ab-ai-us li svg{ background:var(--ultra); stroke:#fff; }

/* the integrations, grouped */
.ab-int{ padding:8px 0 0; }
.ab-int ul{ list-style:none; margin:0; padding:0; }
.ab-int li{ display:grid; grid-template-columns:180px minmax(0, 1fr); gap:16px; align-items:center; padding:16px 28px; }
.ab-int li + li{ border-top:1px solid rgba(246,244,239,.08); }
.ab-int li > div{ display:flex; flex-wrap:wrap; gap:8px; }
.ab-chip{ display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 16px 0 7px; border-radius:21px; font:400 14px/1 var(--sans); color:var(--porcelain);
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1); }
.ab-chip img{ width:28px; height:28px; border-radius:50%; }
.ab .ab-int-f{ padding:16px 28px 20px; border-top:1px solid rgba(246,244,239,.08); font:400 13.5px/20px var(--sans); color:rgba(246,244,239,.6); }

/* the work: the site and the app as they are, and where to find them */
.ab-shot{ height:460px; overflow:hidden; display:flex; align-items:flex-start; padding:48px 56px 0; }
.ab-shot::before{ background:rgba(14,15,16,.35); }
.ab-web{ display:block; width:76%; border-radius:12px; overflow:hidden; background:#F6F4EF; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 30px 60px rgba(0,0,0,.5); }
.ab-bar{ display:flex !important; align-items:center; gap:5px; height:28px; padding:0 12px; background:#1A1D26; }
.ab-bar > i{ display:block; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); }
.ab-bar em{ margin:0 auto; padding-right:34px; font:400 11px/1 var(--sans); font-style:normal; color:rgba(246,244,239,.6); }
.ab-web img, .ab-phone img{ display:block; width:100%; height:auto; }
.ab-phone{ position:relative; z-index:1; flex:none; width:210px; margin:60px 0 0 -120px; border-radius:32px; overflow:hidden;
  box-shadow:0 0 0 6px #1b1f2c, 0 0 0 7px rgba(255,255,255,.2), 0 30px 60px rgba(0,0,0,.6); }
.ab-work{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.ab-wc{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:4px 14px; padding:20px; border-radius:24px; color:inherit; text-decoration:none; transition:transform .25s var(--ease); }
.ab-wc img{ grid-row:span 2; border-radius:11px; }
.ab-wc b{ font:500 17px/22px var(--sans); }
.ab-wc span{ font:400 14px/20px var(--sans); color:rgba(246,244,239,.66); }
.ab-wc em{ grid-column:2; display:inline-flex; align-items:center; gap:6px; margin-top:8px; font:500 13px/1 var(--sans); font-style:normal; }
.ab-wc em svg{ width:13px; height:13px; }
@media (hover:hover){ .ab-wc:hover{ transform:translateY(-3px); } }

/* signed */
.ab .ab-sign{ margin-top:40px; display:flex; flex-direction:column; gap:6px; font:400 14px/20px var(--sans); color:rgba(246,244,239,.55); }
.ab-sign .acc{ font:300 44px/46px var(--accent); font-style:italic; letter-spacing:-.02em; color:var(--porcelain); }

/* the call at the end: glass, like the rest */
body.om .om-cta{ max-width:1296px; margin:0 auto; padding:clamp(88px, 13vh, 144px) 0 clamp(88px, 13vh, 144px); box-sizing:border-box; background:none; }
@media (max-width:1440px){ body.om .om-cta{ margin:0 var(--gut); } }
body.om .om-cta-in{ position:relative; isolation:isolate; padding:clamp(32px, 5vw, 64px); border-radius:32px; overflow:hidden;
  background:radial-gradient(50% 120% at 85% 120%, rgba(242,138,62,.35), transparent 70%), radial-gradient(60% 120% at 10% -20%, rgba(36,54,232,.6), transparent 70%), rgba(14,15,16,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14), 12px 24px 56px rgba(0,0,0,.35); }
body.om .om-cta h2{ font:500 64px/64px var(--sans); letter-spacing:-.035em; }
body.om .om-cta h2 .acc{ display:block; }
body.om .om-cta p{ max-width:36em; margin-top:20px; font-size:19px; line-height:30px; }
body.om .om-cta .btn{ margin-top:32px; }

@media (max-width:1023px){
  .ab-me-p{ grid-template-columns:minmax(0, 1fr); }
  .ab-me-t{ padding:8px 12px 16px; }
  .ab-led{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ab-led li:nth-child(3)::before{ display:none; }
  .ab-led li:nth-child(n+3){ border-top:1px solid rgba(246,244,239,.12); }
  .ab-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:36px; }
  .ab-steps li:nth-child(2)::before{ right:0; }
  .ab-split{ grid-template-columns:minmax(0, 1fr); }
  .ab-split .ab-stage{ margin-top:40px; }
  .ab-work{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:767px){
  /* on a phone: no blur under the glass (the light is soft already), so
     scrolling stays light */
  .ab-gl::before{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(16,20,32,.62); }
  .ab-gl{ border-radius:24px; }
  .ab-s{ padding-top:96px; }
  .ab-h, body.om .om-cta h2{ font-size:40px; line-height:42px; letter-spacing:-.03em; }
  .ab .ab-p{ margin-top:18px; font-size:17px; line-height:28px; }
  .ab-stage{ margin-top:32px; }
  .ab-me{ padding-top:56px; }
  .ab-me-p{ padding:12px; gap:20px; }
  .ab-ph{ aspect-ratio:1/1; border-radius:16px; }
  .ab-ph-mg{ font-size:96px; }
  .ab-me-t{ padding:4px 8px 12px; }
  .ab-me-t .ab-h{ font-size:36px; line-height:38px; }
  .ab .ab-lead{ margin-top:18px; font-size:19px; line-height:29px; }
  .ab-lead + p{ font-size:16px; line-height:26px; }
  .ab-led{ padding:4px; }
  .ab-led li{ padding:20px 16px; }
  .ab-led li + li::before{ top:20px; bottom:20px; }
  .ab-n{ font-size:48px; line-height:48px; }
  .ab-n small{ margin:6px 0 0 5px; font-size:14px; }
  .ab-k{ font-size:14px; }
  .ab-led p{ font-size:13px; line-height:19px; }
  .ab-steps{ grid-template-columns:minmax(0, 1fr); gap:0; padding:28px 22px 8px; }
  .ab-steps li{ padding:0 0 28px 32px; }
  .ab-steps li::before, .ab-steps li:nth-child(2)::before, .ab-steps li:last-child::before{ left:6px; right:auto; top:13px; bottom:0; width:1px; height:auto; background:linear-gradient(rgba(246,244,239,.45), rgba(246,244,239,.12)); }
  .ab-steps li:last-child::before{ display:none; }
  .ab-steps b{ font-size:18px; line-height:22px; }
  .ab-steps p{ margin-top:6px; font-size:14.5px; line-height:22px; }
  .ab-ai{ padding:22px 20px 20px; }
  .ab-ai-us{ border-radius:24px; }
  .ab-ai > b{ font-size:24px; line-height:28px; }
  .ab-ai li{ font-size:14.5px; }
  .ab-int li{ grid-template-columns:minmax(0, 1fr); gap:10px; padding:14px 16px; }
  .ab-int li > div{ gap:6px; }
  .ab-chip{ height:34px; gap:7px; padding:0 12px 0 5px; font-size:13px; }
  .ab-chip img{ width:24px; height:24px; }
  .ab .ab-int-f{ padding:14px 16px 16px; }
  .ab-shot{ height:280px; padding:20px 18px 0; }
  .ab-web{ width:84%; border-radius:8px; }
  .ab-bar{ height:20px; padding:0 8px; } .ab-bar > i{ width:6px; height:6px; } .ab-bar em{ font-size:9px; padding-right:20px; }
  .ab-phone{ width:118px; margin:36px 0 0 -76px; border-radius:19px; box-shadow:0 0 0 4px #1b1f2c, 0 0 0 5px rgba(255,255,255,.2), 0 20px 40px rgba(0,0,0,.6); }
  .ab-wc{ padding:16px; border-radius:20px; }
  .ab-sign .acc{ font-size:36px; line-height:38px; }
  body.om .om-cta{ padding:96px 0; }
  body.om .om-cta-in{ border-radius:24px; padding:28px 22px; }
  body.om .om-cta p{ font-size:16px; line-height:26px; }
}

/* no slanted serif on this page: the second line of a heading is the same
   sans, in a quieter tone */
.ab-ph-mg{ font:300 112px/1 var(--sans); font-style:normal; letter-spacing:-.05em; }
.ab-sign .acc{ font-size:28px !important; line-height:32px !important; letter-spacing:-.02em !important; color:var(--porcelain) !important; }

/* navy from the first paint: the page and the strips at Safari's edges are
   navy before the script that keeps them in step has run, so no white bar
   shows at the top or the bottom while the page loads */
html:has(> body.om), html:has(> body.svc){ background:#05080F; }
body.om .edge, body.svc .edge{ background:#05080F; }

/* on a computer the film, its heading and the buttons fit on one screen:
   the frame is as wide as the height of the window allows */
@media (min-width:768px){
  .tmv-vd, .om-vd{ width:min(100%, max(560px, calc((100vh - 380px) * 16 / 9))); margin-left:auto; margin-right:auto; }
}

/* ---------- running today: one client at a time ----------
   Tabs of glass over a pane of glass; each client with what we built and
   the real screens in real devices. The cases take turns on their own
   (the line under a tab fills while it shows); a click takes over. */
.ab-cases-w{ display:flex; flex-direction:column; gap:14px; }
.ab-tabs{ position:relative; z-index:1; display:flex; gap:8px; }
.ab-tab{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 20px 0 10px; border:0; border-radius:26px; cursor:pointer;
  font:500 15px/1 var(--sans); color:rgba(246,244,239,.7); background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:background .3s ease, color .3s ease; -webkit-tap-highlight-color:transparent; }
.ab-tab img{ width:32px; height:32px; border-radius:9px; }
.ab-tab[aria-selected="true"]{ color:var(--obsidian); background:linear-gradient(180deg, #fff, #EFECE5); box-shadow:inset 0 1px 0 #fff, 0 10px 24px -12px rgba(0,0,0,.6); }
.ab-tab-p{ position:absolute; left:20px; right:20px; bottom:7px; height:2px; border-radius:1px; background:rgba(14,15,16,.1); opacity:0; }
.ab-tab-p::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--ultra); transform-origin:0 50%; transform:scaleX(0); }
.ab-cases.auto ~ .ab-tabs .ab-tab-p, .ab-cases-w.auto .ab-tab[aria-selected="true"] .ab-tab-p{ opacity:1; }
.ab-cases-w.auto .ab-tab[aria-selected="true"] .ab-tab-p::after{ animation:ab-tab 7s linear forwards; }
@keyframes ab-tab{ to{ transform:scaleX(1); } }
@media (hover:hover){ .ab-tab[aria-selected="false"]:hover{ background:rgba(255,255,255,.12); color:var(--porcelain); } }
.ab-tab:focus-visible{ outline:none; box-shadow:0 0 0 2px #05080F, 0 0 0 4px var(--ultra); }

.ab-cases{ display:grid; padding:0; overflow:hidden; }
.ab-case{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 8fr); align-items:center; gap:24px; min-height:560px; padding:0 0 0 48px; }
.ab-cases.js .ab-case{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s; }
.ab-cases.js .ab-case.on{ opacity:1; visibility:visible; }
.ab-cases:not(.js) .ab-case + .ab-case{ border-top:1px solid rgba(246,244,239,.1); }
.ab-case-t{ padding:48px 0; }
.ab-case-ic{ border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.4); }
.ab-case h3{ margin-top:20px; font:500 36px/40px var(--sans); letter-spacing:-.025em; }
.ab-case p{ margin-top:12px; font:400 17px/27px var(--sans); color:rgba(246,244,239,.74); }
.ab-case ul{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.ab-case li{ display:flex; align-items:center; gap:12px; font:400 15.5px/22px var(--sans); color:var(--porcelain); }
.ab-case li svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:var(--ultra); fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab-case-u{ display:inline-flex; align-items:center; gap:8px; margin-top:28px; height:40px; padding:0 16px; border-radius:20px; font:500 14px/1 var(--sans); color:var(--porcelain); text-decoration:none;
  background:rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.12); transition:background .2s ease; }
.ab-case-u svg{ width:14px; height:14px; }
@media (hover:hover){ .ab-case-u:hover{ background:rgba(255,255,255,.16); } }

/* the devices: a stage of their own, rising a little as the case comes in */
.ab-case-v{ position:relative; align-self:stretch; min-height:520px; }
.ab-case-v > *{ position:absolute; transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
.ab-cases.js .ab-case:not(.on) .ab-case-v > *{ transform:translate3d(0,24px,0); opacity:0; }
.cv-ipad{ left:2%; top:50%; width:86%; height:auto; margin-top:-30%; filter:drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.cv-mac{ left:0; top:50%; width:92%; margin-top:-27%; filter:drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.cv-mac .full{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.cv-ph{ right:6%; bottom:-4%; width:25%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); transition-delay:.12s; }
.cv-solo{ right:auto; left:50%; bottom:auto; top:7%; width:33%; margin-left:-16.5%; }
.cv-chip{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px; border-radius:20px; font:500 14px/1 var(--sans); color:#fff; white-space:nowrap;
  background:rgba(20,28,52,.5); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 32px rgba(0,0,0,.45); transition-delay:.3s; }
.cv-chip i{ width:8px; height:8px; border-radius:50%; background:#34C759; box-shadow:0 0 0 4px rgba(52,199,89,.22); }
.cv-c1{ left:4%; top:30%; } .cv-c2{ right:4%; top:56%; transition-delay:.45s; }
.ab-case.on .cv-chip{ animation:cv-float 6s ease-in-out infinite alternate; }
@keyframes cv-float{ to{ transform:translate3d(0,-8px,0); } }

@media (max-width:1023px){
  .ab-case{ grid-template-columns:minmax(0, 1fr); padding:0; gap:0; min-height:0; }
  .ab-case-v{ order:-1; min-height:0; height:clamp(300px, 62vw, 460px); }
  .ab-case-t{ padding:8px 24px 28px; }
}
@media (max-width:767px){
  .ab-tabs{ gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gut)); padding:0 var(--gut); }
  .ab-tabs::-webkit-scrollbar{ display:none; }
  .ab-tab{ flex:none; height:46px; padding:0 16px 0 8px; font-size:14px; }
  .ab-tab img{ width:30px; height:30px; }
  .ab-case-v{ height:clamp(260px, 78vw, 360px); }
  .ab-case-t{ padding:4px 18px 22px; }
  .ab-case h3{ margin-top:14px; font-size:28px; line-height:32px; }
  .ab-case-ic{ width:44px; height:44px; border-radius:12px; }
  .ab-case p{ font-size:15.5px; line-height:24px; }
  .ab-case li{ font-size:14.5px; }
  .cv-chip{ height:32px; padding:0 12px 0 10px; font-size:12px; }
  .cv-c1{ left:3%; top:22%; } .cv-c2{ right:3%; top:60%; }
}