@import url("assets/phosphor/phosphor.css");

:root {
  --ink:#07101f;
  --muted:#5c6675;
  --line:#e7eaf0;
  --blue:#315efb;
  --pale:#f5f7fb;
  --max:1440px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  background:#fff;
  font-size:14px
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea {
  font:inherit
}
.site-header {
  height:82px;
  max-width:var(--max);
  margin:auto;
  padding:0 5%;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  z-index:50;
  border-bottom:1px solid rgba(231,234,240,.7)
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:20px;
  font-weight:800;
  white-space:nowrap
}
.brand-mark {
  width:25px;
  height:25px;
  position:relative;
  background:var(--ink);
  border-radius:7px;
  display:inline-block;
  overflow:hidden
}
.brand-mark i:first-child {
  position:absolute;
  background:white;
  width:15px;
  height:7px;
  border-radius:4px;
  top:5px;
  left:4px
}
.brand-mark i:last-child {
  position:absolute;
  background:white;
  width:8px;
  height:8px;
  border-radius:1px;
  transform:rotate(45deg);
  bottom:3px;
  left:6px
}
.nav-links {
  display:flex;
  gap:42px;
  margin:auto;
  font-weight:600;
  font-size:13px
}
.nav-links a {
  padding:31px 0 26px;
  border-bottom:2px solid transparent;
  transition:.2s
}
.nav-links a:hover,.nav-links a.active {
  color:var(--blue);
  border-color:var(--blue)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:13px 20px;
  border:0;
  border-radius:7px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s
}
.button:hover {
  transform:translateY(-2px);
  box-shadow:0 9px 25px rgba(7,16,31,.18)
}
.button-dark {
  background:var(--ink);
  color:#fff
}
.button-blue {
  background:var(--blue);
  color:#fff
}
.button-light {
  background:#fff;
  border:1px solid var(--line)
}
.header-cta {
  padding:12px 20px
}
.menu-toggle {
  display:none
}
.section {
  max-width:var(--max);
  min-height:650px;
  margin:auto;
  padding:105px 5%;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line)
}
.eyebrow {
  display:inline-block;
  text-transform:uppercase;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  background:#f0f2f7;
  border-radius:20px;
  padding:6px 11px;
  margin-bottom:17px
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:48px;
  line-height:1.08;
  letter-spacing:-.045em;
  margin-bottom:22px
}
h1 em {
  font-style:normal;
  color:var(--blue)
}
h2 {
  font-size:39px;
  line-height:1.12;
  letter-spacing:-.04em;
  margin-bottom:20px
}
p {
  line-height:1.65;
  color:var(--muted)
}
.section-copy p,.hero-copy p,.about-copy p,.contact-copy>p,.pricing-intro>p {
  max-width:430px
}
.actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:28px
}
.text-link {
  font-weight:700;
  font-size:12px
}
.text-link span {
  margin-left:12px
}
.dot-grid {
  position:absolute;
  width:170px;
  height:150px;
  background-image:radial-gradient(#86a3ff 1.3px,transparent 1.3px);
  background-size:17px 17px;
  opacity:.75
}
.hero {
  display:grid;
  grid-template-columns:42% 58%;
  grid-template-rows:auto auto;
  align-items:center;
  padding-top:70px
}
.hero-copy {
  z-index:2
}
.hero-visual {
  height:480px;
  position:relative
}
.hero-dots {
  right:0;
  bottom:40px
}
.orbit {
  position:absolute;
  width:86%;
  left:-5%;
  top:40px;
  fill:none;
  stroke:#b7c7ff;
  stroke-width:5;
  opacity:.8
}
.phone {
  position:absolute;
  z-index:4;
  width:238px;
  height:460px;
  background:#050b13;
  border:7px solid #171d25;
  border-radius:38px;
  left:21%;
  top:0;
  color:#fff;
  box-shadow:0 35px 55px rgba(6,13,24,.23);
  overflow:hidden
}
.phone:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  box-shadow:inset 0 0 0 1px #4e5662;
  pointer-events:none
}
.phone-top {
  font-size:7px;
  height:32px;
  padding:11px 13px 0;
  display:flex;
  justify-content:space-between
}
.phone-top i {
  position:absolute;
  background:#000;
  border-radius:0 0 12px 12px;
  width:88px;
  height:16px;
  top:0;
  left:68px
}
.phone-body {
  padding:2px 14px
}
.phone-body>small {
  color:#7c8898;
  font-size:7px
}
.phone-body h3 {
  font-size:15px;
  margin:3px 0 18px
}
.residence {
  background:linear-gradient(135deg,#101b2d,#1c2a3d);
  padding:11px;
  border-radius:10px;
  display:flex;
  justify-content:space-between;
  margin-bottom:14px;
  font-size:8px
}
.residence b {
  display:block;
  font-size:12px;
  margin-top:3px
}
.mini-building {
  font-size:29px;
  color:#91a5c6
}
.shortcuts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin:5px 0 16px
}
.shortcuts span {
  background:#111c2d;
  border-radius:9px;
  padding:9px 2px;
  text-align:center;
  font-size:13px
}
.shortcuts b,.phone-nav b {
  display:block;
  font-size:5px;
  margin-top:5px;
  font-weight:500
}
.event {
  display:grid;
  grid-template-columns:30px 1fr 10px;
  align-items:center;
  background:#111c2d;
  padding:8px;
  border-radius:9px;
  margin-top:6px;
  font-size:7px
}
.event i {
  font-size:16px
}
.event small {
  display:block;
  font-size:5px;
  color:#94a1b1
}
.phone-nav {
  position:absolute;
  bottom:8px;
  left:10px;
  right:10px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  text-align:center;
  color:#8693a5;
  font-size:10px
}
.phone-nav .plus {
  font-size:20px;
  background:var(--blue);
  color:#fff;
  width:30px;
  height:30px;
  border-radius:50%;
  line-height:28px
}
.hero-building {
  position:absolute;
  width:49%;
  height:460px;
  object-fit:cover;
  object-position:46% 70%;
  right:-7%;
  bottom:-28px;
  mix-blend-mode:multiply
}
.metrics {
  grid-column:1/3;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:700px;
  margin-top:18px
}
.metrics>div {
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:25px auto
}
.metric-icon {
  grid-row:1/3;
  color:var(--blue);
  font-size:20px
}
.metrics strong {
  font-size:15px
}
.metrics small {
  font-size:9px;
  color:var(--muted);
  line-height:1.5
}
.solutions {
  display:grid;
  grid-template-columns:42% 58%;
  grid-template-rows:auto auto;
  gap:55px 80px
}
.role-list {
  display:grid;
  gap:12px
}
.role-list article {
  height:105px;
  border:1px solid var(--line);
  box-shadow:0 10px 27px rgba(17,30,54,.05);
  border-radius:13px;
  display:grid;
  grid-template-columns:120px 1fr 30px;
  align-items:center;
  overflow:hidden
}
.role-list img {
  width:120px;
  height:105px;
  object-fit:cover
}
.role-list article:nth-child(1) img {
  object-position:0
}
.role-list article:nth-child(2) img {
  object-position:50%
}
.role-list article:nth-child(3) img {
  object-position:100%
}
.role-list h3 {
  font-size:14px;
  margin:0 0 7px
}
.role-list p {
  font-size:11px;
  line-height:1.5;
  margin:0;
  max-width:220px
}
.role-list>article>span {
  font-size:18px
}
.benefits {
  grid-column:1/3;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px
}
.benefits article {
  display:flex;
  gap:16px
}
.benefits i,.module-grid i {
  font-style:normal;
  color:var(--blue);
  background:#f1f5ff;
  border-radius:9px;
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  font-size:19px
}
.benefits h3 {
  font-size:12px;
  margin:3px 0 4px
}
.benefits p {
  font-size:10px;
  line-height:1.5
}
.modules {
  display:grid;
  grid-template-columns:31% 1fr;
  gap:75px
}
.modules .section-copy {
  padding-top:40px
}
.modules .button {
  margin-top:18px
}
.module-dots {
  left:0;
  bottom:5px
}
.module-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}
.module-grid article {
  border:1px solid var(--line);
  border-radius:13px;
  padding:22px;
  min-height:150px;
  box-shadow:0 8px 30px rgba(20,30,50,.03);
  transition:.25s
}
.module-grid article:hover {
  transform:translateY(-5px);
  border-color:#cdd7ff;
  box-shadow:0 16px 35px rgba(49,94,251,.1)
}
.module-grid i {
  width:38px;
  height:38px;
  margin-bottom:14px
}
.module-grid h3 {
  font-size:13px;
  margin-bottom:7px
}
.module-grid p {
  font-size:10px;
  line-height:1.55;
  margin:0
}
.pricing {
  display:grid;
  grid-template-columns:25% 1fr;
  gap:55px;
  padding-right:4%
}
.pricing-intro {
  padding-top:13px
}
.billing {
  display:inline-flex;
  background:#f5f6fa;
  border-radius:8px;
  padding:4px;
  margin-top:20px
}
.billing button {
  font-size:10px;
  border:0;
  background:transparent;
  padding:9px 16px;
  border-radius:6px;
  cursor:pointer
}
.billing button.active {
  background:#fff;
  box-shadow:0 2px 8px #dfe3ec
}
.billing span {
  color:var(--blue)
}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  z-index:2
}
.price-card,.included {
  border:1px solid var(--line);
  border-radius:13px;
  padding:24px 19px;
  min-height:430px;
  background:rgba(255,255,255,.94);
  position:relative;
  display:flex;
  flex-direction:column
}
.price-card.featured {
  border-color:var(--blue);
  box-shadow:0 15px 35px rgba(49,94,251,.14)
}
.popular {
  position:absolute;
  left:-1px;
  right:-1px;
  top:-28px;
  height:28px;
  border-radius:9px 9px 0 0;
  background:var(--blue);
  color:white;
  text-align:center;
  padding:8px;
  font-size:8px
}
.price-card h3,.included h3 {
  font-size:13px;
  margin-bottom:8px
}
.price-card>p {
  font-size:9px;
  line-height:1.5;
  min-height:45px
}
.price {
  font-size:24px;
  margin-top:5px
}
.price-card>small {
  font-size:8px;
  color:var(--muted);
  margin:4px 0 15px
}
.price-card ul,.included ul {
  list-style:none;
  padding:0;
  margin:0 0 16px;
  font-size:9px;
  line-height:2.6
}
.price-card li:before {
  content:'\e182';
  font-family:"Phosphor";
  color:var(--blue);
  margin-right:8px
}
.included li:before {
  content:'\e06c';
  font-family:"Phosphor";
  color:var(--blue);
  margin-right:8px
}
.price-card .button {
  margin-top:auto;
  width:100%;
  padding:11px
}
.pricing-building {
  position:absolute;
  width:250px;
  height:250px;
  object-fit:cover;
  object-position:50% 80%;
  right:-40px;
  bottom:-40px;
  mix-blend-mode:multiply;
  opacity:.82
}
.about {
  display:grid;
  grid-template-columns:30% 40% 23%;
  grid-template-rows:auto auto;
  gap:30px 45px
}
.about-copy {
  padding-top:15px
}
.about-photo {
  width:100%;
  height:315px;
  object-fit:cover;
  border-radius:12px
}
.about-values h3 {
  font-size:15px;
  margin:26px 0 10px
}
.about-values h3:first-child {
  margin-top:28px
}
.about-values p {
  font-size:10px
}
.about-values ul {
  list-style:none;
  padding:0;
  font-size:10px;
  line-height:2.5
}
.about-values li {
  display:flex;
  gap:10px
}
.about-stats {
  grid-column:1/3;
  margin-left:13%;
  border:1px solid var(--line);
  border-radius:12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:21px
}
.about-stats div {
  text-align:center;
  border-right:1px solid var(--line)
}
.about-stats div:last-child {
  border:0
}
.about-stats strong {
  display:block;
  font-size:22px
}
.about-stats span {
  font-size:10px
}
.about-dots {
  left:0;
  bottom:10px
}
.contact {
  display:grid;
  grid-template-columns:35% 40% 25%;
  gap:45px;
  min-height:680px
}
.contact-copy h2 {
  font-size:40px
}
.contact-list {
  margin:27px 0 22px;
  display:grid;
  gap:16px
}
.contact-list>a,.contact-list>span {
  display:flex;
  gap:13px;
  font-size:10px
}
.contact-list i {
  font-style:normal;
  width:26px;
  height:26px;
  color:var(--blue);
  background:#edf2ff;
  border-radius:7px;
  display:grid;
  place-items:center
}
.contact-list b,.contact-list small {
  display:block
}
.contact-list small {
  color:var(--muted);
  margin-top:2px
}
.socials {
  display:flex;
  gap:14px
}
.socials a {
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:#fff;
  font-size:10px;
  font-weight:700
}
.contact-form {
  border:1px solid var(--line);
  border-radius:15px;
  padding:28px;
  box-shadow:0 18px 50px rgba(20,30,50,.07);
  z-index:2;
  background:#fff;
  align-self:start
}
.contact-form label {
  font-size:9px;
  font-weight:700;
  display:block;
  margin-bottom:12px
}
.contact-form input,.contact-form textarea {
  display:block;
  width:100%;
  border:1px solid #d9dee8;
  border-radius:6px;
  padding:11px;
  margin-top:6px;
  font-size:10px;
  outline:none
}
.contact-form input:focus,.contact-form textarea:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #eef2ff
}
.contact-form textarea {
  height:100px;
  resize:vertical
}
.contact-form button {
  width:100%;
  margin-top:4px
}
.form-status {
  font-size:10px;
  color:#15803d;
  text-align:center;
  margin:10px 0 0
}
.contact-art {
  position:absolute;
  right:0;
  bottom:0;
  width:31%;
  height:86%
}
.contact-art svg {
  position:absolute;
  right:0;
  top:0;
  width:130%;
  fill:none;
  stroke:#c5d1ff;
  stroke-width:5
}
.contact-art img {
  width:115%;
  height:75%;
  object-fit:cover;
  object-position:35% 40%;
  position:absolute;
  right:-32%;
  bottom:-12%;
  mix-blend-mode:multiply
}
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s ease
}
.reveal.visible {
  opacity:1;
  transform:none
}
footer {
  max-width:var(--max);
  margin:auto;
  padding:34px 5%;
  display:flex;
  align-items:center;
  gap:30px
}
footer .brand {
  font-size:16px
}
footer .brand-mark {
  width:21px;
  height:21px
}
footer p {
  font-size:11px;
  margin:0 auto 0 0
}
footer>span {
  font-size:10px;
  color:var(--muted)
}

@media(max-width:1050px) {
  .nav-links {
    gap:20px
  }
  .section {
    padding-left:4%;
    padding-right:4%
  }
  .hero {
    grid-template-columns:45% 55%
  }
  .phone {
    left:8%
  }
  .solutions {
    gap:50px
  }
  .pricing {
    grid-template-columns:1fr
  }
  .pricing-intro {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 30px
  }
  .pricing-intro .eyebrow {
    width:max-content
  }
  .pricing-intro h2 {
    grid-row:2/4
  }
  .billing {
    width:max-content
  }
  .about {
    grid-template-columns:30% 42% 1fr;
    gap:25px
  }
  .contact {
    grid-template-columns:35% 50%;
  }
  .contact-art {
    opacity:.25
  }
  .pricing-building {
    display:none
  }
}

@media(max-width:760px) {
  .site-header {
    height:70px
  }
  .menu-toggle {
    display:grid;
    margin-left:auto;
    width:42px;
    height:42px;
    border:0;
    background:transparent;
    place-content:center;
    gap:6px
  }
  .menu-toggle span {
    width:22px;
    height:2px;
    background:var(--ink);
    display:block
  }
  .nav-links {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:69px;
    background:#fff;
    padding:20px 5%;
    box-shadow:0 20px 30px rgba(0,0,0,.08);
    flex-direction:column;
    gap:0
  }
  .nav-links.open {
    display:flex
  }
  .nav-links a {
    padding:13px 0
  }
  .header-cta {
    display:none
  }
  .section {
    min-height:0;
    padding:75px 6%
  }
  h1 {
    font-size:41px
  }
  h2,.contact-copy h2 {
    font-size:33px
  }
  .hero {
    display:block;
    padding-top:65px
  }
  .hero-copy p {
    max-width:500px
  }
  .hero-visual {
    height:500px;
    margin-top:40px
  }
  .phone {
    left:2%;
    transform:scale(.91);
    transform-origin:bottom left
  }
  .hero-building {
    right:-15%;
    width:60%;
    height:430px
  }
  .metrics {
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:35px
  }
  .solutions,.modules,.about,.contact {
    display:block
  }
  .role-list,.module-grid,.benefits {
    margin-top:45px
  }
  .benefits {
    grid-template-columns:repeat(2,1fr)
  }
  .modules .section-copy {
    padding:0
  }
  .module-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .pricing {
    display:block
  }
  .pricing-intro {
    display:block
  }
  .pricing-grid {
    grid-template-columns:repeat(2,1fr);
    margin-top:55px
  }
  .price-card.featured {
    margin-top:28px
  }
  .included {
    min-height:300px
  }
  .about-photo {
    margin-top:35px
  }
  .about-values {
    margin-top:30px
  }
  .about-stats {
    margin:35px 0 0
  }
  .contact-form {
    margin-top:40px
  }
  .contact-art {
    display:none
  }
  footer {
    flex-wrap:wrap
  }
  footer p {
    order:3;
    width:100%
  }
}

@media(max-width:480px) {
  body {
    font-size:13px
  }
  .section {
    padding:62px 5%
  }
  h1 {
    font-size:36px
  }
  .actions {
    gap:18px
  }
  .hero-visual {
    height:420px
  }
  .phone {
    width:210px;
    height:410px;
    transform:scale(.85);
    top:-30px
  }
  .hero-building {
    height:350px;
    bottom:0
  }
  .metrics {
    margin-top:5px
  }
  .role-list article {
    grid-template-columns:92px 1fr 22px
  }
  .role-list img {
    width:276px
  }
  .role-photo {
    width:92px
  }
  .role-list article:nth-child(2) .role-photo img {
    left:-92px
  }
  .role-list article:nth-child(3) .role-photo img {
    left:-184px
  }
  .benefits,.module-grid,.pricing-grid {
    grid-template-columns:1fr
  }
  .pricing-grid {
    gap:40px
  }
  .price-card.featured {
    margin-top:0
  }
  .about-stats {
    grid-template-columns:repeat(2,1fr);
    gap:20px
  }
  .about-stats div:nth-child(2) {
    border:0
  }
  .about-values {
    padding:0 4px
  }
  .contact-form {
    padding:20px
  }
}

.role-photo {
  width:120px;
  height:105px;
  overflow:hidden;
  position:relative
}
.role-list .role-photo img {
  position:absolute;
  width:360px;
  height:105px;
  max-width:none;
  object-fit:cover;
  top:0
}
.role-list article:nth-child(1) .role-photo img {
  left:0
}
.role-list article:nth-child(2) .role-photo img {
  left:-120px
}
.role-list article:nth-child(3) .role-photo img {
  left:-240px
}
@media(max-width:480px) {
  .role-photo {
    width:92px
  }
  .role-list .role-photo img {
    width:276px
  }
  .role-list article:nth-child(2) .role-photo img {
    left:-92px
  }
  .role-list article:nth-child(3) .role-photo img {
    left:-184px
  }
}

.phone[data-figma-node="272:42"] {
  width:213px;
  height:460px;
  left:24%;
  top:0;
  border:0;
  border-radius:16px;
  background:transparent;
  box-shadow:0 35px 55px rgba(6,13,24,.28)
}
.phone[data-figma-node="272:42"]:after {
  display:none
}
.figma-mobile-ui {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
@media(max-width:1050px) {
  .phone[data-figma-node="272:42"] {
    left:12%
  }
}
@media(max-width:760px) {
  .phone[data-figma-node="272:42"] {
    left:4%;
    width:213px;
    height:460px
  }
}
@media(max-width:480px) {
  .phone[data-figma-node="272:42"] {
    width:190px;
    height:411px;
    left:2%;
    top:-22px
  }
}

.brand-logo {
  display:block;
  width:118px;
  height:auto
}
.site-header>.brand {
  min-width:118px
}
footer .brand-logo {
  width:100px
}
@media(max-width:480px) {
  .brand-logo {
    width:108px
  }
  .site-header>.brand {
    min-width:108px
  }
}

.role-list .role-photo img,.role-list article:nth-child(n) .role-photo img {
  position:static;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  max-width:100%
}

.standalone {
  min-height:calc(100vh - 82px);
  border-bottom:0
}
.home-hero {
  max-width:var(--max);
  min-height:680px;
  margin:auto;
  padding:70px 4.2% 40px;
  display:grid;
  grid-template-columns:42% 58%;
  position:relative;
  overflow:hidden
}
.home-copy {
  z-index:5;
  padding-top:55px
}
.home-copy h1 {
  font-size:58px;
  line-height:1.1;
  margin:28px 0 22px
}
.home-copy>p {
  font-size:15px;
  max-width:460px
}
.home-kicker {
  display:inline-flex;
  align-items:center;
  border:1px solid #dbe1ec;
  border-radius:30px;
  padding:9px 14px 9px 10px;
  font-size:10px;
  font-weight:700;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 25px rgba(7,16,31,.04)
}
.home-kicker i {
  width:11px;
  height:11px;
  border-radius:50%;
  background:#2f7bff;
  box-shadow:0 0 0 5px #eaf0ff;
  margin-right:10px
}
.home-dots {
  left:0;
  top:130px
}
.home-metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:48px
}
.home-metrics>div {
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-rows:auto auto
}
.home-metrics i {
  grid-row:1/3;
  color:#2563ff;
  font-style:normal;
  font-size:25px
}
.home-metrics strong {
  font-size:21px
}
.home-metrics span {
  font-size:9px;
  line-height:1.6;
  color:var(--muted)
}
.platform-visual {
  position:relative;
  height:585px
}
.home-building {
  position:absolute;
  right:-5%;
  top:-100px;
  width:69%;
  height:510px;
  object-fit:cover;
  object-position:50% 23%;
  mix-blend-mode:multiply;
  opacity:.88
}
.home-orbit {
  position:absolute;
  left:-23%;
  top:160px;
  width:105%;
  fill:none;
  stroke:#7ba1ff;
  stroke-width:4;
  filter:drop-shadow(0 0 5px rgba(47,123,255,.3))
}
.laptop {
  position:absolute;
  z-index:4;
  left:6%;
  top:105px;
  width:94%;
  height:410px
}
.laptop-screen {
  width:100%;
  height:365px;
  border:10px solid #03070d;
  border-radius:24px 24px 7px 7px;
  background:#06101d;
  overflow:hidden;
  display:grid;
  grid-template-columns:18% 82%;
  color:#fff;
  box-shadow:0 28px 45px rgba(5,13,25,.28)
}
.laptop-base {
  height:16px;
  background:linear-gradient(#c9cbd0,#73777d);
  margin:-1px -18px 0;
  border-radius:0 0 45% 45%;
  box-shadow:0 8px 12px rgba(0,0,0,.2)
}
.dash-side {
  background:#071321;
  padding:24px 11px;
  display:flex;
  flex-direction:column;
  gap:14px;
  border-right:1px solid #162638;
  font-size:7px
}
.dash-side b {
  font-size:12px;
  margin-bottom:8px
}
.dash-side span {
  padding:8px;
  border-radius:5px;
  color:#9fb2c7
}
.dash-side .selected {
  color:#fff;
  background:linear-gradient(90deg,#1247ba,#1973ff)
}
.dash-main {
  padding:22px 17px
}
.dash-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:13px
}
.dash-title>b {
  font-size:14px
}
.dash-title span {
  background:#101d2d;
  padding:7px 10px;
  border-radius:5px;
  color:#b8c5d4;
  font-size:6px
}
.dash-kpis {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}
.dash-kpis>div,.dash-grid>div {
  background:#0e1b2b;
  border:1px solid #162638;
  border-radius:7px;
  padding:10px
}
.dash-kpis small {
  display:block;
  font-size:6px;
  color:#b8c5d4
}
.dash-kpis b {
  display:block;
  font-size:17px;
  margin:6px 0
}
.dash-kpis em {
  color:#39d98a;
  font-style:normal;
  font-size:6px
}
.dash-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:8px;
  margin-top:9px
}
.dash-grid>div {
  height:112px
}
.dash-grid b {
  font-size:7px
}
.chart svg {
  width:100%;
  height:78px;
  fill:none;
  stroke:#2878ff;
  stroke-width:2
}
.chart .grid-line {
  stroke:#243448;
  stroke-width:.7
}
.donut i {
  width:67px;
  height:67px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:13px auto 0;
  background:conic-gradient(#146dff 0 40%,#1e4074 40% 73%,#233146 73%);
  position:relative
}
.donut i:after {
  content:"";
  position:absolute;
  width:39px;
  height:39px;
  border-radius:50%;
  background:#0e1b2b
}
.donut span {
  z-index:2;
  font-style:normal;
  font-size:11px;
  text-align:center
}
.donut small {
  display:block;
  font-size:5px;
  color:#9fb2c7
}
.requests {
  display:flex;
  flex-direction:column;
  gap:6px
}
.requests>b {
  margin-bottom:3px
}
.requests span {
  font-size:6px;
  border-top:1px solid #203044;
  padding-top:6px
}
.requests em {
  float:right;
  font-style:normal;
  color:#9fb2c7
}
.bars>div {
  height:77px;
  display:flex;
  align-items:end;
  justify-content:space-around;
  border-bottom:1px solid #314257
}
.bars i {
  display:block;
  width:15px;
  background:linear-gradient(#3281ff,#115bdc);
  height:32px
}
.bars i:nth-child(2) {
  height:42px
}
.bars i:nth-child(3) {
  height:38px
}
.bars i:nth-child(4) {
  height:56px
}
.bars i:nth-child(5) {
  height:68px
}
.home-phone {
  position:absolute;
  z-index:7;
  left:-5%;
  bottom:15px;
  width:140px;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.3))
}
.home-phone img {
  display:block;
  width:100%;
  border-radius:15px
}
.pillars {
  max-width:var(--max);
  margin:auto;
  padding:0 4.2% 55px
}
.pillars-heading {
  text-align:center;
  margin-bottom:20px
}
.pillars-heading span {
  text-transform:uppercase;
  color:#2563ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em
}
.pillars-heading h2 {
  font-size:28px;
  margin:12px 0
}
.pillar-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.pillar-grid article {
  height:215px;
  border:1px solid #dfe4ec;
  border-radius:10px;
  padding:18px;
  position:relative;
  overflow:hidden;
  box-shadow:0 7px 20px rgba(10,25,45,.04)
}
.pillar-grid>article>i {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:8px;
  background:#1266ff;
  color:#fff;
  font-style:normal;
  font-size:20px;
  box-shadow:0 8px 20px rgba(18,102,255,.25)
}
.pillar-grid h3 {
  font-size:18px;
  margin:16px 0 6px
}
.pillar-grid p {
  font-size:9px;
  max-width:165px;
  line-height:1.6
}
.pillar-grid a {
  position:absolute;
  bottom:18px;
  color:#1266ff;
  font-size:9px;
  font-weight:700
}
.pillar-grid article>img {
  position:absolute;
  width:48%;
  height:90%;
  right:-2%;
  bottom:-20%;
  object-fit:cover;
  object-position:center;
  mix-blend-mode:multiply
}
.people-cloud {
  position:absolute;
  right:13px;
  bottom:16px;
  width:135px;
  height:105px;
  background:#edf3ff;
  border-radius:50%
}
.people-cloud span {
  position:absolute;
  border:4px solid #fff;
  background:#6e849c;
  width:26px;
  height:26px;
  border-radius:50%;
  font-size:0
}
.people-cloud span:first-child {
  top:-7px;
  left:11px
}
.people-cloud span:nth-child(2) {
  top:10px;
  right:10px
}
.people-cloud b {
  position:absolute;
  top:37px;
  left:10px;
  background:#fff;
  border-radius:9px;
  padding:9px;
  font-size:7px;
  box-shadow:0 8px 18px #bec9dd
}
.people-cloud em {
  position:absolute;
  bottom:-8px;
  right:35px;
  background:#0d1a2d;
  color:#fff;
  width:29px;
  height:29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:8px
}
.request-card {
  position:absolute;
  right:16px;
  bottom:20px;
  width:130px;
  background:#0c192a;
  color:#fff;
  border-radius:9px;
  padding:11px;
  box-shadow:0 12px 22px rgba(0,0,0,.24)
}
.request-card small,.request-card b,.request-card span {
  display:block;
  font-size:7px;
  margin-bottom:5px
}
.request-card span {
  background:#12243a;
  padding:7px;
  border-radius:5px;
  color:#b9c7d6
}
.mini-phone {
  position:absolute;
  right:15px;
  bottom:-38px;
  width:105px;
  height:160px;
  border:5px solid #10151e;
  border-radius:16px 16px 0 0;
  background:#091522;
  color:white;
  padding:13px 8px
}
.mini-phone b,.mini-phone span,.mini-phone small {
  display:block;
  font-size:7px;
  margin-bottom:9px
}
.mini-phone span,.mini-phone small {
  background:#12243a;
  padding:8px;
  border-radius:5px
}
.mini-phone small {
  text-align:center
}

@media(max-width:1050px) {
  .home-copy h1 {
    font-size:47px
  }
  .laptop {
    width:105%;
    left:0
  }
  .home-phone {
    left:-3%
  }
  .pillar-grid p {
    max-width:135px
  }
  .home-hero {
    grid-template-columns:40% 60%
  }
}

@media(max-width:760px) {
  .standalone {
    min-height:0
  }
  .home-hero {
    display:block;
    padding:52px 6% 30px
  }
  .home-copy {
    padding:0
  }
  .home-copy h1 {
    font-size:42px
  }
  .platform-visual {
    margin-top:35px;
    height:460px
  }
  .laptop {
    top:60px;
    left:8%;
    width:96%;
    height:340px
  }
  .laptop-screen {
    height:300px
  }
  .dash-main {
    padding:14px 10px
  }
  .dash-kpis b {
    font-size:12px
  }
  .dash-grid>div {
    height:92px
  }
  .home-building {
    top:-100px
  }
  .home-phone {
    width:110px;
    bottom:0;
    left:0
  }
  .home-metrics {
    margin-top:35px
  }
  .pillar-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .pillar-grid article {
    height:225px
  }
  .pillars {
    padding:35px 6% 50px
  }
}

@media(max-width:480px) {
  .home-copy h1 {
    font-size:36px
  }
  .home-copy>p {
    font-size:13px
  }
  .home-kicker {
    font-size:8px
  }
  .home-metrics {
    grid-template-columns:1fr;
    gap:18px
  }
  .platform-visual {
    height:355px
  }
  .laptop {
    top:45px;
    left:12%;
    width:105%;
    height:250px
  }
  .laptop-screen {
    height:225px;
    border-width:6px;
    border-radius:14px
  }
  .dash-side {
    padding:14px 5px;
    gap:6px
  }
  .dash-side span {
    font-size:5px;
    padding:5px
  }
  .dash-title {
    margin-bottom:7px
  }
  .dash-kpis {
    gap:4px
  }
  .dash-kpis>div {
    padding:5px
  }
  .dash-kpis b {
    font-size:8px
  }
  .dash-kpis small,.dash-kpis em {
    font-size:4px
  }
  .dash-grid {
    gap:4px;
    margin-top:5px
  }
  .dash-grid>div {
    height:68px;
    padding:5px
  }
  .chart svg {
    height:48px
  }
  .requests span {
    font-size:4px;
    padding-top:3px
  }
  .donut i {
    width:42px;
    height:42px;
    margin-top:7px
  }
  .donut i:after {
    width:25px;
    height:25px
  }
  .bars>div {
    height:45px
  }
  .home-phone {
    width:82px;
    bottom:12px
  }
  .pillar-grid {
    grid-template-columns:1fr
  }
  .pillar-grid article {
    height:220px
  }
}

body {
  position:relative;
  isolation:isolate;
  overflow-x:hidden
}
body::before {
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  inset:0 -120px 0 auto;
  width:clamp(560px,43vw,760px);
  height:100vh;
  background:url("assets/building.png") 42% 54%/100% 100% no-repeat;
  mix-blend-mode:multiply;
  opacity:.72
}
main,footer {
  position:relative;
  z-index:1
}
.home-building,.hero-building,.pricing-building,.contact-art>img {
  display:none!important
}
@media(max-width:760px) {
  body::before {
    inset:0 -165px 0 auto;
    width:480px;
    height:100vh;
    opacity:.48
  }
}
@media(max-width:480px) {
  body::before {
    right:-190px;
    width:430px;
    opacity:.38
  }
}

.icon {
  display:block;
  width:1em;
  height:1em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8
}
.icon.ph {
  display:inline-grid;
  place-items:center;
  fill:currentColor;
  stroke:none;
  font-size:1em
}
.home-metrics i .icon.ph {
  font-size:26px
}
.metric-icon .icon.ph,
.benefits i .icon.ph,
.module-grid i .icon.ph,
.pillar-grid>article>i .icon.ph {
  font-size:20px
}
.about-values li .icon.ph {
  font-size:15px
}
.contact-list i .icon.ph,
.button-icon.icon.ph {
  font-size:14px
}
.socials .icon.ph {
  font-size:13px
}
.home-metrics i .icon {
  width:26px;
  height:26px
}
.metric-icon .icon {
  width:20px;
  height:20px
}
.benefits i .icon,.module-grid i .icon,.pillar-grid>article>i .icon {
  width:20px;
  height:20px
}
.about-values li .icon {
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:var(--ink);
  margin-top:5px
}
.contact-list i .icon {
  width:14px;
  height:14px
}
.socials .icon {
  width:13px;
  height:13px
}
.button-icon {
  width:14px;
  height:14px
}

.price-card li:before,.included li:before {
  content:"";
  display:inline-block;
  width:11px;
  height:11px;
  margin-right:8px;
  vertical-align:-2px;
  background:center/contain no-repeat
}
.price-card li:before {
  background-image:url("assets/icons/check.svg")
}
.included li:before {
  background-image:url("assets/icons/arrow-right.svg")
}

.laptop[data-figma-node="277:3"] {
  top:52px;
  left:6%;
  width:94%;
  height:auto
}
.laptop[data-figma-node="277:3"] .laptop-screen {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  padding:0;
  background:#06101d;
  overflow:hidden
}
.figma-admin-ui {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.laptop[data-figma-node="277:3"] .laptop-base {
  height:16px
}
@media(max-width:760px) {
  .laptop[data-figma-node="277:3"] {
    top:42px;
    left:8%;
    width:96%;
    height:auto
  }
  .laptop[data-figma-node="277:3"] .laptop-screen {
    height:auto
  }
}
@media(max-width:480px) {
  .laptop[data-figma-node="277:3"] {
    top:32px;
    left:12%;
    width:105%;
    height:auto
  }
  .laptop[data-figma-node="277:3"] .laptop-screen {
    height:auto;
    border-width:6px
  }
}

@media(min-width:761px) {
  :root {
    --max:1540px
  }
  body {
    font-size:16px
  }
  .site-header {
    height:92px;
    padding-left:4%;
    padding-right:4%
  }
  .brand-logo {
    width:134px
  }
  .site-header>.brand {
    min-width:134px
  }
  .nav-links {
    gap:44px;
    font-size:14px
  }
  .nav-links a {
    padding-top:36px;
    padding-bottom:31px
  }
  .button {
    font-size:13px;
    padding:15px 24px
  }
  .header-cta {
    padding:14px 24px
  }
  .section {
    min-height:760px;
    padding:112px 4.5%
  }
  .standalone {
    min-height:calc(100vh - 92px)
  }
  h1 {
    font-size:56px
  }
  h2 {
    font-size:46px
  }
  .eyebrow {
    font-size:10px;
    padding:7px 12px
  }
  .section-copy p,.hero-copy p,.about-copy p,.contact-copy>p,.pricing-intro>p {
    font-size:14px;
    max-width:470px
  }
  .home-hero {
    min-height:770px;
    padding:76px 4.2% 46px;
    grid-template-columns:41% 59%
  }
  .home-copy {
    padding-top:60px
  }
  .home-copy h1 {
    font-size:64px;
    margin-top:30px
  }
  .home-copy>p {
    font-size:17px;
    max-width:510px
  }
  .home-kicker {
    font-size:11px;
    padding:11px 16px 11px 12px
  }
  .actions {
    gap:32px;
    margin-top:32px
  }
  .text-link {
    font-size:13px
  }
  .home-metrics {
    gap:26px;
    margin-top:55px
  }
  .home-metrics i .icon {
    width:30px;
    height:30px
  }
  .home-metrics strong {
    font-size:24px
  }
  .home-metrics span {
    font-size:11px
  }
  .platform-visual {
    height:665px
  }
  .laptop[data-figma-node="277:3"] {
    top:52px;
    left:2%;
    width:101%
  }
  .laptop[data-figma-node="277:3"] .laptop-screen {
    border-width:11px;
    border-radius:26px 26px 8px 8px
  }
  .laptop[data-figma-node="277:3"] .laptop-base {
    height:19px;
    margin-left:-22px;
    margin-right:-22px
  }
  .home-phone {
    width:166px;
    left:-6%;
    bottom:4px
  }
  .pillars {
    padding:4px 4.2% 70px
  }
  .pillars-heading {
    margin-bottom:27px
  }
  .pillars-heading span {
    font-size:10px
  }
  .pillars-heading h2 {
    font-size:34px;
    margin-top:14px
  }
  .pillar-grid {
    gap:20px
  }
  .pillar-grid article {
    height:270px;
    padding:22px
  }
  .pillar-grid>article>i {
    width:48px;
    height:48px
  }
  .pillar-grid>article>i .icon {
    width:24px;
    height:24px
  }
  .pillar-grid h3 {
    font-size:22px;
    margin-top:19px
  }
  .pillar-grid p {
    font-size:11px;
    max-width:190px
  }
  .pillar-grid a {
    font-size:11px;
    bottom:22px
  }
  .people-cloud {
    width:155px;
    height:122px
  }
  .request-card {
    width:150px;
    padding:13px
  }
  .mini-phone {
    width:120px;
    height:185px
  }
  .hero {
    grid-template-columns:40% 60%;
    padding-top:78px
  }
  .hero-visual {
    height:560px
  }
  .phone[data-figma-node="272:42"] {
    width:250px;
    height:541px;
    left:22%
  }
  .metrics {
    max-width:820px;
    gap:24px;
    margin-top:25px
  }
  .metrics strong {
    font-size:18px
  }
  .metrics small {
    font-size:11px
  }
  .metric-icon .icon {
    width:24px;
    height:24px
  }
  .solutions {
    gap:64px 86px
  }
  .role-list {
    gap:15px
  }
  .role-list article {
    height:126px;
    grid-template-columns:140px 1fr 34px
  }
  .role-photo {
    width:140px;
    height:126px
  }
  .role-list h3 {
    font-size:16px
  }
  .role-list p {
    font-size:13px
  }
  .benefits {
    gap:46px
  }
  .benefits i {
    min-width:48px;
    height:48px
  }
  .benefits i .icon {
    width:23px;
    height:23px
  }
  .benefits h3 {
    font-size:14px
  }
  .benefits p {
    font-size:12px
  }
  .modules {
    grid-template-columns:30% 1fr;
    gap:68px
  }
  .module-grid {
    gap:17px
  }
  .module-grid article {
    min-height:180px;
    padding:26px
  }
  .module-grid i {
    width:45px;
    height:45px
  }
  .module-grid i .icon {
    width:23px;
    height:23px
  }
  .module-grid h3 {
    font-size:15px
  }
  .module-grid p {
    font-size:12px
  }
  .pricing {
    gap:62px
  }
  .billing button {
    font-size:12px;
    padding:11px 19px
  }
  .pricing-grid {
    gap:17px
  }
  .price-card,.included {
    min-height:485px;
    padding:29px 23px
  }
  .price-card h3,.included h3 {
    font-size:15px
  }
  .price-card>p {
    font-size:11px
  }
  .price {
    font-size:28px
  }
  .price-card>small {
    font-size:10px
  }
  .price-card ul,.included ul {
    font-size:10.5px
  }
  .about {
    gap:36px 50px
  }
  .about-photo {
    height:370px
  }
  .about-values h3 {
    font-size:17px
  }
  .about-values p,.about-values ul {
    font-size:12px
  }
  .about-stats {
    padding:26px
  }
  .about-stats strong {
    font-size:25px
  }
  .about-stats span {
    font-size:12px
  }
  .contact {
    gap:55px
  }
  .contact-copy h2 {
    font-size:48px
  }
  .contact-list {
    gap:19px
  }
  .contact-list>a,.contact-list>span {
    font-size:12px
  }
  .contact-list i {
    width:32px;
    height:32px
  }
  .contact-list i .icon {
    width:17px;
    height:17px
  }
  .socials a {
    width:29px;
    height:29px
  }
  .socials .icon {
    width:15px;
    height:15px
  }
  .contact-form {
    padding:34px
  }
  .contact-form label {
    font-size:11px
  }
  .contact-form input,.contact-form textarea {
    font-size:12px;
    padding:13px
  }
  .contact-form textarea {
    height:125px
  }
  footer {
    padding-top:40px;
    padding-bottom:40px
  }
  footer .brand-logo {
    width:112px
  }
  footer p {
    font-size:13px
  }
  footer>span {
    font-size:12px
  }
}

@media(min-width:761px) and (max-width:980px) {
  .site-header {
    padding-left:3%;
    padding-right:3%
  }
  .brand-logo {
    width:112px
  }
  .site-header>.brand {
    min-width:112px
  }
  .nav-links {
    gap:16px;
    font-size:11px
  }
  .header-cta {
    display:none
  }
  .home-copy h1 {
    font-size:50px
  }
  .home-copy>p {
    font-size:15px
  }
  .home-hero {
    grid-template-columns:43% 57%;
    min-height:680px
  }
  .platform-visual {
    height:570px
  }
  .home-phone {
    width:128px
  }
  .pillar-grid article {
    height:245px
  }
  .pillar-grid h3 {
    font-size:19px
  }
  .pillar-grid p {
    font-size:10px
  }
  .section {
    padding-left:4%;
    padding-right:4%
  }
  h1 {
    font-size:48px
  }
  h2 {
    font-size:40px
  }
  .solutions {
    gap:50px
  }
  .pricing-grid {
    gap:10px
  }
  .price-card,.included {
    padding:23px 16px
  }
}


/* Keep the full-height building soft behind content instead of cutting into cards. */
body::before {
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.28) 18%,#000 46%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.28) 18%,#000 46%)
}


/* Role cards: fixed rhythm, vertically centred content and an opaque reading surface. */
.solutions {
  align-items:start;
  align-content:center
}
.role-list {
  align-self:start;
  align-content:start;
  grid-auto-rows:126px
}
.role-list article {
  height:126px;
  background:rgba(255,255,255,.96);
  grid-template-columns:140px minmax(0,1fr) 48px
}
.role-list article>div:nth-child(2) {
  align-self:center;
  padding:0 28px
}
.role-list>article>span {
  display:grid;
  place-items:center;
  align-self:stretch
}
.role-list h3,.role-list p {
  max-width:420px
}
.role-photo {
  width:140px;
  height:126px
}


/* Pricing cards share one top and bottom edge;
the featured ribbon is part of the card. */
.pricing {
  align-items:start;
  align-content:center
}
.pricing-grid {
  align-self:start;
  align-items:stretch
}
.price-card,.included {
  height:485px;
  min-height:485px
}
.price-card.featured {
  padding-top:63px;
  overflow:hidden
}
.popular {
  top:0;
  left:0;
  right:0;
  height:34px;
  border-radius:11px 11px 0 0;
  padding:9px 8px
}
.price-card.featured h3 {
  margin-top:0
}


@media(max-width:760px) {
  .role-list {
    grid-auto-rows:auto
  }
  .role-list article {
    height:118px;
    grid-template-columns:120px minmax(0,1fr) 42px
  }
  .role-photo {
    width:120px;
    height:118px
  }
  .role-list article>div:nth-child(2) {
    padding:0 18px
  }
  .price-card,.included {
    height:auto;
    min-height:430px
  }
  .price-card.featured {
    margin-top:0;
    padding-top:58px
  }
}

@media(max-width:480px) {
  .role-list article {
    grid-template-columns:92px minmax(0,1fr) 34px
  }
  .role-photo {
    width:92px
  }
  .role-list article>div:nth-child(2) {
    padding:0 13px
  }
  .role-list h3 {
    font-size:13px
  }
  .role-list p {
    font-size:10px
  }
}


/* Exact Figma mobile screens used as previews in the Home page pillars. */
.pillar-with-screen {
  background:linear-gradient(135deg,#fff 55%,#f5f8ff 100%)
}
.pillar-with-screen>p {
  position:relative;
  z-index:2;
  max-width:45%
}
.figma-pillar-screen {
  position:absolute;
  z-index:1;
  display:block;
  height:auto;
  bottom:auto;
  object-fit:contain;
  object-position:top center;
  mix-blend-mode:normal;
  border:5px solid #09111d;
  border-radius:21px;
  box-shadow:0 18px 34px rgba(7,16,31,.28),0 0 0 1px rgba(255,255,255,.55);
  background:#06101d
}
.figma-request-screen {
  width:45%;
  right:12px;
  top:42px
}
.figma-events-screen {
  width:45%;
  right:12px;
  top:42px
}
.pillar-with-screen>a {
  z-index:3
}

@media(max-width:980px) and (min-width:761px) {
  .pillar-with-screen>p {
    max-width:48%
  }
  .figma-request-screen,.figma-events-screen {
    width:46%;
    right:7px;
    top:40px
  }
}

@media(max-width:760px) {
  .figma-request-screen,.figma-events-screen {
    width:43%;
    right:10px;
    top:39px
  }
  .pillar-with-screen>p {
    max-width:49%
  }
}

@media(max-width:480px) {
  .figma-request-screen,.figma-events-screen {
    width:40%;
    right:10px;
    top:36px
  }
  .pillar-with-screen>p {
    max-width:52%
  }
}


/* Community photo used in the Home page Connect pillar. */
.pillar-with-photo>p {
  position:relative;
  z-index:2;
  max-width:48%
}
.pillar-grid article>img.connect-photo {
  z-index:1;
  width:58%;
  height:105%;
  right:-3%;
  bottom:-5%;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  mix-blend-mode:normal;
  filter:none
}
.pillar-with-photo:after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0 42% 0 34%;
  background:linear-gradient(to right,#fff,rgba(255,255,255,0));
  pointer-events:none
}
.pillar-with-photo>a {
  z-index:3
}

@media(max-width:760px) {
  .pillar-grid article>img.connect-photo {
    width:54%;
    right:-1%
  }
  .pillar-with-photo>p {
    max-width:52%
  }
}


/* ============================================================================
   LAYOUT & SCALE SYSTEM
   Authoritative layer — it is last on purpose and owns every size, gutter and
   vertical rhythm decision. Three jobs:
     1. one fluid type/spacing scale instead of dozens of hard-coded pixels
     2. single-section pages fit the viewport exactly, so nothing scrolls to
        reveal empty space
     3. grid tracks that never overflow (percent columns + gap used to)
   ========================================================================== */

:root {
  /* one sizing unit driven by the *smaller* of width and height, so a short
     laptop screen scales down the same way a narrow one does */
  --u:min(1vw,1.7vh);

  /* content width: grows with the screen instead of stopping dead at 1540px */
  --max:min(1720px,100%);

  /* chrome: kept in sync at runtime by script.js so the fit maths is exact */
  --header-h:92px;
  --footer-h:108px;

  /* spacing */
  --gutter:clamp(22px,4.4vw,84px);
  --pad-y:clamp(26px,3.5vh,74px);
  --gap-col:clamp(28px,3.4vw,72px);
  --gap-row:clamp(26px,3.6vh,56px);
  --gap-card:clamp(12px,calc(1.2 * var(--u)),20px);

  /* surfaces */
  --radius:16px;
  --shadow-card:0 12px 34px rgba(12,24,48,.07);
  --shadow-lift:0 22px 48px rgba(12,24,48,.13);
  --card-bg:#fff;

  /* type scale */
  --fs-body:clamp(14px,calc(.28 * var(--u) + 11.2px),16.5px);
  --fs-lead:clamp(15px,calc(.5 * var(--u) + 10.5px),19px);
  --fs-h1:clamp(38px,calc(3.2 * var(--u) + 10px),66px);
  --fs-h2:clamp(30px,calc(2.2 * var(--u) + 12px),50px);
  --fs-h3:clamp(17px,calc(.55 * var(--u) + 12px),21px);
  --fs-h4:clamp(15px,calc(.4 * var(--u) + 11px),18px);
  --fs-card:clamp(13px,calc(.3 * var(--u) + 10.5px),15.5px);
  --fs-small:clamp(12px,calc(.2 * var(--u) + 10px),14px);
  --fs-eyebrow:clamp(10px,calc(.12 * var(--u) + 9px),11.5px);
  --fs-stat:clamp(24px,calc(1.5 * var(--u) + 12px),36px);
}

/* --- page shell: header + one section + footer = exactly one viewport ----- */
html {
  height:100%
}
/* body is a flex column, and auto side margins would stop these stretching */
.site-header,.section,.home-hero,.pillars,footer {
  width:100%;
  margin-left:auto;
  margin-right:auto
}
body {
  min-height:100svh;
  display:flex;
  flex-direction:column;
  font-size:var(--fs-body)
}
.site-header {
  flex:0 0 auto;
  height:var(--header-h);
  padding-left:var(--gutter);
  padding-right:var(--gutter)
}
main {
  flex:1 0 auto;
  display:flex;
  flex-direction:column
}
main>section {
  flex:1 1 auto
}
footer {
  flex:0 0 auto;
  min-height:var(--footer-h);
  padding:clamp(18px,2vh,28px) var(--gutter);
  gap:clamp(16px,calc(2 * var(--u)),34px)
}
.section {
  min-height:0;
  padding:var(--pad-y) var(--gutter);
  border-bottom:0
}
/* a page built from a single section centres in whatever height is left over */
.standalone {
  min-height:calc(100svh - var(--header-h) - var(--footer-h));
  display:grid;
  align-content:center
}

/* --- typography ---------------------------------------------------------- */
h1 {
  font-size:var(--fs-h1);
  line-height:1.06;
  letter-spacing:-.035em;
  margin-bottom:clamp(14px,1.8vh,24px)
}
h2,.contact-copy h2 {
  font-size:var(--fs-h2);
  line-height:1.1;
  letter-spacing:-.03em;
  margin-bottom:clamp(12px,1.6vh,20px)
}
p {
  line-height:1.62
}
.section-copy p,.hero-copy p,.about-copy p,.contact-copy>p,.pricing-intro>p {
  font-size:var(--fs-lead);
  max-width:min(52ch,520px)
}
.eyebrow {
  font-size:var(--fs-eyebrow);
  padding:7px 13px;
  margin-bottom:clamp(12px,1.8vh,20px)
}
.nav-links {
  gap:clamp(18px,calc(2.4 * var(--u)),44px);
  font-size:clamp(13px,calc(.2 * var(--u) + 11px),15px)
}
.button {
  gap:14px;
  border-radius:9px;
  font-size:clamp(12.5px,calc(.2 * var(--u) + 10px),14.5px);
  padding:clamp(12px,1.2vh,17px) clamp(18px,calc(1.6 * var(--u)),28px)
}
.header-cta {
  padding:clamp(11px,1vh,15px) clamp(16px,calc(1.4 * var(--u)),26px)
}
.text-link {
  font-size:clamp(12.5px,calc(.2 * var(--u) + 10px),14.5px)
}
.actions {
  gap:clamp(18px,calc(2 * var(--u)),34px);
  margin-top:clamp(20px,3vh,36px)
}

/* --- home ---------------------------------------------------------------- */
.home-hero {
  min-height:calc(100svh - var(--header-h));
  padding:clamp(26px,3.6vh,58px) var(--gutter) clamp(22px,3vh,46px);
  grid-template-columns:minmax(0,45%) minmax(0,1fr);
  align-items:center;
  gap:clamp(20px,calc(2 * var(--u)),48px)
}
.home-copy {
  padding-top:0
}
.home-copy h1 {
  font-size:clamp(38px,calc(3.1 * var(--u) + 10px),62px);
  line-height:1.05;
  margin:clamp(14px,2vh,26px) 0 clamp(14px,1.8vh,22px)
}
.home-copy>p {
  font-size:var(--fs-lead);
  max-width:min(50ch,520px)
}
.home-kicker {
  font-size:clamp(9.5px,calc(.15 * var(--u) + 8px),11.5px);
  padding:10px 15px 10px 11px
}
.home-metrics {
  gap:clamp(16px,calc(1.8 * var(--u)),34px);
  margin-top:clamp(24px,4.2vh,54px)
}
.home-metrics>div {
  grid-template-columns:clamp(30px,calc(2.6 * var(--u)),40px) minmax(0,1fr)
}
.home-metrics i .icon {
  width:clamp(24px,calc(2 * var(--u)),30px);
  height:clamp(24px,calc(2 * var(--u)),30px)
}
.home-metrics strong {
  font-size:clamp(20px,calc(1 * var(--u) + 8px),28px)
}
.home-metrics span {
  font-size:var(--fs-small);
  line-height:1.45
}
.platform-visual {
  height:clamp(380px,62vh,700px)
}
/* the phone used to hang into the copy column and cover the paragraph */
.home-phone {
  z-index:6;
  left:1%;
  bottom:clamp(0px,2vh,18px);
  width:clamp(108px,calc(10.5 * var(--u)),168px)
}
.laptop[data-figma-node="277:3"] {
  left:7%;
  width:93%;
  top:clamp(26px,5vh,64px)
}
/* the hero owns the first screen; the pillars are a content-sized band under
   it rather than a second forced screen full of white space */
.pillars {
  padding:clamp(24px,5vh,60px) var(--gutter) clamp(44px,7vh,90px);
  display:grid;
  align-content:center;
  gap:clamp(20px,4vh,48px)
}
.pillars-heading {
  margin-bottom:0
}
.pillars-heading span {
  font-size:var(--fs-eyebrow);
  letter-spacing:.12em
}
.pillars-heading h2 {
  font-size:clamp(26px,calc(1.7 * var(--u) + 12px),42px);
  margin:clamp(10px,1.4vh,18px) 0 0
}
.pillar-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-card)
}
.pillar-grid article {
  height:clamp(230px,34vh,360px);
  padding:clamp(18px,calc(1.6 * var(--u)),28px);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column
}
/* copy sits above the artwork, and the link follows the text instead of
   being pinned to a corner the text can now reach */
.pillar-grid>article>i,.pillar-grid h3,.pillar-grid p,.pillar-grid a {
  position:relative;
  z-index:2
}
.pillar-grid>article>i {
  width:clamp(42px,calc(3.4 * var(--u)),54px);
  height:clamp(42px,calc(3.4 * var(--u)),54px);
  border-radius:12px
}
.pillar-grid>article>i .icon {
  width:clamp(21px,calc(1.7 * var(--u)),27px);
  height:clamp(21px,calc(1.7 * var(--u)),27px)
}
.pillar-grid h3 {
  font-size:clamp(18px,calc(.7 * var(--u) + 9px),23px);
  margin:clamp(14px,1.8vh,24px) 0 9px
}
.pillar-grid p {
  font-size:var(--fs-card);
  line-height:1.55;
  max-width:min(48%,215px)
}
.pillar-grid a {
  position:static;
  margin-top:auto;
  padding-top:clamp(10px,1.4vh,18px);
  align-self:flex-start;
  font-size:var(--fs-small)
}
.pillar-with-screen>p,.pillar-with-photo>p {
  max-width:min(48%,215px)
}

/* --- product hero -------------------------------------------------------- */
.hero {
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:0 var(--gap-col);
  padding-top:var(--pad-y)
}
.hero-visual {
  height:clamp(360px,52vh,600px)
}
.phone[data-figma-node="272:42"] {
  width:clamp(200px,calc(17 * var(--u)),270px);
  height:auto;
  aspect-ratio:213/460;
  left:20%
}
.metrics {
  grid-column:1/-1;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:700px;
  gap:clamp(18px,calc(2 * var(--u)),36px);
  margin-top:clamp(20px,3.4vh,46px)
}
.metrics>div {
  grid-template-columns:clamp(28px,calc(2.4 * var(--u)),38px) minmax(0,1fr);
  grid-template-rows:auto auto
}
.metrics strong {
  font-size:clamp(19px,calc(.9 * var(--u) + 8px),27px)
}
.metrics small {
  font-size:var(--fs-small);
  line-height:1.45
}
.metric-icon .icon {
  width:clamp(21px,calc(1.7 * var(--u)),27px);
  height:clamp(21px,calc(1.7 * var(--u)),27px)
}

/* --- solutions ----------------------------------------------------------- */
.solutions {
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:var(--gap-row) var(--gap-col)
}
.solutions>.section-copy,.modules .section-copy,.pricing-intro {
  align-self:center
}
.role-list {
  gap:clamp(12px,1.5vh,20px);
  grid-auto-rows:clamp(112px,15vh,158px)
}
.role-list article {
  height:auto;
  border-radius:var(--radius);
  grid-template-columns:clamp(118px,calc(11.5 * var(--u)),178px) minmax(0,1fr) clamp(40px,calc(3.4 * var(--u)),56px);
  background:var(--card-bg);
  box-shadow:var(--shadow-card)
}
.role-photo {
  width:100%;
  height:100%
}
.role-list article>div:nth-child(2) {
  padding:0 clamp(18px,calc(1.8 * var(--u)),32px)
}
.role-list h3 {
  font-size:var(--fs-h3);
  margin:0 0 6px
}
.role-list p {
  font-size:var(--fs-card);
  line-height:1.5
}
.role-list>article>span {
  font-size:clamp(16px,calc(1.2 * var(--u)),20px);
  color:var(--blue)
}
.benefits {
  grid-column:1/-1;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-card)
}
/* benefits sit over the background building — they need their own surface */
.benefits article {
  align-items:flex-start;
  gap:clamp(12px,calc(1.1 * var(--u)),18px);
  padding:clamp(14px,calc(1.4 * var(--u)),24px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card-bg);
  box-shadow:var(--shadow-card)
}
.benefits i {
  min-width:clamp(42px,calc(3.2 * var(--u)),52px);
  height:clamp(42px,calc(3.2 * var(--u)),52px);
  border-radius:12px
}
.benefits h3 {
  font-size:var(--fs-h4);
  margin:2px 0 5px
}
.benefits p {
  font-size:var(--fs-card);
  line-height:1.5;
  margin:0
}

/* --- modules ------------------------------------------------------------- */
.modules {
  grid-template-columns:minmax(0,29%) minmax(0,1fr);
  gap:var(--gap-col)
}
.modules .section-copy {
  padding-top:0
}
.modules .button {
  margin-top:clamp(16px,2.4vh,28px)
}
.module-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-card)
}
.module-grid article {
  min-height:clamp(140px,18vh,205px);
  padding:clamp(15px,calc(1.5 * var(--u)),30px);
  border-radius:var(--radius);
  background:var(--card-bg);
  box-shadow:var(--shadow-card)
}
.module-grid i {
  width:clamp(38px,calc(3.1 * var(--u)),54px);
  height:clamp(38px,calc(3.1 * var(--u)),54px);
  border-radius:12px;
  margin-bottom:clamp(9px,1.4vh,20px)
}
.benefits i .icon,.module-grid i .icon {
  width:clamp(21px,calc(1.7 * var(--u)),27px);
  height:clamp(21px,calc(1.7 * var(--u)),27px)
}
.module-grid h3 {
  font-size:var(--fs-h4);
  margin-bottom:7px
}
.module-grid p {
  font-size:var(--fs-card);
  line-height:1.45
}

/* --- pricing ------------------------------------------------------------- */
.pricing {
  grid-template-columns:minmax(0,23%) minmax(0,1fr);
  gap:var(--gap-col);
  padding-right:var(--gutter)
}
.pricing-intro {
  padding-top:0
}
.billing {
  margin-top:clamp(18px,2.6vh,30px);
  border-radius:10px
}
.billing button {
  font-size:var(--fs-small);
  padding:clamp(9px,1vh,13px) clamp(14px,calc(1.3 * var(--u)),22px)
}
.pricing-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-card)
}
/* cards size to their content instead of a hard 485px that outgrew short screens */
.price-card,.included {
  height:auto;
  min-height:0;
  padding:clamp(18px,calc(1.7 * var(--u)),34px) clamp(16px,calc(1.4 * var(--u)),26px);
  border-radius:var(--radius);
  background:var(--card-bg);
  box-shadow:var(--shadow-card)
}
.price-card.featured {
  padding-top:clamp(52px,5.2vh,74px);
  box-shadow:var(--shadow-lift)
}
.popular {
  height:clamp(30px,3.4vh,42px);
  padding:0;
  display:grid;
  place-items:center;
  font-size:var(--fs-eyebrow);
  font-weight:700;
  border-radius:var(--radius) var(--radius) 0 0
}
.price-card h3,.included h3 {
  font-size:var(--fs-h3);
  margin-bottom:8px
}
.price-card>p {
  font-size:var(--fs-card);
  line-height:1.5;
  min-height:3em;
  margin-bottom:clamp(12px,1.8vh,22px)
}
.price {
  font-size:clamp(28px,calc(1.9 * var(--u) + 8px),44px);
  line-height:1;
  margin-top:0
}
.price-card>small {
  font-size:var(--fs-small);
  margin:8px 0 clamp(14px,2vh,22px)
}
.price-card ul,.included ul {
  font-size:var(--fs-card);
  line-height:2.05;
  margin-bottom:clamp(12px,1.8vh,22px)
}
.price-card li:before,.included li:before {
  width:13px;
  height:13px;
  margin-right:9px
}
.price-card .button {
  padding:clamp(12px,1.3vh,16px)
}

/* --- about --------------------------------------------------------------- */
.about {
  grid-template-columns:minmax(0,1fr) minmax(0,1.32fr) minmax(0,.86fr);
  gap:var(--gap-row) var(--gap-col)
}
.about-copy {
  padding-top:0
}
.about-photo {
  height:clamp(250px,36vh,430px);
  border-radius:var(--radius)
}
/* mission + values read over the background building, so give them a card */
.about-values {
  padding:clamp(20px,calc(1.9 * var(--u)),32px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card-bg);
  box-shadow:var(--shadow-card)
}
.about-values h3,.about-values h3:first-child {
  font-size:var(--fs-h3);
  margin:clamp(18px,2.4vh,28px) 0 10px
}
.about-values h3:first-child {
  margin-top:0
}
.about-values p,.about-values ul {
  font-size:var(--fs-card);
  line-height:1.6
}
.about-values ul {
  line-height:2.2;
  margin-bottom:0
}
.about-values li .icon {
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:var(--blue)
}
.about-stats {
  grid-column:1/-1;
  margin-left:0;
  padding:clamp(20px,2.4vh,36px);
  border-radius:var(--radius);
  background:var(--card-bg);
  box-shadow:var(--shadow-card)
}
.about-stats strong {
  font-size:var(--fs-stat)
}
.about-stats span {
  font-size:var(--fs-small)
}

/* --- contact ------------------------------------------------------------- */
.contact {
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,.34fr);
  gap:var(--gap-col);
  min-height:0
}
.contact-list {
  margin:clamp(22px,3vh,34px) 0 clamp(18px,2.6vh,28px);
  gap:clamp(14px,1.8vh,22px)
}
.contact-list>a,.contact-list>span {
  font-size:var(--fs-card);
  gap:clamp(12px,calc(1 * var(--u)),16px)
}
.contact-list i {
  width:clamp(32px,calc(2.6 * var(--u)),40px);
  height:clamp(32px,calc(2.6 * var(--u)),40px);
  border-radius:10px
}
.contact-list i .icon {
  width:clamp(16px,calc(1.3 * var(--u)),20px);
  height:clamp(16px,calc(1.3 * var(--u)),20px)
}
.contact-list small {
  font-size:var(--fs-small);
  margin-top:3px
}
.socials {
  gap:clamp(10px,calc(1 * var(--u)),14px)
}
.socials a {
  width:clamp(30px,calc(2.4 * var(--u)),38px);
  height:clamp(30px,calc(2.4 * var(--u)),38px)
}
.socials .icon {
  width:clamp(15px,calc(1.2 * var(--u)),18px);
  height:clamp(15px,calc(1.2 * var(--u)),18px)
}
.contact-form {
  align-self:center;
  padding:clamp(24px,calc(2.1 * var(--u)),40px);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift)
}
.contact-form label {
  font-size:var(--fs-small);
  margin-bottom:clamp(12px,1.6vh,18px)
}
.contact-form input,.contact-form textarea {
  font-size:var(--fs-card);
  padding:clamp(11px,1.2vh,15px);
  border-radius:8px;
  margin-top:7px
}
.contact-form textarea {
  height:clamp(92px,13vh,150px)
}
.form-status {
  font-size:var(--fs-small)
}

/* --- footer -------------------------------------------------------------- */
footer p {
  font-size:var(--fs-small)
}
footer>span {
  font-size:var(--fs-small)
}

/* --- background building: present, never in the way of text -------------- */
body::before {
  width:clamp(460px,calc(38 * var(--u)),700px);
  opacity:.5
}

/* --- tablet -------------------------------------------------------------- */
@media(max-width:1050px) {
  .home-hero {
    grid-template-columns:minmax(0,44%) minmax(0,1fr)
  }
  .pillar-grid p,.pillar-with-screen>p,.pillar-with-photo>p {
    max-width:min(50%,170px)
  }
  .solutions {
    grid-template-columns:minmax(0,40%) minmax(0,1fr)
  }
  .modules {
    grid-template-columns:minmax(0,32%) minmax(0,1fr)
  }
  .pricing {
    grid-template-columns:minmax(0,25%) minmax(0,1fr)
  }
  .about {
    grid-template-columns:minmax(0,.92fr) minmax(0,1.25fr) minmax(0,.95fr)
  }
  .contact {
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)
  }
}
@media(min-width:761px) and (max-width:980px) {
  .pillar-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .pillar-grid p,.pillar-with-screen>p,.pillar-with-photo>p {
    max-width:min(52%,240px)
  }
  .benefits,.pricing-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(min-width:761px) and (max-height:820px) {
  :root {
    --pad-y:clamp(20px,2.8vh,74px);
    --gap-row:clamp(20px,3vh,56px)
  }
}

/* --- mobile: pages stack and scroll normally ----------------------------- */
@media(max-width:760px) {
  :root {
    --header-h:70px;
    --footer-h:auto;
    --pad-y:clamp(44px,7vh,72px)
  }
  .standalone,.home-hero,.pillars {
    min-height:0
  }
  .pillars {
    display:block;
    padding:clamp(30px,5vh,48px) var(--gutter) clamp(40px,6vh,64px)
  }
  .pillars-heading {
    margin-bottom:clamp(18px,3vh,28px)
  }
  .home-hero {
    display:block
  }
  .home-phone {
    left:0
  }
  .hero {
    display:block
  }
  .solutions,.modules,.about,.contact,.pricing {
    display:block
  }
  .metrics,.benefits,.module-grid,.pricing-grid,.pillar-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .role-list,.module-grid,.benefits {
    margin-top:clamp(28px,4.5vh,45px)
  }
  .pricing-grid {
    margin-top:clamp(30px,5vh,50px)
  }
  .about-photo,.about-values,.about-stats,.contact-form {
    margin-top:clamp(24px,4vh,38px)
  }
  .about-stats {
    grid-column:auto
  }
  .contact-form {
    align-self:auto
  }
  footer {
    min-height:0;
    flex-wrap:wrap;
    padding-top:24px;
    padding-bottom:24px
  }
}
@media(max-width:480px) {
  .metrics,.benefits,.module-grid,.pricing-grid,.pillar-grid {
    grid-template-columns:minmax(0,1fr)
  }
  .pillar-grid article {
    height:clamp(215px,30vh,250px)
  }
  .about-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
  }
  .about-values {
    padding:20px
  }
}

/* Evidence-safe capability proof points replace unsupported statistics. */
.home-metrics.capability-points {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 28px;
  margin-top:40px
}
.home-metrics.capability-points>div {
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:8px
}
.home-metrics.capability-points strong {
  font-size:14px;
  line-height:1.3
}
.home-metrics.capability-points span {
  font-size:10px;
  line-height:1.5;
  margin-top:4px
}
.metrics.capability-points {
  max-width:1080px;
  gap:28px
}
.metrics.capability-points>div {
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px
}
.metrics.capability-points strong {
  font-size:15px;
  line-height:1.3
}
.metrics.capability-points small {
  font-size:10.5px;
  line-height:1.45;
  margin-top:5px
}
body[data-page="product"] .metrics.capability-points {
  width:min(1080px,72%);
  max-width:none;
  justify-self:start;
  gap:clamp(18px,2vw,30px)
}
body[data-page="product"] .metrics.capability-points>div {
  min-width:0;
  align-content:start
}
body[data-page="product"] .metrics.capability-points strong,
body[data-page="product"] .metrics.capability-points small {
  min-width:0;
  overflow-wrap:normal;
  word-break:normal
}
.about-building {
  margin-left:0;
  padding:24px 26px;
  gap:0
}
.about-building>h3 {
  grid-column:1/-1;
  font-size:18px;
  margin:0 0 20px
}
.about-building>div {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px
}
.about-building strong {
  font-size:13px;
  line-height:1.45;
  text-align:center
}
.about-building strong:before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:9px;
  border-radius:50%;
  background:var(--blue);
  vertical-align:1px
}
@media(max-width:760px) {
  .home-metrics.capability-points {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
  }
  .metrics.capability-points {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 20px
  }
  body[data-page="product"] .metrics.capability-points {
    width:100%
  }
  .about-building {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0
  }
  .about-building>h3 {
    grid-column:1/-1
  }
}
@media(max-width:480px) {
  .home-metrics.capability-points,.metrics.capability-points {
    grid-template-columns:1fr
  }
  .about-building {
    grid-template-columns:1fr
  }
  .about-building>div {
    justify-content:flex-start;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:12px 4px
  }
  .about-building>div:last-child {
    border-bottom:0
  }
  .about-building strong {
    text-align:left
  }
}

/* Embedded Figma product simulation on the Product page. */
.product-sim-section {
  position:relative;
  z-index:2;
  width:min(var(--max),100%);
  margin:0 auto;
  padding:96px 4.5% 110px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(248,250,255,.95),#fff 38%)
}
.product-sim-intro {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin:0 auto 34px
}
.product-sim-intro h2 {
  margin-bottom:14px
}
.product-sim-intro p {
  max-width:650px;
  margin:0;
  font-size:15px
}
.product-sim-meta {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  max-width:430px
}
.product-sim-meta span {
  padding:9px 12px;
  border:1px solid #dfe5ef;
  border-radius:999px;
  color:#59667a;
  background:#fff;
  font-size:10px;
  font-weight:700
}
.product-sim-shell {
  overflow:hidden;
  border:1px solid #dce2eb;
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 80px rgba(7,16,31,.12)
}
.product-sim-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  padding:0 18px;
  border-bottom:1px solid #e5e9f0;
  color:#536174;
  background:#f8fafc;
  font-size:11px;
  font-weight:700
}
.product-sim-toolbar span {
  display:flex;
  align-items:center;
  gap:8px
}
.product-sim-toolbar i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12)
}
.product-sim-toolbar a {
  color:var(--blue)
}
.product-sim-frame {
  display:block;
  width:100%;
  height:920px;
  border:0;
  background:#f7f9fc
}
@media(max-width:920px) {
  .product-sim-section {
    padding:76px 4% 90px
  }
  .product-sim-intro {
    display:block
  }
  .product-sim-meta {
    justify-content:flex-start;
    margin-top:22px
  }
  .product-sim-frame {
    height:1500px
  }
}
@media(max-width:560px) {
  .product-sim-section {
    padding:58px 0 0
  }
  .product-sim-intro {
    padding:0 5%
  }
  .product-sim-meta span {
    font-size:9px
  }
  .product-sim-shell {
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:20px 20px 0 0
  }
  .product-sim-frame {
    height:1370px
  }
}

/* Why We Exist story page. */
body.why-page::before {
  display:none
}
.why-main {
  position:relative;
  z-index:1;
  width:min(var(--max),100%);
  margin:0 auto;
  padding:0 3.2% 44px
}
.why-hero {
  display:grid;
  grid-template-columns:40% 60%;
  align-items:center;
  min-height:610px;
  padding:46px 1.8% 28px
}
.why-hero-copy {
  position:relative;
  z-index:4;
  max-width:610px
}
.why-label,.why-card>h2 {
  color:#0f55ef;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase
}
.why-hero-copy h1 {
  max-width:650px;
  margin:20px 0 22px;
  font-size:clamp(44px,4.2vw,68px);
  line-height:1.06;
  letter-spacing:-.052em
}
.why-hero-copy p {
  max-width:500px;
  margin:0;
  font-size:18px;
  line-height:1.55
}
.why-hero-visual {
  position:relative;
  height:525px
}
.why-orbit {
  position:absolute;
  inset:50px -7% 18px 10%;
  border:2px solid #2f67f6;
  border-left-color:transparent;
  border-radius:48% 52% 45% 55%;
  opacity:.85
}
.why-building {
  position:absolute;
  left:9%;
  bottom:25px;
  width:61%;
  height:460px;
  object-fit:cover;
  object-position:46% 48%;
  mix-blend-mode:multiply
}
.why-community-photo {
  position:absolute;
  z-index:3;
  top:20px;
  right:0;
  width:42%;
  height:225px;
  border-radius:24px;
  object-fit:cover;
  box-shadow:0 18px 40px rgba(7,16,31,.16)
}
.why-home-panel,.why-event-panel {
  position:absolute;
  z-index:5;
  border:1px solid #e1e6ef;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 38px rgba(7,16,31,.12);
  backdrop-filter:blur(12px)
}
.why-home-panel {
  right:22%;
  bottom:40px;
  width:300px;
  padding:19px;
  border-radius:18px
}
.why-home-panel>strong {
  display:block;
  margin-bottom:10px;
  font-size:12px
}
.why-home-panel>span {
  display:grid;
  grid-template-columns:20px 1fr auto;
  align-items:center;
  gap:8px;
  padding:9px 0;
  border-bottom:1px solid #edf0f5;
  color:#536174;
  font-size:9px
}
.why-home-panel>span:last-child {
  border-bottom:0
}
.why-home-panel .icon {
  width:15px;
  height:15px;
  color:var(--blue)
}
.why-home-panel b {
  color:var(--blue);
  font-size:8px;
  font-weight:600
}
.why-event-panel {
  right:2%;
  bottom:1px;
  width:178px;
  padding:16px;
  border-radius:20px
}
.why-event-panel strong,.why-event-panel small,.why-event-panel b,.why-event-panel span {
  display:block
}
.why-event-panel strong {
  font-size:11px
}
.why-event-panel small {
  margin:5px 0 15px;
  color:var(--muted);
  font-size:8px
}
.why-event-panel b {
  margin-bottom:7px;
  font-size:8px
}
.why-event-panel span {
  margin-top:7px;
  padding:9px;
  border:1px solid #edf0f5;
  border-radius:9px;
  font-size:8px
}
.why-grid {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:22px
}
.why-card {
  border:1px solid #dfe4ec;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  box-shadow:0 10px 30px rgba(7,16,31,.035)
}
.why-card>h2 {
  margin:0;
  padding:21px 26px 10px;
  font-size:13px
}
.belief-flow {
  display:grid;
  grid-template-columns:1fr 48px 1.15fr;
  align-items:center;
  min-height:245px;
  margin:0 14px 14px;
  overflow:hidden;
  border:1px solid #e7eaf0;
  border-radius:17px;
  background:linear-gradient(90deg,#fff,#f7faff)
}
.belief-side {
  position:relative;
  height:100%;
  min-height:245px;
  padding:16px
}
.belief-side h3 {
  margin:0;
  text-align:center;
  font-size:13px
}
.belief-side.connected h3 {
  color:var(--blue)
}
.scattered-icons {
  position:relative;
  height:180px;
  margin-top:8px;
  background-image:radial-gradient(#c8d0dc 1px,transparent 1px);
  background-size:14px 14px
}
.scattered-icons:before,.connected-map:before {
  content:"";
  position:absolute;
  inset:25px 8px;
  border:1px dashed #aeb9c9;
  border-radius:50%
}
.scattered-icons i {
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:10px;
  color:#65758a;
  background:#fff;
  box-shadow:0 8px 20px rgba(7,16,31,.12)
}
.scattered-icons i:nth-child(1){left:9%;top:15%}.scattered-icons i:nth-child(2){left:42%;top:6%}.scattered-icons i:nth-child(3){right:7%;top:35%}.scattered-icons i:nth-child(4){left:22%;bottom:4%}.scattered-icons i:nth-child(5){right:30%;bottom:0}.scattered-icons .icon{width:20px;height:20px}.belief-arrow{position:relative;z-index:3;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;background:#7fa4ff;font-size:23px}.connected-map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9px 70px;align-content:center;height:190px;padding:15px 4px}.connected-map:before{inset:33px 35px;border-color:#719bff}.connected-map span{position:relative;z-index:2;padding:10px 8px;border:1px solid #e4e9f2;border-radius:9px;color:#4e5e73;background:#fff;box-shadow:0 7px 18px rgba(7,16,31,.08);font-size:8px;text-align:center}.resflow-core{position:absolute;z-index:4;top:50%;left:50%;display:grid;place-items:center;width:62px;height:62px;border-radius:17px;color:#fff;background:linear-gradient(145deg,#4582ff,#124ae5);box-shadow:0 14px 30px rgba(49,94,251,.3);transform:translate(-50%,-50%)}.resflow-core .icon{width:34px;height:34px}.thinking-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:10px 20px 20px}.thinking-grid>div{display:flex;align-items:center;gap:14px;min-height:98px;padding:16px;border:1px solid #e4e8ef;border-radius:15px}.thinking-grid i,.journey-line i{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:50%;color:#165bf2;background:#edf3ff}.thinking-grid .icon,.journey-line .icon{width:25px;height:25px}.thinking-grid strong,.thinking-grid small{display:block}.thinking-grid strong{margin-bottom:6px;font-size:12px}.thinking-grid small{color:var(--muted);font-size:9px;line-height:1.5}.why-journey{margin-top:22px;padding-bottom:20px}.journey-line{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:8px 54px 0}.journey-line:before{content:"";position:absolute;top:8px;left:10%;right:10%;height:2px;background:#3e75f4}.journey-line article{position:relative;display:flex;gap:15px;padding-top:22px}.journey-line article:before{content:"";position:absolute;top:-5px;left:27px;width:10px;height:10px;border:3px solid #fff;border-radius:50%;background:#2f67f6;box-shadow:0 0 0 2px #78a0ff}.journey-line strong{display:block;margin:6px 0;font-size:12px}.journey-line p{margin:0;font-size:9px;line-height:1.55}.why-south-africa{position:relative;display:grid;grid-template-columns:1.2fr 1.1fr auto;align-items:center;gap:38px;min-height:150px;margin-top:22px;padding:25px 34px;overflow:hidden;border:1px solid #e0e5ed;border-radius:20px;background:linear-gradient(90deg,#fff 0 59%,rgba(255,255,255,.5) 77%,transparent)}.why-south-africa>div,.why-south-africa>p,.why-south-africa>a{position:relative;z-index:2}.why-south-africa h2{margin:0;font-size:27px;line-height:1.17}.why-south-africa p{margin:0;font-size:11px;line-height:1.6}.why-south-africa .button{white-space:nowrap}.why-south-africa>img{position:absolute;z-index:0;right:0;width:43%;height:100%;object-fit:cover;object-position:center 58%;mix-blend-mode:multiply;opacity:.7}
@media(max-width:1050px){.why-hero{grid-template-columns:43% 57%}.why-hero-copy h1{font-size:48px}.why-home-panel{right:12%}.why-community-photo{width:45%}.why-grid{grid-template-columns:1fr}.why-south-africa{grid-template-columns:1fr 1fr}.why-south-africa .button{width:max-content}.why-south-africa>img{width:50%;opacity:.35}}
@media(max-width:760px){.why-main{padding:0 5% 35px}.why-hero{display:block;padding:65px 0 30px}.why-hero-copy h1{font-size:43px}.why-hero-copy p{font-size:15px}.why-hero-visual{height:490px;margin-top:35px}.why-building{left:0;width:78%}.why-community-photo{right:0;width:52%;height:180px}.why-home-panel{right:15%;bottom:28px;transform:scale(.86);transform-origin:bottom right}.why-event-panel{right:-2%;transform:scale(.85);transform-origin:bottom right}.belief-flow{grid-template-columns:1fr;gap:0}.belief-side{min-height:220px}.belief-arrow{margin:-20px auto;transform:rotate(90deg)}.thinking-grid{grid-template-columns:1fr}.journey-line{grid-template-columns:1fr 1fr;gap:28px 20px;padding:10px 25px}.journey-line:before{display:none}.journey-line article:before{display:none}.why-south-africa{grid-template-columns:1fr;padding:28px}.why-south-africa>img{width:100%;opacity:.14}.why-south-africa p{max-width:500px}}
@media(max-width:480px){.why-hero-copy h1{font-size:36px}.why-hero-visual{height:420px}.why-building{width:90%;height:380px}.why-community-photo{width:58%;height:145px}.why-home-panel{right:3%;bottom:10px;width:270px;transform:scale(.72)}.why-event-panel{display:none}.why-card>h2{padding-right:18px;padding-left:18px}.belief-flow{margin-right:8px;margin-left:8px}.connected-map{gap:8px 60px}.thinking-grid{padding-right:10px;padding-left:10px}.journey-line{grid-template-columns:1fr}.journey-line article{padding-top:4px}.why-south-africa h2{font-size:23px}}

.belief-graphic {
  display:block;
  width:calc(100% - 26px);
  height:auto;
  margin:0 13px 11px;
  border-radius:15px;
}

/* Supplied About-page photography and icon assets. */
.why-building {
  mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(ellipse 76% 78% at 52% 54%,#000 64%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 78% at 52% 54%,#000 64%,transparent 100%)
}
.why-courtyard-photo {
  position:absolute;
  z-index:4;
  left:0;
  bottom:0;
  width:34%;
  height:150px;
  border:6px solid #fff;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 16px 34px rgba(7,16,31,.15)
}
.about-icon {
  display:block;
  width:15px;
  height:15px;
  object-fit:contain
}
.about-icon.ph {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:15px;
  color:currentColor
}
.thinking-grid i .about-icon.ph,
.journey-line i .about-icon.ph {
  width:25px;
  height:25px;
  font-size:25px
}
.why-home-panel .about-icon.ph {
  font-size:13px
}
.why-event-panel span .about-icon.ph {
  font-size:14px
}
.why-event-panel span {
  display:flex;
  align-items:center;
  gap:7px
}
.why-event-panel span .about-icon {
  width:14px;
  height:14px
}
.scattered-icons i>img {
  display:block;
  width:21px;
  height:21px
}
.belief-arrow img {
  width:24px;
  height:24px
}
.resflow-core img {
  width:38px;
  height:38px
}
.thinking-grid i>img,.journey-line i>img {
  width:27px;
  height:27px
}
@media(max-width:760px) {
  .why-courtyard-photo {
    width:40%;
    height:130px
  }
}
@media(max-width:480px) {
  .why-courtyard-photo {
    width:47%;
    height:108px;
    border-width:4px
  }
}

/* Reference-matched desktop composition for the Why We Exist page. */
.why-header-actions {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px;
  font-weight:600
}
@media(min-width:1100px) {
  .why-page {
    background:#fff
  }
  .why-page .why-header {
    position:relative;
    top:0;
    width:calc(100% - 48px);
    max-width:none;
    height:65px;
    margin:0 24px;
    padding:0 32px;
    border:1px solid #eceff3;
    border-top:0;
    border-radius:0 0 30px 30px;
    background:#fff;
    box-shadow:0 6px 18px rgba(7,16,31,.035)
  }
  .why-page .why-header .brand-logo {
    width:116px
  }
  .why-page .why-header>.brand {
    min-width:116px
  }
  .why-page .why-header .nav-links {
    gap:37px;
    margin-left:auto;
    margin-right:auto;
    font-size:12px
  }
  .why-page .why-header .nav-links a {
    padding:23px 0 18px
  }
  .why-page .why-header .nav-links a span {
    display:inline-block;
    margin-left:4px;
    color:#647086
  }
  .why-page .why-header-actions {
    min-width:202px;
    justify-content:flex-end
  }
  .why-page .why-header-actions .button {
    min-height:38px;
    padding:11px 21px;
    border-radius:9px;
    font-size:11px
  }
  .why-main {
    width:100%;
    max-width:1536px;
    padding:0 32px 6px
  }
  .why-hero {
    grid-template-columns:42% 58%;
    min-height:405px;
    padding:27px 26px 10px
  }
  .why-label {
    font-size:12px
  }
  .why-hero-copy {
    max-width:610px;
    align-self:start;
    padding-top:19px
  }
  .why-hero-copy h1 {
    max-width:610px;
    margin:17px 0 20px;
    font-size:48px;
    line-height:1.12;
    letter-spacing:-.045em
  }
  .why-hero-copy p {
    max-width:450px;
    font-size:18px;
    line-height:1.55
  }
  .why-hero-visual {
    height:390px
  }
  .why-orbit {
    inset:42px -6% 8px 5%;
    border-width:2px
  }
  .why-building {
    left:11%;
    bottom:27px;
    width:61%;
    height:360px;
    object-position:50% 48%
  }
  .why-community-photo {
    top:0;
    right:0;
    width:42%;
    height:225px;
    border-radius:22px
  }
  .why-courtyard-photo {
    left:0;
    bottom:0;
    width:30%;
    height:140px;
    border-width:5px;
    border-radius:18px
  }
  .why-home-panel {
    right:21%;
    bottom:24px;
    width:230px;
    padding:13px 15px;
    border-radius:17px
  }
  .why-home-panel>strong {
    margin-bottom:4px;
    font-size:10px
  }
  .why-home-panel>span {
    grid-template-columns:17px 1fr auto;
    gap:6px;
    padding:7px 0;
    font-size:7px
  }
  .why-home-panel b {
    font-size:6px
  }
  .why-home-panel .about-icon {
    width:13px;
    height:13px
  }
  .why-event-panel {
    right:1%;
    bottom:0;
    width:145px;
    padding:13px;
    border-radius:18px
  }
  .why-event-panel strong {
    font-size:9px
  }
  .why-event-panel small {
    margin:4px 0 10px;
    font-size:6px
  }
  .why-event-panel b {
    margin-bottom:4px;
    font-size:7px
  }
  .why-event-panel span {
    gap:5px;
    margin-top:5px;
    padding:7px;
    font-size:6px
  }
  .why-event-panel span .about-icon {
    width:12px;
    height:12px
  }
  .why-grid {
    grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
    gap:20px;
    margin-top:10px
  }
  .why-grid>.why-card {
    height:267px
  }
  .why-card {
    border-radius:17px
  }
  .why-card>h2 {
    padding:16px 26px 8px;
    font-size:12px
  }
  .belief-flow {
    grid-template-columns:1fr 48px 1.15fr;
    min-height:0;
    height:213px;
    margin:0 13px 11px;
    border-radius:15px
  }
  .belief-side {
    min-height:0;
    height:213px;
    padding:12px
  }
  .belief-side h3 {
    font-size:11px
  }
  .scattered-icons {
    height:164px;
    margin-top:3px
  }
  .scattered-icons i {
    width:39px;
    height:39px
  }
  .scattered-icons i>img {
    width:18px;
    height:18px
  }
  .belief-arrow {
    width:42px;
    height:42px
  }
  .connected-map {
    height:169px;
    gap:7px 62px;
    padding:10px 1px
  }
  .connected-map span {
    padding:8px 5px;
    font-size:7px
  }
  .resflow-core {
    width:58px;
    height:58px;
    border-radius:15px
  }
  .resflow-core img {
    width:43px;
    height:43px
  }
  .thinking-grid {
    gap:12px;
    padding:8px 18px 17px
  }
  .thinking-grid>div {
    min-height:91px;
    padding:13px;
    border-radius:13px
  }
  .thinking-grid i {
    flex-basis:48px;
    width:48px;
    height:48px
  }
  .thinking-grid i>img {
    width:25px;
    height:25px
  }
  .thinking-grid strong {
    margin-bottom:4px;
    font-size:11px
  }
  .thinking-grid small {
    font-size:8px
  }
  .why-journey {
    height:140px;
    margin-top:10px;
    padding-bottom:10px
  }
  .why-journey>h2 {
    padding:9px 24px 3px
  }
  .journey-line {
    gap:34px;
    padding:5px 56px 0
  }
  .journey-line:before {
    top:3px
  }
  .journey-line article {
    gap:13px;
    padding-top:16px
  }
  .journey-line article:before {
    top:-10px;
    left:24px
  }
  .journey-line i {
    flex-basis:48px;
    width:48px;
    height:48px
  }
  .journey-line i>img {
    width:24px;
    height:24px
  }
  .journey-line strong {
    margin:2px 0 4px;
    font-size:10px
  }
  .journey-line p {
    font-size:8px;
    line-height:1.45
  }
  .why-south-africa {
    grid-template-columns:1.2fr 1.12fr auto;
    gap:34px;
    min-height:0;
    height:110px;
    margin-top:11px;
    padding:18px 26px;
    border-radius:16px
  }
  .why-south-africa h2 {
    font-size:27px
  }
  .why-south-africa p {
    max-width:390px;
    font-size:9px;
    line-height:1.55
  }
  .why-south-africa .button {
    padding:13px 21px;
    font-size:10px
  }
  .why-south-africa>img {
    width:44%;
    opacity:.78
  }
}
@media(max-width:1099px) {
  .why-header-actions {
    margin-left:auto
  }
}
@media(max-width:760px) {
  .why-header-actions {
    display:none
  }
}

/* Make the journey milestones read as one connected timeline. */
@media(min-width:1100px) {
  .belief-graphic {
    height:213px;
    object-fit:fill;
  }
  .why-journey {
    height:120px;
    padding-bottom:7px;
  }
  .journey-line {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0
  }
  .journey-line:before {
    z-index:0;
    left:80px;
    right:calc(25% + 4px);
    height:2px;
    background:linear-gradient(90deg,#2f67f6,#5d8cff)
  }
  .journey-line article {
    z-index:1;
    padding-right:34px
  }
  .journey-line article:before {
    z-index:3;
    left:19px;
    width:11px;
    height:11px;
    border-width:4px;
    box-shadow:0 0 0 2px #75a0ff
  }
  .journey-line article:after {
    content:"";
    position:absolute;
    z-index:0;
    top:4px;
    left:24px;
    width:2px;
    height:15px;
    background:#5d8cff
  }
  .journey-line i {
    position:relative;
    z-index:2;
    box-shadow:0 0 0 5px #fff
  }
  .why-south-africa {
    grid-template-columns:minmax(0,1.35fr) minmax(230px,.72fr) minmax(210px,.65fr);
    gap:24px;
    margin-top:10px;
    padding-right:28px;
    padding-left:28px
  }
  .why-south-africa p {
    max-width:260px
  }
  .why-south-africa .button {
    justify-self:end
  }
  .why-south-africa>img {
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%);
    mask-image:linear-gradient(90deg,transparent 0,#000 20%)
  }
}
@media(max-width:760px) {
  .journey-line article:after {
    display:none
  }
}

/* Dedicated Live, Connect, Request and Experience pages. */
.feature-page { background:linear-gradient(180deg,#fff 0,#fbfcff 48%,#fff 100%) }
.feature-main { width:min(1320px,90%);margin:auto;padding:clamp(44px,6vw,86px) 0 56px }
.feature-hero-detail { display:grid;grid-template-columns:minmax(320px,.82fr) minmax(520px,1.35fr);align-items:center;gap:clamp(42px,6vw,90px);min-height:570px }
.feature-copy { position:relative;z-index:2 }
.feature-label { display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:8px 12px;border:1px solid #dfe6f5;border-radius:999px;color:var(--blue);background:#f7f9ff;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase }
.feature-label .ph { font-size:16px }
.feature-copy h1 { max-width:620px;margin:0;font-size:clamp(48px,5vw,76px);line-height:1.02;letter-spacing:-.055em }
.feature-copy>p { max-width:520px;margin:25px 0 30px;color:var(--muted);font-size:clamp(15px,1.3vw,19px);line-height:1.65 }
.feature-copy .actions { display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px }
.feature-visual { position:relative;min-width:0;height:500px;border:1px solid #e2e8f3;border-radius:28px;background:radial-gradient(circle at 45% 42%,#e9f0ff,transparent 52%),#f9fbff;box-shadow:0 24px 70px rgba(20,43,84,.09) }
.feature-screen { position:absolute;inset:44px 32px;overflow:hidden;border:10px solid #091424;border-radius:20px;background:#091424;box-shadow:0 24px 50px rgba(7,16,31,.24) }
.feature-screen img,.feature-large-screen img { width:100%;height:100%;object-fit:cover;object-position:center top }
.visual-chip { position:absolute;display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid rgba(255,255,255,.7);border-radius:12px;color:#fff;background:rgba(12,27,46,.88);box-shadow:0 12px 30px rgba(7,16,31,.2);backdrop-filter:blur(10px);font-size:11px;font-weight:700 }
.visual-chip .ph { color:#75a0ff;font-size:17px }
.chip-one { left:18px;bottom:24px }
.chip-two { right:18px;top:24px }
.feature-proof { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:38px 0 82px;padding:16px;border:1px solid #e2e7ef;border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(17,37,70,.05) }
.feature-proof article { display:grid;grid-template-columns:45px 1fr;gap:13px;min-width:0;padding:18px;border-radius:15px;transition:.2s }
.feature-proof article:hover { background:#f7f9fe;transform:translateY(-2px) }
.feature-proof i,.feature-process i,.experience-cards i { display:grid;place-items:center;width:45px;height:45px;border-radius:50%;color:var(--blue);background:#edf2ff;font-size:22px }
.feature-proof strong,.feature-proof p { display:block }
.feature-proof strong { margin:2px 0 6px;font-size:14px }
.feature-proof p { margin:0;color:var(--muted);font-size:11px;line-height:1.55 }
.feature-showcase { display:grid;grid-template-columns:minmax(260px,.55fr) minmax(520px,1.45fr);align-items:center;gap:clamp(45px,7vw,105px);margin:0 0 82px;padding:clamp(28px,4vw,58px);border:1px solid #e3e8f1;border-radius:26px;background:#fff }
.feature-showcase.reverse { grid-template-columns:minmax(300px,.7fr) minmax(500px,1.3fr) }
.feature-showcase.reverse .feature-section-copy { order:2 }
.feature-section-copy .feature-kicker { color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase }
.feature-section-copy h2 { margin:12px 0 18px;font-size:clamp(33px,3.4vw,52px);line-height:1.08;letter-spacing:-.045em }
.feature-section-copy>p { margin:0;color:var(--muted);font-size:15px;line-height:1.7 }
.feature-checks { display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none;color:#26354a;font-size:12px;font-weight:600 }
.feature-checks li { display:flex;align-items:flex-start;gap:9px }
.feature-checks .ph { color:var(--blue);font-size:17px }
.feature-large-screen { overflow:hidden;aspect-ratio:16/10;padding:11px;border-radius:22px;background:#081423;box-shadow:0 25px 60px rgba(7,16,31,.2) }
.feature-process { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:64px;padding:26px;border:1px solid #e3e8f1;border-radius:24px;background:#fff }
.feature-process>div { position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto auto;gap:2px 14px;min-width:0;padding:12px 24px;border-right:1px solid #e6eaf1 }
.feature-process>div:last-child { border-right:0 }
.feature-process>div>span { position:absolute;right:20px;top:7px;color:#dce5fb;font-size:26px;font-weight:800 }
.feature-process i { grid-row:1/4;width:40px;height:40px;font-size:19px }
.feature-process strong { align-self:end;font-size:14px }
.feature-process p { margin:4px 0 0;color:var(--muted);font-size:10.5px;line-height:1.5 }
.feature-cta { position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;padding:35px 42px;border-radius:24px;color:#fff;background:linear-gradient(120deg,#0d55ed,#0879fa 65%,#091e4d) }
.feature-cta::after { content:"";position:absolute;right:-90px;width:440px;height:440px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 110px rgba(255,255,255,.03) }
.feature-cta>div,.feature-cta>a { position:relative;z-index:1 }
.feature-cta>div>span { font-size:25px }
.feature-cta h2 { margin:8px 0 4px;font-size:clamp(27px,3vw,40px);letter-spacing:-.035em }
.feature-cta p { margin:0;color:rgba(255,255,255,.8);font-size:13px }
.feature-cta .button { color:#0b46c9 }

/* Connect */
.connect-visual { display:grid;place-items:center }
.connect-network { width:68%;max-height:88%;object-fit:contain }
.connect-event { position:absolute;right:22px;bottom:24px;display:grid;grid-template-columns:76px 1fr;align-items:center;gap:13px;width:300px;padding:10px;border:1px solid #e2e8f3;border-radius:17px;background:rgba(255,255,255,.94);box-shadow:0 18px 40px rgba(18,42,82,.14) }
.connect-event img { width:76px;height:112px;object-fit:cover;object-position:top;border-radius:10px }
.connect-event b,.connect-event small { display:block }
.connect-event b { margin-bottom:7px;font-size:13px }
.connect-event small { color:var(--muted);font-size:10px;line-height:1.5 }
.feature-phone-pair { display:flex;justify-content:center;align-items:flex-end;gap:24px;min-height:540px }
.feature-phone-pair>div { width:min(245px,45%);overflow:hidden;border:8px solid #07111f;border-radius:28px;background:#07111f;box-shadow:0 20px 50px rgba(7,16,31,.18) }
.feature-phone-pair>div:nth-child(2) { transform:translateY(36px) }
.feature-phone-pair img { display:block;width:100%;height:auto }

/* Request */
.request-visual { overflow:hidden }
.request-phone { position:absolute;z-index:2;left:8%;bottom:-80px;width:265px;overflow:hidden;border:8px solid #07111f;border-radius:30px;box-shadow:0 25px 60px rgba(7,16,31,.25) }
.request-phone img,.request-device-stack img { display:block;width:100%;height:auto }
.request-flow-card { position:absolute;top:70px;right:5%;display:flex;align-items:center;width:58%;padding:24px;border:1px solid #e1e7f0;border-radius:18px;background:#fff;box-shadow:0 18px 40px rgba(15,38,74,.1) }
.request-flow-card>div { display:grid;justify-items:center;gap:8px;min-width:60px;color:#506077;font-size:9px;font-weight:700 }
.request-flow-card i { display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--blue);background:#edf2ff;font-size:18px }
.request-flow-card>div:last-child i { color:#15944b;background:#e9f8ee }
.request-flow-card>b { flex:1;height:1px;background:#cfd9e8 }
.request-device-stack { position:relative;min-height:510px }
.request-mobile { position:absolute;z-index:2;left:4%;bottom:0;width:240px!important;border:7px solid #07111f;border-radius:25px;box-shadow:0 22px 48px rgba(7,16,31,.23) }
.request-admin { position:absolute;right:0;top:30px;width:78%!important;border:10px solid #07111f;border-radius:18px;box-shadow:0 20px 50px rgba(7,16,31,.17) }

/* Experience */
.experience-visual { overflow:hidden }
.experience-person { position:absolute;left:2%;bottom:0;width:57%;height:94%;object-fit:cover;object-position:top;border-radius:0 0 0 28px }
.experience-phone { position:absolute;right:5%;bottom:-80px;width:245px;overflow:hidden;border:8px solid #07111f;border-radius:28px;box-shadow:0 22px 50px rgba(7,16,31,.24) }
.experience-phone img,.experience-showcase>img { display:block;width:100%;height:auto }
.day-timeline { position:absolute;top:28px;right:4%;display:grid;gap:5px;width:245px;padding:12px;border:1px solid #e2e8f2;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 14px 32px rgba(14,39,77,.12) }
.day-timeline>div { display:grid;grid-template-columns:55px 28px 1fr;align-items:center;gap:7px;padding:8px;border-radius:10px;color:#26354a;background:#f7f9fd;font-size:9px }
.day-timeline time { color:#7a8798 }
.day-timeline i { display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--blue);background:#e9efff;font-size:14px }
.experience-showcase { display:grid;grid-template-columns:230px 1fr;align-items:center;gap:28px }
.experience-showcase>img { border:7px solid #07111f;border-radius:27px;box-shadow:0 22px 50px rgba(7,16,31,.2) }
.experience-cards { display:grid;gap:12px }
.experience-cards article { display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:16px;border:1px solid #e3e8f1;border-radius:15px;background:#fff }
.experience-cards i { grid-row:1/3;width:40px;height:40px;font-size:19px }
.experience-cards strong { font-size:13px }
.experience-cards p { margin:4px 0 0;color:var(--muted);font-size:10.5px;line-height:1.5 }

@media(max-width:1050px) {
  .feature-main { width:min(900px,90%) }
  .feature-hero-detail,.feature-showcase,.feature-showcase.reverse { grid-template-columns:1fr }
  .feature-hero-detail { padding-top:30px }
  .feature-copy { max-width:720px }
  .feature-showcase.reverse .feature-section-copy { order:0 }
  .feature-proof { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .feature-process { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px }
  .feature-process>div:nth-child(2) { border-right:0 }
  .feature-process>div:nth-child(-n+2) { border-bottom:1px solid #e6eaf1;padding-bottom:24px }
}
@media(max-width:680px) {
  .feature-main { width:92%;padding-top:30px }
  .feature-copy h1 { font-size:42px }
  .feature-copy .actions { align-items:flex-start;flex-direction:column }
  .feature-visual { height:400px;border-radius:20px }
  .feature-screen { inset:30px 16px }
  .feature-proof { grid-template-columns:1fr;margin-bottom:52px }
  .feature-showcase,.feature-showcase.reverse { grid-template-columns:1fr;padding:25px 18px;margin-bottom:52px }
  .feature-process { grid-template-columns:1fr;padding:14px }
  .feature-process>div,.feature-process>div:nth-child(2) { border-right:0;border-bottom:1px solid #e6eaf1;padding:18px 15px }
  .feature-process>div:last-child { border-bottom:0 }
  .feature-cta { align-items:flex-start;flex-direction:column;padding:28px 24px }
  .connect-event { right:10px;bottom:12px;width:245px;grid-template-columns:60px 1fr }
  .connect-event img { width:60px;height:85px }
  .feature-phone-pair { min-height:430px;gap:10px }
  .request-phone { left:4%;width:190px }
  .request-flow-card { top:25px;right:3%;width:72%;padding:15px }
  .request-flow-card>div { min-width:43px }
  .request-flow-card span { display:none }
  .request-mobile { width:155px!important }
  .request-admin { width:83%!important }
  .request-device-stack { min-height:330px }
  .experience-person { width:68% }
  .experience-phone { right:3%;width:180px }
  .day-timeline { display:none }
  .experience-showcase { grid-template-columns:135px 1fr;gap:14px }
  .experience-cards article { grid-template-columns:34px 1fr;padding:12px }
  .experience-cards i { width:34px;height:34px }
}

/* Stakeholder routes linked from the Solutions cards. */
.role-list .role-arrow {
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  margin-left:auto;
  border-radius:50%;
  color:var(--ink);
  transition:color .2s,background .2s,transform .2s
}
.role-list article {
  position:relative;
  transition:border-color .22s,background .22s,box-shadow .22s,transform .22s
}
.role-list article:hover,
.role-list article:focus-within {
  border-color:#7d9cff;
  background:#f6f8ff;
  box-shadow:0 18px 42px rgba(49,94,251,.14);
  transform:translateY(-3px)
}
.role-list article:hover .role-photo img,
.role-list article:focus-within .role-photo img {
  transform:scale(1.035)
}
.role-list .role-photo img {
  transition:transform .3s ease
}
.role-list .role-arrow::before {
  content:"";
  position:absolute;
  inset:0
}
.role-list .role-arrow .ph {
  position:relative;
  z-index:1
}
.role-list .role-arrow:hover {
  color:#fff;
  background:var(--blue);
  transform:translateX(3px)
}
.role-list article:hover .role-arrow,
.role-list article:focus-within .role-arrow {
  color:#fff;
  background:var(--blue);
  transform:translateX(3px)
}
.role-list .role-arrow .ph { font-size:18px }
.stakeholder-page { background:linear-gradient(180deg,#fff,#fbfcff 52%,#fff) }
.stakeholder-main { width:min(1320px,90%);margin:auto;padding:clamp(44px,6vw,82px) 0 56px }
.stakeholder-hero { display:grid;grid-template-columns:minmax(330px,.82fr) minmax(520px,1.18fr);align-items:center;gap:clamp(42px,6vw,86px);min-height:575px;margin-bottom:46px }
.stakeholder-copy h1 { max-width:620px;margin:0;font-size:clamp(48px,5vw,75px);line-height:1.02;letter-spacing:-.055em }
.stakeholder-copy>p { max-width:530px;margin:24px 0 30px;color:var(--muted);font-size:clamp(15px,1.3vw,19px);line-height:1.65 }
.stakeholder-copy .actions { display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px }
.stakeholder-scene { position:relative;overflow:hidden;height:520px;border:1px solid #e2e8f2;border-radius:28px;background:linear-gradient(145deg,#f4f7fc,#eaf1ff);box-shadow:0 25px 70px rgba(18,42,80,.1) }
.stakeholder-portrait { position:absolute;right:0;bottom:0;width:68%;height:100%;object-fit:cover;object-position:top center }
.stakeholder-phone { position:absolute;left:7%;bottom:-78px;width:245px;overflow:hidden;border:8px solid #07111f;border-radius:29px;background:#07111f;box-shadow:0 24px 58px rgba(7,16,31,.27) }
.stakeholder-phone img { display:block;width:100%;height:auto }
.staff-live-chip,.management-chip { position:absolute;right:25px;bottom:26px;display:flex;align-items:center;gap:11px;padding:12px 15px;border:1px solid rgba(255,255,255,.8);border-radius:14px;color:#17273d;background:rgba(255,255,255,.92);box-shadow:0 15px 36px rgba(19,42,77,.14);font-size:10px;line-height:1.4 }
.staff-live-chip i,.management-chip i { display:grid;place-items:center;width:35px;height:35px;border-radius:50%;color:var(--blue);background:#ebf1ff;font-size:19px }
.staff-live-chip b { color:#16a05a }
.management-chip b { color:var(--blue) }
.stakeholder-tools { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:76px;padding:15px;border:1px solid #e2e7ef;border-radius:23px;background:#fff;box-shadow:0 18px 50px rgba(17,37,70,.05) }
.stakeholder-tools article { display:grid;grid-template-columns:40px 1fr;gap:4px 11px;min-width:0;padding:16px;border-radius:15px;background:#f9fbfe }
.stakeholder-tools article>i { grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--blue);background:#eaf0ff;font-size:19px }
.stakeholder-tools strong { font-size:12px }
.stakeholder-tools p { margin:4px 0 0;color:var(--muted);font-size:9.5px;line-height:1.45 }
.stakeholder-tools article>span { grid-column:1/-1;justify-self:start;margin-top:10px;padding:4px 7px;border-radius:999px;color:#15824b;background:#eaf8f0;font-size:8px;font-weight:700 }
.stakeholder-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:68px }
.stakeholder-grid>article { overflow:hidden;border:1px solid #e1e7ef;border-radius:22px;background:#fff;box-shadow:0 16px 45px rgba(17,37,70,.05) }
.stakeholder-grid>article>img { display:block;width:100%;height:245px;object-fit:cover;object-position:center }
.stakeholder-grid>article:nth-child(2)>img { object-position:top }
.stakeholder-grid>article>div { position:relative;padding:23px }
.stakeholder-grid>article i { display:grid;place-items:center;width:42px;height:42px;margin-top:-44px;margin-bottom:15px;border:5px solid #fff;border-radius:50%;color:var(--blue);background:#eaf0ff;font-size:18px;box-sizing:content-box }
.stakeholder-grid h2 { margin:0 0 8px;font-size:20px }
.stakeholder-grid p { margin:0;color:var(--muted);font-size:11px;line-height:1.6 }
.staff-workspace { display:grid;grid-template-columns:minmax(320px,.72fr) minmax(520px,1.28fr);gap:22px;margin:0 0 25px;padding:20px;border:1px solid #e2e7ef;border-radius:25px;background:#fff }
.priority-queue { padding:15px;border-radius:18px;background:#f7f9fd }
.priority-queue>header { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;padding:5px }
.priority-queue h2 { margin:6px 0 0;font-size:22px }
.priority-queue>header>i { color:var(--blue);font-size:25px }
.priority-queue>article { display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;margin-top:8px;padding:12px;border:1px solid #e5e9f0;border-radius:12px;background:#fff }
.priority-queue>article>i { display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--blue);background:#edf2ff;font-size:18px }
.priority-queue strong,.priority-queue p { display:block }
.priority-queue strong { font-size:11px }
.priority-queue p { margin:3px 0 0;color:var(--muted);font-size:8.5px }
.priority-queue button { padding:7px 9px;border:1px solid #b7c8ff;border-radius:7px;color:var(--blue);background:#fff;font-size:8px;font-weight:700 }
.staff-dashboard { overflow:hidden;min-height:520px;padding:10px;border-radius:18px;background:#07111f }
.staff-dashboard img { width:100%;height:100%;object-fit:cover;object-position:center top }
.stakeholder-actions { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:68px;padding:16px;border:1px solid #e2e7ef;border-radius:22px;background:#fff }
.stakeholder-actions article { display:grid;justify-items:center;gap:10px;padding:18px 9px;border-radius:14px;text-align:center;background:#f8faff }
.stakeholder-actions i { display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--blue);background:#eaf0ff;font-size:19px }
.stakeholder-actions strong { font-size:9px }
.portfolio-view { display:grid;grid-template-columns:minmax(270px,.52fr) minmax(600px,1.48fr);align-items:center;gap:clamp(38px,5vw,74px);margin-bottom:28px;padding:clamp(28px,4vw,52px);border:1px solid #e2e7ef;border-radius:25px;background:#fff }
.portfolio-summary h2 { margin:9px 0 16px;font-size:clamp(30px,3vw,46px);line-height:1.08;letter-spacing:-.04em }
.portfolio-summary>p { margin:0;color:var(--muted);font-size:14px;line-height:1.7 }
.portfolio-dashboard { overflow:hidden;aspect-ratio:16/10;padding:11px;border-radius:20px;background:#07111f;box-shadow:0 23px 55px rgba(7,16,31,.2) }
.portfolio-dashboard img { display:block;width:100%;height:100%;object-fit:cover;object-position:top }
.management-capabilities { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:68px }
.management-capabilities article { display:grid;grid-template-columns:45px 1fr;gap:5px 13px;padding:20px;border:1px solid #e2e7ef;border-radius:17px;background:#fff }
.management-capabilities i { grid-row:1/3;display:grid;place-items:center;width:45px;height:45px;border-radius:50%;color:var(--blue);background:#edf2ff;font-size:20px }
.management-capabilities strong { font-size:13px }
.management-capabilities p { margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.5 }
@media(max-width:1050px) {
  .stakeholder-main { width:min(900px,90%) }
  .stakeholder-hero,.staff-workspace,.portfolio-view { grid-template-columns:1fr }
  .stakeholder-copy { max-width:720px;padding-top:30px }
  .stakeholder-tools { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .stakeholder-tools article:last-child { grid-column:1/-1 }
  .stakeholder-actions { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .management-capabilities { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:680px) {
  .role-list .role-arrow { flex-basis:34px;width:34px;height:34px }
  .stakeholder-main { width:92%;padding-top:28px }
  .stakeholder-copy h1 { font-size:42px }
  .stakeholder-copy .actions { align-items:flex-start;flex-direction:column }
  .stakeholder-scene { height:410px;border-radius:20px }
  .stakeholder-portrait { width:82% }
  .stakeholder-phone { left:3%;width:175px }
  .stakeholder-tools,.stakeholder-grid,.stakeholder-actions,.management-capabilities { grid-template-columns:1fr }
  .stakeholder-tools article:last-child { grid-column:auto }
  .stakeholder-grid>article>img { height:210px }
  .staff-workspace { padding:12px }
  .staff-dashboard { min-height:290px }
  .stakeholder-actions article { grid-template-columns:40px 1fr;align-items:center;justify-items:start;text-align:left }
  .stakeholder-actions i { grid-row:auto }
  .portfolio-view { padding:24px 17px }
}

/* Enquiry-based pricing: "Contact us" replaces the numeral, so it needs a
   smaller size than .price (tuned for "R15") to stay on one line in a card. */
.price.price-enquiry {
  font-size:clamp(19px,calc(1.1 * var(--u) + 6px),27px);
  letter-spacing:-.02em;
  white-space:nowrap
}

/* Brand loading screen. Hidden by default and only revealed by the inline
   head script, so a visitor with JS disabled is never trapped behind it.
   Ground colour matches the video's own background (#f5f4ed) exactly, which
   is why object-fit:contain can letterbox invisibly at any aspect ratio. */
.loader {
  position:fixed;
  z-index:9999;
  inset:0;
  display:none;
  place-items:center;
  background:#f5f4ed;
  transition:opacity .45s ease
}
html.loading .loader {
  display:grid
}
html.loading body {
  overflow:hidden
}
.loader video {
  width:100%;
  height:100%;
  object-fit:contain
}
.loader.done {
  opacity:0;
  pointer-events:none
}
@media(prefers-reduced-motion:reduce) {
  .loader { display:none !important }
}