/* single-service.css — page-scoped styles for single-service.html only.
   Additive: every selector is svc- prefixed or scoped under a svc- wrapper;
   styles.css and pages.css are untouched. Palette vars come from styles.css. */

/* ---------- hero: split editorial collage ---------- */
.svc-hero{padding:88px 0 110px;overflow:hidden}
.svc-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}
.svc-hero-copy .lead{max-width:46ch}
.svc-hero-media{position:relative;padding:0 34px 46px 0}
.svc-photo{position:relative;z-index:1}
.svc-photo img,
.svc-photo video {display:block;width:100%;height:min(62vh,560px);object-fit:cover;box-shadow:0 34px 70px rgba(43,38,32,.2)}
.svc-photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--gold-pale);z-index:-1}
.svc-pol{position:absolute;left:-26px;bottom:-6px;z-index:3;width:188px;background:#fff;padding:9px 9px 34px;border:1px solid var(--line);box-shadow:0 24px 48px rgba(43,38,32,.24);transform:rotate(-5deg)}
.svc-pol img,
.svc-pol video {display:block;width:100%;height:126px;object-fit:cover}
.svc-pol figcaption{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:.56rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#A79A87}
.svc-ring{position:absolute;top:-38px;right:-8px;z-index:3;width:150px;height:150px}
.svc-ring svg{display:block;width:100%;height:100%;overflow:visible}
.svc-ring text{font-family:"DM Sans",sans-serif;font-size:9.2px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;fill:var(--gold-deep)}
.svc-ring .svc-ring-turn{transform-origin:50% 50%;animation:svcspin 22s linear infinite}
.svc-ring .svc-ring-core{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:30px;letter-spacing:0;text-transform:none;fill:var(--gold)}
@keyframes svcspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:no-preference){
  .svc-hero-copy>*{animation:svcup .9s cubic-bezier(.2,.6,.2,1) both}
  .svc-hero-copy>*:nth-child(2){animation-delay:.08s}
  .svc-hero-copy>*:nth-child(3){animation-delay:.16s}
  .svc-hero-copy>*:nth-child(4){animation-delay:.24s}
  .svc-hero-copy>*:nth-child(5){animation-delay:.32s}
  .svc-photo{animation:svcup 1s cubic-bezier(.2,.6,.2,1) both .15s}
  .svc-pol{animation:svcfade 1s ease both .55s}
  .svc-ring{animation:svcfade 1s ease both .7s}
}
@keyframes svcup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes svcfade{from{opacity:0}to{opacity:1}}
@media(max-width:880px){
  .svc-hero{padding:60px 0 84px}
  .svc-hero-grid{grid-template-columns:1fr;gap:64px}
  .svc-hero-media{padding:0 22px 40px 12px}
  .svc-photo img,
  .svc-photo video {height:54vh}
  .svc-pol{left:-4px}
  .svc-ring{top:-30px;right:6px;width:120px;height:120px}
}

/* ---------- the dark screening-room treatment (the making of a spin) ---------- */
.svc-dark{background:var(--ink);color:var(--paper);position:relative}
.svc-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 460px at 50% -10%,rgba(165,130,78,.18),transparent 65%);pointer-events:none}
.svc-dark .wrap{position:relative}
.svc-dark .sec-eyebrow{color:var(--gold-pale)}
.svc-dark h2 em{color:var(--gold-pale)}
.svc-dark .sec-lead{color:rgba(250,246,239,.72)}
.svc-dark .statband b{color:var(--gold-pale)}
.svc-dark .statband span{color:rgba(250,246,239,.62)}
.svc-dark .hiw-media{border-color:var(--line-dark)}
.svc-dark .hiw-media::after{content:"";position:absolute;inset:14px;border:1px solid rgba(216,195,154,.4);pointer-events:none;z-index:2}
.svc-dark .hiw-step{border-color:var(--line-dark);color:var(--paper)}
.svc-dark .hiw-step:last-of-type{border-bottom-color:var(--line-dark)}
.svc-dark .hiw-step p{color:rgba(250,246,239,.66)}
.svc-dark .hiw-step .bar{background:var(--line-dark)}
.svc-dark .hiw-step .t{color:var(--paper)}

/* ---------- what's included: numbered ledger + tall media ---------- */
.svc-inc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;margin-top:54px;align-items:start}
.svc-ledger{list-style:none;margin:0;padding:0;counter-reset:svc}
.svc-ledger li{counter-increment:svc;display:grid;grid-template-columns:74px 1fr;gap:0 18px;border-top:1px solid var(--line);padding:22px 4px}
.svc-ledger li:last-of-type{border-bottom:1px solid var(--line)}
.svc-ledger li::before{content:"No. 0" counter(svc);grid-row:1/3;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:1.3rem;color:var(--gold);line-height:1.4}
.svc-ledger b{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.3rem;letter-spacing:.03em}
.svc-ledger span{color:var(--ink-soft);font-size:.95rem;max-width:52ch}
.svc-inc-media{position:relative;padding:0 18px 18px 0;align-self:stretch;display:flex;flex-direction:column}
.svc-inc-media .svc-photo{flex:1;display:flex}
.svc-inc-media .svc-photo img,
.svc-inc-media .svc-photo video {height:100%;min-height:420px;flex:1}
.svc-inc-media figcaption{margin-top:16px;font-size:.8rem;color:var(--ink-soft);letter-spacing:.04em}
.svc-inc-media figcaption b{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.1rem;color:var(--ink);display:block;letter-spacing:.05em}
@media(max-width:880px){
  .svc-inc-grid{grid-template-columns:1fr;gap:48px}
  .svc-inc-media .svc-photo img,
  .svc-inc-media .svc-photo video {min-height:0;height:320px}
  .svc-ledger li{grid-template-columns:64px 1fr}
}

/* ---------- occasions: alternating editorial rows ---------- */
.svc-occ{display:flex;flex-direction:column;gap:64px;margin-top:64px}
.svc-occ-row{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.svc-occ-row:nth-child(even) .svc-occ-media{order:2}
.svc-occ-media{position:relative;padding:0 16px 16px 0}
.svc-occ-row:nth-child(even) .svc-occ-media{padding:0 0 16px 16px}
.svc-occ-media img,
.svc-occ-media video {display:block;width:100%;height:330px;object-fit:cover;box-shadow:0 26px 54px rgba(43,38,32,.14)}
.svc-occ-media::after{content:"";position:absolute;inset:14px 2px -14px 16px;border:1px solid var(--gold-pale);z-index:-1}
.svc-occ-row:nth-child(even) .svc-occ-media::after{inset:14px 16px -14px 2px}
.svc-occ-copy .num{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:2.6rem;color:transparent;-webkit-text-stroke:1px var(--gold);line-height:1}
.svc-occ-copy h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.9rem;letter-spacing:.04em;margin:14px 0 12px;text-transform:uppercase}
.svc-occ-copy p{color:var(--ink-soft);max-width:52ch}
.svc-occ-copy .btn-ghost{margin-top:24px}
@media(max-width:880px){
  .svc-occ{gap:72px}
  .svc-occ-row{grid-template-columns:1fr;gap:34px}
  .svc-occ-row:nth-child(even) .svc-occ-media{order:0}
  .svc-occ-media img,
  .svc-occ-media video {height:250px}
}

/* ---------- faq: sticky side heading ---------- */
.svc-faq-grid{display:grid;grid-template-columns:.9fr 1.6fr;gap:64px;align-items:start}
.svc-faq-head{position:sticky;top:118px}
.svc-faq-head .sec-lead{margin-top:6px}
.svc-faq-grid .faq{margin:0;max-width:none}
.svc-faq-grid .faq details:first-of-type{border-top:none}
.svc-faq-grid .faq details p{animation:svcfade .4s ease}
@media(max-width:880px){
  .svc-faq-grid{grid-template-columns:1fr;gap:36px}
  .svc-faq-head{position:static}
  .svc-faq-grid .faq details:first-of-type{border-top:1px solid var(--line)}
}

@media(prefers-reduced-motion:reduce){
  .svc-ring .svc-ring-turn{animation:none}
  .svc-hero-copy>*,.svc-photo,.svc-pol,.svc-ring{animation:none}
  .svc-faq-grid .faq details p{animation:none}
}

/* ---------- what it carries: split panel (2026-08-10) ----------
   Replaces the ledger + framed photo. Full bleed photograph on the left with a
   corner label, the inclusions on the right as hairline ruled rows, and a
   footer row pairing the price with the CTA. Type and palette are the kit's
   own: Cormorant for the rows, DM Sans for the lead, --paper-2 for the panel,
   --line for the rules. single-service.css is linked only by this page, so the
   svc- prefix cannot collide with services.css. */
.svc-carries{padding:0;background:var(--paper-2)}
.svc-carries-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:stretch}
/* The photograph fills its column but must never DRIVE the panel's height. It
   is a portrait frame, and height:100% against a grid row of indefinite height
   falls back to auto, so the image's own 2:3 aspect was setting the row: at
   1920px that made the panel 1239px tall for 784px of copy. Taking the image
   out of flow leaves the copy as the only thing that sizes the row, and the
   floor below keeps the photo from going letterbox-thin if the copy is short. */
.svc-carries-photo{position:relative;margin:0;min-height:520px;overflow:hidden}
.svc-carries-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;display:block}
.svc-carries-photo figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);
  font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;padding:14px 26px}
.svc-carries-body{padding:clamp(46px,5vw,78px) clamp(24px,4.4vw,72px)}
.svc-carries-body .sec-eyebrow{margin-bottom:16px}
.svc-carries-body h2{font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:1.14;margin-bottom:18px}
.svc-carries-body .sec-lead{max-width:52ch;margin-bottom:30px}
.svc-carries-list{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.svc-carries-list li{position:relative;border-bottom:1px solid var(--line);padding:13px 0 13px 28px;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.06rem;
  letter-spacing:.055em;text-transform:uppercase;color:var(--ink)}
.svc-carries-list li::before{content:"";position:absolute;left:6px;top:calc(50% - 2px);width:4px;height:4px;
  border-radius:50%;background:var(--gold)}
.svc-carries-foot{display:flex;align-items:baseline;justify-content:space-between;gap:22px;flex-wrap:wrap}
.svc-carries-price{display:flex;align-items:baseline;gap:14px;margin:0}
.svc-carries-price .k{font-size:.62rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.svc-carries-price b{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:500;
  font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:.02em;line-height:1}
.svc-carries-cta{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--gold-pale);padding-bottom:6px;transition:color .25s,border-color .25s}
.svc-carries-cta:hover{color:var(--gold-deep);border-color:var(--gold)}
.svc-carries-tail{max-width:1120px;margin:0 auto;padding:38px 28px 0}
@media(max-width:900px){
  .svc-carries-grid{grid-template-columns:1fr}
  /* stacked: the figure itself carries the height, since the image is absolute.
     The crop band is short and wide here rather than tall and narrow, and the
     guests sit low in this frame, so the desktop 32% cut their heads off. */
  .svc-carries-photo{min-height:0;height:46vh}
  .svc-carries-photo img{object-position:50% 68%}
  .svc-carries-body{padding:44px 24px 52px}
  .svc-carries-foot{gap:16px}
}