/* ============================================================================
   WDK Photography — the hub.
   One system with the client galleries: Outfit, warm monochrome,
   photographs as the only color on the page.
   ========================================================================== */
:root{
  --paper:#ffffff; --ink:#141210; --muted:#8a847d; --line:#e5e1dc;
  --card:#faf8f5; --slot1:#e8e2da; --slot2:#d6cec4;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Outfit",-apple-system,system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:#fff}
a{color:inherit}
img{max-width:100%;display:block}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1.2rem,4vw,3rem);background:#fffdf9e6;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wordmark{text-decoration:none;font-weight:500;letter-spacing:.34em;font-size:.82rem;text-transform:uppercase}
.wordmark span{font-weight:300;color:var(--muted)}
.nav__links{display:flex;gap:clamp(.9rem,2.5vw,1.8rem);align-items:center}
.nav__links a{text-decoration:none;font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nav__links a:hover,.nav__links a.on{color:var(--ink)}
.nav__cta{border:1px solid var(--ink);border-radius:999px;padding:.5rem 1.1rem;color:var(--ink)!important}
.nav__cta:hover{background:var(--ink);color:#fff!important}
@media(max-width:44em){.nav__links a:not(.nav__cta){display:none}.nav__links .m{display:inline-block!important}}
.nav__links .m{display:none}

/* ---- photo slots (until her real photographs land) ---- */
.slot{position:relative;background:linear-gradient(135deg,var(--slot1),var(--slot2));overflow:hidden}
.slot::after{content:attr(data-label);position:absolute;inset:auto .8rem .7rem auto;font-size:.56rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff9;pointer-events:none}
.slot:has(img)::after,.slot.filled::after{content:none}
.slot img{width:100%;height:100%;object-fit:cover}

/* ---- hero slideshow: gentle crossfade with a slow drift ---- */
#heroslot img{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
#heroslot img.on{opacity:1;animation:drift 9s ease-out forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.055)}}
@media(prefers-reduced-motion:reduce){#heroslot img.on{animation:none}}

/* ---- hero ---- */
.hero{position:relative;min-height:86svh;display:flex;align-items:flex-end}
.hero .slot{position:absolute;inset:0}
.hero__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,14,12,.5),rgba(16,14,12,.04) 55%)}
.hero__text{position:relative;color:#fff;padding:clamp(1.6rem,5vw,3.4rem);max-width:52rem}
.kicker{font-size:.64rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;opacity:.9}
h1{font-weight:300;font-size:clamp(2.4rem,7.5vw,4.8rem);line-height:1.04;letter-spacing:.005em;text-wrap:balance;margin:.6rem 0 1.2rem}
.btn{display:inline-block;font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding:.9rem 2rem;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.hero .btn:hover{background:#fff;color:var(--ink)}
.btn--ink{border-color:var(--ink);color:var(--ink)}
.btn--ink:hover{background:var(--ink);color:#fff}
.btn--solid{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--solid:hover{background:#000}

/* ---- shared section shell ---- */
.wrap{max-width:74rem;margin:0 auto;padding:clamp(2.2rem,6vw,4.5rem) clamp(1.2rem,4vw,3rem)}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
h2{font-weight:300;font-size:clamp(1.5rem,3.5vw,2.3rem);letter-spacing:.01em}
.shead a{font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.shead a:hover{color:var(--ink)}

/* ---- services trio ---- */
.trio{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.6vw,1.2rem)}
.trio a{position:relative;text-decoration:none;display:block;aspect-ratio:3/4;border-radius:4px;overflow:hidden}
.trio .slot{position:absolute;inset:0;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.trio a:hover .slot{transform:scale(1.03)}
.trio__label{position:absolute;left:1rem;bottom:.9rem;color:#fff;z-index:2}
.trio__label b{display:block;font-weight:400;font-size:1.05rem;letter-spacing:.04em}
.trio__label i{font-style:normal;font-size:.68rem;color:#fffc;font-weight:300;letter-spacing:.04em}
.trio a::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(to top,rgba(16,14,12,.55),transparent);z-index:1}
@media(max-width:44em){.trio{grid-template-columns:repeat(2,1fr);gap:.5rem}.trio__label b{font-size:.82rem}.trio__label i{display:none}.trio__label{left:.6rem;bottom:.5rem}}

/* ---- quote band ---- */
.quote{background:var(--card);border-block:1px solid var(--line)}
.quote .wrap{text-align:center;max-width:46rem;padding-block:clamp(2rem,5vw,3.4rem)}
.quote p:first-child{font-weight:300;font-size:clamp(1.2rem,3vw,1.7rem);line-height:1.4;letter-spacing:.01em}
.quote p+p{margin-top:1rem;color:var(--muted);font-size:.92rem;max-width:56ch;margin-inline:auto}

/* ---- portfolio grid ---- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.chip{font-family:inherit;font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.4vw,1.1rem)}
.pgrid .slot{aspect-ratio:4/5;border-radius:4px}
.pgrid .wide{grid-column:span 2;aspect-ratio:auto}
@media(max-width:44em){.pgrid{grid-template-columns:repeat(2,1fr);gap:.5rem}.pgrid .wide{grid-column:span 2}}

/* ---- pricing ---- */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.4rem);grid-auto-rows:1fr}
.pack{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1.6rem 1.5rem}
.pack--star{border-color:var(--ink)}
.pack__tag{font-size:.56rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;min-height:1em}
.pack h3{font-weight:400;font-size:1.25rem;letter-spacing:.02em}
.pack__sub{color:var(--muted);font-size:.85rem;font-weight:300;margin:.3rem 0 1rem}
.pack__price{font-weight:300;font-size:2rem;letter-spacing:.01em}
.pack__price i{font-style:normal;font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-left:.4rem}
.pack ul{list-style:none;padding:0;margin:1.1rem 0 1.4rem;border-top:1px solid var(--line)}
.pack li{padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.85rem;font-weight:300;color:#3d3934}
.pack .btn{margin-top:auto;align-self:flex-start}
@media(max-width:54em){.packs{grid-template-columns:1fr}.pack{padding:1.3rem 1.2rem}.pack ul{margin:.8rem 0 1rem}}

/* ---- inquiry ---- */
.iwrap{max-width:38rem}
.lede{color:var(--muted);font-weight:300;max-width:52ch;margin-top:.5rem}
form.inq{display:flex;flex-direction:column;gap:.9rem;margin-top:1.8rem}
.inq label{font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:.4rem}
.inq input,.inq select,.inq textarea{font-family:inherit;font-size:.95rem;font-weight:300;padding:.75rem .9rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.inq input:focus,.inq select:focus,.inq textarea:focus{outline:none;border-color:var(--ink)}
.inq .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:34em){.inq .row{grid-template-columns:1fr}}
.inq button{align-self:flex-start}
.formnote{font-size:.72rem;color:var(--muted);min-height:1em;letter-spacing:.04em}

/* ---- cta band + footer ---- */
.cta{background:var(--ink);color:#fff}
.cta .wrap{text-align:center;padding-block:clamp(2.2rem,5vw,3.6rem)}
.cta h2{margin-bottom:1.2rem}
.cta .btn:hover{background:#fff;color:var(--ink)}
.foot{border-top:1px solid var(--line);padding:1.6rem clamp(1.2rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot span,.foot a{font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .links{display:flex;gap:1.2rem}

/* ---- reveal-on-scroll (state of the art, quietly) ---- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}