/* ================================
   MANI PHOTOGRAPHY — STYLE
   Palette: White / Ink / Champagne
================================= */

:root{
  --paper: #ffffff;
  --paper-soft: #f7f5f2;
  --ink: #14110f;
  --ink-soft: #4a4440;
  --champagne: #c2873f;
  --champagne-soft: #f0d9b5;
  --champagne-deep: #8a5a22;
  --line: #e7e4df;

  --font-display: 'Bodoni Moda', serif;
  --font-accent: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .8s;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

em{ font-style:italic; }

::selection{ background:var(--ink); color:var(--paper); }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ================= PRELOADER ================= */
.preloader{
  position:fixed; inset:0; z-index:9999;
  /*background:var(--ink);*/
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader-logo{
  /*width:min(46vw,200px);*/
  width:min(100vw,400px);  
  opacity:0;
  transform:translateX(140%);
  transition:transform .9s var(--ease), opacity .5s var(--ease);
}
.preloader-logo.enter{
  opacity:1;
  transform:translateX(0);
}
.preloader-logo.exit{
  opacity:0;
  transform:translateX(-140%);
  transition:transform .65s var(--ease), opacity .45s var(--ease);
}
.preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes fadeUpIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ================= HEADER ================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 5%;
  display:flex; justify-content:center;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{
  padding:14px 5%;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.header-inner{
  width:100%; max-width:1320px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark {
    width: 40px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.logo:hover .logo-mark{ background:var(--ink); color:var(--paper); }
.logo-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.22rem;
  letter-spacing:.01em;
}
.logo-text em{ font-family:var(--font-accent); font-style:italic; font-weight:500; color:var(--champagne); }

.main-nav{ display:flex; gap:38px; }
.nav-link{
  position:relative;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding-bottom:6px;
  color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background:linear-gradient(90deg, var(--champagne-deep), var(--champagne));
  transition:width .35s var(--ease);
}
.nav-link:hover, .nav-link.active{ color:var(--ink); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:30px; height:24px; background:none; border:none; cursor:pointer; z-index:600;
}
.nav-toggle span{
  display:block; height:1px; width:100%; background:var(--ink);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 34px;
  transition:all .4s var(--ease);
  cursor:pointer; border:none;
}
.btn-outline{
  border:1px solid var(--paper);
  color:var(--paper);
  background:transparent;
}
.btn-outline:hover{ background:var(--paper); color:var(--ink); box-shadow:0 0 30px rgba(194,135,63,.45); }
.btn-solid{
  margin-top:30px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
}
.btn-solid:hover{
  background:linear-gradient(100deg, var(--champagne-deep), var(--champagne));
  color:#fff; border-color:var(--champagne);
  box-shadow:0 8px 28px rgba(194,135,63,.35);
}

/* ================= HERO ================= */
.hero{
  position:relative;
  height:100vh; min-height:560px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--ink);
}
.hero-slides{ position:absolute; inset:0; background:#fff; }
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  opacity:0;
  transition:opacity 1.6s var(--ease);
  z-index:0;
}
.hero-slide img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  transform:scale(1.05);
  transition:transform 7s linear;
}
.hero-slide.active{
  opacity:1;
  z-index:1;
}
.hero-slide.active img{ transform:scale(1); }
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  /*background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.55) 100%);*/
    background:linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 45%, rgb(0 0 0 / 55%) 100% 100%
)
}
.hero-content{
  position:relative; z-index:3;
  text-align:center; color:var(--paper);
  padding:0 20px;
}
.hero-eyebrow{
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:22px; color:var(--champagne-soft);
}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.8rem,8vw,6.2rem);
  letter-spacing:0;
  line-height:1.05;
  margin-bottom:22px;
}
.hero-title em{
  font-family:var(--font-accent); font-style:italic; font-weight:600;
  background:linear-gradient(100deg, var(--champagne-soft) 0%, var(--champagne) 50%, var(--champagne-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-family:var(--font-accent); font-style:italic;
  font-size:1.15rem; letter-spacing:.02em;
  margin-bottom:38px; color:rgba(255,255,255,.85);
}

.hero-scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.8);
}
.hero-scroll span{
  width:1px; height:46px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
  animation:scrollLine 2.2s var(--ease) infinite;
}
.hero-scroll p{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
@keyframes scrollLine{
  0%{ transform:scaleY(.3); transform-origin:top; opacity:.4; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  100%{ transform:scaleY(.3); transform-origin:bottom; opacity:.4; }
}

.hero-dots{
  position:absolute; right:34px; top:50%; transform:translateY(-50%);
  z-index:3; display:flex; flex-direction:column; gap:12px;
}
.hero-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.4);
  border:none; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.hero-dot.active{ background:var(--paper); transform:scale(1.5); }

/* ================= WORD STRIP ================= */
.word-strip{
  background:var(--ink);
  overflow:hidden;
  padding:18px 0;
}
.word-strip-track{
  display:flex;
  width:max-content;
  animation:wordScroll 26s linear infinite;
}
.word-strip-track span{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  letter-spacing:.03em;
  color:var(--champagne-soft);
  white-space:nowrap;
  padding-right:0;
}
@keyframes wordScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ================= REVEAL ANIMATION ================= */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }
.hero-content [data-reveal]{ transition-delay:.15s; color: color: #000000 !important;}
.hero-content [data-reveal]:nth-child(2){ transition-delay:.3s; }
.hero-content [data-reveal]:nth-child(3){ transition-delay:.45s; }
.hero-content [data-reveal]:nth-child(4){ transition-delay:.6s; }
.hero-content [data-reveal].in{ opacity:1; transform:translateY(0); }
.hero .hero-content [data-reveal]{ opacity:1; animation:fadeUpIn 1s var(--ease) forwards; }

/* ================= SECTION HEAD ================= */
section{ padding:130px 6%; position:relative; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.section-eyebrow{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--champagne); margin-bottom:14px;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2.1rem,4.5vw,3.2rem);
  font-weight:700;
}
.section-text{ font-family:var(--font-accent); font-style:italic; font-size:1.1rem; margin-top:18px; color:var(--ink-soft); line-height:1.7; }

/* ================= GALLERY ================= */
.gallery{ background:var(--paper); padding-top:110px; }
.filter-bar{
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-bottom:50px;
}
.filter-btn{
  font-family:var(--font-body);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 24px; border-radius:30px;
  border:1px solid var(--line);
  background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:all .35s var(--ease);
}
.filter-btn:hover{ border-color:var(--ink); color:var(--ink); }
.filter-btn.active{ background:linear-gradient(100deg, var(--champagne-deep), var(--champagne)); color:#fff; border-color:var(--champagne); box-shadow:0 6px 18px rgba(194,135,63,.3); }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  max-width:1400px; margin:0 auto;
}
.gallery-item{
  position:relative; overflow:hidden;
  aspect-ratio:3/4;
  cursor:pointer;
  background:#fff;
  border:1px solid var(--line);
  opacity:0; transform:scale(.92);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.gallery-item.in{ opacity:1; transform:scale(1); }
.gallery-item.hide{ display:none; }
.gallery-item img{
  width:100%; height:100%; object-fit:contain; background:#fff;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-caption{
  position:absolute; inset:auto 0 0 0;
  padding:22px 18px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.62), transparent);
  color:#fff;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:translateY(0); }
.gallery-caption span{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne-soft); }
.gallery-caption p{ font-family:var(--font-accent); font-size:1.05rem; margin-top:2px; }

@media (min-width:700px){
  .gallery-item:nth-child(5n+1){ grid-row:span 2; aspect-ratio:auto; }
}

/* ================= STORIES (chapters) ================= */
.stories{ background:var(--paper-soft); }
.stories-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  max-width:1400px; margin:0 auto;
}
.story-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  opacity:0; transform:translateY(50px) scale(.94) rotate(-1.5deg);
  transition:opacity .9s var(--ease), transform .9s var(--ease), box-shadow .4s var(--ease);
}
.story-card:nth-child(even){ transform:translateY(50px) scale(.94) rotate(1.5deg); }
.story-card.in{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
.story-card:hover{ box-shadow:0 24px 50px rgba(20,20,20,.16); transform:translateY(-6px) scale(1) rotate(0deg); }

/* ---- heading block (no text ever sits on the photo) ---- */
.story-card-head{
  padding:26px 22px 22px;
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.story-card:hover .story-card-head{ background:var(--paper-soft); }
.story-chapter{
  display:block;
  font-family:var(--font-body);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--champagne-deep);
  margin-bottom:8px;
  animation:chapterPulse 2.8s ease-in-out infinite;
}
.story-card-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  color:var(--ink);
  margin-bottom:12px;
  transition:color .35s var(--ease), letter-spacing .35s var(--ease);
}
.story-card:hover .story-card-title{ color:var(--champagne-deep); letter-spacing:.01em; }
.story-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-accent); font-style:italic;
  font-size:.92rem; color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.story-card:hover .story-link{ color:var(--champagne-deep); }
.story-arrow{
  display:inline-block;
  transition:transform .35s var(--ease);
}
.story-card:hover .story-arrow{ transform:translateX(6px); }

/* ---- image block: pure cover, zero text overlay ---- */
.story-card-image{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#fff;
}
.story-card-image img{
  width:100%; height:100%;
  object-fit:contain; background:#fff;
  transition:transform 1s var(--ease);
}
.story-card:hover .story-card-image img{ transform:scale(1.06); }

/* shine sweep on hover */
.story-card .story-shine{
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  z-index:3; pointer-events:none;
  transition:left 1s var(--ease);
}
.story-card:hover .story-shine{ left:130%; }

@keyframes chapterPulse{
  0%, 100%{ opacity:.75; }
  50%{ opacity:1; }
}

/* ================= ABOUT ================= */
.about{
  display:grid; grid-template-columns:.85fr 1fr; gap:80px;
  align-items:center; background:var(--paper);
}
.about-image{ position:relative; }
.about-image img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-image-frame{
  position:absolute; top:18px; left:18px; right:-18px; bottom:-18px;
  border:1px solid var(--champagne); z-index:-1;
}
.about-text{ color:var(--ink-soft); line-height:1.85; margin-bottom:18px; max-width:540px; }
.about-stats{ display:flex; gap:42px; margin:34px 0 8px; flex-wrap:wrap; }
.stat-num{ display:block; font-family:var(--font-accent); font-size:1.8rem; color:var(--ink); }
.stat-num-text{ font-family:var(--font-accent); font-style:italic; }
.stat-label{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.instagram-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-size:.85rem; letter-spacing:.06em;
  padding-bottom:4px; border-bottom:1px solid var(--ink);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.instagram-link:hover{ gap:14px; color:var(--champagne); border-color:var(--champagne); }

/* ================= CONTACT ================= */
.contact{ background:var(--paper-soft); }
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
  max-width:1100px; margin:0 auto; align-items:stretch;
}
/* ================= CONTACT DETAILS — ENHANCED ================= */
.contact-details{
  background:var(--paper);
  border:1px solid var(--line);
  padding:46px 44px;
}

.contact-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line);
  gap:20px;
}
.contact-row:last-of-type{ border-bottom:none; }

.contact-label{
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--champagne-deep);
  min-width:110px;
}

.contact-value{
  font-family:var(--font-body);
  font-size:1.08rem;
  font-weight:500;
  color:var(--ink);
  text-align:right;
  transition:color .25s ease;
}
.contact-row a.contact-value:hover{ color:var(--champagne); }
.contact-details .btn-solid{ width:100%; justify-content:center; }

.contact-map{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line);
  min-height:260px;
}
.contact-map img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15); transition:transform .8s var(--ease), filter .5s var(--ease); }
.contact-map:hover img{ transform:scale(1.06); filter:grayscale(0); }
.contact-map-pin{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px;
  background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5));
  color:#fff; padding:20px;
}
.contact-map-pin span{ font-size:2rem; }
.contact-map-pin p{ font-family:var(--font-accent); font-size:1.1rem; }
.contact-map-pin small{ font-family:var(--font-body); font-size:.72rem; opacity:.85; letter-spacing:.05em; }

/* ================= FOOTER ================= */
.site-footer{
  text-align:center; padding:60px 6% 40px;
  background:var(--ink); color:rgba(255,255,255,.7);
}
.footer-logo{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff; margin-bottom:14px; }
.footer-logo em{ font-family:var(--font-accent); font-style:italic; font-weight:500; color:var(--champagne); }
.site-footer p{ font-size:.8rem; }
.footer-top{
  display:inline-block; margin-top:18px; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:3px; transition:border-color .3s var(--ease);
}
.footer-top:hover{ border-color:var(--champagne); color:var(--champagne); }

/* ================= LIGHTBOX ================= */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,10,10,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:88vw; max-height:84vh; object-fit:contain;
  transform:scale(.92); transition:transform .4s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox.open img{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:26px; right:30px;
  background:none; border:none; color:#fff; font-size:2.2rem; cursor:pointer;
  line-height:1; transition:transform .3s var(--ease);
}
.lightbox-close:hover{ transform:rotate(90deg); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#fff; cursor:pointer;
  padding:10px 18px; transition:opacity .3s var(--ease);
  opacity:.6;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
}
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left:8px; }
.lightbox-next{ right:8px; }

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .about{ grid-template-columns:1fr; gap:50px; }
  .about-image{ max-width:420px; margin:0 auto; }
  .contact-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .stories-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  section{ padding:90px 6%; }
  .main-nav{
    position:fixed; top:0; right:0;
    height:100vh; width:min(78vw,320px);
    background:var(--paper);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:30px; padding:0 40px;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.08);
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-link{ font-size:1rem; }

  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:4px; }
  .gallery-item:nth-child(5n+1){ grid-row:auto; }

  .stories-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }

  .contact-details{ padding:34px 26px; }
  .contact-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .contact-value{ text-align:left; }

  .about-stats{ gap:28px; }

  .hero-title{ font-size:clamp(2.2rem,9vw,3.2rem); }
}

@media (max-width:420px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .header-inner{ gap:10px; }
  .logo-text{ font-size:1rem; }
}