/* ============================================================
   ConstructCert Australia — /services
   The two sections of the services page. Loaded after page.css,
   which supplies the header, the footer, the buttons and the type
   primitives.

   NOTHING ON THIS PAGE SWITCHES. Both sections were prototyped as
   zones carrying data-zone/data-variant, with every rule written as
   a `[data-variant="x"] .cc-…` descendant selector; both are locked
   and there is no wrapper and no [data-variant] left in this file.
   The losing settings are in archive/2026-08-services-options/ and
   archive/2026-08-process-options/, with the reasoning.

   THE TWO SECTIONS
     services   LOCKED 19 Aug 2026 — the page head and the twelve,
                folded into one. Heading and lede on the wash, then
                the twelve as bordered cards.
     process    LOCKED 25 Aug 2026 to A — five columns across, and a
                closing line.

   GROUND. Wash head, white cards, white steps, then a white close,
   which is what separates it from the dark footer under it.

   PREFIXES. cc-svc-* (the services section), cc-cat-* (the twelve),
   cc-proc-* (the steps), cc-close-* (the close). Local custom
   properties use --ccs-, --ccc-, --ccp-, --ccl- so none of them can
   reach the token file.
   ============================================================ */

/* ============================================================
   1 · SERVICES — LOCKED 19 Aug 2026
   The head and the twelve. Was three settings; the archive's was
   chosen, so there is one set of rules here and no [data-variant]
   prefix on any of them — the section has no zone wrapper left for
   such a selector to match against.

   GONE WITH THE OTHER TWO: .cc-svc-contents / -list / -name (the
   twelve-name index), .cc-svc-block / -count / -gap (the title
   block), the whole .cc-cat-reg* register and .cc-cat-stage*
   groups, and the [data-copy] rule that swapped the heading and
   lede between settings.

   The register used to survive on the home page as .cc-expertise-reg,
   which is where it was borrowed from. It does not any more: Our
   Expertise locked to "Index" on 25 Aug 2026 and the ruled register
   went with variant A. The pattern now exists nowhere in the build.
   archive/2026-08-expertise-options/30-expertise.html?variant=a is the
   only copy left, and it is a throwaway prototype.
   ============================================================ */
.cc-svc-head{
  /* The archive's wash band, with its two layout bugs left out: it padded
     itself by --nav-offset on top of a position:sticky header, which counts
     the bar twice, and its h1 had no font-size anywhere upstream so it landed
     on the browser default 2em. Neither was a design decision. Both are
     reproduced as built in archive/2026-08-services-options/10-head.html. */
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Added 19 Aug 2026. From 20 Aug it carries the client's own
   services.heading, "What we offer" — the string the archive used as its h1 —
   and the h1 above it names what the twelve produce. */
.cc-svc-eyebrow{ margin: 0; }

.cc-svc-title{
  margin: var(--space-4) 0 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.cc-svc-lede{
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.65;
}

/* ============================================================
   2 · THE TWELVE — twelve bordered cards
   Lifted from the previous build without edits: sections.css
   .services-grid / .service-card / __icon / __title / __points,
   and its two breakpoints, which are in the responsive block at
   the foot of this file.

   The icons have no source. There are none on the old site; these
   twelve were drawn for the archived build and are now on a client
   page, which is recorded here as well as in the markup.
   ============================================================ */
.cc-svc-body{
  background: var(--bg);
  padding: var(--space-9) 0;
}

.cc-cat-grid{
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-cat-card{
  padding: var(--space-6);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cc-cat-card__icon{
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.cc-cat-card__icon svg{ width: 1.5rem; height: 1.5rem; }
.cc-cat-card__title{
  margin: 0 0 var(--space-4);
  font-size: 1.15rem;
  line-height: 1.3;
}
.cc-cat-card__points{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.cc-cat-card__points li{
  position: relative;
  padding-left: 1.4rem;
  color: var(--muted);
  line-height: 1.55;
}
.cc-cat-card__points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--brand);
}

/* ============================================================
   3 · OUR PROCESS — shared
   ============================================================ */
.cc-proc{
  --ccp-accent: var(--button-bg);
  --ccp-accent-mid: color-mix(in srgb, var(--ccp-accent) 34%, var(--border));

  /* The section's ground, on the wash from 20 Aug 2026 so the page alternates:
     the head on the wash, the twelve on white, this on the wash, the dark
     footer. It was white, which put it in the same field as the cards above
     with only a hairline between them.

     Declared as a property rather than used directly because three other
     things have to be the same colour as it: the step markers in variants A
     and B are discs of the ground punched through the rule behind them, and
     A's marker also carries a ring of it. Move this one line and all four
     move together. */
  --ccp-ground: var(--surface);
  background: var(--ccp-ground);
}

/* ---------- the band — LOCKED ------------------------------
   Was variant A. Locked 25 Aug 2026 against a recommendation of B, so the
   five steps run across rather than down the page.

   Lifted from the previous build without edits: main.css .process /
   .timeline / .step-number / .step-title / .step-copy, plus the
   --timeline-inset of 10%, which is 50 divided by the step count.

   THE SELECTORS. `[data-variant="a"] X` became plain `X`, which is safe
   here in a way it was not in the hero: every one of these rules already
   sat after the shared rule it refines, so equal specificity still resolves
   the same way on source order. Checked by diffing computed style and
   geometry for every element in the section at 1440, 900 and 390 before
   and after, not by reading it.

   The five-across band is tight: 1200px over five columns is about 200px
   each and these steps run 45 words. It abandons the band and stacks below
   60rem, which is the archive's own behaviour, not something added here. */
.cc-proc{
  padding: clamp(4rem, 8vw, 8rem) 0 0;
  overflow: hidden;
}
.cc-proc-head{
  max-width: 46rem;
  margin-bottom: var(--space-8);
}
.cc-proc-title{
  max-width: 12ch;
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cc-proc-lede{
  margin: 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.65;
}
/* The eyebrow used to be hidden in this setting, because the archive had none.
   It is shown in all three from 19 Aug 2026 — "How we work" is the client's
   own process.sectionLabel and the archive left it doing nothing but sitting
   in an aria-label. The title carries the space instead of the section head. */
.cc-proc-title{ margin: var(--space-4) 0 var(--space-4); }

.cc-proc-band{
  --ccp-inset: 10%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The connecting rule: a hairline plus a dashed overlay, inset by half a
   column at each end so it starts and stops at the first and last markers. */
.cc-proc-band::before{
  position: absolute;
  top: 1.72rem;
  right: calc(var(--ccp-inset) - 0.45rem);
  left: calc(var(--ccp-inset) - 0.45rem);
  height: 1px;
  background: var(--ccp-accent-mid);
  content: "";
}
.cc-proc-band::after{
  position: absolute;
  top: 1.35rem;
  right: calc(var(--ccp-inset) - 0.45rem);
  left: calc(var(--ccp-inset) - 0.45rem);
  height: 0.8rem;
  opacity: 0.55;
  background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), var(--ccp-accent) calc(5% - 1px) 5%);
  content: "";
  mask: linear-gradient(#000 0 0) top / 100% 0.36rem no-repeat;
}
.cc-proc-band > li{
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1rem;
  text-align: center;
}
.cc-proc-band .cc-proc-num{
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--ccp-accent);
  border-radius: 50%;
  background: var(--ccp-ground);
  color: var(--ccp-accent);
  font: 700 0.8rem/1 var(--font-body);
  letter-spacing: 0.08em;
  /* Solid ring of the section's own ground punches the rule out behind it. */
  box-shadow: 0 0 0 0.55rem var(--ccp-ground);
}
.cc-proc-band > li:nth-child(even) .cc-proc-num{
  background: var(--ccp-accent);
  color: var(--bg);
}
.cc-proc-band .cc-proc-steptitle{
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.cc-proc-band .cc-proc-copy{
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.72;
}

/* ---------- b and c · the head ------------------------------ */
/* "How we work" is the client's own process.sectionLabel from
   site.config.json. It was already written; until now it was only ever
   used as an aria-label. */
/* No hairline on any of the three: the section above is white and this one is
   the wash, so the ground change is the edge. A rule as well would be one
   separator too many — the home page's expertise section, which is the same
   white-then-wash join, does not have one either. */
.cc-proc-eyebrow{ margin: 0; }

/* B puts the head in its own column beside the route. Without it the route
   runs to a 62-character measure inside a 1200px container and leaves the
   right third of the section empty — next to a register above that fills
   72rem, the section reads as half-drawn. */

/* ---------- b · the route ----------------------------------- */
/* The rule is drawn per step rather than once down the list, so it stops
   dead at the last marker instead of running past it into the padding —
   and a sixth step would extend it by itself. */

/* ---------- c · ruled step rows ----------------------------- */

/* ============================================================
   4 · THE CLOSE — LOCKED 19 Aug 2026
   One close, the same in all three step settings, so nothing here
   is variant-prefixed. It replaced three: this line, a block with
   the phone number set large, and a two-question intake.

   The shape is MyReno's .process__close, which the archive
   inherited — part of the process section rather than a band under
   it, a hairline across the container, copy on the left and one
   button on the right. myreno/styles/main.css:684 is the original;
   the three declarations that make it are margin-top, padding-top
   and border-top, and they are on the container here so the rule
   lines up with the section above whichever step setting is on.

   GONE WITH THE OTHER TWO: .cc-close-head / -title / -note, the
   .cc-close-contact block with .cc-close-label / -phone / -email,
   and the whole .cc-close-intake form with its fields, select and
   actions. The prototype that held all three is in
   archive/2026-08-services-options/40-close.html.

   One consequence is worth knowing: this page has no contact
   section under the close, so the last thing before the dark footer
   is a hairline rather than a change of ground.
   ============================================================ */
.cc-close{
  scroll-margin-top: var(--nav-offset);
  /* The process section's bottom padding lives here, because the close is
     the last thing in it. */
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

/* The rule, and the space above it. */
.cc-close-shell{
  margin-top: clamp(4rem, 7vw, 6rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.cc-close-line{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
}
/* MyReno holds this paragraph at 42rem and runs about fifty words into it.
   Same measure, same length; the button keeps its own column beside it
   rather than being pushed under by a wider column of text. */
.cc-close-line p{ max-width: 42rem; color: var(--muted); }

/* The inline tel: link in the paragraph, and ONLY there. Written as
   `.cc-close-line a` on 19 Aug 2026, which also matched the button — and
   `.cc-close-line a` outranks `.button`, so the button's label turned from
   white to ink on a teal ground. Scoped to the paragraph. */
.cc-close-line p a{ color: var(--text); }
.cc-close-line p a:hover{ color: var(--accent); }

/* The button. Same closing-line pattern as the contact page's .faq-close
   .button and deliberately the same two declarations — a CTA at the foot of
   a section sits a step down from a CTA that is the point of a section. */
.cc-close-line .button{
  min-height: 2.8rem;
  padding: 0.7rem 1rem;
}
/* The arrow, which the contact page's version does not have and should not:
   that button scrolls UP to a form on the same page, and an arrow pointing
   right at something above you is a cue that is simply wrong. This one leaves
   for /contact, so it points. */
.cc-close-line .button span{
  color: currentColor;
  transition: transform var(--transition-fast);
}
.cc-close-line .button:hover span{ transform: translateX(0.2rem); }

/* =====================================================================
   RESPONSIVE — every breakpoint override, in section order
   ===================================================================== */

/* 2 · the archive's own two card breakpoints, kept as they were. Nothing
      else in the services section has a breakpoint any more: the register
      and the twelve-name index both had several, and both went with the
      settings that were not chosen. */
@media (min-width: 45rem) { .cc-cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cc-cat-grid{ grid-template-columns: repeat(3, 1fr); } }

/* 3 · the archive's band abandons itself below 60rem and stacks — which is
      the honest verdict on five columns of 45 words. Kept as it was. */
@media (max-width: 60rem) {
  .cc-proc-band{
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1.75rem 1.5rem;
  }
  .cc-proc-band::before,
.cc-proc-band::after{ display: none; }
  .cc-proc-band > li{ display: contents; text-align: left; }
  .cc-proc-band > li > *{ justify-self: start; }
  .cc-proc-band .cc-proc-steptitle{ align-self: center; }
  .cc-proc-band .cc-proc-copy{ grid-column: 2; margin-bottom: 0.75rem; }
}

/* 3 · the route's head column drops above it. */


/* 4 · the close stacks: the button goes under the paragraph rather than
      beside it, and stops stretching to the full width. */
@media (max-width: 48rem) {
  .cc-close-line{ grid-template-columns: minmax(0, 1fr); }
  .cc-close-line .button{ justify-self: start; }
}