/* ============================================================
   SkyLit homepage stylesheet. Scoped to index.html only, so the
   other 55 pages keep styles.css untouched.

   Colour comes straight off the logo: cyan #28c8f8 into violet
   #8078f8. Cyan reads 9.8:1 on the dark bands but only 1.8:1 on
   paper, so light sections use a deepened logo violet for accent
   text. Every CTA is cyan with near-black type, which clears AA
   on both.

   The page alternates light and dark bands on purpose. Dark is
   where the footage lives, light is where the reading happens.
   Any section tagged .dark re-points the shared tokens, so the
   components inside invert without needing their own rules.
   ============================================================ */

:root{
  /* straight from the logo */
  --cyan:#28c8f8;
  --violet:#8078f8;
  --grad:linear-gradient(120deg,#28c8f8,#8078f8);

  /* light surfaces */
  --paper:#f4f4f2;
  --paper-2:#ffffff;
  --ink:#14161b;
  --ink-2:#545a66;
  --ink-3:#5f6572;
  --line:rgba(20,22,27,.12);
  --line-2:rgba(20,22,27,.22);
  --accent-ink:#3d35b8;

  /* dark surfaces */
  --night:#0b0e14;
  --night-2:#121724;

  --r:14px;
  --pill:999px;

  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --display:'DM Serif Display',Georgia,serif;

  --shell:1140px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:68px;
}

/* One switch inverts a whole band. */
.dark{
  --paper:var(--night);
  --paper-2:var(--night-2);
  --ink:#eef1f8;
  --ink-2:#a2abbd;
  --ink-3:#8b93a6;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.22);
  --accent-ink:var(--cyan);
  background:var(--night);
  color:var(--ink);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--cyan);color:#06080c}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.shell{width:min(100% - 9vw,var(--shell));margin-inline:auto}
@media (max-width:760px){.shell{width:calc(100% - 2.5rem)}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:400;font-synthesis-weight:none;line-height:1.09;letter-spacing:-.018em}
.display em{font-style:italic;color:var(--accent-ink);line-height:1.15;padding-bottom:.06em;display:inline-block}

.h-xl{font-size:clamp(2.05rem,3.6vw,3.15rem)}
.h-lg{font-size:clamp(1.85rem,3vw,2.65rem)}

.lede{color:var(--ink-2);font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.7;max-width:46ch}
.body{color:var(--ink-2);line-height:1.8;max-width:58ch}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.8rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;border-radius:var(--pill);
  font-weight:600;font-size:.92rem;padding:.85rem 1.7rem;
  border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
/* Logo cyan with near-black type is 10.2:1, so it holds on both bands. */
.btn-primary{background:var(--cyan);color:#06080c}
.btn-primary:hover{background:#6fdcff;transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.985)}

/* ============================================================ NAV */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:70;height:var(--nav-h);
  display:flex;align-items:center;gap:1.4rem;
  padding-inline:clamp(1.25rem,4.5vw,3rem);
  /* Opaque from the start. A transparent bar only works while the thing
     behind it is the top of the hero; the moment the page moves, hero copy
     and buttons slide underneath it and the logo sits on top of them. The
     hero is this same colour, so at rest there is still no visible bar. */
  background:var(--night);border-bottom:1px solid transparent;color:#eef1f8;
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(11,14,20,.92);border-bottom-color:rgba(255,255,255,.1);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
}
.nav-logo{display:flex;align-items:center;gap:.6rem;margin-right:auto;flex-shrink:0}
.nav-logo img{width:34px;height:34px;border-radius:9px}
.nav-logo b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.nav-logo b + span{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(238,241,248,.6)}

.nav-links{display:flex;align-items:center;gap:1.3rem}
.nav-links a{font-size:.81rem;font-weight:500;color:rgba(238,241,248,.75);position:relative;padding-block:.4rem;transition:color .3s var(--ease)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-cta{
  flex-shrink:0;border-radius:var(--pill);background:var(--cyan);color:#06080c;
  font-weight:600;font-size:.81rem;padding:.58rem 1.15rem;white-space:nowrap;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.nav-cta:hover{background:#6fdcff;transform:translateY(-1px)}

.burger{display:none;width:40px;height:40px;flex-shrink:0;background:none;border:1px solid rgba(255,255,255,.3);border-radius:var(--pill);cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:15px;height:1.5px;background:#eef1f8;margin:3px auto;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

@media (max-width:1200px){.nav-links{display:none}.burger{display:grid}}

.drawer{
  position:fixed;inset:0;z-index:90;background:var(--night);color:#eef1f8;
  /* The drawer covers the nav rather than sitting under it, and it carries
     its own logo and close button, so there is nothing up there to clear.
     Its brand lands roughly where the nav's brand was. */
  padding:calc(1.1rem + env(safe-area-inset-top,0px)) 1.5rem 2rem;
  display:flex;flex-direction:column;gap:.2rem;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);overflow-y:auto;
}
.drawer.is-open{opacity:1;visibility:visible}
/* The drawer sits above the nav, so the burger that opened it is
   buried underneath. It needs its own way out. */
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.drawer-brand{display:flex;align-items:center;gap:.55rem}
.drawer-brand img{width:30px;height:30px;border-radius:8px}
.drawer-brand b{font-size:.98rem;font-weight:700}
.drawer-close{
  width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--pill);color:#eef1f8;font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.drawer-close:hover{background:rgba(255,255,255,.18);border-color:var(--cyan);color:var(--cyan)}
.drawer a{font-family:var(--display);font-size:1.5rem;padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(238,241,248,.78);transition:color .3s var(--ease),padding-left .3s var(--ease)}
.drawer a:hover{color:var(--cyan);padding-left:.5rem}
/* The drawer's link rule is a blunt instrument: it sets the serif, a
   display size and a hairline on every anchor inside, including the CTA.
   Put the button back. */
.drawer .btn{
  margin-top:1.6rem;align-self:flex-start;
  font-family:var(--sans);font-size:.92rem;font-weight:600;
  padding:.85rem 1.7rem;border-bottom:1px solid transparent;
}
/* .drawer a also wins on colour, which left near-white type on cyan at
   about 1.6:1. Near-black, as everywhere else. */
.drawer .btn-primary,.drawer .btn-primary:hover{color:#06080c}
.drawer .btn:hover{padding-left:1.7rem}

/* ============================================================ HERO
   A dark stage. The venue sits behind at low strength so the band
   has depth, and the clip is framed by the brand gradient. */
.hero{
  position:relative;min-height:100dvh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 3rem);padding-bottom:3.5rem;overflow:hidden;
  background:var(--night);color:#eef1f8;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(70ch 46ch at 72% 44%,rgba(40,200,248,.16),transparent 66%),
    linear-gradient(100deg,rgba(11,14,20,.97) 32%,rgba(11,14,20,.7) 62%,rgba(11,14,20,.88));
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(2rem,4.5vw,3.75rem);align-items:center}
.hero h1{margin-bottom:1.3rem;color:#fff}
.hero h1 em{color:var(--cyan)}
.hero .lede{color:rgba(238,241,248,.78);margin-bottom:2rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.hero-actions .btn-ghost{color:#eef1f8;border-color:rgba(255,255,255,.3)}
.hero-actions .btn-ghost:hover{border-color:#fff}

.hero-crest{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.3rem;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(238,241,248,.72);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--pill);padding:.42rem 1rem;
}
.hero-crest i{width:5px;height:5px;border-radius:var(--pill);background:var(--cyan);display:block}

.hero-asset{position:relative;justify-self:end;width:100%;max-width:368px}
/* The one gradient moment on the page, wrapping the clip only. */
.hero-frame{
  position:relative;padding:2px;border-radius:calc(var(--r) + 2px);
  background:var(--grad);
}
.hero-asset video{
  width:100%;aspect-ratio:9/13;object-fit:cover;display:block;
  border-radius:var(--r);background:#000;
}
.hero-asset figcaption{position:relative;z-index:1;margin-top:.85rem;font-size:.76rem;color:rgba(238,241,248,.6)}
.hero-asset figcaption b{color:rgba(238,241,248,.9);font-weight:600}

@media (max-width:980px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 2.5rem)}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-asset{justify-self:start;max-width:310px}
}

/* ============================================================ STATS */
.stats{background:var(--night-2);border-top:1px solid rgba(255,255,255,.08)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:2.2rem 1.4rem;border-left:1px solid rgba(255,255,255,.08)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1;color:#fff}
.stat > span{display:block;margin-top:.5rem;font-size:.8rem;color:rgba(238,241,248,.62)}
@media (max-width:760px){
  .stats-row{grid-template-columns:1fr 1fr}
  .stat{padding:1.6rem 1.1rem}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}
  .stat:nth-child(odd){border-left:0}
}

/* ============================================================ RHYTHM */
section{position:relative}
.band{padding-block:clamp(4.25rem,8.5vw,7rem);background:var(--paper);color:var(--ink)}
.band-white{background:var(--paper-2)}

.sec-head{margin-bottom:clamp(2rem,4vw,3.25rem)}
.sec-head .display{max-width:19ch}
.sec-head .body{margin-top:.95rem;max-width:52ch}

/* ============================================================ ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.25rem,5vw,4.25rem);align-items:center}
.about-media{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.about-media img{width:100%;border-radius:var(--r);object-fit:cover;background:var(--night)}
.about-media img:first-child{grid-column:1/-1;aspect-ratio:16/10}
.about-media img:nth-child(2),.about-media img:nth-child(3){aspect-ratio:1}
.about-copy p + p{margin-top:1rem}
.about-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.6rem}
.tag{font-size:.77rem;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--pill);padding:.35rem .9rem}
.about-note{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3)}
@media (max-width:980px){.about-grid{grid-template-columns:1fr;gap:2.25rem}}

/* ============================================================ WORK */
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.25rem;flex-wrap:wrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:.9rem}
.gitem{
  position:relative;border-radius:var(--r);overflow:hidden;background:#000;
  display:block;width:100%;padding:0;border:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.gitem:hover{transform:translateY(-5px);box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}
.gitem video{width:100%;aspect-ratio:9/13;object-fit:cover;background:#000}
.gitem figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.4rem .9rem .85rem;
  background:linear-gradient(to top,rgba(6,8,12,.95),rgba(6,8,12,.55) 55%,transparent);color:#fff;
}
.gitem figcaption b{display:block;font-size:.87rem;font-weight:600;letter-spacing:-.01em}
.gitem figcaption span{display:block;font-size:.74rem;color:rgba(255,255,255,.66);margin-top:.12rem}
.gkind{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:#14161b;border-radius:var(--pill);padding:.24rem .58rem;
}
.gplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:50px;height:50px;border-radius:var(--pill);z-index:2;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.gplay::after{content:'';border-left:12px solid #fff;border-block:8px solid transparent;margin-left:3px}
/* The whole tile is the control. A real button keeps it keyboard
   reachable without wrapping the figure in interactive markup. */
.gopen{
  position:absolute;inset:0;z-index:3;
  background:none;border:0;padding:0;cursor:pointer;
  border-radius:var(--r);
}
.gitem:hover .gplay,.gopen:hover + .gplay,.gopen:focus-visible ~ .gplay{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gitem:has(.gopen:focus-visible){outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:560px){.gallery{grid-template-columns:1fr 1fr;gap:.6rem}}

/* ============================================================ LIGHTBOX */
.lb{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(5,7,11,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);
  padding:clamp(1rem,4vw,3rem);
}
.lb.is-open{opacity:1;visibility:visible}
.lb-box{width:min(100%,400px);display:flex;flex-direction:column;gap:.8rem}
/* A still is usually landscape, so it gets more room than a vertical reel. */
.lb.is-image .lb-box{width:min(100%,920px)}
.lb #lbImg,.lb.is-image #lbVideo{display:none}
.lb.is-image #lbImg{display:block}
.lb img{
  width:100%;max-height:78vh;object-fit:contain;display:block;
  border-radius:var(--r);background:var(--night);
}
.lb video{width:100%;max-height:72vh;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:var(--r);display:block}
.lb-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#fff}
.lb-meta b{display:block;font-size:.94rem;font-weight:600}
.lb-meta span{display:block;font-size:.77rem;color:rgba(255,255,255,.6);margin-top:.1rem}
.lb-dl{
  flex-shrink:0;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.79rem;font-weight:600;color:#06080c;background:var(--cyan);
  border-radius:var(--pill);padding:.55rem 1.05rem;transition:background-color .3s var(--ease);
}
.lb-dl:hover{background:#6fdcff}
.lb-close{
  position:absolute;top:1.1rem;right:1.1rem;width:42px;height:42px;
  border-radius:var(--pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background-color .3s var(--ease);
}
.lb-close:hover{background:rgba(255,255,255,.24)}

/* ============================================================ VENUES */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:1.4rem;width:max-content;animation:slide 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
/* The marks arrive as pre-rendered tiles: one canvas size, each on
   its own brand background, artwork already centred with padding.
   Doing the fitting offline keeps a 6.5:1 wordmark and a square
   mark looking like they belong on the same wall. */
.venue{
  flex:0 0 auto;width:186px;height:86px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.venue:hover{transform:translateY(-2px);border-color:var(--line-2)}
.venue img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================ SERVICES
   The product is points of light gathering into a shape, so the cards
   carry that directly: a lattice of drone points, dense at one corner
   and thinning across the card, built from a tiled radial-gradient
   under a mask. No photographs, no SVG illustration.

   All four share one surface and one motif so they read as a set. The
   only thing that varies is which corner the lattice gathers at, which
   gives the grid rhythm without breaking the system.
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}

.cell{
  --origin:100% 0%;
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(82% 66% at var(--origin),rgba(40,200,248,.14),transparent 68%),
    var(--night);
  padding:2rem 1.85rem 1.7rem;
  min-height:268px;
  display:flex;flex-direction:column;
  color:#fff;
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.cell:hover{transform:translateY(-4px);border-color:rgba(40,200,248,.45)}

/* the lattice */
.cell::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(40,200,248,.5) 1px,transparent 1.5px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(112% 88% at var(--origin),#000 0%,rgba(0,0,0,.28) 42%,transparent 76%);
  mask-image:radial-gradient(112% 88% at var(--origin),#000 0%,rgba(0,0,0,.28) 42%,transparent 76%);
  opacity:.85;transition:opacity .6s var(--ease);
}
.cell:hover::before{opacity:1}

/* The lattice drifts upward by exactly one tile and loops, so the
   points read as drones holding station rather than as wallpaper.
   Each card is offset so the four are never in lockstep. */
@keyframes lattice-drift{from{background-position:0 0}to{background-position:0 -15px}}
.cell::before{animation:lattice-drift 14s linear infinite}
.cell:nth-child(2)::before{animation-duration:17s;animation-delay:-4s}
.cell:nth-child(3)::before{animation-duration:12s;animation-delay:-7s}
.cell:nth-child(4)::before{animation-duration:19s;animation-delay:-2s}

/* A slow swell on the corner light, as if the formation is breathing. */
@keyframes cell-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.cell-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(58% 46% at var(--origin),rgba(40,200,248,.2),transparent 70%);
  animation:cell-breathe 9s ease-in-out infinite;
}
.cell:nth-child(2) .cell-glow{animation-duration:11s;animation-delay:-3s}
.cell:nth-child(3) .cell-glow{animation-duration:8s;animation-delay:-5s}
.cell:nth-child(4) .cell-glow{animation-duration:12s;animation-delay:-1s}

/* The brand gradient as a thread along the top edge. It finishes
   drawing on hover, which is the formation completing. */
.cell::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:var(--grad);
  transform:scaleX(.16);transform-origin:left;
  transition:transform .6s var(--ease);
}
.cell:hover::after{transform:scaleX(1)}

.cell > *{position:relative;z-index:2}
.cell h3{font-family:var(--display);font-size:1.5rem;font-weight:400;letter-spacing:-.01em;margin-bottom:.55rem}
.cell p{font-size:.88rem;color:rgba(238,241,248,.72);line-height:1.7;max-width:34ch}
.cell-link{
  margin-top:auto;padding-top:1.4rem;
  font-size:.82rem;font-weight:600;color:var(--cyan);
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
}
.cell-link::after{content:'→';transition:transform .35s var(--ease)}
.cell:hover .cell-link::after{transform:translateX(5px)}

/* The lattice gathers at a different corner on each card. */
.cell:nth-child(1){--origin:88% 8%}
.cell:nth-child(2){--origin:10% 10%}
.cell:nth-child(3){--origin:12% 92%}
.cell:nth-child(4){--origin:90% 88%}

@media (max-width:760px){
  .bento{grid-template-columns:1fr;gap:.8rem}
  .cell{min-height:218px;padding:1.75rem 1.5rem 1.5rem}
  .cell h3{font-size:1.35rem}
}

/* ============================================================ QUOTES */
.quotes{display:grid;gap:0;border-top:1px solid var(--line)}
.quote{padding-block:clamp(1.9rem,3.2vw,2.75rem);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:1.5rem 2.5rem;align-items:end}
.quote blockquote{font-family:var(--display);font-size:clamp(1.1rem,1.9vw,1.55rem);line-height:1.45;color:var(--ink);max-width:33ch}
.quote figcaption{text-align:right;flex-shrink:0}
.quote figcaption b{display:block;font-size:.88rem;font-weight:600}
.quote figcaption span{display:block;font-size:.77rem;color:var(--ink-3);margin-top:.18rem}
@media (max-width:760px){.quote{grid-template-columns:1fr;gap:1rem}.quote figcaption{text-align:left}}

/* ============================================================ WHY */
.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.25rem,5vw,4.25rem)}
.why-list{display:grid;gap:0;border-top:1px solid var(--line)}
.why-item{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;padding-block:1.4rem;border-bottom:1px solid var(--line)}
.why-item b{font-family:var(--sans);font-size:.7rem;color:var(--accent-ink);padding-top:.3rem}
.why-item h3{font-size:.98rem;font-weight:600;margin-bottom:.3rem}
.why-item p{font-size:.86rem;color:var(--ink-2);line-height:1.7;max-width:50ch}
@media (max-width:980px){.why-grid{grid-template-columns:1fr;gap:2rem}}

/* ============================================================ PROCESS */
.steps{position:relative;display:grid;gap:0;padding-left:2.4rem}
.steps::before{content:'';position:absolute;left:7px;top:.75rem;bottom:.75rem;width:1px;background:var(--line-2)}
.steps::after{content:'';position:absolute;left:7px;top:.75rem;width:1px;height:var(--progress,0%);background:var(--grad);transition:height .15s linear}
.step{position:relative;padding-block:1.5rem;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step::before{content:'';position:absolute;left:calc(-2.4rem + 3px);top:1.9rem;width:9px;height:9px;border-radius:var(--pill);background:var(--paper);border:1px solid var(--line-2);transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.step.is-on::before{background:var(--cyan);border-color:var(--cyan)}
.step-k{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.step h3{font-size:1.08rem;font-weight:600;margin-bottom:.45rem;letter-spacing:-.01em}
.step p{font-size:.86rem;color:var(--ink-2);line-height:1.75;max-width:54ch}
@media (max-width:620px){.steps{padding-left:1.85rem}.step::before{left:calc(-1.85rem + 3px)}}

/* ============================================================ FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.25rem,5vw,4.25rem);align-items:start}
.faq-intro{position:sticky;top:calc(var(--nav-h) + 2.5rem)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding-block:1.25rem;font-size:.98rem;font-weight:500;color:var(--ink);transition:color .3s var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-ink)}
.faq-item summary::after{content:'';flex-shrink:0;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .35s var(--ease)}
.faq-item[open] summary{color:var(--accent-ink)}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-item .answer{padding-bottom:1.3rem;font-size:.88rem;color:var(--ink-2);line-height:1.8;max-width:60ch}
@media (max-width:980px){.faq-grid{grid-template-columns:1fr;gap:2rem}.faq-intro{position:static}}

/* ============================================================ CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2.25rem,5vw,4.25rem);align-items:center}
.contact-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.9rem}
.contact-list{border-top:1px solid var(--line)}
.contact-row{display:grid;grid-template-columns:6.5rem 1fr;gap:1.4rem;padding-block:1rem;border-bottom:1px solid var(--line);align-items:baseline}
.contact-row dt{font-family:var(--sans);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.contact-row dd{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.7}
.contact-row dd a:hover{color:var(--cyan)}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr;gap:2rem}}
@media (max-width:520px){.contact-row{grid-template-columns:1fr;gap:.2rem}}

/* ============================================================ FOOTER */
.foot{background:var(--night-2);color:#eef1f8;padding-block:3.25rem 2rem;border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.35fr 1fr;gap:2.5rem}
.foot-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.foot-brand img{width:36px;height:36px;border-radius:10px}
.foot-brand b{display:block;font-size:1.02rem}
.foot-brand b + span{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(238,241,248,.55)}
.foot p{font-size:.84rem;color:rgba(238,241,248,.62);line-height:1.75;max-width:40ch}
.foot h4{font-size:.66rem;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,248,.52);margin-bottom:.9rem}
.foot li{margin-bottom:.5rem}
.foot li a{font-size:.85rem;color:rgba(238,241,248,.76);transition:color .3s var(--ease)}
.foot li a:hover{color:var(--cyan)}
/* Thirty city links were a phone screen of footer on their own, so they
   live inside their state now. Every page is still linked, and still in
   the markup when collapsed, so nothing is lost to a crawler. */
.foot-pan{font-size:.8rem;color:rgba(238,241,248,.72);margin:-.2rem 0 1rem}
.foot-states{display:grid;grid-template-columns:1fr 1fr;gap:0 1.3rem;align-content:start}
.foot-state{border-bottom:1px solid rgba(255,255,255,.08)}
.foot-state summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding-block:.5rem;font-size:.82rem;color:rgba(238,241,248,.76);
  transition:color .3s var(--ease);
}
.foot-state summary::-webkit-details-marker{display:none}
.foot-state summary::after{content:'+';color:var(--cyan);font-size:.9rem;line-height:1;flex-shrink:0}
.foot-state[open] summary::after{content:'−'}
.foot-state summary:hover{color:var(--cyan)}
.foot-state ul{padding:0 0 .55rem .85rem}
.foot-state li{margin-bottom:.42rem}
.foot-state li a{font-size:.79rem}
@media (max-width:620px){.foot-states{grid-template-columns:1fr}}
.social{display:flex;gap:.5rem;margin-top:1.25rem}
.social a{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:var(--pill);color:rgba(238,241,248,.7);transition:color .3s var(--ease),border-color .3s var(--ease)}
.social a:hover{color:var(--cyan);border-color:var(--cyan)}
.foot-base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08);font-size:.76rem;color:rgba(238,241,248,.52)}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot-grid{grid-template-columns:1fr;gap:2rem}}

/* ============================================================ STICKY */
.sticky-contact{position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;display:flex;flex-direction:column;gap:.5rem}
.sticky-contact a{width:48px;height:48px;border-radius:var(--pill);display:grid;place-items:center;box-shadow:0 10px 24px rgba(5,7,11,.4);transition:transform .35s var(--ease)}
.sticky-contact a:hover{transform:translateY(-3px) scale(1.04)}
.sticky-call{background:var(--cyan)}

/* ============================================================ ZOOMABLE STILLS
   A photograph the size of a thumbnail is a promise that there is a bigger
   one behind it. The button is the whole tile so the target is generous. */
.zoom{
  display:block;width:100%;padding:0;border:0;background:none;
  border-radius:var(--r);overflow:hidden;cursor:zoom-in;
}
.zoom:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sticky-wa{background:#25d366}

/* ============================================================ MOTION */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-copy > *{animation:rise .9s var(--ease) backwards}
.hero-copy > *:nth-child(1){animation-delay:.06s}
.hero-copy > *:nth-child(2){animation-delay:.16s}
.hero-copy > *:nth-child(3){animation-delay:.26s}
.hero-copy > *:nth-child(4){animation-delay:.36s}
.hero-asset{animation:rise 1.05s var(--ease) .3s backwards}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .marquee-track{animation:none;transform:none}
  .cell::before,.cell-glow{animation:none}
  .steps::after{display:none}
}

/* ============================================================ SEO HEADINGS
   The H1 carries the words people actually search for; the line that
   gives the page its character sits under it and keeps the visual
   weight. Both are real text, both are visible, neither is hidden. */
.hero-kw{
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  letter-spacing:.06em;color:var(--cyan);
  margin-bottom:.85rem;
}
.hero-brand{color:#fff;margin-bottom:1.3rem}
.hero-brand em{color:var(--cyan);font-style:italic;line-height:1.15;padding-bottom:.06em;display:inline-block}
@media (max-width:560px){.hero-kw{font-size:.88rem}}

/* ============================================================ LOCATIONS
   Thirty pages that previously had no route in from anywhere but the
   footer. Grouped by region because a reader looking for Ludhiana is
   not scanning an alphabetical list of thirty. */
.geo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.2rem 1.6rem}
.geo-group h3{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:.7rem;margin-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.geo-group li{margin-bottom:.55rem}
.geo-group a{
  font-size:.86rem;color:var(--ink-2);line-height:1.5;
  transition:color .3s var(--ease),padding-left .3s var(--ease);
  display:inline-block;
}
.geo-group a:hover{color:var(--accent-ink);padding-left:.25rem}

/* Nearby-city links: a row of plain destinations, not another card grid. */
.nears{display:flex;flex-wrap:wrap;gap:.6rem}
.near{
  font-size:.86rem;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--pill);padding:.55rem 1.1rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.near:hover{color:var(--accent-ink);border-color:var(--accent-ink)}

/* Occasions: four plain rows, one line each, written per place. These
   replaced four identical cards that were the same copy on all thirty
   city pages. */
.occs{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.4rem}
.occ h3{font-size:.95rem;font-weight:600;margin-bottom:.35rem;padding-top:.95rem;border-top:1px solid var(--line)}
.occ h3 a{color:var(--accent-ink);transition:opacity .3s var(--ease)}
.occ h3 a:hover{opacity:.72}
.occ p{font-size:.88rem;color:var(--ink-2);line-height:1.7}
@media (max-width:700px){.occs{grid-template-columns:1fr;gap:1.3rem}}