/* ==========================================================================
   Services area (builder B): /services/, /services/*, /packages/
   Figma: Services 15:1998, Package 61:12235
   ========================================================================== */

/* ---------- Services index hero (20:2660): isometric room spills below the band ---------- */
.page-hero--svc { overflow: visible; z-index: 1; padding-bottom: clamp(56px, 6vw, 72px); }
.page-hero--svc .page-hero__inner--split { align-items: start; }
@media (min-width: 901px) { .page-hero--svc .page-hero__inner--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.page-hero--svc .page-hero__text { padding-top: clamp(0px, 2vw, 24px); }
.page-hero--svc .page-hero__media { position: relative; z-index: 2; margin: -48px 0 -240px; }
.page-hero--svc .page-hero__media img { border-radius: 0; max-width: 560px; margin-left: auto; }
.page-hero--svc .page-hero__intro { font-weight: 300; line-height: 1.9; }
@media (max-width: 900px) {
  .page-hero--svc .page-hero__media { margin: 0 auto -40px; max-width: 420px; }
}

/* ---------- Service rows (20:2671 …) — refinements of .svc to match Figma ---------- */
.svc-rows .svc { padding-block: clamp(56px, 8.8vw, 112px); }
.svc-rows .svc:first-child { padding-top: clamp(64px, 9vw, 120px); }
.svc .svc__num { margin: 0 0 12px; }
.svc .h2 { font-size: clamp(30px, 3.45vw, 44px); line-height: 1.15; margin: 0 0 20px; }
.svc .h2 a:hover { color: var(--gold); }
.svc__copy > p.muted { margin: 0; max-width: 560px; }
.svc__label { font: 500 12px/16px var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin: 32px 0 0; }
.svc .svc__list { columns: 1; display: grid; gap: 8px; margin: 16px 0 32px; }
.svc .svc__list li { color: var(--ink); line-height: 20px; margin: 0; padding-left: 16px; }
.svc .svc__list li::before { top: 8px; width: 4px; height: 4px; border-radius: 50%; }
.svc__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.svc__links .link-arrow { color: var(--muted); }
.svc__links .link-arrow:hover { color: var(--ink); }
.svc__media > .media { display: block; }

/* more services grid on the index */
.svc-more .card__body { padding: 20px; }
.svc-more .card__title { font-size: 21px; }
.svc-card__go { margin-top: auto; align-self: flex-start; font-size: 13px; }
.svc-plan { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 560px) { .svc-more .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Detail page hero ---------- */
.page-hero--detail .page-hero__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.page-hero--pos-top .page-hero__media img { object-position: 50% 15%; }
.svc-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px !important; }

/* overview + facts */
.svc-overview { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.svc-overview__copy .h2 { max-width: 720px; }
.svc-prose { color: var(--muted); }
.svc-prose p { margin: 0 0 1.1em; }
.svc-prose p:last-child { margin-bottom: 0; }
.svc-prose a, .svc-after a, .svc-incl a, .faq__a a, .svc-note a, .svc-lead a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.svc-facts { position: sticky; top: calc(var(--hdr-h) + 24px); padding: 28px; }
.svc-facts__list { margin: 0 0 24px; display: grid; gap: 0; }
.svc-facts__list > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.svc-facts__list > div:first-child { padding-top: 0; }
.svc-facts__list dt { font: 500 11px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.svc-facts__list dd { margin: 0; font: 300 19px/1.4 var(--serif); font-variation-settings: "SOFT" 0, "WONK" 1; color: var(--ink); }
@media (max-width: 900px) { .svc-overview { grid-template-columns: minmax(0, 1fr); } .svc-facts { position: static; } }

/* section headings */
.svc-h2 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.2; max-width: 820px; }
.svc-lead { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }

/* what is included */
.svc-incl { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.svc-incl li { padding: 24px 0 26px; border-bottom: 1px solid var(--line); position: relative; }
.svc-incl h3 { font-size: 21px; margin: 0 0 6px; padding-left: 16px; position: relative; }
.svc-incl h3::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.svc-incl p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; padding-left: 16px; }
@media (max-width: 960px) { .svc-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-incl { grid-template-columns: minmax(0, 1fr); } }

/* tables */
.svc-table th[scope="row"] { font: 500 15px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); vertical-align: top; min-width: 150px; }
.svc-table th[scope="row"] small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.svc-table td { vertical-align: top; color: var(--muted); line-height: 1.55; }
.svc-table tbody tr:last-child > * { border-bottom: 0; }
.svc-table thead th { background: var(--cream); white-space: normal; vertical-align: bottom; }
.section--cream .svc-table, .section--cream .table-wrap { background: var(--bg); }
.svc-table--price td:nth-child(2) { font: 300 19px/1.35 var(--serif); font-variation-settings: "SOFT" 0, "WONK" 1; color: var(--ink); white-space: nowrap; }
.svc-after { margin: 18px 0 0; font-size: 15px; }
@media (max-width: 760px) {
  .svc-table--stack thead, .svc-table--price thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .svc-table--stack tr, .svc-table--price tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .svc-table--stack tbody tr:last-child, .svc-table--price tbody tr:last-child { border-bottom: 0; }
  .svc-table--stack th[scope="row"], .svc-table--stack td, .svc-table--price th[scope="row"], .svc-table--price td { display: block; border: 0; padding: 3px 0 !important; }
  .svc-table--stack td::before, .svc-table--price td::before { content: attr(data-label); display: block; font: 500 11px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-top: 8px; }
  .svc-table--price td:nth-child(2) { white-space: normal; }
}

/* cost block */
.svc-cost { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.svc-cost__head .btn { margin-top: 8px; }
.svc-note { background: var(--cream); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: var(--radius); padding: 16px 20px; font-size: 14px; color: var(--muted); margin: 8px 0 24px; }
.svc-note strong { color: var(--ink); font-weight: 500; }
@media (max-width: 960px) { .svc-cost { grid-template-columns: minmax(0, 1fr); } }

/* timeline */
.svc-tl { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; counter-reset: tl; }
.svc-tl li { position: relative; padding-top: 22px; border-top: 2px solid var(--line); }
.svc-tl li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.svc-tl__when { display: block; font: 500 12px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.svc-tl h3 { font-size: 20px; margin: 0 0 6px; }
.svc-tl p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }
.svc-tl--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .svc-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; } }
@media (max-width: 700px) {
  .svc-tl { grid-template-columns: minmax(0, 1fr); gap: 0; border-left: 2px solid var(--line); margin-left: 5px; }
  .svc-tl li { border-top: 0; padding: 0 0 26px 22px; }
  .svc-tl li::before { top: 4px; left: -6px; }
}

/* local */
.svc-local { align-items: start; }

/* related + reading */
.svc-reading__h { margin: clamp(40px, 5vw, 56px) 0 16px; }
.svc-reading { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.svc-reading a { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); height: 100%; }
.svc-reading strong { font-weight: 500; font-size: 15px; color: var(--ink); }
.svc-reading strong::after { content: " →"; color: var(--gold); }
.svc-reading span { font-size: 14px; color: var(--muted); }
.svc-reading a:hover strong { color: var(--gold-ink); }
@media (max-width: 860px) { .svc-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-reading { grid-template-columns: minmax(0, 1fr); } }

/* enquiry */
.svc-enquire { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.svc-contact { list-style: none; display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.svc-contact li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.svc-contact span { font: 500 11px/22px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc-contact a { color: var(--ink); text-align: right; word-break: break-word; }
.svc-contact a:hover { color: var(--gold-ink); }
.svc-enquire .form .h3 { margin-bottom: 4px; }
@media (max-width: 900px) { .svc-enquire { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Packages (Figma 61:12235)
   ========================================================================== */
.page-hero--pkg { overflow-x: clip; overflow-y: visible; z-index: 1; }
@media (min-width: 901px) { .page-hero--pkg .page-hero__inner--split { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); } }
.page-hero--pkg .page-hero__intro { font-weight: 300; line-height: 1.9; max-width: 623px; }
.page-hero--pkg .page-hero__aside { position: relative; z-index: 2; margin: -64px 0 -180px -4vw; }
.page-hero--pkg .page-hero__aside img { width: min(980px, 77vw); max-width: none; }
@media (max-width: 900px) {
  .page-hero--pkg .page-hero__aside { margin: 0 calc(-1 * var(--pad)) -40px 0; }
  .page-hero--pkg .page-hero__aside img { width: 125%; }
}

.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pkg { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: clamp(28px, 2.9vw, 37px); }
.pkg__name { font: 500 12px/16px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0; }
.pkg__price { font: 300 30px/36px var(--serif); font-variation-settings: "SOFT" 0, "WONK" 1; color: var(--ink); margin: 8px 0 0; }
.pkg__price small { font: 400 12px/16px var(--sans); color: var(--muted); letter-spacing: .02em; margin-left: 6px; vertical-align: middle; }
.pkg__unit { font-size: 12px; line-height: 16px; color: var(--muted); margin: 4px 0 0; }
.pkg__rule { height: 1px; background: var(--line); margin: 24px 0; border: 0; }
.pkg__text { font-size: 14px; line-height: 22.75px; color: var(--muted); margin: 0; }
.pkg__list { list-style: none; display: grid; gap: 12px; padding: 32px 0 40px; margin: 0; }
.pkg__list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 20px; color: var(--ink); }
.pkg__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; background: url('/assets/img/services/icon-check.svg') center / 14px 14px no-repeat; }
.pkg .btn { margin-top: auto; width: 100%; white-space: normal; text-align: center; padding-inline: 16px; }
.pkg .btn--outline { color: var(--gold); }
.pkg .btn--outline:hover { color: #fff; }
.pkg--feature { background: #1a1a1a; border-color: #1a1a1a; }
.pkg--feature .pkg__name { color: var(--gold); }
.pkg--feature .pkg__price { color: #fff; }
.pkg--feature .pkg__price small, .pkg--feature .pkg__unit { color: rgba(255,255,255,.55); }
.pkg--feature .pkg__rule { background: rgba(255,255,255,.15); }
.pkg--feature .pkg__text { color: rgba(255,255,255,.75); }
.pkg--feature .pkg__list li { color: rgba(255,255,255,.85); }
:root[data-theme="dark"] .pkg--feature { background: #26241f; border-color: var(--gold); }
@media (max-width: 960px) { .pkgs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }

.pkg-band { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 49px 48px; }
.pkg-band p { max-width: 512px; margin: 0 auto; text-align: center; font-size: 14px; line-height: 22.75px; color: var(--muted); }

.pkg-compare .table td.tick, .pkg-compare .table td.dash { text-align: center; font-size: 16px; }
.pkg-compare .table td.tick { color: var(--gold-ink); }
.pkg-compare .table td.dash { color: var(--line); }
.pkg-compare .table th.c { text-align: center; }
.pkg-compare .table { min-width: 620px; }
.pkg-compare .table-wrap { position: relative; } /* contains the .sr-only labels inside the scroller */
.pkg-fit { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pkg-fit li { border-top: 2px solid var(--gold); padding-top: 18px; }
.pkg-fit h3 { font-size: 21px; margin: 0 0 8px; }
.pkg-fit p { color: var(--muted); font-size: 15px; margin: 0 0 10px; }
@media (max-width: 860px) { .pkg-fit { grid-template-columns: minmax(0, 1fr); } }
.pkg-compare .table tbody th { font: 400 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* breadcrumb sits above the cream hero (the hero's negative margin otherwise paints over it) */
.crumbs { position: relative; z-index: 2; }
.svc-facts .btn, .svc-cost__head .btn, .svc-hero__cta .btn { white-space: normal; text-align: center; }