/* Service stories and collections have their own surfaces, beyond the page paper. */
.service-story {
  position:relative;
  isolation:isolate;
  margin-top:clamp(1.75rem,4vw,4rem);
  border-block:1px solid #d2bca9;
  background:
    radial-gradient(ellipse at 0 0, #e5c8c65c, transparent 60%),
    linear-gradient(115deg, #f1e5d6, #fbf7f0 65%, #eee0d0);
}
.service-story .service-body > div:first-child {
  padding-left:clamp(1rem,2vw,1.8rem);
  border-left:2px solid #8b4751;
}
.service-story .service-body h2 { position:static; }
.service-story .service-body .eyebrow { color:#670d1b; }
.service-story > .offer-grid { padding-top:clamp(.5rem,1.5vw,1.5rem); }
.service-story > .offer-grid > .offer {
  background:#fffaf3;
  border-color:#cbb29d;
  box-shadow:0 2px 3px #39251a0c, 0 18px 30px -24px #39251a80;
}
.service-story--photography {
  background:
    radial-gradient(ellipse at 100% 0, #ead7c8, transparent 58%),
    linear-gradient(115deg, #f5ebe0, #fcf8f2);
}

/* The film still is atmospheric; an opaque ink layer keeps the story readable. */
.service-story--film {
  color:#fff7ed;
  border-color:#8e6c60;
  background-color:#261719;
  background-image:
    linear-gradient(100deg, #211113fa 0%, #3a111bf5 53%, #211113e8 100%),
    url('/assets/wedding-films/gabriella-veil.webp');
  background-size:cover;
  background-position:center, 65% 48%;
}
.service-story--film::before {
  content:"";
  position:absolute;
  inset:clamp(14px,2vw,24px);
  border:1px solid #cba78947;
  pointer-events:none;
}
.service-story--film .service-body > div:first-child { border-left-color:#cda181; }
.service-story--film .service-body h2,
.service-story--film .service-body .lead { color:#fff7ed; }
.service-story--film .service-body p { color:#ead5c3; }
.service-story--film .service-body .eyebrow { color:#e6bfa3; }
.service-story--film .service-body .text-link {
  color:#f3d2b4;
  border-color:#c49b7d;
}
.service-story--film .service-body .text-link:is(:hover,:focus-visible) { color:#fff7ed; }
.service-story--film > .offer-grid > .offer {
  color:#241b17;
  background:#fcf7ef;
  border-color:#dbc2a8;
  box-shadow:0 2px 4px #09030633, 0 20px 34px -22px #090306b3;
}
.service-story--film .offer h3 { color:#241b17; }
.service-story--film .offer p { color:#625047; }
.service-story--film .offer .eyebrow { color:#670d1b; }

/* Both collections are framed equally; neither package receives an invented rank. */
.coverage-collection {
  position:relative;
  margin-block:clamp(2rem,4.5vw,4.5rem);
  border-block:1px solid #c1a88f;
  background:
    radial-gradient(ellipse at 100% 0, #fff8edcc, transparent 65%),
    linear-gradient(115deg, #e6d3bd, #f0e2d0 58%, #e8d5bf);
  box-shadow:inset 0 1px #fff9ef, 0 18px 32px -30px #4e3024a6;
}
.coverage-collection > .eyebrow {
  color:#670d1b;
  margin:0 0 1rem;
  font-size:.76rem;
  letter-spacing:.13em;
}
.coverage-collection > h2 {
  padding-left:clamp(1rem,2vw,1.6rem);
  border-left:3px solid #670d1b;
  color:#2e211a;
}
.coverage-collection > p:not(.eyebrow) { color:#514036; }
.coverage-collection > .offer-grid { margin-top:clamp(1.75rem,3vw,3rem); }
.coverage-collection .offer {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:linear-gradient(145deg, #fffcf6, #fbf5eb);
  border:1px solid #bea38c;
  border-top:3px solid #670d1b;
  box-shadow:0 2px 4px #3b241512, 0 18px 30px -22px #4c2a2199;
}
.coverage-number {
  display:block;
  margin-bottom:clamp(.8rem,1.5vw,1.3rem);
  color:#7c3945;
  font:400 2.15rem/1 var(--tn-display,Georgia,serif);
  letter-spacing:-.045em;
}
.coverage-collection .offer h3 { color:#2e211a; }
.coverage-collection .offer p { color:#625047; }
.coverage-collection .offer .text-link {
  margin-top:auto;
  padding-top:1rem;
  color:#670d1b;
}
.coverage-collection .offer .text-link:is(:hover,:focus-visible) { color:#3d0711; }

@media (max-width:760px) {
  .service-story { margin-top:1.5rem; }
  .service-story--film::before { inset:10px; }
  .service-story .service-body { gap:1.75rem; }
  .service-story .service-body > div:first-child { padding-left:1rem; }
  .coverage-collection { margin-block:1.75rem; }
  .coverage-collection .offer { padding:1.3rem; }
}
@media print {
  .service-story--film { background:#fff; color:#191512; }
  .service-story--film::before { display:none; }
  .service-story--film .service-body :is(h2,p,.lead,.eyebrow,.text-link) { color:#191512; }
  .service-story,.coverage-collection,.coverage-collection .offer { box-shadow:none; }
}