*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0d0a14;
  --deep:#13101e;
  --violet:#2a1f4e;
  --indigo:#1a1535;
  --rose:#e8547a;
  --rose2:#f2789a;
  --teal:#2dd4c0;
  --teal2:#5ef0de;
  --cream:#f5f0e8;
  --muted:#7a7190;
  --border:rgba(232,84,122,0.15);
  --borderT:rgba(45,212,192,0.12);
}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:'Josefin Sans',sans-serif;overflow-x:hidden;cursor:none}
@media (hover:none), (pointer:coarse){
  body{cursor:auto}
  #cur,.cur-ring{display:none!important}
  .fpill,.arr,.fnav-btn,.fsub,.g-card,.lbox-arr,.lbox-close-btn,.lbox-thumb,.nav-hire,.s-pip{cursor:pointer}
}

/* ─── GRAIN OVERLAY ─── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.025;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ─── AMBIENT BG ORBS ─── */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(100px);animation:orb-drift 20s ease-in-out infinite}
.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(232,84,122,.18),transparent 70%);top:-200px;right:-150px;animation-delay:0s}
.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(45,212,192,.12),transparent 70%);bottom:-100px;left:-150px;animation-delay:-10s}
.orb3{width:400px;height:400px;background:radial-gradient(circle,rgba(42,31,78,.8),transparent 70%);top:50%;left:30%;animation-delay:-5s}
@keyframes orb-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.05)}66%{transform:translate(-40px,30px) scale(.95)}}

/* ─── CURSOR ─── */
#cur{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);transition:transform .1s}
.cur-dot{width:8px;height:8px;background:var(--rose);border-radius:50%;transition:all .3s}
.cur-ring{position:fixed;width:44px;height:44px;border:1px solid rgba(232,84,122,.5);border-radius:50%;z-index:9998;pointer-events:none;transform:translate(-50%,-50%);transition:width .4s,height .4s,border-color .4s cubic-bezier(.16,1,.3,1)}
body:has(a:hover) .cur-ring,body:has(button:hover) .cur-ring{width:70px;height:70px;border-color:var(--rose)}
body:has(.g-card:hover) .cur-dot{background:var(--teal);box-shadow:0 0 20px var(--teal)}
body:has(.g-card:hover) .cur-ring{border-color:var(--teal);width:80px;height:80px}

/* ─── NAV ─── */
nav{position:fixed;top:0;inset-inline:0;z-index:500;padding:1.8rem 5rem;display:flex;align-items:center;justify-content:space-between;transition:all .5s}
nav.stuck{background:rgba(13,10,20,.88);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:1.2rem 5rem}
.logo{font-family:'Italiana',serif;font-size:2rem;letter-spacing:.12em;color:var(--cream);text-decoration:none;position:relative}
.logo::after{content:'PHOTOGRAPHY';position:absolute;left:0;bottom:-8px;font-family:'Josefin Sans',sans-serif;font-size:.45rem;letter-spacing:.55em;color:var(--rose);font-weight:300}
.nav-c{display:flex;align-items:center;gap:3.5rem}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-size: 15px;letter-spacing: 1px;text-transform:uppercase;color: #ffffff;text-decoration:none;transition:color .3s;font-weight: 400;}
.nav-links a:hover{color:var(--cream)}
.nav-hire{padding:.65rem 1.8rem;border: 1px solid #ffffff;color: #0d0a14;font-size: 13px;letter-spacing: 3px;text-transform:uppercase;text-decoration:none;font-weight:400;transition:all .4s;position:relative;overflow:hidden;background-color: #32e7e7;line-height: 23px;}
.nav-hire::before{content:'';position:absolute;inset:0;background:var(--rose);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.nav-hire:hover{color:var(--ink)}
.nav-hire:hover::before{transform:scaleY(1)}
.nav-hire span{position:relative}

/* ─── HERO SLIDER ─── */
.hero{position:relative;height:100vh;overflow:hidden}
/* animated mesh bg */
.hero-mesh{position:absolute;inset:0;background:linear-gradient(135deg,#0d0a14 0%,#1a1535 40%,#13101e 100%);z-index:0}
.hero-mesh::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(232,84,122,.03) 0px,transparent 1px,transparent 80px,rgba(232,84,122,.03) 81px),repeating-linear-gradient(0deg,rgba(45,212,192,.02) 0px,transparent 1px,transparent 80px,rgba(45,212,192,.02) 81px)}

.slides-wrap{position:absolute;inset:0;z-index:1}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
.slide.on{opacity:1;z-index:2}
.s-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);transition:transform 9s ease;filter:brightness(.45) saturate(.8)}
.slide.on .s-img{transform:scale(1)}
/* gradient masks */
.s-mask{position:absolute;inset:0;}
/* diagonal accent line */
.s-accent{position:absolute;top:0;right:25%;width:1px;height:100%;background:linear-gradient(to bottom,transparent,var(--rose),transparent);opacity:.2;transform:rotate(12deg);transform-origin:top center}

.s-img-2{}
.s-img-3{}
.soc-links { display: flex; align-items: center; gap: 10px; }

.soc-a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.soc-a svg { width: 16px; height: 16px; fill: currentColor; display: block; }

.soc-a:hover { transform: translateY(-2px); color: #fff; }

/* Individual hover colours */
.soc-a.soc-ig:hover  { border-color: #e1306c; background: rgba(225,48,108,0.12); color: #e1306c; }
.soc-a.soc-fb:hover  { border-color: #1877f2; background: rgba(24,119,242,0.12); color: #1877f2; }
.soc-a.soc-yt:hover  { border-color: #ff0000; background: rgba(255,0,0,0.12);    color: #ff0000; }
.soc-a.soc-li:hover  { border-color: #0a66c2; background: rgba(10,102,194,0.12); color: #0a66c2; }

.slide-text{position:absolute;left:9%;bottom:18%;z-index:5;max-width:680px}
.s-tag{display:inline-flex;align-items:center;gap:.8rem;font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:var(--teal);margin-bottom:2rem;opacity:0;transform:translateY(20px);transition:all .7s .4s}
.slide.on .s-tag{opacity:1;transform:translateY(0)}
.s-tag::before{content:'';width:28px;height:1px;background:var(--teal)}
.s-num{position:absolute;right:8%;top:50%;transform:translateY(-50%);font-family:'Italiana',serif;font-size:clamp(8rem,15vw,14rem);color:rgba(232,84,122,.07);line-height:1;pointer-events:none;z-index:3;transition:all .8s}
.slide-h{font-family:'Italiana',serif;font-size:clamp(4rem,9vw,8.5rem);line-height:.88;letter-spacing:-.01em;margin-bottom:1.8rem;overflow:hidden}
.slide-h span{display:block;opacity:0;transform:translateY(110%);transition:all 1s cubic-bezier(.16,1,.3,1)}
.slide-h span.r{color:var(--rose);font-style:italic}
.slide-h span.t{color:var(--teal)}
.slide.on .slide-h span:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.5s}
.slide.on .slide-h span:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.7s}
.slide.on .slide-h span:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.9s}
.slide-p{font-size: 20px;letter-spacing: 0px;color: rgb(255 255 255);line-height: 29px;max-width:380px;font-weight:300;opacity:0;transform:translateY(18px);transition:all .7s 1.1s}
.slide.on .slide-p{opacity:1;transform:translateY(0)}
.slide-btns{display:flex;gap:1.5rem;margin-top:2.5rem;opacity:0;transition:opacity .6s 1.4s}
.slide.on .slide-btns{opacity:1}
.btn-r{display:inline-flex;align-items:center;gap:.8rem;padding:1rem 2.5rem;background: linear-gradient(135deg, #32e7e7, rgba(45,212,192,.4));color:#fff;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;font-weight:600;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:all .3s;box-shadow:0 20px 60px rgba(232,84,122,.3)}
.btn-r:hover{transform:translateY(-3px);box-shadow:0 30px 80px rgba(232,84,122,.45)}
.btn-o{display:inline-flex;align-items:center;gap:.6rem;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,232,.6);text-decoration:none;transition:color .3s;font-weight:300}
.btn-o:hover{color:var(--teal)}
.btn-o .ic{width:34px;height:34px;border:1px solid rgba(245,240,232,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s}
.btn-o:hover .ic{border-color:var(--teal);background:rgba(45,212,192,.1)}

/* Slider controls */
.s-nav{position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.s-pip{width:2px;height:28px;background:rgba(245,240,232,.12);cursor:none;transition:all .4s;position:relative;overflow:hidden}
.s-pip.on{background:rgba(232,84,122,.2)}
.s-pip::after{content:'';position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(var(--rose),var(--rose2))}
.s-pip.on::after{animation:pip-fill 6s linear forwards}
@keyframes pip-fill{to{height:100%}}
.s-ctr{font-family:'Italiana',serif;font-size:.9rem;color:var(--muted);margin-top:.8rem;text-align:center}
.arr-wrap{position:absolute;bottom:3.5rem;right:4%;z-index:10;display:flex;gap:.8rem}
.arr{width:44px;height:44px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;cursor:none;transition:all .35s;color:var(--muted)}
.arr:hover{background:rgba(232,84,122,.1);border-color:rgba(232,84,122,.4);color:var(--cream)}
.s-progress{position:absolute;bottom:0;inset-inline:0;height:2px;z-index:10;background:rgba(255,255,255,.04)}
.s-progress-fill{height:100%;background:linear-gradient(90deg,var(--rose),var(--teal));animation:prog 6s linear infinite}
@keyframes prog{from{width:0%}to{width:100%}}
.scroll-nudge{position:absolute;bottom:2.5rem;left:9%;z-index:10;display:flex;align-items:center;gap:1rem;color:rgba(245,240,232,.3);font-size:.58rem;letter-spacing:.4em;text-transform:uppercase}
.s-wheel{width:20px;height:30px;border:1px solid rgba(255,255,255,.2);border-radius:10px;display:flex;justify-content:center;align-items:flex-start;padding-top:5px}
.s-ball{width:3px;height:5px;background:var(--rose);border-radius:3px;animation:wheel 2.2s ease infinite}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(12px);opacity:0}}

/* ─── RIBBON / MARQUEE ─── */
.ribbon{overflow:hidden;background: linear-gradient(90deg, #3d327a 0%, #1a1535 50%, #000000 100%);padding:.9rem 0;position:relative;z-index:2}
.ribbon-track{display:flex;gap:0;white-space:nowrap;animation:rib 18s linear infinite}
.ribbon-item{font-family:'Josefin Sans',sans-serif;font-size: 14px;letter-spacing: 2px;text-transform:uppercase;color:rgba(255,255,255,.85);padding: 0px 1.5rem;flex-shrink:0;line-height: 20px;}
.ribbon-item.dot{color:rgba(255,255,255,.4);padding:0 1rem}
@keyframes rib{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── SECTION BASE ─── */
section{position:relative;z-index:1;padding:8rem 5rem}
.eye{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.eye-line{width:24px;height:1px;background:var(--teal)}
.eye span{font-size:.58rem;letter-spacing:.5em;text-transform:uppercase;color:var(--teal);font-weight:300}
.big-h{font-family:'Italiana',serif;font-size: clamp(3.8rem,2.5vw,5rem);line-height:.95;letter-spacing:-.01em}
.big-h em{font-style:italic;color:var(--rose)}
.big-h .tc{color:var(--teal)}

/* ─── GALLERY ─── */
.gal-sec{background: linear-gradient(180deg, #ffffff 0%, #32e7e7);}
.gal-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;gap:2rem;flex-wrap:wrap}
.gal-see{font-size:.6rem;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s;display:flex;align-items:center;gap:.6rem}
.gal-see::after{content:'→';transition:transform .3s}
.gal-see:hover{color:var(--teal)}
.gal-see:hover::after{transform:translateX(5px)}

/* FILTER PILLS */
.filter-strip{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:3.5rem}
.fpill{padding:.55rem 1.5rem;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--muted);font-family:'Josefin Sans',sans-serif;font-size: 15px;letter-spacing: 0px;text-transform:uppercase;cursor:none;transition:all .35s;border-radius:100px;font-weight: 400;}
.fpill:hover{border-color:var(--rose);color:#000}
.fpill.on{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 8px 30px rgba(232,84,122,.35)}
.fpill.vid-btn.on{background:var(--teal);border-color:var(--teal);color:var(--ink);box-shadow:0 8px 30px rgba(45,212,192,.3)}
.fpill.vid-btn:hover{border-color:var(--teal);color:var(--teal)}

/* ─── EDITORIAL GALLERY GRID ─── */
/* True editorial: each card has its own explicit height via padding-bottom trick + absolute img */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  grid-template-rows:auto;
}

/* Every card: position relative, overflow hidden, img absolutely fills */
.g-card{
  position:relative;overflow:hidden;cursor:none;border-radius:3px;
  opacity:0;transform:translateY(40px);
  transition:opacity .7s,transform .7s cubic-bezier(.16,1,.3,1);
}
.g-card.vis{opacity:1;transform:translateY(0)}
.g-card.gone{opacity:0 !important;transform:scale(.92) !important;pointer-events:none;height:0 !important;padding:0 !important;margin:0 !important;overflow:hidden}

/* Inner aspect wrapper — gives each card its own height */
.g-card-inner{width:100%;height:100%;position:absolute;inset:0}

/* CARD SIZE CLASSES — column span + intrinsic height via min-height */
/* Row 1: hero + two stacked */
.gc-hero{grid-column:span 7; height:520px}
.gc-tall{grid-column:span 5; height:520px}

/* Row 2: three varied */
.gc-wide{grid-column:span 5; height:320px}
.gc-sq{grid-column:span 4;   height:320px}
.gc-slim{grid-column:span 3; height:320px}

/* Row 3: panorama + portrait */
.gc-pano{grid-column:span 8; height:400px}
.gc-port{grid-column:span 4; height:400px}

/* Row 4: small trio */
.gc-s1{grid-column:span 3; height:260px}
.gc-s2{grid-column:span 6; height:260px}
.gc-s3{grid-column:span 3; height:260px}

/* Row 5: full-width cinematic */
.gc-full{grid-column:span 12; height:440px}

.g-card img,.g-card video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s;
  filter:saturate(.8) brightness(.82) contrast(1.05);
}
.g-card:hover img,.g-card:hover video{
  transform:scale(1.07);
  filter:saturate(1.1) brightness(1) contrast(1);
}

/* Rose glow border on photo hover, teal on video */
.g-card.photo::after{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 0 rgba(232,84,122,0);
  transition:box-shadow .4s;z-index:3;pointer-events:none;border-radius:3px;
}
.g-card.photo:hover::after{box-shadow:inset 0 0 0 1.5px rgba(232,84,122,.6)}
.g-card.video::after{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 0 rgba(45,212,192,0);
  transition:box-shadow .4s;z-index:3;pointer-events:none;border-radius:3px;
}
.g-card.video:hover::after{box-shadow:inset 0 0 0 1.5px rgba(45,212,192,.7)}

/* Gradient veil */
.g-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(13,10,20,.88) 0%,rgba(13,10,20,.2) 45%,transparent 100%);
  opacity:0;transition:opacity .45s;
}
.g-card:hover .g-veil{opacity:1}

/* Meta info slide up */
.g-meta{
  position:absolute;bottom:0;left:0;right:0;padding:1.6rem 1.4rem;z-index:2;
  transform:translateY(14px);opacity:0;transition:all .45s cubic-bezier(.16,1,.3,1);
}
.g-card:hover .g-meta{transform:translateY(0);opacity:1}
.g-cat{font-size:.52rem;letter-spacing:.5em;text-transform:uppercase;color:var(--teal);margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem}
.g-cat::before{content:'';width:14px;height:1px;background:var(--teal)}
.g-title{font-family:'Italiana',serif;font-size:clamp(1.1rem,1.8vw,1.6rem);color:var(--cream);line-height:1.1}

/* Badge */
.g-badge{
  position:absolute;top:14px;right:14px;z-index:4;
  padding:.28rem .85rem;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;
  backdrop-filter:blur(12px);font-weight:400;border-radius:100px;
}
.badge-photo{background:rgba(13,10,20,.5);border:1px solid rgba(232,84,122,.35);color:var(--rose2)}
.badge-video{background:rgba(13,10,20,.5);border:1px solid rgba(45,212,192,.4);color:var(--teal2)}

/* Play button */
.g-play{
  position:absolute;top:50%;left:50%;z-index:2;
  transform:translate(-50%,-50%) scale(0);
  width:58px;height:58px;border-radius:50%;
  background:rgba(45,212,192,.92);color:#0d0a14;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);

  box-shadow:0 0 40px rgba(45,212,192,.4);
}
.g-card.video:hover .g-play{transform:translate(-50%,-50%) scale(1)}

/* ─── SPLIT ABOUT ─── */
.about-sec{background: rgb(253 253 253); overflow:hidden}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:80vh}
.about-img-side{position:relative;overflow:hidden}
.about-img-side img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.9);transition:transform 12s ease}
.about-img-side:hover img{transform:scale(1.04)}
/* decorative corner frames */
.about-img-side::before,.about-img-side::after{content:'';position:absolute;width:50px;height:50px;border-color:var(--rose);border-style:solid;z-index:2}
.about-img-side::before{top:2rem;left:2rem;border-width:1px 0 0 1px}
.about-img-side::after{bottom:2rem;right:2rem;border-width:0 1px 1px 0}
.about-txt-side{padding:6rem 5rem;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,var(--violet) 0%,var(--deep) 100%);position:relative;overflow:hidden}
.about-txt-side::before{content:'';position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(232,84,122,.08),transparent 70%)}
.about-txt-side::after{content:'';position:absolute;bottom:-60px;left:-60px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,192,.06),transparent 70%)}
.about-label{font-size:.58rem;letter-spacing:.55em;text-transform:uppercase;color:var(--teal);margin-bottom:2rem;display:flex;align-items:center;gap:.8rem}
.about-label::before{content:'';width:20px;height:1px;background:var(--teal)}
.about-h{font-family:'Italiana',serif;font-size:clamp(2.5rem,4vw,3.8rem);line-height:.95;letter-spacing:-.01em;margin-bottom:2rem}
.about-h em{font-style:italic;color:var(--rose)}
.about-p{font-size: 20px;letter-spacing:.04em;color: rgb(255 255 255);line-height:2;font-weight:300;margin-bottom:1.5rem;line-height: 34px;}
.about-divider{width:40px;height:1px;background:linear-gradient(90deg,var(--rose),var(--teal));margin:2rem 0}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top: -0.5rem;}
.a-stat-n{font-family:'Italiana',serif;font-size: 4rem;line-height:1;background: linear-gradient(135deg, var(--rose), #ff236c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.a-stat-l{font-size: 14px;letter-spacing: 0px;text-transform:uppercase;color: #ffffff;margin-top:.3rem;font-weight:300}
.cta-rose{display:inline-flex;align-items:center;gap:.8rem;margin-top:2.5rem;padding:1rem 2.5rem;border:1px solid var(--rose);color:var(--rose);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;transition:all .4s;font-weight:400;position:relative;overflow:hidden;z-index:1}
.cta-rose::before{content:'';position:absolute;inset:0;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:-1}
.cta-rose:hover{color:#fff}
.cta-rose:hover::before{transform:scaleX(1)}

/* ─── FEATURED CINEMATIC ─── */
.feat-sec{background:linear-gradient(180deg,var(--deep) 0%,var(--ink) 100%);padding:8rem 5rem}
.feat-scroll{display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2rem;scroll-snap-type:x mandatory}
.feat-scroll::-webkit-scrollbar{display:none}
.f-card{flex:0 0 420px;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:4px;cursor:none}
.f-card img{width:100%;height:580px;object-fit:cover;display:block;filter:brightness(.7) saturate(.85);transition:all .9s cubic-bezier(.16,1,.3,1)}
.f-card:hover img{filter:brightness(.9) saturate(1);transform:scale(1.04)}
.f-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,10,20,.95) 0%,rgba(13,10,20,.1) 60%)}
.f-n{position:absolute;top:1.5rem;left:1.5rem;font-family:'Italiana',serif;font-size:5rem;color:rgba(232,84,122,.12);line-height:1}
.f-info{position:absolute;bottom:0;left:0;right:0;padding:2rem;transform:translateY(8px);opacity:.6;transition:all .4s}
.f-card:hover .f-info{transform:translateY(0);opacity:1}
.f-cat{font-size:.56rem;letter-spacing:.45em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem}
.f-title{font-family:'Italiana',serif;font-size:1.8rem;line-height:1.05;color:var(--cream)}
.f-tag{display:inline-block;margin-top:.8rem;padding:.3rem .9rem;background:rgba(232,84,122,.15);border:1px solid rgba(232,84,122,.3);color:var(--rose2);font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;border-radius:100px}
.feat-nav{display:flex;gap:.8rem;margin-top:2.5rem}
.fnav-btn{width:44px;height:44px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;cursor:none;color:var(--muted);transition:all .35s;backdrop-filter:blur(10px)}
.fnav-btn:hover{border-color:var(--rose);color:var(--rose);background:rgba(232,84,122,.06)}

/* ─── SERVICES ─── */
.srv-sec{background: linear-gradient(180deg, #ffffff 0%, #32e7e7);}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:4rem;border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.04)}
.srv-item{background:var(--indigo);padding:3rem 2.5rem;transition:background .4s;position:relative;overflow:hidden}
.srv-item::before{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--rose),var(--teal));transition:width .6s cubic-bezier(.16,1,.3,1)}
.srv-item:hover{background:rgba(42,31,78,.8)}
.srv-item:hover::before{width:100%}
.srv-icon{width:48px;height:48px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--rose);margin-bottom:2rem;transition:border-color .3s}
.srv-item:hover .srv-icon{border-color:var(--rose)}
.srv-n{font-family:'Italiana',serif;font-size:1.6rem;margin-bottom:1rem;color:var(--cream)}
.srv-p{font-size: 19px;color: #ffffff;line-height: 33px;letter-spacing: 0px;font-weight:300}
.srv-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);text-decoration:none;transition:gap .3s}
.srv-link:hover{gap:.9rem}

/* ─── TESTIMONIAL CAROUSEL ─── */
.tst-sec{background:#fff;padding:8rem 5rem;text-align:center;overflow:hidden}
.tst-wrap{position:relative;overflow:hidden}
.tst-track{display:flex;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.tst-slide{flex:0 0 100%;padding:0 15%}
.tst-q{font-family:'Italiana',serif;font-size:clamp(1.6rem,3vw,2.5rem);font-style:italic;line-height:1.5;color:#000;margin-bottom:2rem;position:relative}
.tst-q::before{content:'\201C';position:absolute;top:-2.5rem;left:50%;transform:translateX(-50%);font-size:8rem;color:rgba(232,84,122,.08);line-height:1;font-family:'Italiana',serif}
.tst-author{font-size: 15px;letter-spacing:.45em;text-transform:uppercase;color:var(--rose);margin-bottom: 17px;}
.tst-role{font-size: 15px;letter-spacing: 0px;text-transform:uppercase;color: #000;margin-top:.3rem;font-weight:300}
.tst-dots{display:flex;gap:.5rem;justify-content:center;margin-top:3rem}
.tst-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(0 0 0 / 58%);
    transition: all .4s;
    cursor: none;
}
.tst-dot.on{width:24px;border-radius:3px;background:var(--rose)}

/* ─── CONTACT ─── */
.ct-sec{background:var(--ink);padding: 6rem 5rem;}
.ct-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:6rem;align-items:start}
.ct-left{}
.ct-big{font-family:'Italiana',serif;font-size: clamp(3rem,6vw,3.5rem);line-height:.9;margin:1.5rem 0 2.5rem}
.ct-big em{font-style:italic;color:var(--rose)}
.ct-big .tc{color:var(--teal)}
.ct-blurb{font-size: 23px;letter-spacing:.04em;color: #ffffff;line-height: 37px;font-weight:300;margin-bottom:3rem}
.ct-item{display:flex;align-items:flex-start;gap:1.2rem;padding:1.2rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ct-icon{width:38px;height:38px;border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;color: #32e7e7;transition:all .3s}
.ct-item:hover .ct-icon{background:rgba(232,84,122,.08);border-color:rgba(232,84,122,.4)}
.ct-lbl{font-size: 16px;letter-spacing: 0px;text-transform:uppercase;color: #32e7e7;font-weight:300;margin-bottom:.2rem}
.ct-val{font-size: 19px;color:var(--cream);letter-spacing:.02em;margin-top: 9px;}
/* form */
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.fg{position:relative}
.fg.full{grid-column:span 2}
.fi{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:0;color:var(--cream);font-family:'Josefin Sans',sans-serif;font-size:.82rem;padding:1.1rem 1.3rem;outline:none;transition:border-color .4s,background .4s;letter-spacing:.05em;font-weight:300}
.fi::placeholder{color:rgba(122,113,144,.6)}
.fi:focus{border-color:rgba(232,84,122,.4);background:rgba(232,84,122,.03)}
select.fi option{background:#1a1535}
textarea.fi{resize:none;height:110px}
.fsub{grid-column:span 2;background: linear-gradient(135deg, #32e7e7, rgba(45,212,192,.4));border:none;color:#fff;font-family:'Josefin Sans',sans-serif;font-size:.65rem;letter-spacing:.4em;text-transform:uppercase;font-weight:600;padding:1.2rem;cursor:none;transition:all .4s;position:relative;overflow:hidden;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));box-shadow:0 20px 50px rgba(232,84,122,.25)}
.fsub::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--teal),#1a8a7e);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.fsub:hover::before{transform:scaleX(1)}
.fsub:hover{box-shadow:0 20px 60px rgba(45,212,192,.25)}
.fsub span{position:relative;z-index:1}

/* ─── FOOTER ─── */
footer{background:#fff;border-top:1px solid rgba(232,84,122,.08);padding:5rem 5rem 2rem}
.ft-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap: 4rem;padding-bottom: 0rem;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:2.5rem}
.ft-logo-n{font-family:'Italiana',serif;font-size:2.5rem;color:var(--cream)}
.ft-logo-n span{color:var(--rose)}
.ft-tag{font-size:.55rem;letter-spacing:.5em;text-transform:uppercase;color:var(--muted);margin:.3rem 0 1rem}
.ft-p{font-size:.8rem;color: #ffffff;line-height:1.8;max-width:280px;font-weight:300}
.ft-h{font-size: 14px;letter-spacing: 2px;text-transform:uppercase;color: #e85454;margin-bottom:1.5rem;font-weight: 500;}
.ft-col a{display:block;font-size: 17px;color: rgb(255 255 255);text-decoration:none;margin-bottom:.75rem;transition:color .3s;letter-spacing:.04em;font-weight:300}
.ft-col a:hover{color:var(--cream)}
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: #000000;
    padding: 14px;
}
.ft-copy{font-size: 14px;letter-spacing: 0px;color: rgb(255 255 255);font-weight:300}
.ft-soc{display:flex;gap:.8rem}
.soc-a{width:36px;height:36px;border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);font-size:.6rem;letter-spacing:.05em;transition:all .35s;font-weight:300}
.soc-a:hover{border-color:var(--rose);color:var(--rose);background:rgba(232,84,122,.06)}

/* ─── LIGHTBOX ─── */
.lbox{
  position:fixed;inset:0;z-index:3000;
  background:rgba(5,4,12,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .45s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(28px);
}
.lbox.open{opacity:1;pointer-events:all}

/* media wrapper with zoom-in entry */
.lbox-media-wrap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  max-width:82vw;max-height:82vh;
}
.lbox-media-wrap img,
.lbox-media-wrap video,
.lbox-media-wrap iframe{
  max-width:82vw;max-height:80vh;
  object-fit:contain;display:block;border-radius:2px;
  transform:scale(.88) translateY(16px);
  opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.lbox-media-wrap iframe{
  width:min(82vw,1100px);
  height:min(46.125vw,68vh);
  min-height:320px;
  border:0;
  background:#000;
}
.lbox-media-wrap video{
  width:min(82vw,1100px);
  height:auto;
}
.lbox.open .lbox-media-wrap img,
.lbox.open .lbox-media-wrap video,
.lbox.open .lbox-media-wrap iframe{
  transform:scale(1) translateY(0);
  opacity:1;
}
/* corner brackets */
.lbox-media-wrap::before,.lbox-media-wrap::after{
  content:'';position:absolute;width:36px;height:36px;
  border-color:var(--rose);border-style:solid;pointer-events:none;z-index:5;
  opacity:0;transition:opacity .5s .25s;
}
.lbox.open .lbox-media-wrap::before,.lbox.open .lbox-media-wrap::after{opacity:1}
.lbox-media-wrap::before{top:-10px;left:-10px;border-width:1.5px 0 0 1.5px}
.lbox-media-wrap::after{bottom:-10px;right:-10px;border-width:0 1.5px 1.5px 0}

/* top bar */
.lbox-topbar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem 2.5rem;
  background:linear-gradient(to bottom,rgba(5,4,12,.8),transparent);
  z-index:10;
}
.lbox-counter{
  font-family:'Josefin Sans',sans-serif;
  font-size:.6rem;letter-spacing:.45em;text-transform:uppercase;color:var(--muted);
}
.lbox-counter span{color:var(--rose)}
.lbox-close-btn{
  display:flex;align-items:center;gap:.6rem;
  font-family:'Josefin Sans',sans-serif;font-size:.58rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--muted);
  background:none;border:none;cursor:none;transition:color .3s;
}
.lbox-close-btn:hover{color:var(--rose)}
.lbox-close-x{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:border-color .3s,background .3s;
}
.lbox-close-btn:hover .lbox-close-x{border-color:rgba(232,84,122,.5);background:rgba(232,84,122,.08)}

/* bottom info bar */
.lbox-bottombar{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.8rem 2.5rem;
  background:linear-gradient(to top,rgba(5,4,12,.85),transparent);
  z-index:10;
}
.lbox-meta{}
.lbox-cat-lb{font-size:.52rem;letter-spacing:.5em;text-transform:uppercase;color:var(--teal);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
.lbox-cat-lb::before{content:'';width:14px;height:1px;background:var(--teal)}
.lbox-title-lb{font-family:'Italiana',serif;font-size:1.5rem;color:var(--cream)}
/* thumb strip */
.lbox-thumbs{
  display:flex;gap:.5rem;align-items:center;
}
.lbox-thumb{
  width:52px;height:38px;border-radius:2px;overflow:hidden;cursor:none;
  border:1.5px solid transparent;transition:border-color .3s,transform .3s,opacity .3s;
  opacity:.45;flex-shrink:0;
}
.lbox-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lbox-thumb.active{border-color:var(--rose);opacity:1;transform:scale(1.08)}

/* side arrow buttons */
.lbox-arr{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:10;cursor:none;
  width:54px;height:54px;
  background:rgba(13,10,20,.5);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(245,240,232,.6);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.lbox-arr:hover{
  background:rgba(232,84,122,.15);
  border-color:rgba(232,84,122,.5);
  color:var(--cream);
  transform:translateY(-50%) scale(1.1);
}
.lbox-arr:active{transform:translateY(-50%) scale(.95)}
.lbox-arr-l{left:2rem}
.lbox-arr-r{right:2rem}
/* arrow disabled state */
.lbox-arr.disabled{opacity:.2;pointer-events:none}
.ribbon-track:hover {
  animation-play-state: paused;
}
/* swipe hint line */
.lbox-swipe-hint{
  position:absolute;bottom:6rem;left:50%;transform:translateX(-50%);
  font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(122,113,144,.4);pointer-events:none;
  opacity:1;transition:opacity 1s;
}
.lbox-swipe-hint.hide{opacity:0}

/* ─── SCROLL REVEAL ─── */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s,transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:translateY(0)}
.rv1{transition-delay:.1s}.rv2{transition-delay:.2s}.rv3{transition-delay:.3s}.rv4{transition-delay:.4s}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  nav{padding:1rem 1.5rem}nav.stuck{padding:.9rem 1.5rem}
  section,.feat-sec,.srv-sec,.tst-sec,.ct-sec,footer{padding:4rem 1.5rem}
  .bento{grid-template-columns:1fr 1fr;gap:8px}
  .gc-hero,.gc-tall,.gc-wide,.gc-sq,.gc-slim,.gc-pano,.gc-port,.gc-s1,.gc-s2,.gc-s3,.gc-full{grid-column:span 2}
  .gc-hero{height:300px}.gc-tall{height:260px}.gc-wide{height:220px}.gc-sq{height:220px}.gc-slim{height:220px}
  .gc-pano{height:220px}.gc-port{height:260px}.gc-s1{height:200px}.gc-s2{height:200px}.gc-s3{height:200px}.gc-full{height:240px}
  .about-grid{grid-template-columns:1fr}
  .about-img-side{height:320px}
  .about-txt-side{padding:3rem 2rem}
  .srv-grid{grid-template-columns:1fr}
  .ct-grid{grid-template-columns:1fr;gap:3rem}
  .ft-top{grid-template-columns:1fr 1fr;gap:2rem}
  .nav-links,.nav-hire{display:none}
}
	
/* ═══════════════════════════
   LIGHTBOX
═══════════════════════════ */
#lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
#lightbox.on { opacity: 1; pointer-events: all; }

#lb-wrap {
  position: relative;
  width: min(1204px, 94vw);
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 40px 120px rgba(0,0,0,0.85);
  transform: scale(0.92);
  transition: transform 0.3s ease;
}
#lb-wrap > #lb-body { overflow: hidden; border-radius: 10px; width: 100%; height: 100%; }
#lightbox.on #lb-wrap { transform: scale(1); }

#lb-body { width: 100%; height: 100%; }

/* iframe fills the box 100% */
#lb-body iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  display: block;
}

#lb-body video {
  width: 100%; height: 100%;
  border: none; display: block;
  background: #000;
}

#lb-body img.lb-img {
  width: 100%; height: 100%;
  object-fit: contain; display: block; background: #000;
}

#lb-close {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
  opacity: 0.75;
  line-height: 1;
  transition: opacity 0.2s;
  z-index: 10;
  top: 15px;
}
#lb-close:hover { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }
/* ── Lightbox Arrows ── */
#lb-prev, #lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 10000;
  backdrop-filter: blur(4px);
}
#lb-prev { left: 20px; }
#lb-next { right: 20px; }
#lb-prev:hover { background: rgba(255,255,255,0.22); transform: translateY(-50%) scale(1.08); }
#lb-next:hover { background: rgba(255,255,255,0.22); transform: translateY(-50%) scale(1.08); }
#lb-prev:disabled, #lb-next:disabled { opacity: 0.2; pointer-events: none; }

/* Counter */
#lb-counter {
  position: absolute;
  bottom: -36px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.55);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}

/* Thumbnail strip */
#lb-thumbs {
  position: absolute;
  bottom: -80px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: 94vw;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
}
#lb-thumbs::-webkit-scrollbar { display: none; }
#lb-thumbs img {
  width: 48px; height: 36px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
#lb-thumbs img.active {
  opacity: 1;
  border-color: var(--accent, #c8a96e);
}
.tst-section {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .tst-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 3rem;
  }
  .tst-header::before,
  .tst-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--clay));
  }
  .tst-header::after {
    background: linear-gradient(to left, transparent, var(--clay));
  }
  .tst-label {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ochre);
    white-space: nowrap;
  }

  .tst-outer {
    position: relative;
  }

  .tst-viewport {
    overflow: hidden;
    width: 100%;
  }

  .tst-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .tst-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    background: var(--card);
    border: 1px solid var(--dust);
    border-radius: 4px;
    padding: 2.2rem 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .tst-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 44px rgba(44,31,20,0.10);
  }

  .tst-ornament {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    line-height: 0.7;
    color: var(--clay);
    font-style: italic;
    opacity: 0.55;
    user-select: none;
  }

  .tst-q {
    font-size: 1.07rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.8;
    color: var(--ink);
    flex: 1;
  }

  .tst-divider {
    width: 28px;
    height: 1px;
    background: var(--clay);
  }

  .tst-author-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }

  .tst-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--dust);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--linen);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--clay);
  }
  .tst-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .tst-name {
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bark);
    margin-bottom: 0.25rem;
  }
  .tst-role {
    font-size: 0.67rem;
    font-weight: 300;
    color: var(--clay);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  /* Nav */
  .tst-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .tst-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--clay);
    background: none;
    color: var(--ochre);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
  }
  .tst-btn:hover:not(:disabled) {
    background: var(--ochre);
    color: var(--sand);
    border-color: var(--ochre);
  }
  .tst-btn:disabled {
    opacity: 0.28;
    cursor: default;
  }

  .tst-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .tst-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dust);
    border: 1px solid var(--clay);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
  }
  .tst-dot.active {
    background: var(--ochre);
    border-color: var(--ochre);
    transform: scale(1.5);
  }

  @media (max-width: 860px) {
    .tst-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
  }
  @media (max-width: 540px) {
    .tst-card { flex: 0 0 100%; }
  }

/* Responsive */
@media (max-width: 768px) {
  .gal-sec { padding: 40px 16px 60px; }
  .gal-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .bento .g-card { grid-column: span 1 !important; grid-row: span 1 !important; }
  .bento .g-card:nth-child(1), .bento .g-card:nth-child(7), .bento .g-card:nth-child(11) { grid-column: span 2 !important; }
}body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 200px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
  }

  .tst-section {

    position: relative;
    z-index: 1;
  }

  .tst-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 3rem;
  }
  .tst-header::before,
  .tst-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--clay));
  }
  .tst-header::after {
    background: linear-gradient(to left, transparent, var(--clay));
  }
  .tst-label {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ochre);
    white-space: nowrap;
  }

  .tst-outer {
    position: relative;
  }

  .tst-viewport {
    /* overflow: hidden; */
    width: 100%;
  }

  .tst-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .tst-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    background: var(--card);
    border: 1px solid var(--dust);
    border-radius: 4px;
    padding: 2.2rem 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #1a1535;
  }
  .tst-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 44px rgba(44,31,20,0.10);
  }

  .tst-ornament {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    line-height: 0.7;
    color: var(--clay);
    font-style: italic;
    opacity: 0.55;
    user-select: none;
  }

  .tst-q {
    font-size: 22px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.8;
    color: #ffffff;
    flex: 1;
  }

  .tst-divider {
    width: 28px;
    height: 1px;
    background: var(--clay);
  }

  .tst-author-row {
    display: inline-flex;
    align-items: center;
    text-align: left;
  }

  .tst-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--dust);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--linen);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--clay);
  }
  .tst-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .tst-name {
    font-size: 0.73rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bark);
    margin-bottom: 0.25rem;
  }
  .tst-role {
    font-size: 0.67rem;
    font-weight: 300;
    color: var(--clay);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  /* Nav */
  .tst-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .tst-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--clay);
    background: none;
    color: var(--ochre);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
    background-color: #000;
  }
  .tst-btn:hover:not(:disabled) {
    background: #000;
    color: var(--sand);
    border-color: var(--ochre);
  }
  .tst-btn:disabled {
    opacity: 0.28;
    cursor: default;
  }

  .tst-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .tst-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dust);
    border: 1px solid var(--clay);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
  }
  .tst-dot.active {
    background: var(--ochre);
    border-color: var(--ochre);
    transform: scale(1.5);
  }

  @media (max-width: 860px) {
    .tst-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
  }
  @media (max-width: 540px) {
    .tst-card { flex: 0 0 100%; }
  }
	.ft-col a {color:#000;}
	
	
	
	/* ═══════════════════════════════
       NAVBAR
    ═══════════════════════════════ */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3rem;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      z-index: 500;
      transition: box-shadow 0.3s;
    }

    #nav.scrolled {
      box-shadow: 0 4px 40px rgba(0,0,0,0.6);
    }

    /* Logo */
    .logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: var(--text);
      text-decoration: none;
      z-index: 600;
    }

    .logo span {
      color: var(--accent);
    }

    /* Desktop Nav Links */
    .nav-links {
      display: flex;
      list-style: none;
      gap: 3rem;
    }

    .nav-links a {
    
      text-decoration: none;
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      position: relative;
      transition: color 0.25s;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 0; height: 1px;
      background: var(--accent);
      transition: width 0.3s cubic-bezier(0.77,0,0.18,1);
    }

    .nav-links a:hover { }
    .nav-links a:hover::after { width: 100%; }

    /* Hire Me Button */
    .nav-hire {
      color: var(--text);
      text-decoration: none;
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      border: 1px solid var(--accent);
      padding: 0.55rem 1.4rem;
      color: var(--accent);
      transition: background 0.25s, color 0.25s;
      z-index: 600;
    }

    .nav-hire:hover {
      background: var(--accent);
      
    }

    /* ═══════════════════════════════
       HAMBURGER BUTTON
    ═══════════════════════════════ */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 5px;
      z-index: 600;
    }

    .hamburger span {
      display: block;
      height: 1.5px;
      background: #fff;
      border-radius: 2px;
      transition:
        transform 0.4s cubic-bezier(0.77,0,0.18,1),
        opacity   0.25s ease,
        width     0.3s ease;
      transform-origin: center;
    }

    .hamburger span:nth-child(1) { width: 100%; }
    .hamburger span:nth-child(2) { width: 65%; margin-left: auto; }
    .hamburger span:nth-child(3) { width: 100%; }

    /* X state */
    .hamburger.open span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
      width: 100%;
      background: #fff;
    }
    .hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }
    .hamburger.open span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
      width: 100%;
      background: #fff;
    }

    /* ═══════════════════════════════
       MOBILE OVERLAY MENU
    ═══════════════════════════════ */
    .mobile-menu {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 490;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 7rem 3rem 4rem;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .mobile-menu.open {
      opacity: 1;
      pointer-events: all;
      background-color: #000000db;
    }

    /* Decorative vertical line */
    .mobile-menu::before {
      content: '';
      position: absolute;
      left: 3rem;
      top: 10%;
      bottom: 25%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--accent), transparent);
      opacity: 0;
      transition: opacity 0.5s 0.2s;
    }
    .mobile-menu.open::before { opacity: 0.4; }

    .mobile-menu ul {
      list-style: none;
      padding-left: 2rem;
      margin-bottom: 3rem;
    }

    .mobile-menu ul li {
      overflow: hidden;
    }

    .mobile-menu ul li a {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.5rem, 9vw, 4rem);
      font-weight: 300;
      color: var(--text);
      text-decoration: none;
      letter-spacing: -0.01em;
      line-height: 1.25;
      transform: translateY(110%);
      transition:
        transform 0.55s cubic-bezier(0.77,0,0.18,1),
        color     0.2s;
    }

    .mobile-menu.open ul li:nth-child(1) a { transition-delay: 0.06s; transform: translateY(0); }
    .mobile-menu.open ul li:nth-child(2) a { transition-delay: 0.12s; transform: translateY(0); }
    .mobile-menu.open ul li:nth-child(3) a { transition-delay: 0.18s; transform: translateY(0); }
    .mobile-menu.open ul li:nth-child(4) a { transition-delay: 0.24s; transform: translateY(0); }

    .mobile-menu ul li a:hover { color: var(--accent); }

    /* Mobile small links row */
    .mobile-footer {
      padding-left: 2rem;
      display: flex;
      align-items: center;
      gap: 2rem;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s 0.35s, transform 0.4s 0.35s;
    }

    .mobile-menu.open .mobile-footer {
      opacity: 1;
      transform: translateY(0);
    }

    .mobile-hire {
      color: var(--accent);
      text-decoration: none;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      border: 1px solid var(--accent);
      padding: 0.65rem 1.8rem;
      transition: background 0.25s, color 0.25s;
    }

    .mobile-hire:hover {
      background: var(--accent);
      color: var(--bg);
    }

    .mobile-socials {
      display: flex;
      gap: 1.2rem;
    }

    .mobile-socials a {
      color: var(--muted);
      font-size: 0.68rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      transition: color 0.2s;
    }

    .mobile-socials a:hover { color: var(--text); }

    /* ═══════════════════════════════
       HERO (demo page content)
    ═══════════════════════════════ */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 0 3rem;
      padding-top: 72px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: 'SS';
      position: absolute;
      right: -0.05em;
      bottom: -0.15em;
      font-family: 'Cormorant Garamond', serif;
      font-size: 30vw;
      font-weight: 600;
      color: transparent;
      -webkit-text-stroke: 1px #1a1814;
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    .hero-eyebrow {
      font-size: 0.68rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.5rem;
    }

    .hero h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3.5rem, 10vw, 8rem);
      font-weight: 300;
      line-height: 1.0;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 2rem;
    }

    .hero h1 em {
      font-style: italic;
      color: var(--accent);
    }

    .hero p {
      font-size: 0.85rem;
      color: var(--muted);
      max-width: 420px;
      line-height: 1.9;
      letter-spacing: 0.04em;
      margin-bottom: 3rem;
    }

    .hero-cta {
      display: inline-block;
      color: var(--text);
      text-decoration: none;
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 0.9rem 2.5rem;
      border: 1px solid var(--text);
      transition: background 0.25s, color 0.25s;
    }

    .hero-cta:hover {
      background: var(--text);
      color: var(--bg);
    }

    /* ═══════════════════════════════
       RESPONSIVE
    ═══════════════════════════════ */
    @media (max-width: 768px) {
      .nav-links,
      .nav-hire { display: none; }

      .hamburger { display: flex; }

      #nav { padding: 0 1.5rem; }

      .hero { padding: 0 1.5rem; padding-top: 72px; }

         .mobile-menu {
        padding: 7rem 1.5rem 27rem;
    }
      .mobile-menu::before {left: 1.5rem;}
      .mobile-menu ul { padding-left: 1.5rem; }
      .mobile-footer { padding-left: 1.5rem; }
    }