/* Right 1 Group — concept 1, "The Group".
   Direction: brand flagship. Their real electric cyan on near black, big job
   photography, the four Right brands as numbered alternating rows.

   Palette is sampled from their own logo files, not guessed and not taken from
   their live site. Their website runs the page builder's out of the box colours
   (#6EC1E4 primary, #61CE70 accent) plus a greyed #46ADDB, none of which is the
   cyan in the logo artwork. The two lockups disagree with each other too:
     logo-horizontal-light.png  #00ADEF   (the one with 1300 RIGHT1 under it)
     logo-stacked-light.png     #00B8FF   (the one on their current header)
   Concept 1 backs the horizontal lockup, so #00ADEF is the primary here.

   Contrast, measured, not assumed:
     #00ADEF on #0B0D10  7.62:1   fine for text on this dark ground
     #00ADEF on #FFFFFF  2.55:1   FAILS, so cyan is never text on a light card
     white on #00ADEF    2.55:1   FAILS, so a cyan button never gets white text
     #0B0D10 on #00ADEF  7.62:1   which is why every cyan button carries ink
                                  text, the same way the logo sets a black 1
                                  inside its white box.
   Typography: Archivo Black display, Inter for everything else. One loud, one
   quiet. Archivo Black is a single 400 weight face, so it is never given a
   font-weight of its own. */

:root {
  --cy: #00ADEF;          /* Right 1 cyan, from logo-horizontal-light.png */
  --cy-lt: #52CFFF;       /* same hue lifted for small text on ink, 10.9:1 */
  --cy-dp: #0076A3;       /* same hue darkened, for the rare light ground */
  --ink: #0B0D10;         /* page ground, near the #000C0C of their favicon */
  --ink-2: #12161C;       /* lifted panel */
  --ink-3: #191F27;       /* card */
  --line: rgba(255,255,255,.11);
  --line-2: rgba(255,255,255,.18);
  --paper: #FFFFFF;
  --txt: #EAEFF4;         /* body text on ink, 16.4:1 */
  --mut: #9BA8B6;         /* muted text on ink, 6.9:1 — still passes */
  --disp: 'Archivo Black', 'Arial Black', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --r: 14px;
  --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, so without
   this every tapped nav link lands the section behind the sticky header. */
section[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--ink);
  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; }

/* width/height attributes map to a presentational height hint, so without this
   an aspect-ratio never applies and images resolve to their natural height */

a { color: var(--cy-lt); }

h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 400;              /* Archivo Black ships one weight only */
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  color: #fff;
}
h2 { font-size: clamp(30px, 4.6vw, 52px); }
h3 { font-size: clamp(22px, 2.5vw, 30px); }
h4 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
p { margin: 0 0 1.1em; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.eyebrow {
  font-family: var(--body);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cy-lt);
  margin: 0 0 14px;
}
.eyebrow b { color: var(--mut); font-weight: 400; }

.lede { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--mut); max-width: 62ch; }

em { font-style: normal; color: var(--cy); }

/* ---------------- scroll progress ---------------- */
.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 ----------------
   A cyan fill only ever carries ink text. White on this cyan is 2.55:1. */
.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;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.btn-pri { background: var(--cy); color: var(--ink); box-shadow: 0 8px 26px -12px rgba(0,173,239,.85); }
.btn-pri:hover { background: #35C0F5; transform: translateY(-2px); }
.btn-gho { background: rgba(255,255,255,.04); color: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-gho:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-w { width: 100%; }
.btn:disabled { background: #2A323C; color: #C8D2DC; box-shadow: none; cursor: default; transform: none; }

/* ---------------- header ---------------- */
.hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,13,16,.86);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .hd { background: #0B0D10; } }
.hd-in { display: flex; align-items: center; gap: 22px; min-height: 74px; }
.brand { display: block; margin-right: auto; flex: 0 0 auto; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; gap: 26px; }
.nav a {
  color: var(--txt); 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 var(--line-2); border-radius: 10px;
  background: rgba(255,255,255,.05); 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: 74px;
  background: #0E1217; border-bottom: 1px solid var(--line);
  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 - 74px); overflow-y: auto;
}
.mnav.on { transform: none; opacity: 1; pointer-events: auto; }
.mnav a {
  display: block; padding: 15px 4px; min-height: 54px;
  color: var(--txt); text-decoration: none;
  font-size: 17px; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mnav a:last-child { border-bottom: 0; color: var(--cy-lt); }

/* ---------------- hero ---------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(11,13,16,.97) 0%, rgba(11,13,16,.9) 42%, rgba(11,13,16,.62) 68%, rgba(11,13,16,.78) 100%),
    linear-gradient(0deg, rgba(11,13,16,1) 2%, rgba(11,13,16,0) 42%);
}
.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 52px; align-items: center;
  padding: clamp(58px, 8vw, 104px) 0 clamp(60px, 8vw, 112px);
}
.hero-copy { max-width: 640px; }
.hh {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(38px, 6.1vw, 74px);
  line-height: .99; letter-spacing: -.03em;
  color: #fff; margin: 0 0 20px;
}
.hsub { font-size: clamp(16.5px, 1.6vw, 19.5px); color: #C3CDD8; max-width: 56ch; margin-bottom: 30px; }
.hcta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 30px; }
.hchips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; }
.hchips li {
  font-size: 13.5px; font-weight: 600; color: #D5DEE7;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hchips li::before { content: '\2713'; color: var(--cy); font-weight: 700; margin-right: 7px; }

/* The slot the hero quiz takes. It must be a real, measurable box on desktop
   (the bundle picks the right hand visual by measuring, and skips anything
   absolutely positioned or named like a decoration) and it must be gone once
   the hero stacks, or it is dead space above the panel on every phone. */
.hero-fig {
  min-height: 430px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(0,173,239,.13), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------------- stat strip ---------------- */
.strip { background: var(--cy); color: var(--ink); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 0; }
.strip-i { display: flex; flex-direction: column; gap: 2px; }
.strip-i + .strip-i { border-left: 1px solid rgba(11,13,16,.2); padding-left: 24px; }
.strip-n { font-family: var(--disp); font-size: clamp(26px, 3vw, 36px); line-height: 1; letter-spacing: -.02em; }
.strip-i span { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: rgba(11,13,16,.82); }

/* ---------------- sections ---------------- */
.sec { padding: clamp(64px, 8.5vw, 118px) 0; }
.sec-dark { background: #080A0D; }
.sec-tint { background: var(--ink-2); }
.sec-who { background: #080A0D; }

/* ---------------- the four brands ---------------- */
.divs { display: flex; flex-direction: column; gap: clamp(38px, 5vw, 76px); margin-top: 52px; }
.dv {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(26px, 4vw, 60px); align-items: center;
}
.dv-flip .dv-media { order: 2; }
.dv-media { border-radius: var(--r); overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--line); }
.dv-media img { width: 100%; height: clamp(250px, 34vw, 420px); object-fit: cover; }
.dv-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,13,16,.5), transparent 55%);
}
.dv-kick {
  font-family: var(--disp); font-size: 15px; letter-spacing: .04em;
  color: var(--cy); margin: 0 0 8px;
}
.dv h3 { margin-bottom: 4px; }
.dv-sub {
  font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mut); margin: 0 0 16px;
}
.dv-body > p { color: var(--mut); }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15.5px; color: #D5DEE7; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--cy); border-bottom: 2.5px solid var(--cy);
  transform: rotate(-45deg);
}

/* ---------------- about ---------------- */
.about { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: clamp(30px, 4.5vw, 66px); align-items: start; }
.about-copy p { color: var(--mut); }
.about-facts { display: grid; gap: 14px; margin-top: 30px; }
.about-facts div {
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px var(--line);
  border-left: 3px solid var(--cy);
}
.about-facts b { display: block; color: #fff; font-size: 16px; }
.about-facts span { font-size: 14px; color: var(--mut); }
.about-figs { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.about-figs img { border-radius: 12px; width: 100%; height: 100%; object-fit: cover; }
.about-figs img:first-child { grid-column: 1 / -1; height: clamp(220px, 26vw, 320px); }
.about-figs img:last-child { height: clamp(150px, 17vw, 210px); grid-column: 1 / -1; }

/* ---------------- gallery ---------------- */
.gal {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 46px;
}
.gal figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.gal img { width: 100%; height: clamp(180px, 20vw, 250px); object-fit: cover; transition: transform .6s var(--ease); }
.gal .g-a { grid-column: span 2; }
.gal .g-a img { height: clamp(240px, 28vw, 340px); }
.gal figure:hover img { transform: scale(1.05); }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 13px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(0deg, rgba(8,10,13,.92), transparent);
}

/* ---------------- reviews ---------------- */
.rv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.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-size: 30px; color: #fff; line-height: 1; }
.stars { color: var(--cy); letter-spacing: 2px; font-size: 17px; }
.rvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.rv {
  margin: 0; padding: 26px 24px 24px; border-radius: var(--r);
  background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
}
/* the quote mark sits at the BOTTOM, not the top — at the top it paints
   straight through the first line of the review */
.rv::after {
  content: '\201D'; position: absolute; right: 20px; bottom: 6px;
  font-family: var(--disp); font-size: 62px; line-height: 1;
  color: rgba(0,173,239,.16);
}
.rv p { font-size: 15.5px; color: #D5DEE7; margin: 0 0 16px; }
.rv cite { font-style: normal; font-weight: 700; color: #fff; 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: 26px; max-width: 76ch; }

/* ---------------- who we work with ---------------- */
.who { list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.who li {
  padding: 24px 20px; border-radius: var(--r);
  background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line);
  border-top: 3px solid var(--cy);
}
.who b { display: block; font-family: var(--disp); font-weight: 400; font-size: 17px; color: #fff; 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-copy p { color: var(--mut); max-width: 52ch; }
.ct-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 2px; }
.ct-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.ct-list span { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); flex: 0 0 190px; }
.ct-list a, .ct-list b { font-family: var(--disp); font-weight: 400; font-size: clamp(19px, 2vw, 24px); color: #fff; text-decoration: none; }
.ct-list a { color: var(--cy-lt); }
.ct-list a:hover { color: #fff; }

/* the enquiry form, as liquid glass over the section ground */
.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;
}
/* specular sheen from the top left */
.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%);
}
/* a cyan rim along the bottom edge, masked so only the border shows */
.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,173,239,.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: #151A21; }
}
.ct-logo {
  display: flex; justify-content: center; padding: 6px 0 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,173,239,.12), transparent);
  border-radius: 12px 12px 0 0;
}
.ct-logo img { height: 74px; width: auto; }
.ct-form h3 { font-size: 21px; margin-bottom: 18px; color: #fff; }

/* Floating labels and 56px fields, from the SDT reference on Revolut's form
   design: the label starts inside the field and rises out of it on focus, so
   context is kept without a stacked label line, and the space that saves is
   spent on the touch target rather than on making the form longer. */
.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(9,12,16,.55);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  color: #fff; font-family: var(--body); font-size: 16px;
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.fr textarea { min-height: 96px; padding-top: 26px; resize: vertical; line-height: 1.5; }
.fr select { appearance: none; padding-right: 42px; cursor: pointer; }
.fr::after {                       /* the select chevron */
  content: ''; position: absolute; right: 18px; top: 26px;
  width: 9px; height: 9px; pointer-events: none; opacity: 0;
  border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut);
  transform: rotate(45deg);
}
.fr:has(select)::after { opacity: 1; }
/* placeholders stay invisible until the label has floated up, otherwise the
   two sit on top of each other in the resting state */
.fr input::placeholder, .fr textarea::placeholder { color: transparent; }
.fr input:focus::placeholder, .fr textarea:focus::placeholder { color: #6E7C8B; }
.fr input:focus, .fr select:focus, .fr textarea:focus {
  outline: none; background: rgba(9,12,16,.8);
  box-shadow: inset 0 0 0 2px var(--cy);
}
/* The label is authored BEFORE the field, so a sibling selector from the field
   can never reach it. Focus is handled by :focus-within, and the resting filled
   state (including a <select>, which always holds a value, and anything the
   browser autofills without firing an input event) 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,173,239,.1); box-shadow: inset 0 0 0 1px rgba(0,173,239,.3);
}
.f-done[hidden] { display: none; }
.f-note { margin: 12px 0 0; font-size: 12.5px; color: var(--mut); text-align: center; }

/* ---------------- footer ---------------- */
.ft { background: #060809; border-top: 1px solid var(--line); 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); font-size: 15px; max-width: 36ch; }
.ft-nav { display: flex; flex-direction: column; gap: 2px; }
.ft-nav h4 { color: #fff; margin-bottom: 12px; }
.ft-nav a {
  color: var(--mut); 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);
}
.ft-bar p { margin: 0; font-size: 13.5px; color: var(--mut); }
/* Website by Scalus — this site's own footer font and muted footer colour,
   with Scalus in this site's accent. 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); text-decoration: none; }
.by b { color: var(--cy-lt); font-weight: 700; }
.disc { margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: #7C8896; max-width: 96ch; }

/* ---------------- pinned mobile action 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,.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--line-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-gho { 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; }
.divs .dv.reveal:nth-child(2) { transition-delay: .06s; }
.divs .dv.reveal:nth-child(3) { transition-delay: .12s; }
.divs .dv.reveal:nth-child(4) { transition-delay: .18s; }
.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(.36em); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }

/* the pinned bar flashes the form's rim when it scrolls you there */
.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,173,239,.55), 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) {
  .who { grid-template-columns: repeat(3, 1fr); }
  .rvs { grid-template-columns: repeat(2, 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 is one column the quiz can never take this slot, so it is
     dead space above the panel rather than a placeholder for it */
  .hero-fig { display: none; }
  .dv, .about, .contact { grid-template-columns: 1fr; }
  .dv-flip .dv-media { order: 0; }
  .strip-in { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
  .strip-i:nth-child(3) { border-left: 0; padding-left: 0; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal .g-a { grid-column: span 2; }
  .about-figs { grid-template-columns: 1fr 1fr; }
  .about-figs img:last-child { grid-column: auto; }
}

@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: 66px; }
  .brand img { height: 34px; }
  .mnav { top: 66px; max-height: calc(100vh - 66px); }
  .hero-in { padding: 42px 0 58px; }
  .hh { font-size: clamp(31px, 9.2vw, 42px); }
  /* the glass form is the stronger call to action and these two were pushing
     it about 140px down the page, so the pinned bar carries them instead */
  .hcta { display: none; }
  .hchips li { font-size: 12.5px; padding: 8px 12px; }
  .strip-in { grid-template-columns: 1fr 1fr; padding: 22px 0; }
  .strip-i + .strip-i { border-left: 0; padding-left: 0; }
  .rvs, .who, .gal { grid-template-columns: 1fr; }
  .gal .g-a { grid-column: auto; }
  .gal img, .gal .g-a img { height: 220px; }
  .about-figs { grid-template-columns: 1fr; }
  .about-figs img:first-child, .about-figs img:last-child { height: 220px; }
  .ft-top { grid-template-columns: 1fr; gap: 26px; }
  .ct-list span { flex: 0 0 100%; }
  .ct-form { padding: 22px 18px 20px; }
  .ct-logo img { height: 62px; }
  .pinbar { display: flex; }
  /* clear the pinned bar so it never covers the footer's last line */
  .ft { padding-bottom: 92px; }
}