/* ═══════════════════════════════════════════════════════════
   PAGES — sub-page components for World 03 (Contact Sheet).
   Loaded after base.css + theme.css. Extends the same light-
   table language: mono metadata, hairline frames, frame numbers
   as real artefacts, chinagraph accent. New components are
   namespaced (.phero .flt .pgal .pmeta .pnav .svc .pkg .bk)
   so nothing collides with the home page's selectors.
   ═══════════════════════════════════════════════════════════ */

/* ── Page hero — a dark sheet header, nav sits legibly over it ── */
.phero{
  background:var(--inv-bg); color:var(--inv-fg);
  padding:calc(var(--nav-h) + env(safe-area-inset-top) + clamp(2.4rem,7vw,4.5rem))
          var(--gut) clamp(2.2rem,6vw,3.6rem);
  border-bottom:1px solid rgba(241,241,239,.16);
}
.phero__in{ max-width:var(--maxw); margin-inline:auto; }
.phero__slug{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:baseline;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(241,241,239,.6); margin:0 0 1.1rem;
  padding-bottom:.9rem; border-bottom:1px solid rgba(241,241,239,.16);
}
.phero__slug b{ color:var(--accent); font-weight:600; }
.phero__title{ font-size:var(--fs-h2); text-wrap:balance; margin:0; }
.phero__title em{ font-style:normal; color:var(--accent); }
.phero__lead{
  font-size:1.02rem; line-height:1.6; color:rgba(241,241,239,.78);
  max-width:58ch; margin:1.1rem 0 0;
}
.phero--tight .phero__lead{ max-width:52ch; }

/* ── Filter chips (Work grid) ─────────────────────────────── */
.flt{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:clamp(1.5rem,4vw,2.4rem) var(--gut) 0;
  max-width:var(--maxw); margin-inline:auto;
}
.flt__btn{
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.5rem .85rem; border:1px solid var(--line);
  color:var(--fg-soft); transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.flt__btn:hover{ color:var(--fg); border-color:var(--fg); }
.flt__btn[aria-pressed="true"]{ background:var(--fg); color:var(--inv-fg); border-color:var(--fg); }

/* ── Work grid page ───────────────────────────────────────── */
.works{ padding-block:clamp(1.5rem,4vw,2.4rem) var(--sect); }
.tile{ display:block; }
.tile figure{ position:relative; overflow:hidden; }
.tile__fr{
  position:absolute; top:.5rem; left:.5rem; z-index:2;
  font-family:var(--font-body); font-size:.6rem; letter-spacing:.1em;
  background:rgba(19,19,19,.82); color:var(--inv-fg); padding:.18rem .4rem;
}
.tile img{ transition:transform .5s var(--ease), filter .5s var(--ease); }
.tile:hover img{ transform:scale(1.03); }
.tile__view{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.35rem;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  opacity:0; transform:translateY(4px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.tile:hover .tile__view, .tile:focus-visible .tile__view{ opacity:1; transform:none; }
.tile__view::after{ content:"→"; }
.tile.is-hidden{ display:none; }

/* ── Project detail ───────────────────────────────────────── */
.proj{ padding-block:clamp(2.4rem,6vw,4rem) var(--sect); }
.proj__wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* Frame-data metadata block */
.pmeta{
  display:grid; gap:0; border-top:2px solid var(--fg);
  margin-bottom:clamp(2.2rem,5vw,3.4rem);
}
.pmeta__row{
  display:grid; grid-template-columns:1fr; gap:.15rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.pmeta__row dt{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft);
}
.pmeta__row dd{ margin:0; font-size:.9rem; }
.pmeta__row dd.accent{ color:var(--accent); }

/* Project narrative */
.pbody{ max-width:60ch; margin-bottom:clamp(2.4rem,6vw,3.6rem); }
.pbody h2{
  font-size:1.4rem; text-transform:uppercase; margin:2rem 0 .7rem;
}
.pbody h2:first-child{ margin-top:0; }
.pbody p{ color:var(--fg); margin-bottom:1.1rem; }

/* Contact-sheet gallery — numbered frames, mixed rhythm */
.pgal{ display:grid; gap:.75rem; }
.pgal figure{ position:relative; overflow:hidden; }
.pgal img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; border:1px solid var(--line); display:block; }
.pgal__fr{
  position:absolute; top:.5rem; left:.5rem; z-index:2;
  font-family:var(--font-body); font-size:.6rem; letter-spacing:.1em;
  background:rgba(19,19,19,.82); color:var(--inv-fg); padding:.18rem .4rem;
}
.pgal figure.wide img{ aspect-ratio:3/2; }
.pgal figure.tall img{ aspect-ratio:4/5; }

/* Prev / next project */
.pnav{
  display:grid; gap:.75rem; margin-top:clamp(3rem,7vw,5rem);
  border-top:2px solid var(--fg); padding-top:1.4rem;
}
.pnav a{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border:1px solid var(--line); padding:1.1rem 1.2rem;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.pnav a:hover{ border-color:var(--fg); }
.pnav .dir{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft); }
.pnav .ttl{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:1.05rem; }
.pnav .next{ text-align:right; }

/* ── Services ─────────────────────────────────────────────── */
.svc{ padding-block:clamp(2.4rem,6vw,4rem) var(--sect); }
.svc__wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.svc__lead-row{ margin-bottom:clamp(2.2rem,5vw,3.2rem); }
.svc__note{
  font-size:.78rem; color:var(--fg-soft); letter-spacing:.02em;
  border-left:2px solid var(--accent); padding-left:.9rem; max-width:60ch;
}

/* Expanded package cards */
.pkgs{ display:grid; gap:.75rem; margin-bottom:clamp(3rem,7vw,5rem); }
.pkg{
  border:1px solid var(--fg); padding:1.5rem 1.3rem; display:flex; flex-direction:column;
  scroll-margin-top:calc(var(--nav-h) + 1.5rem);
}
.pkg.is-feature{ background:var(--fg); color:var(--inv-fg); }
.pkg.is-feature .pkg__price span,
.pkg.is-feature .pkg__desc,
.pkg.is-feature .pkg__meta dt{ color:rgba(241,241,239,.7); }
.pkg.is-feature .pkg__list{ border-top-color:rgba(241,241,239,.3); }
.pkg.is-feature .pkg__list li::before{ color:var(--accent); }
.pkg__flag{
  align-self:flex-start; background:var(--accent); color:#fff;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .55rem; margin:0 0 .8rem;
}
.pkg__name{ font-size:1.6rem; margin:0 0 .5rem; }
.pkg__price{ font-family:var(--font-display); font-weight:600; font-size:2.1rem; line-height:1; margin:0 0 .9rem; }
.pkg__price:has(+ .pkg__hint){ margin-bottom:.4rem; }
.pkg__hint{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; letter-spacing:.02em;
  color:var(--accent); margin:0 0 1rem; border-bottom:1px solid currentColor; width:fit-content;
}
.pkg.is-feature .pkg__hint{ color:var(--accent); }
.pkg__price span{
  display:block; font-family:var(--font-body); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-soft); margin-bottom:.25rem;
}
.pkg__desc{ color:var(--fg-soft); font-size:.9rem; margin:0 0 1.1rem; }
.pkg__list{
  display:grid; gap:.5rem; border-top:1px solid var(--line); padding-top:1rem; margin:0 0 1.1rem;
  font-size:.82rem;
}
.pkg__list li{ padding-left:1.2rem; position:relative; }
.pkg__list li::before{ content:"·"; position:absolute; left:.35rem; color:var(--accent); }
.pkg__meta{ display:grid; gap:.5rem; margin:0 0 1.3rem; }
.pkg__meta div{ display:grid; gap:.1rem; }
.pkg__meta dt{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft); }
.pkg__meta dd{ margin:0; font-size:.82rem; }
.pkg__cta{ margin-top:auto; }
.pkg__cta .btn{ width:100%; }

/* What every shoot includes */
.svc-base{ border-top:2px solid var(--fg); padding-top:1.4rem; margin-bottom:clamp(3rem,7vw,5rem); }
.svc-base h2{ font-size:1.5rem; text-transform:uppercase; margin-bottom:1.2rem; }
.svc-base__grid{ display:grid; gap:1.1rem; }
.svc-base__grid div h3{ font-size:1.05rem; margin-bottom:.35rem; }
.svc-base__grid div p{ color:var(--fg-soft); font-size:.86rem; margin:0; }

/* Add-ons */
.addons{ display:grid; gap:0; border-top:2px solid var(--fg); margin-bottom:clamp(3rem,7vw,5rem); }
.addons > h2{ font-size:1.5rem; text-transform:uppercase; padding-top:1.4rem; margin-bottom:.4rem; }
.addons__row{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.9rem 0; border-bottom:1px solid var(--line);
}
.addons__row span:first-child{ font-size:.9rem; }
.addons__row span:last-child{ font-family:var(--font-display); font-weight:600; color:var(--accent); white-space:nowrap; }

/* FAQ */
.faq{ border-top:2px solid var(--fg); }
.faq > h2{ font-size:1.5rem; text-transform:uppercase; padding-top:1.4rem; margin-bottom:.6rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1rem 0; display:flex; justify-content:space-between;
  gap:1rem; align-items:center; font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; font-size:1.05rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--fg-soft); font-size:.9rem; padding:0 0 1.1rem; max-width:64ch; margin:0; }

/* ── Booking ──────────────────────────────────────────────── */
.bk{ padding-block:clamp(2.4rem,6vw,4rem) var(--sect); }
.bk__wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
           display:grid; gap:clamp(2.5rem,6vw,4rem); }
.bk__step-tag{
  font-family:var(--font-body); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .5rem;
}
.bk__step h2{ font-size:1.7rem; text-transform:uppercase; margin:0 0 .4rem; }
.bk__step > p{ color:var(--fg-soft); font-size:.9rem; max-width:52ch; margin:0 0 1.6rem; }

/* Form */
.bk__form{ display:grid; gap:1.1rem; }
/* align-content:start keeps rows packed at the top. Without it, a field paired
   in a two-column row stretches to the taller neighbour and its auto rows
   spread out — pushing its input down so the two no longer line up. */
.field{ display:grid; gap:.4rem; align-content:start; }
.field--row{ grid-template-columns:1fr; gap:1.1rem; }
.field > label, .fieldset > legend{
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft);
}
.field .req{ color:var(--accent); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:.9rem; color:var(--fg);
  background:transparent; border:1px solid var(--line); border-radius:0;
  padding:.8rem .85rem; width:100%; transition:border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(1.1em), calc(100% - 13px) calc(1.1em);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2.2rem; }
.field .err{ font-size:.68rem; color:var(--accent); min-height:.9rem; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{ border-color:var(--accent); }

/* Prefill confirmation — shown when arriving from a Services tier button */
.bk__prefill{
  display:flex; align-items:center; gap:.4rem;
  font-size:.68rem; letter-spacing:.04em; color:var(--accent);
}
.bk__prefill::before{ content:"✓"; font-weight:700; }
.bk__prefill[hidden]{ display:none; }
.field select.is-prefilled{ border-color:var(--accent); }

/* Package carried over from Services */
.bk__prefill{
  display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}
.bk__prefill::before{ content:"✓"; }
.bk__prefill a{ color:var(--fg-soft); border-bottom:1px solid currentColor; text-transform:none; letter-spacing:0; }
.field.is-prefilled select{ border-color:var(--accent); }
@keyframes pkgflash{ 0%{ background:rgba(232,69,44,.14); } 100%{ background:transparent; } }
.field.is-prefilled select{ animation:pkgflash 1.6s var(--ease) 1; }

/* chip-style single-select (project type / package) */
.fieldset{ display:grid; gap:.5rem; border:0; padding:0; margin:0; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{
  display:inline-block; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); padding:.5rem .8rem; color:var(--fg-soft);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chip input:checked + span{ background:var(--fg); color:var(--inv-fg); border-color:var(--fg); }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

.bk__submit{ display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center; margin-top:.4rem; }
.bk__submit .btn{ min-width:200px; }
.bk__alt{ font-size:.78rem; color:var(--fg-soft); }
.bk__alt a{ border-bottom:1px solid currentColor; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Success panel */
.bk__done{ border:1px solid var(--accent); padding:1.6rem 1.4rem; }
.bk__done h3{ font-size:1.4rem; text-transform:uppercase; margin-bottom:.6rem; }
.bk__done p{ color:var(--fg-soft); font-size:.9rem; margin-bottom:.4rem; }

/* Calendar embed slot.
   Calendly's own widget sets the iframe; we only supply the frame around it.
   The height lives inline on the div (their docs) so it is definite before
   widget.js runs — a percentage-height iframe needs a definite parent. */
.bk__cal{ border:1px solid var(--line); }
#calendlyEmbed iframe{ display:block; width:100%; height:100%; border:0; }
.bk__cal-note{ padding:1.2rem 1.4rem; font-size:.85rem; }
.bk__cal-note a{ color:var(--accent); border-bottom:1px solid currentColor; }
.bk__cal-ph{
  display:grid; place-items:center; text-align:center; gap:1rem;
  padding:clamp(2.4rem,7vw,4.5rem) 1.4rem; background:
    repeating-linear-gradient(45deg,transparent 0 10px, rgba(19,19,19,.02) 10px 20px);
}
.bk__cal-ph p{ font-size:.82rem; color:var(--fg-soft); max-width:42ch; margin:0; }
.bk__cal-ph .tag{
  font-family:var(--font-body); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
@media (max-width:560px){
  /* Calendly's mobile layout stacks taller; override the inline desktop height */
  #calendlyEmbed{ height:1040px !important; }
}

/* ── Add-on estimate builder (booking form) ──────────────────────────────── */
.addons-pick{ display:grid; gap:.9rem; }
.addons-pick__opt{
  font-size:.58rem; letter-spacing:.1em; color:var(--fg-soft); text-transform:uppercase;
}
.addons-pick__row{ display:flex; gap:.5rem; align-items:stretch; }
.addons-pick__row select{ flex:1 1 auto; min-width:0; }
.addons-pick__row .btn{ flex:0 0 auto; white-space:nowrap; }

.addons-pick__list{ display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.addons-pick__item{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); padding:.55rem .65rem; font-size:.82rem;
}
.addons-pick__name{ flex:1 1 auto; min-width:0; }
.addons-pick__qty{
  flex:0 0 3.6rem; width:3.6rem; padding:.25rem .35rem; text-align:center;
  font-family:var(--font-body); font-size:.78rem; color:var(--fg);
  background:transparent; border:1px solid var(--line); border-radius:0;
}
.addons-pick__qty:focus{ outline:none; border-color:var(--accent); }
.addons-pick__noun{ flex:0 0 auto; font-size:.66rem; color:var(--fg-soft); letter-spacing:.04em; }
.addons-pick__price{
  flex:0 0 auto; font-family:var(--font-display); font-weight:600; color:var(--accent);
  white-space:nowrap;
}
.addons-pick__rm{
  flex:0 0 auto; width:1.5rem; height:1.5rem; line-height:1; font-size:1.05rem;
  color:var(--fg-soft); border:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.addons-pick__rm:hover{ color:var(--accent); border-color:var(--line); }

.addons-pick__total{ border-top:2px solid var(--fg); padding-top:.9rem; display:grid; gap:.35rem; }
.addons-pick__total > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.addons-pick__label{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft);
}
.addons-pick__total strong{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem; line-height:1;
}
.addons-pick__fine{ font-size:.68rem; color:var(--fg-soft); margin:0; max-width:56ch; }
.addons-pick__total[hidden]{ display:none; }

/* Reassurance strip shared by services + booking */
.assure{ display:grid; gap:1rem; border-top:1px solid var(--line); padding-top:1.4rem; margin-top:1.6rem; }
.assure div{ display:grid; gap:.2rem; }
.assure dt{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:1rem; }
.assure dd{ margin:0; font-size:.82rem; color:var(--fg-soft); }

/* ── Breakpoints ──────────────────────────────────────────── */
@media (min-width:560px){
  .pmeta{ grid-template-columns:repeat(2,1fr); column-gap:2rem; }
  .pgal{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .pgal figure.span2{ grid-column:1 / -1; }
  .pkgs{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .svc-base__grid{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
  .field--row{ grid-template-columns:1fr 1fr; }
  .pnav{ grid-template-columns:1fr 1fr; }
  .assure{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:900px){
  .pmeta{ grid-template-columns:repeat(4,1fr); }
  .pgal{ grid-template-columns:repeat(2,1fr); gap:1.25rem; }
  .pkgs{ grid-template-columns:repeat(4,1fr); }
  .svc-base__grid{ grid-template-columns:repeat(3,1fr); }
  .bk__wrap{ grid-template-columns:1.05fr .95fr; align-items:start; }
  .proj__wrap, .svc__wrap{ }
}