/* ==========================================================================
   Service pages
   Loaded after styles.css on every service page. Nothing here introduces a
   new colour or radius: it is the homepage system applied to longer,
   information-heavy pages.
   ========================================================================== */

[hidden] { display: none !important; }

/* ---------- Breadcrumb ---------- */
.crumbs { margin-bottom: 26px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.crumbs li { display: flex; align-items: center; gap: 12px; }
.crumbs li + li::before {
  content: ""; width: 5px; height: 5px;
  border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.crumbs a { color: var(--bright); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current="page"] { color: var(--accent); }

/* ---------- Split hero ---------- */
/* Service photography is mostly portrait, so the hero splits rather than
   running a landscape crop full bleed the way the homepage does. */
.sp-hero { position: relative; background: var(--deep); overflow: hidden; }
.sp-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 26px 13px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 72%);
          mask-image: linear-gradient(to left, #000, transparent 72%);
}
.sp-hero-inner {
  position: relative; display: grid; gap: 40px; align-items: center;
  padding-block: calc(var(--shell-h) + clamp(28px, 4vw, 56px)) clamp(48px, 6vw, 84px);
}
@media (min-width: 1000px) {
  .sp-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 5vw, 80px); align-items: stretch; }
  .sp-hero-copy { align-self: center; }
}
@media (max-width: 900px) { .sp-hero-inner { padding-top: 150px; } }
.sp-hero .display { font-size: clamp(34px, 4.6vw, 66px); }
.sp-hero .hero-sub { max-width: 58ch; }

/* The photograph takes the height of the copy beside it rather than setting
   its own, so the two columns always finish level. */
.sp-figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 9; }
.sp-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
@media (min-width: 1000px) { .sp-figure { aspect-ratio: auto; min-height: 280px; } }

/* ---------- Prose and split layouts ---------- */
.prose p { font-size: 16px; line-height: 1.8; color: var(--body); }
.prose p + p { margin-top: 16px; }
.prose strong { color: var(--bright); font-weight: 600; }
.prose a, .inline-link { color: var(--accent); border-bottom: 1px solid rgba(169,163,133,.45); }
.prose a:hover, .inline-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.sp-split { display: grid; gap: 34px 64px; }
@media (min-width: 980px) { .sp-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }

.jump { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.jump .k { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.jump ol { margin-top: 12px; }
.jump a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-2);
  font-size: 14px; color: var(--bright);
}
.jump li:last-child a { border-bottom: 0; }
.jump a:hover { color: #fff; }
.jump a svg { flex-shrink: 0; color: var(--muted); transition: transform .2s var(--ease), color .2s ease; }
.jump a:hover svg { transform: translateX(3px); color: var(--accent); }

/* ---------- Reinstatement solutions ---------- */
.sol-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sol {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden;
  transition: border-color .25s ease, transform .25s var(--ease);
}
.sol:hover { border-color: #39434a; transform: translateY(-3px); }
.sol::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: repeating-linear-gradient(to right, var(--accent) 0 16px, transparent 16px 27px);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.sol:hover::after { transform: scaleX(1); }
.sol-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.sol-body { padding: 22px 24px 26px; }
.sol .ic {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r); color: var(--accent);
}
.sol h3 { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.sol p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--body); }

/* ---------- Utilities ---------- */
.util-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .util-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.util { padding: 26px 26px 28px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.util .k { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.util h3 { margin-top: 10px; font-size: 21px; font-weight: 400; line-height: 1.15; text-transform: uppercase; color: #fff; }
.util p { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--body); }
.util ul, .ticks { margin-top: 16px; display: grid; gap: 9px; }
/* Lists of openings are examples of the work, labelled so they read that way. */
.util .util-l { margin-top: 18px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.util .util-l + ul { margin-top: 10px; }
.util li, .ticks li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--bright); }
.util li::before, .ticks li::before {
  content: ""; position: absolute; left: 0; top: .66em; width: 9px; height: 2px; background: var(--accent);
}
.quote--wide { margin-top: 14px; }
@media (min-width: 900px) {
  .quote--wide { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 260px); gap: 8px 28px; align-items: start; }
  .quote--wide .mark { grid-row: 1 / span 2; }
  .quote--wide blockquote { margin: 0; }
  .quote--wide figcaption { margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--surface-2); }
}

/* ---------- SROH explainer ---------- */
.sroh-grid { display: grid; gap: 40px; }
@media (min-width: 1040px) { .sroh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.timeline { margin-top: 30px; }
.tl-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
.tl-step::before {
  content: ""; position: absolute; left: 15px; top: 40px; bottom: 6px; width: 3px; opacity: .55;
  background: repeating-linear-gradient(to bottom, var(--accent) 0 8px, transparent 8px 15px);
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step:last-child::before { display: none; }
.tl-dot {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--accent); border-radius: var(--r); background: var(--ink);
  font-size: 12px; font-weight: 700; color: var(--accent);
}
.tl-step h3 { padding-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.tl-step p { margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: var(--body); }
.tl-tag {
  display: inline-block; margin-top: 10px; padding: 5px 10px;
  border: 1px solid var(--line-2); border-radius: 0 8px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.source { margin-top: 20px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.source a { color: var(--bright); text-decoration: underline; text-underline-offset: 2px; }
.source a:hover { color: #fff; }

/* ---------- Tools ---------- */
.tool { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.tool-head { padding: 22px 26px; background: var(--grad); border-bottom: 1px solid var(--line-2); }
.tool-head .k { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #bdb79a; }
.tool-head h3 { margin-top: 8px; font-size: 19px; font-weight: 500; line-height: 1.25; text-transform: uppercase; color: #fff; }
.tool-head p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--bright); }
.tool-body { padding: 22px 26px 26px; }

.dfield { display: grid; gap: 8px; margin-top: 18px; }
.dfield:first-child { margin-top: 0; }
.dfield > label, .dfield > .l { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bright); }
.din {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: var(--deep); border: 1px solid #3a434a; border-radius: var(--r);
  font: inherit; font-size: 15px; color: #fff; color-scheme: dark;
  transition: border-color .2s ease;
}
.din:hover { border-color: #56616a; }
.din:focus { border-color: var(--accent); }
select.din {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8c0c4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px;
  background: var(--deep); border: 1px solid var(--line-2); border-radius: var(--r-md);
}
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px;
  border-radius: var(--r); cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bright);
  transition: background-color .2s ease, color .2s ease;
}
.seg label:hover { color: #fff; }
.seg input:checked + label { background: var(--grad-khaki); color: #14181a; }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.dcheck { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--bright); cursor: pointer; }
.dcheck input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.dcheck small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

.result { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-2); animation: sp-rise .35s var(--ease) both; }
.result-grid {
  display: grid; gap: 1px; grid-template-columns: 1fr;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 560px) { .result-grid { grid-template-columns: 1fr 1fr; } }
.result-grid > div { padding: 16px 18px; background: var(--surface); }
.result .k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.result .v { display: block; margin-top: 7px; font-size: 20px; font-weight: 500; line-height: 1.2; color: #fff; }
.result .s { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--accent); }
.result .is-overdue .s { color: #f0a58f; }
.result .note { margin-top: 14px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.result .btn { margin-top: 18px; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Schedule builder: a table on desktop, stacked cards on anything narrower. */
.sb-head, .sb-row { display: grid; gap: 10px; align-items: end; }
@media (min-width: 960px) {
  .sb-head, .sb-row { grid-template-columns: 1.05fr 1.05fr 1.2fr .62fr .78fr .78fr .9fr 44px; }
}
.sb-head { display: none; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
@media (min-width: 960px) { .sb-head { display: grid; } }
.sb-head span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sb-row { padding: 14px 0; border-bottom: 1px solid var(--line-2); animation: sp-rise .3s var(--ease) both; }
@media (max-width: 959px) {
  .sb-row {
    grid-template-columns: 1fr 1fr; margin-top: 12px; padding: 16px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  }
  .sb-cell--wide { grid-column: 1 / -1; }
}
.sb-cell { display: grid; gap: 6px; min-width: 0; }
.sb-cell .l { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 960px) {
  .sb-cell .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sb-cell .din { min-height: 44px; padding: 9px 12px; font-size: 14px; }
.sb-cell select.din { padding-right: 32px; background-position: right 10px center; }
.sb-area { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: #fff; }
.sb-remove {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: var(--r); color: var(--muted);
  transition: border-color .2s ease, color .2s ease;
}
.sb-remove:hover { border-color: #f0a58f; color: #f0a58f; }
@media (max-width: 959px) { .sb-remove { justify-self: end; align-self: end; } }
.sb-empty { padding: 18px 0; font-size: 14px; color: var(--muted); }
.sb-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.sb-totals {
  display: grid; gap: 1px; margin-top: 20px; grid-template-columns: 1fr;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 700px) { .sb-totals { grid-template-columns: .7fr .8fr 1.5fr; } }
.sb-totals > div { padding: 16px 18px; background: var(--surface); }
.sb-totals .k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sb-totals .v { display: block; margin-top: 7px; font-size: 22px; font-weight: 500; color: #fff; }
.sb-mix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sb-mix li { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 0 8px 0 0; font-size: 12.5px; color: var(--bright); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Work ---------- */
.ba { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba figure, .gal figure { position: relative; margin: 0; }
.ba img, .gal img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); }
.stamp {
  position: absolute; left: 0; top: 0; padding: 8px 14px;
  background: var(--grad-khaki); border-radius: 0 8px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #14181a;
}
.ba figcaption, .gal figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--body); }
.gal { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gal figcaption { font-size: 13.5px; }

/* ---------- Who we work for (.aud, because .who already names testimonial authors) ---------- */
.aud-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .aud-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aud { display: flex; flex-direction: column; padding: 26px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.aud h3 { font-size: 18px; font-weight: 500; line-height: 1.25; text-transform: uppercase; color: #fff; }
.aud p { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--body); }
.aud .btn { margin-top: auto; align-self: flex-start; }
.aud .ticks { margin-bottom: 22px; }
.aud--link { background: var(--grad-lift); border-color: rgba(169,163,133,.36); }
.aud--link p { color: var(--bright); }
.quotes--two { margin-top: 14px; }
@media (min-width: 900px) { .quotes--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Areas ---------- */
.areas { display: grid; gap: 34px; }
@media (min-width: 980px) { .areas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.area-links { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .area-links { grid-template-columns: 1fr 1fr; } }
.area-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding: 14px 18px;
  background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: 15px; font-weight: 500; color: #fff;
  transition: border-color .2s ease, transform .2s var(--ease);
}
.area-links a:hover { border-color: rgba(169,163,133,.6); color: #fff; transform: translateY(-2px); }
.area-links small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); }
.area-links svg { flex-shrink: 0; color: var(--accent); }
.area-plain { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.area-plain li { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 0 8px 0 0; font-size: 12.5px; color: var(--bright); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 34px; }
@media (min-width: 980px) { .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-list details { border-bottom: 1px solid var(--line-2); }
.faq-list summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 16px; align-items: center;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 500; line-height: 1.4; color: #fff;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--cream); }
.pm { position: relative; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); }
.pm::before, .pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
  background: var(--accent); transform: translate(-50%, -50%);
  transition: transform .25s var(--ease);
}
.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-list details[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 4px 22px; }
.faq-list details[open] .faq-a { animation: sp-rise .3s var(--ease) both; }
.faq-a p { max-width: 68ch; font-size: 15px; line-height: 1.8; color: var(--body); }
.faq-a p + p { margin-top: 12px; }
.faq-a a { color: var(--accent); border-bottom: 1px solid rgba(169,163,133,.45); }

/* ---------- Quote band additions ---------- */
.fset { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.fset legend { padding: 0; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-label); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.checks label {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px;
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--r);
  font-size: 13px; font-weight: 600; color: var(--paper-ink); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.checks label:hover { border-color: var(--paper-ink); }
.checks input:checked + label { background: var(--paper-ink); border-color: var(--paper-ink); color: #fff; }
.checks input:focus-visible + label { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.prefill {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--paper-line); border-left: 3px solid var(--accent-deep);
  font-size: 13.5px; line-height: 1.55; color: var(--paper-body);
}
.prefill svg { flex-shrink: 0; margin-top: 2px; color: var(--accent-deep); }

/* ---------- Spacing hooks and small fixes ---------- */
.sp-lead { margin-top: 26px; }
.sp-more { margin-top: 26px; }
.faq-intro .btn { margin-top: 26px; }
.acc-k { margin-top: 28px; }
.acc-stack { display: grid; gap: 10px; margin-top: 12px; }
.acc-stack .acc { background: var(--ink); }
/* The hidden radios and checkboxes are absolutely positioned; without a
   positioned parent, focusing one would scroll the page back to the top. */
.seg, .checks { position: relative; }
.fset legend .opt { font-weight: 500; letter-spacing: .02em; text-transform: none; }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ---------- Compact solutions list ---------- */
/* The live page lists these six services under this heading; the wording stays
   because it is part of what the page ranks for. */
.sol-compact { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line-2); }
.sol-compact-h { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.sol-compact-lede { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--body); }
.sol-list { margin-top: 18px; }
@media (min-width: 600px) { .sol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; } }
#solutions { scroll-margin-top: 112px; }

/* ---------- Sticky deadline checker ---------- */
/* On wide screens the checker stays in view while the SROH explainer beside it
   scrolls past. 112px clears the header once it has collapsed. */
@media (min-width: 1040px) { .sroh-grid > .tool { position: sticky; top: 112px; } }
#deadline { scroll-margin-top: 112px; }

/* ---------- Light sections ---------- */
/* Sections alternate between the dark ground and white so each reads as its own
   block. Dark panels, the tools and the hire teams card, stay dark and sit on
   the white as inset objects. */
.band--light { background: var(--paper); border-top: 0; }
.band--light .eyebrow { color: var(--accent-deep); }
.band--light .h2 { color: var(--paper-ink); }
.band--light .lede { color: var(--paper-body); }
.band--light .prose p { color: var(--paper-body); }
.band--light .prose strong { color: var(--paper-ink); }
.band--light .prose a { color: var(--accent-deep); border-bottom-color: rgba(107,102,71,.45); }
.band--light .source { color: var(--paper-label); }
.band--light .source a { color: var(--paper-ink); }
.band--light :focus-visible { outline-color: var(--accent-deep); }
.band--light .tool :focus-visible { outline-color: var(--accent); }

.band--light .sol-compact { border-top-color: var(--paper-line); }
.band--light .sol-compact-h { color: var(--paper-ink); }
.band--light .sol-compact-lede { color: var(--paper-body); }

.band--light .jump { background: var(--paper-tint); border-color: var(--paper-line); }
.band--light .jump .k { color: var(--accent-deep); }
.band--light .jump a { color: var(--paper-ink); border-bottom-color: var(--paper-line); }
.band--light .jump a:hover { color: var(--accent-deep); }
.band--light .jump a svg { color: var(--paper-label); }
.band--light .jump a:hover svg { color: var(--accent-deep); }
.band--light .acc-stack .acc { background: #fff; border-color: var(--paper-line); backdrop-filter: none; }
.band--light .acc:hover { background: #fff; border-color: var(--accent-deep); }
.band--light .acc-plate { border: 1px solid var(--paper-line); }
.band--light .acc-name { color: var(--paper-ink); }
.band--light .acc-what { color: var(--paper-body); }

.band--light .util { background: var(--paper-tint); border-color: var(--paper-line); }
.band--light .util .k { color: var(--accent-deep); }
.band--light .util h3 { color: var(--paper-ink); }
.band--light .util p { color: var(--paper-body); }
.band--light .util .util-l { color: var(--paper-label); }
.band--light .util li, .band--light .ticks li { color: var(--paper-ink); }
.band--light .util li::before, .band--light .ticks li::before { background: var(--accent-deep); }

.band--light .quote { background: var(--paper-tint); border-color: var(--paper-line); }
.band--light .quote .mark { color: var(--accent-deep); }
.band--light .quote blockquote { color: var(--paper-body); }
.band--light .quote .who { color: var(--paper-ink); }
.band--light .quote .role { color: var(--paper-label); }
.band--light .quote figcaption { border-color: var(--paper-line); }

.band--light .tl-dot { background: #fff; border-color: var(--accent-deep); color: var(--accent-deep); }
.band--light .tl-step::before { background: repeating-linear-gradient(to bottom, var(--accent-deep) 0 8px, transparent 8px 15px); opacity: .45; }
.band--light .tl-step h3 { color: var(--paper-ink); }
.band--light .tl-step p { color: var(--paper-body); }
.band--light .tl-tag { border-color: var(--paper-line); color: var(--accent-deep); }

.band--light .aud:not(.aud--link) { background: var(--paper-tint); border-color: var(--paper-line); }
.band--light .aud:not(.aud--link) h3 { color: var(--paper-ink); }
.band--light .aud:not(.aud--link) p { color: var(--paper-body); }

.band--light .faq-list, .band--light .faq-list details { border-color: var(--paper-line); }
.band--light .faq-list summary { color: var(--paper-ink); }
.band--light .faq-list summary:hover { color: var(--accent-deep); }
.band--light .pm { border-color: var(--paper-line); }
.band--light .pm::before, .band--light .pm::after { background: var(--accent-deep); }
.band--light .faq-a p { color: var(--paper-body); }
.band--light .faq-a a { color: var(--accent-deep); border-bottom-color: rgba(107,102,71,.45); }

.band--light .btn--ghost { color: var(--paper-ink); border-color: rgba(20,24,26,.35); }
.band--light .btn--ghost:hover { background: var(--paper-ink); border-color: var(--paper-ink); color: #fff; }

/* ---------- Gradient section ---------- */
/* The live site's own row gradient, used on the last section before the footer
   so it separates from the white section above and the flat footer below.
   Text is lifted to clear AA at the pale end of the gradient. */
.band--grad { background: var(--grad); border-top: 0; }
.band--grad .eyebrow { color: #bdb79a; }
.band--grad .lede { color: var(--bright); }
.band--grad .faq-list, .band--grad .faq-list details { border-color: rgba(255,255,255,.14); }
.band--grad .pm { border-color: rgba(255,255,255,.22); }
.band--grad .faq-a p { color: var(--bright); }
.band--grad .faq-a a { color: #bdb79a; border-bottom-color: rgba(189,183,154,.5); }

/* ---------- Tool hand-off links ---------- */
/* Links cannot be disabled, so an empty schedule marks its link instead. */
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- Pages built after the service pattern ---------- */
/* Location pages keep their long live headlines, so the display size steps down. */
.sp-hero .display--long { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.14; }
/* A detail block that opens a column needs no rule above it. */
.sp-split > div > .sol-compact:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sol-compact .btn { margin-top: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sol-compact .prose { margin-top: 12px; }