/* ============================================================
   PAGE — HOME
   ============================================================ */

/* ------------------------------ HERO ------------------------------ */
.hero{
  position:relative; min-height: 100svh; min-height: 100vh;
  display:flex; align-items:flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2rem, 5vw, 4.5rem);
  overflow:hidden; isolation:isolate;
}

/* layered backdrop */
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  animation: kenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--scrim),
    radial-gradient(46% 34% at 99% 0%,  rgba(255,107,44,.26), transparent 60%),
    radial-gradient(42% 32% at 0% 100%, rgba(225,29,110,.20), transparent 62%);
}
/* a whisper of colour in the deep shadows only — never across skin tones */
.hero__scrim::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 68%, rgba(225,29,110,.16) 100%);
  mix-blend-mode: soft-light;
}
.hero .motif-bg{ z-index:-1; opacity:.06; }

.hero__in{
  position:relative; z-index:2; width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  align-items:end; gap: clamp(1.4rem,3vw,3.2rem);
  color:#fff;
}
@media (max-width:860px){ .hero__in{ grid-template-columns:1fr; } }

/* ---- the plate ---- */
.hero__plate{
  position:relative; max-width: 47rem;
  padding: clamp(1.3rem,2.6vw,2.3rem) clamp(1.4rem,2.8vw,2.6rem);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(18,4,15,.60) 0%, rgba(18,4,15,.30) 62%, rgba(18,4,15,.18) 100%);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
  display:grid; gap: clamp(.9rem,1.8vw,1.35rem);
  overflow:hidden;
}
/* gradient edge along the top and a thread down the left */
.hero__plate::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background-image: var(--grad-hot);
}
.hero__plate::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background-image: var(--grad-hot); opacity:.55;
}
@media (max-width:560px){
  .hero__plate{
    padding: 1.15rem 1.15rem 1.3rem;
    background: linear-gradient(135deg, rgba(18,4,15,.68), rgba(18,4,15,.38));
  }
}
.hero__top{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; }
.hero .pill{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero .stars{ color: var(--brand-marigold); }
.hero__rating{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color: rgba(255,255,255,.78);
}

.hero h1{
  font-size: clamp(2.05rem, 4.9vw, 4.15rem);
  color:#fff; max-width: 17ch;
  letter-spacing:-.028em; line-height:1.06;
  text-shadow: 0 2px 24px rgba(0,0,0,.34);
}
/* line one reads quieter so the italic gradient line carries the emphasis */
.hero h1 .soft{ color: rgba(255,255,255,.74); font-size:.72em; letter-spacing:.01em; }

/* on short-but-wide screens, pull it in so the CTA stays above the fold */
@media (min-width:900px) and (max-height:880px){
  .hero h1{ font-size: clamp(1.9rem, 3.7vw, 3.15rem); }
  .hero__lede{ font-size: var(--t-base); }
  .hero .scroll-cue{ display:none; }
}
.hero h1 .accent{ font-style:italic; }
.hero h1 .outline{
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.3px rgba(255,255,255,.72);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:.4rem; }
@media (max-width:440px){
  .hero__actions{ display:grid; gap:.6rem; }
  .hero__actions .btn{ width:100%; }
}

.hero__lede{
  color: rgba(255,255,255,.82); font-size: var(--t-base);
  max-width: 52ch; line-height:1.62; font-weight:320;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.3rem; }
.hero .btn--ghost{ --btn-fg:#fff; border-color: rgba(255,255,255,.34); }
.hero .btn--ghost:hover{ border-color:#fff; }

.hero__side{ display:grid; gap:1.4rem; justify-items:end; align-content:end; }
@media (max-width:860px){ .hero__side{ justify-items:start; } }
@media (max-width:560px){ .hero__side{ display:none; } }
.hero .scroll-cue{ color: rgba(255,255,255,.62); }
.hero .scroll-cue__rail{ background: rgba(255,255,255,.24); }

/* floating thumbnail stack */
.hero__thumbs{ display:flex; gap:.7rem; }
@media (max-width:560px){ .hero__thumbs{ display:none; } }
.hero__thumb{
  width: clamp(58px, 7vw, 86px); aspect-ratio: 3/4;
  border-radius: var(--r-sm); overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
}
.hero__thumb:nth-child(2){ margin-top:1.1rem; }
.hero__thumb:nth-child(3){ margin-top:2.2rem; }
.hero__thumb img{ width:100%; height:100%; object-fit:cover; filter:none; }

/* ------------------------------ INTRO ------------------------------ */
.intro{ position:relative; overflow:hidden; }
.intro .motif-bg{ opacity:.04; }
.intro__grid{
  display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: clamp(2rem,6vw,6rem); align-items:center;
}
@media (max-width:940px){ .intro__grid{ grid-template-columns:1fr; } }

.intro__body{ display:grid; gap: clamp(.85rem,1.7vw,1.25rem); align-content:center; }
.intro__body .lede{ margin-top:.2rem; }

.intro__media{ position:relative; }
.intro__media .frame{ aspect-ratio: 4/5; border-radius: var(--r-lg); }
.intro__media .frame img{ object-position: center 34%; }
.intro__media .frame img{ filter: var(--img-filter); }
.intro__badge{
  position:absolute; right: clamp(-1rem,-1vw,0rem); bottom: clamp(1rem,4vw,2.6rem);
  background: var(--bg-elev); border:1px solid transparent;
  border-radius: var(--r-md); padding: 1.15rem 1.5rem;
  box-shadow: var(--shadow-md), var(--shadow-glow);
  display:grid; gap:.3rem; min-width: 168px;
  background-image: linear-gradient(var(--bg-elev), var(--bg-elev)), var(--grad-hot);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.intro__badge .n{
  font-family:var(--f-display); font-size: clamp(1.7rem,3vw,2.3rem);
  line-height:1; color:var(--text);
}
.intro__badge .l{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--text-mut); }

.intro__quote{
  margin-top: var(--s-4); padding-left: clamp(1rem,2vw,1.6rem);
  border-left:3px solid transparent;
  border-image: var(--grad-hot) 1;
}
/* .intro__sig now lives in components.css (shared with the about page) */

/* ------------------------------ SERVICES ------------------------------ */
.svc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,1.8vw,1.6rem); }
@media (max-width:1080px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-card{
  display:flex; flex-direction:column;
  padding:0; overflow:hidden;
}
.svc-card__shot{
  position:relative; display:block; overflow:hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.svc-card__shot .frame{
  aspect-ratio: 16/11; border-radius:0; display:block;
}
.svc-card__shot img{ width:100%; height:100%; object-fit:cover; }
.svc-card:hover .svc-card__shot img{ transform: scale(1.06); }
.svc-card__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 52%, rgba(18,4,15,.55) 100%);
}
.svc-card__num{
  position:absolute; top:.8rem; left:.85rem; z-index:3;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; color:#fff;
  padding:.35em .7em; border-radius: var(--r-pill);
  background: rgba(18,4,15,.5); border:1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.svc-card__body{
  padding: clamp(1.1rem,2vw,1.5rem) clamp(1.1rem,2.2vw,1.6rem) 0;
  display:grid; gap:.6rem;
}
.svc-card__body h3{ font-size: var(--t-md); margin:0; }
.svc-card__body p{ font-size:var(--t-sm); color:var(--text-mut); }

/* pinned to the bottom so every card's actions line up across the row */
.svc-card__foot{
  margin-top:auto;
  padding: 1.2rem clamp(1.1rem,2.2vw,1.6rem) clamp(1.1rem,2vw,1.5rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem;
}
.svc-card__foot .tlink{ font-size:var(--t-xs); padding-bottom:.3em; }
.svc-card__foot .book-mini{ margin-top:0; margin-left:auto; }
@media (max-width:1080px){ .svc-card__foot .book-mini{ margin-left:0; } }

/* ------------------------------ STORIES ------------------------------ */
.stories{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap: clamp(1rem,1.9vw,1.7rem);
}
@media (max-width:1000px){ .stories{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){  .stories{ grid-template-columns:1fr; } }

.story{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-md); height:100%;
}
.story .frame{
  position:absolute; inset:0; width:100%; height:100%;
  aspect-ratio:auto; border-radius:inherit;
}
.story .frame img{ width:100%; height:100%; object-fit:cover; }
.story .frame{ border-radius:var(--r-md); }
.story .frame__veil{
  background:
    linear-gradient(180deg, transparent 34%, rgba(20,4,16,.82) 100%),
    linear-gradient(120deg, rgba(225,29,110,.30), transparent 55%);
}
/* every couple in the library is a portrait file, so every card is 3:4 */
.story--tall, .story--wide{ aspect-ratio: 3/4; }
@media (max-width:600px){ .story--tall, .story--wide{ aspect-ratio: 4/5; } }

.story__meta{ position:absolute; inset:auto 0 0 0; z-index:3; padding: clamp(1.2rem,2.4vw,2.1rem); color:#fff; }
.story__meta .tag{
  display:inline-block; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--th-gold); margin-bottom:.7rem;
}
.story__meta h3{
  color:#fff; font-size: clamp(1.4rem,2.7vw,2.2rem);
  transform: translateY(0); transition: transform .55s var(--e-out);
}
.story__meta .place{
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-top:.5rem;
}
.story__meta .note{
  color:rgba(255,255,255,.82); font-size:var(--t-sm); margin-top:.85rem;
  max-width:46ch; opacity:0; max-height:0; overflow:hidden;
  transition: opacity .5s var(--e-out), max-height .6s var(--e-out);
}
.story:hover .story__meta .note{ opacity:1; max-height:6rem; }
.story__go{
  position:absolute; top: clamp(1rem,2vw,1.6rem); right: clamp(1rem,2vw,1.6rem); z-index:3;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); color:#fff;
  display:grid; place-items:center; opacity:0; transform: scale(.7) rotate(-30deg);
  transition: opacity .45s var(--e-out), transform .55s var(--e-spring), background-color .4s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.story:hover .story__go{
  opacity:1; transform:none;
  background-image: var(--grad-hot); border-color:transparent;
  box-shadow: var(--shadow-glow);
}

/* ------------------------------ STATS BAND ------------------------------ */
.stats-band{
  border-block:1px solid var(--line);
  padding-block: clamp(2.6rem,5vw,4.6rem);
  background: var(--bg-alt);
  position:relative; overflow:hidden;
}
.stats-band .motif-bg{ opacity:.035; }

/* ------------------------------ PROCESS ------------------------------ */
.proc{ display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(1.4rem,3vw,2.6rem); }
@media (max-width:940px){ .proc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .proc{ grid-template-columns:1fr; } }
.proc__step{ position:relative; padding-top: 2.4rem; border-top:1px solid var(--line); }
.proc__step::before{
  content:""; position:absolute; top:-1px; left:0; width:0; height:2px;
  background-image: var(--grad-hot); transition: width 1.1s var(--e-out);
  transition-delay: calc(var(--i,0) * 130ms);
}
.proc.is-in .proc__step::before{ width:100%; }
.proc__n{
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--accent-hi);
  letter-spacing:.2em; position:absolute; top:1rem; left:0;
}
.proc__step h3{ font-size: var(--t-md); margin-bottom:.7rem; }
.proc__step p{ color:var(--text-mut); font-size:var(--t-sm); }

/* ------------------------------ GALLERY STRIP ------------------------------ */
.strip{ position:relative; }
/* a marquee rather than a scroller: it drifts on its own and pauses the
   moment the pointer lands on it, so frames stay clickable */
.strip__scroll{
  position:relative; overflow:hidden; width:100%;
  padding-block: .3rem 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.strip__track{
  display:flex; width:max-content;
  animation: marquee var(--mspeed, 70s) linear infinite;
}
.strip__scroll:hover .strip__track,
.strip__scroll:focus-within .strip__track{ animation-play-state: paused; }

.strip__item{
  flex:none; width: clamp(190px, 22vw, 300px);
  margin-right: clamp(.7rem,1.4vw,1.2rem);
  border-radius: var(--r-md); overflow:hidden;
  cursor:pointer;
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.strip__item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-glow); }

@media (prefers-reduced-motion: reduce){
  .strip__scroll{ overflow-x:auto; }
  .strip__track{ animation:none; }
}
.strip__item .frame{ aspect-ratio: 4/5; }
.strip__item:nth-child(even) .frame{ aspect-ratio: 3/4; }
.strip__hint{
  display:flex; align-items:center; gap:.6rem;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-mut); margin-top:1.2rem;
  width:var(--wrap); margin-inline:auto;
}

/* ------------------------------ REVIEWS SLIDER ------------------------------ */
.rev{ position:relative; overflow:hidden; }
.rev__view{ position:relative; min-height: clamp(280px, 34vw, 360px); }
.rev__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transform: translateY(22px);
  transition: opacity .65s var(--e-out), transform .8s var(--e-out), visibility .65s;
  display:grid; gap: var(--s-3); align-content:center; justify-items:center; text-align:center;
  max-width: 900px; margin-inline:auto;
}
.rev__slide.is-on{ opacity:1; visibility:visible; transform:none; }
.rev__slide .quote{ font-size: clamp(1.1rem, 2.2vw, 1.85rem); }
.rev__who{ display:grid; gap:.35rem; justify-items:center; margin-top:.6rem; }
.rev__who .n{ font-family:var(--f-display); font-size:var(--t-md); }
.rev__who .d{ font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--text-mut); }

.rev__ctrls{ display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-top: var(--s-4); }
.rev__dots{ display:flex; gap:.5rem; }
.rev__dot{
  width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background: var(--line-strong); transition: all .4s var(--e-out);
}
.rev__dot.is-on{ background-image: var(--grad-hot); width:26px; border-radius:var(--r-pill); }
.rev__arrow{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--text);
  display:grid; place-items:center;
  transition: border-color .35s, color .35s, transform .4s var(--e-out);
}
.rev__arrow:hover{ border-color:var(--accent); color:var(--accent); }
.rev__arrow svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.4; }

/* ------------------------------ JOURNAL PREVIEW ------------------------------ */
.jgrid{
  display:grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: clamp(1.4rem,3vw,3rem); align-items:stretch;
}
@media (max-width:900px){ .jgrid{ grid-template-columns:1fr; } }

/* ---- shared meta line ---- */
.jmeta{
  display:flex; flex-wrap:wrap; gap:.5rem .85rem; align-items:center;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
}
.jmeta .cat{
  padding:.4em .85em; border-radius: var(--r-pill);
  background-image: var(--grad-hot); color:#fff; font-weight:500;
  box-shadow: 0 4px 14px rgba(225,29,110,.26);
}
.jmeta .dot{ opacity:.4; }

/* ---- the featured entry ---- */
.jfeat-card{
  position:relative; display:block; overflow:hidden;
  border-radius: var(--r-lg); min-height: clamp(340px, 42vw, 500px);
  isolation:isolate;
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.jfeat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.jfeat-card .frame{ position:absolute; inset:0; border-radius:inherit; }
.jfeat-card .frame img{ width:100%; height:100%; object-fit:cover; }
.jfeat-card:hover .frame img{ transform: scale(1.05); }
.jfeat-card__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,4,15,.10) 0%, transparent 34%, rgba(18,4,15,.88) 100%),
    linear-gradient(115deg, rgba(225,29,110,.26), transparent 58%);
}
.jfeat-card__in{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding: clamp(1.3rem,2.6vw,2.2rem);
  display:grid; gap:.75rem; color:#fff;
}
.jfeat-card__in h3{
  color:#fff; font-size: clamp(1.35rem,2.6vw,2.15rem); line-height:1.12;
}
.jfeat-card__in p{
  color: rgba(255,255,255,.82); font-size:var(--t-sm); max-width:46ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.jfeat-card .jmeta{ color: rgba(255,255,255,.78); }
.jfeat-card__go{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.3rem;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  color:#fff;
}
.jfeat-card__go i{ font-style:normal; transition: transform .4s var(--e-out); }
.jfeat-card:hover .jfeat-card__go i{ transform: translateX(5px); }
.jfeat-card__flag{
  position:absolute; top: clamp(1rem,2vw,1.4rem); left: clamp(1rem,2vw,1.4rem); z-index:3;
  padding:.45em .95em; border-radius: var(--r-pill);
  background: rgba(18,4,15,.5); border:1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:#fff;
}

/* ---- the stacked list ---- */
.jlist-side{ display:grid; align-content:start; }
.jrow{
  display:grid; grid-template-columns: clamp(84px,9vw,112px) minmax(0,1fr) auto;
  gap: clamp(.9rem,1.8vw,1.4rem); align-items:center;
  padding: clamp(.9rem,1.8vw,1.35rem) 0;
  border-bottom:1px solid var(--line-soft);
  transition: padding-left .4s var(--e-out);
}
.jrow:first-child{ padding-top:0; }
.jrow:last-child{ border-bottom:0; }
.jrow:hover{ padding-left:.5rem; }

.jrow__shot{ overflow:hidden; border-radius: var(--r-sm); }
.jrow__shot .frame{ aspect-ratio: 1/1; border-radius: var(--r-sm); }
.jrow__shot img{ width:100%; height:100%; object-fit:cover; }
.jrow:hover .jrow__shot img{ transform: scale(1.07); }

.jrow__body{ display:grid; gap:.45rem; min-width:0; }
.jrow__body .jmeta{ color: var(--text-mut); }
.jrow__body .jmeta .cat{
  background-image:none; background:transparent; color: var(--accent-hi);
  padding:0; box-shadow:none; letter-spacing:.22em;
}
.jrow__body h4{
  font-family: var(--f-display); font-weight:300;
  font-size: clamp(1rem,1.6vw,1.22rem); line-height:1.24;
  transition: color .3s var(--e-out);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.jrow:hover .jrow__body h4{ color: var(--accent); }

.jrow__go{
  width:36px; height:36px; flex:none; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  color: var(--text-mut);
  transition: background-image .35s, border-color .35s, color .35s, transform .4s var(--e-out);
}
.jrow:hover .jrow__go{
  background-image: var(--grad-hot); border-color:transparent; color:#fff;
  transform: translateX(3px);
}
.jrow__go svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }
@media (max-width:520px){ .jrow__go{ display:none; } }