/* ==========================================================================
   Pawan Singh Mehta : personal page
   Shares the Web Design Technologies type and colour system.
   Cabinet Grotesk carries display, Satoshi carries reading and the label
   layer. Royal Blue is the only accent. Italic is never used.
   Dark first, because the page is designed to be read as a single lit surface.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --bg:#ffffff; --bg-soft:#f5f7fb; --surface:#ffffff; --surface-2:#f0f3fa;
  --ink:#0a0c14; --ink-soft:#4b5066; --gray:#868ba0; --line:#e4e8f3;
  --blue:#4169e1; --blue-deep:#142a72; --blue-tint:#e9eefc; --blue-soft:#8fa6ee;
  --glow:rgba(65,105,225,.20);
  /* Cabinet Grotesk display, Satoshi for reading. Both from Indian Type
     Foundry via Fontshare. --font-m keeps the label role: same face, tracked
     out and uppercased at the point of use. */
  --font-d:'Cabinet Grotesk',Helvetica,Arial,sans-serif;
  --font-b:'Satoshi',Helvetica,Arial,sans-serif;
  --font-m:'Satoshi',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px; --pad:30px; --sec:132px;
}
[data-theme="dark"]{
  --bg:#06070c; --bg-soft:#0a0c14; --surface:#0c0e18; --surface-2:#12152300;
  --surface-2:#121523;
  --ink:#f2f4fb; --ink-soft:#b3b9d1; --gray:#767d99; --line:#1c2033;
  --blue:#6b8ff0; --blue-deep:#c6d3f7; --blue-tint:#16204a; --blue-soft:#8fa6ee;
  --glow:rgba(107,143,240,.24);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background .6s var(--ease),color .6s var(--ease);}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer;}
section{padding:var(--sec) 0;position:relative;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blue);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-size:13px;font-weight:600;}
.skip-link:focus{left:0;}

h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.mono{font-family:var(--font-m);}

/* --------------------------------------------------------------------------
   3. AMBIENT LAYER
   The depth cues that carry the future facing feel: a fine grid, blue orbs,
   and a cursor reactive glow. All non interactive and pointer transparent.
   -------------------------------------------------------------------------- */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 5%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,black 5%,transparent 70%);}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.orb-1{width:560px;height:560px;background:radial-gradient(circle,var(--glow) 0%,transparent 68%);
  top:-220px;right:-160px;}
.orb-2{width:440px;height:440px;background:radial-gradient(circle,var(--glow) 0%,transparent 68%);
  top:60vh;left:-180px;}
#cursorglow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--glow) 0%,transparent 62%);filter:blur(50px);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .6s;will-change:transform;}
main,nav,.closing{position:relative;z-index:2;}

/* Scroll progress */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--blue-soft));z-index:200;will-change:transform;}

/* --------------------------------------------------------------------------
   4. MOTION PRIMITIVES
   Driven from JS rather than CSS keyframes, so the page still animates on
   devices with Reduce Motion enabled.
   -------------------------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);}
.js .rv.in{opacity:1;transform:none;}

/* Line by line headline reveal */
.lines{display:block;}
.lines .line{display:block;overflow:hidden;}
.lines .line > span{display:block;transform:translateY(105%);
  transition:transform 1s var(--ease);}
.js .lines.in .line > span{transform:none;}
.lines .line:nth-child(2) > span{transition-delay:.09s;}
.lines .line:nth-child(3) > span{transition-delay:.18s;}
.lines .line:nth-child(4) > span{transition-delay:.27s;}

/* --------------------------------------------------------------------------
   5. NAV
   -------------------------------------------------------------------------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:150;padding:20px 0;
  transition:background .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent;}
#nav.scrolled{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);padding:13px 0;}
#nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap;}
.brand span{color:var(--blue);}
.navlinks{display:flex;gap:30px;font-family:var(--font-m);font-size:12px;letter-spacing:.5px;color:var(--ink-soft);}
.navlinks a{transition:color .25s;}
.navlinks a:hover{color:var(--blue);}
.navright{display:flex;align-items:center;gap:14px;}
.toggle{width:44px;height:25px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);
  position:relative;flex-shrink:0;padding:0;}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--blue);transition:transform .35s var(--ease);}
[data-theme="dark"] .toggle::after{transform:translateX(19px);}
.nav-cta{font-family:var(--font-m);font-size:11.5px;letter-spacing:.5px;padding:10px 18px;border-radius:30px;
  border:1px solid var(--line);transition:border-color .3s,color .3s,background .3s;white-space:nowrap;}
.nav-cta:hover{border-color:var(--blue);color:var(--blue);}
.burger{display:none;width:40px;height:34px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);position:relative;flex-shrink:0;}
.burger i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s;}
.burger i:nth-child(1){top:11px;} .burger i:nth-child(2){top:16.5px;} .burger i:nth-child(3){top:22px;}
.burger.open i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger.open i:nth-child(2){opacity:0;}
.burger.open i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
#mobilemenu{position:fixed;inset:0 0 auto 0;z-index:149;padding:96px var(--pad) 34px;
  background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);transform:translateY(-102%);transition:transform .5s var(--ease);}
#mobilemenu.open{transform:none;}
#mobilemenu a{display:block;font-family:var(--font-d);font-weight:600;font-size:25px;padding:14px 0;
  border-bottom:1px solid var(--line);}
#mobilemenu a:last-of-type{border-bottom:0;}
@media(max-width:920px){.navlinks{display:none;}.burger{display:block;}.nav-cta{display:none;}}

/* --------------------------------------------------------------------------
   6. SHARED SECTION FURNITURE
   -------------------------------------------------------------------------- */
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:18px;flex-wrap:wrap;}
.sec-index{font-family:var(--font-m);font-size:11px;letter-spacing:2px;color:var(--blue);}
.sec-label{font-family:var(--font-m);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray);}
.h2{font-family:var(--font-d);font-weight:600;font-size:clamp(28px,3.7vw,45px);line-height:1.08;
  letter-spacing:-.03em;margin-bottom:18px;}
.h2 em{font-style:normal;color:var(--blue);font-weight:800;}
.lede{font-size:16.5px;color:var(--ink-soft);max-width:600px;margin-bottom:52px;line-height:1.75;}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
#hero{min-height:100vh;display:flex;align-items:center;padding:150px 0 90px;position:relative;}
.hero-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:64px;align-items:center;width:100%;}
.hero-kicker{font-family:var(--font-m);font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gray);margin-bottom:26px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;box-shadow:0 0 0 0 var(--glow);}
.hero h1{font-family:var(--font-d);font-weight:800;font-size:clamp(36px,5.2vw,66px);line-height:1.04;
  letter-spacing:-.035em;}
.hero h1 em{font-style:normal;color:var(--blue);font-weight:800;}
.hero-sub{font-size:17px;color:var(--ink-soft);max-width:520px;margin-top:28px;line-height:1.75;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;}
.btn{font-family:var(--font-b);font-weight:600;font-size:14px;padding:15px 28px;border-radius:40px;
  display:inline-flex;align-items:center;gap:9px;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s,color .3s;}
.btn-solid{background:var(--blue);color:#fff;}
.btn-solid:hover{transform:translateY(-3px);box-shadow:0 18px 38px -16px var(--blue);}
.btn-line{border:1px solid var(--line);color:var(--ink);}
.btn-line:hover{transform:translateY(-3px);border-color:var(--blue);color:var(--blue);}

/* Portrait frame. Holds the layout before photography arrives. */
.portrait{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--surface-2);aspect-ratio:4/5;}
.portrait img{width:100%;height:100%;object-fit:cover;}
.portrait .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px;}
.portrait .ph b{font-family:var(--font-m);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gray);font-weight:400;}
.portrait .ph i{font-family:var(--font-m);font-style:normal;font-size:10px;color:var(--blue);letter-spacing:1px;}
.portrait-tag{position:absolute;left:14px;bottom:14px;right:14px;display:flex;justify-content:center;text-align:center;
  font-family:var(--font-m);font-size:10px;letter-spacing:1.2px;color:var(--gray);
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:70px;}
.hstat{background:var(--bg);padding:24px 20px;}
.hstat b{display:block;font-family:var(--font-d);font-weight:700;font-size:30px;letter-spacing:-.03em;
  line-height:1;margin-bottom:8px;}
.hstat span{font-family:var(--font-m);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gray);}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .portrait{max-width:330px;}
  .hero-stats{grid-template-columns:1fr 1fr;}
}

/* --------------------------------------------------------------------------
   8. MARQUEE
   -------------------------------------------------------------------------- */
.marquee-sec{padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}
.marquee-label{text-align:center;font-family:var(--font-m);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray);margin-bottom:24px;}
.marquee{display:flex;width:max-content;will-change:transform;}
.mgroup{display:flex;gap:56px;padding-right:56px;align-items:center;}
.mgroup span{font-family:var(--font-d);font-weight:600;font-size:19px;white-space:nowrap;color:var(--ink-soft);
  opacity:.55;transition:opacity .3s,color .3s;letter-spacing:-.02em;}
.mgroup span:hover{opacity:1;color:var(--blue);}

/* --------------------------------------------------------------------------
   9. SERVICES
   -------------------------------------------------------------------------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.svc-card{border:1px solid var(--line);border-radius:18px;padding:34px 28px 30px;background:var(--surface);
  position:relative;overflow:hidden;transition:transform .45s var(--ease),border-color .4s;}
.svc-card::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;
  transition:opacity .45s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--glow),transparent 62%);}
.svc-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));}
.svc-card:hover::after{opacity:1;}
.svc-n{font-family:var(--font-m);font-size:11px;letter-spacing:2px;color:var(--blue);margin-bottom:22px;}
.svc-card h3{font-family:var(--font-d);font-weight:600;font-size:21px;margin-bottom:12px;letter-spacing:-.02em;}
.svc-card p{font-size:14px;color:var(--ink-soft);line-height:1.72;}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;}
.svc-tags span{font-family:var(--font-m);font-size:10px;letter-spacing:.6px;color:var(--gray);
  border:1px solid var(--line);border-radius:20px;padding:5px 11px;}
@media(max-width:900px){.svc{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   10. WORK
   -------------------------------------------------------------------------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:120px;}
.case:last-of-type{margin-bottom:0;}
.case.rev .case-media{order:2;} .case.rev .case-copy{order:1;}
.browser{border-radius:15px;overflow:hidden;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 34px 80px -34px rgba(4,8,26,.6);will-change:transform;}
.bbar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--surface-2);
  border-bottom:1px solid var(--line);}
.bbar i{width:8px;height:8px;border-radius:50%;background:var(--line);}
.burl{margin-left:9px;font-family:var(--font-m);font-size:10px;color:var(--gray);background:var(--bg);
  border:1px solid var(--line);border-radius:6px;padding:4px 11px;flex:1;}
.bbody{aspect-ratio:16/11;position:relative;overflow:hidden;}

.m-badlaav{background:#1b2951;padding:26px;display:flex;flex-direction:column;justify-content:center;}
.m-badlaav .e{font-family:var(--font-m);color:#8dc640;font-size:8.5px;letter-spacing:2px;margin-bottom:11px;}
.m-badlaav .h{font-family:var(--font-d);font-weight:600;color:#f7f3eb;font-size:21px;line-height:1.2;max-width:70%;}
.m-badlaav .h b{color:#8dc640;font-weight:800;}
.m-badlaav .bars{position:absolute;right:0;top:0;bottom:0;width:30%;display:flex;flex-direction:column;}
.m-badlaav .bars div{flex:1;}

.m-saathi{background:linear-gradient(160deg,#fff8ea,#ffedcc);padding:26px;}
.m-saathi .n{display:flex;gap:13px;font-family:var(--font-m);font-size:7.5px;color:#8a6a3a;margin-bottom:28px;}
.m-saathi .h{font-family:var(--font-d);font-weight:600;font-size:19px;color:#3a2a10;max-width:62%;}
.m-saathi .c{position:absolute;background:#fff;border-radius:10px;padding:9px 13px;font-family:var(--font-m);
  box-shadow:0 10px 28px rgba(200,140,20,.2);font-size:8.5px;color:#a6731f;font-weight:600;}
.m-saathi .c1{bottom:22px;left:26px;} .m-saathi .c2{top:66px;right:24px;}

.m-ga{background:#12321f;padding:26px;}
.m-ga .n{display:flex;gap:11px;font-family:var(--font-m);font-size:7.5px;color:#cfe8d4;margin-bottom:32px;}
.m-ga .h{font-family:var(--font-d);font-weight:600;color:#f2fbf4;font-size:20px;max-width:66%;}
.m-ga .t{position:absolute;bottom:24px;left:26px;background:#3f7a44;color:#eafcee;font-family:var(--font-m);
  font-size:8.5px;padding:6px 13px;border-radius:4px;}

.m-ig{background:#0a1330;padding:26px;}
.m-ig .n{display:flex;justify-content:space-between;font-family:var(--font-m);font-size:7.5px;color:#a9baf5;margin-bottom:28px;}
.m-ig .h{font-family:var(--font-d);font-weight:600;color:#fff;font-size:21px;max-width:76%;}
.m-ig .h b{color:#6b8ff0;font-weight:800;}
.m-ig .band{position:absolute;bottom:0;left:0;right:0;height:25%;background:#0f1c4a;}

.m-pagdandi{background:linear-gradient(150deg,#5f4152,#9d7189);padding:26px;}
.m-pagdandi .n{display:flex;gap:12px;font-family:var(--font-m);font-size:7.5px;color:#f0dfe8;margin-bottom:30px;}
.m-pagdandi .h{font-family:var(--font-d);font-weight:600;color:#fff8fb;font-size:20px;line-height:1.2;max-width:70%;}
.m-pagdandi .strip{position:absolute;bottom:22px;left:26px;right:26px;display:flex;gap:8px;}
.m-pagdandi .strip div{flex:1;height:24px;border-radius:5px;background:rgba(255,255,255,.16);}

/* Real screenshot sits over the CSS recreation, so nothing renders broken if
   an image is ever missing. */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:2;}

.case-tag{display:inline-block;font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--blue);background:var(--blue-tint);padding:5px 12px;
  border-radius:20px;margin-bottom:18px;}
.case-copy h3{font-family:var(--font-d);font-weight:600;font-size:26px;margin-bottom:14px;letter-spacing:-.025em;}
.case-copy p{color:var(--ink-soft);font-size:15px;margin-bottom:22px;max-width:450px;line-height:1.75;}
.case-stats{display:flex;gap:30px;margin-bottom:24px;flex-wrap:wrap;}
.case-stats b{display:block;font-family:var(--font-d);font-weight:700;font-size:24px;color:var(--blue);letter-spacing:-.03em;}
.case-stats span{font-family:var(--font-m);font-size:10px;letter-spacing:1.2px;color:var(--gray);text-transform:uppercase;}
.link{font-family:var(--font-m);font-size:12px;display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--ink);padding-bottom:3px;transition:gap .3s,color .3s,border-color .3s;}
.link:hover{gap:13px;color:var(--blue);border-color:var(--blue);}
@media(max-width:900px){
  .case{grid-template-columns:1fr;gap:30px;margin-bottom:80px;}
  .case.rev .case-media{order:1;} .case.rev .case-copy{order:2;}
}

.more{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:70px;}
.more a{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--surface);
  transition:transform .4s var(--ease),border-color .35s;}
.more a:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));}
.more h4{font-family:var(--font-d);font-weight:600;font-size:16px;margin-bottom:5px;letter-spacing:-.02em;}
.more span{font-family:var(--font-m);font-size:10.5px;color:var(--gray);}
@media(max-width:820px){.more{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.more{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   11. STORY
   The emotional peak. Wider measure, larger type, photography led.
   -------------------------------------------------------------------------- */
.story{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.story-copy p{font-size:17px;line-height:1.85;color:var(--ink-soft);margin-bottom:22px;max-width:560px;}
.story-copy p:first-of-type{font-family:var(--font-d);font-weight:500;font-size:clamp(21px,2.4vw,27px);
  line-height:1.4;color:var(--ink);letter-spacing:-.02em;}
.story-copy strong{color:var(--ink);font-weight:600;}
.story-img{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface-2);
  aspect-ratio:4/3;position:relative;}
.story-img img{width:100%;height:100%;object-fit:cover;}
.sign{margin-top:34px;display:flex;align-items:center;gap:14px;}
.sign b{font-family:var(--font-d);font-weight:600;font-size:15px;}
.sign span{font-family:var(--font-m);font-size:10.5px;color:var(--gray);letter-spacing:.8px;}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:38px;}}

/* --------------------------------------------------------------------------
   12. ROLES
   Character proof, deliberately styled apart from the service cards.
   -------------------------------------------------------------------------- */
.roles{display:flex;flex-direction:column;border-top:1px solid var(--line);}
/* Padding stays generous at rest so the hover shift has room to read as a
   deliberate move rather than a cramped nudge. */
.role{display:grid;grid-template-columns:180px 1fr auto;gap:36px;align-items:center;
  padding:42px 24px;border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .45s var(--ease),background .45s;}
.role::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);
  transform:scaleY(0);transform-origin:50% 50%;transition:transform .45s var(--ease);}
.role:hover{padding-left:44px;background:var(--surface);}
.role:hover::before{transform:scaleY(1);}
/* Group heading above each set of accounts. */
.social-group-label{font-family:var(--font-m);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);font-weight:500;margin:0 0 16px;}

.role-org{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.role-org-name{font-family:var(--font-m);font-size:10.5px;letter-spacing:1.5px;color:var(--blue);
  text-transform:uppercase;line-height:1.5;}

/* The organisation's own mark. Named, visitable proof beats a job title, and
   the logo is what makes it recognisable at a glance. Sits on both themes, so
   a dark variant is swapped in where one exists. */
.role-logo{display:block;max-width:132px;}
.role-logo img{width:100%;height:auto;max-height:46px;object-fit:contain;object-position:left center;display:block;}
.role-logo .on-dark{display:none;}
[data-theme="dark"] .role-logo .on-light{display:none;}
[data-theme="dark"] .role-logo .on-dark{display:block;}

/* Art of Living's mark is maroon on transparent, which disappears against the
   dark canvas. A slight lift keeps it legible without recolouring the brand. */
[data-theme="dark"] .role-logo img{filter:brightness(1.35) saturate(1.05);}

.role-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
.role-links a{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:11px;
  letter-spacing:.4px;color:var(--gray);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s,border-color .3s;}
.role-links a:hover{color:var(--blue);border-bottom-color:var(--blue);}
.role-links svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
@media(max-width:820px){
  .role-org{flex-direction:row;align-items:center;gap:14px;}
  .role-logo{max-width:100px;}
}
.role-title{font-family:var(--font-d);font-weight:600;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.025em;}
.role-desc{font-size:14px;color:var(--ink-soft);margin-top:7px;max-width:520px;line-height:1.7;}
.role-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.role-meta span{font-family:var(--font-m);font-size:10px;color:var(--gray);letter-spacing:.8px;
  border:1px solid var(--line);border-radius:20px;padding:5px 11px;white-space:nowrap;
  transition:border-color .4s,color .4s;}
.role:hover .role-meta span{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));color:var(--ink-soft);}
@media(max-width:820px){
  .role{grid-template-columns:1fr;gap:14px;padding:30px 16px;}
  .role:hover{padding-left:26px;}
  .role-meta{flex-direction:row;flex-wrap:wrap;align-items:flex-start;}
}

/* Floating utilities, shared with the main site */
.util{position:fixed;right:20px;bottom:20px;z-index:180;display:flex;flex-direction:column;gap:11px;}
.util a,.util button{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);
  color:var(--ink);transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,opacity .4s;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.6);}
.util a svg,.util button svg{width:21px;height:21px;}
.util a:hover,.util button:hover{transform:translateY(-3px) scale(1.05);}
.util .wa{background:#25d366;border-color:#25d366;color:#fff;}
.util .wa:hover{background:#1eb955;border-color:#1eb955;}
.util .ig{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,var(--line));}
.util .ig:hover{background:var(--blue);color:#fff;}
#toTop{opacity:0;pointer-events:none;}
#toTop.show{opacity:1;pointer-events:auto;}
@media(max-width:600px){.util{right:14px;bottom:14px;gap:9px;}.util a,.util button{width:44px;height:44px;}}

/* --------------------------------------------------------------------------
   13. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tcard{border:1px solid var(--line);border-radius:18px;padding:30px 28px;background:var(--surface);
  display:flex;flex-direction:column;}
.tquote{font-size:15px;line-height:1.75;color:var(--ink);margin-bottom:26px;flex:1;position:relative;padding-top:28px;}
.tquote::before{content:"\201C";position:absolute;top:-4px;left:-3px;font-family:var(--font-d);font-weight:800;
  font-size:48px;line-height:1;color:var(--blue);opacity:.5;}
.twho{display:flex;align-items:center;gap:13px;}
.tav{width:42px;height:42px;border-radius:50%;background:var(--blue-tint);color:var(--blue);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:14px;
  overflow:hidden;}
.tav img{width:100%;height:100%;object-fit:cover;display:block;}
.tname{font-size:13.5px;font-weight:600;}
.trole{font-family:var(--font-m);font-size:10.5px;color:var(--gray);letter-spacing:.3px;}
@media(max-width:980px){.testi{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   14. CONTACT
   -------------------------------------------------------------------------- */
.closing{padding:var(--sec) 0 54px;border-top:1px solid var(--line);}
.closing h2{font-family:var(--font-d);font-weight:800;font-size:clamp(32px,4.9vw,58px);line-height:1.05;
  letter-spacing:-.035em;margin-bottom:24px;}
.closing h2 em{font-style:normal;color:var(--blue);font-weight:800;}
.closing p{font-size:17px;color:var(--ink-soft);max-width:520px;margin-bottom:42px;line-height:1.75;}
.cbtns{display:flex;gap:14px;flex-wrap:wrap;}
.foot{margin-top:96px;padding-top:26px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--font-m);font-size:10.5px;color:var(--gray);letter-spacing:.6px;}
.foot a:hover{color:var(--blue);}

/* --------------------------------------------------------------------------
   15. RESPONSIVE RHYTHM
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  :root{--sec:86px;--pad:20px;}
  #hero{padding:126px 0 70px;min-height:auto;}
  .hero-stats{margin-top:46px;}
}

/* ==========================================================================
   16b. CONSENT BANNER
   Bottom left so it never collides with the floating contact buttons.
   ========================================================================== */
.consent{position:fixed;left:20px;bottom:20px;z-index:190;max-width:390px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  box-shadow:0 24px 60px -26px rgba(0,0,0,.7);
  transform:translateY(140%);opacity:0;transition:transform .55s var(--ease),opacity .45s;}
.consent.show{transform:none;opacity:1;}
.consent p{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:16px;}
.consent a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 45%,transparent);}
.consent a:hover{border-bottom-color:var(--blue);}
.consent-row{display:flex;gap:9px;flex-wrap:wrap;}
.consent button{font-family:var(--font-b);font-size:12.5px;font-weight:600;padding:10px 18px;
  border-radius:30px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;}
.consent button:hover{transform:translateY(-2px);}
.consent .accept{background:var(--blue);border-color:var(--blue);color:#fff;}
.consent .decline{color:var(--ink-soft);}
.consent .decline:hover{border-color:var(--ink-soft);color:var(--ink);}
@media(max-width:520px){.consent{left:12px;right:12px;bottom:12px;max-width:none;padding:18px 20px;}}