/* ════════════  TOKENS  ════════════ */
:root {
  /* brand blue, plus the tones that hold up against it */
  --brand: #0059B2;
  /* accents: icons, rules, borders, small caps */
  --brand-2: #5B9FE3;
  /* lighter — brand-coloured text on dark */
  --brand-d: #00448C;
  /* deeper — filled surfaces carrying white text */
  --brand-soft: rgba(0, 89, 178, .12);
  --dark: #141414;
  --dark-2: #1D1D1D;
  --dark-3: #2A2A2A;
  --grey: #F4F4F2;
  --grey-2: #EAEAE7;
  --line: #E2E2DE;
  --line-d: rgba(255, 255, 255, .14);
  --ink: #111111;
  --txt: #6E6E6E;
  --txt-l: #B4B4B0;

  --dsp: "Plus Jakarta Sans", system-ui, sans-serif;
  --bdy: "Rubik", system-ui, sans-serif;

  --pad: clamp(20px, 4.5vw, 60px);
  --sec: clamp(70px, 8vw, 120px);
  --e: cubic-bezier(.22, 1, .36, 1);
}

/* ════════════  BASE  ════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%
}

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--bdy);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

img {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit
}

::selection {
  background: var(--brand);
  color: #fff
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px
}

.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad)
}

.sec {
  padding: 50px 0px;
  position: relative
}

.grey {
  background: var(--grey)
}

.dk {
  background: var(--dark);
  color: #fff
}

h1,
h2,
h3,
h4 {
  font-family: var(--dsp);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em
}

.h1 {
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -.04em
}

.h2 {
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: -.035em
}

.h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.24
}

.gd {
  color: var(--brand)
}

.p {
  color: #101010;
  font-size:18px;
  line-height: 1.9;
  font-weight: 400
}

.dk .p,
.dk .txt-l {
  color: var(--txt-l)
}

/* pill badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font-family: var(--dsp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none
}

.dk .badge,
.on-img .badge {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
  backdrop-filter: blur(8px)
}

/* ════════════  BUTTONS  ════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--dsp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 9px 9px 9px 28px;
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  transition: .5s var(--e)
}

.btn .ci {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  flex: none;
  transition: .5s var(--e)
}

.btn .ci svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--e)
}

/* filled buttons use the deeper blue so white label text stays legible */
.btn:hover {
  background: var(--brand-d)
}

.btn:hover .ci {
  background: #fff
}

.btn:hover .ci svg {
  stroke: var(--brand-d);
  transform: translate(2px, -2px)
}

.btn-o {
  background: transparent;
  border-color: #737373;
  color: var(--ink)
}

.dk .btn-o,
.on-img .btn-o {
  border-color: rgba(255, 255, 255, .3);
  color: #fff
}

.btn-o:hover {
  background: var(--brand-d);
  border-color: var(--brand-d);
  color: #fff
}

.btn-brand {
  background: var(--brand-d);
  padding: 13px 30px
}

.btn-brand:hover {
  background: var(--ink)
}

/* ════════════  IMAGE FRAME  ════════════ */
.fr {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--dark-2);
  background-image: linear-gradient(140deg, #2A2A2A, #151515)
}

.fr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--e)
}

.fr img.gone {
  opacity: 0
}

.zm:hover .fr img,
.fr.zm:hover img {
  transform: scale(1.06)
}

/* line-art watermark */
.arch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(115deg, transparent 47%, rgba(17, 17, 17, .05) 47.2%, transparent 47.6%),
    linear-gradient(65deg, transparent 39%, rgba(17, 17, 17, .045) 39.2%, transparent 39.6%),
    linear-gradient(0deg, transparent 71%, rgba(17, 17, 17, .04) 71.2%, transparent 71.5%),
    repeating-linear-gradient(100deg, transparent 0 62px, rgba(17, 17, 17, .028) 62px 63px),
    repeating-linear-gradient(-100deg, transparent 0 78px, rgba(17, 17, 17, .026) 78px 79px)
}

/* ════════════  HEADER  ════════════ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transition: .5s var(--e)
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  box-shadow: 0 6px 26px -18px rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .5s var(--e)
}

header.on::before {
  opacity: 1
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 92px;
  transition: height .5s var(--e)
}

header.on .nav {
  height: 74px
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 36px
}

/* the logo is used exactly as supplied — no recolouring */
.lg {
  display: block;
  width: clamp(104px, 8.4vw, 126px);
  height: auto;
  /* white while the header is over the hero, and in the dark drawer and footer */
  filter: brightness(0) invert(1);
  transition: filter .5s var(--e)
}

/* the header turns white on scroll, so the logo returns to its supplied colour */
header.on .lg {
  filter: none
}

.menu {
  display: flex;
  gap: 4px;
  margin-right: auto
}

.menu>li {
  list-style: none;
  position: relative
}

.menu>li>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dsp);
  font-size: 15.5px;
  font-weight: 600;
  padding: 10px 16px;
  color: #fff;
  transition: color .4s
}

header.on .menu>li>a {
  color: var(--ink)
}

.menu .cv {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  transition: transform .4s var(--e)
}

.menu>li:hover .cv {
  transform: rotate(180deg)
}

.drop {
  position: absolute;
  top: 100%;
  left: 8px;
  min-width: 262px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .4);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: .42s var(--e)
}

.menu>li:hover .drop {
  opacity: 1;
  visibility: visible;
  transform: none
}

.drop a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--ink);
  transition: .35s
}

.drop a:hover {
  background: var(--grey);
  color: var(--brand);
  padding-left: 19px
}

.hcall {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  transition: color .5s
}

header.on .hcall {
  color: var(--ink)
}

.hcall .ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  border: 1px solid var(--brand);
  display: grid;
  place-items: center;
  flex: none;
  transition: .5s
}

header.on .hcall .ic {
  background: var(--brand);
  border-color: var(--brand)
}

.hcall .ic svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7
}

.hcall small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  opacity: .92;
  line-height: 1.4
}

.hcall b {
  font-family: var(--dsp);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2
}

.rnd {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .45s var(--e);
  flex: none
}

header.on .rnd {
  background: var(--grey);
  border-color: var(--line)
}

.rnd:hover {
  background: var(--brand);
  border-color: var(--brand)
}

.rnd svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2
}

header.on .rnd svg {
  stroke: var(--ink)
}

.rnd:hover svg {
  stroke: #fff
}

.brg {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  position: relative;
  cursor: pointer;
  flex: none
}

.brg i {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: .4s var(--e)
}

header.on .brg i {
  background: var(--ink)
}

.brg i:nth-child(1) {
  top: 17px
}

.brg i:nth-child(2) {
  top: 25px
}

.brg.x i:nth-child(1) {
  top: 21px;
  transform: rotate(45deg)
}

.brg.x i:nth-child(2) {
  top: 21px;
  transform: rotate(-45deg)
}

#dr {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) 40px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--e);
  overflow-y: auto;
  overscroll-behavior: contain
}

#dr.x {
  clip-path: inset(0 0 0 0)
}

#dr .dr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line-d);
  position: sticky;
  top: 0;
  background: var(--dark);
  z-index: 3
}

#dr .dr-top .logo {
  margin-right: 0
}

#dr .dr-cls {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-d);
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  transition: .45s var(--e)
}

#dr .dr-cls:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: rotate(90deg)
}

#dr .dr-cls svg {
  width: 17px;
  height: 17px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round
}

#dr .dr-nav {
  display: flex;
  flex-direction: column;
  margin-top: 8px
}

#dr .dr-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--dsp);
  font-size: clamp(18px, 4.6vw, 24px);
  font-weight: 700;
  color: #fff;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-d);
  letter-spacing: -.025em;
  transition: .4s var(--e)
}

#dr .dr-nav a:hover,
#dr .dr-nav a:active {
  color: var(--brand-2);
  padding-left: 8px
}

#dr .dr-nav a svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
  flex: none
}

#dr .dr-foot {
  margin-top: 30px
}

#dr .dr-foot .btn {
  width: auto;
  display: inline-flex;
  justify-content: center;
  padding: 13px 30px;
  font-size: 14.5px
}

#dr .dr-meta {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-d);
  display: flex;
  flex-direction: column;
  gap: 10px
}

#dr .dr-meta a {
  font-family: var(--dsp);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0
}

#dr .dr-meta a:hover {
  color: var(--brand-2)
}

#dr .dr-meta svg {
  width: 15px;
  height: 15px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 1.8;
  flex: none
}

#dr .dr-cities {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--txt-l)
}

/* ════════════  HERO  ════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 150px 0 60px;
  overflow: hidden;
  color: #fff
}

.hero .bgimg {
  position: absolute;
  inset: 0
}

/* stacked slides that cross-fade; all zoom in step so the swap is seamless */
.hero .bgimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.1s var(--e);
  animation: kb 11s ease-in-out infinite alternate
}

.hero .bgimg img.on {
  opacity: 1
}

/* keep the zoom modest — a big scale factor visibly softens the photo */
@keyframes kb {
  to {
    transform: scale(1.09)
  }
}

/* flat black overlay across the whole hero, with a little extra weight on the
   left so the headline always has a solid ground to sit on */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3)
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .04) 100%)
}

.hero .wrap {
  position: relative;
  z-index: 4;
  width: 100%
}

.hero .badge {
  margin-bottom: 30px
}

.hero .h1 {
  max-width: 16ch;
  margin-bottom: 0
}

.hero-low {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: flex-end;
  margin-top: 44px
}

.hero-low p {
  /* max-width: 38ch; */
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
  color:#fff;
}

.hero-low .btn {
  margin-top: 34px
}

.hcards {
  display: flex;
  gap: 16px;
  align-items: stretch
}

.gcard {
  width: 536px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  padding: 30px 32px;
  /* two columns so the card is filled rather than half empty */
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(20px, 2.2vw, 30px);
  align-items: center
}

.gcard .big {
  font-family: var(--dsp);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1
}

.gcard .cap {
  /* generic .cap (chip style) se white box na bane */
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .84);
  margin-top: 10px;
  line-height: 1.6;
  max-width: 22ch
}

.gcard ul {
  list-style: none;
  padding-left: clamp(18px, 2vw, 26px);
  border-left: 1px solid rgba(255, 255, 255, .2)
}

.gcard li {
  position: relative;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .9);
  padding: 6px 0 6px 18px
}

.gcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-2)
}


/* mask reveal for hero lines */
.mk {
  display: block;
  overflow: hidden
}

.mk>span {
  display: block;
  transform: translateY(103%);
  transition: transform 1.15s var(--e)
}

.go .mk>span {
  transform: translateY(0)
}

.go .mk:nth-of-type(2)>span {
  transition-delay: .1s
}

.fd {
  opacity: 0;
  transform: translateY(20px);
  transition: .9s var(--e)
}

.go .fd {
  opacity: 1;
  transform: none
}

.go .d1 {
  transition-delay: .34s
}

.go .d2 {
  transition-delay: .46s
}

.go .d3 {
  transition-delay: .58s
}

.go .d4 {
  transition-delay: .7s
}

/* ════════════  MARQUEE  ════════════ */
.marq {
  background: var(--dark);
  color: #fff;
  padding: clamp(14px, 1.6vw, 22px) 0;
  overflow: hidden;
  display: flex;
  white-space: nowrap
}

.marq .tk {
  display: flex;
  flex: none;
  animation: sl 32s linear infinite
}

.marq span {
  font-family: var(--dsp);
  font-size: clamp(19px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px
}

/* every other word is drawn as an outline instead of a fill */
.marq span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .5);
  text-stroke: 1px rgba(255, 255, 255, .5)
}

.marq span::after {
  content: "★";
  font-size: .5em;
  line-height: 1;
  color: var(--brand-2);
  -webkit-text-stroke: 0;
  text-stroke: 0
}

@keyframes sl {
  to {
    transform: translateX(-100%)
  }
}

/* ════════════  SECTION HEAD  ════════════ */
/* every section heading is centred — no empty left column */
.shd {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 840px;
  margin: 0 auto clamp(40px, 4.6vw, 64px);
  position: relative
}

.shd .lft {
  display: flex;
  justify-content: center;
  margin-bottom: 22px
}

.shd .h2 {
  margin-bottom: 20px
}

.shd .p {
  margin-left: auto;
  margin-right: auto
}

/* ════════════  SERVICE CARDS  ════════════ */
.scards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.scard {
  background: #fff;
  border-radius: 20px;
  padding: 32px 30px 34px;
  transition: .55s var(--e);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 14px -8px rgba(0, 0, 0, .1)
}

.scard:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .45)
}

.scard .tp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px
}

.scard h3 {
  max-width: 11ch
}

.scard .ic {
  width: 52px;
  height: 52px;
  flex: none;
  transition: transform .6s var(--e)
}

.scard:hover .ic {
  transform: rotate(-10deg) scale(1.08)
}

.scard .ic svg {
  width: 100%;
  height: 100%;
  stroke: var(--brand);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.scard .dv {
  height: 1px;
  background: var(--line);
  margin: 26px 0 22px;
  position: relative;
  overflow: hidden
}

.scard .dv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--e)
}

.scard:hover .dv::after {
  transform: scaleX(1)
}

.scard p {
  font-size: 17px;
  line-height: 1.86;
  color: #000000;
  font-weight: 400;
}

.scard .lk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-family: var(--dsp);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  transition: color .45s
}

.scard:hover .lk {
  color: var(--brand)
}

.scard .lk svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.3;
  transition: transform .45s var(--e)
}

.scard:hover .lk svg {
  transform: translate(3px, -3px)
}

/* ════════════  ABOUT DARK  ════════════ */
.about {
  position: relative;
  overflow: hidden;
  background: var(--grey);
  color: var(--ink)
}

.about .wm {
  position: absolute;
  left: -2%;
  bottom: -14%;
  font-family: var(--dsp);
  font-size: clamp(160px, 26vw, 400px);
  font-weight: 800;
  color: rgba(17, 17, 17, .045);
  letter-spacing: -.06em;
  pointer-events: none;
  line-height: .8
}

.about .gridlines {
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image: linear-gradient(118deg, transparent 42%, rgba(17, 17, 17, .04) 42.2%, transparent 42.7%),
    linear-gradient(58deg, transparent 55%, rgba(17, 17, 17, .035) 55.2%, transparent 55.6%)
}

.about .abt {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: stretch
}

.about .badge {
  margin-bottom: 26px
}

.about .h2 {
  margin-bottom: 30px
}

.ticks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
  margin-bottom: 30px
}

.tk {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--dsp);
  font-size: 16px;
  font-weight: 600
}

.tk svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  margin-top: 5px
}

.about .fr {
  aspect-ratio: 4/3.4
}

/* ════════════  PROMOTER : FIXED BACKDROP  ════════════ */
/* the photo is pinned while the content scrolls over it.
   the ID beats .dk, whose background shorthand would otherwise clear the image */
#promoter {
  background-image:
    linear-gradient(rgba(9, 12, 17, .88), rgba(9, 12, 17, .88)),
    url(../img/bg-imges.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed
}

/* the stat tiles turn to glass so they sit on the photo instead of blocking it */
#promoter .pgrid div {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none
}

#promoter .pgrid div:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: none
}

#promoter .pgrid small {
  color: rgba(255, 255, 255, .72)
}

/* background-attachment: fixed is unreliable on iOS, so it scrolls there */
@media (max-width: 900px) {
  #promoter {
    background-attachment: scroll
  }
}
/* ════════════  SERVICES SHOWCASE (accordion)  ════════════ */
.show {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center
}

.show-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/4.1;
  background: var(--dark-2)
}

.show-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .8s var(--e), transform 1.2s var(--e)
}

.show-media img.on {
  opacity: 1;
  transform: scale(1)
}

.slist {
  border-top: 1px solid var(--line)
}

.si {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 16px 24px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: padding .6s var(--e)
}

.si::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-soft), rgba(0, 89, 178, 0) 72%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .65s var(--e);
  pointer-events: none
}

.si.on::before {
  transform: scaleX(1)
}

.si::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--e)
}

.si.on::after {
  transform: scaleY(1)
}

.si.on {
  padding-left: 22px
}

.si>* {
  position: relative;
  z-index: 2
}

.si .no {
  font-family: var(--dsp);
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: .04em;
  transition: color .45s;
  width: 26px;
  flex: none;
  padding-top: 10px
}

.si .tx {
  flex: 1;
  min-width: 0
}

.si h3 {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  transition: color .45s
}

.si .dsc {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3D4652;
  margin-top: 8px;
  max-width: 48ch;
  opacity: 1;
  transform: translateY(-4px);
  transition: opacity .55s var(--e), transform .55s var(--e), color .5s
}

.si.on .dsc {
  opacity: 1;
  transform: none;
  color: #1F2933
}

.si .ar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 4px;
  transition: .5s var(--e)
}

.si .ar svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--e)
}

.si:hover h3 {
  color: var(--brand)
}

.si.on .no,
.si.on h3 {
  color: var(--brand)
}

.si.on .ar svg {
  transform: rotate(-45deg)
}

.si:hover .ar {
  transform: scale(1.09)
}

.si.on .ar {
  box-shadow: 0 12px 26px -12px rgba(0, 89, 178, .9)
}

.show-count {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  background: rgba(20, 20, 20, .55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  padding: 8px 16px;
  color: #fff;
  font-family: var(--dsp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em
}

.show-count b {
  color: var(--brand)
}

.sdots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 22px
}

.sdots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: .4s
}

.sdots i.on {
  background: var(--brand);
  width: 22px;
  border-radius: 100px
}

/* ════════════  COUNTERS  ════════════ */
/* a compact strip: hairline top and bottom, four figures inline with dividers */
.cnt-sec {
  background: #fff;
  color: var(--ink);
  padding: clamp(34px, 3.6vw, 54px) 0
}

.cnt-sec .cnts {
  --cgap: clamp(16px, 2.4vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cgap);
  padding: clamp(26px, 2.8vw, 40px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-image: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent) 1
}

.cn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(10px, 1.2vw, 16px) clamp(6px, .9vw, 14px);
  border-radius: 14px;
  transition: transform .5s var(--e)
}

/* soft gradient wash behind the figure on hover */
.cn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 89, 178, .1) 0%, rgba(0, 89, 178, 0) 80%);
  opacity: 0;
  transition: opacity .5s var(--e)
}

.cn:hover::after {
  opacity: 1
}

.cn:hover {
  transform: translateY(-5px)
}

/* hairline between columns, centred in the gap */
.cn+.cn::before {
  content: "";
  position: absolute;
  left: calc(var(--cgap) / -2);
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line)
}

.cn .n {
  font-family: var(--dsp);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  color: var(--ink);
  transition: color .45s var(--e)
}

.cn:hover .n {
  background: linear-gradient(135deg, #0059B2 0%, #3E8EEA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.cn .n em {
  font-style: normal;
  color: var(--brand)
}

/* unit label ("Lakh", "Cr") — flex strips the surrounding spaces, so it carries its own */
.cn .n u {
  text-decoration: none;
  font-size: .5em;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 .02em 0 .18em;
  color: var(--txt)
}

.cn .k::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 auto 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), #3E8EEA);
  transform: scaleX(0);
  transition: transform .5s var(--e)
}

.cn:hover .k::before {
  transform: scaleX(1)
}

.cn .k {
  margin-top: 10px;
  font-family: var(--dsp);
  font-size: clamp(11.5px, .92vw, 13px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--txt)
}
/* ════════════  PROCESS  ════════════ */
/* a numbered timeline — the content is a sequence of stages, not a gallery */
.proc {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 40px)
}

/* the rule the step markers sit on */
.proc::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 33px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent)
}

.pc {
  position: relative;
  background: none;
  padding: 0;
  box-shadow: none;
  border: 0
}

.pc-no {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--dsp);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand-d);
  transition: .5s var(--e)
}

.pc:hover .pc-no {
  background: var(--brand-d);
  border-color: var(--brand-d);
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 18px 32px -18px rgba(0, 114, 168, .9)
}

.pc h3 {
  text-align: center;
  font-family: var(--dsp);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 12px;
  transition: color .45s var(--e)
}

.pc:hover h3 {
  color: var(--brand-d)
}

.pc p {
  text-align: center;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--txt);
  max-width: 30ch;
  margin: 0 auto
}
/* ════════════  PORTFOLIO  ════════════ */
/* the normal flat rail — no 3D — with a border on each card */
.rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 0 34px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none
}

.rail::-webkit-scrollbar {
  display: none
}

.pj {
  flex: none;
  width: clamp(250px, 25vw, 330px);
  scroll-snap-align: center;
  transition: translate .5s var(--e)
}

.pj:hover {
  translate: 0 -12px
}

.pj:nth-child(even) {
  margin-top: 52px
}

.pj .fr {
  aspect-ratio: 4/4.6;
  border-radius: 20px;
  border: 1px solid rgba(0, 89, 178, .4);
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .5);
  transition: border-color .5s var(--e), box-shadow .5s var(--e)
}

.pj:hover .fr {
  border-color: var(--brand);
  box-shadow: 0 40px 72px -32px rgba(0, 0, 0, .58)
}

/* scrim so the pills stay readable on bright photos */
.pj .fr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 8, 8, .5) 0%, rgba(8, 8, 8, .05) 26%, rgba(8, 8, 8, 0) 55%)
}

.pj .pills {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.pj .pills span {
  background: rgba(10, 10, 10, .5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--dsp);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap
}

.pj .pills span+span {
  background: var(--brand-d);
  border-color: var(--brand-d)
}

.pj h3 {
  margin: 22px 0 8px;
  font-size: 24px;
  transition: color .45s var(--e)
}

.pj:hover h3 {
  color: var(--brand)
}

.pj .m {
  font-size: 14.5px;
  color: var(--txt);
  line-height: 1.7
}

.rail-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px
}

.rail-nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .45s var(--e)
}

.rail-nav button:hover {
  background: var(--brand);
  border-color: var(--brand)
}

.rail-nav svg {
  width: 17px;
  height: 17px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2
}

.rail-nav button:hover svg {
  stroke: #fff
}

/* ════════════  CTA / CONTACT  ════════════ */
/* a rounded panel inset from the page, so it reads as its own block and does
   not merge into the black footer directly below it */
.cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--dark);
  padding: clamp(56px, 7vw, 104px) 0;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .6)
}

.cta .wrap {
  max-width: 1400px;
  padding: 0 clamp(16px, 1.6vw, 28px)
}

/* a brand-blue glow and fine line-work instead of a muddy photo */
.cta::before {
  content: "";
  position: absolute;
  width: min(900px, 92vw);
  aspect-ratio: 1;
  right: -16%;
  top: -34%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 89, 178, .3), rgba(0, 89, 178, 0) 66%)
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background-image:
    linear-gradient(118deg, transparent 44%, rgba(255, 255, 255, .04) 44.2%, transparent 44.7%),
    linear-gradient(62deg, transparent 56%, rgba(255, 255, 255, .03) 56.2%, transparent 56.6%),
    repeating-linear-gradient(100deg, transparent 0 76px, rgba(255, 255, 255, .022) 76px 77px)
}

.cta .cta-in {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(30px, 4vw, 72px);
  align-items: center
}

/* the form card — a real surface, so the fields actually read */
.frm {
  position: relative;
  overflow: hidden;
  background: #1C1C1C;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: clamp(26px, 2.8vw, 40px);
  box-shadow: 0 44px 84px -44px rgba(0, 0, 0, .95)
}

.frm::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent)
}

.frm .sub {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--txt-l);
  margin: -14px 0 26px
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.fld {
  margin-bottom: 16px
}

.fld label {
  display: block;
  font-family: var(--dsp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 9px
}

.fld input,
.fld select,
.fld textarea {
  width: 100%;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 13px;
  padding: 15px 17px;
  color: #fff;
  font-weight: 300;
  font-size: 15px;
  transition: .4s var(--e)
}

.fld textarea {
  resize: vertical;
  min-height: 96px
}

.fld input::placeholder,
.fld textarea::placeholder {
  color: rgba(255, 255, 255, .34)
}

.fld select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-repeat: no-repeat;
  background-position: right 17px center;
  background-size: 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230059B2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")
}

.fld select option {
  color: var(--ink);
  background: #fff
}

.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(0, 89, 178, .09);
  box-shadow: 0 0 0 4px rgba(0, 89, 178, .12)
}

.frm .btn {
  margin-top: 10px;
  padding: 7px 7px 7px 24px;
  font-size: 14.5px
}

.frm .btn .ci {
  width: 34px;
  height: 34px
}

/* ════════════  TESTIMONIALS  ════════════ */
.tst {
  padding: 50px 0;
  position: relative;
  overflow: hidden
}

.tst-rows {
  position: relative;
  z-index: 2;
  margin-top: clamp(34px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px)
}

/* rows are wider than the viewport and start pulled left, so the scroll-driven
   shift never runs out of card on either side */
.tst-row {
  display: flex;
  gap: clamp(16px, 1.8vw, 22px);
  width: max-content;
  margin-left: -210px;
  will-change: transform
}

.tcard {
  position: relative;
  overflow: hidden;
  flex: none;
  width: clamp(300px, 26vw, 388px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 2.4vw, 34px);
  box-shadow: 0 16px 38px -30px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--e), border-color .5s var(--e), box-shadow .5s var(--e)
}

/* oversized quote mark sitting behind the copy */
.tcard::before {
  content: "\201C";
  position: absolute;
  right: 20px;
  top: -14px;
  font-family: var(--dsp);
  font-size: 110px;
  font-weight: 800;
  line-height: 1;
  color: rgba(0, 89, 178, .07);
  pointer-events: none
}

/* accent rule that wipes in on hover */
.tcard::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--e)
}

.tcard:hover::after {
  transform: scaleX(1)
}

.tcard:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 89, 178, .35);
  box-shadow: 0 34px 62px -34px rgba(0, 0, 0, .45)
}

.tcard .stars {
  position: relative;
  color: var(--brand);
  font-size: 13px;
  letter-spacing: .26em;
  line-height: 1
}

.tcard p {
  position: relative;
  margin: 18px 0 24px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #000000
}

.tcard .who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line)
}

.tcard .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--dsp);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .03em;
  transition: transform .5s var(--e)
}

.tcard:hover .av {
  transform: scale(1.07)
}

.tcard b {
  display: block;
  font-family: var(--dsp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink)
}

.tcard small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--txt)
}
/* arrows are desktop-hidden; the rows drift on their own up there */
.tst-nav {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px)
}

.tst-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .45s var(--e)
}

.tst-nav button:hover {
  background: var(--brand);
  border-color: var(--brand)
}

.tst-nav svg {
  width: 16px;
  height: 16px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.tst-nav button:hover svg {
  stroke: #fff
}
/* ════════════  FOOTER  ════════════ */
footer {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--dark)
}

.f-in {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 29%);
  align-items: stretch
}

.f-body {
  padding: 0 clamp(26px, 3.4vw, 58px) 0 var(--pad);
  min-width: 0
}

/* top contact strip */
.f-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: clamp(32px, 3.6vw, 46px) 0;
  border-bottom: 1px solid var(--line-d)
}

.f-strip a {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  position: relative
}

.f-strip a+a {
  padding-left: clamp(14px, 2vw, 30px)
}

.f-strip a+a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line-d)
}

.f-strip .ic {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(0, 89, 178, .13);
  border: 1px solid rgba(0, 89, 178, .32);
  transition: .45s var(--e)
}

.f-strip .ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .45s var(--e)
}

.f-strip a:hover .ic {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-3px)
}

.f-strip a:hover .ic svg {
  stroke: #fff
}

.f-strip small {
  display: block;
  font-size: 13px;
  color: var(--txt-l);
  margin-bottom: 2px
}

.f-strip b {
  display: block;
  font-family: var(--dsp);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  transition: color .4s;
  overflow: hidden;
  text-overflow: ellipsis
}

.f-strip a:hover b {
  color: var(--brand-2)
}

/* link + newsletter columns */
.f-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: clamp(24px, 3vw, 46px);
  padding: clamp(36px, 4vw, 56px) 0
}

.f-cols h5 {
  font-family: var(--dsp);
  font-size: 20px;
  font-weight: 700;
 
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 20px
}

.f-cols a.ln {
  display: block;
  font-family: var(--dsp);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--txt-l);
  padding: 8px 0;
  transition: .4s var(--e)
}

.f-cols a.ln:hover {
  color: var(--brand);
  transform: translateX(5px)
}

.socs {
  display: flex;
  gap: 10px;
  margin-top: 22px
}

.socs a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-d);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .05);
  transition: .45s var(--e)
}

.socs a svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .45s
}

.socs a svg.sf {
  fill: #fff;
  stroke: none
}

.socs a:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-4px)
}

/* address column — centred block of real contact details */
.f-news {
  text-align: left
}

.f-addr {
  font-style: normal;
  font-size: 16px;
  line-height: 1.85;
  color: #F4F4F4;
  margin-bottom: 20px
}

.f-person {
  font-family: var(--dsp);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 12px
}

.f-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--txt-l);
  padding: 5px 0;
  transition: color .4s var(--e);
  font-weight: 500
}

.f-line span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(0, 89, 178, .16);
  border: 1px solid rgba(0, 89, 178, .35);
  transition: background .4s var(--e), border-color .4s var(--e)
}

.f-line span svg {
  width: 13px;
  height: 13px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s var(--e)
}

.f-line:hover {
  color: var(--brand-2)
}

.f-line:hover span {
  background: var(--brand);
  border-color: var(--brand)
}

.f-line:hover span svg {
  stroke: #fff
}

.f-news .socs {
  justify-content: flex-start
}

/* bottom bar */
.fb {
  border-top: 1px solid var(--line-d);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--txt-l);
  font-size: 14px
}

.fb .lgo {
  display: flex;
  align-items: center
}

.fb .lgo .lg {
  width: 112px
}

/* brand call-to-action panel */
.f-cta {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: #fff;
  padding: clamp(44px, 4.4vw, 64px) clamp(24px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center
}

.f-cta::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: .55;
  background: repeating-radial-gradient(circle at 28% 18%,
      rgba(255, 255, 255, 0) 0 46px, rgba(255, 255, 255, .22) 46px 47px)
}

.f-cta h3 {
  position: relative;
  font-family: var(--dsp);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.16;
  max-width: 14ch
}

/* the circle fills in on hover */
.f-ring {
  position: relative;
  margin-top: clamp(26px, 2.8vw, 40px);
  width: clamp(178px, 14.5vw, 218px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dark);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .5)
}

.f-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .6s var(--e)
}

.f-ring:hover::before,
.f-ring:focus-visible::before {
  transform: scale(1)
}

.f-ring span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-family: var(--dsp);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  transition: color .5s var(--e)
}

.f-ring:hover span,
.f-ring:focus-visible span {
  color: var(--ink)
}

.f-ring svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--e)
}

.f-ring:hover svg {
  transform: translate(3px, -3px)
}

/* ════════════  UTILS  ════════════ */
#ring {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 80;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: .5s var(--e)
}

#ring.on {
  opacity: 1;
  visibility: visible;
  transform: none
}

#ring svg.rg {
  position: absolute;
  inset: 0;
  width: 58px;
  height: 58px;
  transform: rotate(-90deg)
}

#ring .bgc {
  fill: rgba(255, 255, 255, .9);
  stroke: var(--line);
  stroke-width: 2
}

#ring .fgc {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round
}

#ring b {
  position: relative;
  z-index: 2;
  font-family: var(--dsp);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand)
}

#ring .up {
  position: relative;
  z-index: 2;
  display: none
}

#ring:hover b {
  display: none
}

#ring:hover .up {
  display: block
}

#ring .up svg {
  width: 17px;
  height: 17px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round
}

#dot {
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  pointer-events: none;
  z-index: 120;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s;
  display: none
}

@media(min-width:1100px) and (pointer:fine) {
  #dot {
    display: block
  }
}

/* reveals use `translate`, NOT `transform`, so a card's :hover transform is free to compose with them */
.r {
  opacity: 0;
  translate: 0 34px;
  transition: opacity .95s var(--e), translate .95s var(--e);
  transition-delay: var(--d, 0s)
}

.r.in {
  opacity: 1;
  translate: none
}

.rc {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--e);
  transition-delay: var(--d, 0s)
}

.rc.in {
  clip-path: inset(0 0 0 0)
}

/* ════════════  ABOUT MEDIA CARD  ════════════ */
.abt-media {
  position: relative;
  display: flex;
  flex-direction: column
}

/* the frame grows to fill the stretched column so its top/bottom line up with the
   copy. NB: flex-grow, not height:100% — a percentage against the indefinite
   height of a stretched grid item feeds back and inflates the whole row. */
.abt-media .fr {
  aspect-ratio: 4/3.6;
  flex: 1 1 auto;
  min-height: 0
}

.abt-card {
  position: absolute;
  left: -24px;
  bottom: -26px;
  background: var(--brand-d);
  color: #fff;
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .7)
}

.abt-card b {
  font-family: var(--dsp);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1
}

.abt-card small {
  font-size: 13.5px;
  line-height: 1.5;
  opacity: .95
}

/* ════════════  PROMOTER  ════════════ */
.prom {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center
}

.prom-media {
  position: relative
}

.prom-media .fr {
  aspect-ratio: 4/4.5;
  background: #E8E8E4;
  background-image: none
}

.prom-media .fr img {
  object-fit: cover;
  object-position: center top
}

.prom-badge {
  position: absolute;
  right: -20px;
  bottom: -24px;
  background: var(--brand-d);
  color: #fff;
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .6)
}

.prom-badge b {
  font-family: var(--dsp);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  line-height: 1
}

.prom-badge small {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82)
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 34px
}

.pgrid div {
  background: #fff;
  /* white card: pin the text dark so it survives on a dark section too */
  color: var(--ink);
  border-radius: 16px;
  padding: 20px 22px;
  transition: .5s var(--e);
  box-shadow: 0 2px 14px -10px rgba(0, 0, 0, .2)
}

.pgrid div:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, .45)
}

.pgrid b {
  display: block;
  font-family: var(--dsp);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1
}

.pgrid small {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--txt);
  line-height: 1.6
}

/* ════════════  CTA CONTACT LINES  ════════════ */
.cta-lines {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.cta-lines a {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, .03);
  transition: transform .5s var(--e), background .5s var(--e), border-color .5s var(--e)
}

.cta-lines a:hover {
  background: rgba(0, 89, 178, .11);
  border-color: rgba(0, 89, 178, .5);
  transform: translateX(7px)
}

.cta-lines a>span:last-child {
  min-width: 0
}

.cta-lines .ci {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 89, 178, .3);
  background: rgba(0, 89, 178, .11);
  display: grid;
  place-items: center;
  flex: none;
  transition: .45s var(--e)
}

.cta-lines .ci svg {
  width: 18px;
  height: 18px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 1.8;
  transition: stroke .45s
}

.cta-lines a:hover .ci {
  background: var(--brand);
  border-color: var(--brand)
}

.cta-lines a:hover .ci svg {
  stroke: #fff
}

.cta-lines small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-l);
  margin-bottom: 3px
}

.cta-lines b {
  display: block;
  font-family: var(--dsp);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: color .45s
}

.cta-lines a:hover b {
  color: var(--brand-2)
}

/* ════════════  IMAGE FALLBACK  ════════════ */
.fr.failed,
.bgimg.failed {
  background: linear-gradient(150deg, #232323, #101010) !important;
  position: relative
}

.fr.failed::after,
.bgimg.failed::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(0, 89, 178, .16) 54px 55px),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(0, 89, 178, .12) 54px 55px),
    linear-gradient(118deg, transparent 44%, rgba(0, 89, 178, .14) 44.3%, transparent 44.8%)
}

.fr.failed::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  font-family: var(--dsp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0, 89, 178, .85)
}

.prom-media .fr.failed {
  background: linear-gradient(150deg, #EFEFEC, #DEDEDA) !important
}

.prom-media .fr.failed::before {
  color: rgba(0, 88, 128, .95)
}

/* ════════════  INLINE HEADER SEARCH  ════════════ */
.hs {
  position: relative;
  flex: none;
  --hsw: min(calc(100vw - 2*var(--pad) - 62px), 340px)
}

.hs .rnd {
  position: relative;
  z-index: 3
}

.hs .i-x {
  display: none
}

.hs.x .i-s {
  display: none
}

.hs.x .i-x {
  display: block
}

.hs.x .rnd {
  background: var(--brand);
  border-color: var(--brand)
}

.hs.x .rnd svg {
  stroke: #fff
}

.hs-panel {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width .55s var(--e), opacity .35s var(--e), visibility .55s
}

.hs.x .hs-panel {
  width: var(--hsw);
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.hs-field {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 48px 0 16px;
  border-radius: 100px;
  background: rgba(20, 20, 20, .82);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color .4s, background .5s var(--e)
}

header.on .hs-field {
  background: var(--grey);
  border-color: var(--line)
}

/* nav items step aside while the bar is open */
.nav .hcall,
.nav .btn-brand {
  transition: opacity .4s var(--e), visibility .4s, transform .5s var(--e)
}

header.se .nav .hcall,
header.se .nav .btn-brand {
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px)
}

.hs-field:focus-within {
  border-color: var(--brand)
}

.hs-field svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 2.3;
  flex: none
}

.hs-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: #fff;
  font-family: var(--dsp);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em
}

header.on .hs-field input {
  color: var(--ink)
}

.hs-field input::placeholder {
  color: rgba(255, 255, 255, .5);
  font-weight: 500
}

header.on .hs-field input::placeholder {
  color: var(--txt)
}

.hs-field input:focus {
  outline: none
}

.hs-field input::-webkit-search-cancel-button {
  display: none
}

.hs-res {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: var(--hsw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 64px -30px rgba(0, 0, 0, .5);
  padding: 7px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.98);
  transform-origin: top right;
  transition: .42s var(--e);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent
}

.hs.x .hs-res {
  opacity: 1;
  visibility: visible;
  transform: none
}

.hs-res::-webkit-scrollbar {
  width: 5px
}

.hs-res::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 5px
}

.hs-res .hit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 11px;
  transition: background .3s var(--e), padding-left .3s var(--e)
}

.hs-res .hit:hover,
.hs-res .hit.sel {
  background: var(--grey);
  padding-left: 16px
}

.hs-res .tg {
  display: block;
  flex: none;
  font-family: var(--dsp);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 2px
}

.hs-res .tt {
  display: block;
  margin-left: auto;
  text-align: right;
  font-family: var(--dsp);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.35
}

.hs-res mark {
  background: rgba(0, 89, 178, .3);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px
}

.hs-res .none {
  padding: 18px 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--txt);
  text-align: center
}

.flash {
  animation: fl 1.6s var(--e)
}

@keyframes fl {

  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(0, 89, 178, 0)
  }

  25%,
  60% {
    box-shadow: inset 0 0 0 3px rgba(0, 89, 178, .55)
  }
}

/* ════════════  MOTION : REVEAL VARIANTS  ════════════ */
.r-l,
.r-r,
.r-s {
  opacity: 0;
  transition: opacity 1s var(--e), translate 1.05s var(--e), scale 1.05s var(--e);
  transition-delay: var(--d, 0s)
}

.r-l {
  translate: -42px 0
}

.r-r {
  translate: 42px 0
}

.r-s {
  scale: .93
}

.r-l.in,
.r-r.in,
.r-s.in {
  opacity: 1;
  translate: none;
  scale: none
}

/* ════════════  MOTION : CARD HOVER GLIDE  ════════════ */
/* declared after the reveal rules so :hover always wins; the delay list keeps the
   stagger on the reveal but makes the hover respond instantly */
.scard,
.pj {
  transition: opacity .95s var(--e), translate .95s var(--e),
    transform .55s var(--e), box-shadow .55s var(--e);
  transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s
}

.scard:hover {
  transform: translateY(-10px)
}


.pj:hover {
  transform: translateY(-12px)
}

/* heading reveal. NB: do NOT clip-path this to zero height — IntersectionObserver
   measures the clipped rect, so a fully clipped heading never counts as visible
   and would stay hidden forever. Opacity + translate is safe. */
.rl {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .95s var(--e), translate 1s var(--e);
  transition-delay: var(--d, 0s)
}

.rl.in {
  opacity: 1;
  translate: none
}

/* image settle-in zoom (no fill-mode, so hover zoom keeps working afterwards) */
@keyframes rvz {
  from {
    transform: scale(1.15)
  }

  to {
    transform: scale(1)
  }
}

.fr.rvz img {
  animation: rvz 1.5s var(--e)
}

/* ════════════  MOTION : PARALLAX LAYERS  ════════════ */
[data-par] {
  will-change: transform
}

/* ════════════  MOTION : NAV + BUTTON POLISH  ════════════ */
.menu>li>a {
  position: relative
}

.menu>li>a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--e)
}

.menu>li>a:hover::after {
  transform: scaleX(1);
  transform-origin: left
}

.btn {
  position: relative;
  overflow: hidden
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 38%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--e)
}

.btn:hover::before {
  left: 125%
}

.btn .ci {
  position: relative;
  z-index: 1
}

/* soft float for the floating stat cards */
@keyframes flt {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-9px)
  }
}

.abt-card,
.prom-badge {
  animation: flt 7s ease-in-out infinite
}

.prom-badge {
  animation-delay: -3.5s
}

/* ════════════  DARK SECTION VARIANTS  ════════════ */
/* the .arch line-work is drawn in near-black, so on a dark section it is redrawn in white */
.dk.arch::before {
  background-image:
    linear-gradient(115deg, transparent 47%, rgba(255, 255, 255, .05) 47.2%, transparent 47.6%),
    linear-gradient(65deg, transparent 39%, rgba(255, 255, 255, .045) 39.2%, transparent 39.6%),
    linear-gradient(0deg, transparent 71%, rgba(255, 255, 255, .035) 71.2%, transparent 71.5%),
    repeating-linear-gradient(100deg, transparent 0 62px, rgba(255, 255, 255, .025) 62px 63px),
    repeating-linear-gradient(-100deg, transparent 0 78px, rgba(255, 255, 255, .022) 78px 79px)
}
/* an ink-filled button would disappear against a dark section */
.dk .btn {
  background: var(--brand-d)
}
.dk .btn:hover {
  background: #fff;
  color: var(--ink)
}
.dk .btn:hover .ci {
  background: var(--brand-d)
}
.dk .btn:hover .ci svg {
  stroke: #fff
}

/* the header sits over the dark hero until it turns white, so its accents swap tone */
.dk .badge::before,
.on-img .badge::before {
  background: var(--brand-2)
}

header.on .hs-field svg {
  stroke: var(--brand)
}

/* ════════════  BRAND TEXT ON DARK  ════════════ */
/* #0059B2 is only ~3.6:1 on near-black, so brand-coloured copy sitting on a dark
   surface steps up to the lighter tint instead */
.dk .gd,
.cta .gd,
#dr .dr-nav a:hover,
#dr .dr-nav a:active,
.f-cols a.ln:hover,
.cta-lines a:hover b,
.gcard .big {
  color: var(--brand-2)
}

/* ════════════  RESPONSIVE  ════════════ */
@media(max-width:1200px) {

  .menu,
  .hcall {
    display: none
  }

  .logo {
    margin-right: auto
  }

  .brg {
    display: block
  }

  .scards {
    grid-template-columns: repeat(2, 1fr)
  }

  .proc {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(30px, 4vw, 48px) clamp(18px, 2.4vw, 40px)
  }

  .proc::before {
    display: none
  }



  .f-in {
    grid-template-columns: 1fr
  }

  /* stacked footer order: strip, links+socials, blue panel, then JAS + copyright.
     .fb lives inside .f-body, so display:contents dissolves that wrapper and lets
     all four sit as siblings that order can rearrange. */
  .f-body {
    display: contents
  }

  .f-strip,
  .f-cols,
  .fb {
    padding-left: var(--pad);
    padding-right: var(--pad)
  }

  .f-strip {
    order: 1
  }

  .f-cols {
    order: 2
  }

  .f-cta {
    order: 3
  }

  .fb {
    order: 4
  }

  .f-cta {
    padding: clamp(40px, 6vw, 60px) var(--pad)
  }

  .f-cta h3 {
    max-width: none
  }
}

@media(max-width:960px) {
  .hero-low {
    grid-template-columns: 1fr
  }

  .hcards {
    flex-wrap: wrap
  }

  .gcard {
    width: 100%;
    max-width: 536px
  }


  .about .abt,

  .show,
  .cta .cta-in,
  .prom {
    grid-template-columns: 1fr
  }

  .f-cols {
    grid-template-columns: 1fr 1fr
  }

  .f-news {
    grid-column: 1/-1
  }

  .f-strip {
    grid-template-columns: 1fr 1fr;
    gap: 26px
  }

  .f-strip a+a {
    padding-left: 0
  }

  .f-strip a+a::before {
    content: none
  }


  .about .fr {
    aspect-ratio: 4/2.9;
    order: -1;
    margin-bottom: 24px
  }

  .abt-media {
    order: -1;
    margin-bottom: 44px
  }

  .abt-media .fr {
    aspect-ratio: 4/2.9;
    flex: 0 0 auto
  }

  .abt-card {
    left: auto;
    right: 14px;
    bottom: -24px;
    padding: 18px 22px
  }

  .abt-card b {
    font-size: 34px
  }

  .prom-media {
    margin-bottom: 44px
  }

  .prom-media .fr {
    aspect-ratio: 4/3.4
  }

  .prom-badge {
    right: 14px;
    bottom: -22px;
    padding: 18px 22px
  }

  .show-media {
    aspect-ratio: 4/3;
    margin-bottom: 24px
  }

  .cnts {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.4vw, 30px)
  }

}

@media(max-width:900px) {
  .scards {
    grid-template-columns: 1fr
  }

  .hero {
    padding: 130px 0 50px
  }

  .hero-low {
    gap: 28px
  }
}

@media(max-width:640px) {

  .scards,
  .proc,
  .two,
  .f-cols,
  .f-strip,
  .ticks,
  .pgrid {
    grid-template-columns: 1fr
  }

  .fb {
    justify-content: center;
    text-align: center
  }

    .abt-card,
  .prom-badge {
    position: static;
    margin-top: 16px;
    width: 100%
  }


  .cnts {
    grid-template-columns: repeat(2, 1fr)
  }

  .cnt-sec .cnts {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 3vw, 34px) var(--cgap)
  }

  .cn:nth-child(3)::before {
    content: none
  }

  .cn .n {
    font-size: clamp(26px, 4.6vw, 34px)
  }

  .cn .k {
    font-size: 10px
  }

  .si {
    gap: 14px;
    padding: 18px 2px
  }

  .si .ar {
    width: 38px;
    height: 38px
  }

  .btn {
    padding-left: 22px;
    font-size: 14px
  }

  .nav {
    gap: 12px
  }

  .logo {
    margin-right: auto
  }

  .lg {
    width: 96px
  }

  .hcards {
    width: 100%
  }

  .gcard {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .gcard ul {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .2)
  }

  .gcard .cap {
    max-width: none
  }

  .gcard {
    max-width: none;
    padding: 22px
  }

  .gcard .big {
    font-size: 42px
  }

  .marq span {
    font-size: 20px;
    padding: 0 16px;
    gap: 16px
  }

  .fr,
  .pj .fr {
    border-radius: 14px
  }

  #ring {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px
  }

  #ring svg.rg {
    width: 50px;
    height: 50px
  }

  .rail {
    gap: 16px;
    padding: 14px 0 28px
  }

  .pj {
    width: min(78vw, 300px)
  }

  .pj:nth-child(even) {
    margin-top: 0
  }

  .show-count {
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    font-size: 11px
  }

  .hs {
    --hsw: calc(100vw - 2*var(--pad) - 58px)
  }

  .hs-res {
    max-height: 56vh
  }

  /* the row bleeds far less on a narrow screen, so the first card stays readable */
  .tst-row {
    margin-left: -80px
  }

  .tcard {
    width: min(78vw, 300px)
  }

  /* one card at a time, driven by the arrows. display:contents dissolves the two
     row wrappers so all ten cards share a single scroller — and it also removes
     the boxes the scroll-drift transforms were applied to, so that stops here. */
  .tst-rows {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 14px;
    margin-top: clamp(26px, 4vw, 34px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
  }

  .tst-rows::-webkit-scrollbar {
    display: none
  }

  .tst-row {
    display: contents
  }

  .tcard {
    width: calc(100vw - 2 * var(--pad));
    flex: none;
    scroll-snap-align: center
  }

  .tst-nav {
    display: flex
  }

  /* the email is one unbreakable token; grid items default to min-width:auto, so it
     forced the contact panel wider than the screen and .cta{overflow:hidden} clipped it */
  .cta-in>* {
    min-width: 0
  }

  .cta .wrap {
    padding: 0 16px
  }

  .cta-lines a {
    padding: 12px 14px;
    gap: 12px
  }

  .cta-lines .ci {
    width: 40px;
    height: 40px
  }

  .cta-lines b {
    font-size: 15px;
    overflow-wrap: anywhere
  }

  .f-line {
    overflow-wrap: anywhere
  }

  /* the ring is a fixed 178px at its floor, which eats most of a phone screen */
  .f-cta {
    padding: clamp(32px, 7vw, 46px) var(--pad)
  }

  .f-cta h3 {
    font-size: clamp(20px, 5.4vw, 25px)
  }

  .f-ring {
    width: clamp(132px, 36vw, 160px);
    margin-top: clamp(20px, 4.5vw, 28px)
  }

  .f-ring span {
    font-size: 14px;
    gap: 7px
  }

  .f-ring svg {
    width: 13px;
    height: 13px
  }

  /* logo above the copyright, both centred, clear of the floating scroll badge */
  .fb {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px
  }
}

@media(max-width:480px) {
  .nav .btn-brand {
    display: none
  }

  .cnts {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .cn:nth-child(even) {
    margin-top: 0
  }

  .cnt-sec .cnts {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px
  }

  .cn+.cn::before {
    content: none
  }

  .cn .n {
    font-size: 30px
  }

  .si h3 {
    font-size: 19px
  }

  .si .dsc {
    font-size: 14.5px
  }

  /* buttons stay content-sized on phones — a full-bleed pill with the arrow
     shoved to the far edge reads as a banner, not a button */
  .btn {
    width: auto;
    justify-content: flex-start
  }

  .hero .h1 {
    font-size: clamp(34px, 10vw, 46px)
  }

  .prom-badge,
  .abt-card {
    padding: 16px 18px
  }

  .prom-badge b {
    font-size: 28px
  }

  .abt-card b {
    font-size: 30px
  }

  .qt .qm {
    font-size: 48px
  }

  .rail-nav button {
    width: 44px;
    height: 44px
  }
}

@media(max-height:540px) and (orientation:landscape) {
  .hero {
    min-height: auto;
    padding: 110px 0 50px
  }

  #dr .dr-nav a {
    font-size: 17px;
    padding: 11px 0
  }

  #dr .dr-top {
    padding: 14px 0 16px
  }

  .hs-res {
    max-height: 52vh
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition-duration: .01ms !important
  }

  .r,
  .fd,
  .r-l,
  .r-r,
  .r-s,
  .rl {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important
  }

  .rc,
  #dr {
    clip-path: none !important
  }

  /* the drawer is hidden by clip-path, so it needs another way to stay closed here */
  #dr {
    opacity: 0;
    visibility: hidden
  }

  #dr.x {
    opacity: 1;
    visibility: visible
  }

  [data-par] {
    transform: none !important
  }

  .tst-row {
    transform: none !important
  }

  .pj {
    transform: none !important;
    opacity: 1 !important
  }

  .btn::before,
  .scard::after {
    display: none
  }

  .mk>span {
    transform: none !important
  }

  html {
    scroll-behavior: auto
  }
}

/* ════════════  INNER PAGE HERO  ════════════ */
/* the same photographic hero as the home page, cut down to a banner strip:
   a breadcrumb and the page title, centred, on roughly 350px. The extra top
   padding is the fixed header's room — the content centres in what is left */
.hero.ph {
  min-height: 350px;
  align-items: center;
  padding: clamp(92px, 10vw, 112px) 0 clamp(30px, 3.5vw, 44px)
}

.hero.ph .wrap {
  text-align: center
}

/* a single still frame here — no slideshow, no drift */
.hero.ph .bgimg img {
  animation: none
}

/* the home hero's scrim is weighted to the left for its left-set headline —
   centred copy needs the weight top and bottom instead */
.hero.ph::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .26) 52%, rgba(0, 0, 0, .46) 100%)
}

.hero.ph .h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  max-width: 20ch;
  margin: 0 auto
}

/* the reveal mask clips descenders on words like "Agency", so each line gets
   room below the baseline and the space is pulled back off the block */
.hero.ph .mk {
  padding-bottom: .14em;
  margin-bottom: -.14em
}

/* a glass chip, so the trail stays legible whatever the photo is doing behind it */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  padding: 9px 20px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(8px);
  font-family: var(--dsp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88)
}

.crumb a {
  transition: color .4s
}

.crumb a:hover {
  color: #FFC44D
}

.crumb span {
  color: rgba(255, 255, 255, .45)
}

.crumb b {
  color: #FFC44D;
  font-weight: 700
}

/* the current page keeps its nav underline drawn */
.menu>li>a.act::after {
  transform: scaleX(1);
  transform-origin: left
}

/* ════════════  ABOUT : WHO WE ARE  ════════════ */
.ab-lead {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center
}

.ab-fig {
  position: relative;
  padding: 0 0 34px
}

.ab-fig .main {
  aspect-ratio: 4/4.7;
  border-radius: 26px
}

/* the smaller frame breaks the rectangle so the column doesn't read as a stock block */
.ab-fig .ins {
  position: absolute;
  right: -18px;
  bottom: 0;
  width: 54%;
  aspect-ratio: 5/4;
  border-radius: 20px;
  border: 8px solid #fff;
  box-shadow: 0 34px 66px -38px rgba(0, 0, 0, .55)
}

.ab-badge {
  position: absolute;
  left: -20px;
  top: 40px;
  z-index: 3;
  padding: 18px 24px;
  border-radius: 18px;
  background: var(--brand-d);
  color: #fff;
  box-shadow: 0 26px 50px -26px rgba(0, 68, 140, .8);
  animation: flt 7s ease-in-out infinite
}

.ab-badge b {
  display: block;
  font-family: var(--dsp);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1
}

.ab-badge small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82)
}

.ab-copy .badge {
  margin-bottom: 24px
}

.ab-copy .h2 {
  margin-bottom: 22px
}

/* the four verticals, as tiles rather than a row of identical ticks */
.caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px
}

.cap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 14px -10px rgba(0, 0, 0, .3);
  transition: .5s var(--e)
}

.cap:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 20px 38px -26px rgba(0, 89, 178, .7)
}

.cic {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-soft);
  transition: .5s var(--e)
}

.cap:hover .cic {
  background: var(--brand)
}

.cic svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .5s
}

.cap:hover .cic svg {
  stroke: #fff
}

.cap b {
  display: block;
  font-family: var(--dsp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3
}

.cap small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--txt)
}

/* ════════════  ABOUT : BELIEF + VALUES  ════════════ */
/* the one saturated band on the page — brand blue between the white intro and
   the grey services grid, so the values read as a statement rather than a card row */
.sec.blf {
  background:
    radial-gradient(72% 65% at 8% 0%, rgba(91, 159, 227, .4) 0%, transparent 60%),
    radial-gradient(66% 62% at 97% 100%, rgba(0, 26, 56, .55) 0%, transparent 62%),
    linear-gradient(148deg, #0059B2 0%, #00448C 58%, #003468 100%);
  /* the band closes on a wide arc; the extra bottom padding is the room the
     counter card takes when it rides up over that curve */
  border-radius: 0 0 50% 50% / 0 0 76px 76px;
  overflow: hidden;
  padding-top: clamp(64px, 7vw, 100px);
  padding-bottom: clamp(170px, 15vw, 232px)
}

/* brand blue on brand blue would vanish, so the accent turns warm here */
.blf .gd {
  color: #FFD37E
}

/* ── the arc infographic ──────────────────────────────
   The nodes are placed by percentage across the same 1000-unit space the arc
   path is drawn in, and the SVG stretches horizontally only — so the pins stay
   on the curve at every desktop width. */
.info {
  position: relative;
  height: 600px;
  z-index: 2
}

.info-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

/* the dotted run picks up each node's colour as it passes under it */
.info-arc path {
  fill: none;
  stroke: url(#arcg);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .1 14
}

.inode {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateX(-50%);
  /* sized so the copy still clears the curve at the larger type sizes */
  width: 260px;
  height: 260px;
  padding: 0 24px;
  border-radius: 50%;
  border: 5px solid var(--ac);
  background: #fff;
  /* the accent glow is what makes the ring read as lit against the blue */
  box-shadow: 0 26px 50px -28px rgba(0, 16, 40, .85), 0 0 28px -6px var(--ac);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform .55s var(--e), box-shadow .55s var(--e)
}

.inode:hover {
  transform: translateX(-50%) translateY(-9px);
  box-shadow: 0 36px 64px -28px rgba(0, 16, 40, .9), 0 0 44px -4px var(--ac)
}

/* the little collar where the node meets the dotted arc */
.ipin {
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  /* solid bead in the accent, collared in white so it sits on the dotted run */
  background: var(--ac);
  border: 3px solid #fff;
  box-shadow: 0 0 14px -1px var(--ac)
}

.inic {
  width: 32px;
  height: 32px;
  margin-bottom: 9px;
  display: grid;
  place-items: center;
  transition: transform .6s var(--e)
}

.inode:hover .inic {
  transform: scale(1.12)
}

.inic svg {
  width: 30px;
  height: 30px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.inode b {
  font-family: var(--dsp);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.25;
  color: var(--ink)
}

.itx {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink)
}

/* the statement sits inside the arc, between the two low nodes */
.info-mid {
  position: absolute;
  left: 50%;
  top: 292px;
  transform: translateX(-50%);
  width: min(620px, 52%);
  text-align: center
}

.info-mid .badge {
  margin-bottom: 18px
}

.info-mid .h2 {
  font-size: clamp(28px, 3.2vw, 46px)
}

.qt {
  position: relative;
  max-width: 46ch;
  margin: 20px auto 0;
  text-align: center
}

.qt .qm {
  display: block;
  font-family: var(--dsp);
  font-size: 44px;
  font-weight: 800;
  line-height: .8;
  color: rgba(255, 255, 255, .3)
}

.qt p {
  margin-top: 8px;
  font-family: var(--dsp);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
  color: #fff
}

.qt cite {
  display: block;
  margin-top: 14px;
  font-family: var(--dsp);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FFD37E
}

/* ── stacked fallback: the arc needs the width, the content does not ── */
@media(max-width:1100px) {
  .info {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 3vw, 34px);
    justify-items: center;
    align-items: start
  }

  .info-arc,
  .ipin {
    display: none
  }

  .inode {
    position: static;
    transform: none;
    width: 270px;
    height: 270px;
    padding: 0 28px
  }

  .inode:hover {
    transform: translateY(-9px)
  }

  .info-mid {
    position: static;
    transform: none;
    order: -1;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 640px;
    margin-bottom: 10px
  }
}

@media(max-width:640px) {
  .info {
    grid-template-columns: 1fr
  }
}

/* ════════════  ABOUT : CORE SERVICES  ════════════ */
/* faint skylines anchored to the section's bottom corners — the page is for a
   real-estate advisory, so the ground it sits on may as well say so */
#services,
#credentials {
  overflow: hidden
}

.bskyl {
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: clamp(210px, 27vw, 430px);
  /* set on the group so the tonal ratio between the faces is kept intact */
  opacity: .32;
  pointer-events: none
}

.bskyl.l {
  left: 0
}

/* NB: the modifier is `rt`, not `r` — `r` is the reveal class, and `.r.in`
   sets opacity:1, which outranks the opacity set here and lit the cluster up */
.bskyl.rt {
  right: 0
}

/* the credentials band mirrors one cluster rather than using two drawings, so
   both sides carry exactly the same weight */
#credentials .bskyl.rt {
  transform: scaleX(-1)
}

.bskyl svg {
  display: block;
  width: 100%;
  height: auto
}

/* three faces per volume — front, receding side, roof — so the cluster reads as
   a drawn massing study rather than a row of bars */
.bskyl .f {
  fill: rgba(0, 89, 178, .05)
}

.bskyl .s {
  fill: rgba(0, 89, 178, .11)
}

.bskyl .t {
  fill: rgba(0, 89, 178, .028)
}

.bskyl .win {
  fill: rgba(0, 89, 178, .085)
}

.bskyl .ln path {
  fill: none;
  stroke: rgba(0, 89, 178, .22);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round
}

@media(max-width:900px) {
  .bskyl {
    width: 150px;
    opacity: .24
  }
}

@media(max-width:600px) {
  .bskyl {
    display: none
  }
}

/* paper cards with a coloured tile on the left and a ribbon tab rising out of
   the top edge — each vertical carries its own accent through --ac / --ac2 */
.icards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* the tab rises out of the top edge and the offset shadow falls below it,
     so the rows need more room between them than the columns do */
  gap: clamp(40px, 4.2vw, 58px) clamp(20px, 2.2vw, 30px)
}

.icard {
 --pl: 24px;
    --pt: 24px;
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(16px, 1.4vw, 20px);
    align-items: start;
    padding: var(--pt) 24px 26px var(--pl);
    border-radius: 8px;
    background: #d4e1ef4a;
    border: 1px solid #adb7c2;
    box-shadow: -9px 9px 0 rgba(17, 17, 17, .05), 0 16px 28px -20px rgba(0, 0, 0, .3);
    transition: .55s var(--e);
}

.icard:hover {
  transform: translateY(-7px);
  border-color: var(--ac2);
  box-shadow: -9px 9px 0 rgba(17, 17, 17, .05), 0 30px 48px -24px rgba(0, 0, 0, .4)
}

/* the tab sits behind the tile and runs up past the card's top edge */
.itab {
  position: absolute;
  left: calc(var(--pl) + 33px);
  margin-left: -20px;
  top: -13px;
  width: 40px;
  height: 44px;
  border-radius: 8px 8px 0 0;
  /* a shade deeper than the tile, so it reads as the layer behind it */
  background: var(--ac);
  transition: top .55s var(--e)
}

.icard:hover .itab {
  top: -20px
}

/* the tile rides up to sit just inside the card's top edge, as in the reference */
.ibx {
  position: relative;
  z-index: 1;
  margin-top: -14px;
  width: 66px;
  height: 66px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--ac2), var(--ac));
  box-shadow: 0 12px 22px -13px var(--ac);
  transition: transform .6s var(--e)
}

.icard:hover .ibx {
  transform: scale(1.05)
}

.ibx svg {
  width: 31px;
  height: 31px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ibody h3 {
  font-family: var(--dsp);
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.28;
  /* one heading colour across the row — the tile carries the tonal variation */
  color: var(--brand-d);
  margin-bottom: 9px
}

.ibody p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink)
}

@media(max-width:1150px) {
  .icards {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:760px) {
  .icards {
    grid-template-columns: 1fr
  }
}

@media(max-width:420px) {
  .icard {
    --pl: 20px;
    padding-right: 20px
  }

  .ibx {
    width: 62px;
    height: 62px
  }

  .ibx svg {
    width: 29px;
    height: 29px
  }

  .itab {
    left: calc(var(--pl) + 31px)
  }
}

/* ════════════  ABOUT : COUNTERS  ════════════ */
/* the values band closes on a curve, and this card straddles it — half on the
   blue, half on the page below */
.ctr {
  position: relative;
  z-index: 4;
  padding: 0 0 clamp(52px, 6vw, 84px)
}

.ctrp {
  max-width: 1180px;
  margin: -150px auto 0;
  padding: clamp(34px, 3.6vw, 50px) clamp(24px, 3vw, 46px) clamp(36px, 3.8vw, 52px);
  border-radius: 44px;
  background: #fff;
  box-shadow: 0 38px 74px -36px rgba(0, 32, 76, .5), 0 2px 10px -5px rgba(0, 0, 0, .1)
}

.ctr-hd {
  text-align: center;
  margin-bottom: clamp(30px, 3.2vw, 44px)
}

.ctr-eb {
  display: block;
  font-family: var(--dsp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px
}

.ctr-hd h3 {
  font-family: var(--dsp);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: var(--ink)
}

.ctr-hd h3::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, var(--brand), #3E8EEA)
}

.ctr-row {
  --cgap: clamp(18px, 2.2vw, 32px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cgap)
}

.ctn {
  position: relative;
  /* grid items default to min-width:auto, which lets wide content force the
     column open — this keeps the two columns honest on a phone */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

/* hairline between columns, centred in the gap */
.ctn+.ctn::before {
  content: "";
  position: absolute;
  left: calc(var(--cgap) / -2);
  top: 16px;
  bottom: 10px;
  width: 1px;
  background: var(--line)
}

.ctn-ring {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center
}

/* the gauge: a light track with an accent arc that draws in on reveal */
.ctn-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.ctn-arc circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round
}

.ctn-arc .trk {
  stroke: rgba(17, 17, 17, .085)
}

.ctn-arc .arc {
  stroke: var(--ac);
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
  transition: stroke-dashoffset 1.7s var(--e) .2s
}

.ctn.in .ctn-arc .arc {
  stroke-dashoffset: 78
}

/* the icon rides the ring as a chip rather than crowding the figure */
.ctn-ic {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ac);
  border: 3px solid #fff;
  box-shadow: 0 8px 18px -9px var(--ac)
}

.ctn-ic svg {
  width: 19px;
  height: 19px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ctn-ring b {
  display: flex;
  align-items: baseline;
  font-family: var(--dsp);
  /* sized so the widest figure — ₹200 Cr+ — still clears the gauge */
  font-size: clamp(24px, 2.5vw, 33px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap
}

.ctn-ring .cur {
  font-style: normal;
  font-size: .7em;
  font-weight: 800;
  color: var(--ac);
  margin-right: .05em
}

.ctn-ring u {
  text-decoration: none;
  font-size: .42em;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 .04em 0 .22em;
  color: var(--txt)
}

.ctn-ring em {
  font-style: normal;
  color: var(--ac)
}

.ctn-lb {
    margin-top: 16px;
    font-family: var(--dsp);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.5;
    text-transform: uppercase;
    color: #5d5a5a;
}

@media(max-width:900px) {
  .ctrp {
    margin-top: -96px;
    border-radius: 34px
  }

  .ctr-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(30px, 5vw, 42px)
  }

  /* the third tile starts a new row, so it carries no divider */
  .ctn:nth-child(3)::before {
    content: none
  }
}

@media(max-width:560px) {
  .ctrp {
    padding-left: 18px;
    padding-right: 18px
  }

  /* the ring goes fluid below here — a fixed width cannot shrink inside a
     1fr column, which is what pushed the card past the screen edge */
  .ctn-ring {
    width: min(150px, 37vw);
    height: auto;
    aspect-ratio: 1
  }

  .ctn-ring b {
    font-size: clamp(19px, 6.4vw, 25px)
  }

  .ctn-ic {
    width: 38px;
    height: 38px
  }

  .ctn-ic svg {
    width: 18px;
    height: 18px
  }

  .ctn-lb {
    font-size: 12px;
    letter-spacing: .08em;
    margin-top: 12px
  }
}

@media(max-width:430px) {
  .ctrp {
    margin-top: -62px;
    border-radius: 26px
  }

  .ctn-ic {
    width: 34px;
    height: 34px
  }

  .ctn-ic svg {
    width: 16px;
    height: 16px
  }

  .ctn-lb {
    font-size: 11px
  }
}


/* ════════════  ABOUT : COVERAGE  ════════════ */
.cov-in {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 5vw, 74px);
  align-items: center
}

.cities {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.cities span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid #00468f;
  border-radius: 100px;
  background: #fff;
  font-family: var(--dsp);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  box-shadow: rgb(169 194 220) 0px 5px 15px;
  transition: .45s var(--e)
}

.cities span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--brand);
  transition: .45s var(--e)
}

/* and fills solid on hover */
.cities span:hover {
  transform: translateY(-4px);
  border-color: transparent;
  background: linear-gradient(135deg, #0059B2 0%, #3E8EEA 100%);
  color: #fff;
  box-shadow: 0 18px 32px -18px rgba(0, 89, 178, .8)
}

.cities span:hover::before {
  background: #fff;
  transform: scale(1.35)
}


/* ════════════  COMMERCIAL : OPENING STATEMENT  ════════════ */
/* the artwork is the section's background — its left half is deliberately empty,
   so the statement sits on clear ground and the city stands to the right */
.cm-open {
  position: relative;
  padding: clamp(60px, 6.5vw, 100px) 0 0;
  /* three layers, top to bottom: the artwork; a white wash that dissolves the
     tint before the next section; and a tint keyed to the artwork's own bottom
     row (#EDF4FE left, #DBEBF8 right) so its lower edge lands on the same
     colour instead of a hard step onto white */
  background-image:
    url(../img/infra-bldg-bg.jpg),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 78%, #fff 98%),
    linear-gradient(90deg, #EEF4FE 0%, #EDF4FE 62%, #DCEBF8 100%);
  background-repeat: no-repeat;
  /* width-driven, so it runs edge to edge and its height follows the artwork's
     own proportions — no crop, no seam, no repeat */
  background-position: left top;
  background-size: 100% auto, 100% 100%, 100% 100%
}

/* tall enough that the copy sits inside the artwork rather than past it */
.cm-hero {
  display: flex;
  align-items: center;
  min-height: min(50vw, 640px)
}

/* the right of the hero is left empty for the city to read */
.cm-hero-l {
  max-width: 54%
}

.cm-eye {
  display: block;
  font-family: var(--dsp);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 24px
}

.cm-lead {
  font-family: var(--dsp);
  font-size: clamp(27px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.14;
  color: var(--ink)
}

.cm-lead em {
  font-style: normal;
  color: var(--brand)
}

/* the short brand rule under the statement */
.cm-rule {
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 4px;
  margin: clamp(22px, 2.4vw, 30px) 0 clamp(22px, 2.4vw, 28px);
  background: linear-gradient(90deg, var(--brand), #3E8EEA)
}

.cm-hero-l p {
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink)
}

.cm-hero-l p+p {
  margin-top: 16px
}

/* ── the negotiated-terms rail ── */
/* The artwork behind this section is a full-bleed background, and its skyline
   starts at roughly 47vw. The rail is capped just short of that so it can never
   run under the buildings, and the pills wrap instead of reflowing to a grid —
   one rule covers every width from a phone to an ultrawide. */
.cm-terms {
  max-width: min(calc(44vw - var(--pad)), 540px);
  margin-top: clamp(30px, 3.4vw, 48px)
}

.cm-terms-k {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--dsp);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--brand)
}

.cm-terms-k::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 89, 178, .32), rgba(0, 89, 178, 0))
}

.cm-terms-l {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.cm-terms-l span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 17px 6px 6px;
  border: 1px solid rgba(0, 89, 178, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  font-family: var(--dsp);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
  transition: .45s var(--e)
}

.cm-terms-l svg {
  width: 28px;
  height: 28px;
  flex: none;
  padding: 6px;
  border-radius: 50%;
  background: var(--brand-soft);
  stroke: var(--brand);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: .45s var(--e)
}

.cm-terms-l span:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 14px 24px -16px rgba(0, 60, 140, .65)
}

.cm-terms-l span:hover svg {
  background: var(--brand);
  stroke: #fff
}

/* the four figures close the section, straight after the copy column */
.cm-figs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(34px, 3.6vw, 54px) var(--pad) clamp(64px, 6.5vw, 104px)
}

.cm-figs>div {
  /* one blue across all four — a tonal ladder left the first washed out and
     the last almost navy */
  --ac: #0059B2;
  --ac2: #3E8EEA;
  position: relative;
  overflow: hidden;
  padding: 26px 24px 28px;
  border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 9%, #fff) 0%, #fff 68%);
  border: 1px solid color-mix(in srgb, var(--ac) 26%, transparent);
  transition: .5s var(--e)
}

/* the accent rule runs the full width as the figure is hovered */
.cm-figs>div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  transition: width .55s var(--e)
}

.cm-figs>div:hover::before {
  width: 100%
}

.cm-figs>div:hover {
  transform: translateY(-6px);
  border-color: var(--ac);
  box-shadow: 0 26px 46px -28px color-mix(in srgb, var(--ac) 70%, transparent)
}

.fg-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--ac2), var(--ac));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 16px -8px var(--ac);
  transition: transform .5s var(--e)
}

.cm-figs>div:hover .fg-ic {
  transform: rotate(-6deg) scale(1.07)
}

.fg-ic svg {
  width: 21px;
  height: 21px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* the figure is filled with its own accent gradient */
.cm-figs b {
  display: block;
  font-family: var(--dsp);
  font-size: clamp(25px, 2.9vw, 40px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  background: linear-gradient(120deg, var(--ac) 0%, var(--ac2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.cm-figs b em {
  font-style: normal;
  font-size: .55em
}

.cm-figs small {
  display: block;
  margin-top: 11px;
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--txt)
}

/* ════════════  COMMERCIAL : SPLIT PANEL  ════════════ */
/* two halves of one full-bleed band, light against deep blue */
.cm-split {
  display: grid;
  grid-template-columns: 1fr 1fr
}

.cs-half {
  position: relative;
  padding: clamp(46px, 5vw, 50px) clamp(26px, 4vw, 50px);
  transition: background .6s var(--e)
}

.cs-occ {
  background: var(--grey);
  display: flex;
  justify-content: flex-end
}

.cs-lan {
  color: #fff;
  background:
    radial-gradient(80% 70% at 20% 0%, rgba(91, 159, 227, .3) 0%, transparent 62%),
    linear-gradient(150deg, #0F6CCB 0%, #0059B2 46%, #00397A 100%)
}

.cs-in {
  width: 100%;
  max-width: 560px
}

.cs-no {
  display: block;
  font-family: var(--dsp);
  font-size: clamp(46px, 5vw, 74px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 89, 178, .3)
}

.cs-lan .cs-no {
  -webkit-text-stroke-color: rgba(255, 255, 255, .4)
}

.cs-eye {
  display: block;
  margin: 20px 0 16px;
  font-family: var(--dsp);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand)
}

.cs-lan .cs-eye {
  color: #FFC44D
}

.cs-in h2 {
  font-family: var(--dsp);
  font-size: clamp(25px, 2.9vw, 42px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.14;
  margin-bottom: 30px
}

.cs-in ul {
  list-style: none;
  margin: 0 0 34px;
  padding: 0
}

.cs-in li {
  position: relative;
  padding: 16px 0 16px 40px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.6;
  transition: padding-left .45s var(--e)
}

/* a tick drawn from two borders — no icon file, no extra markup */
.cs-in li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 1px solid rgba(0, 89, 178, .32);
  transition: .45s var(--e)
}

.cs-in li::after {
  content: "";
  position: absolute;
  left: 8.5px;
  top: 22px;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
  transition: border-color .45s
}

.cs-in li:last-child {
  border-bottom: 1px solid var(--line)
}

.cs-lan li {
  border-color: rgba(255, 255, 255, .2)
}

.cs-lan li::before {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34)
}

.cs-lan li::after {
  border-color: #FFC44D
}

.cs-in li:hover {
  padding-left: 50px
}

.cs-in li:hover::before {
  background: var(--brand);
  border-color: var(--brand)
}

.cs-in li:hover::after {
  border-color: #fff
}

.cs-lan li:hover::before {
  background: #FFC44D;
  border-color: #FFC44D
}

.cs-lan li:hover::after {
  border-color: #00335F
}

/* an underlined text link with a drawn arrow — no button chrome */
.cs-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--dsp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--brand);
  color: var(--ink);
  transition: gap .45s var(--e), color .45s
}

.cs-lan .cs-go {
  color: #fff;
  border-bottom-color: #FFC44D
}

.cs-go i {
  width: 18px;
  height: 2px;
  position: relative;
  background: currentColor
}

.cs-go i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg)
}

.cs-go:hover {
  gap: 20px;
  color: var(--brand)
}

.cs-lan .cs-go:hover {
  color: #FFC44D
}

/* ════════════  COMMERCIAL : HAIRLINE MATRIX  ════════════ */
.cm-scope {
  padding: clamp(66px, 7vw, 108px) 0
}

.cm-hd {
  max-width: 900px;
  margin-bottom: clamp(38px, 4vw, 64px)
}

.cm-hd h2 {
  font-family: var(--dsp);
  font-size: clamp(25px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.14;
  color: var(--ink)
}

.cm-hd h2 em {
  font-style: normal;
  color: var(--brand)
}

/* cells divided by rules only — no card, no shadow, no radius */
.matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  /* the lifted cell paints over its neighbours' rules */
  isolation: isolate
}

.mx {
  --ac: #0059B2;
  --ac2: #3E8EEA;
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 20px;
  transition: .55s var(--e)
}

/* the hovered cell lifts clear of the grid it was ruled into */
.mx:hover {
  z-index: 2;
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 34px 60px -32px color-mix(in srgb, var(--ac) 65%, transparent)
}

.mx::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--ac2), var(--ac));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--e)
}

.mx:hover::before {
  transform: scaleY(1)
}

/* the wash picks up the cell's own accent */
.mx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 11%, #fff) 0%, #fff 72%);
  opacity: 0;
  transition: opacity .55s var(--e)
}

.mx:hover::after {
  opacity: 1
}

/* each cell carries its own accent through --ac / --ac2 */
.mx-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--ac2), var(--ac));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 10px 20px -10px var(--ac);
  transition: .5s var(--e)
}

.mx:hover .mx-ic {
  transform: rotate(-6deg) scale(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    0 16px 26px -10px var(--ac)
}

.mx-ic svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mx-n {
  position: absolute;
  right: clamp(24px, 2.6vw, 38px);
  top: clamp(22px, 2.4vw, 34px);
  font-family: var(--dsp);
  font-size: clamp(38px, 3.6vw, 56px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ac2);
  opacity: .3;
  transition: .5s var(--e)
}

.mx:hover .mx-n {
  opacity: .9;
  -webkit-text-stroke-color: var(--ac);
  transform: translateY(-4px)
}


.mx h3 {
  font-family: var(--dsp);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
  transition: color .45s
}

.mx:hover h3 {
  color: var(--ac)
}

.mx p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--txt)
}

/* ════════════  COMMERCIAL : FLOW STEPS  ════════════ */
.cm-flow-sec {
  padding: clamp(66px, 7vw, 108px) 0;
  background: var(--grey)
}

.flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2vw, 30px)
}

/* border only — the section ground shows through */
.fl {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid rgba(0, 89, 178, .22);
  /* deep rounding, echoing the circular icon and the pill rail up in the intro.
     The dotted connector meets the card at y=48, past the end of the curve, so
     it still lands on a straight edge */
  border-radius: clamp(30px, 3.2vw, 46px);
  background: transparent;
  transition: .5s var(--e)
}

.fl:hover {
  transform: translateY(-6px);
  border-color: var(--brand)
}

/* the dotted run now joins one card to the next, in the gap between them */
.fl+.fl::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(18px, 2vw, 30px) - 1px);
  top: 48px;
  width: clamp(18px, 2vw, 30px);
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--brand) 0 3px, transparent 3px 11px);
  opacity: .5
}

/* icon and numeral sit at opposite ends of the head, over a rule */
.fl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

.fl-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #0F6CCB 0%, #0059B2 50%, #00397A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 16px -8px rgba(0, 40, 92, .7);
  transition: .5s var(--e)
}

.fl:hover .fl-ic {
  transform: rotate(-6deg) scale(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 14px 24px -8px rgba(0, 89, 178, .85)
}

.fl-ic svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fl-n {
  font-family: var(--dsp);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(0, 89, 178, .4);
  transition: .5s var(--e)
}

.fl:hover .fl-n {
  color: var(--brand);
  -webkit-text-stroke-color: var(--brand)
}

.fl h3 {
  font-family: var(--dsp);
  font-size: clamp(16.5px, 1.4vw, 19px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 11px;
  transition: color .45s
}

.fl:hover h3 {
  color: var(--brand)
}

.fl p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink)
}

/* ════════════  COMMERCIAL : EXPANDING PANELS  ════════════ */
.cm-panels {
  padding: clamp(66px, 7vw, 108px) 0 0;
  background: #0B1017;
  color: #fff
}

.cm-hd-inv h2 {
  color: #fff
}

.cm-hd-inv h2 em {
  color: #FFC44D
}

.cm-hd-inv .cm-eye {
  color: #5B9FE3
}

/* six panels that trade width with each other on hover */
.panels {
  display: flex;
  gap: 4px;
  height: clamp(360px, 40vw, 500px);
  margin-top: clamp(34px, 4vw, 56px)
}

.pan {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #10171F;
  transition: flex .7s var(--e)
}

/* a real <img>, not a CSS background — a url() inside a custom property
   resolves against the stylesheet's path, not the document's */
.pan-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--e)
}

.pan:hover .pan-img {
  transform: scale(1.05)
}

.pan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 22, .25) 0%, rgba(6, 12, 22, .88) 100%);
  transition: background .6s var(--e)
}

.panels:hover .pan {
  flex: .82
}

.panels .pan:hover {
  flex: 2.6
}

.pan:hover::after {
  background: linear-gradient(180deg, rgba(0, 40, 92, .2) 0%, rgba(0, 32, 76, .82) 100%)
}

.pan-in {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 2vw, 30px)
}

.pan-n {
  display: block;
  font-family: var(--dsp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #FFC44D;
  margin-bottom: 12px
}

.pan h3 {
  font-family: var(--dsp);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: #fff
}

/* the copy is held back until the panel is opened */
.pan p {
  max-width: 34ch;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.7;
  /* solid white — the photo behind it is busy, and 80% white lost the copy */
  color: #fff;
  text-shadow: 0 1px 12px rgba(4, 10, 20, .55);
  opacity: 0;
  translate: 0 10px;
  transition: opacity .5s var(--e) .12s, translate .5s var(--e) .12s
}

.pan:hover p {
  opacity: 1;
  translate: none
}

/* ════════════  COMMERCIAL : FAQ  ════════════ */
.cm-faq {
  padding: clamp(66px, 7vw, 108px) 0
}

.cm-faq-in {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(34px, 5vw, 84px);
  align-items: start
}

.cm-faq-l {
  position: sticky;
  top: 118px
}

.cm-faq-l h2 {
  font-family: var(--dsp);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 20px
}

.cm-faq-l h2 em {
  font-style: normal;
  color: var(--brand)
}

.cm-faq-l p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 34ch
}

/* rules only — no panels */
.qa details {
  border-top: 1px solid var(--line);
  transition: border-color .45s
}

.qa details:last-child {
  border-bottom: 1px solid var(--line)
}

.qa details[open] {
  border-top-color: var(--brand)
}

.qa summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  padding: 26px 44px 26px 0;
  position: relative;
  font-family: var(--dsp);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.35;
  color: var(--ink);
  transition: color .4s
}

.qa summary::-webkit-details-marker {
  display: none
}

.qa summary span {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--brand-2);
  padding-top: 6px;
  transition: color .4s
}

.qa details[open] summary,
.qa summary:hover {
  color: var(--brand)
}

.qa details[open] summary span {
  color: var(--brand)
}

/* a bare cross that turns into a dash */
.qa summary::after,
.qa summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--brand);
  transition: transform .45s var(--e), opacity .35s
}

.qa summary::before {
  width: 15px;
  height: 2px;
  margin-top: -1px
}

.qa summary::after {
  width: 2px;
  height: 15px;
  margin-top: -7.5px;
  right: 12.5px
}

.qa details[open] summary::after {
  transform: rotate(90deg);
  opacity: 0
}

.qa details p {
  padding: 0 44px 28px 42px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink)
}

/* ════════════  COMMERCIAL : CLOSING BAND  ════════════ */
.cm-end {
  padding: clamp(66px, 7vw, 110px) 0;
  color: #fff;
  background:
    radial-gradient(70% 80% at 12% 0%, rgba(91, 159, 227, .32) 0%, transparent 60%),
    linear-gradient(150deg, #0F6CCB 0%, #0059B2 46%, #00397A 100%)
}

.cm-end-in h2 {
  font-family: var(--dsp);
  font-size: clamp(27px, 3.6vw, 54px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.12;
  max-width: 22ch
}

.cm-end-in h2 em {
  font-style: normal;
  color: #FFC44D
}

.cm-end-a {
  display: flex;
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
  flex-wrap: wrap;
  margin-top: clamp(34px, 3.6vw, 52px)
}

/* a drawn ring, not a filled button */
.cm-ring {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 34px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 100px;
  font-family: var(--dsp);
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  transition: .5s var(--e)
}

.cm-ring i {
  width: 20px;
  height: 2px;
  position: relative;
  background: currentColor;
  transition: width .45s var(--e)
}

.cm-ring i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg)
}

.cm-ring:hover {
  background: #FFC44D;
  border-color: #FFC44D;
  color: #00335F
}

.cm-ring:hover i {
  width: 30px
}

.cm-tel small {
  display: block;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6)
}

.cm-tel b {
  display: block;
  margin-top: 5px;
  font-family: var(--dsp);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 800;
  letter-spacing: -.03em;
  transition: color .4s
}

.cm-tel:hover b {
  color: #FFC44D
}

/* ── responsive ─────────────────────────────────────── */
@media(max-width:1000px) {
  /* the artwork moves below the copy rather than sitting behind it */
  .cm-open {
    background-position: center bottom;
    background-size: 120% auto;
    padding-bottom: 58vw
  }

  .cm-hero {
    min-height: 0
  }

  .cm-hero-l {
    max-width: none
  }

  /* the skyline is no longer beside the copy, so the rail can use the full width */
  .cm-terms {
    max-width: none
  }

  .cm-split {
    grid-template-columns: 1fr
  }

  .cs-occ {
    justify-content: flex-start
  }

  .cs-in {
    max-width: none
  }

  .matrix {
    grid-template-columns: repeat(2, 1fr)
  }

  .flow {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(26px, 4vw, 40px)
  }

  /* the dotted run only reads along a single row */
  .fl+.fl::before {
    content: none
  }

  .cm-faq-in {
    grid-template-columns: 1fr
  }

  .cm-faq-l {
    position: static
  }

  /* stacked strips read better than six slivers on a narrow screen */
  .panels {
    flex-direction: column;
    height: auto;
    gap: 6px
  }

  .pan {
    flex: none;
    height: 190px
  }

  .panels:hover .pan,
  .panels .pan:hover {
    flex: none
  }

  .pan p {
    opacity: 1;
    translate: none
  }
}

@media(max-width:620px) {
  .cm-open {
    background-size: 152% auto;
    padding-bottom: 76vw
  }

  .cm-figs {
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }

  .matrix,
  .flow {
    grid-template-columns: 1fr
  }

  .qa summary {
    padding: 20px 38px 20px 0;
    gap: 13px
  }

  .qa details p {
    padding: 0 38px 22px 0
  }
}


/* ════════════  CONTACT  ════════════ */
.ct-in {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(34px, 4.6vw, 76px);
  align-items: start
}

.ct-info .badge {
  margin-bottom: 24px
}

.ct-info .h2 {
  margin-bottom: 32px
}

.ct-rows {
  display: grid;
  gap: 12px
}

.ct-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  /* a brand-tinted edge — the neutral hairline disappeared against the page */
  border: 1px solid rgba(0, 89, 178, .26);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px -9px rgba(0, 40, 92, .4);
  transition: .45s var(--e)
}

a.ct-row:hover {
  transform: translateX(6px);
  border-color: var(--brand);
  box-shadow: 0 18px 34px -22px rgba(0, 89, 178, .7)
}

.ct-ic {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #0F6CCB 0%, #0059B2 50%, #00397A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 8px 16px -8px rgba(0, 40, 92, .75);
  transition: .45s var(--e)
}

a.ct-row:hover .ct-ic {
  transform: rotate(-5deg) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 12px 22px -8px rgba(0, 89, 178, .85)
}

.ct-ic svg {
  width: 21px;
  height: 21px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ct-row small {
  display: block;
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--txt)
}

.ct-row b {
  display: block;
  margin-top: 3px;
  font-family: var(--dsp);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
  color: var(--ink);
  transition: color .4s
}

a.ct-row:hover b {
  color: var(--brand)
}

/* the form card is the page's block of colour */
.ct-form {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(91, 159, 227, .32) 0%, transparent 62%),
    linear-gradient(150deg, #0F6CCB 0%, #0059B2 48%, #00397A 100%);
  border-color: rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 40px 78px -40px rgba(0, 40, 92, .8)
}

.ct-form .h3 {
  color: #fff;
  margin-bottom: 24px
}

/* brand-blue labels would sink into a blue panel */
.ct-form .fld label {
  color: rgba(255, 255, 255, .72);
  font-size: 11.5px
}

.ct-form .fld input,
.ct-form .fld textarea {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18)
}

.ct-form .fld input::placeholder,
.ct-form .fld textarea::placeholder {
  color: rgba(255, 255, 255, .42)
}

/* and a blue focus ring would be invisible, so it goes gold */
.ct-form .fld input:focus,
.ct-form .fld textarea:focus {
  border-color: #FFC44D;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 4px rgba(255, 196, 77, .22)
}

.ct-form .fld textarea {
  min-height: 132px
}

.ct-form .btn {
  background: #fff;
  color: var(--ink)
}

.ct-form .btn:hover {
  background: #FFC44D
}

.ct-form .btn .ci {
  background: var(--brand)
}

.ct-form .btn:hover .ci {
  background: var(--ink)
}

.ct-form .btn:hover .ci svg {
  stroke: #fff
}

.ct-note {
  margin-top: 14px;
  min-height: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #FFC44D
}

@media(max-width:1000px) {
  .ct-in {
    grid-template-columns: 1fr
  }
}

@media(max-width:520px) {
  .two {
    grid-template-columns: 1fr
  }

  .ct-row {
    padding: 14px 16px;
    gap: 13px
  }

  .ct-row b {
    font-size: 15px
  }
}

/* ════════════  PROMOTER : PROFILE  ════════════ */
/* a portrait, not a hero — sized to sit level with the copy beside it */
#profile .ab-lead {
  grid-template-columns: 340px 1fr;
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center
}

#profile .ab-fig {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  padding-bottom: 0
}

/* the portrait is cut to an arch — the same architectural language the rest of
   the site is drawn in — and set on a brand panel stepped off behind it */
#profile .ab-fig::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 30px;
  top: 30px;
  right: -26px;
  bottom: -26px;
  border-radius: 172px 172px 26px 26px;
  background: linear-gradient(150deg, #0F6CCB 0%, #0059B2 48%, #00397A 100%)
}

/* a dot grid in the notch the dome leaves at the top left */
#profile .ab-fig::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -30px;
  top: 14px;
  width: 118px;
  height: 132px;
  background-image: radial-gradient(var(--brand) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  opacity: .3
}

#profile .ab-fig .main {
  position: relative;
  z-index: 1;
  aspect-ratio: 4/5;
  border-radius: 172px 172px 24px 24px;
  border: 7px solid #fff;
  box-shadow: 0 34px 62px -32px rgba(0, 32, 76, .65)
}

/* a brand wash grounds the foot of the photo against its own pale backdrop */
#profile .ab-fig .main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 56%, rgba(0, 89, 178, .22) 100%)
}

/* the copy keeps a readable measure rather than stretching into the space freed */


/* the badge moves to the foot — the dome curves away from a top-left anchor */
#profile .ab-badge {
  left: -22px;
  top: auto;
  bottom: 26px;
  background: linear-gradient(145deg, #0F6CCB 0%, #0059B2 48%, #00397A 100%);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 20px 34px -18px rgba(0, 40, 92, .8)
}

@media(max-width:1100px) {
  #profile .ab-lead {
    grid-template-columns: 1fr
  }
}

/* ════════════  PROMOTER : CREDENTIALS  ════════════ */
.cred {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px)
}

.cred>div {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 30px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(91, 159, 227, .38) 0%, transparent 62%),
    linear-gradient(145deg, #0F6CCB 0%, #0059B2 46%, #00397A 100%);
  /* a lit top edge and shaded bottom inside, over three stacked drop shadows */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(0, 20, 50, .35),
    0 2px 4px -2px rgba(0, 26, 60, .5),
    0 14px 26px -14px rgba(0, 40, 92, .6),
    0 30px 54px -28px rgba(0, 40, 92, .55);
  transition: .5s var(--e)
}

/* a warm rule wipes across the top edge on hover — blue on blue would vanish */
.cred>div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFC44D, #FF8A66);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e)
}

.cred>div:hover::before {
  transform: scaleX(1)
}

/* with a lighter bloom rising in the corner behind it */
.cred>div::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #5B9FE3;
  filter: blur(52px);
  opacity: .18;
  pointer-events: none;
  transition: opacity .55s var(--e)
}

.cred>div:hover::after {
  opacity: .42
}

.cred>div:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .42);
  /* the stack deepens and a thin gold ring picks out the edge */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 20, 50, .4),
    0 4px 8px -3px rgba(0, 26, 60, .5),
    0 22px 38px -16px rgba(0, 40, 92, .68),
    0 44px 72px -30px rgba(0, 40, 92, .6),
    0 0 0 1px rgba(255, 196, 77, .55)
}

/* icon on the left, index numeral on the right, rule beneath */
.cr-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.cr-ic {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 4px 10px -4px rgba(0, 20, 50, .5);
  transition: .5s var(--e)
}

.cred>div:hover .cr-ic {
  background: #FFC44D;
  border-color: #FFD98A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 8px 18px -6px rgba(255, 180, 40, .6);
  transform: rotate(-6deg) scale(1.06)
}

.cr-ic svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .5s
}

.cred>div:hover .cr-ic svg {
  stroke: #00397A
}

.cr-no {
  font-family: var(--dsp);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
  transition: color .5s, -webkit-text-stroke-color .5s
}

.cred>div:hover .cr-no {
  color: #FFC44D;
  -webkit-text-stroke-color: #FFC44D
}

.cred b {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--dsp);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: #fff
}

.cred small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .76)
}

@media(max-width:900px) {
  .cred {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ════════════  PROMOTER : JOURNEY TIMELINE  ════════════ */
/* a centre spine with the milestones alternating either side of it */
.jr {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px
}

.jr::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--brand) 7%, var(--brand-2) 50%, var(--brand) 93%, transparent 100%)
}

.jr-i {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 104px;
  padding-bottom: 34px
}

.jr-i:last-child {
  padding-bottom: 0
}

.jr-card {
  position: relative;
  grid-column: 1;
  /* both cells are pinned to row 1 — sparse auto-placement will not step
     backwards, so the image would otherwise drop to a second row */
  grid-row: 1;
  text-align: right;
  padding: 26px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 14px -10px rgba(0, 0, 0, .22);
  transition: .5s var(--e)
}

.jr-i:nth-child(even) .jr-card {
  grid-column: 2;
  text-align: left
}

/* the arm reaching from the card to the spine */
.jr-card::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 24px;
  height: 2px;
  background: var(--line);
  transition: background .45s
}

.jr-i:nth-child(odd) .jr-card::after {
  right: -25px
}

.jr-i:nth-child(even) .jr-card::after {
  left: -25px
}

.jr-i:hover .jr-card {
  transform: translateY(-5px);
  border-color: var(--brand);
  box-shadow: 0 26px 46px -28px rgba(0, 89, 178, .6)
}

.jr-i:hover .jr-card::after {
  background: var(--brand)
}

/* the numbered node sits on the spine */
.jr-no {
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  font-family: var(--dsp);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--brand);
  box-shadow: 0 0 0 6px #fff, 0 10px 20px -12px rgba(0, 89, 178, .6);
  transition: .5s var(--e)
}

.jr-i:hover .jr-no {
  background: var(--brand);
  color: #fff;
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 0 0 6px #fff, 0 16px 28px -12px rgba(0, 89, 178, .85)
}

/* the image fills the empty column opposite the card, and is held back until
   the row is scrolled into view — .in is added by the reveal observer */
.jr-img {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  width: 100%;
  max-width: 380px;
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--grey-2);
  box-shadow: 0 26px 46px -28px rgba(0, 20, 60, .5);
  opacity: 0;
  translate: 34px 16px;
  scale: .96;
  transition: opacity .85s var(--e) .18s, translate .85s var(--e) .18s, scale .85s var(--e) .18s
}

/* card on the right, so the image takes the left column and enters from that side */
.jr-i:nth-child(even) .jr-img {
  grid-column: 1;
  justify-self: end;
  translate: -34px 16px
}

/* .act is toggled both ways by the scroll observer, so the image fades back out
   once the row has passed through the middle of the viewport */
.jr-i.act .jr-img {
  opacity: 1;
  translate: none;
  scale: 1
}

/* nothing to ride the scroll with here — just show them */
@media(prefers-reduced-motion:reduce) {
  .jr-img {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important
  }
}

.jr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--e)
}

.jr-i:hover .jr-img img {
  transform: scale(1.05)
}

.jr-tag {
  display: block;
  margin-bottom: 9px;
  font-family: var(--dsp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-2);
  transition: color .45s
}

.jr-i:hover .jr-tag {
  color: var(--brand)
}

.jr-i h3 {
  margin-bottom: 10px;
  transition: color .45s
}

.jr-i:hover h3 {
  color: var(--brand)
}

.jr-i p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink)
}

/* below this the spine moves left and every card lines up behind it */
@media(max-width:820px) {
  .jr {
    max-width: none
  }

  .jr::before {
    left: 28px
  }

  .jr-i {
    grid-template-columns: 1fr;
    padding-left: 76px;
    padding-bottom: 26px
  }

  .jr-card,
  .jr-i:nth-child(even) .jr-card {
    grid-column: 1;
    text-align: left
  }

  /* one column now, so the image sits under its card and rises into place */
  .jr-img,
  .jr-i:nth-child(even) .jr-img {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    max-width: none;
    margin-top: 14px;
    aspect-ratio: 16/9;
    translate: 0 22px
  }

  .jr-i:nth-child(odd) .jr-card::after,
  .jr-i:nth-child(even) .jr-card::after {
    left: -25px;
    right: auto
  }

  .jr-no {
    left: 28px
  }

  .jr-i:hover .jr-no {
    transform: translateX(-50%) scale(1.06)
  }
}

@media(max-width:520px) {
  .jr::before {
    left: 22px
  }

  .jr-i {
    padding-left: 58px
  }

  .jr-no {
    left: 22px;
    width: 44px;
    height: 44px;
    font-size: 15px;
    box-shadow: 0 0 0 5px #fff, 0 10px 20px -12px rgba(0, 89, 178, .6)
  }

  .jr-card {
    padding: 22px 20px 24px
  }

  .jr-card::after {
    width: 16px;
    left: -17px !important
  }
}


/* ════════════  ABOUT : CLOSING BAND  ════════════ */
/* the last block before the footer, so it carries the page's strongest colour */
.ab-cta {
  padding: clamp(58px, 7vw, 96px) 0
}

.ab-cta-in {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  padding: clamp(34px, 4.6vw, 62px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(72% 120% at 6% 0%, rgba(91, 159, 227, .34) 0%, transparent 62%),
    linear-gradient(150deg, #0059B2 0%, #00448C 54%, #002F5E 100%);
  box-shadow: 0 40px 80px -44px rgba(0, 40, 90, .75)
}

/* warm rule down the left edge */
.ab-cta-in::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  pointer-events: none;
  background: linear-gradient(180deg, #FFC44D 0%, #FF8A66 100%)
}

/* concentric hairlines radiating off that edge */
.ab-cta-in::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 50%,
      transparent 0 116px, rgba(255, 255, 255, .16) 116px 117.5px,
      transparent 117.5px 166px, rgba(255, 255, 255, .12) 166px 167.5px,
      transparent 167.5px 220px, rgba(255, 255, 255, .09) 220px 221.5px,
      transparent 221.5px 282px, rgba(255, 255, 255, .06) 282px 283.5px,
      transparent 283.5px)
}

/* the skyline fills the empty right of the panel, behind the copy and buttons */
.ab-cta-in>div {
  position: relative;
  z-index: 1
}

.ab-cta-in .bskyl {
  width: clamp(150px, 17vw, 260px);
  opacity: .85
}

/* redrawn in white — the panel is dark now */
.ab-cta-in .bskyl .f {
  fill: rgba(255, 255, 255, .06)
}

.ab-cta-in .bskyl .s {
  fill: rgba(255, 255, 255, .13)
}

.ab-cta-in .bskyl .t {
  fill: rgba(255, 255, 255, .03)
}

.ab-cta-in .bskyl .win {
  fill: rgba(255, 255, 255, .1)
}

.ab-cta-in .bskyl .ln path {
  stroke: rgba(255, 255, 255, .3)
}

.ab-cta-in .h2 {
  color: #fff;
  margin-bottom: 18px
}

.ab-cta-in .gd {
  color: #FFC44D
}

.ab-cta-in .p {
  color: rgba(255, 255, 255, .82);
  max-width: 46ch
}

/* an ink button would sink into the panel, so the primary inverts to white */
.ab-cta-in .btn {
  background: #fff;
  color: var(--ink)
}

.ab-cta-in .btn:hover {
  background: #FFC44D
}

.ab-cta-in .btn .ci {
  background: var(--brand)
}

.ab-cta-in .btn:hover .ci {
  background: var(--ink)
}

.ab-cta-in .btn:hover .ci svg {
  stroke: #fff
}

.ab-cta-act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px
}

.ab-cta-line {
  display: inline-flex;
  align-items: center;
  gap: 14px
}

.ab-cta-line .ci {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  transition: .45s var(--e)
}

.ab-cta-line .ci svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .45s
}

.ab-cta-line:hover .ci {
  background: #fff;
  border-color: #fff
}

.ab-cta-line:hover .ci svg {
  stroke: var(--brand)
}

.ab-cta-line small {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62)
}

.ab-cta-line b {
  display: block;
  font-family: var(--dsp);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  transition: color .4s
}

.ab-cta-line:hover b {
  color: #FFC44D
}


/* ════════════  ABOUT : RESPONSIVE  ════════════ */
@media(max-width:1100px) {

  .ab-lead,
  .blf-in,
  .cov-in,
  .ab-cta-in {
    grid-template-columns: 1fr;
    gap: clamp(34px, 6vw, 54px)
  }

  /* auto margins alone would drop the column to fit-content, so the width is held */
  .ab-fig {
    width: 100%;
    max-width: 560px;
    margin-inline: auto
  }

  .ab-fig .main {
    aspect-ratio: 4/3.6
  }

  .ab-cta-act {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px
  }
}

@media(max-width:760px) {
  .ab-fig .ins {
    right: 0;
    width: 48%
  }

  .ab-badge {
    left: 0;
    top: 22px;
    padding: 14px 18px
  }

  .ab-badge b {
    font-size: 25px
  }

  .cities span {
    padding: 11px 18px;
    font-size: 13.5px
  }
}

@media(max-width:560px) {
  .hero.ph {
    min-height: 280px;
    padding: 100px 0 38px
  }

  .crumb {
    font-size: 10.5px;
    letter-spacing: .13em;
    margin-bottom: 18px
  }

  .ab-fig {
    padding-bottom: 0
  }

  /* the overlapping inset has nowhere to go at this width — the tall frame carries it alone */
  .ab-fig .ins {
    display: none
  }

  .ab-fig .main {
    aspect-ratio: 4/3.2
  }

  .ticks,
  .caps {
    grid-template-columns: 1fr
  }

  .qt .qm {
    font-size: 38px
  }

  /* the circles shrink to hold their line count at this width */
  .inode {
    width: 252px;
    height: 252px;
    padding: 0 24px
  }

  .ab-cta-in {
    border-radius: 22px
  }
}

/* ═══════ Commercial page: live assets section (moved from commercial.html) ═══════ */
.cm-assets{--ac:#00448c;--ink:#12181f;--mut:#5c7391;--line:rgba(18,24,31,.10);--bg:#f6f7f5;
  background:radial-gradient(rgba(18,24,31,.085) 1px,transparent 1.6px) 0 0/22px 22px var(--bg);
  padding:clamp(56px,8vw,50px) 0;color:var(--ink);
  font-family:'Rubik',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
.cm-assets .wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px);}
.cm-assets .la-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px);}
.cm-assets .la-eye{display:inline-flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin:0 0 14px;}
.la-live{display:inline-flex;align-items:center;gap:6px;color:#00448c;background:rgba(0,68,140,.08);padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.1em;}
.la-live i{width:7px;height:7px;border-radius:50%;background:#297cd7;animation:laPulse 1.8s infinite;}
@keyframes laPulse{0%{box-shadow:0 0 0 0 rgba(41,124,215,.55)}70%{box-shadow:0 0 0 8px rgba(41,124,215,0)}100%{box-shadow:0 0 0 0 rgba(41,124,215,0)}}
.la-h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-size:clamp(30px,4.4vw,50px);margin:0 0 12px;color:#0059B2;}
.la-h2 em{font-style:italic;color:var(--ac);}
.la-sub{color:var(--mut);font-size:15.5px;line-height:1.6;margin:0;}
/* Tabs: chips. Active = green gradient + glow + light sweep; count white bubble me. */
.la-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,34px);}
.la-tab{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:13.5px;color:var(--mut);padding:9px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:color .25s,border-color .25s,background .25s,box-shadow .3s,transform .25s;}
.la-tab:hover{color:var(--ink);border-color:rgba(0,68,140,.45);transform:translateY(-1px);box-shadow:0 10px 22px -16px rgba(18,24,31,.55);}
.la-tab.is-on{color:#fff;background:linear-gradient(135deg,#00448c 0%,#0b63c4 100%);border-color:transparent;box-shadow:0 14px 28px -14px rgba(0,68,140,.85);}
.la-tab.is-on:hover{transform:none;}
.la-tab::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);opacity:0;pointer-events:none;}
.la-tab.is-on::after{animation:laShine .9s ease .15s 1;}
@keyframes laShine{0%{transform:translateX(-130%);opacity:1}100%{transform:translateX(130%);opacity:0}}
@media(prefers-reduced-motion:reduce){.la-tab.is-on::after{animation:none}.la-tab:hover{transform:none}}
.la-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(20px,2.6vw,30px);}
.la-grid.flash{animation:laFlash 1s ease;}
@keyframes laFlash{0%{filter:brightness(1.05)}100%{filter:brightness(1)}}
.la-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:8px;display:flex;flex-direction:column;cursor:pointer;opacity:0;transform:translateY(18px);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s,box-shadow .45s,border-color .45s;}
.la-card.in{opacity:1;transform:none;}
.la-card.in:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(18,24,31,.45);border-color:rgba(0,68,140,.35);}
.la-card:focus-visible{outline:2px solid var(--ac);outline-offset:3px;}
.la-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e9ece9;border-radius:19px;}
.la-fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.la-card:hover .la-fig img{transform:scale(1.07);}
.la-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,18,.10) 0%,rgba(10,14,18,0) 32%,rgba(10,14,18,.66) 100%);}
.la-tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:999px;padding:6px 12px 6px 10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);box-shadow:0 6px 18px -10px rgba(0,0,0,.5);}
.la-tag i{width:7px;height:7px;border-radius:50%;background:#297cd7;box-shadow:0 0 0 3px rgba(41,124,215,.22);}
.la-tag-leasing i{background:#d38b1a;box-shadow:0 0 0 3px rgba(211,139,26,.22);}
.la-yield{position:absolute;top:54px;right:12px;z-index:2;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:12px;padding:8px 12px;text-align:right;box-shadow:0 8px 24px -12px rgba(0,0,0,.5);}
.la-yield b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;line-height:1;color:var(--ac);}
.la-yield small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);}
.la-count{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:rgba(10,14,18,.72);color:#fff;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;}
.la-count svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.8;}
.la-loc{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:7px;margin:0;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.55);}
.la-loc svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto;}
.la-body{padding:12px 10px 6px;display:flex;flex-direction:column;flex:1;}
.la-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:23px;line-height:1.15;letter-spacing:-.025em;margin:0 0 14px;color:var(--ink);}
.la-stats{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;}
.la-stat{padding:12px 14px;min-width:0;}
.la-stat:nth-child(even){border-left:1px solid var(--line);}
.la-stat:nth-child(n+3){border-top:1px solid var(--line);}
.la-stat small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:5px;font-weight:500;}
.la-stat b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere;}
.la-stat.p b{color:var(--ac);}
.la-usp{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px;}
.la-usp li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:#3a444e;}
.la-usp li svg{position:absolute;left:0;top:2px;width:15px;height:15px;fill:none;stroke:var(--ac);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.la-view{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 6px 6px;color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13.5px;}
.la-arr{width:25px;height:25px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;color:var(--ink);transition:background .35s,color .35s,border-color .35s,transform .45s cubic-bezier(.2,.7,.2,1);}
.la-arr svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.la-card:hover .la-arr{background:var(--ac);border-color:var(--ac);color:#fff;transform:rotate(45deg);}
.la-sk{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;padding:8px;}
.la-sk .b{background:linear-gradient(90deg,#eceeec 25%,#f5f6f5 37%,#eceeec 63%);background-size:400% 100%;animation:laSk 1.4s ease infinite;}
.la-sk .b1{aspect-ratio:4/3;border-radius:19px}
.la-sk .b2{height:18px;margin:18px 10px 12px;border-radius:6px;width:55%}
.la-sk .b3{height:12px;margin:10px 10px;border-radius:6px}
.la-sk .b4{height:40px;margin:14px 10px 10px;border-radius:12px}
@keyframes laSk{0%{background-position:100% 0}100%{background-position:0 0}}
.la-note{grid-column:1/-1;text-align:center;padding:44px 20px;border:1px dashed var(--line);border-radius:16px;color:var(--mut);font-size:14.5px;line-height:1.6;}
.la-note button{margin-top:14px;border:1px solid var(--ac);color:var(--ac);background:none;padding:8px 16px;border-radius:999px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;}
/* ── modal: photo poori height me left, details right ── */
html.la-lock{overflow:hidden;}
.la-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;font-family:'Rubik',system-ui,sans-serif;}
.la-modal.open{display:flex;}
.la-modal-bg{position:absolute;inset:0;background:rgba(8,12,16,.7);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s;}
.la-modal.open .la-modal-bg{opacity:1;}
.la-dialog{position:relative;z-index:1;background:#fff;width:min(1040px,100%);max-height:90vh;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.08fr .92fr;box-shadow:0 50px 120px -40px rgba(0,0,0,.6);transform:translateY(18px) scale(.975);opacity:0;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .35s;}
.la-modal.open .la-dialog{transform:none;opacity:1;}
.la-close{position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px -10px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s;}
.la-close:hover{transform:rotate(90deg);background:var(--ink);border-color:var(--ink);}
.la-close svg{width:18px;height:18px;stroke:#12181f;stroke-width:2;fill:none;stroke-linecap:round;transition:stroke .25s;}
.la-close:hover svg{stroke:#fff;}
.la-gal{position:relative;background:#0e1216;min-height:380px;display:flex;flex-direction:column;}
.la-gal-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#0e1216;}
.la-gal-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;}
.la-gal-stage::before{content:"";position:absolute;inset:-40px;background:var(--galbg,none) center/cover no-repeat;filter:blur(26px) brightness(.55) saturate(1.1);transform:scale(1.08);}
.la-gal-stage::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,18,.28) 0%,rgba(10,14,18,0) 28%,rgba(10,14,18,0) 62%,rgba(10,14,18,.55) 100%);pointer-events:none;}
.la-gal-nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,14,18,.45);backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;transition:.2s;}
.la-gal-nav:hover{background:#fff;}
.la-gal-nav.prev{left:14px;}.la-gal-nav.next{right:14px;}
.la-gal-nav svg{width:20px;height:20px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;}
.la-gal-nav:hover svg{stroke:#12181f;}
.la-gal-count{position:absolute;top:14px;right:14px;z-index:2;background:rgba(10,14,18,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:12px;padding:5px 11px;border-radius:999px;}
.la-thumbs{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;gap:8px;padding:8px;overflow-x:auto;background:rgba(10,14,18,.45);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:16px;}
.la-thumb{flex:0 0 auto;width:64px;height:48px;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;opacity:.6;transition:.2s;padding:0;background:none;}
.la-thumb:hover{opacity:.9;}
.la-thumb.on{opacity:1;border-color:#fff;}
.la-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.la-dtl{padding:clamp(24px,3.2vw,40px);overflow:auto;max-height:90vh;display:flex;flex-direction:column;}
.la-dtl .la-tag{position:static;align-self:flex-start;box-shadow:none;background:rgba(0,68,140,.08);color:var(--ac);backdrop-filter:none;}
.la-dtl .la-tag-leasing{background:rgba(211,139,26,.12);color:#b4791f;}
.la-loc-row{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin:16px 0 6px;}
.la-loc-row svg{width:15px;height:15px;stroke:var(--ac);fill:none;stroke-width:1.8;}
.la-d-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,36px);line-height:1.08;letter-spacing:-.03em;margin:0 0 20px;color:var(--ink);}
.la-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 22px;}
.la-mtile{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px 16px 14px 18px;overflow:hidden;}
.la-mtile::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:rgba(18,24,31,.18);}
.la-mtile.p::before,.la-mtile.y::before{background:var(--ac);}
.la-mtile small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:6px;font-weight:500;}
.la-mtile b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:21px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere;}
.la-mtile.y b,.la-mtile.p b{color:var(--ac);}
.la-sec-lbl{display:flex;align-items:center;gap:12px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin:0 0 12px;}
.la-sec-lbl::after{content:"";flex:1;height:1px;background:var(--line);}
.la-dtl .la-usp{margin:0 0 24px;gap:10px;}
.la-dtl .la-usp li{padding-left:32px;font-size:14px;line-height:1.55;color:#2d3640;}
.la-dtl .la-usp li svg{top:0;width:21px;height:21px;padding:4px;border-radius:50%;background:rgba(0,68,140,.12);stroke-width:2.6;}
.la-more{margin:4px 0 22px;border-top:1px solid var(--line);padding-top:6px;}
.la-more div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--line);}
.la-more dt{color:var(--mut);margin:0;flex:0 0 auto;}
.la-more dd{margin:0;text-align:right;color:var(--ink);font-weight:500;}
.la-modal-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.la-modal-cta a{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13.5px;padding:15px 20px;border-radius:14px;white-space:nowrap;transition:.25s;}
.la-cta-main{flex:1 1 auto;background:var(--ink);color:#fff;box-shadow:0 14px 28px -16px rgba(18,24,31,.7);}
.la-cta-main:hover{background:var(--ac);box-shadow:0 14px 28px -14px rgba(0,68,140,.8);}
.la-cta-main:hover svg{transform:translate(2px,-2px);}
.la-cta-alt{flex:0 1 auto;background:#fff;color:var(--ink);border:1px solid var(--line);}
.la-cta-alt:hover{border-color:var(--ac);color:var(--ac);}
.la-modal-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s;}
@media(max-width:760px){.la-dialog{grid-template-columns:1fr;max-height:92vh;overflow:auto;border-radius:22px;}.la-gal{min-height:0;}.la-gal-stage{aspect-ratio:16/11;flex:none;}.la-dtl{max-height:none;overflow:visible;}.la-modal-cta a{flex:1 1 100%;}}
@media(max-width:560px){.la-grid{grid-template-columns:1fr}.la-hd{align-items:flex-start}.la-meta-grid{grid-template-columns:1fr 1fr}.la-loc{font-size:19px}.la-stat b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.la-card{opacity:1;transform:none;transition:none}.la-fig img,.la-arr,.la-tab::after,.la-refresh svg,.la-dialog,.la-modal-bg{transition:none}}
.la-gal-img{cursor:zoom-in;}
.la-gal-hint{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;background:rgba(10,14,18,.6);color:#fff;font-size:11px;padding:4px 9px;border-radius:999px;pointer-events:none;}
.la-gal-hint svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.8;}
.la-lb{position:fixed;inset:0;z-index:10010;display:none;align-items:center;justify-content:center;}
.la-lb.open{display:flex;}
.la-lb-bg{position:absolute;inset:0;background:rgba(6,9,12,.92);}
.la-lb-img{position:relative;z-index:1;max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);opacity:0;transform:scale(.97);transition:opacity .25s,transform .25s;}
.la-lb.show .la-lb-img{opacity:1;transform:none;}
.la-lb-close{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s;}
.la-lb-close:hover{background:rgba(255,255,255,.26);}
.la-lb-close svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;}
.la-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border-radius:50%;border:none;background:rgba(255,255,255,.14);cursor:pointer;display:grid;place-items:center;transition:.2s;}
.la-lb-nav:hover{background:rgba(255,255,255,.26);}
.la-lb-nav.prev{left:18px;}.la-lb-nav.next{right:18px;}
.la-lb-nav svg{width:26px;height:26px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.la-lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.14);color:#fff;font-size:13px;padding:5px 14px;border-radius:999px;}
@media(max-width:560px){.la-lb-nav{width:42px;height:42px}.la-lb-nav.prev{left:8px}.la-lb-nav.next{right:8px}}


/* ════════════  COMMERCIAL : MUMBAI PURCHASE / SALE  ════════════ */
/* the page title runs to two long lines, so the hero heading gets more room */
.hero.ph .h1.h1-wide {
  max-width: 26ch
}

.cm-req {
  margin-top: clamp(26px, 3vw, 38px);
  max-width: min(calc(44vw - var(--pad)), 540px);
  line-height: 1.45
}

.cm-req i {
  flex: none
}

.cm-sub {
  max-width: 62ch;
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--txt)
}

.cm-hd-inv .cm-sub {
  color: rgba(255, 255, 255, .72)
}

/* ── what we assess first : copy beside a ruled table ── */
.cm-assess {
  padding: clamp(66px, 7vw, 108px) 0;
  background: var(--grey)
}

.cm-assess-in {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(34px, 5vw, 84px);
  align-items: start
}

.cm-h2 {
  font-family: var(--dsp);
  font-size: clamp(25px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.14;
  color: var(--ink);
  margin-bottom: 24px
}

.cm-h2 em {
  font-style: normal;
  color: var(--brand)
}

.cm-assess-l p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink)
}

.cm-assess-l p+p {
  margin-top: 14px
}

.cm-brief {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.cm-brief li {
  position: relative;
  padding: 12px 14px 12px 40px;
  border: 1px solid rgba(0, 89, 178, .2);
  border-radius: 14px;
  background: #fff;
  font-family: var(--dsp);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: .45s var(--e)
}

.cm-brief li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg)
}

.cm-brief li:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -20px rgba(0, 89, 178, .8)
}

.cm-tbl-wrap {
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 89, 178, .16);
  box-shadow: 0 30px 60px -44px rgba(0, 40, 92, .55)
}

.cm-tbl {
  width: 100%;
  border-collapse: collapse;
  text-align: left
}

.cm-tbl caption {
  caption-side: top;
  padding: 20px clamp(20px, 2.4vw, 30px);
  text-align: left;
  font-family: var(--dsp);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  border-bottom: 1px solid var(--line)
}

.cm-tbl thead th {
  padding: 16px clamp(20px, 2.4vw, 30px);
  font-family: var(--dsp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(150deg, #0F6CCB 0%, #0059B2 46%, #00397A 100%)
}

.cm-tbl tbody tr {
  transition: background .4s var(--e)
}

.cm-tbl tbody tr+tr {
  border-top: 1px solid var(--line)
}

.cm-tbl tbody tr:hover {
  background: rgba(0, 89, 178, .05)
}

.cm-tbl tbody th,
.cm-tbl tbody td {
  padding: 20px clamp(20px, 2.4vw, 30px);
  vertical-align: middle
}

.cm-tbl tbody th {
  width: 42%;
  font-family: var(--dsp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink)
}

.cm-tbl tbody th .tb-ic {
  margin-right: 12px;
  vertical-align: middle
}

.cm-tbl tbody td {
  font-size: 15px;
  line-height: 1.65;
  color: var(--txt)
}

.tb-ic {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--brand-soft);
  transition: .45s var(--e)
}

.tb-ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cm-tbl tbody tr:hover .tb-ic {
  background: var(--brand)
}

.cm-tbl tbody tr:hover .tb-ic svg {
  stroke: #fff
}

/* ── listing details strip under the asset-type matrix ── */
.cm-spec {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(34px, 4vw, 56px);
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: 24px;
  background: var(--grey)
}

.cm-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.cm-chips li {
  padding: 9px 17px;
  border: 1px solid rgba(0, 89, 178, .22);
  border-radius: 999px;
  background: #fff;
  font-family: var(--dsp);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: .4s var(--e)
}

.cm-chips li:hover {
  border-color: var(--brand);
  color: var(--brand)
}

.cm-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink)
}

/* ── premium locations : dark band with three cards ── */
.cm-locs {
  padding: clamp(66px, 7vw, 108px) 0;
  color: #fff;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(0, 89, 178, .32) 0%, transparent 70%),
    #0B1017
}

.locs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px)
}

.loc {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-d);
  transition: .55s var(--e)
}

.loc:hover {
  transform: translateY(-8px);
  border-color: rgba(91, 159, 227, .6);
  background: rgba(255, 255, 255, .07)
}

.loc-fig {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden
}

.loc-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--e)
}

.loc:hover .loc-fig img {
  transform: scale(1.06)
}

.loc-fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 22, 0) 45%, rgba(6, 12, 22, .75) 100%)
}

.loc-tag {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(10, 16, 24, .55);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--dsp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFC44D
}

.loc-in {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 30px)
}

.loc h3 {
  font-family: var(--dsp);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25
}

.loc p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .76)
}

.loc-k {
  list-style: none;
  margin: auto 0 0;
  padding: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.loc-k li {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(91, 159, 227, .14);
  font-family: var(--dsp);
  font-size: 12px;
  font-weight: 600;
  color: #CFE3F8
}

.loc-more {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(30px, 3.4vw, 48px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line-d)
}

.loc-more p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .8)
}

.cm-chips-d li {
  background: transparent;
  border-color: rgba(255, 255, 255, .22);
  color: #fff
}

.cm-chips-d li:hover {
  border-color: #FFC44D;
  color: #FFC44D
}

/* ── four-stage flow ── */
.flow.flow-4 {
  grid-template-columns: repeat(4, 1fr)
}

/* paragraphs inside the split halves */
.cs-in p {
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 16px
}

.cs-in p:last-child {
  margin-bottom: 0
}

@media(max-width:1000px) {
  .cm-req {
    max-width: none
  }

  .cm-assess-in,
  .cm-spec,
  .loc-more {
    grid-template-columns: 1fr
  }

  .locs {
    grid-template-columns: 1fr 1fr
  }

  .flow.flow-4 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:620px) {
  .cm-brief {
    grid-template-columns: 1fr
  }

  .locs,
  .flow.flow-4 {
    grid-template-columns: 1fr
  }

  /* the table stacks into labelled rows rather than scrolling sideways */
  .cm-tbl thead {
    display: none
  }

  .cm-tbl tbody tr,
  .cm-tbl tbody th,
  .cm-tbl tbody td {
    display: block;
    width: auto
  }

  .cm-tbl tbody th {
    padding-bottom: 6px
  }

  .cm-tbl tbody td {
    padding-top: 0;
    padding-left: calc(clamp(20px, 2.4vw, 30px) + 46px)
  }
}

/* ═══════ Promoter page: Track Record grid 2x2 ═══════ */
#record .matrix{grid-template-columns:repeat(2,1fr)}
#record .mx:first-child{grid-column:1/-1}
@media(max-width:760px){#record .matrix{grid-template-columns:1fr}}
.cm-figs.cm-figs-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.cm-figs.cm-figs-3{grid-template-columns:1fr}}

/* ═══════ Home: links from the services showcase to service pages ═══════ */
.si .dsc .si-go{color:var(--brand-d);font-weight:700;white-space:nowrap;text-decoration:none}
.si .dsc .si-go:hover{text-decoration:underline}
.show-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(28px,4vw,44px)}
.show-more>span{font-family:var(--dsp);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt);margin-right:6px}
@media(max-width:560px){.show-more .btn{width:100%;justify-content:space-between}}

/* ═══════ About page: Our Values ═══════ */
.vl-sec{position:relative;overflow:hidden;padding:var(--sec) 0;color:#fff;
  background:radial-gradient(900px 480px at 85% -10%,rgba(91,159,227,.35),transparent 60%),
             radial-gradient(700px 420px at -10% 110%,rgba(91,159,227,.22),transparent 60%),
             linear-gradient(160deg,#00448C 0%,#003369 55%,#00254d 100%);}
.vl-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px) 0 0/24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%);}
.vl-sec .wrap{position:relative;z-index:1;}
.vl-h{font-family:var(--dsp);font-weight:800;font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-.03em;margin:0 0 clamp(34px,4.5vw,56px);color:#fff;}
.vl-h span{color:#8EC2FF;}
.vl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);}
.vl-card{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);transition:transform .45s var(--e),background .35s,border-color .35s,box-shadow .45s;}
.vl-card::after{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#5B9FE3,#8EC2FF);transform:scaleX(.25);transform-origin:left;transition:transform .5s var(--e);}
.vl-card:hover{transform:translateY(-6px);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border-color:rgba(142,194,255,.5);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);}
.vl-card:hover::after{transform:scaleX(1);}
.vl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(26px,3vw,40px);}
.vl-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#fff;color:#00448C;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.55);transition:transform .45s var(--e);}
.vl-card:hover .vl-ic{transform:rotate(-8deg) scale(1.05);}
.vl-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.vl-no{font-family:var(--dsp);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);}
.vl-card h3{font-family:var(--dsp);font-weight:700;font-size:clamp(18px,1.5vw,21px);line-height:1.25;letter-spacing:-.01em;margin:0 0 12px;color:#fff;}
.vl-card p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78);}
@media(max-width:1080px){.vl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vl-grid{grid-template-columns:1fr}.vl-top{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.vl-card,.vl-card::after,.vl-ic{transition:none}}

/* ═══════ About page: RERA certificate ═══════ */
.rr-sec{padding:var(--sec) 0;background:#fff;}
.rr-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,80px);align-items:center;}
.rr-copy .p{margin-top:18px;max-width:52ch;}
.rr-btn{margin-top:30px;}
.rr-card{position:relative;display:block;text-decoration:none;color:var(--ink);border-radius:26px;padding:clamp(24px,3vw,36px);
  background:linear-gradient(180deg,#fff,#F6F9FD);border:1px solid var(--line);
  box-shadow:0 40px 80px -50px rgba(0,68,140,.55);transition:transform .45s var(--e),box-shadow .45s,border-color .35s;overflow:hidden;}
.rr-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#00448C,#5B9FE3);}
.rr-card:hover{transform:translateY(-6px);border-color:rgba(0,89,178,.35);box-shadow:0 50px 90px -46px rgba(0,68,140,.65);}
.rr-head{display:flex;align-items:center;gap:16px;padding-bottom:22px;margin-bottom:8px;border-bottom:1px dashed rgba(0,68,140,.25);}
.rr-seal{flex:0 0 auto;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#00448C,#0059B2);box-shadow:0 0 0 6px rgba(0,89,178,.12);}
.rr-seal svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.rr-head b{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(16px,1.4vw,19px);line-height:1.25;color:#00448C;}
.rr-head small{display:block;margin-top:4px;font-size:12.5px;color:var(--txt);letter-spacing:.02em;}
.rr-dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:0;}
.rr-dl div{padding:14px 0;border-bottom:1px solid var(--line);min-width:0;}
.rr-dl dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt);margin-bottom:5px;}
.rr-dl dd{margin:0;font-family:var(--dsp);font-weight:700;font-size:16px;color:var(--ink);overflow-wrap:anywhere;}
.rr-dl .rr-no{grid-column:1/-1;}
.rr-dl .rr-no dd{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:.04em;color:#0059B2;}
.rr-open{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--dsp);font-weight:700;font-size:13.5px;color:#0059B2;}
.rr-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;}
.rr-card:hover .rr-open svg{transform:translate(2px,-2px);}
@media(max-width:900px){.rr-in{grid-template-columns:1fr}}
@media(max-width:480px){.rr-dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rr-card{transition:none}}

/* ═══════ Home: testimonials — longer client quotes ═══════ */
.tcard{width:clamp(300px,28vw,410px)}
.tcard p{font-size:14.5px;line-height:1.7}

/* ═══════ About page: creative layout (ab2-*) ═══════ */
.ab2-h{font-family:var(--dsp);font-weight:800;font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.035em;margin:0 0 22px;color:var(--ink);}
.ab2-h .gd{color:var(--brand);}
.ab2-lede{position:relative;margin:0;padding-left:22px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.75;color:#3D4652;}
.ab2-lede::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--brand),var(--brand-2));}

/* Who we are */
.ab2-intro{position:relative;padding:var(--sec) 0;overflow:hidden;background:#fff;}
.ab2-intro-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center;}
.ab2-col{position:relative;padding:0 clamp(30px,4vw,60px) clamp(50px,6vw,80px) 0;}
.ab2-blob{position:absolute;right:0;top:12%;width:62%;height:78%;border-radius:40px;background:linear-gradient(140deg,var(--brand),#5B9FE3);transform:rotate(6deg);opacity:.95;}
.ab2-dots{position:absolute;left:-18px;bottom:6px;width:140px;height:120px;background:radial-gradient(var(--brand) 1.6px,transparent 2px) 0 0/16px 16px;opacity:.35;}
.ab2-col figure{margin:0;overflow:hidden;box-shadow:0 40px 70px -40px rgba(0,30,70,.6);}
.ab2-col img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e);}
.ab2-col figure:hover img{transform:scale(1.06);}
.ab2-main{position:relative;z-index:1;aspect-ratio:4/4.6;border-radius:32px 32px 32px 120px;}
.ab2-ins{position:absolute;z-index:2;right:0;bottom:0;width:48%;aspect-ratio:1/1;border-radius:26px;border:8px solid #fff;}

/* Leadership */
.ab2-lead{position:relative;padding:var(--sec) 0;overflow:hidden;color:#fff;
  background:radial-gradient(800px 500px at 100% 0%,rgba(91,159,227,.32),transparent 60%),linear-gradient(150deg,#0b1a2e 0%,#00254d 55%,#00448C 100%);}
.ab2-lead::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/26px 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);}
.ab2-lead-in{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:center;}
.ab2-por{position:relative;max-width:440px;}
.ab2-ring{position:absolute;inset:-18px -18px 18px 18px;border-radius:36px;border:2px solid rgba(142,194,255,.55);}
.ab2-por figure{position:relative;margin:0;border-radius:32px;overflow:hidden;background:linear-gradient(180deg,#e9eef5,#cfd9e6);aspect-ratio:4/5;box-shadow:0 50px 90px -40px rgba(0,0,0,.7);}
.ab2-por img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.ab2-h-l{color:#fff;}
.ab2-h-l .gd{color:#8EC2FF;}
.ab2-lead-txt p{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.8;color:rgba(255,255,255,.82);}

/* Approach / experience */
.ab2-ae{padding:var(--sec) 0;background:linear-gradient(180deg,#F4F7FB,#fff);}
.ab2-ae-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);}
.ab2-card{position:relative;overflow:hidden;padding:clamp(28px,3.4vw,48px);border-radius:30px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -45px rgba(0,40,90,.5);transition:transform .5s var(--e),box-shadow .5s;}
.ab2-card:hover{transform:translateY(-8px);box-shadow:0 40px 70px -40px rgba(0,40,90,.55);}
.ab2-card-d{background:linear-gradient(150deg,#00448C,#0059B2 60%,#3E8EEA);border-color:transparent;color:#fff;}
.ab2-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(30px,4vw,54px);}
.ab2-ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);}
.ab2-card-d .ab2-ic{background:rgba(255,255,255,.16);color:#fff;}
.ab2-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ab2-n{font-family:var(--dsp);font-weight:800;font-size:clamp(56px,6vw,84px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px rgba(0,89,178,.25);}
.ab2-card-d .ab2-n{-webkit-text-stroke-color:rgba(255,255,255,.35);}
.ab2-card h2{font-family:var(--dsp);font-weight:800;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;margin:0 0 16px;color:var(--ink);}
.ab2-card-d h2{color:#fff;}
.ab2-card p{margin:0;font-size:15.5px;line-height:1.8;color:#4A5563;}
.ab2-card-d p{color:rgba(255,255,255,.85);}

/* Expert location */
.ab2-loc{position:relative;padding:var(--sec) 0;overflow:hidden;background:#fff;}
.ab2-loc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,89,178,.06) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(0,89,178,.06) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 75% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 75% 50%,#000,transparent);}
.ab2-loc-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;}
.ab2-route{position:relative;min-height:320px;}
.ab2-path{position:absolute;inset:0;width:100%;height:100%;}
.ab2-path path{fill:none;stroke:var(--brand-2);stroke-width:2.5;stroke-dasharray:6 9;stroke-linecap:round;opacity:.8;}
.ab2-route ul{list-style:none;margin:0;padding:0;position:relative;height:320px;}
.ab2-city{position:absolute;display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);
  box-shadow:0 20px 40px -24px rgba(0,40,90,.5);transition:transform .4s var(--e);}
.ab2-city:hover{transform:translateY(-4px);}
.ab2-city:nth-child(1){left:2%;top:4%;}
.ab2-city:nth-child(2){left:36%;top:42%;}
.ab2-city:nth-child(3){right:2%;bottom:4%;}
.ab2-pin{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);}
.ab2-pin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ab2-city b{font-family:var(--dsp);font-weight:800;font-size:18px;color:var(--ink);}
.ab2-city-hq{background:linear-gradient(135deg,#00448C,#0059B2);border-color:transparent;}
.ab2-city-hq .ab2-pin{background:#fff;color:var(--brand);box-shadow:0 0 0 8px rgba(255,255,255,.18);animation:ab2Pulse 2.4s infinite;}
.ab2-city-hq b{color:#fff;}
@keyframes ab2Pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

@media(max-width:960px){
  .ab2-intro-in,.ab2-lead-in,.ab2-loc-in,.ab2-ae-grid{grid-template-columns:1fr;}
  .ab2-por{max-width:380px;}
}
@media(max-width:560px){
  .ab2-col{padding:0 18px 46px 0;}
  .ab2-route,.ab2-route ul{min-height:0;height:auto;}
  .ab2-path{display:none;}
  .ab2-route ul{display:flex;flex-direction:column;gap:12px;}
  .ab2-city{position:static;align-self:flex-start;}
}
@media(prefers-reduced-motion:reduce){.ab2-col img,.ab2-card,.ab2-city{transition:none}.ab2-city-hq .ab2-pin{animation:none}}

/* ═══════ About page: Who We Are (editorial + photo mosaic) ═══════ */
.ab3-who{position:relative;overflow:hidden;padding:var(--sec) 0;background:linear-gradient(180deg,#fff 0%,#F3F7FC 100%);}
.ab3-who::before{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,159,227,.22),transparent 65%);pointer-events:none;}
.ab3-top{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px);}
.ab3-h{margin:0;font-family:var(--dsp);font-weight:800;font-size:clamp(46px,7vw,104px);line-height:.95;letter-spacing:-.045em;color:var(--ink);}
.ab3-h .gd{display:block;color:transparent;background:linear-gradient(90deg,#00448C,#0059B2 45%,#5B9FE3);-webkit-background-clip:text;background-clip:text;}
.ab3-p{margin:0;padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);border-radius:24px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -45px rgba(0,40,90,.45);font-size:clamp(16px,1.35vw,18.5px);line-height:1.8;color:#3D4652;position:relative;}
.ab3-p::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#00448C,#5B9FE3);}
.ab3-mosaic{position:relative;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(12px,1.6vw,20px);height:clamp(420px,46vw,620px);}
.ab3-mosaic figure{position:relative;z-index:1;margin:0;overflow:hidden;border-radius:28px;box-shadow:0 40px 70px -45px rgba(0,30,70,.65);}
.ab3-mosaic figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,37,77,.35));pointer-events:none;}
.ab3-mosaic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e);}
.ab3-mosaic figure:hover img{transform:scale(1.07);}
.ab3-m1{grid-row:1 / 3;border-radius:28px 28px 28px 120px !important;}
.ab3-m2{border-top-right-radius:90px !important;}
.ab3-accent{position:absolute;z-index:0;left:-26px;bottom:-26px;width:180px;height:180px;border-radius:32px;
  background:radial-gradient(#0059B2 1.7px,transparent 2.2px) 0 0/16px 16px;opacity:.35;}
@media(max-width:900px){
  .ab3-top{grid-template-columns:1fr;align-items:start;}
  .ab3-mosaic{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}
  .ab3-m1{grid-column:1 / 3;grid-row:auto;aspect-ratio:16/10;border-radius:24px 24px 24px 70px !important;}
  .ab3-m2,.ab3-m3{aspect-ratio:1/1;}
  .ab3-m2{border-top-right-radius:24px !important;}
}
@media(max-width:480px){.ab3-mosaic{gap:10px}.ab3-mosaic figure{border-radius:18px}.ab3-accent{display:none}}
@media(prefers-reduced-motion:reduce){.ab3-mosaic img{transition:none}}

/* ═══════ About page: motion & creative layer (.pg-about) ═══════ */

/* hero: slow zoom + floating light + scroll cue */
.pg-about .hero .bgimg img{animation:amKen 22s ease-in-out infinite alternate;transform-origin:50% 40%;}
@keyframes amKen{from{transform:scale(1.04)}to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}}
.pg-about .hero{overflow:hidden;}
.am-orb{position:absolute;z-index:1;border-radius:50%;filter:blur(60px);pointer-events:none;mix-blend-mode:screen;opacity:.55;}
.am-o1{width:420px;height:420px;left:-120px;top:-80px;background:radial-gradient(circle,#0059B2,transparent 70%);animation:amFloat 14s ease-in-out infinite;}
.am-o2{width:360px;height:360px;right:-100px;bottom:-140px;background:radial-gradient(circle,#5B9FE3,transparent 70%);animation:amFloat 18s ease-in-out infinite reverse;}
@keyframes amFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(60px,40px,0)}}
.am-scroll{position:absolute;z-index:3;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.7);border-radius:16px;}
.am-scroll i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:amWheel 1.8s ease-in-out infinite;}
@keyframes amWheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* reveal: words */
.pg-about [data-am="words"] .am-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;}
.pg-about [data-am="words"] .am-w>span{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;transition-delay:calc(var(--i,0) * 70ms);}
.pg-about [data-am="words"].am-in .am-w>span{transform:none;opacity:1;}
/* gradient text inside split headings */
.pg-about .ab3-h .gd .am-w>span{background:linear-gradient(90deg,#00448C,#0059B2 45%,#5B9FE3);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pg-about .ab3-h .gd{background:none;}

/* reveal: generic */
.pg-about [data-am="up"]{opacity:0;transform:translate3d(0,46px,0);filter:blur(6px);
  transition:opacity .9s var(--e),transform 1s var(--e),filter .9s;transition-delay:calc(var(--i,0) * 110ms + .1s);}
.pg-about [data-am="up"].am-in{opacity:1;transform:none;filter:none;}
.pg-about [data-am="scale"]{opacity:0;transform:scale(.88) rotate(-3deg);transition:opacity 1s var(--e),transform 1.2s var(--e);}
.pg-about [data-am="scale"].am-in{opacity:1;transform:none;}
.pg-about [data-am="clip"]{clip-path:inset(100% 0 0 0 round 28px);transition:clip-path 1.25s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i,0) * 160ms);}
.pg-about [data-am="clip"].am-in{clip-path:inset(0 0 0 0 round 28px);}
.pg-about [data-am="clip"] img{transform:scale(1.18);will-change:transform;transition:transform 1.4s var(--e);}
.pg-about [data-am="pop"]{opacity:0;transform:scale(.4) translateY(20px);transition:opacity .5s,transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0) * 420ms + .7s);}
.pg-about .am-in [data-am="pop"],.pg-about [data-am="pop"].am-in{opacity:1;transform:none;}
/* the route: city pins pop only after the path draws */
.pg-about .ab2-route [data-am="pop"]{opacity:0;transform:scale(.4) translateY(20px);}
.pg-about .ab2-route.am-in [data-am="pop"]{opacity:1;transform:none;}

/* location path draws itself */
.pg-about .ab2-path path{stroke-dasharray:6 9;stroke-dashoffset:0;}
.pg-about .ab2-route .ab2-path{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.65,0,.35,1) .2s;}
.pg-about .ab2-route.am-in .ab2-path{clip-path:inset(0 0 0 0);}
.pg-about .ab2-route.am-in .ab2-path path{animation:amDash 1.6s linear infinite;}
@keyframes amDash{to{stroke-dashoffset:-30}}

/* who we are: animated gradient heading + floating accent */
.pg-about .ab3-accent{animation:amFloat 12s ease-in-out infinite;}
.pg-about .ab3-who::before{animation:amBreath 9s ease-in-out infinite;}
@keyframes amBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.7}}

/* leadership: rotating aurora + tilt portrait */
.pg-about .ab2-lead::before{content:"";position:absolute;width:900px;height:900px;left:-300px;top:-350px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(0,89,178,0),rgba(91,159,227,.28),rgba(0,89,178,0) 40%,rgba(142,194,255,.18),rgba(0,89,178,0) 80%);
  filter:blur(40px);animation:amSpin 26s linear infinite;}
@keyframes amSpin{to{transform:rotate(360deg)}}
.pg-about .ab2-por{transition:transform .5s var(--e);transform-style:preserve-3d;will-change:transform;}
.pg-about .ab2-ring{animation:amRing 7s ease-in-out infinite;}
@keyframes amRing{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-10px)}}

/* RERA card: tilt + light sheen */
.pg-about .rr-card{transform-style:preserve-3d;will-change:transform;}
.pg-about .rr-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,0%),rgba(91,159,227,.22),transparent 45%);}
.pg-about .rr-card:hover::after{opacity:1;}
.pg-about .rr-seal{animation:amSeal 3.2s ease-in-out infinite;}
@keyframes amSeal{0%,100%{box-shadow:0 0 0 6px rgba(0,89,178,.12)}50%{box-shadow:0 0 0 14px rgba(0,89,178,.04)}}
.pg-about [data-magnet]{transition:transform .35s var(--e);}

/* glow-follow cards */
.pg-about [data-glow]{isolation:isolate;}
.pg-about [data-glow]::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(91,159,227,.22),transparent 60%);}
.pg-about .ab2-card-d[data-glow]::before,.pg-about .vl-card[data-glow]::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 60%);}
.pg-about [data-glow]:hover::before{opacity:1;}
.pg-about [data-glow]>*{position:relative;z-index:1;}
.pg-about .ab2-card .ab2-n,.pg-about .vl-card .vl-no{transition:transform .6s var(--e),-webkit-text-stroke-color .4s;}
.pg-about .ab2-card:hover .ab2-n,.pg-about .vl-card:hover .vl-no{transform:translateX(-6px) scale(1.08);}
.pg-about .ab2-ic,.pg-about .vl-ic{transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.pg-about .ab2-card:hover .ab2-ic{transform:rotate(-10deg) scale(1.1);}

/* values: slowly shifting gradient band */
.pg-about .vl-sec{background-size:140% 140%;animation:amShift 16s ease-in-out infinite alternate;}
@keyframes amShift{from{background-position:0% 0%}to{background-position:100% 100%}}

@media(prefers-reduced-motion:reduce){
  .pg-about *,.pg-about *::before,.pg-about *::after{animation:none!important;}
  .pg-about [data-am],.pg-about [data-am] *{transition:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;}
  .am-scroll,.am-orb{display:none;}
}
@media(max-width:760px){.am-orb{display:none}.am-scroll{display:none}}
.pg-about [data-px]{transition:none!important}

/* ═══════ About page v3: new layout (scoped to .pg-about) ═══════ */

/* HERO — tall, left-set, oversized title on a deep blue scrim */
.pg-about .hero .bgimg img{animation:amKen 22s ease-in-out infinite alternate!important;}

/* WHO WE ARE — bento */
.bn-who{position:relative;padding:var(--sec) 0;background:#F3F6FA;overflow:hidden;}
.bn-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:clamp(12px,1.4vw,18px);}
.bn-tile{position:relative;margin:0;border-radius:30px;overflow:hidden;}
.bn-head{grid-column:1 / 6;grid-row:1 / 3;display:flex;align-items:flex-end;padding:clamp(28px,3vw,44px);
  background:linear-gradient(150deg,#00254d 0%,#00448C 55%,#0059B2 100%);color:#fff;min-height:340px;}
.bn-grid-lines{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/36px 36px;
  -webkit-mask-image:radial-gradient(90% 80% at 80% 10%,#000,transparent);mask-image:radial-gradient(90% 80% at 80% 10%,#000,transparent);}
.bn-head::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(142,194,255,.55),transparent 65%);animation:amBreath 8s ease-in-out infinite;}
.pg-about .bn-head .ab3-h{position:relative;z-index:1;margin:0;color:#fff;font-size:clamp(46px,6.2vw,96px);}
.pg-about .bn-head .ab3-h .gd,.pg-about .bn-head .ab3-h .gd .am-w>span{display:inline;background:none;-webkit-background-clip:initial;background-clip:initial;color:#8EC2FF;}
.pg-about .bn-head .ab3-h .gd{display:block;}
.bn-text{grid-column:6 / 13;grid-row:1 / 2;display:flex;align-items:center;padding:clamp(26px,3vw,42px);background:#fff;border:1px solid var(--line);}
.bn-text p{margin:0;font-size:clamp(16.5px,1.45vw,20px);line-height:1.75;color:#273240;}
.bn-text::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#00448C,#5B9FE3);}
.bn-i1{grid-column:6 / 10;grid-row:2 / 4;min-height:420px;}
.bn-i2{grid-column:10 / 13;grid-row:2 / 4;}
.bn-i3{grid-column:1 / 6;grid-row:3 / 4;min-height:260px;}
.bn-grid figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bn-grid figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,37,77,.4));}
.bn-i2{background:#0059B2;}
@media(max-width:960px){
  .bn-grid{grid-template-columns:1fr 1fr;}
  .bn-head,.bn-text,.bn-i1{grid-column:1 / 3;grid-row:auto;}
  .bn-head{min-height:260px;}
  .bn-i1{min-height:320px;}
  .bn-i2,.bn-i3{grid-column:auto;grid-row:auto;min-height:220px;}
}

/* LEADERSHIP — full-bleed split */
.pg-about .ab2-lead{padding:0;}
.pg-about .ab2-lead-in{max-width:none;padding:0;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
.pg-about .ab2-por{max-width:none;min-height:clamp(520px,52vw,760px);}
.pg-about .ab2-por figure{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;box-shadow:none;}
.pg-about .ab2-ring{inset:auto 28px 28px auto;width:120px;height:120px;border-radius:50%;border:2px dashed rgba(142,194,255,.8);z-index:2;animation:amSpin 18s linear infinite;}
.pg-about .ab2-lead-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,110px) clamp(28px,6vw,110px);}
.pg-about .ab2-lead-txt .ab2-h{font-size:clamp(40px,4.8vw,72px);}
@media(max-width:960px){.pg-about .ab2-lead-in{grid-template-columns:1fr}.pg-about .ab2-por{min-height:460px}}

/* RERA — floating on a soft blue field */
.pg-about .rr-sec{background:radial-gradient(900px 400px at 85% 50%,rgba(91,159,227,.18),transparent 60%),#fff;}

/* APPROACH / EXPERIENCE — sticky stacking cards */
.pg-about .ab2-ae{background:#0b1a2e;}
.pg-about .ab2-ae-grid{display:block;max-width:1100px;}
.pg-about .ab2-card{position:sticky;top:110px;display:grid;grid-template-columns:auto 1fr;column-gap:clamp(24px,4vw,64px);align-items:start;
  margin-bottom:clamp(20px,3vw,34px);min-height:340px;padding:clamp(30px,4vw,60px);border-radius:34px;}
.pg-about .ab2-card:last-child{margin-bottom:0;top:140px;}
.pg-about .ab2-card-top{grid-row:1 / 3;flex-direction:column;align-items:flex-start;gap:26px;margin:0;}
.pg-about .ab2-n{font-size:clamp(90px,11vw,170px);order:-1;}
.pg-about .ab2-card h2{font-size:clamp(32px,3.6vw,52px);}
.pg-about .ab2-card p{font-size:clamp(15.5px,1.25vw,17.5px);}
.pg-about .ab2-card:not(.ab2-card-d){background:#fff;}
@media(max-width:700px){.pg-about .ab2-card{position:relative;top:auto;grid-template-columns:1fr}.pg-about .ab2-card-top{grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:24px}}

/* VALUES — light bento, big blue numbers */
.pg-about .vl-sec{background:#F3F6FA;color:var(--ink);animation:none;}
.pg-about .vl-sec::before{display:none;}
.pg-about .vl-h{color:var(--ink);font-size:clamp(40px,5.4vw,80px);}
.pg-about .vl-h span{color:var(--brand);}
.pg-about .vl-grid{grid-template-columns:repeat(2,1fr);}
.pg-about .vl-card{background:#fff;border:1px solid var(--line);backdrop-filter:none;padding:clamp(28px,3.2vw,46px);border-radius:30px;box-shadow:0 30px 60px -48px rgba(0,40,90,.6);}
.pg-about .vl-card:nth-child(2),.pg-about .vl-card:nth-child(3){background:linear-gradient(150deg,#00448C,#0059B2 70%,#3E8EEA);border-color:transparent;}
.pg-about .vl-card h3{color:var(--ink);font-size:clamp(20px,1.8vw,26px);}
.pg-about .vl-card p{color:#4A5563;font-size:15.5px;}
.pg-about .vl-card:nth-child(2) h3,.pg-about .vl-card:nth-child(3) h3{color:#fff;}
.pg-about .vl-card:nth-child(2) p,.pg-about .vl-card:nth-child(3) p{color:rgba(255,255,255,.85);}
.pg-about .vl-ic{background:var(--brand-soft);box-shadow:none;}
.pg-about .vl-card:nth-child(2) .vl-ic,.pg-about .vl-card:nth-child(3) .vl-ic{background:#fff;}
.pg-about .vl-no{font-size:clamp(60px,6vw,96px);-webkit-text-stroke:1.3px rgba(0,89,178,.3);}
.pg-about .vl-card:nth-child(2) .vl-no,.pg-about .vl-card:nth-child(3) .vl-no{-webkit-text-stroke-color:rgba(255,255,255,.4);}
.pg-about .vl-card::after{background:linear-gradient(90deg,#00448C,#5B9FE3);}
.pg-about .vl-card:hover{background:#fff;}
.pg-about .vl-card:nth-child(2):hover,.pg-about .vl-card:nth-child(3):hover{background:linear-gradient(150deg,#00448C,#0059B2 70%,#3E8EEA);}
.pg-about .vl-card[data-glow]::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(91,159,227,.18),transparent 60%);}
@media(max-width:700px){.pg-about .vl-grid{grid-template-columns:1fr}}

/* LOCATION — dark, glowing route */
.pg-about .ab2-loc{background:radial-gradient(700px 420px at 75% 50%,rgba(0,89,178,.45),transparent 65%),#06111f;color:#fff;}
.pg-about .ab2-loc::before{background:linear-gradient(rgba(142,194,255,.08) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(142,194,255,.08) 1px,transparent 1px) 0 0/44px 44px;}
.pg-about .ab2-loc .ab2-h{color:#fff;}
.pg-about .ab2-loc .ab2-h .gd{color:#8EC2FF;}
.pg-about .ab2-loc .ab2-lede{color:rgba(255,255,255,.8);}
.pg-about .ab2-path path{stroke:#8EC2FF;filter:drop-shadow(0 0 6px rgba(142,194,255,.9));opacity:1;}
.pg-about .ab2-city{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);backdrop-filter:blur(8px);}
.pg-about .ab2-city b{color:#fff;}
.pg-about .ab2-city .ab2-pin{background:rgba(142,194,255,.18);color:#8EC2FF;}
.pg-about .ab2-city-hq{background:linear-gradient(135deg,#0059B2,#3E8EEA);box-shadow:0 0 40px -6px rgba(91,159,227,.9);}
.pg-about .ab2-city-hq .ab2-pin{background:#fff;color:#0059B2;}

/* ═══════ Jigar Suchde portrait: poori photo dikhe (959x1207), crop na ho ═══════ */
.prom-media .fr,#profile .ab-fig .main{aspect-ratio:959/1207;background:#fff;border:10px solid #fff;box-shadow:0 30px 60px -36px rgba(0,30,70,.45)}
.prom-media .fr img,#profile .ab-fig .main img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}
.pg-about .ab2-lead{padding:var(--sec) 0}
.pg-about .ab2-lead-in{max-width:1240px;padding-inline:clamp(18px,4vw,40px);grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:center}
.pg-about .ab2-por{min-height:0;max-width:470px;width:100%;justify-self:center}
.pg-about .ab2-por figure{position:relative;inset:auto;aspect-ratio:959/1207;border-radius:28px;border:10px solid #fff;background:#fff;box-shadow:0 50px 90px -40px rgba(0,0,0,.65)}
.pg-about .ab2-por img{object-fit:cover;object-position:center;border-radius:18px}
.pg-about .ab2-ring{inset:-16px -16px 16px 16px;width:auto;height:auto;border-radius:34px;border:2px solid rgba(142,194,255,.55);animation:amRing 7s ease-in-out infinite}
.pg-about .ab2-lead-txt{padding:0}
@media(max-width:960px){.pg-about .ab2-lead-in{grid-template-columns:1fr}.pg-about .ab2-por{max-width:380px}}
.pg-about .am-scroll{display:none}

/* ═══════ Home: sections from "Commercial Real Estate Brokers in Mumbai" ═══════ */
.hm-hd{margin-bottom:clamp(34px,4vw,54px);}
.hm-hd .p{margin-top:16px;}
.hm-ticks{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.hm-ticks .tk{align-items:flex-start;white-space:normal;}
.hm-ticks .tk>span{line-height:1.5;}
.hm-ticks .tk svg{flex:0 0 auto;margin-top:3px;}

/* Locations we serve */
.hm-locs{position:relative;overflow:hidden;padding:var(--sec) 0;color:#fff;
  background:radial-gradient(800px 460px at 90% 0%,rgba(91,159,227,.28),transparent 60%),linear-gradient(160deg,#06111f 0%,#00254d 60%,#00448C 100%);}
.hm-locs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(142,194,255,.07) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(142,194,255,.07) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent);mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent);}
.hm-locs .wrap{position:relative;z-index:1;}
.hm-locs .h2{color:#fff;}
.hm-locs .h2 .gd{color:#8EC2FF;}
.hm-locs .hm-hd .p{color:rgba(255,255,255,.78);}
.hm-locs .hm-hd .p b{color:#fff;}
.hm-loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);}
.hm-loc{position:relative;padding:clamp(22px,2.2vw,28px);border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);transition:transform .45s var(--e),background .35s,border-color .35s,box-shadow .45s;overflow:hidden;}
.hm-loc::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#5B9FE3,#8EC2FF);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e);}
.hm-loc:hover{transform:translateY(-6px);background:rgba(255,255,255,.11);border-color:rgba(142,194,255,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.hm-loc:hover::after{transform:scaleX(1);}
.hm-loc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.hm-pin{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;color:#00448C;transition:transform .45s cubic-bezier(.34,1.56,.64,1);}
.hm-loc:hover .hm-pin{transform:translateY(-4px) rotate(-8deg);}
.hm-pin svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.hm-n{font-family:var(--dsp);font-weight:800;font-size:34px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);}
.hm-loc h3{font-family:var(--dsp);font-weight:700;font-size:19px;line-height:1.25;margin:0 0 10px;color:#fff;}
.hm-loc p{margin:0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.75);}

/* Investment opportunities */
.hm-invs{padding:50px 0;background:linear-gradient(180deg,#F3F6FA,#fff);}
.hm-inv-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(14px,1.8vw,24px);align-items:stretch;}
.hm-inv{position:relative;overflow:hidden;padding:clamp(28px,3vw,42px);border-radius:30px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -48px rgba(0,40,90,.6);transition:transform .5s var(--e),box-shadow .5s;}
.hm-inv:hover{transform:translateY(-8px);box-shadow:0 40px 70px -40px rgba(0,40,90,.55);}
.hm-inv-d{background:linear-gradient(155deg,#00254d,#00448C 55%,#0059B2);border-color:transparent;color:#fff;}
.hm-roman{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(60px,6vw,96px);line-height:.9;letter-spacing:-.03em;margin-bottom:22px;
  color:transparent;-webkit-text-stroke:1.4px rgba(0,89,178,.35);}
.hm-inv-d .hm-roman{-webkit-text-stroke-color:rgba(255,255,255,.45);}
.hm-inv h3{font-family:var(--dsp);font-weight:800;font-size:clamp(20px,1.8vw,25px);line-height:1.25;letter-spacing:-.02em;margin:0 0 16px;color:var(--ink);}
.hm-inv-d h3{color:#fff;}
.hm-inv p{margin:0 0 14px;font-size:15px;line-height:1.75;color:#4A5563;}
.hm-inv p:last-child{margin-bottom:0;}
.hm-inv-d p{color:rgba(255,255,255,.84);}
.hm-inv .hl{color:var(--brand);font-weight:700;background:none;}
.hm-inv-d .hl{color:#fff;background:none;}

/* Proven transaction experience */
.hm-proof{padding:clamp(60px,7vw,96px) 0;background:#fff;}
.hm-proof .h2{text-align:center;margin-bottom:clamp(30px,4vw,48px);}
.hm-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-radius:30px;overflow:hidden;
  background:linear-gradient(135deg,#00448C,#0059B2 55%,#3E8EEA);box-shadow:0 40px 80px -50px rgba(0,40,90,.8);}
.hm-stat{position:relative;padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px);color:#fff;}
.hm-stat+.hm-stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.25);}
.hm-stat b{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.03em;margin-bottom:12px;}
.hm-stat b em{font-style:normal;color:#8EC2FF;}
.hm-stat span{display:block;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85);}

/* Current opportunities on home: light band */
#assets.cm-assets{scroll-margin-top:90px;}
.hm-tst-h{margin-top:22px;}

@media(max-width:1080px){.hm-loc-grid{grid-template-columns:repeat(2,1fr)}.hm-inv-grid{grid-template-columns:1fr}.hm-proof-grid{grid-template-columns:repeat(2,1fr)}.hm-stat:nth-child(3)::before{display:none}}
@media(max-width:560px){.hm-loc-grid{grid-template-columns:1fr}.hm-proof-grid{grid-template-columns:1fr}.hm-stat+.hm-stat::before{left:22%;right:22%;top:0;bottom:auto;width:auto;height:1px}}
@media(prefers-reduced-motion:reduce){.hm-loc,.hm-inv,.hm-pin,.hm-loc::after{transition:none}}

/* ═══════ Home: Our Real Estate Services and Solutions — image bento ═══════ */
.sv-sec{position:relative;overflow:hidden;padding:50px 0;background:#F3F6FA;}
.sv-sec::before{content:"";position:absolute;left:-200px;top:-200px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,159,227,.22),transparent 65%);pointer-events:none;}
.sv-hd{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:clamp(30px,4vw,52px);}
.sv-hd .h2{margin:0;}
.sv-hd .p{margin:0;}
.sv-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(250px,auto);gap:clamp(12px,1.4vw,18px);}
.sv-c1{grid-column:1 / 7;grid-row:span 2;}
.sv-c2{grid-column:7 / 13;}
.sv-c3{grid-column:7 / 10;}
.sv-c4{grid-column:10 / 13;}
.sv-c5,.sv-c6,.sv-c7{grid-column:span 4;}

.sv-card{position:relative;overflow:hidden;border-radius:28px;min-height:250px;isolation:isolate;
  box-shadow:0 30px 60px -44px rgba(0,30,70,.7);color:#fff;}
.sv-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--e),filter .6s;}
.sv-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,20,45,.05) 0%,rgba(0,25,55,.45) 45%,rgba(0,30,65,.92) 100%);transition:background .5s;}
.sv-card::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.14);pointer-events:none;}
.sv-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.2vw,30px);}
.sv-n{display:inline-grid;place-items:center;min-width:42px;height:28px;padding:0 10px;margin-bottom:14px;border-radius:999px;
  font-family:var(--dsp);font-weight:700;font-size:12px;letter-spacing:.08em;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);}
.sv-card h3{margin:0;font-family:var(--dsp);font-weight:800;font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.02em;color:#fff;}
.sv-c1 h3{font-size:clamp(26px,2.6vw,38px);}
.sv-card p{margin:0;max-height:0;opacity:0;overflow:hidden;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.88);
  transition:max-height .7s var(--e),opacity .5s,margin .5s;}
.sv-c1 p{max-height:none;opacity:1;margin-top:14px;font-size:15.5px;max-width:52ch;}
.sv-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 16px;border-radius:999px;background:#fff;color:#00448C;
  font-family:var(--dsp);font-weight:700;font-size:13px;text-decoration:none;transition:transform .3s var(--e),background .3s,color .3s;}
.sv-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;}
.sv-go:hover{background:#0059B2;color:#fff;}
.sv-go:hover svg{transform:translate(2px,-2px);}

/* hover: zoom photo, blue tint, open the description */
.sv-card:hover>img{transform:scale(1.08);}
.sv-card:hover::before{background:linear-gradient(180deg,rgba(0,68,140,.35) 0%,rgba(0,50,105,.75) 45%,rgba(0,30,65,.96) 100%);}
.sv-card:hover p,.sv-card:focus-within p{max-height:260px;opacity:1;margin-top:12px;}

/* touch screens: description always visible */
@media(hover:none){.sv-card p{max-height:none;opacity:1;margin-top:12px;}}
@media(max-width:1080px){
  .sv-hd{grid-template-columns:1fr;}
  .sv-grid{grid-template-columns:repeat(2,1fr);}
  .sv-c1{grid-column:1 / 3;grid-row:auto;min-height:420px;}
  .sv-c2,.sv-c3,.sv-c4,.sv-c5,.sv-c6,.sv-c7{grid-column:auto;}
  .sv-c7{grid-column:1 / 3;}
  .sv-card p{max-height:none;opacity:1;margin-top:12px;}
  .sv-card{min-height:360px;}
}
@media(max-width:600px){.sv-grid{grid-template-columns:1fr}.sv-c1,.sv-c7{grid-column:auto}.sv-card{min-height:380px}}
@media(prefers-reduced-motion:reduce){.sv-card>img,.sv-card p,.sv-go{transition:none}}

/* ═══════ Home services v2: content always visible (overrides the image-only bento) ═══════ */
.sv-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:clamp(14px,1.6vw,22px);}
.sv-grid .sv-card{grid-column:auto;grid-row:auto;}
.sv-grid .sv-c1{grid-column:1 / 3;}
.sv-grid .sv-c7{grid-column:2 / 4;}
.sv-card{display:flex;flex-direction:column;min-height:0;background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:0 30px 60px -48px rgba(0,30,70,.55);transition:transform .5s var(--e),box-shadow .5s,border-color .4s;}
.sv-card::before{display:none;}
.sv-card::after{border:0;left:0;right:0;top:0;bottom:auto;height:4px;border-radius:0;background:linear-gradient(90deg,#00448C,#5B9FE3);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e);inset:auto 0 auto 0;z-index:3;}
.sv-card>img{position:relative;inset:auto;z-index:0;display:block;width:100%;height:230px;object-fit:cover;flex:0 0 auto;}
.sv-body{position:relative;left:auto;right:auto;bottom:auto;display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(22px,2.2vw,30px);}
.sv-n{position:absolute;top:-18px;left:clamp(22px,2.2vw,30px);margin:0;min-width:46px;height:36px;border-radius:12px;
  background:linear-gradient(135deg,#00448C,#0059B2);border:3px solid #fff;color:#fff;font-size:13px;box-shadow:0 10px 20px -10px rgba(0,40,90,.7);}
.sv-card h3,.sv-c1 h3{color:var(--ink);margin-top:14px;font-size:clamp(19px,1.6vw,23px);}
.sv-card p,.sv-c1 p{max-height:none;opacity:1;margin-top:12px;max-width:none;font-size:15px;line-height:1.7;color:#4A5563;}
.sv-go{margin-top:auto;padding:16px 0 0;background:none;border-radius:0;color:#0059B2;font-size:14px;}
.sv-go:hover{background:none;color:#00448C;}
.sv-card:hover{transform:translateY(-8px);border-color:rgba(0,89,178,.3);box-shadow:0 40px 70px -40px rgba(0,30,70,.55);}
.sv-card:hover::after{transform:scaleX(1);}
.sv-card:hover>img{transform:scale(1.06);}
.sv-card:hover::before{display:none;}
.sv-card:hover p{max-height:none;margin-top:12px;}
/* featured wide cards: photo + text side by side */
.sv-c1,.sv-c7{flex-direction:row;}
.sv-c1>img,.sv-c7>img{width:52%;height:auto;min-height:320px;}
.sv-c7{flex-direction:row-reverse;}
.sv-c1 .sv-body,.sv-c7 .sv-body{justify-content:center;padding:clamp(28px,3vw,44px);}
.sv-c1 .sv-n,.sv-c7 .sv-n{position:static;margin-bottom:6px;border:0;}
.sv-c1 h3,.sv-c7 h3{font-size:clamp(24px,2.3vw,32px);}
.sv-c1{background:linear-gradient(150deg,#00254d,#00448C 60%,#0059B2);border-color:transparent;}
.sv-c1 h3{color:#fff;}
.sv-c1 p{color:rgba(255,255,255,.85);}
.sv-c1 .sv-n{background:#fff;color:#00448C;}
.sv-c1 .sv-go{color:#fff;}
.sv-c1 .sv-go:hover{color:#8EC2FF;}
@media(max-width:1080px){
  .sv-grid{grid-template-columns:repeat(2,1fr);}
  .sv-grid .sv-c1,.sv-grid .sv-c7{grid-column:1 / 3;}
  .sv-card{min-height:0;}
}
@media(max-width:700px){
  .sv-grid{grid-template-columns:1fr;}
  .sv-grid .sv-c1,.sv-grid .sv-c7{grid-column:auto;}
  .sv-c1,.sv-c7{flex-direction:column;}
  .sv-c1>img,.sv-c7>img{width:100%;min-height:0;height:220px;}
  .sv-c1 .sv-n,.sv-c7 .sv-n{position:absolute;top:-18px;border:3px solid #fff;}
  .sv-c1 .sv-body,.sv-c7 .sv-body{padding:clamp(22px,2.2vw,30px);}
}
.sv-c1 .sv-go,.sv-c7 .sv-go{margin-top:22px}

/* ═══════ Home services v3: 6 cards — last card full-width featured ═══════ */
.sv-grid .sv-c6{grid-column:1 / 4;flex-direction:row-reverse;}
.sv-c6>img{width:52%;height:auto;min-height:300px;}
.sv-c6 .sv-body{justify-content:center;padding:clamp(28px,3vw,44px);}
.sv-c6 .sv-n{position:static;margin-bottom:6px;border:0;}
.sv-c6 h3{font-size:clamp(24px,2.3vw,32px);}
.sv-c6 .sv-go{margin-top:22px;}
@media(max-width:1080px){.sv-grid .sv-c6{grid-column:1 / 3;}}
@media(max-width:700px){
  .sv-grid .sv-c6{grid-column:auto;flex-direction:column;}
  .sv-c6>img{width:100%;min-height:0;height:220px;}
  .sv-c6 .sv-n{position:absolute;top:-18px;border:3px solid #fff;}
  .sv-c6 .sv-body{padding:clamp(22px,2.2vw,30px);}
}

/* ═══════ Mobile menu: same structure as the desktop menu (Services / About open as groups) ═══════ */
#dr .dr-nav a.on{color:var(--brand-2);}
#dr .dr-sub{border-bottom:1px solid var(--line-d);}
#dr .dr-sub summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  font-family:var(--dsp);font-size:clamp(18px,4.6vw,24px);font-weight:700;color:#fff;padding:15px 0;letter-spacing:-.025em;transition:color .3s;}
#dr .dr-sub summary::-webkit-details-marker{display:none;}
#dr .dr-sub[open] summary{color:var(--brand-2);}
#dr .dr-chev{width:18px;height:18px;stroke:var(--brand-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e);flex:none;}
#dr .dr-sub[open] .dr-chev{transform:rotate(180deg);}
#dr .dr-subl{display:flex;flex-direction:column;padding:0 0 12px 14px;margin-left:2px;border-left:2px solid rgba(91,159,227,.35);}
#dr .dr-subl a{font-size:clamp(15.5px,4vw,18px);font-weight:600;padding:10px 0;border-bottom:0;color:rgba(255,255,255,.82);}
#dr .dr-subl a.on{color:var(--brand-2);}
#dr .dr-subl a svg{width:12px;height:12px;}

/* ═══════ Home services: all six cards uniform (same size & style) ═══════ */
.sv-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;}
.sv-grid .sv-card{grid-column:auto!important;grid-row:auto!important;flex-direction:column!important;}
.sv-grid .sv-card>img{width:100%!important;height:230px!important;min-height:0!important;}
.sv-grid .sv-card .sv-body{justify-content:flex-start;padding:clamp(22px,2.2vw,30px);}
.sv-grid .sv-card .sv-n{position:absolute;top:-18px;margin:0;border:3px solid #fff;background:linear-gradient(135deg,#00448C,#0059B2);color:#fff;}
.sv-grid .sv-card h3{font-size:clamp(19px,1.6vw,23px);color:var(--ink);}
.sv-grid .sv-card p{color:#4A5563;}
.sv-grid .sv-card .sv-go{margin-top:auto;color:#0059B2;}
.sv-grid .sv-c1{background:#fff;border:1px solid var(--line);}
@media(max-width:1080px){.sv-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){.sv-grid{grid-template-columns:1fr;grid-auto-rows:auto;}}

/* About: leadership name + title */
.ab2-who{display:flex;flex-direction:column;gap:6px;margin:-4px 0 22px;padding-left:16px;border-left:3px solid #5B9FE3}
.ab2-who b{font-family:var(--dsp);font-weight:800;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;color:#fff}
.ab2-who span{font-family:var(--dsp);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#8EC2FF;line-height:1.5}

/* About: leadership stats */
.ab2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.ab2-stats>div{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.ab2-stats b{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(18px,1.7vw,24px);line-height:1.15;letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.ab2-stats span{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.75)}
@media(max-width:560px){.ab2-stats{grid-template-columns:1fr}}

/* ═══════ Home services: show the whole photo (no crop) ═══════ */
.sv-grid .sv-card>img{position:relative;z-index:1;height:auto!important;aspect-ratio:3/2;object-fit:contain;background:transparent;}
.sv-grid .sv-card::before{display:none!important;}
.sv-grid .sv-card .sv-bg{position:absolute;left:0;right:0;top:0;aspect-ratio:3/2;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(16px) brightness(.85);transform:scale(1.12);}
.sv-grid .sv-card .sv-body{position:relative;z-index:2;background:#fff;}
.sv-grid .sv-card:hover>img{transform:scale(1.03);}

/* ═══════ Testimonials: active (centre) card highlighted ═══════ */
.tcard.act{background:linear-gradient(155deg,#00254d,#00448C 55%,#0059B2);border-color:transparent;transform:translateY(-8px);box-shadow:0 34px 62px -30px rgba(0,40,90,.6);}
.tcard.act p{color:rgba(255,255,255,.92);}
.tcard.act::before{color:rgba(255,255,255,.12);}
.tcard.act::after{transform:scaleX(1);background:linear-gradient(90deg,#8EC2FF,#fff);}
.tcard p{margin-top:0;}

/* ═══════ Luxury Residential page (lx-) ═══════ */
.pg-lux .ph .bgimg img{object-position:center 40%;}

/* intro: photo + statement */
.lx-intro{padding:var(--sec) 0 calc(var(--sec) * .7);background:#fff;}
.lx-intro-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;}
.lx-photo{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 50px 90px -50px rgba(0,40,90,.55);}
.lx-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;}
.lx-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--e);}
.lx-photo:hover img{transform:scale(1.04);}
.lx-rule{display:block;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brand-d),var(--brand-2));margin-bottom:26px;}
.lx-intro-txt p{font-family:var(--dsp);font-size:clamp(19px,1.7vw,25px);line-height:1.6;font-weight:500;letter-spacing:-.015em;color:var(--ink);}
.lx-intro-txt b{font-weight:800;color:var(--brand-d);}
.lx-intro-txt .lx-hl{color:#fff;background:linear-gradient(135deg,var(--brand-d),var(--brand));padding:.08em .45em;border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap;}

/* find / why: two numbered cards */
.lx-duo{padding:calc(var(--sec) * .3) 0 var(--sec);background:linear-gradient(180deg,#fff,#F3F6FA);}
.lx-duo-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(16px,2vw,28px);align-items:stretch;}
.lx-card{position:relative;overflow:hidden;padding:clamp(30px,3.4vw,52px);border-radius:30px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -45px rgba(0,40,90,.45);transition:transform .6s var(--e),box-shadow .6s var(--e);}
.lx-card:hover{transform:translateY(-8px);box-shadow:0 44px 80px -44px rgba(0,40,90,.55);}
.lx-card-d{background:linear-gradient(155deg,#00254d,#00448C 55%,#0059B2);border-color:transparent;color:#fff;}
.lx-n{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(54px,6vw,86px);line-height:1;letter-spacing:-.04em;margin-bottom:18px;
  color:transparent;-webkit-text-stroke:1.5px rgba(0,89,178,.35);}
.lx-card-d .lx-n{-webkit-text-stroke-color:rgba(255,255,255,.45);}
.lx-card h2{font-family:var(--dsp);font-weight:800;font-size:clamp(22px,2.1vw,30px);line-height:1.25;letter-spacing:-.025em;margin:0 0 18px;color:var(--ink);}
.lx-card-d h2{color:#fff;}
.lx-card p{font-size:16px;line-height:1.8;color:#4A5563;margin:0 0 14px;}
.lx-card p:last-child{margin-bottom:0;}
.lx-card-d p{color:rgba(255,255,255,.86);}

/* types: dark band over the photo */
.lx-types{position:relative;overflow:hidden;padding:var(--sec) 0;background:#001b38;color:#fff;isolation:isolate;}
.lx-types-bg{position:absolute;inset:-20px;z-index:-2;background-size:cover;background-position:center;filter:blur(3px) saturate(1.1);transform:scale(1.04);}
.lx-types::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(0,22,48,.94) 0%,rgba(0,37,77,.86) 45%,rgba(0,68,140,.55) 100%);}
.lx-types-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center;}
.lx-types-h{font-family:var(--dsp);font-weight:800;font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:-.035em;color:#fff;margin:0;}
.lx-glass{padding:clamp(28px,3vw,46px);border-radius:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 40px 80px -50px rgba(0,0,0,.6);}
.lx-glass p{font-size:16px;line-height:1.85;color:rgba(255,255,255,.84);margin:0;}
.lx-glass .lx-lead{font-family:var(--dsp);font-size:clamp(18px,1.5vw,21px);font-weight:600;line-height:1.6;color:#fff;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18);}

@media(max-width:1000px){
  .lx-intro-in,.lx-duo-grid,.lx-types-in{grid-template-columns:1fr;}
  .lx-photo{aspect-ratio:16/10;}
}
@media(max-width:600px){
  .lx-card,.lx-glass{border-radius:22px;}
  .lx-photo{border-radius:20px;}
}

/* ═══════ Service pages intro (cm-open): tighter on desktop ═══════
   Artwork fits the section height on the right; the section is sized by its copy,
   not by the artwork, so there is no big empty band above and below the text. */
@media(min-width:1001px){
  /* section keeps only the tint; the artwork moves to its own layer */
  .cm-open{padding:clamp(48px,4.4vw,72px) 0;overflow:hidden;isolation:isolate;
    background-image:linear-gradient(180deg,rgba(255,255,255,0) 78%,#fff 98%),linear-gradient(90deg,#EEF4FE 0%,#EDF4FE 62%,#DCEBF8 100%);
    background-position:0 0,0 0;background-size:100% 100%,100% 100%;}
  /* artwork: full section height, pinned right. Its empty left part fades out,
     which also hides the thin white strip on the image's left edge */
  .cm-open::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;aspect-ratio:1666/944;
    background:url(../img/infra-bldg-bg.jpg) right bottom/cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,#000 42%);
    mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,#000 42%);}
  .cm-open::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:14%;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);}
  .cm-hero{min-height:clamp(320px,24vw,400px);}
  .cm-hero-l{max-width:min(52%,640px);}
}

/* checklist in two columns (pre-leased: Opportunity snapshot fields) */
.cs-in ul.cs-2col{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(18px,2.4vw,36px);border-bottom:1px solid rgba(255,255,255,.2);}
.cs-in ul.cs-2col li:last-child{border-bottom:0;}
@media(max-width:420px){.cs-in ul.cs-2col{grid-template-columns:1fr;}}

/* home contact: RERA card with a View link to the certificate PDF */
.cta-lines a.cta-rera{flex-basis:100%;}
.cta-lines a.cta-rera>span:nth-child(2){flex:1;min-width:0;}
.cta-view{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  background:var(--brand);color:#fff;font-family:var(--dsp);font-size:13.5px;font-weight:700;transition:background .35s,transform .35s var(--e);}
.cta-view svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.cta-lines a.cta-rera:hover .cta-view{background:#fff;color:var(--brand);transform:translateX(3px);}
.cta-lines a.cta-rera:hover .cta-view svg{stroke:var(--brand);}

/* about: no blue outline frame behind the promoter photo */
.ab2-por .ab2-ring{display:none!important;}

/* ═══════ About: Who We Are (text only, no photos) ═══════ */
.wa-sec{padding:var(--sec) 0;background:#F3F6FA;}
.wa-card{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,90px);align-items:center;
  padding:clamp(40px,6vw,96px) clamp(28px,5vw,84px);border-radius:36px;color:#fff;
  background:linear-gradient(135deg,#001d3d 0%,#00448C 55%,#0059B2 100%);box-shadow:0 60px 110px -60px rgba(0,40,90,.7);}
.wa-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;}
.wa-orb1{width:520px;height:520px;right:-140px;top:-220px;background:radial-gradient(circle,rgba(91,159,227,.45),rgba(91,159,227,0) 68%);}
.wa-orb2{width:420px;height:420px;left:-160px;bottom:-200px;background:radial-gradient(circle,rgba(0,140,255,.28),rgba(0,140,255,0) 70%);}
.wa-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 20% 50%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 20% 50%,#000 10%,transparent 70%);}
.wa-h{font-family:var(--dsp);font-weight:800;font-size:clamp(46px,6.4vw,104px);line-height:.95;color:#fff;margin:0;}
.wa-h .gd{display:block;color:#8EC2FF;background:none;-webkit-text-fill-color:#8EC2FF;}
.wa-bar{display:block;width:84px;height:5px;border-radius:5px;margin-top:clamp(22px,2.6vw,34px);background:linear-gradient(90deg,#8EC2FF,#fff);}
.wa-r{position:relative;padding-left:clamp(22px,3vw,44px);border-left:1px solid rgba(255,255,255,.22);}
.wa-r p{font-family:var(--dsp);font-size:clamp(18px,1.65vw,24px);line-height:1.7;font-weight:500;letter-spacing:-.01em;color:rgba(255,255,255,.88);margin:0;}
.wa-r b{color:#fff;font-weight:800;}
@media(max-width:900px){
  .wa-card{grid-template-columns:1fr;border-radius:26px;}
  .wa-r{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);}
}

/* ═══════ About: Our Values (compact) ═══════ */
.vl2-sec{position:relative;z-index:1;padding:clamp(56px,6vw,90px) 0;background:#fff;}
.vl2-in{display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:clamp(28px,5vw,80px);align-items:start;}
.vl2-h{font-family:var(--dsp);font-weight:800;font-size:clamp(34px,4vw,58px);line-height:1;color:var(--ink);margin:0;}
.vl2-h,.vl2-h .am-w>span{color:var(--ink);}
.vl2-h>span,.vl2-h>span .am-w>span{color:var(--brand);}
.vl2-bar{display:block;width:64px;height:4px;border-radius:4px;margin-top:22px;background:linear-gradient(90deg,var(--brand-d),var(--brand-2));}
.vl2-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);}
.vl2-it{display:flex;gap:16px;align-items:flex-start;padding:24px 22px 24px 0;border-bottom:1px solid var(--line);transition:background .4s var(--e);}
.vl2-it:nth-child(even){padding-left:22px;padding-right:0;border-left:1px solid var(--line);}
.vl2-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-d),var(--brand));box-shadow:0 12px 24px -14px rgba(0,68,140,.8);transition:transform .45s var(--e);}
.vl2-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.vl2-it:hover .vl2-ic{transform:translateY(-3px) rotate(-6deg);}
.vl2-it h3{font-family:var(--dsp);font-size:clamp(17px,1.3vw,19px);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink);margin:2px 0 6px;}
.vl2-it p{font-size:14.5px;line-height:1.7;color:#4A5563;margin:0;}
@media(max-width:980px){.vl2-in{grid-template-columns:1fr;}}
@media(max-width:640px){
  .vl2-grid{grid-template-columns:1fr;}
  .vl2-it,.vl2-it:nth-child(even){padding:20px 0;border-left:0;}
}

/* About page: tighter vertical spacing between sections (hero untouched) */
.pg-about section:not(.hero),.pg-about .rr-sec{padding-top:clamp(44px,4.6vw,70px);padding-bottom:clamp(44px,4.6vw,70px);}

/* Stats: "1 Mn+" unit styling */
.hm-stat b .hm-u{font-size:.58em;font-weight:700;letter-spacing:-.01em;margin-left:.12em;}
/* Stats: Rubik digits so "1" reads clearly (Jakarta 1 looks like I) */
.hm-stat b{font-family:"Rubik",var(--dsp);font-weight:700;}
.hm-stat b .hm-u{font-weight:500;}
/* About: Who We Are heading smaller than the page H1, text scaled to match */
.wa-card{grid-template-columns:.62fr 1.38fr;padding:clamp(34px,4.4vw,64px) clamp(26px,4.4vw,72px);}
.wa-h{font-size:clamp(32px,3.6vw,50px);line-height:1.05;letter-spacing:-.04em;}
.wa-bar{width:64px;height:4px;margin-top:clamp(16px,1.8vw,24px);}
.wa-r p{font-size:clamp(16px,1.25vw,18px);line-height:1.75;}
@media(max-width:900px){.wa-card{grid-template-columns:1fr;}}
/* Home CTA: navy-blue band so it no longer blends into the dark footer */
.cta{background:radial-gradient(70% 90% at 0% 0%,rgba(91,159,227,.22),transparent 60%),linear-gradient(150deg,#001d3d 0%,#00305f 50%,#00448c 100%);box-shadow:none;}
.cta::before{background:radial-gradient(circle,rgba(91,159,227,.28),rgba(91,159,227,0) 66%);}
.cta + footer,.cta ~ footer{border-top:1px solid rgba(255,255,255,.08);}
/* Hero glass card: "1 Mn+" figure + secondary stat */
.gcard .big{font-family:var(--dsp);font-weight:800;font-size:56px;letter-spacing:0;font-variant-numeric:lining-nums;line-height:1;color:#fff;display:flex;align-items:baseline;}
.gcard .big .u{font-size:.5em;font-weight:500;letter-spacing:0;margin-left:.1em;}
.gcard .big em,.gcard .g-sub em{font-style:normal;color:#8EC2FF;}
.gcard .cap{margin-top:8px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:1.4;}
.gcard .g-sub{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);}
.gcard .g-sub b{display:block;font-family:var(--dsp);font-weight:800;letter-spacing:0;font-size:26px;line-height:1.1;color:#fff;}
.gcard .g-sub span{display:block;margin-top:6px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:1.4;}
@media(max-width:760px){.gcard .big{font-size:44px}.gcard .g-sub b{font-size:22px}}
/* ═══════ Home: testimonials carousel (active card raised like a popup) ═══════ */
.tc{--cw:clamp(300px,36vw,500px);position:relative;z-index:2;margin-top:clamp(20px,3vw,36px);}
.tc-view{overflow:hidden;padding:clamp(34px,4vw,50px) 0 clamp(46px,5vw,64px);}
.tc-track{display:flex;align-items:stretch;gap:clamp(16px,2vw,28px);transition:transform .75s var(--e);will-change:transform;}
.tc-card{position:relative;flex:none;width:var(--cw);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:clamp(28px,3vw,42px);box-shadow:0 16px 38px -30px rgba(0,0,0,.35);opacity:.42;transform:scale(.86);
  transition:transform .75s var(--e),opacity .75s var(--e),box-shadow .75s var(--e),background .75s var(--e),border-color .75s var(--e);}
.tc-card.act{opacity:1;transform:scale(1.05);z-index:2;border-color:transparent;
  background:linear-gradient(155deg,#00254d 0%,#00448C 55%,#0059B2 100%);
  box-shadow:0 46px 80px -34px rgba(0,40,90,.6),0 0 0 8px rgba(0,89,178,.08);}
.tc-q{width:42px;height:32px;flex:none;fill:var(--brand);opacity:.85;transition:fill .75s var(--e);}
.tc-card.act .tc-q{fill:#8EC2FF;opacity:1;}
.tc-card p{margin:20px 0 26px;font-size:15.5px;line-height:1.8;color:#1b2430;transition:color .75s var(--e);}
.tc-card.act p{color:rgba(255,255,255,.94);}
.tc-n{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-family:var(--dsp);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--txt);transition:color .75s var(--e),border-color .75s var(--e);}
.tc-card.act .tc-n{color:rgba(255,255,255,.65);border-color:rgba(255,255,255,.18);}
.tc-arr{position:absolute;top:50%;z-index:5;width:56px;height:56px;margin-top:-28px;border-radius:50%;background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 32px -16px rgba(0,0,0,.4);display:grid;place-items:center;cursor:pointer;transition:background .4s var(--e),border-color .4s var(--e),transform .4s var(--e);}
.tc-prev{left:calc(50% - var(--cw) * .525 - 28px);}
.tc-next{right:calc(50% - var(--cw) * .525 - 28px);}
.tc-arr svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--e);}
.tc-arr:hover{background:var(--brand);border-color:var(--brand);transform:scale(1.06);}
.tc-arr:hover svg{stroke:#fff;}
.tc-arr:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;}
@media(max-width:760px){
  .tc{--cw:calc(100vw - 2 * var(--pad) - 24px);}
  .tc-view{padding:22px 0 96px;}
  .tc-card{transform:scale(.9);}
  .tc-card.act{transform:scale(1);}
  .tc-arr{top:auto;bottom:22px;margin-top:0;width:50px;height:50px;}
  .tc-prev{left:calc(50% - 58px);}
  .tc-next{right:calc(50% - 58px);}
}
@media(prefers-reduced-motion:reduce){.tc-track,.tc-card{transition:none}}
/* testimonials loop: silent jump back to the real card, no animation */
.tc-track.tc-jump,.tc-track.tc-jump .tc-card,.tc-track.tc-jump .tc-card *{transition:none!important}
/* Home: Investment Opportunities, three equal-width cards */
.hm-inv-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:1080px){.hm-inv-grid{grid-template-columns:1fr}}
/* home contact: boxes size to their content so the email never splits mid-word;
   if phone + email don't fit side by side, the email box drops to its own row */
.cta-lines a{flex:1 1 auto;}
.cta-lines a[href^="mailto:"] b{white-space:nowrap;overflow-wrap:normal;}
@media(max-width:359px){.cta-lines a[href^="mailto:"] b{white-space:normal;overflow-wrap:anywhere;font-size:14px;}}
.cta-lines a.cta-rera b{white-space:nowrap;overflow-wrap:normal;}
@media(max-width:400px){.cta-lines a.cta-rera{gap:10px;}.cta-view{padding:8px 12px;font-size:12.5px;}.cta-lines a.cta-rera b{font-size:14px;}}
/* enquiry forms (home + contact): spam-trap field, status line, select on the blue contact panel */
.frm .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.frm .ct-note.ok{color:#7EE0A1;}
.frm .btn[disabled]{opacity:.6;cursor:wait;}
.ct-form .fld select{background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");}
.ct-form .fld select:focus{border-color:#FFC44D;background-color:rgba(255,255,255,.16);box-shadow:0 0 0 4px rgba(255,196,77,.22);}
#enquiry{scroll-margin-top:100px;}
/* select arrow: keep one arrow on the right in every state (base :focus uses the background shorthand, which reset repeat/size/position) */
.fld select,.fld select:focus,.fld select:hover{background-repeat:no-repeat!important;background-position:right 17px center!important;background-size:15px!important;}
.fld select:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230059B2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");}
.ct-form .fld select:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");}
/* Home stats band: unit words ("Sq. Ft.", "Cr") smaller than the figure */
.hm-stat b .hm-unit{font-size:.42em;font-weight:500;letter-spacing:0;margin-left:.35em;color:rgba(255,255,255,.88);white-space:nowrap;}
/* ═══════ Thank-you + 404 pages: centred status card ═══════ */
.st-sec{padding:clamp(60px,8vw,110px) 0;background:linear-gradient(180deg,#F3F6FA,#fff);}
.st-box{max-width:760px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:30px;
  padding:clamp(34px,5vw,64px) clamp(22px,5vw,64px);box-shadow:0 40px 80px -50px rgba(0,40,90,.45);}
.st-box .h2{margin:0 0 16px;}
.st-box .p{margin:0 auto 14px;max-width:58ch;}
.st-small{font-size:15px;}
.st-small a{color:var(--brand);font-weight:500;}
.st-ic{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 24px;border-radius:50%;
  background:linear-gradient(155deg,#00254d,#00448C 55%,#0059B2);box-shadow:0 18px 36px -16px rgba(0,40,90,.6);}
.st-ic svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.st-code{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(84px,14vw,150px);line-height:1;letter-spacing:-.04em;margin-bottom:10px;
  background:linear-gradient(155deg,#00254d,#00448C 55%,#3E8EEA);-webkit-background-clip:text;background-clip:text;color:transparent;}
.st-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 6px;padding:0;}
.st-links a{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-family:var(--dsp);font-size:14px;font-weight:600;color:var(--ink);transition:.35s var(--e);}
.st-links a:hover{background:var(--brand);border-color:var(--brand);color:#fff;}
.st-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px;}