/* Interior page heroes — one design per page (gallery, services, testimonials, about) */
.ph{
  --ph-cream:#ffffff;
  --ph-paper:#fdf9f1;
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 10% 0%,rgba(207,168,79,.07),transparent 45%),var(--bg);
  color:var(--ink);
  padding:calc(var(--header-offset) + var(--safe-top) + clamp(1.2rem,3.5vw,2.8rem)) 6vw 0;
}
.ph-wrap{
  position:relative;max-width:1160px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;gap:clamp(2rem,5vw,4.5rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.ph-crumb{
  margin:0 0 1.4rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}
.ph-crumb a{color:var(--gold-deep);}
.ph-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 1.2rem;
  font-family:var(--font-body);font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);
}
.ph-eyebrow::before{content:"";width:34px;height:1.5px;background:currentColor;}
.ph-title{
  margin:0 0 1.4rem;font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.03;letter-spacing:-.015em;color:var(--ink);
}
.ph-title em{position:relative;display:inline-block;font-style:italic;font-weight:400;color:var(--gold-deep);}
.ph-title em svg{position:absolute;left:0;bottom:-.12em;width:100%;height:.2em;overflow:visible;}
.ph-title em path{
  fill:none;stroke:var(--gold-bright);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320;animation:ph-draw 1.1s ease .9s forwards;
}
.ph-lede{max-width:32em;margin:0;font-size:clamp(1rem,1.35vw,1.08rem);line-height:1.7;color:var(--ink-dim);}

.ph-in{animation:ph-rise .9s cubic-bezier(.2,.8,.2,1) both;}
.ph-d1{animation-delay:.12s;}
.ph-d2{animation-delay:.24s;}
.ph-d3{animation-delay:.36s;}
@keyframes ph-rise{from{opacity:0;transform:translateY(24px);}}
@keyframes ph-draw{to{stroke-dashoffset:0;}}
@keyframes ph-spin{to{transform:rotate(360deg);}}
/* header reads dark while it sits over a light hero */
body.hero-light #site-header:not(.scrolled) nav a{color:var(--ink-dim);text-shadow:none;}
body.hero-light #site-header:not(.scrolled) nav a:hover{color:var(--ink);}
body.hero-light #site-header:not(.scrolled) nav a.current{color:var(--gold-deep);}
body.hero-light #site-header:not(.scrolled) .burger span{background:var(--ink);}
body.hero-light #site-header:not(.scrolled) .nav-cta{color:#fff!important;}

/* ——— shared: taped photo prints ——— */
.ph-glow::before{
  content:"";position:absolute;z-index:-1;right:-140px;top:-180px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(207,168,79,.3),transparent 68%);pointer-events:none;
}
.ph-stage{--mx:0;--my:0;position:relative;}
.ph-card{
  position:absolute;margin:0;background:var(--ph-paper);
  box-shadow:0 22px 44px -12px rgba(33,29,22,.35),0 2px 6px rgba(33,29,22,.12);
  translate:calc(var(--mx) * var(--f,1) * 1px) calc(var(--my) * var(--f,1) * 1px);
  rotate:var(--r,0deg);
  transition:translate .6s cubic-bezier(.2,.8,.2,1),rotate .45s cubic-bezier(.2,.8,.2,1),scale .45s cubic-bezier(.2,.8,.2,1);
  animation:ph-card-in 1s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--dl,0s);
}
.ph-card img{display:block;width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e6d3ae,#b8933f);}
.ph-card::after{
  content:"";position:absolute;top:-12px;left:50%;width:70px;height:24px;margin-left:-35px;
  background:rgba(207,168,79,.55);rotate:-4deg;
}
.ph-card:hover{rotate:0deg;scale:1.06;z-index:9;}
@keyframes ph-card-in{from{opacity:0;transform:translate(var(--x,0),40px) scale(.88) rotate(calc(var(--r,0deg) * -1));}}

.ph-badge{position:absolute;z-index:6;aspect-ratio:1/1;pointer-events:none;}
.ph-badge svg{width:100%;height:100%;animation:ph-spin 18s linear infinite;}
.ph-badge text{font:500 10.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;fill:var(--ink);}
.ph-badge b{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(18px,2.3vw,26px);color:var(--gold-deep);}

/* ——— gallery: loose collage of five prints ——— */
.ph--collage .ph-stage{height:440px;}
.ph--collage .ph-card{width:40%;padding:10px 10px 34px;}
.ph--collage .ph-c1{left:0;top:70px;height:250px;--r:-8deg;--x:-60px;--f:.6;--dl:.2s;}
.ph--collage .ph-c2{left:28%;top:0;height:300px;--r:3deg;--f:1;--dl:.35s;z-index:2;}
.ph--collage .ph-c3{right:0;top:60px;height:260px;--r:9deg;--x:60px;--f:.7;--dl:.5s;}
.ph--collage .ph-c4{left:14%;top:250px;width:32%;height:170px;--r:5deg;--x:-30px;--f:1.4;--dl:.65s;z-index:3;}
.ph--collage .ph-c5{right:8%;top:270px;width:30%;height:150px;--r:-6deg;--x:30px;--f:1.2;--dl:.8s;z-index:3;}
.ph--collage .ph-badge{left:-30px;top:-20px;width:120px;}

/* ——— services: square board of four prints ——— */
.ph--board .ph-stage{width:100%;max-width:540px;margin-inline:auto;aspect-ratio:1/1;}
.ph--board .ph-card{padding:2.2% 2.2% 7%;}
.ph--board .ph-card::after{top:-3%;width:26%;height:5.5%;margin-left:-13%;}
.ph--board .ph-c1{left:0;top:14%;width:44%;aspect-ratio:4/5;--r:-6deg;--f:.6;--dl:.15s;}
.ph--board .ph-c2{left:30%;top:0;width:46%;aspect-ratio:4/5;--r:3deg;--f:1;--dl:.3s;z-index:2;}
.ph--board .ph-c3{right:0;top:38%;width:40%;aspect-ratio:4/5;--r:8deg;--f:.8;--dl:.45s;z-index:3;}
.ph--board .ph-c4{left:9%;top:62%;width:34%;aspect-ratio:1/1;--r:-4deg;--f:1.3;--dl:.6s;z-index:4;}
.ph--board .ph-badge{right:2%;top:-2%;width:21%;}

/* ——— testimonials: envelope that opens ——— */
.ph--envelope{padding-bottom:clamp(1rem,3vw,2rem);}
.ph--envelope::before,
.ph--envelope::after{content:"✦";position:absolute;z-index:-1;color:var(--gold);opacity:.35;font-size:38px;line-height:1;}
.ph--envelope::before{left:5%;top:calc(var(--header-offset) + 14%);}
.ph--envelope::after{right:8%;bottom:12%;font-size:26px;}
.ph--envelope .ph-title em{color:var(--gold-deep);}
.ph-env-hint{
  display:block;margin-top:1.6rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);
}
.ph-env-stage{
  display:flex;justify-content:center;width:100%;padding:170px 0 0;margin:0;
  background:none;border:0;cursor:pointer;font:inherit;color:inherit;
}
.ph-env-stage:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px;border-radius:8px;}
.ph-env{position:relative;display:block;width:min(400px,100%);aspect-ratio:400/270;perspective:1200px;}
.ph-env-back{position:absolute;inset:0;background:#c9ad77;border-radius:6px;box-shadow:0 30px 60px -18px rgba(33,29,22,.45);}
.ph-env-card{
  position:absolute;left:6%;right:6%;bottom:10px;height:88%;z-index:2;
  display:flex;flex-direction:column;gap:10px;padding:14px;
  background:var(--ph-paper);border-radius:4px;box-shadow:0 6px 18px rgba(33,29,22,.2);
  transition:transform 1s cubic-bezier(.2,.8,.2,1) .55s;
}
.ph-env-card img{flex:1;min-height:0;width:100%;height:auto;object-fit:cover;border-radius:2px;background:#e6d3ae;}
.ph-env-card-title{text-align:center;font:italic 400 20px var(--font-display);color:var(--ink);}
.ph-env-card-sub{margin-top:-6px;text-align:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);}
.ph-env-front{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:6px;background:#e2cfa6;
  clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);
}
.ph-env-flap{
  position:absolute;left:0;right:0;top:0;height:56%;z-index:4;background:#d6bd8d;
  clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;
  transition:transform .7s ease,z-index 0s .35s;
}
.ph-env-seal{
  position:absolute;left:50%;top:52%;z-index:5;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;color:#fffaf1;
  background:radial-gradient(circle at 35% 30%,#e4c16f,#8a6b2c);box-shadow:0 4px 10px rgba(33,29,22,.35);
  transition:opacity .3s,transform .5s;
}
.ph--envelope.is-open .ph-env-flap{transform:rotateX(180deg);z-index:1;}
.ph--envelope.is-open .ph-env-seal{opacity:0;transform:scale(.4);}
.ph--envelope.is-open .ph-env-card{transform:translateY(-72%);}

/* ——— about: rotating ring of arched frames ——— */
.ph--arch{
  --w:clamp(120px,15vw,190px);--R:calc(var(--w) * 1.21);--sx:70%;--sy:40%;
  padding-bottom:clamp(3rem,6vw,5rem);
}
.ph--arch::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--sx) var(--sy),rgba(207,168,79,.22),transparent 62%);
}
.ph--arch::after{
  content:"";position:absolute;z-index:-1;right:-12%;top:50%;width:min(860px,90vw);aspect-ratio:1;translate:0 -50%;
  border-radius:50%;border:1px solid rgba(138,107,44,.22);
  box-shadow:inset 0 0 0 46px rgba(207,168,79,.04),inset 0 0 0 47px rgba(138,107,44,.14);
  animation:ph-orbit 60s linear infinite;
}
@keyframes ph-orbit{to{rotate:360deg;}}
.ph--arch .ph-wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding-bottom:0;}
.ph--arch .ph-title{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98;letter-spacing:-.02em;}
.ph-line{display:block;overflow:hidden;padding-bottom:.08em;}
.ph-line > span{display:inline-block;animation:ph-line-up 1.1s cubic-bezier(.2,.8,.2,1) both;}
.ph-line:nth-child(2) > span{animation-delay:.12s;}
.ph-line:nth-child(3) > span{animation-delay:.24s;}
@keyframes ph-line-up{from{transform:translateY(112%);}}
.ph--arch .ph-lede{animation-delay:.5s;}
.ph-scene{
  position:relative;height:calc(var(--w) * 1.33 + 90px);perspective:1500px;display:grid;place-items:center;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ph-scene.is-dragging{cursor:grabbing;}
.ph-ring{position:relative;width:var(--w);height:calc(var(--w) * 1.33);transform-style:preserve-3d;transform:rotateX(-7deg);}
.ph-panel{
  position:absolute;inset:0;padding:7px;border-radius:999px 999px 10px 10px;
  background:linear-gradient(160deg,#e4c16f,#8a6b2c);box-shadow:0 30px 50px -22px rgba(33,29,22,.55);
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(var(--R));
}
.ph-panel-photo{width:100%;height:100%;border-radius:999px 999px 5px 5px;overflow:hidden;background:#e6d3ae;}
.ph-panel img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;}
.ph-floor{
  position:absolute;left:50%;bottom:6%;width:calc(var(--w) * 3);height:calc(var(--w) * .34);translate:-50% 0;
  background:radial-gradient(closest-side,rgba(184,147,63,.3),transparent);filter:blur(6px);pointer-events:none;
}
.ph-hint{
  position:absolute;left:50%;bottom:-4px;translate:-50% 0;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);white-space:nowrap;animation-delay:.6s;
}
.ph-hint::before,.ph-hint::after{content:"←";color:var(--gold-deep);}
.ph-hint::after{content:"→";}

/* ——— booking: camera viewfinder between two film strips ——— */
.ph--viewfinder{
  --fw:clamp(118px,15vw,190px);
  display:grid;place-items:center;
  padding:
    calc(var(--header-offset) + var(--safe-top) + var(--fw) / 1.5 + .75rem)
    6vw
    calc(var(--fw) / 1.5 + 1.75rem);
}
.ph-reel{position:absolute;left:0;z-index:-1;width:100%;overflow:hidden;pointer-events:none;}
.ph-reel--a{top:calc(var(--header-offset) + var(--safe-top));}
.ph-reel--b{bottom:.75rem;}
.ph-reel > div{display:flex;gap:10px;width:max-content;animation:ph-roll 60s linear infinite;}
.ph-reel--b > div{animation-direction:reverse;animation-duration:75s;}
.ph-frame{position:relative;flex:none;width:var(--fw);aspect-ratio:3/2;margin:0;padding:14px 0;background:var(--ink);}
.ph-frame::before,
.ph-frame::after{
  content:"";position:absolute;left:0;right:0;height:5px;opacity:.45;
  background:repeating-linear-gradient(90deg,var(--ph-cream) 0 8px,transparent 8px 16px);
}
.ph-frame::before{top:4px;}
.ph-frame::after{bottom:4px;}
.ph-frame img{display:block;width:100%;height:100%;object-fit:cover;opacity:.72;filter:grayscale(1) contrast(1.05);background:#3a342a;}
@keyframes ph-roll{to{transform:translateX(-50%);}}

.ph-vf{
  position:relative;width:100%;max-width:780px;text-align:center;
  padding:clamp(1.5rem,3.2vw,2.6rem) clamp(1.4rem,5vw,3.6rem);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.97) 55%,rgba(255,255,255,0) 100%);
}
.ph-k{position:absolute;width:38px;height:38px;border:0 solid var(--gold-deep);animation:ph-k-in 1.1s cubic-bezier(.2,.8,.2,1) both;}
.ph-k1{top:0;left:0;border-width:2px 0 0 2px;--kx:-40px;--ky:-40px;}
.ph-k2{top:0;right:0;border-width:2px 2px 0 0;--kx:40px;--ky:-40px;}
.ph-k3{bottom:0;left:0;border-width:0 0 2px 2px;--kx:-40px;--ky:40px;}
.ph-k4{bottom:0;right:0;border-width:0 2px 2px 0;--kx:40px;--ky:40px;}
@keyframes ph-k-in{from{translate:var(--kx) var(--ky);opacity:0;}}
.ph-hud{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin:0 0 clamp(1rem,2.4vw,1.6rem);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
}
.ph-hud a{color:var(--gold-deep);}
.ph-hud i{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#c4553a;vertical-align:1px;animation:ph-blink 1.6s steps(2) infinite;}
@keyframes ph-blink{50%{opacity:.15;}}
.ph--viewfinder .ph-eyebrow{justify-content:center;}
.ph--viewfinder .ph-eyebrow::after{content:"";width:34px;height:1.5px;background:currentColor;}
.ph-vf-title{
  margin:0 0 1rem;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.4rem,5vw,3.9rem);line-height:1.02;letter-spacing:-.01em;color:var(--ink);
  animation:ph-focus 1.4s cubic-bezier(.3,.7,.2,1) .4s both;
}
.ph-vf-title span{display:block;font-style:italic;color:var(--gold-deep);}
@keyframes ph-focus{from{filter:blur(14px);opacity:.3;transform:scale(1.04);}}
.ph-vf-lede{max-width:32em;margin:0 auto 1.6rem;font-size:clamp(.98rem,1.35vw,1.06rem);line-height:1.7;color:var(--ink-dim);}
.ph-shutter{display:inline-flex;align-items:center;gap:18px;color:var(--ink);font-size:1rem;font-weight:500;text-align:left;}
.ph-shutter-ring{
  position:relative;flex:none;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  border:3px solid var(--gold-deep);transition:transform .3s;
}
.ph-shutter-ring::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--gold);animation:ph-ping 2.4s ease-out infinite;}
.ph-shutter-ring b{width:56px;height:56px;border-radius:50%;background:var(--ink);transition:transform .25s,background .25s;}
@keyframes ph-ping{from{transform:scale(1);opacity:.7;}to{transform:scale(1.5);opacity:0;}}
.ph-shutter:hover .ph-shutter-ring b{background:var(--gold);transform:scale(.9);}
.ph-shutter:active .ph-shutter-ring b{transform:scale(.72);}
.ph-shutter:focus-visible{outline:2px solid var(--gold-deep);outline-offset:8px;border-radius:999px;}
.ph-shutter-sub{display:block;margin-top:2px;font-size:.82rem;font-weight:400;color:var(--ink-dim);}
.ph-flash{position:fixed;inset:0;z-index:9000;background:#fff;opacity:0;pointer-events:none;}
.ph-flash.is-pop{animation:ph-pop .5s ease-out;}
@keyframes ph-pop{0%{opacity:.95;}100%{opacity:0;}}

@media (max-width:860px){
  .ph-wrap,
  .ph--arch .ph-wrap{grid-template-columns:1fr;gap:2rem;}
  .ph-stage,
  .ph-scene{order:-1;}
  .ph--collage .ph-stage{height:360px;}
  .ph--collage .ph-c1{height:190px;}
  .ph--collage .ph-c2{height:230px;}
  .ph--collage .ph-c3{height:200px;}
  .ph--collage .ph-c4{top:200px;height:130px;}
  .ph--collage .ph-c5{top:210px;height:120px;}
  .ph--collage .ph-badge{left:0;width:96px;}
  .ph--board .ph-stage{max-width:420px;}
  .ph--board .ph-badge{width:24%;}
  .ph-env-stage{padding-top:150px;}
  .ph--envelope::before{left:auto;right:6%;top:calc(var(--header-offset) + var(--safe-top) + 10px);font-size:30px;}
  .ph--arch{--w:clamp(110px,30vw,150px);}
  .ph--arch::after{right:-40%;top:22%;}
}
@media (max-width:560px){
  .ph-title{font-size:clamp(2.1rem,9vw,2.7rem);}
  .ph--arch .ph-title{font-size:clamp(2.3rem,11vw,3.2rem);}
  .ph--collage .ph-stage{height:320px;}
  .ph--collage .ph-card{padding:7px 7px 24px;}
  .ph--collage .ph-card::after{width:52px;height:18px;margin-left:-26px;top:-9px;}
  .ph--collage .ph-badge{left:-8px;top:-28px;width:84px;}
  .ph--collage .ph-c1{top:50px;height:160px;}
  .ph--collage .ph-c2{height:200px;}
  .ph--collage .ph-c3{top:44px;height:170px;}
  .ph--collage .ph-c4{top:180px;height:115px;}
  .ph--collage .ph-c5{top:192px;height:105px;}
  .ph-env-stage{padding-top:130px;}
  .ph--viewfinder{--fw:112px;min-height:0;padding-left:5vw;padding-right:5vw;}
  .ph-vf{padding:1.5rem 1.1rem 1.6rem;}
  .ph-hud{justify-content:center;}
  .ph-hud span:last-child{display:none;}
  .ph--viewfinder .ph-eyebrow{letter-spacing:.16em;}
  .ph--viewfinder .ph-eyebrow::before,
  .ph--viewfinder .ph-eyebrow::after{display:none;}
  .ph-vf-title{font-size:clamp(2.4rem,12vw,3.1rem);}
  .ph-vf-lede{margin-bottom:1.4rem;}
  .ph-shutter{gap:14px;}
  .ph-shutter-ring{width:64px;height:64px;}
  .ph-shutter-ring b{width:46px;height:46px;}
}
@media (prefers-reduced-motion:reduce){
  .ph-in,.ph-card,.ph-line > span{animation:none;}
  .ph-title em path{animation:none;stroke-dashoffset:0;}
  .ph-badge svg,.ph--arch::after{animation:none;}
  .ph-env-card,.ph-env-flap,.ph-env-seal{transition:none;}
  .ph-reel > div,.ph-hud i,.ph-shutter-ring::before,.ph-k,.ph-vf-title{animation:none;}
}
