/* ==========================================================================
   INVEST TELANGANA — About page
   Loaded after main.css. Everything here is scoped to .ab-* so the shared
   design system (tokens, header, footer, buttons, .rv motion classes) is
   reused untouched. No new tokens, no new type scale, no new palette.
   --------------------------------------------------------------------------
   01  Hero
   02  Story + oversized figures
   03  Proposition (Speed · Scale · Infrastructure)
   04  Bharat Future City
   05  Leadership
   06  Investment journey
   07  Contact
   08  Responsive
   ========================================================================== */

/* 01 ── HERO ──────────────────────────────────────────────────────────── */

/* Reuses the .hero component; the media becomes a defined editorial panel on
   the right rather than a full-bleed ground. */
.ab-hero{
  min-height:auto;
  padding-top:calc(var(--hdr-h) + var(--util-h) + clamp(2.4rem,6vw,3.5rem));
  background:
    radial-gradient(90% 70% at 88% 6%,rgba(4,131,206,.10),transparent 62%),
    radial-gradient(70% 60% at 4% 88%,rgba(6,165,25,.08),transparent 64%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}

.ab-hero__in{
  position:relative;z-index:4;
  width:var(--shell);margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-bottom:clamp(2.4rem,5vw,4rem);
}

.ab-hero__copy{display:grid;gap:clamp(1.1rem,2vw,1.6rem);justify-items:start}
.ab-hero__h{
  font-size:clamp(2.5rem,5.4vw,4.9rem);
  line-height:1.0;letter-spacing:-.038em;
}
.ab-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;padding-top:.4rem}

/* Editorial panel — the state, drawn as the page's signature device */
.ab-hero__panel{
  position:relative;
  aspect-ratio:5 / 5.4;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 74% 10%,rgba(4,131,206,.16),transparent 62%),
    radial-gradient(90% 80% at 10% 92%,rgba(6,165,25,.14),transparent 64%),
    linear-gradient(155deg,#fff 0%,var(--paper-2) 58%,var(--paper-3) 100%);
  border:1px solid var(--line);
  box-shadow:var(--sh-3);
}
.ab-hero__panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px),
    linear-gradient(180deg,var(--line-2) 1px,transparent 1px);
  background-size:calc(100% / 5) calc(100% / 6);
}
.ab-hero__map{position:absolute;inset:8% 7% 12%;z-index:1}
.ab-hero__map canvas{position:absolute;inset:0;width:100%;height:100%}

.ab-hero__geo{
  position:absolute;left:1.2rem;bottom:1.1rem;z-index:3;
  font-family:var(--f-head);font-size:.63rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-4);
}

/* stat chips floating over the panel */
.ab-hero__chip{
  position:absolute;z-index:3;
  display:grid;gap:.1rem;
  padding:.7rem .95rem;
  border-radius:12px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.ab-hero__chip b{
  font-family:var(--f-head);font-weight:700;font-size:1.22rem;
  letter-spacing:-.035em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ab-hero__chip > span{
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.ab-hero__chip--a{top:9%;right:5%}
.ab-hero__chip--b{bottom:16%;left:4%}

/* 02 ── STORY + FIGURES ───────────────────────────────────────────────── */

.ab-story{background:var(--paper);overflow:hidden}
.ab-story .aura--sky{width:52vw;height:52vw;max-width:720px;max-height:720px;right:-16vw;top:-8vw;opacity:.3}

/* A line-art ribbon along the foot of the story, bled to the left edge and
   sitting under the side column rather than the prose. It is decoration, so it
   is drawn by the sheet and carries no markup of its own. */
.ab-story::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:0;bottom:0;
  width:min(41vw,790px);aspect-ratio:4162 / 1024;
  background:url(../img/about-line.png) left bottom / contain no-repeat;
}
.ab-story .shell{position:relative;z-index:1}

.ab-story__lay{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,5rem);
}
.ab-story__side{
  position:sticky;top:calc(var(--hdr-h) + 3rem);
  display:grid;gap:1.3rem;justify-items:start;align-content:space-evenly;
}
.ab-story__h{font-size:clamp(1.9rem,3.4vw,3.15rem);line-height:1.04;letter-spacing:-.032em}

.ab-story__body{display:grid;gap:1.15rem;max-width:62ch}
.ab-story__body p{font-size:clamp(1rem,.5vw + .9rem,1.16rem);line-height:1.68;color:var(--ink-2)}

.ab-story__body b{color:var(--ink);font-weight:700}
.ab-story__close{
  margin-top:.6rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-family:var(--f-head);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.42;letter-spacing:-.022em;
  color:var(--ink);
}

/* Oversized figures — type, not cards */
.ab-figs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(3rem,6vw,5.5rem);
  border-top:1px solid var(--line);
}
.ab-fig{
  position:relative;
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1rem,2vw,2rem) 0 0;
  display:grid;gap:.5rem;align-content:start;
}
.ab-fig + .ab-fig{padding-left:clamp(1.2rem,2.4vw,2.4rem)}
.ab-fig + .ab-fig::before{
  content:"";position:absolute;left:0;top:clamp(1.6rem,2.6vw,2.4rem);bottom:.4rem;
  width:1px;background:var(--line);
}
.ab-fig__n{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2.1rem,4.2vw,3.9rem);
  line-height:.92;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  background:var(--g-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.ab-fig:nth-child(2) .ab-fig__n{background:var(--g-heat);-webkit-background-clip:text;background-clip:text}
.ab-fig__n small{font-size:.42em;font-weight:500;letter-spacing:-.01em}
.ab-fig__l{
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}

/* 03 ── PROPOSITION ───────────────────────────────────────────────────── */

.ab-prop{background:var(--paper-2);overflow:hidden;position:relative}
.ab-prop .aura--indigo{width:46vw;height:46vw;max-width:640px;max-height:640px;left:-14vw;top:18%;opacity:.22}

.ab-prop__lay{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.ab-prop__side{
  position:sticky;top:calc(var(--hdr-h) + 3.5rem);
  display:grid;gap:1.2rem;justify-items:start;align-content:start;
}
.ab-prop__h{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.05;letter-spacing:-.032em}

.ab-prop__rows{display:grid}
.ab-row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.4rem,3vw,3rem);
  align-items:start;
  padding:clamp(1.8rem,3.4vw,3rem) 0;
  border-top:1px solid var(--line);
}
.ab-row:last-child{border-bottom:1px solid var(--line)}
/* the rule lights up as the row takes focus */
.ab-row::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--g-line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--e-out);
}
.ab-row.is-on::after{transform:scaleX(1)}

.ab-row__i{
  font-family:var(--f-head);font-size:.72rem;letter-spacing:.18em;
  color:var(--ink-4);padding-top:.55rem;
  transition:color .45s;
}
.ab-row.is-on .ab-row__i{color:var(--orange)}

.ab-row__b{display:grid;gap:.75rem;max-width:60ch}
.ab-row__t{
  font-size:clamp(1.7rem,3.4vw,3.05rem);
  line-height:1.02;letter-spacing:-.036em;
  color:var(--ink-4);
  transition:color .5s var(--e-out);
}
.ab-row.is-on .ab-row__t{color:var(--ink)}
.ab-row__p{
  font-size:clamp(1rem,.5vw + .9rem,1.16rem);
  line-height:1.62;color:var(--ink-2);max-width:52ch;
}
.ab-row__m{
  display:flex;gap:1.4rem;flex-wrap:wrap;
  font-family:var(--f-head);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);padding-top:.3rem;
}
.ab-row__m span{display:inline-flex;align-items:center;gap:.5rem}
.ab-row__m i{width:6px;height:6px;border-radius:50%;background:var(--sky)}
.ab-row:nth-child(2) .ab-row__m i{background:var(--orange)}
.ab-row:nth-child(3) .ab-row__m i{background:var(--green)}

/* 04 ── BHARAT FUTURE CITY ────────────────────────────────────────────── */

.ab-city{
  position:relative;
  padding-block:0;
  background:var(--paper);
  overflow:hidden;
}
.ab-city__media{
  position:relative;
  width:100%;
  height:clamp(380px,64vh,720px);
  overflow:hidden;
  isolation:isolate;
}
.ab-city__media img{
  position:absolute;inset:0;
  width:100%;height:118%;
  object-fit:cover;object-position:50% 42%;
  will-change:transform;
}
.ab-city__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 20% 20%,rgba(4,131,206,.34),transparent 62%),
    radial-gradient(60% 60% at 88% 88%,rgba(6,165,25,.30),transparent 60%),
    linear-gradient(180deg,rgba(10,12,43,.30) 0%,rgba(10,12,43,.12) 34%,rgba(10,12,43,.62) 100%);
}
.ab-city__grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:calc(100% / 6) 25%;
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
}

/* editorial card overlapping the image */
.ab-city__panel{
  position:relative;z-index:4;
  width:var(--shell);margin-inline:auto;
  margin-top:clamp(-9rem,-11vw,-5rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-4);
  padding:clamp(1.8rem,4vw,3.4rem);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:center;
}
.ab-city__h{font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.02;letter-spacing:-.036em}
.ab-city__l{display:grid;gap:1.1rem;justify-items:start}
.ab-city__r{display:grid;gap:1.4rem}
.ab-city__r p{font-size:clamp(1rem,.5vw + .9rem,1.16rem);line-height:1.66;color:var(--ink-2)}

.ab-city__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);padding-top:1.3rem;gap:1rem;
}
.ab-city__fact{display:grid;gap:.28rem}
.ab-city__fact b{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.2rem,2vw,1.7rem);
  letter-spacing:-.04em;line-height:1;color:var(--indigo);
}
.ab-city__fact:nth-child(2) b{color:var(--sky)}
.ab-city__fact:nth-child(3) b{color:var(--green)}
.ab-city__fact > span{
  font-family:var(--f-head);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.45;
}

/* 05 ── LEADERSHIP ────────────────────────────────────────────────────── */

.ab-lead{background:var(--paper);overflow:hidden}

.ab-leads{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.8rem);
}
.ab-leadr{grid-column:auto}
/* kept for a portrait that should take two of the five */
.ab-leadr--lg{grid-column:span 2}

.ab-leadr__a{
  display:grid;gap:1.1rem;
  text-decoration:none;color:inherit;
}
.ab-leadr__fig{
  position:relative;
  aspect-ratio:4 / 5;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--paper-3);
  isolation:isolate;
}
.ab-leadr--lg .ab-leadr__fig{aspect-ratio:9/12}

.ab-leadr__fig img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;
  transition:transform 1.1s var(--e-out),filter .6s var(--e-out);
}
.ab-leadr:hover .ab-leadr__fig img{transform:scale(1.04)}

/* brand wash that lifts on hover */
.ab-leadr__fig::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 48%,rgba(10,12,43,.42) 100%);
  opacity:.9;transition:opacity .6s var(--e-out);
}
.ab-leadr:hover .ab-leadr__fig::after{opacity:.6}

.ab-leadr__i{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.16em;
  color:#fff;
  padding:.5rem .75rem;
  background:rgba(10,12,43,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom-right-radius:10px;
}
/* placeholder marker — remove data-ph when a real portrait is dropped in */
.ab-leadr__fig[data-ph]::before{
  content:attr(data-ph);
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;
  color:rgba(45,48,143,.26);
}

.ab-leadr__t{display:grid;gap:.3rem}
.ab-leadr__n{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.02rem,1.3vw,1.28rem);
  letter-spacing:-.024em;line-height:1.15;color:var(--ink);
}
.ab-leadr--lg .ab-leadr__n{font-size:clamp(1.28rem,2vw,1.85rem)}
.ab-leadr__r{
  font-size:.885rem;line-height:1.45;color:var(--ink-2);font-weight:600;
}
.ab-leadr__o{font-size:.8rem;line-height:1.45;color:var(--ink-3)}
.ab-leadr__rule{
  height:1px;background:var(--line);position:relative;overflow:hidden;
}
.ab-leadr__rule::after{
  content:"";position:absolute;inset:0;background:var(--g-line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e-out);
}
.ab-leadr:hover .ab-leadr__rule::after{transform:scaleX(1)}

/* 06 ── JOURNEY ───────────────────────────────────────────────────────── */

.ab-journey{background:var(--paper-3);overflow:hidden}

.ab-journey__lay{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.ab-journey__body{display:grid;gap:1.15rem;max-width:60ch}
.ab-journey__body p{font-size:clamp(1rem,.5vw + .9rem,1.14rem);line-height:1.66;color:var(--ink-2)}

.ab-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ab-steps__rail{
  position:absolute;z-index:0;
  left:var(--jr-x1,14px);right:var(--jr-x2,14px);top:var(--jr-y,14px);
  height:2px;background:var(--line);
}
.ab-steps__fill{
  position:absolute;inset:0;background:var(--g-line);
  transform:scaleX(0);transform-origin:0 50%;
}
.ab-step{
  position:relative;z-index:1;
  display:grid;gap:1rem;align-content:start;
  padding-right:1rem;
}
.ab-step__d{
  width:28px;height:28px;border-radius:50%;
  border:1.6px solid var(--line-3);background:var(--paper-3);
  display:grid;place-items:center;
  transition:border-color .45s,transform .5s var(--e-spring),background .45s;
}
.ab-step__d i{
  width:8px;height:8px;border-radius:50%;background:var(--line-3);
  transition:background .45s;
}
.ab-step.is-on .ab-step__d{border-color:var(--indigo);transform:scale(1.08);background:#fff}
.ab-step.is-on .ab-step__d i{background:var(--orange)}

.ab-step__t{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.32rem);letter-spacing:-.024em;
  color:var(--ink-3);transition:color .45s;
}
.ab-step.is-on .ab-step__t{color:var(--ink)}
.ab-step__p{font-size:.875rem;line-height:1.58;color:var(--ink-3);max-width:26ch}

/* 07 ── CONTACT ───────────────────────────────────────────────────────── */

.ab-contact{background:var(--paper);overflow:hidden}
.ab-contact .aura--green{width:44vw;height:44vw;max-width:600px;max-height:600px;right:-14vw;bottom:-10vw;opacity:.24}

.ab-contact__lay{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5rem);align-items:start; align-items: center;
}
.ab-contact__l{display:grid;gap:1.3rem;justify-items:start}
.ab-contact__h{font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.04;letter-spacing:-.032em}

.ab-rows{display:grid;border-top:1px solid var(--line)}
.ab-crow{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:1.2rem;
  padding:clamp(1.15rem,2vw,1.6rem) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.ab-crow::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--indigo);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--e-out);
}
.ab-crow:hover::after{transform:scaleX(1)}
.ab-crow__t{display:grid;gap:.3rem;min-width:0}
.ab-crow__k{
  font-family:var(--f-head);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-4);
  transition:color .4s;
}
.ab-crow:hover .ab-crow__k{color:var(--orange)}
.ab-crow__v{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1rem,1.5vw,1.32rem);letter-spacing:-.02em;
  color:var(--ink);word-break:break-word;
  transition:color .35s;
}
.ab-crow:hover .ab-crow__v{color:var(--indigo)}
.ab-crow__go{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-3);
  transition:background .35s,border-color .35s,color .35s,transform .45s var(--e-out);
}
.ab-crow__go svg{width:15px;height:15px}
.ab-crow:hover .ab-crow__go{
  background:var(--indigo);border-color:var(--indigo);color:#fff;transform:translateX(4px);
}

.ab-contact__note{
  display:grid;gap:.4rem;padding-top:1.6rem;
  font-size:.875rem;color:var(--ink-3);line-height:1.6;
}

/* 08 ── RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width:1240px){
  .ab-leads{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-leadr--lg{grid-column:auto}
  .ab-leadr--lg .ab-leadr__fig{aspect-ratio:4 / 5}
}

@media (max-width:1080px){
  .ab-hero__in{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
  .ab-hero__panel{max-width:520px;width:100%;margin-inline:auto;aspect-ratio:5 / 4.6}
  .ab-story__lay{grid-template-columns:1fr}
  .ab-story__side{position:relative;top:auto}
  .ab-story::after{display:none}
  .ab-prop__lay{grid-template-columns:1fr}
  .ab-prop__side{position:relative;top:auto}
  .ab-city__panel{grid-template-columns:1fr;margin-top:clamp(-5rem,-7vw,-3rem)}
  .ab-journey__lay{grid-template-columns:1fr}
  .ab-contact__lay{grid-template-columns:1fr}

  /* the journey turns vertical */
  .ab-steps{grid-template-columns:1fr;gap:0}
  .ab-steps__rail{
    left:14px;right:auto;top:var(--jr-y,14px);bottom:var(--jr-b,14px);
    width:2px;height:auto;
  }
  .ab-steps__fill{transform:scaleY(0);transform-origin:50% 0}
  .ab-step{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"dot title" ". text";
    gap:.5rem 1.1rem;
    padding:0 0 clamp(1.6rem,3vw,2.2rem);
  }
  .ab-step__d{grid-area:dot}
  .ab-step__t{grid-area:title;align-self:center}
  .ab-step__p{grid-area:text;max-width:44ch}
  .ab-step:last-child{padding-bottom:0}
}

@media (max-width:860px){
  .ab-leads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-fig:nth-child(odd){padding-left:0}
  .ab-fig:nth-child(odd)::before{display:none}
  .ab-fig:nth-child(n+3){border-top:1px solid var(--line);margin-top:.4rem}
  .ab-row{grid-template-columns:1fr;gap:.8rem}
  .ab-city__facts{grid-template-columns:1fr;gap:.9rem}
  .ab-city__media{height:clamp(300px,48vh,460px)}
  .ab-hero__chip--a{top:5%;right:4%}
  .ab-hero__chip--b{bottom:6%;left:4%}
}

@media (max-width:560px){
  .ab-leads{grid-template-columns:minmax(0,1fr)}
  .ab-leadr,.ab-leadr--lg{grid-column:auto}
  .ab-leadr__fig,.ab-leadr--lg .ab-leadr__fig{aspect-ratio:3 / 3.4}
  .ab-figs{grid-template-columns:1fr}
  .ab-fig{padding-left:0 !important}
  .ab-fig::before{display:none !important}
  .ab-fig + .ab-fig{border-top:1px solid var(--line);margin-top:.2rem}
  .ab-crow{grid-template-columns:minmax(0,1fr) auto;gap:.8rem}
  .ab-crow__go{width:36px;height:36px}
  .ab-hero__panel{aspect-ratio:5 / 5}
}

/* Motion honours the same contract as the rest of the site */
html.no-motion .ab-row__t{color:var(--ink)}
html.no-motion .ab-row::after,html.no-motion .ab-steps__fill{transform:none}
html.no-motion .ab-step__d{border-color:var(--indigo);background:#fff}
html.no-motion .ab-step__d i{background:var(--orange)}
html.no-motion .ab-step__t{color:var(--ink)}
html.no-motion .ab-city__media img{transform:none !important}