/* Right 1 Group — concept 2, "One Number".
   Direction: live experience. A bright white page under a black header, built
   around a switcher that answers in place when you pick one of the four Right
   brands, so the group structure is demonstrated rather than described.

   This direction backs the STACKED lockup, so its accent is that file's blue,
   #00B8FF, a notably brighter cyan than the #00ADEF in the horizontal lockup
   concept 1 uses. The two really are different in their own artwork, and which
   one is the real Right 1 blue is a decision for the call.

   Contrast, measured:
     #00B8FF on white   2.26:1   so cyan is NEVER text or an icon on white here
     #0B0D10 on #00B8FF 8.62:1   so a cyan fill always carries ink text
     #0076A3 on white   5.10:1   the same hue darkened, for links on white
     #00B8FF on ink     8.62:1   fine on the black header, contact and footer
   Typography: Anton display, Public Sans for everything else. Anton ships one
   weight, so it is never given a font-weight, and it is left in sentence case
   rather than forced uppercase. */

:root {
  --cy: #00B8FF;          /* from logo-stacked-light.png */
  --cy-dp: #0076A3;       /* same hue darkened for text on white, 5.1:1 */
  --cy-lt: #52CFFF;       /* same hue lifted for text on ink, 10.9:1 */
  --cy-wash: #E8F8FF;
  --ink: #0B0D10;
  --ink-2: #14181E;
  --paper: #FFFFFF;
  --paper-2: #F4F7FA;
  --txt: #16202B;         /* body on white, 14.6:1 */
  --mut: #5A6875;         /* muted on white, 5.9:1 */
  --mut-d: #9BA8B6;       /* muted on ink, 6.9:1 */
  --line: #E1E7ED;
  --line-d: rgba(255,255,255,.13);
  --disp: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
  --r: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Lenis carries the only scroll offset and Lenis is desktop only */
section[id] { scroll-margin-top: 92px; }

body {
  margin: 0; background: var(--paper); color: var(--txt);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--cy-dp); }

h1, h2, h3 {
  font-family: var(--disp); font-weight: 400;    /* Anton is one weight only */
  line-height: 1.03; letter-spacing: -.005em;
  margin: 0 0 .5em; color: var(--ink);
}
h2 { font-size: clamp(32px, 5vw, 58px); }
h3 { font-size: clamp(24px, 2.8vw, 34px); }
h4 { font-family: var(--body); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
p { margin: 0 0 1.1em; }
em { font-style: normal; color: var(--cy-dp); }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.eyebrow {
  font-family: var(--body); font-size: 12.5px; font-weight: 800;
  letter-spacing: .17em; text-transform: uppercase; color: var(--cy-dp);
  margin: 0 0 12px;
}
.eyebrow b { color: var(--mut); font-weight: 400; }
.lede { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--mut); max-width: 62ch; }

.prog { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90; background: var(--cy); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: 10px;
  font-family: var(--body); font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
/* a cyan fill always carries ink text — white on this cyan is 2.26:1 */
.btn-pri { background: var(--cy); color: var(--ink); box-shadow: 0 10px 26px -14px rgba(0,184,255,.9); }
.btn-pri:hover { background: #34C6FF; transform: translateY(-2px); }
.btn-out { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-out:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 17px; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-w { width: 100%; }
.btn:disabled { background: #DDE4EA; color: #4B5765; box-shadow: none; transform: none; cursor: default; }
/* on the dark bands the outline button has to invert or it disappears */
.sec-contact .btn-out, .pinbar .btn-out { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.sec-contact .btn-out:hover, .pinbar .btn-out:hover { background: #fff; color: var(--ink); }

/* ---------------- header ---------------- */
.hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,13,16,.93);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
@supports not (backdrop-filter: blur(1px)) { .hd { background: #0B0D10; } }
.hd-in { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.brand { display: block; margin-right: auto; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; }
.nav { display: flex; gap: 24px; }
.nav a { color: #E7EDF3; text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 0; position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--cy); transition: right .3s var(--ease); }
.nav a:hover { color: #fff; }
.nav a:hover::after { right: 0; }

.burger { display: none; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: rgba(255,255,255,.06); cursor: pointer; position: relative; }
.burger span, .burger::before, .burger::after { content: ''; position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span { top: 50%; margin-top: -1px; }
.burger::before { top: 16px; }
.burger::after { bottom: 16px; }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { top: 50%; margin-top: -1px; transform: rotate(45deg); }
.burger[aria-expanded="true"]::after { bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg); }

.mnav {
  display: none; position: fixed; left: 0; right: 0; top: 76px;
  background: #0E1217; padding: 8px 20px 22px; z-index: 55;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
  max-height: calc(100vh - 76px); overflow-y: auto;
}
.mnav.on { transform: none; opacity: 1; pointer-events: auto; }
.mnav a { display: block; padding: 15px 4px; min-height: 54px; color: #E7EDF3; text-decoration: none; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line-d); }
.mnav a:last-child { border-bottom: 0; color: var(--cy-lt); }

/* ---------------- hero ---------------- */
.hero { position: relative; background: var(--paper); overflow: hidden; }
/* a cyan rule sweeping under the hero, echoing the underline in the logo */
.hero-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--cy), rgba(0,184,255,0)); z-index: 1; }
.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: 52px; align-items: center;
  padding: clamp(52px, 7vw, 92px) 0 clamp(56px, 7.5vw, 100px);
}
.hero-copy { max-width: 620px; }
.hh { font-family: var(--disp); font-weight: 400; font-size: clamp(44px, 7.2vw, 88px); line-height: .96; letter-spacing: -.012em; color: var(--ink); margin: 0 0 20px; }
.hsub { font-size: clamp(16.5px, 1.6vw, 19.5px); color: var(--mut); max-width: 54ch; margin-bottom: 28px; }
.hcta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hchips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hchips li { font-size: 13.5px; font-weight: 600; color: var(--txt); padding: 9px 15px; border-radius: 999px; background: var(--cy-wash); }
.hchips li::before { content: '\2713'; color: var(--cy-dp); font-weight: 800; margin-right: 7px; }

/* the slot the hero quiz takes — a real measurable box on desktop, and gone
   once the hero stacks, or it is dead space above the panel on every phone */
.hero-panel { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(11,13,16,.55); }
.hero-panel img { width: 100%; height: clamp(360px, 42vw, 520px); object-fit: cover; }

/* ---------------- ticker ---------------- */
.ticker { background: var(--ink); color: #fff; }
.tk-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px 0; }
.tk { display: flex; flex-direction: column; }
.tk + .tk { border-left: 1px solid var(--line-d); padding-left: 22px; }
.tk b { font-family: var(--disp); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; color: var(--cy); }
.tk span { font-size: 13.5px; font-weight: 600; color: #C4CFDA; line-height: 1.35; margin-top: 3px; }

/* ---------------- sections ---------------- */
.sec { padding: clamp(60px, 8vw, 112px) 0; }
.sec-pick { background: var(--paper-2); }
.sec-work { background: var(--paper-2); }
.sec-who { background: var(--paper-2); }
.sec-contact { background: var(--ink); color: #E7EDF3; }
.sec-contact h2, .sec-contact h3 { color: #fff; }
.sec-contact .eyebrow { color: var(--cy-lt); }
.sec-contact p { color: var(--mut-d); }

/* ---------------- the switcher ---------------- */
.sw { margin-top: 44px; }
.sw-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sw-tab {
  /* a styled button needs its border reset explicitly, or the UA border
     survives on whichever edges you did not name */
  border: 0; text-align: left; cursor: pointer; font-family: var(--body);
  display: flex; flex-direction: column; gap: 3px;
  padding: 20px 20px 18px; min-height: 108px;
  border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .24s var(--ease), transform .24s var(--ease), background .24s var(--ease);
}
.sw-tab:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px #C3D0DB, 0 14px 28px -18px rgba(11,13,16,.5); }
.sw-tab.is-on { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); transform: none; }
.sw-n { font-family: var(--disp); font-weight: 400; font-size: 14px; color: var(--cy-dp); letter-spacing: .05em; }
.sw-tab.is-on .sw-n { color: var(--cy); }
.sw-name { font-family: var(--disp); font-weight: 400; font-size: clamp(19px, 1.9vw, 23px); color: var(--ink); line-height: 1.1; }
.sw-tab.is-on .sw-name { color: #fff; }
.sw-sub { font-size: 12.5px; font-weight: 600; color: var(--mut); line-height: 1.35; }
.sw-tab.is-on .sw-sub { color: #B7C3CF; }

.sw-stage { margin-top: 18px; }
.sw-pan { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 26px 54px -34px rgba(11,13,16,.5); }
.sw-pan[hidden] { display: none; }   /* [hidden] loses to display:grid */
.sw-pan.is-on { animation: panin .45s var(--ease); }
@keyframes panin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sw-media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.sw-body { padding: clamp(26px, 3.2vw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
.sw-body h3 { margin-bottom: 10px; }
.sw-body > p { color: var(--mut); }
.sw-body .btn { margin-top: 22px; }

.ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15.5px; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--cy-dp); border-bottom: 2.5px solid var(--cy-dp);
  transform: rotate(-45deg);
}

/* ---------------- one number ---------------- */
.sec-one { background: var(--ink); color: #E7EDF3; }
.sec-one h2 { color: #fff; }
.sec-one .eyebrow { color: var(--cy-lt); }
.sec-one em { color: var(--cy); }
.one-in { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.one-copy p { color: var(--mut-d); max-width: 52ch; }
.one-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.one-note { font-size: 14px; color: var(--mut-d); margin-top: 16px; }
.one-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.one-map li {
  padding: 18px 20px; border-radius: 12px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px var(--line-d);
  border-left: 4px solid var(--cy);
}
.one-map b { display: block; font-family: var(--disp); font-weight: 400; font-size: 20px; color: #fff; }
.one-map span { font-size: 14px; color: var(--mut-d); }

/* ---------------- about ---------------- */
.ab { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: clamp(30px, 4.5vw, 64px); align-items: center; }
.ab-copy p { color: var(--mut); }
.ab-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.ab-facts li { padding: 16px 18px; border-radius: 12px; background: var(--paper-2); border-left: 4px solid var(--cy); }
.ab-facts b { display: block; font-size: 16px; font-weight: 800; }
.ab-facts span { font-size: 14px; color: var(--mut); }
.ab-fig img { width: 100%; height: clamp(300px, 36vw, 460px); object-fit: cover; border-radius: var(--r); }

/* ---------------- gallery ---------------- */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.gal figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.gal img { width: 100%; height: clamp(190px, 21vw, 260px); object-fit: cover; transition: transform .6s var(--ease); }
.gal .g-w { grid-column: span 2; }
.gal figure:hover img { transform: scale(1.05); }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 15px 12px; font-size: 13.5px; font-weight: 700; color: #fff; background: linear-gradient(0deg, rgba(11,13,16,.92), transparent); }

/* ---------------- reviews ---------------- */
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.rv-head h2 { margin: 0; }
.rv-score { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--mut); }
.rv-score b { font-family: var(--disp); font-weight: 400; font-size: 34px; color: var(--ink); line-height: 1; }
.stars { color: var(--cy-dp); letter-spacing: 2px; font-size: 17px; }
.rvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
.rv { margin: 0; padding: 26px 24px 22px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); position: relative; }
/* the quote mark sits at the BOTTOM — at the top it paints through the first
   line of every review */
.rv::after { content: '\201D'; position: absolute; right: 18px; bottom: 2px; font-family: var(--disp); font-weight: 400; font-size: 62px; line-height: 1; color: rgba(0,184,255,.2); }
.rv p { font-size: 15.5px; color: #3A4653; margin: 0 0 14px; }
.rv cite { font-style: normal; font-weight: 800; font-size: 15px; display: block; }
.rv cite span { display: block; font-weight: 400; font-size: 13px; color: var(--mut); margin-top: 2px; }
.rv-note { font-size: 13.5px; color: var(--mut); margin-top: 24px; max-width: 76ch; }

/* ---------------- who ---------------- */
.who { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.who li { padding: 24px 20px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); border-top: 4px solid var(--cy); }
.who b { display: block; font-family: var(--disp); font-weight: 400; font-size: 18px; margin-bottom: 6px; }
.who span { font-size: 14px; color: var(--mut); line-height: 1.5; }

/* ---------------- contact ---------------- */
.contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.ct-list { list-style: none; margin: 28px 0 0; padding: 0; }
.ct-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line-d); }
.ct-list span { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut-d); flex: 0 0 170px; }
.ct-list a, .ct-list b { font-family: var(--disp); font-weight: 400; font-size: clamp(20px, 2vw, 25px); color: #fff; text-decoration: none; }
.ct-list a { color: var(--cy-lt); }
.ct-list a:hover { color: #fff; }

.ct-form {
  position: relative; isolation: isolate;
  padding: 26px 24px 24px; border-radius: 20px;
  background: linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 70px -34px rgba(0,0,0,.9);
  overflow: hidden;
}
.ct-form::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 8% 0%, rgba(255,255,255,.2), transparent 58%); }
.ct-form::after {
  content: ''; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,184,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@supports not (backdrop-filter: blur(1px)) { .ct-form { background: #161B22; } }
.ct-logo { display: flex; justify-content: center; padding: 6px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-d); background: linear-gradient(180deg, rgba(0,184,255,.13), transparent); border-radius: 12px 12px 0 0; }
.ct-logo img { height: 74px; width: auto; }
.ct-form h3 { font-size: 22px; margin-bottom: 18px; }

/* Floating labels and 56px fields, from the SDT reference on Revolut's forms:
   the label starts inside the field and rises out of it, so context is kept
   without a stacked label line and the space saved goes into the tap target. */
.fr { position: relative; margin-bottom: 12px; }
.fr label {
  position: absolute; left: 15px; top: 17px; z-index: 1;
  font-size: 15.5px; color: #9EABB9; pointer-events: none;
  transition: transform .18s var(--ease), font-size .18s var(--ease), color .18s var(--ease);
  transform-origin: 0 0;
}
.fr input, .fr select, .fr textarea {
  width: 100%; min-height: 56px; padding: 22px 15px 8px;
  border: 0; border-radius: 11px;
  background: rgba(6,9,12,.55);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2);
  color: #fff; font-family: var(--body); font-size: 16px;
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.fr select { appearance: none; padding-right: 42px; cursor: pointer; }
.fr:has(select)::after { content: ''; position: absolute; right: 18px; top: 26px; width: 9px; height: 9px; pointer-events: none; border-right: 2px solid var(--mut-d); border-bottom: 2px solid var(--mut-d); transform: rotate(45deg); }
.fr input::placeholder { color: transparent; }
.fr input:focus::placeholder { color: #6E7C8B; }
.fr input:focus, .fr select:focus { outline: none; background: rgba(6,9,12,.82); box-shadow: inset 0 0 0 2px var(--cy); }
/* the label is authored BEFORE the field, so no sibling selector can reach it;
   focus is :focus-within and the resting filled state is set by the JS */
.fr:focus-within label { transform: translateY(-11px) scale(.74); color: var(--cy-lt); }
.fr.filled label { transform: translateY(-11px) scale(.74); }
.f-done { margin: 14px 0 0; font-size: 14px; color: var(--cy-lt); padding: 13px 15px; border-radius: 10px; background: rgba(0,184,255,.11); box-shadow: inset 0 0 0 1px rgba(0,184,255,.32); }
.f-done[hidden] { display: none; }
.f-note { margin: 12px 0 0; font-size: 12.5px; color: var(--mut-d); text-align: center; }

/* ---------------- footer ---------------- */
.ft { background: #06080A; color: #C4CFDA; padding: clamp(52px, 6vw, 78px) 0 26px; }
.ft-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 34px; }
.ft-brand img { height: 44px; width: auto; margin-bottom: 16px; }
.ft-brand p { color: var(--mut-d); font-size: 15px; max-width: 36ch; }
.ft-nav { display: flex; flex-direction: column; }
.ft-nav h4 { color: #fff; }
.ft-nav a { color: var(--mut-d); text-decoration: none; font-size: 15px; display: inline-block; padding: 9px 0; min-height: 40px; }
.ft-nav a:hover { color: var(--cy-lt); }
.ft-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line-d); }
.ft-bar p { margin: 0; font-size: 13.5px; color: var(--mut-d); }
/* not inline-flex: that makes the text node and the <b> separate flex items
   and renders "Website byScalus" */
.by { display: inline-block; padding: 10px 0; font-size: 13.5px; color: var(--mut-d); text-decoration: none; }
.by b { color: var(--cy-lt); font-weight: 800; }
.disc { margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: #7C8896; max-width: 96ch; }

/* ---------------- pinned mobile bar ---------------- */
.pinbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11,13,16,.85);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.2);
  transform: translateY(105%); transition: transform .3s var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .pinbar { background: #0B0D10; } }
.pinbar.on { transform: none; }
.pinbar .btn { flex: 1 1 auto; min-height: 52px; }
.pinbar .btn-out { flex: 0 0 34%; }

/* ---------------- motion ---------------- */
.reveal { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.rvs .rv.reveal:nth-child(2) { transition-delay: .05s; }
.rvs .rv.reveal:nth-child(3) { transition-delay: .1s; }
.rvs .rv.reveal:nth-child(4) { transition-delay: .15s; }
.rvs .rv.reveal:nth-child(5) { transition-delay: .2s; }
.rvs .rv.reveal:nth-child(6) { transition-delay: .25s; }
.wc span { display: inline-block; opacity: 0; animation: wcin .62s var(--ease) forwards; }
@keyframes wcin { from { opacity: 0; transform: translateY(.34em); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
.hq-flash, .ct-form.hq-flash { animation: rimflash 1.3s var(--ease); }
@keyframes rimflash {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 70px -34px rgba(0,0,0,.9); }
  35% { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 3px rgba(0,184,255,.6), 0 30px 70px -34px rgba(0,0,0,.9); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .wc span { opacity: 1; animation: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .sw-tabs { grid-template-columns: repeat(2, 1fr); }
  .rvs { grid-template-columns: repeat(2, 1fr); }
  .who { grid-template-columns: repeat(3, 1fr); }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 960px) {
  .nav, .hd-cta { display: none; }
  .burger { display: block; }
  .mnav { display: block; }
  .hero-in { grid-template-columns: 1fr; gap: 0; }
  /* once the hero stacks the quiz can never take this slot, so it would be
     dead space above the panel rather than a placeholder for it */
  .hero-panel { display: none; }
  .sw-pan { grid-template-columns: 1fr; }
  .sw-media img { min-height: 240px; height: 240px; }
  .one-in, .ab, .contact { grid-template-columns: 1fr; }
  .tk-in { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
  .tk:nth-child(3) { border-left: 0; padding-left: 0; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal .g-w { grid-column: span 2; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  section[id] { scroll-margin-top: 84px; }
  .wrap { width: min(100% - 32px, var(--wrap)); }
  .hd-in { min-height: 68px; }
  .brand img { height: 40px; }
  .mnav { top: 68px; max-height: calc(100vh - 68px); }
  .hero-in { padding: 40px 0 54px; }
  .hh { font-size: clamp(36px, 11vw, 50px); }
  /* the glass panel is the stronger call to action and these two push it about
     140px further down, so the pinned bar carries them instead */
  .hcta { display: none; }
  .sw-tabs { grid-template-columns: 1fr; gap: 10px; }
  .sw-tab { min-height: 0; padding: 15px 18px; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .sw-tab .sw-sub { flex: 1 0 100%; }
  .tk-in { grid-template-columns: 1fr 1fr; padding: 22px 0; }
  .tk + .tk { border-left: 0; padding-left: 0; }
  .rvs, .who, .gal { grid-template-columns: 1fr; }
  .gal .g-w { grid-column: auto; }
  .gal img { height: 220px; }
  .ab-fig img { height: 240px; }
  .ct-list span { flex: 0 0 100%; }
  .ct-form { padding: 22px 18px 20px; }
  .ct-logo img { height: 62px; }
  .one-cta .btn { width: 100%; }
  .pinbar { display: flex; }
  /* clear the pinned bar so it never covers the footer's last line */
  .ft { padding-bottom: 92px; }
}