/* ================================================================
   Service cards — framed photo cards (October 25, 2026, revision 2)
   A bordered paper card with an inset photo on top and the copy
   below it. Calmer than full-bleed overlays: text never sits on a
   busy photo, and every card shares the same frame and rhythm.
   ================================================================ */

.services{--card-pad:12px;--photo-h:210px}

/* Grid */
.service-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.service-choice{min-width:0;position:relative}

/* The card: paper, fine border, inner margin around the photo */
.service-choice-link{
  display:flex;flex-direction:column;height:100%;
  padding:var(--card-pad);
  color:var(--ink);
  text-decoration:none;
  background:var(--paper);
  border:1px solid #c8d5d7;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,38,46,.05);
  transition:transform 160ms var(--ease-out),box-shadow 160ms ease,border-color 160ms ease
}

/* Inset photo with its own rounded frame */
.service-choice-art{
  position:relative;
  height:var(--photo-h);
  border-radius:10px;
  overflow:hidden;
  background:#dce8e8
}
.service-choice-art img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform 500ms var(--ease-out)
}
.service-art-social img{object-position:center 30%}

/* Copy below the photo */
.service-choice-copy{
  display:flex;flex:1;flex-direction:column;
  padding:22px 14px 12px
}
.service-choice h3{
  font-family:var(--serif);
  font-size:1.45rem;font-weight:400;
  letter-spacing:-.02em;line-height:1.2;
  margin:0 0 14px;
  overflow-wrap:anywhere
}
.service-choice ul{margin:0 0 22px;padding-left:18px;font-size:.92rem;color:var(--muted)}
.service-choice li+li{margin-top:6px}
.service-choice li::marker{color:var(--blue)}
.service-choice-more{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.9rem;font-weight:500;color:var(--ink)
}

/* Photographer credit: lower-right corner of the photo, outside the card link */
.photo-credit{
  position:absolute;
  z-index:2;
  top:calc(var(--card-pad) + var(--photo-h) - 30px);
  right:calc(var(--card-pad) + 8px);
  display:inline-flex;align-items:center;
  min-height:24px;padding:3px 7px;
  font-size:.7rem;line-height:1.2;
  color:#fff;
  background:rgba(16,38,46,.58);
  border-radius:4px;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(255,255,255,.45)
}
.photo-credit:hover{background:rgba(16,38,46,.8)}
.photo-credit:focus-visible{outline:3px solid #bd753e;outline-offset:2px}

.service-choice-link:focus-visible{outline:3px solid #bd753e;outline-offset:4px}

@media(hover:hover) and (pointer:fine){
  .service-choice-link:hover{transform:translateY(-3px);border-color:#9fb6ba;box-shadow:0 12px 28px rgba(16,38,46,.12)}
  .service-choice-link:hover .service-choice-art img{transform:scale(1.04)}
  .service-choice-link:hover .service-choice-more{color:var(--blue)}
}

/* Note below the grid */
.service-choice-note{max-width:75ch;margin:32px 0 0;color:var(--muted);font-size:.95rem}

/* ================================================================
   Service detail pages (unchanged from original)
   ================================================================ */
.service-detail-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center;padding-block:64px 88px}
.service-back{display:inline-block;min-height:44px;margin-bottom:22px;font-size:.9rem}
.service-detail h1{font-size:clamp(2.75rem,4.5vw,4.4rem);letter-spacing:-.03em;overflow-wrap:anywhere}
.service-detail-lead{font-size:1.18rem;max-width:48ch;margin-bottom:30px;color:var(--muted)}
.service-detail-art{border-radius:12px;padding:28px;background:#dce8e8}
.service-detail-art img{display:block;width:100%;height:auto}
.service-detail-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:100px;padding-block:64px 88px;border-top:1px solid var(--line)}
.service-detail h2{font-size:clamp(2.3rem,3.4vw,3.3rem);letter-spacing:-.03em;overflow-wrap:anywhere}
.service-detail-body>*,.service-detail-faq>*,.service-detail-next>.wrap>*{min-width:0}
.service-detail-example{font-size:1.05rem;color:var(--muted);max-width:65ch;margin-bottom:40px}
.service-detail-list>div{border-top:1px solid var(--line);padding:25px 0}
.service-detail-list h3{font-size:1.15rem;letter-spacing:0;margin-bottom:10px}
.service-detail-list p{max-width:65ch;color:var(--muted);margin:0}
.service-detail-start ul{padding-left:20px;margin:0 0 44px;color:var(--muted)}
.service-detail-start li+li{margin-top:16px}
.service-detail-start h3{font-size:1.15rem;letter-spacing:0;margin-bottom:14px}
.service-detail-start p{color:var(--muted)}
.service-detail-faq{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;padding-block:64px 88px;border-top:1px solid var(--line)}
.service-detail-faq details{border-bottom:1px solid var(--line);padding:20px 0}
.service-detail-faq details:first-child{padding-top:0}
.service-detail-faq summary{cursor:pointer;font-weight:500;min-height:44px;align-content:center}
.service-detail-faq details p{margin:18px 0 0;color:var(--muted);max-width:65ch}
.service-detail-sources{font-size:.85rem;color:var(--muted);margin-top:28px}
.service-detail-next{background:var(--ink);color:var(--paper);padding-block:64px}
.service-detail-next>.wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;align-items:start}
.service-detail-next h2{margin:0}.service-detail-next h2 em{color:#b6d0d7}
.service-detail-next p{max-width:50ch}
.service-detail-next .button{background:var(--paper);color:var(--ink)}
.service-detail .button:focus-visible{transition:none;transform:none}
.service-detail-email{font-size:.9rem;margin:22px 0 0;overflow-wrap:anywhere}

/* Tablet */
@media(min-width:761px) and (max-width:1100px){
  .service-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-detail-hero{gap:36px}
  .service-detail-body{gap:48px}
  .service-detail-faq,.service-detail-next>.wrap{gap:40px}
}

/* Mobile */
@media(max-width:760px){
  .service-choice-grid{grid-template-columns:1fr;gap:20px}
  .services{--photo-h:200px}
  .service-choice-grid{gap:22px}
  .service-choice h3{font-size:1.4rem}
  .service-detail-hero{grid-template-columns:1fr;gap:36px;padding-block:36px 56px}
  .service-detail h1{font-size:clamp(2.6rem,10vw,3.4rem)}
  .service-detail-art{padding:16px}
  .service-detail-body,.service-detail-faq,.service-detail-next>.wrap{grid-template-columns:1fr;gap:40px}
  .service-detail-body,.service-detail-faq{padding-block:48px 56px}
  .service-detail-start{border-top:1px solid var(--line);padding-top:40px}
  .service-detail-next{padding-block:48px}
  .service-back{margin-bottom:14px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .service-choice-link,.service-choice-art img,.service-detail .button{transition:none}
  .service-choice-link:hover,.service-choice-link:hover .service-choice-art img,.service-detail .button:hover,.service-detail .button:active{transform:none;box-shadow:none}
}

/* Service detail pages, Oct 26: photo hero, prices, why-us */
.service-detail-photo{position:relative;min-width:0}
.service-detail-photo .service-detail-art{padding:0;aspect-ratio:4/5;max-height:560px;width:100%;overflow:hidden;border-radius:14px;background:#dce8e8}
.service-detail-photo .service-detail-art img{width:100%;height:100%;object-fit:cover}
.service-detail-photo.service-art-social img{object-position:center 30%}
.service-detail-photo .photo-credit{top:auto;right:10px;bottom:10px}
.service-detail-pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:80px;padding-block:64px 72px;border-top:1px solid var(--line)}
.service-detail-pricing>*{min-width:0}
.service-detail-pricing>div:first-child p{color:var(--muted);max-width:38ch}
.service-prices{display:grid;gap:12px}
.service-price{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 22px;background:var(--paper);border:1px solid #c8d5d7;border-radius:12px}
.service-price h3{font-size:1.1rem;letter-spacing:0;margin:0 0 6px}
.service-price p{margin:0;color:var(--muted);font-size:.93rem;max-width:46ch}
.service-price .service-price-amount{text-align:right;white-space:nowrap;color:var(--ink)}
.service-price-amount strong{display:block;font:400 1.9rem/1.05 var(--serif);letter-spacing:-.02em}
.service-price-amount span{font-size:.85rem;color:var(--muted)}
.service-fine-print{margin:18px 0 0;padding-left:18px;font-size:.85rem;color:var(--muted)}
.service-fine-print li+li{margin-top:6px}
.service-detail-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:80px;padding-block:64px 72px;border-top:1px solid var(--line)}
.service-detail-why>*{min-width:0}
.service-detail-why ul{list-style:none;margin:0;padding:0}
.service-detail-why li{border-top:1px solid var(--line);padding:18px 0 18px 30px;position:relative;color:var(--ink)}
.service-detail-why li:first-child{border-top:0;padding-top:4px}
.service-detail-why li:before{content:'';position:absolute;left:4px;top:28px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.service-detail-why li:first-child:before{top:14px}
@media(max-width:1100px){.service-detail-pricing,.service-detail-why{gap:40px}}
@media(max-width:760px){.service-detail-pricing,.service-detail-why{grid-template-columns:1fr;gap:28px;padding-block:48px 56px}.service-price{flex-direction:column;gap:10px}.service-price .service-price-amount{text-align:left}.service-detail-photo .service-detail-art{max-height:440px}}