/* houdini.digital/pk/*: surface and motion layer for the programmatic pages.
   Emitted by tools/build-local.mjs on every page. Adds rules only.
   Same system as the homepage and real estate layers: pill header,
   inset scroll driven hero with one image per service, rounded cards,
   accordion FAQ, pill buttons. Rollback: drop the link from the generator. */

/* header: black pill hanging from the top edge */
header{background:transparent!important;border-bottom:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
header .w.nav{
  width:auto;max-width:min(940px,calc(100vw - 32px));margin:0 auto;
  background:#000;border-radius:0 0 26px 26px;
  padding:0 clamp(16px,2.6vw,30px);height:72px;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.85),inset 0 -1px 0 rgba(184,153,104,.18);
}
header .cta{border-radius:999px}

/* hero: one image per service, inset and rounded, copy sits on the foot */
.pkhero{position:relative;padding:clamp(10px,1.4vw,22px) clamp(10px,1.4vw,22px) 0;margin-top:-72px}
.pkhero-frame{
  position:relative;overflow:hidden;border-radius:clamp(18px,2.4vw,34px);
  border:1px solid rgba(184,153,104,.18);background:#111015;
  height:clamp(460px,68vh,680px);
}
.pkhero-img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,calc(var(--sy,0) * 12%),0) scale(calc(1.02 + var(--sy,0) * .06));
  transform-origin:center;will-change:transform;
}
.pkhero-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,0) 38%,rgba(11,11,12,.55) 68%,rgba(11,11,12,.9) 100%);
}
.pkhero-in{
  position:absolute;left:0;right:0;bottom:clamp(34px,6vw,72px);z-index:2;
  transform:translate3d(0,calc(var(--sy,0) * -10%),0);opacity:calc(1 - var(--sy,0) * .9);
  will-change:transform,opacity;
}
.pkhero-in .eyebrow{margin-bottom:14px}
.pkhero-in h1{font-size:clamp(34px,6vw,62px);margin-bottom:16px;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.pkhero-in .lede{margin-bottom:0;max-width:720px;color:#E6D3AE;text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* entrance: only when the script is present, so nothing can stay hidden */
html.pk-js .pkhero-in>*{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
html.pk-js .pkhero.pk-go .pkhero-in>*{opacity:1;transform:none}
html.pk-js .pkhero.pk-go .pkhero-in>:nth-child(2){transition-delay:.15s}
html.pk-js .pkhero.pk-go .pkhero-in>:nth-child(3){transition-delay:.3s}
html.pk-js .pkhero.pk-go .pkhero-in>:nth-child(4){transition-delay:.42s}
html.pk-js .pkhero.pk-go .pkhero-in>:nth-child(5){transition-delay:.52s}

/* hero call to action. Paid traffic arrives here and must be able to act without
   scrolling; the note repeats the price floor the ads pin as headline two, so the
   promise in the ad and the promise on the page match. */
.pkhero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pkhero-cta a{display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:14px 26px;border-radius:6px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pkhero-cta .p{background:#B89968;color:#0B0B0C}
.pkhero-cta .s{border:1px solid rgba(244,239,230,.34);color:#F4EFE6;background:rgba(11,11,12,.38)}
.pkhero-note{margin:14px 0 0;font-size:13px;color:#E6D3AE;opacity:.94;
  text-shadow:0 1px 12px rgba(0,0,0,.7)}
main{padding-top:36px}

/* cards */
.box{border-radius:20px;padding:30px 30px 22px;background:linear-gradient(160deg,#16151B,#0F0E12);
  border:1px solid rgba(184,153,104,.22);box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),border-color .4s ease}
.box:hover{transform:translateY(-3px);border-color:rgba(184,153,104,.42)}
.box .n{font-size:30px;margin-bottom:8px}
.links a,.big a,.enq button{border-radius:999px}
/* the "also available" pills carried the list diamond as well; pills only */
ul.more li{padding-left:0}
ul.more li::before{display:none}
.links a{transition:border-color .25s ease,color .25s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.links a:hover{transform:translateY(-2px)}
.big .p{background:linear-gradient(160deg,#DEC48D,#B89968 54%,#987B4F)}

/* faq: accordion cards on native details */
details{border:1px solid rgba(184,153,104,.14);border-radius:14px;padding:14px 18px;margin:8px 0;background:#0F0E12;
  transition:border-color .25s ease,box-shadow .25s ease}
details:hover{border-color:rgba(184,153,104,.32)}
details[open]{border-color:rgba(184,153,104,.45);box-shadow:0 10px 28px -12px rgba(0,0,0,.6)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px}
summary::after{content:"";width:9px;height:9px;flex-shrink:0;border-right:1.5px solid #B89968;border-bottom:1.5px solid #B89968;
  transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.3,1);margin-top:-4px}
details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
details[open]>p{animation:pk-open .35s cubic-bezier(.2,.7,.3,1) both}
@keyframes pk-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* entrance for cards, list rows and faq items: classes added by revamp-pk.js */
.pz{opacity:0;transform:scale(.97) translateY(10px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.pz.pz-in{opacity:1;transform:none}
.box.pz.pz-in:hover{transform:translateY(-3px)}

/* footer */
footer{border-top:1px solid rgba(184,153,104,.14);background:linear-gradient(180deg,#0B0B0C,#0D0C0E)}

/* mobile */
@media (max-width:900px){
  header .w.nav{height:60px;border-radius:0 0 18px 18px;padding-inline:14px;max-width:calc(100vw - 16px)}
  .pkhero{padding:8px 8px 0;margin-top:-60px}
}
@media (max-width:560px){
  /* Both contact pills now show on a phone. Room is made by dropping the Home
     icon, which was redundant because the wordmark already links to /, and by
     dropping the phone number from the Call label; the tel: link still carries
     it. Two ways to make contact beat one way plus a link back to the homepage. */
  header .home{display:none}
  header .cta .num{display:none}
  header .w.nav{gap:8px}
  .bm{flex:0 1 auto;min-width:0}
  header .cta{padding:8px 9px;font-size:9.5px;letter-spacing:.06em;white-space:nowrap;min-height:38px}
  .nav{gap:10px}
  .hactions{flex-wrap:nowrap;gap:6px}
  /* the wordmark, not the buttons, was eating the bar: DIGITAL at 1.35em
     letter-spacing is over 100px on a phone. Tightened so both contact pills fit. */
  .bm .a{font-size:15px;letter-spacing:.1em}
  .bm .b{font-size:6px;letter-spacing:.34em}
  header .w.nav{width:calc(100vw - 12px);max-width:calc(100vw - 12px)}
  .hactions{flex:0 0 auto}
  /* home becomes a round icon button, label kept for screen readers */
  .home{width:38px;height:38px;min-height:0;padding:0;justify-content:center;border-radius:50%}
  .home span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pkhero-in .eyebrow{font-size:9.5px;letter-spacing:.2em}
}
@media (max-width:380px){
  header .cta{font-size:9px;letter-spacing:0;padding:8px 7px}
  .bm .a{font-size:15px;letter-spacing:.14em}
  .pkhero-frame{border-radius:16px;height:clamp(400px,64vh,560px)}
  .pkhero-in{bottom:22px}
  .pkhero-in h1{font-size:clamp(30px,8.4vw,40px)}
  .pkhero-in .lede{font-size:17px}
  .pkhero-cta{margin-top:16px;gap:8px}
  .pkhero-cta a{min-height:46px;padding:12px 18px;font-size:11px;letter-spacing:.1em}
  .pkhero-note{font-size:12px;margin-top:11px}
  .box{padding:24px 20px 18px;border-radius:16px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .pkhero-img,.pkhero-in{transform:none;opacity:1}
  html.pk-js .pkhero-in>*{opacity:1;transform:none;transition:none}
  .pz{opacity:1;transform:none;transition:none}
  details[open]>p{animation:none}
}

/* one photograph mid page, breaking the long copy before the closing CTA */
.pkphoto{margin:34px 0 6px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(184,153,104,.2);background:#0F0E12}
.pkphoto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:560px){.pkphoto{margin:26px 0 4px;border-radius:14px}}