/* ============================================================
   Apricity Consulting — Project detail pages
   Shared stylesheet (base system + detail-page components)
   ============================================================ */
:root{
  --clay:#D17B86; --velvet:#B85C6B; --firstlight:#E89BA8;
  --honey:#C9A55A; --sage:#A8BA9A; --cream:#FDF6EE; --hearth:#7C3A47;
  --cream-2:#F6EBDD; --line:rgba(124,58,71,.14);
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,'Helvetica Neue',sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --ink:rgba(124,58,71,.84);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{font-family:var(--sans); color:var(--hearth); background:var(--cream); -webkit-font-smoothing:antialiased; line-height:1.62; overflow-x:hidden;}
::selection{background:var(--hearth); color:var(--cream);}
.wrap{max-width:1180px; margin:0 auto; padding:0 38px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 38px;}
a{color:inherit;}
img{display:block;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; text-wrap:balance;}
p,li,figcaption,blockquote,.lede{text-wrap:pretty;}
.eyebrow{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; font-weight:700;}

.js .reveal{opacity:0; transform:translateY(30px);}
.reveal{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

.btn{font-family:var(--sans); cursor:pointer; border:none; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:15px 28px; border-radius:100px; transition:.22s; text-decoration:none; display:inline-flex; align-items:center; gap:10px;}
.btn-cream{background:var(--cream); color:var(--velvet);}
.btn-cream:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(0,0,0,.4);}
.btn-clay{background:var(--clay); color:#fff;}
.btn-clay:hover{background:var(--velvet); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(184,92,107,.7);}
.btn-outline{background:transparent; border:1.5px solid rgba(253,246,238,.5); color:var(--cream);}
.btn-outline:hover{border-color:var(--cream); background:rgba(253,246,238,.1);}
.btn-outline-d{background:transparent; border:1.5px solid var(--line); color:var(--hearth);}
.btn-outline-d:hover{border-color:var(--clay); color:var(--velvet);}

/* NAV */
#nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:.3s; padding:22px 0;}
#nav .nav-in{display:flex; align-items:center; justify-content:space-between;}
.nav-brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.nav-brand img{width:46px; height:auto;}
.nav-links{display:flex; align-items:center; gap:22px;}
.nav-links a{text-decoration:none; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(253,246,238,.85); transition:color .2s; white-space:nowrap;}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:#fff; border-bottom:1.5px solid rgba(253,246,238,.6); padding-bottom:3px;}
.nav-links a.btn-cream{color:var(--velvet);}
#nav.scrolled{background:#fdf5ed; backdrop-filter:blur(12px); padding:13px 0; box-shadow:0 1px 0 var(--line);}
#nav.scrolled .nav-links a{color:var(--ink);}
#nav.scrolled .nav-links a:hover{color:var(--velvet);}
#nav.scrolled .nav-links a.active{color:var(--velvet); border-color:var(--clay);}
#nav.scrolled .btn-cream{background:var(--clay); color:#fff;}
#nav.scrolled .nav-links a.btn-cream{color:#fff;}
.nav-cta{padding:12px 22px;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger i{width:24px; height:2px; background:var(--cream); display:block; transition:.3s;}
#nav.scrolled .hamburger i{background:var(--hearth);}

/* ============================================================
   PROJECT HERO
   ============================================================ */
.proj-hero{position:relative; background:linear-gradient(160deg,#DA8893 0%,var(--clay) 44%,var(--velvet) 100%); color:var(--cream); padding:150px 0 84px; overflow:hidden;}
.ph-lotus{position:absolute; right:-5%; bottom:-30%; width:min(52vw,600px); opacity:.13; pointer-events:none; z-index:1;}
.proj-hero .wrap{position:relative; z-index:2;}
.back-link{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(253,246,238,.82); text-decoration:none; transition:.2s; margin-bottom:42px;}
.back-link::before{content:'←'; font-size:14px; transition:transform .2s;}
.back-link:hover{color:#fff;}
.back-link:hover::before{transform:translateX(-4px);}
.ph-grid{display:grid; grid-template-columns:1.35fr .8fr; gap:60px; align-items:center;}
.ph-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.ph-tag{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(253,246,238,.92);}
.ph-num{font-family:var(--serif); font-size:14px; font-style:italic; color:rgba(253,246,238,.7);}
.proj-hero h1{font-size:clamp(46px,7.4vw,92px); line-height:.98; font-style:italic; text-shadow:0 2px 30px rgba(92,40,40,.18);}
.proj-hero .lede{font-size:clamp(17px,2vw,21px); color:rgba(253,246,238,.92); max-width:540px; margin:26px 0 0; line-height:1.55;}
.status-pill{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; margin-top:30px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:10px 18px; border-radius:100px; background:rgba(253,246,238,.16); border:1px solid rgba(253,246,238,.32); color:var(--cream);}
.status-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--honey); box-shadow:0 0 0 4px rgba(201,165,90,.3);}
.status-pill.live .dot{background:var(--sage); box-shadow:0 0 0 4px rgba(168,186,154,.32);}
/* logo card */
.ph-logo{border-radius:22px; aspect-ratio:1/1; border:1px solid rgba(253,246,238,.4); overflow:hidden; background:radial-gradient(120% 120% at 50% 32%, var(--cream) 0%, var(--cream-2) 100%); display:flex; align-items:center; justify-content:center; box-shadow:0 30px 60px -30px rgba(92,40,40,.5);}
.ph-logo img{width:66%; max-width:300px; height:auto; filter:drop-shadow(0 8px 22px rgba(124,58,71,.12));}
.ph-logo.badge img{width:80%;}

/* ============================================================
   PROJECT BODY
   ============================================================ */
section.band{padding:108px 0;}
.sec-eyebrow{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--velvet);}

/* story */
.story h2{font-size:clamp(30px,4.2vw,46px); line-height:1.06; margin:16px 0 0;}
.story h2 em{font-style:italic; color:var(--clay);}
.story-body{margin-top:30px;}
.story-body p{font-size:18px; color:var(--ink); line-height:1.7;}
.story-body p + p{margin-top:22px;}
.story-body .drop::first-letter{font-family:var(--serif); font-size:62px; line-height:.78; float:left; margin:6px 14px 0 0; color:var(--clay); font-style:italic;}

/* placeholder shot */
.shot{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background-color:var(--cream-2);
  background-image:repeating-linear-gradient(135deg, rgba(124,58,71,.05) 0 14px, rgba(124,58,71,0) 14px 28px);
  display:flex; align-items:center; justify-content:center;}
.shot span{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; color:rgba(124,58,71,.46); padding:10px 16px; border:1px dashed rgba(124,58,71,.26); border-radius:100px; background:rgba(253,246,238,.6);}
.shot.tall{aspect-ratio:4/5;}
.shot.wide{aspect-ratio:16/10;}
.shot.sq{aspect-ratio:1/1;}
.shot-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:42px;}
.shot-grid .shot.span2{grid-column:span 2;}

/* goal */
.goal{background:var(--hearth); color:var(--cream);}
.goal .sec-eyebrow{color:var(--firstlight);}
.goal .goal-q{font-family:var(--serif); font-size:clamp(26px,4vw,44px); line-height:1.2; letter-spacing:-.01em; margin-top:20px; max-width:880px;}
.goal .goal-q em{font-style:italic; color:var(--firstlight);}
.goal .goal-sub{font-size:17px; color:rgba(253,246,238,.78); margin-top:26px; max-width:620px; line-height:1.7;}

/* services */
.svc .svc-head{max-width:680px;}
.svc h2{font-size:clamp(30px,4.2vw,46px); line-height:1.06; margin:16px 0 0;}
.svc h2 em{font-style:italic; color:var(--clay);}
.svc .svc-intro{font-size:17px; color:var(--ink); margin-top:20px; line-height:1.7;}
.svc-list{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:46px;}
.svc-item{border:1px solid var(--line); border-radius:16px; padding:26px 28px; background:var(--cream); transition:.25s; display:flex; gap:18px; align-items:flex-start;}
.svc-item:hover{border-color:var(--clay); transform:translateY(-3px); box-shadow:0 16px 40px -26px rgba(124,58,71,.5);}
.svc-item .si-n{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--clay); line-height:1; flex:none; width:34px;}
.svc-item h4{font-size:19px; line-height:1.2;}
.svc-item p{font-size:14px; color:var(--ink); margin-top:7px; line-height:1.55;}
.svc-note{margin-top:30px; font-family:var(--serif); font-style:italic; font-size:16px; color:rgba(124,58,71,.62); text-align:center;}
.svc-note a{color:var(--velvet); font-style:normal; font-weight:700; text-decoration:none; border-bottom:1px solid var(--clay);}

/* teaches + status note */
.teaches{background:var(--cream-2);}
.teach-card{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; max-width:980px; margin:0 auto;}
.teach-card .tc-eye{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--velvet);}
.teach-card h3{font-size:clamp(26px,3.4vw,38px); line-height:1.08; margin-top:14px;}
.teach-card h3 em{font-style:italic; color:var(--clay);}
.teach-card p{font-size:17px; color:var(--ink); line-height:1.7;}
.status-note{margin-top:54px; border:1px solid var(--line); border-left:3px solid var(--honey); border-radius:14px; background:var(--cream); padding:26px 30px; max-width:980px; margin-left:auto; margin-right:auto; display:flex; gap:18px; align-items:flex-start;}
.status-note .sn-k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--honey); font-weight:700; flex:none; padding-top:2px;}
.status-note p{font-size:15.5px; color:var(--ink); line-height:1.62;}

/* project nav (prev / next) */
.proj-nav{position:static; padding:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr;}
.proj-nav a{padding:46px 38px; text-decoration:none; transition:.25s; display:flex; flex-direction:column; gap:8px;}
.proj-nav a:hover{background:var(--cream-2);}
.proj-nav a.next{text-align:right; align-items:flex-end; border-left:1px solid var(--line);}
.proj-nav .pn-dir{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--velvet);}
.proj-nav .pn-name{font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); color:var(--hearth); line-height:1.05;}
.proj-nav a:hover .pn-name{color:var(--velvet);}

/* closing CTA */
.close-sec{text-align:center;}
.close-card{max-width:820px; margin:0 auto; border:1px solid var(--line); border-radius:24px; padding:70px 50px; background:linear-gradient(160deg,var(--clay),var(--velvet)); color:var(--cream);}
.close-card .eyebrow{color:rgba(253,246,238,.85);}
.close-card h2{font-size:clamp(32px,5vw,56px); line-height:1.04; margin:16px 0 0; font-style:italic;}
.close-card p{font-size:17px; color:rgba(253,246,238,.9); max-width:520px; margin:20px auto 0; line-height:1.65;}
.close-card .btn{margin-top:34px;}

/* FOOTER */
footer{background:var(--hearth); color:var(--cream); text-align:center; padding:104px 0 50px;}
footer img{width:64px; opacity:.9; margin:0 auto;}
footer h2{font-family:var(--serif); font-style:italic; font-size:clamp(40px,7vw,84px); line-height:1; margin:26px 0 0;}
footer .btn{margin-top:36px;}
.foot-meta{margin-top:66px; padding-top:32px; border-top:1px solid rgba(253,246,238,.18); display:flex; justify-content:center; flex-wrap:wrap; gap:14px; font-size:12px; color:rgba(253,246,238,.6); letter-spacing:.04em;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* nav collapses to the drawer once the links would crowd the wordmark */
@media(max-width:1000px){
  /* the scrolled bar is opaque cream anyway — drop the blur so it doesn't
     become a containing block that traps the fixed drawer inside the bar */
  #nav.scrolled{backdrop-filter:none; -webkit-backdrop-filter:none;}
  .nav-links{position:fixed; inset:0 0 0 auto; width:min(82vw,320px); background:var(--hearth); flex-direction:column; align-items:flex-start; justify-content:center; gap:26px; padding:0 38px; transform:translateX(100%); transition:transform .35s;}
  .nav-links.open{transform:none;}
  .nav-links a{font-size:18px; color:var(--cream);}
  /* keep drawer links light even when the bar is in its scrolled (cream) state */
  #nav.scrolled .nav-links a{color:var(--cream);}
  #nav.scrolled .nav-links a:hover{color:#fff;}
  #nav.scrolled .nav-links a.active{color:#fff;}
  #nav.scrolled .nav-links a.btn-cream{color:#fff;}
  .nav-links a.active{border:none;}
  .nav-links a.btn-cream{background:var(--clay); color:#fff; align-self:stretch; text-align:center; justify-content:center; margin-top:10px; padding:15px 22px;}
  .hamburger{display:flex; z-index:60;}
}
@media(max-width:860px){
  .wrap,.wrap-narrow{padding:0 22px;}

  .proj-hero{padding:124px 0 64px;}
  .ph-grid{grid-template-columns:1fr; gap:40px;}
  .ph-logo{max-width:300px; order:-1;}
  .back-link{margin-bottom:30px;}

  section.band{padding:74px 0;}
  .shot-grid{grid-template-columns:1fr;}
  .shot-grid .shot.span2{grid-column:span 1;}
  .svc-list{grid-template-columns:1fr;}
  .teach-card{grid-template-columns:1fr; gap:30px;}
  .teach-card .shot{order:-1;}
  .proj-nav{grid-template-columns:1fr;}
  .proj-nav a{padding:34px 24px;}
  .proj-nav a.next{text-align:left; align-items:flex-start; border-left:none; border-top:1px solid var(--line);}
  .close-card{padding:54px 28px;}
  .status-note{flex-direction:column; gap:10px;}
}
@media(max-width:430px){
  .wrap,.wrap-narrow{padding:0 18px;}
  .proj-hero{padding:116px 0 54px;}
  .story-body p{font-size:16.5px;}
  .status-pill{white-space:normal; line-height:1.5;}
}