/* Riverforge v4, version B: service pages.
   Loaded after the homepage stylesheet (../styles.css or ../../styles.css),
   which supplies the tokens, header, buttons, pricing rows, Gantt chart, FAQ list and contact section. */

/* Page hero */
.svc-hero { display: grid; gap: 44px; align-content: center; min-height: 90svh; padding: calc(var(--header) + 8vh) var(--gutter) 9vh; background: var(--paper); }
.svc-hero h1 { font-size: clamp(34px, 4.3vw, 78px); max-width: 14em; }
.svc-lede { max-width: 31em; margin-top: 24px; font-size: clamp(17px, 1.35vw, 21px); color: var(--muted); }
.svc-hero .actions { margin-top: 32px; }
.svc-facts { display: grid; margin-top: 30px; border-top: 1px solid var(--line); }
.svc-facts li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }

/* "What you get" panel on the shorter service pages */
.svc-panel { align-self: center; padding: clamp(24px, 3vw, 40px); background: var(--white); border-radius: 12px; box-shadow: 0 40px 80px -45px rgba(14, 17, 22, .45), 0 0 0 1px var(--line); }
.svc-panel h2 { font-stretch: 112%; font-size: 22px; font-weight: 660; letter-spacing: -.02em; line-height: 1.1; }
.svc-panel ul { margin-top: 14px; }
.svc-panel li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; }
.svc-panel li::before { content: ""; flex: 0 0 10px; height: 1.5px; margin-top: .72em; background: var(--copper); }
.svc-panel .svc-stat { display: block; font-stretch: 125%; font-weight: 760; font-size: clamp(64px, 7vw, 120px); line-height: .85; letter-spacing: -.04em; }
.svc-panel .svc-stat + p { margin-top: 14px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.svc-panel small { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); }
.svc-panel.is-dark { background: var(--ink); color: #f5f6f8; }
.svc-panel.is-dark small { color: var(--muted-dark); }

/* Detail collage in the website design hero */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: center; padding-bottom: 34px; }
.collage figure { margin: 0; }
.collage figure:nth-child(even) { transform: translateY(34px); }
.collage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 10px; background: var(--white); box-shadow: 0 30px 60px -36px rgba(14, 17, 22, .5), 0 0 0 1px var(--line); }
.collage .fit-contain img { object-fit: contain; object-position: center; background: #eeefe9; }
.collage figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Generic sections */
.svc-section { padding: 14vh var(--gutter); }
.svc-section.is-white { background: var(--white); }
.svc-section.is-paper { background: var(--paper); }
.svc-section > h2 { font-size: clamp(32px, 4vw, 68px); max-width: 13em; }
.section-lede { max-width: 32em; margin-top: 20px; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }

/* Signs you've outgrown your website */
.signs { display: grid; margin-top: 44px; border-bottom: 1px solid var(--line); }
.signs li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); font-stretch: 112%; font-weight: 620; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.18; letter-spacing: -.02em; }
.signs li::before { content: ""; flex: 0 0 14px; height: 2px; margin-top: .6em; background: var(--copper); }
.signs-note { margin-top: 28px; font-size: 17px; color: var(--muted); }

/* Hairline grid of items */
.item-grid { display: grid; gap: 0 36px; margin-top: 44px; }
.item-grid > div { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.item-grid h3 { font-size: 20px; }
.item-grid p { max-width: 30em; margin-top: 8px; font-size: 16px; color: var(--muted); }

/* How it works */
.how-rows { margin-top: 44px; border-bottom: 1px solid var(--line); }
.how-rows > div { display: grid; gap: 6px 40px; padding: 24px 0; border-top: 1px solid var(--line); }
.how-rows h3 { font-stretch: 125%; font-weight: 720; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.025em; }
.how-rows p { max-width: 36em; color: var(--muted); }

/* Website-first band */
.svc-first { display: grid; gap: 24px; padding: 14vh var(--gutter); background: var(--ink); color: #f5f6f8; }
.svc-first h2 { font-size: clamp(30px, 3.4vw, 58px); max-width: 12em; }
.svc-first p { max-width: 34em; font-size: clamp(17px, 1.35vw, 21px); color: var(--muted-dark); }
.svc-first a { justify-self: start; margin-top: 10px; font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--copper); padding-bottom: 3px; }

/* Testimonials */
.svc-quotes { display: grid; gap: 44px; padding: 14vh var(--gutter); background: var(--white); }
.svc-quotes.is-dark { background: var(--ink); color: #f5f6f8; }
.svc-quotes h2 { font-size: clamp(30px, 3.4vw, 58px); max-width: 10em; }
.svc-quotes figure { margin: 0; }
.svc-quotes blockquote p { font-size: clamp(20px, 1.8vw, 28px); font-weight: 450; line-height: 1.3; letter-spacing: -.012em; }
.svc-quotes figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--copper); font-size: 15px; }
.svc-quotes figcaption span { color: var(--muted); }
.svc-quotes.is-dark figcaption span { color: var(--muted-dark); }
.svc-quotes .stars { width: 96px; margin-bottom: 18px; }

/* Pricing extras */
.price-drivers { margin-top: 48px; }
.price-drivers h3 { font-size: 24px; }
.factors { display: grid; gap: 0 36px; margin-top: 18px; }
.factors li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.factors li::before { content: ""; flex: 0 0 10px; height: 1.5px; margin-top: .75em; background: var(--copper); }

/* Price line in "How it's priced", from tools/pricing_data.py */
.price-glance { display: grid; justify-items: start; gap: 8px; margin-top: 28px; }
.price-glance p { font-size: 16px; color: var(--muted); }
.price-glance p span { display: block; margin-bottom: 2px; font-weight: 650; font-size: 15px; color: var(--ink); }
.price-glance b { margin-right: 6px; font-stretch: 125%; font-weight: 720; font-size: clamp(28px, 2.6vw, 44px); letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.price-glance p + p { margin-top: 6px; }
.price-glance a { margin-top: 8px; font-weight: 650; font-size: 16px; text-decoration: none; border-bottom: 1.5px solid var(--copper); padding-bottom: 2px; }
.price-glance a:hover { color: var(--copper); }

/* FAQ */
.svc-faq { display: grid; gap: 40px; padding: 14vh var(--gutter); background: var(--white); }
.svc-faq h2 { font-size: clamp(30px, 3.6vw, 60px); max-width: 10em; }
.svc-faq .section-lede a { color: var(--ink); font-weight: 650; text-decoration-color: var(--copper); text-underline-offset: 3px; }

/* Related services, each with a small picture of the service */
.related { padding: 12vh var(--gutter); background: var(--paper); }
.related h2 { font-size: clamp(28px, 3vw, 50px); }
.related-grid { display: grid; gap: 14px; margin-top: 32px; }
.related-grid a { display: flex; flex-direction: column; gap: 6px; padding: 0 0 22px; overflow: hidden; background: var(--white); border-radius: 10px; text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.related-grid a:hover { box-shadow: 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.related-grid b { padding: 0 24px; font-stretch: 112%; font-weight: 660; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.related-grid span { padding: 0 24px; font-size: 15px; color: var(--muted); }
.related-grid i { margin-top: auto; padding: 12px 24px 0; font-style: normal; font-weight: 650; color: var(--copper); }
.related-grid .related-img { display: block; aspect-ratio: 16 / 9; margin-bottom: 14px; padding: 0; overflow: hidden; background: linear-gradient(180deg, #eceef1, #e3e6ea); }
.related-img img, .hub-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 8px 6px 0; transition: transform .35s; }
.related-img img.thumb-photo, .hub-thumb img.thumb-photo { object-fit: cover; object-position: top; padding: 0; }
.related-grid a:hover .related-img img, .hub-cards a:hover .hub-thumb img { transform: translateY(-4px); }

/* Service hero with a product visual on the right */
.svc-hero.has-visual { gap: 36px; }
.svc-visual { margin: 0; }
/* Mockups carry a transparent margin for their shadows (48px each side, 16px top, 84px bottom around
   a 720px canvas, see tools/render_mockups.py). Negative margins put the canvas back on the column edges. */
.svc-visual img, .show-visual img { width: 113.333%; max-width: none; margin: -2.222% -6.667% -11.667%; }
.svc-visual figcaption, .show-visual figcaption { margin-top: 4px; font-size: 13px; color: var(--muted); text-align: center; }

/* Platform logos under the hero */
.logo-band { display: grid; gap: 16px; padding: 30px var(--gutter); background: var(--white); border-bottom: 1px solid var(--line); }
.logo-band.is-paper { background: var(--paper); border-top: 1px solid var(--line); }
.logo-band p { max-width: 24em; font-size: 15px; color: var(--muted); }
.logo-band ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.logo-band li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; white-space: nowrap; }
.logo-band img { width: 26px; height: 26px; }
.logo-band img.is-wide { width: 58px; }

/* Icons in the "what we do" grid */
.item-grid.has-icons .ic { display: block; width: 28px; height: 28px; margin-bottom: 14px; color: var(--copper); stroke-width: 1.6; }

/* Showcase: one example of the work, with three notes */
.svc-show { display: grid; gap: 36px; padding: 14vh var(--gutter); background: var(--paper); }
.svc-show h2 { font-size: clamp(32px, 4vw, 66px); max-width: 11em; }
.show-notes { margin-top: 30px; border-bottom: 1px solid var(--line); }
.show-notes > div { padding: 16px 0; border-top: 1px solid var(--line); }
.show-notes h3 { font-size: 19px; }
.show-notes p { margin-top: 6px; font-size: 16px; color: var(--muted); }
.show-visual { margin: 0; }


/* Proof: real screenshots of clients in Google and ChatGPT */
.proof-head { display: grid; gap: 28px; }
.proof-head h2 { font-size: clamp(32px, 4vw, 66px); max-width: 11em; }
.proof-stat { padding: 26px 28px; border-radius: 12px; background: var(--ink); color: #f5f6f8; }
.proof-stat strong { display: block; font-stretch: 125%; font-weight: 760; font-size: clamp(56px, 6vw, 100px); line-height: .85; letter-spacing: -.04em; }
.proof-stat p { margin-top: 14px; font-size: 16px; line-height: 1.4; color: var(--muted-dark); }
.proof-grid { display: grid; gap: 36px 24px; margin-top: 48px; }
.proof-grid figure { margin: 0; }
.proof-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--white); box-shadow: 0 30px 60px -36px rgba(14, 17, 22, .45), 0 0 0 1px var(--line); }
.proof-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .4s; }
.proof-shot:hover img { transform: scale(1.03); }
.proof-grid figcaption { margin-top: 14px; font-size: 16px; font-weight: 620; line-height: 1.35; }
.proof-grid figcaption small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }

/* Social funnel */
.funnel { display: grid; gap: 16px; margin-top: 44px; }
.stage-col { position: relative; padding: 26px 26px 22px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.stage-col h3 { font-stretch: 125%; font-weight: 720; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.025em; }
.stage-col p { margin-top: 10px; color: var(--muted); }
.stage-col ul { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.stage-col li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 620; }
.stage-col img { width: 22px; height: 22px; }

/* Services overview */
.hub-hero { display: grid; align-content: end; min-height: 70svh; padding: calc(var(--header) + 10vh) var(--gutter) 8vh; background: var(--paper); }
.hub-hero h1 { font-size: clamp(36px, 5vw, 92px); max-width: 13em; }
.hub-feature { display: grid; gap: 40px; padding: 12vh var(--gutter); background: var(--white); }
.hub-feature h2 { font-size: clamp(34px, 4.4vw, 76px); max-width: 10em; }
.hub-feature .section-lede { margin-top: 18px; }
.hub-feature .actions { margin-top: 28px; }
.hub-feature figure { margin: 0; }
.hub-feature figure img { width: 100%; border-radius: 12px; box-shadow: 0 50px 90px -45px rgba(14, 17, 22, .5), 0 0 0 1px var(--line); }
.hub-feature figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.hub-also { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 2px 18px; margin-top: 36px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.hub-also-img { grid-row: 1 / span 2; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--paper); }
.hub-also-img img { width: 100%; height: 100%; object-fit: contain; padding: 2px 0 0; object-position: center bottom; }
.hub-also b { grid-column: 2; align-self: end; font-weight: 650; font-size: 18px; }
.hub-also > span:not(.hub-also-img) { grid-column: 2; align-self: start; font-size: 15px; color: var(--muted); }
.hub-also i { grid-row: 1 / span 2; grid-column: 3; font-style: normal; color: var(--copper); transition: transform .2s; }
.hub-also:hover i { transform: translateX(4px); }
.hub-groups { display: grid; gap: 10vh; padding: 12vh var(--gutter); background: var(--paper); }
.hub-group { display: grid; gap: 26px; }
.hub-group h2 { font-size: clamp(28px, 3vw, 48px); }
.hub-group-head p { margin-top: 10px; font-size: 16px; color: var(--muted); max-width: 22em; }
.hub-cards { display: grid; gap: 16px; }
.hub-cards a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; height: 100%; padding-bottom: 22px; overflow: hidden; border-radius: 12px; background: var(--white); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.hub-cards a:hover { box-shadow: 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.hub-thumb { grid-column: 1 / -1; display: block; aspect-ratio: 16 / 10; margin-bottom: 14px; overflow: hidden; background: linear-gradient(180deg, #eceef1, #e3e6ea); }
.hub-cards b { padding-left: 22px; font-stretch: 112%; font-weight: 660; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.hub-cards a > span:not(.hub-thumb) { grid-column: 1; padding-left: 22px; font-size: 15px; color: var(--muted); }
.hub-cards i { grid-row: 2 / span 2; grid-column: 2; align-self: center; padding-right: 22px; font-style: normal; color: var(--copper); transition: transform .2s; }
.hub-cards a:hover i { transform: translateX(4px); }
.hub-fit { padding: 14vh var(--gutter); background: var(--ink); color: #f5f6f8; }
.hub-fit h2 { font-size: clamp(30px, 3.6vw, 62px); max-width: 12em; }
.hub-steps { display: grid; gap: 0 40px; margin-top: 44px; }
.hub-steps > div { padding: 22px 0; border-top: 1px solid var(--line-dark); }
.hub-steps h3 { font-stretch: 125%; font-weight: 720; font-size: clamp(22px, 2vw, 32px); letter-spacing: -.025em; }
.hub-steps p { margin-top: 8px; color: var(--muted-dark); }

/* Section sizes reused from the homepage, scaled down for inner pages */
.svc-page .range-copy h2 { font-size: clamp(36px, 4.8vw, 84px); }
.svc-page .pricing-copy h2 { font-size: clamp(34px, 4.6vw, 80px); }
.stage-detail .we-need { color: var(--muted); }
.row-link { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--copper); padding-bottom: 2px; }

@media (min-width: 700px) {
  .svc-facts { grid-template-columns: repeat(3, 1fr); gap: 0 24px; border-top: 0; }
  .svc-facts li { border-top: 1px solid var(--line); border-bottom: 0; }
  .signs { grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .how-rows > div { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: baseline; }
  .factors { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .hub-steps { grid-template-columns: repeat(3, 1fr); }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .hub-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .funnel { grid-template-columns: repeat(3, 1fr); }
  .stage-col:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 30px; right: -16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; }
}
@media (min-width: 1000px) {
  .svc-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5vw; align-items: center; }
  .svc-hero.has-visual { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4vw; }
  .logo-band { grid-template-columns: minmax(0, .32fr) minmax(0, 1.68fr); align-items: center; gap: 3vw; }
  .logo-band ul { justify-content: flex-end; }
  .svc-show { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 5vw; align-items: center; }
  .proof-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: end; gap: 5vw; }
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
  .hub-group { grid-template-columns: minmax(0, .5fr) minmax(0, 2fr); gap: 4vw; align-items: start; }
  .item-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 5vw; align-items: end; }
  .svc-first h2 { grid-row: span 2; }
  .svc-quotes { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; align-items: start; }
  .svc-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6vw; align-items: start; }
  .svc-faq > div:first-child { position: sticky; top: calc(var(--header) + 6vh); }
  .hub-feature { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5vw; align-items: center; }
}

/* Desktop scroll scenes reused from the homepage */
.fx .svc-page .process-copy p { max-width: 46em; }
.fx .svc-page .gantt { top: 40vh; }
.fx .stage-details.has-need .stage-detail { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.fx .stage-details.has-need .stage-detail p { font-size: 16px; }

/* Case study teaser (built by case_band in tools/build_services.py), in the client's colours: B3 Designers' plum and orange */
.case-band { background: #1f1a21; color: #f3eee8; }
.case-band-photo { height: clamp(220px, 34vw, 62vh); margin: 0; overflow: hidden; }
.case-band-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.case-band-copy { padding: 10vh var(--gutter) 0; }
.case-band h2 { font-size: clamp(32px, 4.4vw, 78px); max-width: 12em; }
.case-band-lede { max-width: 32em; margin-top: 20px; font-size: clamp(17px, 1.35vw, 21px); color: #b9adb3; }
.case-band-link { display: inline-flex; gap: 10px; margin-top: 28px; padding-bottom: 3px; border-bottom: 1.5px solid #ea5532; font-weight: 650; text-decoration: none; }
.case-band-link i { font-style: normal; color: #ea5532; transition: transform .2s; }
.case-band-link:hover i { transform: translateX(4px); }
.case-band-stats { display: grid; gap: 22px; padding: 7vh var(--gutter) 0; }
.case-band-stats p { padding-top: 14px; border-top: 1px solid rgba(243, 238, 232, .14); }
.case-band-stats strong { display: block; font-stretch: 125%; font-weight: 740; font-size: clamp(46px, 5vw, 92px); line-height: .9; letter-spacing: -.04em; }
.case-band-stats span { display: block; margin-top: 10px; color: #b9adb3; }
.case-band-note { padding: 3vh var(--gutter) 11vh; font-size: 14px; color: #b9adb3; }
@media (min-width: 700px) {
  .case-band-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}