/* ============================================================
   service.css — the eight /services/<slug>/ pages and /pricing.
   Load order: global.css → components.css → skeleton.css → this.
   Shares .faq-item / .faq-q / .faq-a from faq.css? No: those rules
   live in faq.css, which these pages do not load, so the accordion
   styles are restated here. Keep the two in visual sync.
   ============================================================ */

/* ============================================================
   SERVICE PAGE — hero
   ============================================================ */
.sp-hero { padding-top: calc(var(--nav-h) + 72px); }
.sp-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 26px;
}
.sp-crumb a { color: var(--text2); transition: color .2s ease; }
.sp-crumb a:hover { color: var(--text); }
.sp-crumb span[aria-hidden] { color: var(--text3); opacity: .5; }

.sp-line {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.45;
  margin: 0 0 18px;
  max-width: 720px;
}
.sp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* Partner page reads as a different surface from the media services. */
.sp-hero--partner { background: var(--bg2); }

/* ============================================================
   WHAT'S INCLUDED
   ============================================================ */
/* ============================================================
   SINGLE FLOW — the service page body.

   Replaces .sp-includes (a bordered two-column grid), .sp-price (its
   own block under a second eyebrow) and .sp-terms (a paragraph of run-on
   fine print). Those were three visually separate objects for one
   thought: what this is, what it costs, what you get.

   The measured problem: the h1 sat 859px above the price with a section
   boundary and a background change between them, and the page carried
   four headings and five buttons.
   ============================================================ */
.sp-flow { padding-top: calc(var(--nav-h) + 56px); }

/* Lead block, two rows:
       <name> <price>
       <scope>
   The price still sits on the name's baseline, so it is read WITH the
   thing it prices and never alone. The scope always takes its own row.

   This replaced a single wrapping row of name / price / scope joined by
   middot separators. Two problems with that, both visible at 430px on
   /services/headshots/: the separators are flex items, so when the row
   wrapped a dot could be left orphaned at the end of a line or pushed
   to the start of the next one (measured: "Headshots · $75 ·" with the
   trailing dot stranded above "per person + $125 setup"), and where the
   row broke changed with every viewport width and every service name
   length. Forcing the break rather than letting it happen means there
   is exactly one layout at every width.

   The separators are gone from the markup entirely. Do not reintroduce
   them: a space and a size change already separate the name from the
   price, and the scope is on its own line. */
.sp-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Column gap is the ONLY thing between the name and the price now,
     so it is wider than the old 14px, which was sized to sit either
     side of a dot. */
  gap: 6px 18px;
  margin: 18px 0 0;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.sp-lead-name {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 800;
  color: var(--text);
}
/* The strongest emphasis on the page, by ruling. Sized above the service
   name rather than below it, which is the inverse of the old layout
   where the name was an h1 and the figure lived two sections down. */
.sp-lead-fig {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Always its own row, at every width. flex-basis:100% is what forces
   the break; without it this wraps only when it happens not to fit, so
   the layout changed with the viewport and with how long the service
   name is. Pages with no scope simply have no second row. */
.sp-lead-scope {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text2);
}
/* .sp-lead-sep is gone. It was a middot flex item between name/price
   and price/scope, and being a flex item is exactly why it orphaned at
   line ends when the lead wrapped. See the .sp-lead comment above. */
.sp-sub {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text2);
  max-width: 62ch;
}

/* The three rows. A bold label in a fixed column, then short phrases
   separated by commas. No borders, no cells, no bullets: at four items a
   bordered grid is heavier than the content inside it.
   The separator was a <span class="sp-dot"> middot until the Sept 2026
   mobile pass; it is a plain comma in the markup now, on every width.
   Do not reintroduce the dots. */
/* Block + absolute label, NOT grid. As a grid every child became a grid
   item, so each phrase landed in its own cell and the row rendered as a
   vertical list with the separators stranded in the label column. The
   value has to stay ordinary inline text.
   Note: at 640px and under the label goes static and the row's
   padding-left drops to 0 (see the media query below), so the label sits
   ABOVE its value with 10px of clearance. Measured at 430x932: +10px on
   all 12 rows across /services/packages/ and the service pages. These
   rows have never overlapped at phone widths. */
.sp-row {
  display: block;
  position: relative;
  padding-left: 134px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text2);
  max-width: 78ch;
}
.sp-row-l {
  position: absolute;
  left: 0;
  top: 16px;
  width: 116px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text3);
  line-height: 1.5;
}
/* .sp-dot is gone. The Includes / Details values used to be one run-on
   paragraph with middot separators at opacity .5, so five separate facts
   were divided only by a faint grey speck; the worst case on
   /services/packages/ was a 257-character paragraph carrying four of
   them. They are plain commas now, in the markup rather than in CSS, so
   the separator is real text on every surface. */

/* One button, directly underneath. */
.sp-book { margin-top: 30px; }

@media (max-width: 640px) {
  .sp-row { padding-left: 0; }
  .sp-row-l { position: static; display: block; width: auto; margin-bottom: 6px; }
  .sp-book .btn { width: 100%; }
}

.sp-row a,
.sp-faq-more a {
  color: var(--text);
  border-bottom: 1px solid var(--border-md);
  transition: border-color .2s ease;
}
.sp-row a:hover,
.sp-faq-more a:hover { border-color: var(--border-hi); }
.sp-faq-more {
  margin-top: 28px;
  font-size: 15px;
  color: var(--text2);
}

/* ============================================================
   FAQ ACCORDION — restated from faq.css, which these pages do not
   load. Anchors get scroll-margin for the fixed nav.
   ============================================================ */
.faq-list {
  border-top: 1px solid var(--border);
  margin-top: 36px;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.faq-item > summary { list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-q {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text2);
  min-height: 44px;
  transition: color .2s ease;
}
.faq-q:hover { color: var(--text); }
.faq-q:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.faq-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text3);
  transition: transform .2s ease, color .2s ease;
}
.faq-item[open] > .faq-q { color: var(--text); }
.faq-item[open] > .faq-q .faq-chev { transform: rotate(180deg); }
.faq-a {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.8;
  max-width: 820px;
}
.faq-a p { padding-bottom: 24px; }

/* ============================================================
   /pricing — price list

   Replaced the 754px three-column <table>. It was a sorted ascending
   bar plot until Sep 2026, when the bars were removed on owner ruling:
   they restated magnitude the fee already gives in plain text, and this
   page also carries the bundle teaser's real progress lines, so two
   unrelated things were drawn as horizontal bars. The --mark token went
   with them and is no longer declared.

   Row order follows the service deck on /services, not price. Centred
   as a block on a 940px rail.
   ============================================================ */
/* The owner's note was "everything is aligned to the left". The section
   head is centred; the rows keep a shared left baseline inside their own
   centred block so the service names line up as a column. */
.pp-section .inner { text-align: center; }
.pp-section .s-body {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  /* Centred short copy orphans its last word readily; balance evens the
     lines. Scoped here, not applied site-wide. */
  text-wrap: balance;
}
.pp-section .qual-strip,
.pp-section .qual-item { text-align: center; }

.pp {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 940px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pp-row { margin: 0; text-align: left; }

/* The whole row is the link. That is the fix for "I did not know I
   could click it": a bordered, arrowed block is a link at rest, where
   the old .13-alpha bottom border only appeared under a cursor.
   min-height 44px is the touch-target floor. */
.pp-link {
  position: relative;
  display: grid;
  /* Name over note on the left, fee on the right. The middle column used
     to hold a bar track. The bars were removed: they encoded the same
     magnitude the fee already states, and on a page that also carries the
     teaser's real progress lines they read as progress bars. */
  grid-template-columns: minmax(0, 1fr) 104px;
  grid-template-areas:
    "name fee"
    "note fee";
  align-items: center;
  gap: 2px 20px;
  min-height: 44px;
  padding: 14px 44px 14px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg2);
  text-decoration: none;
  color: inherit;
  transition: background-color .2s ease, border-color .2s ease;
}
.pp-link:hover {
  background: var(--bg3);
  border-color: var(--border-hi);
}
.pp-link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.pp-name {
  grid-area: name;
  align-self: end;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.pp-fee {
  grid-area: fee;
  grid-row: 1 / 3;
  align-self: center;
  text-align: right;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  /* Tabular figures so the fee column does not shimmy between rows. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-note {
  grid-area: note;
  align-self: start;
  font-size: 13px;
  color: var(--text3);
  line-height: 1.5;
}
.pp-go {
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  color: var(--text3);
  transition: transform .2s ease, color .2s ease;
}
.pp-link:hover .pp-go { transform: translateX(3px); color: var(--text); }

/* Emphasis mark: the free entry point. Carries the accent on the bar,
   the fee AND a visible border, so it is never signalled by colour
   alone. */
.pp-row--free .pp-link {
  background: rgba(201,169,97,.06);
  border-color: rgba(201,169,97,.35);
}
.pp-row--free .pp-fee { color: var(--accent); }
.pp-row--free .pp-link:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .pp-link, .pp-go { transition: none; }
}

/* ============================================================
   /pricing — terms disclosure.
   Two 91px paragraphs of terms folded into one closed <details>.
   ============================================================ */
.pr-terms {
  max-width: 940px;
  margin: 36px auto 0;
  border-top: 1px solid var(--border);
}
.pr-terms-t {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  transition: color .2s ease;
}
.pr-terms-t::-webkit-details-marker { display: none; }
.pr-terms-t:hover { color: var(--text2); }
.pr-terms-t:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pr-terms-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.pr-terms[open] .pr-terms-chev { transform: rotate(180deg); }
.pr-terms-body { padding-bottom: 8px; }

/* Shared with the old services-page block, kept identical. */
.qual-lead {
  margin-top: 48px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 16px;
}
.qual-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.qual-item {
  background: var(--bg2);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qual-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.qual-note {
  font-size: 14px;
  color: var(--text3);
  line-height: 1.6;
}
.price-foot {
  margin-top: 26px;
  font-size: 15px;
  color: var(--text3);
  line-height: 1.75;
  max-width: 900px;
}

/* ============================================================
   CTA (site-wide pattern)
   ============================================================ */
.contact-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  /* First section on /pricing: clear the fixed nav. See --nav-clear. */
  .pp-section { padding-top: var(--nav-clear); }
  .sp-includes { grid-template-columns: 1fr; }
  .qual-strip { grid-template-columns: 1fr; }

  /* Price plot on a phone: the fee drops under the name so neither
     gets squeezed, and the note keeps its own line. */
  .pp-link {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "fee" "note";
    align-items: start;
    gap: 6px;
    padding: 16px 40px 16px 16px;
  }
  /* The desktop layout spans .pp-fee across both grid rows. In the
     single-column mobile layout that span would overlay the name row. */
  .pp-fee { grid-row: auto; font-size: 20px; text-align: left; align-self: start; }
  .pp-name { align-self: start; }
}
@media (max-width: 540px) {
  /* The name and the price have to share one line at every phone width.
     At the clamp floors above (30px / 34px) four of the twelve leads did
     not fit and wrapped the price onto its own row, which breaks the
     two-row structure: measured at 430x932, "Content Strategy $1,000"
     needed 399.3px of a 382px rail, and "Website Kickstart",
     "Websites & SEO" and "Make It Happen" were all within 4px of the
     same fate.
     min() means these never render LARGER than the floors they replace,
     and they stop binding at ~500px, so 500-540px is unchanged. Verified
     to fit all twelve leads from 540px down to 320px.
     The figure stays proportionally larger than the name, so it is still
     the strongest thing on the line. */
  .sp-lead-name { font-size: min(30px, 6vw); }
  .sp-lead-fig  { font-size: min(34px, 6.8vw); }

  .sp-hero { padding-top: calc(var(--nav-h) + 48px); }
  .sp-hero-cta .btn { width: 100%; }
  .sp-includes li { padding: 20px 18px; }
  .faq-q { font-size: 16px; padding: 20px 0; gap: 18px; }
  .faq-a { font-size: 14.5px; }
  .contact-btns .btn { width: 100%; }
}

/* ============================================================
   PACKAGES — the four breakdowns on /pricing that the bundles
   teaser links into. Anchor ids (#make-it-happen,
   #website-kickstart, #stock-up, #monthly-media) are the contract
   with that teaser.
   ============================================================ */
.pk-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 40px;
}
.pk-jump-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--border-md);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pk-jump-link:hover { border-color: var(--border-hi); color: var(--text); background: var(--bg3); }
.pk-jump-link:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.pk {
  /* Clears the 58px fixed nav when jumped to from the teaser. */
  scroll-margin-top: calc(var(--nav-h) + 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 36px;
  border: 1px solid var(--border-md);
  border-radius: 14px;
  background: var(--bg);
}
/* The flagship is the largest thing on the page, deliberately. */
.pk--flagship { padding: 52px 48px; gap: 20px; }

.pk-flag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-md);
  color: var(--text3);
}
.pk-flag--flagship { color: var(--accent); border-color: var(--accent); }
.pk-flag--limited  { color: var(--text); border-color: var(--border-hi); }

.pk-name {
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--text);
  margin: 0;
}
.pk-name--md { font-size: clamp(28px, 3.4vw, 44px); }
.pk-name--sm { font-size: clamp(24px, 2.6vw, 34px); }

.pk-lead {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text2);
  margin: 0;
}
.pk-total { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.pk-fig {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
}
.pk-unit { font-size: 15px; color: var(--text3); }

/* Two halves of ONE package. The connector is what stops them
   reading as two things you could buy separately. */
.pk-split {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--border);
}
.pk-half {
  background: var(--bg2);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pk-half + .pk-half { border-left: 1px solid var(--border); }
.pk-half-fig {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
}
.pk-half-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text3);
}
.pk-half-b {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text2);
  margin: 4px 0 0;
}
/* Sits under BOTH halves, because the photography belongs to the
   package rather than to either half. */
.pk-strip {
  width: 100%;
  margin: -4px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--bg3);
  font-size: 14px;
  color: var(--text2);
}

.pk-inc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pk-inc li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--text2);
  line-height: 1.55;
}
.pk-inc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 1px;
  background: var(--border-hi);
}
.pk-inc--row { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }

.pk-cta { margin-top: 6px; }
.pk--flagship .pk-cta { margin-top: 10px; }

.pk-group-t {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 52px 0 18px;
}
.pk-specials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.pk--monthly { margin-top: 44px; }
.pk-monthly-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .pk { padding: 26px 22px; }
  .pk--flagship { padding: 32px 24px; }
  .pk-split { grid-template-columns: 1fr; }
  .pk-half + .pk-half { border-left: 0; border-top: 1px solid var(--border); }
  .pk-specials { grid-template-columns: 1fr; }
  .pk-cta { width: 100%; }
}

/* ============================================================
   Sub-headings inside a service page's prose section.
   Added for /services/website/, which is the only service page
   carrying multiple named sub-topics under one section title.

   NOT .sp-row-l: that is the absolutely-positioned 116px label
   column belonging to .sp-row, so using it on a standalone
   heading collapses the text into a narrow grey block. This is
   a normal-flow heading that sits between .s-title and .s-body.
   Tokens only, nothing redeclared.
   ============================================================ */
.sp-sub-h {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text);
  max-width: 580px;
  margin: 36px 0 10px;
}
.sp-sub-h:first-of-type { margin-top: 8px; }

@media (max-width: 560px) {
  .sp-sub-h { font-size: 17px; margin-top: 30px; }
}