/* Mesh Labz – image-led home sections and the shared footer. Builds on home.css. */

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: clamp(72px, 10vw, 140px) 0 0; }

.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(24px, 3.5vw, 40px); }
.band-head .eyebrow { display: block; color: var(--muted); margin-bottom: .8rem; }
.band-head h2 { margin: 0; font: 700 clamp(2rem, 4.6vw, 3.6rem)/1 var(--f-head); letter-spacing: -0.03em; }
.band-link { color: var(--muted); display: inline-flex; align-items: center; gap: .6rem; transition: color .2s; }
.band-link:hover { color: var(--text); }
.band-link i { font-style: normal; display: inline-block; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.band-link:hover i { transform: translateX(4px); }

/* ---------- Showreel ---------- */
.reel { position: relative; overflow: hidden; background: #05070a; aspect-ratio: 16 / 9; width: 100%; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.75) 100%); }
.reel-label { position: absolute; z-index: 1; left: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); right: clamp(16px, 3vw, 36px); display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.reel-label h2 { margin: 0; font: 700 clamp(1.8rem, 4.4vw, 3.4rem)/1 var(--f-head); letter-spacing: -0.03em; }
.reel-label .mono { color: #c9d4de; }
.reel-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bright); margin-right: .55rem; box-shadow: 0 0 0 0 rgba(26,155,230,.6); animation: pulse 2.4s ease-out infinite; vertical-align: 1px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(26,155,230,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(26,155,230,0); } }

/* ---------- Selected work mosaic ---------- */
.mosaic {
  display: grid; gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 17vw, 240px);
  grid-template-areas:
    "a a a a b b"
    "a a a a b b"
    "c c c d d d"
    "c c c d d d"
    "e e e e e e";
}
.tile { position: relative; overflow: hidden; display: block; background: #0a0d11; isolation: isolate; }
.tile:nth-child(1) { grid-area: a; } .tile:nth-child(2) { grid-area: b; } .tile:nth-child(3) { grid-area: c; }
.tile:nth-child(4) { grid-area: d; } .tile:nth-child(5) { grid-area: e; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .6s; z-index: -2; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%); transition: opacity .5s; }
.tile .cap { position: absolute; left: clamp(14px, 2vw, 26px); right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 24px); }
.tile .kind { display: block; color: #b9c6d2; margin-bottom: .45rem; }
.tile h3 { margin: 0; font: 700 clamp(1.15rem, 2vw, 1.75rem)/1.1 var(--f-head); letter-spacing: -0.02em; }
.tile .go {
  position: absolute; top: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18);
  opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.22, 1, .36, 1), background .3s;
}
.tile .go svg { width: 16px; height: 16px; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }
.tile:hover .go, .tile:focus-visible .go { opacity: 1; transform: none; background: var(--bright); border-color: var(--bright); }
.tile-art { background: radial-gradient(70% 80% at 50% 70%, #10304c 0%, #05080c 75%); }
.tile-art img { object-fit: contain; object-position: center bottom; padding-top: 6%; }
.tile-wide img { object-position: center 40%; }
.tile-right img { object-position: 72% center; }

/* ---------- More renders: three columns of mixed heights ---------- */
.renders { columns: 3 280px; column-gap: clamp(10px, 1.4vw, 16px); }
.renders figure { break-inside: avoid; margin: 0 0 clamp(10px, 1.4vw, 16px); position: relative; overflow: hidden; background: #0a0d11; }
.renders img { display: block; width: 100%; height: auto; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.renders figure:hover img { transform: scale(1.04); }
.renders figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1rem .9rem;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78));
  color: #dfe7ee; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.renders figure:hover figcaption { opacity: 1; transform: none; }
@media (hover: none) { .renders figcaption { opacity: 1; transform: none; } }
/* Home Project stills = the My work thumbnails: one tall still beside a 2x2, each links to its project */
.stills-grid { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.stills-grid figure { margin: 0; }
.stills-grid a { display: block; height: 100%; }
.stills-grid img { height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.stills-grid .tall { grid-row: span 2; }
.stills-grid .tall img { aspect-ratio: auto; object-position: center 25%; }
@media (max-width: 860px) {
  .stills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stills-grid .tall { grid-column: 1 / -1; grid-row: auto; }
  .stills-grid .tall img { aspect-ratio: 1 / 1; }
}
@media (max-width: 520px) { .stills-grid { grid-template-columns: 1fr; } }

/* ---------- Free guide band ---------- */
.guide-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(36px, 6vw, 80px) clamp(20px, 5vw, 72px);
  background: radial-gradient(60% 90% at 25% 60%, rgba(31,111,181,.35) 0%, rgba(14,59,94,.18) 40%, rgba(0,0,0,0) 75%), #05080c;
  border: 1px solid var(--line);
}
.fan { position: relative; height: clamp(300px, 36vw, 470px); }
.fan img {
  position: absolute; top: 50%; left: 50%; width: clamp(170px, 20vw, 270px); height: auto;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.fan img:nth-child(1) { transform: translate(-112%, -46%) rotate(-11deg); }
.fan img:nth-child(2) { transform: translate(-50%, -52%) rotate(0deg); z-index: 2; }
.fan img:nth-child(3) { transform: translate(12%, -46%) rotate(11deg); }
.guide-band:hover .fan img:nth-child(1) { transform: translate(-122%, -48%) rotate(-14deg); }
.guide-band:hover .fan img:nth-child(3) { transform: translate(22%, -48%) rotate(14deg); }
.guide-band .eyebrow { display: block; color: var(--bright); margin-bottom: .9rem; }
.guide-band h2 { margin: 0 0 .9rem; font: 700 clamp(2rem, 4.4vw, 3.4rem)/1 var(--f-head); letter-spacing: -0.03em; }
.guide-band p { margin: 0; color: #c3ced9; }
.guide-band .guide-form { border-top: 0; padding-top: 0; margin-top: 1.6rem; }

/* ---------- Closing call to action ---------- */
.closing { text-align: center; padding: clamp(80px, 12vw, 170px) 0 clamp(64px, 9vw, 120px); }
.closing .eyebrow { color: var(--muted); display: block; margin-bottom: 1.2rem; }
.closing h2 { margin: 0 auto; max-width: 14ch; font: 700 clamp(2.6rem, 7.4vw, 6.2rem)/.95 var(--f-head); letter-spacing: -0.04em; }
.closing h2 em { font-style: normal; color: var(--bright); }
.closing .row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); }
.closing .row .btn { min-width: 210px; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) 0 28px; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.foot-grid .brand { margin-bottom: 1rem; }
.foot-grid p { margin: 0; max-width: 30ch; }
.foot-grid h4 { margin: 0 0 1rem; color: var(--text); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot-grid a:hover { color: var(--text); }
.foot-base { margin-top: clamp(36px, 5vw, 56px); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }

/* ---------- Gentle fade-up as things scroll into view ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Smaller screens ---------- */
@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 300px);
    grid-template-areas: "a a" "a a" "b c" "b d" "e e"; }
  .guide-band { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 64vw; grid-template-areas: "a" "b" "c" "d" "e"; }
  .reel-label { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-dot, .chip, .scroll-cue span { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Hero, home page only: giant title behind the character ---------- */
.hero { align-items: end; padding-bottom: clamp(96px, 12vh, 140px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 27% 62%, rgba(26, 155, 230, .26) 0%, rgba(14, 59, 94, .14) 45%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(60% 40% at 50% 100%, rgba(14, 59, 94, .35) 0%, rgba(0, 0, 0, 0) 70%);
}
.hero-title {
  position: absolute; z-index: 0; left: 0; right: 0; top: clamp(84px, 11vh, 120px);
  margin: 0; text-align: center; white-space: nowrap; pointer-events: none;
  font: 700 clamp(4rem, 17.4vw, 17rem)/.82 var(--f-head); letter-spacing: -0.055em; text-transform: uppercase;
}
/* The gradient sits on each word (not the heading) so it still clips to the letters while they animate in. */
.hero-title span {
  display: inline-block; padding: 0 .02em;
  background: linear-gradient(180deg, #f5f8fb 0%, #c9d6e2 38%, rgba(140, 170, 196, .55) 70%, rgba(26, 155, 230, .12) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero .figure { z-index: 1; height: min(70vh, 760px); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); }
.hero .panel { z-index: 2; }
.hero .tag { border-radius: 999px; padding: .6em 1.1em; color: #cfe6f7; border-color: rgba(26, 155, 230, .45); background: rgba(26, 155, 230, .08); }
.hero .sub { margin-top: 1.1rem; }
.hero .lede { margin: 1rem 0 1.8rem; }

/* Frosted highlight chips floating beside the character */
.chips { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.05rem; border-radius: 999px; font-size: .92rem; color: #dbe6ef; white-space: nowrap;
  background: rgba(14, 22, 32, .55); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  animation: float 7s ease-in-out infinite;
}
.chip b { font: 700 1rem/1 var(--f-head); color: #fff; letter-spacing: -0.01em; }
.chip-1 { left: max(var(--gutter), 3vw); top: 52%; }
.chip-2 { left: 37vw; top: 64%; animation-delay: -2.4s; }
.chip-3 { left: 30vw; top: 41%; animation-delay: -4.6s; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pulse-green 2.2s ease-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }

/* Scroll cue */
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--muted); font-size: .68rem; }
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(255,255,255,0), var(--bright)); animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }

/* Load-in: title, character, panel and chips rise in one after another */
@media (prefers-reduced-motion: no-preference) {
  .hero-title span { animation: rise 1.2s cubic-bezier(.22, 1, .36, 1) both; }
  .hero-title span + span { animation-delay: .08s; }
  .hero .figure { animation: rise-fig 1.4s .15s cubic-bezier(.22, 1, .36, 1) both; }
  .hero .panel > * { animation: rise .9s cubic-bezier(.22, 1, .36, 1) both; }
  .hero .panel > :nth-child(1) { animation-delay: .45s; } .hero .panel > :nth-child(2) { animation-delay: .52s; }
  .hero .panel > :nth-child(3) { animation-delay: .59s; } .hero .panel > :nth-child(4) { animation-delay: .66s; }
  .hero .panel > :nth-child(5) { animation-delay: .73s; }
  .chips { animation: fade 1s .9s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes rise-fig { from { opacity: 0; transform: translateY(50px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
  .hero { padding-bottom: 72px; align-items: start; align-content: start; min-height: 0; }
  .hero .figure { height: auto; margin-top: 21vw; }   /* the head just overlaps the bottom of the title */
  .hero-title { top: 132px; font-size: 17vw; }
  .chips, .scroll-cue { display: none; }
}
@media (max-width: 520px) { .hero-title { top: 168px; } }

/* ---------- Instagram: profile card + three tutorial reels ---------- */
.ig-block { padding: clamp(22px, 3.5vw, 40px); border-radius: var(--r-md); border: 1px solid var(--line);   /* same card look as the Lusso overview panel */
  background: linear-gradient(180deg, rgba(26,155,230,.08), rgba(26,155,230,0) 55%), var(--field); }
.ig-profile { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 28px); flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.ig-avatar { width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); border-radius: 50%; object-fit: cover; flex: none; background: #000;
  border: 2px solid transparent; background-image: linear-gradient(#000, #000), linear-gradient(135deg, var(--bright), #00c8f0);
  background-origin: border-box; background-clip: padding-box, border-box; }
.ig-who { flex: 1; min-width: 220px; }
.ig-who .eyebrow { display: block; color: var(--muted); margin-bottom: .35rem; }
.ig-who h2 { margin: 0; font: 500 clamp(1rem, 1.3vw, 1.15rem)/1.45 var(--f-body); color: #c9d4de; letter-spacing: 0; }   /* one quiet line beside the avatar */
.ig-stats { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(18px, 3vw, 36px); }
.ig-stats b { display: block; font: 700 clamp(1.15rem, 2vw, 1.5rem)/1.1 var(--f-head); }
.ig-stats span { color: var(--muted); font-size: .9rem; }
.ig-follow { display: inline-flex; align-items: center; gap: .6rem; padding: 1.35em 2.6em; font-size: .95rem; cursor: pointer; transition: transform .2s, box-shadow .2s, background .15s; }
.ig-follow:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(26, 155, 230, .35); }
.ig-follow:active { transform: none; }
.ig-who .ig-follow { margin-top: .9rem; }   /* button sits under the line */
.ig-follow svg { width: 1.1em; height: 1.1em; }
.ig-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.ig-reel { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #0a0d11; isolation: isolate; }
.ig-reel img { width: 100%; height: auto; aspect-ratio: 336 / 577; object-fit: cover; object-position: center bottom; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.ig-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.92)); }
.ig-reel:hover img { transform: scale(1.05); }
.ig-play { position: absolute; z-index: 1; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(14,22,32,.6); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.ig-play svg { width: 14px; height: 14px; margin-left: 2px; color: #fff; }
.ig-cap { position: absolute; z-index: 1; left: clamp(14px, 1.8vw, 22px); right: clamp(14px, 1.8vw, 22px); bottom: clamp(16px, 2vw, 26px); font: 700 clamp(1.25rem, 2.3vw, 2.1rem)/1.08 var(--f-head); letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
@media (max-width: 760px) { .ig-reels { grid-template-columns: 1fr 1fr 1fr; } .ig-reels { grid-template-columns: 1fr; } .ig-reel img { aspect-ratio: 4 / 3; object-position: center 70%; } .ig-follow { width: 100%; justify-content: center; } }

/* Home closing with a photo of Zubin beside "Project enquiries" */
.closing-me .wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1080px; }
.closing-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.closing-me .closing-text { text-align: left; }
.closing-me h2 { margin: 0; max-width: none; }
.closing-me .row { justify-content: flex-start; }
@media (max-width: 760px) {
  .closing-me .wrap { grid-template-columns: 1fr; justify-items: center; }
  .closing-photo { max-width: 280px; }
  .closing-me .closing-text { text-align: center; }
  .closing-me .row { justify-content: center; }
}

/* Wide screens: keep the character, chips and text inside a centred 1440px stage instead of the far screen edges */
@media (min-width: 861px) {
  .hero { --side: max(0px, (100vw - 1440px) / 2); padding-left: calc(var(--gutter) + var(--side)); padding-right: calc(var(--gutter) + var(--side)); }
  .hero .figure { left: calc(var(--side) + max(var(--gutter), min(4vw, 58px))); max-width: min(52vw, 750px); }
  .chip-1 { left: calc(var(--side) + max(var(--gutter), min(3vw, 43px))); }
  .chip-2 { left: calc(var(--side) + min(37vw, 533px)); }
  .chip-3 { left: calc(var(--side) + min(30vw, 432px)); }
}