{"id":11,"date":"2026-07-06T05:11:10","date_gmt":"2026-07-06T05:11:10","guid":{"rendered":"https:\/\/vrgdigital.in\/aura\/?page_id=11"},"modified":"2026-07-07T14:38:15","modified_gmt":"2026-07-07T14:38:15","slug":"home","status":"publish","type":"page","link":"https:\/\/vrgdigital.in\/aura\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c5544b e-flex e-con-boxed e-con e-parent\" data-id=\"8c5544b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c175a1 elementor-widget elementor-widget-html\" data-id=\"2c175a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  AURAA* \u2014 HOME HERO  (goes directly under the fixed header)\n\n  Reuses the header's tokens (var(--auraa-font), var(--auraa-gutter), var(--auraa-blue)); Satoshi is\n  NOT re-imported (it loads in the header). The :root here only re-states values as a safety net.\n\n  KEY FIX vs the broken version: the header is position:fixed, so it no longer reserves space. The\n  hero therefore starts at the very top of the viewport and MUST pad itself down to clear the bar.\n  That clearance is --auraa-header-h below. If you resize the header\/logo, change ONLY that value.\n-->\n\n<style>\n:root{\n  --auraa-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --auraa-blue:   #0047AB;\n  --auraa-gutter: 5.56%;      \/* 80px on a 1440 board *\/\n  --auraa-header-h: 104px;    \/* \u2248 height of the fixed header (logo 58 + 22*2 padding) *\/\n}\n\n.auraa-hero{\n  font-family: var(--auraa-font);\n  position:relative;\n  width:100%;\n  min-height:100vh;\n  min-height:100dvh;\n  display:flex;\n  box-sizing:border-box;\n  background:#02040a\n    url('https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/hrtobg-scaled.webp')\n    center center \/ cover no-repeat;\n}\n.auraa-hero *{ box-sizing:border-box; }\n\n.auraa-hero__inner{\n  width:100%;\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  row-gap:32px;\n  \/* TOP padding clears the fixed header; sides use the shared gutter *\/\n  padding:\n    calc(var(--auraa-header-h) + clamp(20px, 3.5vh, 48px))   \/* top: header + gap *\/\n    var(--auraa-gutter)\n    clamp(40px, 7vh, 96px);                                  \/* bottom (more space under the scroll arrow) *\/\n}\n\n\/* flexible spacers auto-balance the vertical rhythm at any screen height *\/\n.auraa-hero__grow{ flex:1 1 auto; }\n\n\/* ---- Headline: left-aligned, fills the width, all caps, mixed weights ---- *\/\n.auraa-hero__title{\n  margin:0;\n  color:#ffffff;\n  text-align:center;\n  text-transform:uppercase;\n  font-family: var(--auraa-font);\n  font-weight:900;\n  font-size: clamp(34px, 8.4vw, 126px);\n  line-height:1.04;\n  letter-spacing:-0.02em;\n}\n.auraa-hero__title .hl-italic{ font-style:italic; font-weight:300; }\n.auraa-hero__title .hl-bold{   font-style:normal; font-weight:900; }\n\n\/* ---- Centered intro + button ---- *\/\n.auraa-hero__mid{ text-align:center; }\n\n.auraa-hero__sub{\n  max-width:720px;\n  margin:0 auto;\n  color:rgba(255,255,255,.82);\n  font-family: var(--auraa-font);\n  font-weight:400;\n  font-size: clamp(16px, 1.45vw, 21px);\n  line-height:1.55;\n}\n.auraa-hero__sub sup{ font-size:.6em; }\n\n.auraa-hero__cta{\n  display:inline-flex;\n  align-items:center;\n  gap:12px;\n  margin-top: clamp(24px, 3vh, 38px);\n  background:#ffffff;\n  color:#0a0a0a;\n  text-decoration:none;\n  font-family: var(--auraa-font);\n  font-weight:500;\n  font-size: clamp(15px, 1.15vw, 19px);\n  line-height:1;\n  padding:17px 34px;\n  border-radius:999px;\n  box-shadow:0 8px 30px rgba(0,0,0,.18);\n  transition: transform .2s ease, box-shadow .2s ease;\n  white-space:nowrap;\n}\n.auraa-hero__cta:hover{ transform:translateY(-1px); box-shadow:0 12px 36px rgba(0,0,0,.28); }\n.auraa-hero__cta img{ width:16px; height:16px; }\n\n\/* ---- Scroll cue ---- *\/\n.auraa-hero__scroll{\n  align-self:center;\n  padding-top:2vh;\n  animation: auraaBounce 1.9s ease-in-out infinite;\n}\n.auraa-hero__scroll svg{ display:block; }\n@keyframes auraaBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(9px);} }\n@media (prefers-reduced-motion: reduce){ .auraa-hero__scroll{ animation:none; } }\n\n\/* ---- Responsive ---- *\/\n@media (max-width:1100px){\n  :root{ --auraa-header-h: 88px; }\n}\n@media (max-width:768px){\n  :root{ --auraa-header-h: 80px; }\n  .auraa-hero__title{ font-size: clamp(30px, 11.5vw, 82px); }\n  .auraa-hero__sub{ font-size:16px; }\n}\n<\/style>\n\n<section class=\"auraa-hero\">\n  <div class=\"auraa-hero__inner\">\n\n    <h1 class=\"auraa-hero__title\">\n      <span class=\"hl-italic\">We<\/span> <span class=\"hl-bold\">Create<\/span> <span class=\"hl-bold\">Brands<\/span><br>\n      <span class=\"hl-italic\">That Stand<\/span> <span class=\"hl-bold\">Out<\/span>\n    <\/h1>\n\n   \n\n    <div class=\"auraa-hero__mid\">\n      <p class=\"auraa-hero__sub\">\n        Auraa<sup>*<\/sup> is a strategy-first digital agency. We build brand identity, digital\n        infrastructure, and growth systems designed to work together\n      <\/p>\n      <a class=\"auraa-hero__cta\" href=\"https:\/\/vrgdigital.in\/aura\/our-work\/\">\n        See What We've Built\n        <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/arrowblack.svg\" alt=\"\">\n      <\/a>\n    <\/div>\n\n    \n\n    <div class=\"auraa-hero__scroll\" aria-hidden=\"true\">\n      <svg width=\"18\" height=\"40\" viewBox=\"0 0 18 40\" fill=\"none\"\n           stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 2 V35\"\/>\n        <path d=\"M2 28 L9 36 L16 28\"\/>\n      <\/svg>\n    <\/div>\n\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2056288 e-flex e-con-boxed e-con e-parent\" data-id=\"2056288\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6987cef elementor-widget elementor-widget-html\" data-id=\"6987cef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  AURAA* \u2014 SECTION 01 \/ ABOUT  (white panel that rises OVER the hero on scroll)\n\n  \u2500\u2500 HOW THE \"COMES UP OVER THE HERO\" EFFECT WORKS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  The hero must stay pinned while this panel scrolls up on top of it. Two parts:\n\n   1) In the HERO widget, make the hero sticky + put it BEHIND. Change:\n          .auraa-hero{  position:relative;  ...  }\n      to:\n          .auraa-hero{  position:sticky; top:0; z-index:1;  ... }\n\n   2) This panel is already position:relative; z-index:2; background:#fff  \u2192 it slides\n      up and covers the pinned hero. IMPORTANT: give EVERY following full-width section\n      the same  position:relative; z-index:2;  so the pinned hero always stays behind\n      them (otherwise it can re-appear over later sections). I'll bake z-index:2 into\n      each new section from here on.\n\n  Reuses the shared tokens (font, gutter, blue) and --auraa-header-h from the header\/hero.\n-->\n\n<style>\n:root{\n  --auraa-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --auraa-blue:   #0047AB;\n  --auraa-ink:    #0a0a0a;\n  --auraa-gutter: 5.56%;\n  --auraa-header-h: 104px;   \/* keep in sync with the header height *\/\n}\n\n.auraa-about{\n  position:relative;\n  z-index:2;               \/* sits above the pinned hero *\/\n  background:#ffffff;\n  font-family: var(--auraa-font);\n  box-sizing:border-box;\n}\n.auraa-about *{ box-sizing:border-box; }\n\n.auraa-about__inner{\n  min-height:100vh;        \/* tall enough to fully cover the hero *\/\n  display:flex;\n  flex-direction:column;\n  \/* top padding clears the fixed header so the divider sits right under it *\/\n  padding: calc(var(--auraa-header-h) + 26px) var(--auraa-gutter) clamp(56px, 9vh, 110px);\n}\n\n\/* ---- Label row : * (01) .......... (About Us) ---- *\/\n.auraa-about__label{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  padding-top:20px;\n  border-top:1px solid rgba(0,0,0,.12);\n  color: var(--auraa-blue);\n  font-family: var(--auraa-font);\n  font-weight:500;\n  font-size: clamp(15px, 1.1vw, 18px);\n  letter-spacing:.02em;\n}\n.auraa-about__index{ display:inline-flex; align-items:center; gap:10px; }\n.auraa-about__spin{\n  width:20px; height:20px; display:block;\n  animation: auraaSpin 4s linear infinite;\n}\n@keyframes auraaSpin{ to{ transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce){ .auraa-about__spin{ animation:none; } }\n\n\/* ---- Centered statement + button (vertically centered in the panel) ---- *\/\n.auraa-about__body{ margin:auto 0; text-align:center; }\n\n.auraa-about__statement{\n  max-width:1120px;\n  margin:0 auto;\n  color: var(--auraa-ink);\n  font-family: var(--auraa-font);\n  font-weight:700;\n  font-size: clamp(26px, 3.4vw, 50px);\n  line-height:1.25;\n  letter-spacing:-0.01em;\n}\n.auraa-about__statement sup{ font-size:.55em; }\n\/* each word starts at 10% black and fills to solid black on scroll (set by JS) *\/\n.auraa-about__statement .w{ color: rgba(0,0,0,.10); }\n\n.auraa-about__cta{\n  display:inline-flex;\n  align-items:center;\n  gap:12px;\n  margin-top: clamp(38px, 6.5vh, 88px);\n  background: var(--auraa-ink);\n  color:#fff;\n  text-decoration:none;\n  font-family: var(--auraa-font);\n  font-weight:500;\n  font-size: clamp(15px, 1.1vw, 18px);\n  line-height:1;\n  padding:17px 34px;\n  border-radius:999px;\n  transition: transform .2s ease, box-shadow .2s ease;\n  white-space:nowrap;\n}\n.auraa-about__cta:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.22); }\n.auraa-about__cta img{ width:16px; height:16px; filter: brightness(0) invert(1); }\n\n@media (max-width:1100px){ :root{ --auraa-header-h:88px; } }\n@media (max-width:768px){\n  :root{ --auraa-header-h:80px; }\n  .auraa-about__statement{ font-size: clamp(22px, 6vw, 34px); }\n}\n<\/style>\n\n<section class=\"auraa-about\">\n  <div class=\"auraa-about__inner\">\n\n    <div class=\"auraa-about__label\">\n      <span class=\"auraa-about__index\">\n        <img decoding=\"async\" class=\"auraa-about__spin\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n        (01)\n      <\/span>\n      <span class=\"auraa-about__name\">(About Us)<\/span>\n    <\/div>\n\n    <div class=\"auraa-about__body\">\n      <p class=\"auraa-about__statement\">\n        Auraa<sup>*<\/sup> grew out of Auraa Digital. In our first year of client work, a pattern\n        kept appearing across every industry we worked in \u2014 F&amp;B, healthcare, travel, interiors,\n        financial technology.\n      <\/p>\n      <a class=\"auraa-about__cta\" href=\"https:\/\/vrgdigital.in\/aura\/about-us\/\">\n        About Us\n        <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rightarrow.svg\" alt=\"\">\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var el = document.querySelector('.auraa-about__statement');\n  if (!el) return;\n\n  \/\/ Split the statement into words so each can fill independently.\n  var words = el.textContent.trim().split(\/\\s+\/);\n  function esc(s){ return s.replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;'); }\n  el.innerHTML = words.map(function(w){ return '<span class=\"w\">' + esc(w) + '<\/span>'; }).join(' ');\n  var spans = el.querySelectorAll('.w');\n  var N = spans.length;\n\n  \/\/ Reduced motion \u2192 just show the finished (solid black) text.\n  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    spans.forEach(function(s){ s.style.color = '#000'; });\n    return;\n  }\n\n  var ticking = false;\n  function paint(){\n    ticking = false;\n    var vh   = window.innerHeight;\n    var top  = el.getBoundingClientRect().top;\n    \/\/ progress 0 \u2192 1 as the text travels from ~90% down the viewport up to ~30%\n    var p = (vh * 0.9 - top) \/ (vh * 0.6);\n    p = p < 0 ? 0 : (p > 1 ? 1 : p);\n    for (var i = 0; i < N; i++){\n      var f = p * N - i;                 \/\/ this word's fill amount\n      f = f < 0 ? 0 : (f > 1 ? 1 : f);\n      var a = 0.1 + 0.9 * f;             \/\/ 10% black \u2192 100% black\n      spans[i].style.color = 'rgba(0,0,0,' + a.toFixed(3) + ')';\n    }\n  }\n  function onScroll(){ if (!ticking){ ticking = true; requestAnimationFrame(paint); } }\n\n  paint();\n  window.addEventListener('scroll', onScroll, { passive:true });\n  window.addEventListener('resize', onScroll);\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9e207d6 e-flex e-con-boxed e-con e-parent\" data-id=\"9e207d6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44a04d4 elementor-widget elementor-widget-html\" data-id=\"44a04d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  AURAA* \u2014 SECTION 02 \/ WHAT WE DO  (accordion on the beige background)\n\n  Sits above the pinned hero \u2192 position:relative; z-index:2 (keep this on every section after the hero).\n  All items start CLOSED (dark bars, + icon). Click a bar to open it (turns blue, shows the copy +\n  service tags, icon becomes \u00d7). Items toggle independently, so several can be open at once.\n\n  Reuses shared tokens (font, gutter, blue). Icons use your open.svg \/ close.svg as-is (assumed to be\n  the full boxed icon). If those files are just the glyph without the dark square, tell me and I'll box them.\n-->\n\n<style>\n:root{\n  --auraa-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --auraa-blue:   #0047AB;\n  --auraa-gutter: 5.56%;\n  --tab-blue: #2952CC;   \/* accordion open colour (brighter than brand blue; change if you like) *\/\n  --tab-dark: #1b1b1d;   \/* accordion closed colour *\/\n  --tab-pad: clamp(20px, 2.2vw, 30px);\n}\n\n.auraa-do{\n  position:relative;\n  z-index:2;\n  background:#E4E2DD;\n  font-family: var(--auraa-font);\n  box-sizing:border-box;\n}\n.auraa-do *{ box-sizing:border-box; }\n\n.auraa-do__inner{\n  padding: clamp(60px, 8vh, 110px) var(--auraa-gutter) clamp(70px, 10vh, 130px);\n}\n\n\/* ---- Label row : \u2731 (02) .......... (What We Do) ---- *\/\n.auraa-do__label{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  padding-top:20px;\n  border-top:1px solid rgba(0,0,0,.14);\n  color: var(--auraa-blue);\n  font-weight:500;\n  font-size: clamp(15px, 1.1vw, 18px);\n  letter-spacing:.02em;\n}\n.auraa-do__index{ display:inline-flex; align-items:center; gap:10px; }\n.auraa-do__spin{ width:20px; height:20px; display:block; animation: auraaSpin 4s linear infinite; }\n@keyframes auraaSpin{ to{ transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce){ .auraa-do__spin{ animation:none; } }\n\n\/* ---- Heading ---- *\/\n.auraa-do__title{\n  margin: clamp(34px, 5vh, 64px) 0 clamp(40px, 6vh, 74px);\n  color:#0a0a0a;\n  font-weight:700;\n  font-size: clamp(30px, 4.2vw, 58px);\n  line-height:1.08;\n  letter-spacing:-0.01em;\n}\n\/* heading reveal: each line unveils top\u2192bottom via a clip wipe (armed by JS) *\/\n.auraa-do__title .rl{ display:block; }\n.auraa-do__title.reveal-armed .rl{\n  clip-path: inset(0 0 100% 0);\n  will-change: clip-path;\n  transition: clip-path .9s cubic-bezier(.22, 1, .36, 1);\n}\n.auraa-do__title.reveal-armed .rl:nth-child(2){ transition-delay:.13s; }\n.auraa-do__title.reveal-armed.is-revealed .rl{ clip-path: inset(0 0 0 0); }\n\n\/* ---- Accordion ---- *\/\n.auraa-do__list{ display:flex; flex-direction:column; gap:10px; }\n\n.tab{ display:flex; align-items:stretch; gap:8px; }\n\n.tab__left{\n  flex:0 0 clamp(120px, 14%, 200px);\n  display:flex; align-items:center; gap:10px;\n  padding-left: var(--tab-pad);\n  border-radius:8px;\n  background: var(--tab-dark);\n  cursor:pointer;\n  transition: background .3s ease;\n}\n.tab__star{ width:22px; height:22px; display:block; filter:brightness(0) invert(1); opacity:.5; }\n.tab__no{ color:rgba(255,255,255,.5); font-size: clamp(24px, 2.8vw, 42px); font-weight:400; line-height:1; }\n\n.tab__right{\n  flex:1 1 auto;\n  min-width:0;\n  border-radius:8px;\n  background: var(--tab-dark);\n  overflow:hidden;\n  transition: background .3s ease;\n}\n\n.tab__head{\n  width:100%;\n  display:flex; align-items:center; justify-content:space-between; gap:16px;\n  padding: var(--tab-pad);\n  background:transparent; border:0; cursor:pointer;\n  font-family: var(--auraa-font);\n  text-align:left;\n}\n.tab__title{ margin:0; color:#fff; font-weight:700; font-size: clamp(22px, 2.2vw, 32px); line-height:1.1; }\n\n.tab__icon{ flex:0 0 auto; }\n.tab__icon img{ width:40px; height:40px; display:block; }\n.tab__icon .ic-close{ display:none; }\n\n\/* Panel (animated open\/close via JS max-height) *\/\n.tab__panel{ max-height:0; overflow:hidden; transition: max-height .45s ease; }\n.tab__panel-inner{ padding: 2px var(--tab-pad) calc(var(--tab-pad) + 4px); }\n\n.tab__desc{\n  margin:0 0 clamp(18px, 2.4vh, 30px);\n  max-width:900px;\n  color: rgba(255,255,255,.82);\n  font-weight:400;\n  font-size: clamp(15px, 1.15vw, 18px);\n  line-height:1.55;\n}\n.tab__desc sup{ font-size:.6em; }\n\n.tab__tags{ display:flex; flex-wrap:wrap; gap:10px; }\n.tab__tags span{\n  background: var(--tab-dark);\n  color:#fff;\n  font-size: clamp(13px, .95vw, 15px);\n  font-weight:400;\n  padding:9px 15px;\n  border-radius:5px;\n  white-space:nowrap;\n}\n\n\/* ---- OPEN state ---- *\/\n.tab.is-open .tab__left,\n.tab.is-open .tab__right{ background: var(--tab-blue); }\n.tab.is-open .tab__icon .ic-open{ display:none; }\n.tab.is-open .tab__icon .ic-close{ display:block; }\n\/* keep tag pills dark against the blue panel *\/\n.tab.is-open .tab__tags span{ background: var(--tab-dark); }\n\n\/* hover polish on closed bars *\/\n.tab:not(.is-open) .tab__left:hover,\n.tab:not(.is-open) .tab__right:hover{ background:#262628; }\n\n@media (max-width:768px){\n  .tab__left{ flex-basis: 84px; padding-left:16px; }\n  .tab__no{ font-size:24px; }\n  .auraa-do__title{ font-size: clamp(26px, 7vw, 40px); }\n}\n<\/style>\n\n<section class=\"auraa-do\">\n  <div class=\"auraa-do__inner\">\n\n    <div class=\"auraa-do__label\">\n      <span class=\"auraa-do__index\">\n        <img decoding=\"async\" class=\"auraa-do__spin\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n        (02)\n      <\/span>\n      <span class=\"auraa-do__name\">(What We Do)<\/span>\n    <\/div>\n\n    <h2 class=\"auraa-do__title\">\n      <span class=\"rl\">Three Layers. One System.<\/span>\n      <span class=\"rl\">Built to Compound.<\/span>\n    <\/h2>\n\n    <div class=\"auraa-do__list\">\n\n      <!-- 01 Brand -->\n      <article class=\"tab\">\n        <div class=\"tab__left\">\n          <img decoding=\"async\" class=\"tab__star\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n          <span class=\"tab__no\">01<\/span>\n        <\/div>\n        <div class=\"tab__right\">\n          <button class=\"tab__head\" type=\"button\" aria-expanded=\"false\">\n            <h3 class=\"tab__title\">Brand<\/h3>\n            <span class=\"tab__icon\">\n              <img decoding=\"async\" class=\"ic-open\"  src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/open.svg\"  alt=\"Expand\">\n              <img decoding=\"async\" class=\"ic-close\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/close.svg\" alt=\"Collapse\">\n            <\/span>\n          <\/button>\n          <div class=\"tab__panel\">\n            <div class=\"tab__panel-inner\">\n              <p class=\"tab__desc\">Auraa<sup>*<\/sup> is a strategy-first digital agency. We build brand identity, digital infrastructure, and growth systems designed to work together<\/p>\n              <div class=\"tab__tags\">\n                <span>Brand Identity<\/span>\n                <span>Visual Identity Systems<\/span>\n                <span>Brand Positioning<\/span>\n                <span>Brand Communication<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <!-- 02 Digital -->\n      <article class=\"tab\">\n        <div class=\"tab__left\">\n          <img decoding=\"async\" class=\"tab__star\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n          <span class=\"tab__no\">02<\/span>\n        <\/div>\n        <div class=\"tab__right\">\n          <button class=\"tab__head\" type=\"button\" aria-expanded=\"false\">\n            <h3 class=\"tab__title\">Digital<\/h3>\n            <span class=\"tab__icon\">\n              <img decoding=\"async\" class=\"ic-open\"  src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/open.svg\"  alt=\"Expand\">\n              <img decoding=\"async\" class=\"ic-close\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/close.svg\" alt=\"Collapse\">\n            <\/span>\n          <\/button>\n          <div class=\"tab__panel\">\n            <div class=\"tab__panel-inner\">\n              <p class=\"tab__desc\">A website that was not built with strategy behind it does not convert. A platform not built to scale will need to be rebuilt when you grow.<\/p>\n              <div class=\"tab__tags\">\n                <span>UI\/UX Design<\/span>\n                <span>Website Design and Development<\/span>\n                <span>Website Maintenance<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <!-- 03 Growth -->\n      <article class=\"tab\">\n        <div class=\"tab__left\">\n          <img decoding=\"async\" class=\"tab__star\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n          <span class=\"tab__no\">03<\/span>\n        <\/div>\n        <div class=\"tab__right\">\n          <button class=\"tab__head\" type=\"button\" aria-expanded=\"false\">\n            <h3 class=\"tab__title\">Growth<\/h3>\n            <span class=\"tab__icon\">\n              <img decoding=\"async\" class=\"ic-open\"  src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/open.svg\"  alt=\"Expand\">\n              <img decoding=\"async\" class=\"ic-close\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/close.svg\" alt=\"Collapse\">\n            <\/span>\n          <\/button>\n          <div class=\"tab__panel\">\n            <div class=\"tab__panel-inner\">\n              <p class=\"tab__desc\">Every growth service at Auraa<sup>*<\/sup> is connected to your brand and built on your digital infrastructure. So every rupee spent is working within a system \u2014 not in isolation.<\/p>\n              <div class=\"tab__tags\">\n                <span>Social Media Strategy and Management<\/span>\n                <span>Search Engine Optimisation<\/span>\n                <span>Content Marketing<\/span>\n                <span>Paid Advertising \u2014 Meta and Google<\/span>\n                <span>Email Marketing<\/span>\n                <span>Influencer Strategies<\/span>\n                <span>Online Reputation Management<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var tabs = document.querySelectorAll('.auraa-do .tab');\n\n  function openTab(tab){\n    var head  = tab.querySelector('.tab__head');\n    var panel = tab.querySelector('.tab__panel');\n    tab.classList.add('is-open');\n    head.setAttribute('aria-expanded','true');\n    panel.style.maxHeight = panel.scrollHeight + 'px';\n    panel.addEventListener('transitionend', function te(){\n      if (tab.classList.contains('is-open')) panel.style.maxHeight = 'none';\n      panel.removeEventListener('transitionend', te);\n    });\n  }\n  function closeTab(tab){\n    var head  = tab.querySelector('.tab__head');\n    var panel = tab.querySelector('.tab__panel');\n    tab.classList.remove('is-open');\n    head.setAttribute('aria-expanded','false');\n    panel.style.maxHeight = panel.scrollHeight + 'px';   \/\/ fix current height...\n    requestAnimationFrame(function(){ panel.style.maxHeight = '0px'; }); \/\/ ...then collapse\n  }\n  function toggle(tab){ tab.classList.contains('is-open') ? closeTab(tab) : openTab(tab); }\n\n  tabs.forEach(function(tab){\n    tab.querySelector('.tab__head').addEventListener('click', function(){ toggle(tab); });\n    tab.querySelector('.tab__left').addEventListener('click', function(){ toggle(tab); });\n  });\n\n  \/\/ keep open panels sized correctly on resize\n  window.addEventListener('resize', function(){\n    tabs.forEach(function(tab){\n      if (tab.classList.contains('is-open')){\n        var panel = tab.querySelector('.tab__panel');\n        panel.style.maxHeight = 'none';\n        var h = panel.scrollHeight;\n        panel.style.maxHeight = h + 'px';\n      }\n    });\n  });\n\n  \/\/ ---- Heading reveal: top-to-bottom clip wipe when it scrolls into view ----\n  var heading = document.querySelector('.auraa-do__title');\n  if (heading && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    heading.classList.add('reveal-armed');\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if (en.isIntersecting){ heading.classList.add('is-revealed'); io.unobserve(heading); }\n      });\n    }, { threshold: 0.3 });\n    io.observe(heading);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f2843ea e-flex e-con-boxed e-con e-parent\" data-id=\"f2843ea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1499eb elementor-widget elementor-widget-html\" data-id=\"c1499eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  AURAA* \u2014 SECTION 03 \/ FEATURED WORK  (client-logo marquee)\n\n  Sits above the pinned hero \u2192 position:relative; z-index:2.\n  Heading uses the SAME top-to-bottom clip reveal we standardised in Section 02 (reuse this block on\n  every heading going forward: wrap each line in <span class=\"rl\">, add the .reveal-armed CSS, and the\n  little IntersectionObserver at the bottom).\n\n  Logos l1\u2013l16 scroll in an infinite loop. The set is duplicated once so the loop is seamless; the\n  animation moves the track by exactly one copy width (-50%). Hover pauses it; reduced-motion stops it.\n-->\n\n<style>\n:root{\n  --auraa-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --auraa-blue:   #0047AB;\n  --auraa-gutter: 5.56%;\n}\n\n.auraa-work{\n  position:relative;\n  z-index:2;\n  background:#ffffff;\n  font-family: var(--auraa-font);\n  box-sizing:border-box;\n  overflow:hidden;               \/* clips the marquee overflow *\/\n  padding-bottom: clamp(60px, 9vh, 120px);\n}\n.auraa-work *{ box-sizing:border-box; }\n\n.auraa-work__inner{\n  padding: clamp(60px, 8vh, 110px) var(--auraa-gutter) 0;\n}\n\n\/* ---- Label row : \u2731 (03) .......... (Featured Work) ---- *\/\n.auraa-work__label{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  padding-top:20px;\n  border-top:1px solid rgba(0,0,0,.12);\n  color: var(--auraa-blue);\n  font-weight:500;\n  font-size: clamp(15px, 1.1vw, 18px);\n  letter-spacing:.02em;\n}\n.auraa-work__index{ display:inline-flex; align-items:center; gap:10px; }\n.auraa-work__spin{ width:20px; height:20px; display:block; animation: auraaSpin 4s linear infinite; }\n@keyframes auraaSpin{ to{ transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce){ .auraa-work__spin{ animation:none; } }\n\n\/* ---- Heading (with reusable top\u2192bottom reveal) ---- *\/\n.auraa-work__title{\n  margin: clamp(34px, 5vh, 62px) 0 clamp(44px, 7vh, 90px);\n  color:#0a0a0a;\n  font-weight:700;\n  font-size: clamp(28px, 4vw, 56px);\n  line-height:1.1;\n  letter-spacing:-0.01em;\n}\n.auraa-work__title sup{ font-size:.55em; }\n.auraa-work__title .rl{ display:block; }\n.auraa-work__title.reveal-armed .rl{\n  clip-path: inset(0 0 100% 0);\n  will-change: clip-path;\n  transition: clip-path .9s cubic-bezier(.22, 1, .36, 1);\n}\n.auraa-work__title.reveal-armed.is-revealed .rl{ clip-path: inset(0 0 0 0); }\n\n\/* ---- Logo marquee ---- *\/\n.marquee{\n  width:100%;\n  overflow:hidden;\n  \/* soft fade on the left & right edges so logos melt in\/out *\/\n  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);\n          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);\n}\n.marquee__track{\n  display:flex;\n  align-items:center;\n  width:max-content;\n  animation: auraaMarquee 45s linear infinite;\n}\n.marquee:hover .marquee__track{ animation-play-state:paused; }\n.marquee__track img{\n  width:141px;\n  height:130px;\n  object-fit:contain;\n  flex:0 0 auto;\n  margin-right: clamp(8px, 1vw, 22px);\n}\n@media (max-width:768px){\n  .marquee__track img{ width:106px; height:98px; margin-right:14px; }\n}\n@keyframes auraaMarquee{\n  from{ transform: translateX(0); }\n  to{   transform: translateX(-50%); }\n}\n@media (prefers-reduced-motion: reduce){\n  .marquee__track{ animation:none; flex-wrap:wrap; gap:32px 60px; justify-content:center; }\n}\n<\/style>\n\n<section class=\"auraa-work\">\n  <div class=\"auraa-work__inner\">\n    <div class=\"auraa-work__label\">\n      <span class=\"auraa-work__index\">\n        <img decoding=\"async\" class=\"auraa-work__spin\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n        (03)\n      <\/span>\n      <span class=\"auraa-work__name\">(Featured Work)<\/span>\n    <\/div>\n\n    <h2 class=\"auraa-work__title\">\n      <span class=\"rl\">Brands That Have Trusted Auraa<sup>*<\/sup><\/span>\n    <\/h2>\n  <\/div>\n\n  <div class=\"marquee\" aria-label=\"Brands that have trusted Auraa\">\n    <div class=\"marquee__track\">\n      <!-- set 1 -->\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l1.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l2.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l3.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l4.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l5.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l6.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l7.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l8.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l9.png\"  alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l10.png\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l11.png\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l12.png\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l13.png\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l14.png\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l15.png\" alt=\"\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l16.png\" alt=\"\">\n      <!-- set 2 (duplicate for seamless loop) -->\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l1.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l2.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l3.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l4.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l5.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l6.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l7.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l8.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l9.png\"  alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l10.png\" alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l11.png\" alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l12.png\" alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l13.png\" alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l14.png\" alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l15.png\" alt=\"\" aria-hidden=\"true\">\n      <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/l16.png\" alt=\"\" aria-hidden=\"true\">\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var h = document.querySelector('.auraa-work__title');\n  if (h && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    h.classList.add('reveal-armed');\n    var io = new IntersectionObserver(function(es){\n      es.forEach(function(e){\n        if (e.isIntersecting){ h.classList.add('is-revealed'); io.unobserve(h); }\n      });\n    }, { threshold: 0.4 });\n    io.observe(h);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0966c2c e-flex e-con-boxed e-con e-parent\" data-id=\"0966c2c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e477ff8 elementor-widget elementor-widget-html\" data-id=\"e477ff8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n:root{\n  --auraa-font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;\n  --auraa-blue:#0047AB;\n  --auraa-gutter:5.56%;\n}\n.auraa-cases{\n  background:#E4E2DD;\n  font-family:var(--auraa-font);\n  margin-bottom:0;\n  padding-bottom:0;\n}\n.auraa-cases__inner{\n  padding: clamp(60px,8vh,110px) var(--auraa-gutter) 0;\n}\n.auraa-cases__label{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  padding-top:20px;\n  border-top:1px solid rgba(0,0,0,.14);\n  color:var(--auraa-blue);\n  font-weight:500;\n  font-size:clamp(15px,1.1vw,18px);\n  letter-spacing:.02em;\n}\n.auraa-cases__index{\n  display:flex;\n  align-items:center;\n  gap:10px;\n}\n.auraa-cases__spin{\n  width:20px;\n  height:20px;\n  animation:auraaSpin 4s linear infinite;\n}\n@keyframes auraaSpin{\n  to{ transform:rotate(360deg); }\n}\n.auraa-cases__title{\n  margin:clamp(34px,5vh,62px) 0 0;\n  color:#0a0a0a;\n  font-weight:700;\n  font-size:clamp(28px,4vw,56px);\n  line-height:1.1;\n  letter-spacing:-0.01em;\n}\n.auraa-cases__title .rl{\n  display:block;\n}\n.auraa-cases__title.reveal-armed .rl{\n  clip-path:inset(0 0 100% 0);\n  transition:clip-path .9s cubic-bezier(.22,1,.36,1);\n}\n.auraa-cases__title.reveal-armed .rl:nth-child(2){\n  transition-delay:.13s;\n}\n.auraa-cases__title.reveal-armed.is-revealed .rl{\n  clip-path:inset(0 0 0 0);\n}\n@media (prefers-reduced-motion: reduce){\n  .auraa-cases__spin{\n    animation:none;\n  }\n}\n<\/style>\n<section class=\"auraa-cases\">\n  <div class=\"auraa-cases__inner\">\n    <div class=\"auraa-cases__label\">\n      <span class=\"auraa-cases__index\">\n        <img decoding=\"async\" \n          class=\"auraa-cases__spin\" \n          src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" \n          alt=\"\"\n        >\n        (04)\n      <\/span>\n      <span>(What We Do)<\/span>\n    <\/div>\n    <h2 class=\"auraa-cases__title\">\n      <span class=\"rl\">The Foundation Was Right.<\/span>\n      <span class=\"rl\">Here Is What Happened.<\/span>\n    <\/h2>\n  <\/div>\n<\/section>\n<script>\n(function(){\n  const title = document.querySelector('.auraa-cases__title');\n  if(\n    title &&\n    !window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  ){\n    title.classList.add('reveal-armed');\n    const observer = new IntersectionObserver((entries)=>{\n      entries.forEach((entry)=>{\n        if(entry.isIntersecting){\n          title.classList.add('is-revealed');\n          observer.unobserve(title);\n        }\n      });\n    }, {\n      threshold:0.3\n    });\n    observer.observe(title);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-867378e e-flex e-con-boxed e-con e-parent\" data-id=\"867378e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-947ea46 elementor-widget elementor-widget-shortcode\" data-id=\"947ea46\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"auraa-cases__grid\">\t\t<a class=\"case\" href=\"https:\/\/vrgdigital.in\/aura\/case-studies\/the-gynecology-collective\/\" aria-label=\"THE GYNECOLOGY COLLECTIVE case study\">\n\t\t\t<div class=\"case__media\"><img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/gy-thumb.png\" alt=\"\" loading=\"lazy\"><\/div>\n\t\t\t<div class=\"case__grad\"><\/div>\n\t\t\t<div class=\"case__foot\">\n\t\t\t\t<h3 class=\"case__title\">THE GYNECOLOGY COLLECTIVE<\/h3>\n\t\t\t\t<div class=\"case__tags\"><span>Brand<\/span><span>Website<\/span><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"case__hover\">\n\t\t\t\t<img decoding=\"async\" class=\"case__logo\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/gy-logo.png\" alt=\"\">\t\t\t\t<span class=\"case__badge\">View Case Study<\/span>\n\t\t\t<\/div>\n\t\t<\/a>\n\t\t\t\t<a class=\"case\" href=\"https:\/\/vrgdigital.in\/aura\/case-studies\/mainland-madras-uk\/\" aria-label=\"MAINLAND MADRAS UK case study\">\n\t\t\t<div class=\"case__media\"><img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/mainland-1.png\" alt=\"\" loading=\"lazy\"><\/div>\n\t\t\t<div class=\"case__grad\"><\/div>\n\t\t\t<div class=\"case__foot\">\n\t\t\t\t<h3 class=\"case__title\">MAINLAND MADRAS UK<\/h3>\n\t\t\t\t<div class=\"case__tags\"><span>Social<\/span><span>SEO<\/span><span>Website Management<\/span><span>Paid Advertising<\/span><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"case__hover\">\n\t\t\t\t<img decoding=\"async\" class=\"case__logo\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/mainland-logo.png\" alt=\"\">\t\t\t\t<span class=\"case__badge\">View Case Study<\/span>\n\t\t\t<\/div>\n\t\t<\/a>\n\t\t\t\t<a class=\"case\" href=\"https:\/\/vrgdigital.in\/aura\/case-studies\/madras-machans\/\" aria-label=\"Madras Machans case study\">\n\t\t\t<div class=\"case__media\"><img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/madras-thumb.png\" alt=\"\" loading=\"lazy\"><\/div>\n\t\t\t<div class=\"case__grad\"><\/div>\n\t\t\t<div class=\"case__foot\">\n\t\t\t\t<h3 class=\"case__title\">Madras Machans<\/h3>\n\t\t\t\t<div class=\"case__tags\"><span>Social<\/span><span>Paid Advertising<\/span><span>Influencer<\/span><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"case__hover\">\n\t\t\t\t<img decoding=\"async\" class=\"case__logo\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/machans-logo.png\" alt=\"\">\t\t\t\t<span class=\"case__badge\">View Case Study<\/span>\n\t\t\t<\/div>\n\t\t<\/a>\n\t\t\t\t<a class=\"case\" href=\"https:\/\/vrgdigital.in\/aura\/case-studies\/chitra-rasna-arts\/\" aria-label=\"CHITRA RASNA ARTS case study\">\n\t\t\t<div class=\"case__media\"><img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/chitrathumb.png\" alt=\"\" loading=\"lazy\"><\/div>\n\t\t\t<div class=\"case__grad\"><\/div>\n\t\t\t<div class=\"case__foot\">\n\t\t\t\t<h3 class=\"case__title\">CHITRA RASNA ARTS<\/h3>\n\t\t\t\t<div class=\"case__tags\"><span>Brand<\/span><span>Website<\/span><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"case__hover\">\n\t\t\t\t<img decoding=\"async\" class=\"case__logo\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/chitralogo.png\" alt=\"\">\t\t\t\t<span class=\"case__badge\">View Case Study<\/span>\n\t\t\t<\/div>\n\t\t<\/a>\n\t\t<\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14e36eb e-flex e-con-boxed e-con e-parent\" data-id=\"14e36eb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f23a658 elementor-widget elementor-widget-html\" data-id=\"f23a658\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  AURAA* \u2014 SECTION 05 \/ WHY AURAA  (5 reason cards, white \u2192 blue on hover)\n\n  position:relative; z-index:2 keeps it above the pinned hero.\n  Heading uses the standard top\u2192bottom reveal. Cards: number+asterisk on top, title\/desc on the\n  bottom; on hover the card turns blue and all text goes white.\n-->\n\n<style>\n:root{\n  --auraa-font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;\n  --auraa-blue:#0047AB;\n  --auraa-gutter:5.56%;\n  --why-blue:#0047AB;   \/* card hover colour *\/\n}\n.auraa-why{\n  position:relative; z-index:2;\n  background:#ffffff;\n  font-family:var(--auraa-font);\n  box-sizing:border-box;\n}\n.auraa-why *{ box-sizing:border-box; }\n.auraa-why__inner{ padding: clamp(60px,8vh,110px) var(--auraa-gutter) clamp(70px,10vh,130px); }\n\n\/* label row *\/\n.auraa-why__label{\n  display:flex; align-items:center; justify-content:space-between; gap:16px;\n  padding-top:20px; border-top:1px solid rgba(0,0,0,.12);\n  color:var(--auraa-blue); font-weight:500; font-size:clamp(15px,1.1vw,18px); letter-spacing:.02em;\n}\n.auraa-why__index{ display:inline-flex; align-items:center; gap:10px; }\n.auraa-why__spin{ width:20px; height:20px; display:block; animation:auraaSpin 4s linear infinite; }\n@keyframes auraaSpin{ to{ transform:rotate(360deg); } }\n@media (prefers-reduced-motion: reduce){ .auraa-why__spin{ animation:none; } }\n\n\/* heading + reveal *\/\n.auraa-why__title{\n  margin: clamp(34px,5vh,62px) 0 clamp(40px,6vh,72px);\n  color:#0a0a0a; font-weight:700; font-size:clamp(28px,4vw,56px); line-height:1.1; letter-spacing:-0.01em;\n}\n.auraa-why__title .rl{ display:block; }\n.auraa-why__title.reveal-armed .rl{ clip-path:inset(0 0 100% 0); will-change:clip-path; transition:clip-path .9s cubic-bezier(.22,1,.36,1); }\n.auraa-why__title.reveal-armed .rl:nth-child(2){ transition-delay:.13s; }\n.auraa-why__title.reveal-armed.is-revealed .rl{ clip-path:inset(0 0 0 0); }\n\n\/* grid *\/\n.why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.2vw,20px); }\n\n.why-card{\n  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(48px,7vh,90px);\n  min-height:clamp(300px,30vw,364px);\n  padding:clamp(22px,1.8vw,30px);\n  border:1px solid rgba(0,0,0,.14); border-radius:10px;\n  background:#fff;\n  transition: background .3s ease, border-color .3s ease;\n}\n.why-card__num{\n  display:flex; align-items:center; gap:12px;\n  color:#0a0a0a; font-weight:400; font-size:clamp(30px,3.1vw,50px); line-height:1;\n  transition:color .3s ease;\n}\n.why-card__ast{ width:clamp(22px,2.2vw,34px); height:auto; display:block; transition:filter .3s ease; }\n.why-card__title{ margin:0 0 12px; color:#0a0a0a; font-weight:700; font-size:clamp(18px,1.45vw,22px); line-height:1.2; transition:color .3s ease; }\n.why-card__desc{ margin:0; color:#555; font-size:clamp(13px,.95vw,15px); line-height:1.5; transition:color .3s ease; }\n\n\/* hover \u2192 blue card, white text *\/\n.why-card:hover{ background:var(--why-blue); border-color:var(--why-blue); }\n.why-card:hover .why-card__num{ color:#fff; }\n.why-card:hover .why-card__ast{ filter:brightness(0) invert(1); }\n.why-card:hover .why-card__title{ color:#fff; }\n.why-card:hover .why-card__desc{ color:rgba(255,255,255,.85); }\n\n@media (max-width:1200px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }\n@media (max-width:820px){ .why-grid{ grid-template-columns:repeat(2,1fr); } .why-card{ min-height:auto; gap:36px; } }\n@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }\n<\/style>\n\n<section class=\"auraa-why\">\n  <div class=\"auraa-why__inner\">\n\n    <div class=\"auraa-why__label\">\n      <span class=\"auraa-why__index\">\n        <img decoding=\"async\" class=\"auraa-why__spin\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n        (05)\n      <\/span>\n      <span>(Why Auraa*)<\/span>\n    <\/div>\n\n    <h2 class=\"auraa-why__title\">\n      <span class=\"rl\">Not the Biggest Agency.<\/span>\n      <span class=\"rl\">The Right One.<\/span>\n    <\/h2>\n\n    <div class=\"why-grid\">\n\n      <div class=\"why-card\">\n        <div class=\"why-card__num\"><img decoding=\"async\" class=\"why-card__ast\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">01<\/div>\n        <div class=\"why-card__body\">\n          <h3 class=\"why-card__title\">Strategy First<\/h3>\n          <p class=\"why-card__desc\">Before we design, build, or advertise anything, we define the right positioning and direction. A strong foundation makes everything else work better.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"why-card\">\n        <div class=\"why-card__num\"><img decoding=\"async\" class=\"why-card__ast\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">02<\/div>\n        <div class=\"why-card__body\">\n          <h3 class=\"why-card__title\">Everything Under One Roof<\/h3>\n          <p class=\"why-card__desc\">We build your brand, website, and marketing together. No gaps, no handoff issues, and no disconnected execution.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"why-card\">\n        <div class=\"why-card__num\"><img decoding=\"async\" class=\"why-card__ast\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">03<\/div>\n        <div class=\"why-card__body\">\n          <h3 class=\"why-card__title\">We Build Long-Term Growth<\/h3>\n          <p class=\"why-card__desc\">Campaigns come and go. We focus on building systems and assets that keep improving results over time.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"why-card\">\n        <div class=\"why-card__num\"><img decoding=\"async\" class=\"why-card__ast\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">04<\/div>\n        <div class=\"why-card__body\">\n          <h3 class=\"why-card__title\">Proven Across Industries<\/h3>\n          <p class=\"why-card__desc\">From restaurants and healthcare to travel, finance, and professional services, we apply the same disciplined process.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"why-card\">\n        <div class=\"why-card__num\"><img decoding=\"async\" class=\"why-card__ast\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">05<\/div>\n        <div class=\"why-card__body\">\n          <h3 class=\"why-card__title\">We Tell You What Needs Fixing<\/h3>\n          <p class=\"why-card__desc\">If your foundation isn't ready, we'll say so. We'd rather solve the real problem than spend your budget on the wrong solution.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var h = document.querySelector('.auraa-why__title');\n  if (h && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    h.classList.add('reveal-armed');\n    var io = new IntersectionObserver(function(es){\n      es.forEach(function(e){ if (e.isIntersecting){ h.classList.add('is-revealed'); io.unobserve(h); } });\n    }, { threshold: 0.3 });\n    io.observe(h);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a47d211 elementor-widget elementor-widget-html\" data-id=\"a47d211\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  AURAA* \u2014 SECTION 06 \/ CONTACT CTA  (beige, standalone)\n  position:relative; z-index:2 keeps it above the pinned hero. Heading uses the standard reveal.\n-->\n\n<style>\n:root{\n  --auraa-font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;\n  --auraa-blue:#0047AB;\n  --auraa-gutter:5.56%;\n}\n.auraa-cta06 *{ box-sizing:border-box; }\n.auraa-cta06{ position:relative; z-index:2; background:#E4E2DD; font-family:var(--auraa-font); }\n.auraa-cta06__inner{ padding: clamp(58px,8vh,108px) var(--auraa-gutter) clamp(58px,8vh,104px); }\n\n.auraa-cta06__label{\n  display:flex; align-items:center; justify-content:space-between; gap:16px;\n  padding-top:20px; border-top:1px solid rgba(0,0,0,.14);\n  color:var(--auraa-blue); font-weight:500; font-size:clamp(15px,1.1vw,18px); letter-spacing:.02em;\n}\n.auraa-cta06__index{ display:inline-flex; align-items:center; gap:10px; }\n.auraa-cta06__spin{ width:20px; height:20px; display:block; animation:auraaSpin 4s linear infinite; }\n@keyframes auraaSpin{ to{ transform:rotate(360deg); } }\n@media (prefers-reduced-motion: reduce){ .auraa-cta06__spin{ animation:none; } }\n\n.auraa-cta06__title{\n  text-align:center; max-width:1000px; margin: clamp(40px,7vh,88px) auto clamp(26px,4vh,38px);\n  color:#0a0a0a; font-weight:700; font-size:clamp(30px,4.2vw,58px); line-height:1.12; letter-spacing:-0.01em;\n}\n.auraa-cta06__title .rl{ display:block; }\n.auraa-cta06__title.reveal-armed .rl{ clip-path:inset(0 0 100% 0); will-change:clip-path; transition:clip-path .9s cubic-bezier(.22,1,.36,1); }\n.auraa-cta06__title.reveal-armed .rl:nth-child(2){ transition-delay:.13s; }\n.auraa-cta06__title.reveal-armed.is-revealed .rl{ clip-path:inset(0 0 0 0); }\n\n.auraa-cta06__sub{\n  text-align:center; max-width:720px; margin:0 auto;\n  color:#3a3a3a; font-size:clamp(15px,1.15vw,18px); line-height:1.6;\n}\n.auraa-cta06__btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top: clamp(34px,5vh,54px); }\n.btn6{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:999px; text-decoration:none; font-weight:500; font-size:clamp(15px,1.05vw,17px); transition:transform .2s ease; white-space:nowrap; }\n.btn6:hover{ transform:translateY(-1px); }\n.btn6 img{ width:15px; height:15px; }\n.btn6--blue{ background:var(--auraa-blue); color:#fff; }\n.btn6--blue img{ filter:brightness(0) invert(1); }\n.btn6--ghost{ background:#fff; color:#0a0a0a; border:1px solid rgba(0,0,0,.18); }\n<\/style>\n\n<section class=\"auraa-cta06\">\n  <div class=\"auraa-cta06__inner\">\n    <div class=\"auraa-cta06__label\">\n      <span class=\"auraa-cta06__index\">\n        <img decoding=\"async\" class=\"auraa-cta06__spin\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rotate.svg\" alt=\"\">\n        (06)\n      <\/span>\n      <span>(Contact Us)<\/span>\n    <\/div>\n\n    <h2 class=\"auraa-cta06__title\">\n      <span class=\"rl\">Not Sure Where Your<\/span>\n      <span class=\"rl\">Digital Infrastructure Is Leaking?<\/span>\n    <\/h2>\n\n    <p class=\"auraa-cta06__sub\">Most brands spending on marketing have at least one layer that is working against them \u2014 a website that doesn't convert, a brand that doesn't position, campaigns with no funnel behind them. We find it in a free audit. No proposal, no commitment \u2014 just a clear picture of where the gaps are and what needs to change.<\/p>\n\n    <div class=\"auraa-cta06__btns\">\n      <a class=\"btn6 btn6--blue\" href=\"https:\/\/vrgdigital.in\/aura\/contact-us\/\">Book a Free Audit <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/rightarrow.svg\" alt=\"\"><\/a>\n      <a class=\"btn6 btn6--ghost\" href=\"https:\/\/vrgdigital.in\/aura\/contact-us\/\">Book a Strategy Session <img decoding=\"async\" src=\"https:\/\/vrgdigital.in\/aura\/wp-content\/uploads\/2026\/07\/arrowblack.svg\" alt=\"\"><\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var h = document.querySelector('.auraa-cta06__title');\n  if (h && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    h.classList.add('reveal-armed');\n    var io = new IntersectionObserver(function(es){\n      es.forEach(function(e){ if (e.isIntersecting){ h.classList.add('is-revealed'); io.unobserve(h); } });\n    }, { threshold: 0.3 });\n    io.observe(h);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>We Create Brands That Stand Out Auraa* is a strategy-first digital agency. We build brand identity, digital infrastructure, and growth systems designed to work together See What We&#8217;ve Built (01) (About Us) Auraa* grew out of Auraa Digital. In our first year of client work, a pattern kept appearing across every industry we worked in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":133,"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/pages\/11\/revisions\/359"}],"wp:attachment":[{"href":"https:\/\/vrgdigital.in\/aura\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}