/* ============================================================================
   RCS Care — public site skin
   ----------------------------------------------------------------------------
   The portals are product UI and keep the moss-green system in app.css. This
   file is the *company* brand, taken from RCS Care's own profile deck: deep
   navy grounds, the wordmark's blue as the single accent, the "CARE" grey for
   quiet type. A visitor arriving from a business card should recognise it.

   It works by re-pointing the shared tokens rather than restyling every
   component — .btn-primary, .pill, .metric and the rest keep their behaviour
   and simply come out navy here. --moss therefore holds a blue on this page,
   which reads oddly in the variable name but means one override instead of
   forty, and no risk of the two stylesheets drifting apart.
   ========================================================================= */

body.site {
  --ink:        #050D1C;
  --surface:    #0A1730;
  --surface-2:  #0F1F3D;
  --surface-3:  #16294B;
  --line:       #1D3055;
  --line-soft:  #142440;

  /* the wordmark blue, standing in for --moss */
  --moss:       #1C5FA8;
  --moss-lift:  #3E88DA;
  --moss-dim:   #123C6B;

  --signal:     #D9A441;   /* licence / certification marks */
  --alert:      #D6544A;
  --info:       #5AA0E2;

  --text:       #EAF0F8;
  --muted:      #93A3BC;
  --faint:      #61728E;

  --navy-flat:  #12305F;   /* the deck's header bar, used for section rules */

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body:    'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* A serif at display size wants tighter tracking and a shorter leading than
   the grotesque this system was built around. */
body.site h1, body.site h2, body.site h3 {
  font-family: var(--display); letter-spacing: -.015em; line-height: 1.12;
  font-weight: 600; text-wrap: balance;
}
body.site h1 { font-weight: 500; }
body.site p { line-height: 1.72; }

@media (prefers-color-scheme: light) {
  body.site {
    --ink:       #F4F6FA;
    --surface:   #FFFFFF;
    --surface-2: #EDF1F7;
    --surface-3: #E1E8F2;
    --line:      #D2DBE8;
    --line-soft: #E4EAF3;
    --text:      #0A1730;
    --muted:     #4B5C77;
    --faint:     #77869E;
    --moss:      #12305F;
    --moss-lift: #1C5FA8;
  }
}
body.site[data-theme="dark"] {
  --ink: #050D1C; --surface: #0A1730; --surface-2: #0F1F3D; --surface-3: #16294B;
  --line: #1D3055; --line-soft: #142440;
  --text: #EAF0F8; --muted: #93A3BC; --faint: #61728E;
  --moss: #1C5FA8; --moss-lift: #3E88DA;
}
body.site[data-theme="light"] {
  --ink: #F4F6FA; --surface: #FFFFFF; --surface-2: #EDF1F7; --surface-3: #E1E8F2;
  --line: #D2DBE8; --line-soft: #E4EAF3;
  --text: #0A1730; --muted: #4B5C77; --faint: #77869E;
  --moss: #12305F; --moss-lift: #1C5FA8;
}

/* The deck rules every slide with a navy bar. Borrowed as a section marker so
   the site and the printed profile feel like one company. */
.rule-top { border-top: 3px solid var(--moss); padding-top: 2.6rem; }

/* ── shared section furniture ────────────────────────────────────────────── */
.sec-pad  { padding: 5.5rem 0; }
.sec-tint { background: var(--surface-2); border-block: 1px solid var(--line); }
.grid-cards { display: grid; gap: 1.1rem;
              grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* ── service cards ───────────────────────────────────────────────────────── */
.svc { display: flex; flex-direction: column; gap: .7rem; height: 100%; }
.svc-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
          background: color-mix(in srgb, var(--moss) 16%, transparent);
          color: var(--moss-lift); flex: none; }
.svc-ic svg { width: 21px; height: 21px; }
.svc h3 { font-size: 1.05rem; }
.svc p  { color: var(--muted); font-size: .88rem; line-height: 1.65; }
.svc ul { list-style: none; display: grid; gap: .3rem; margin-top: auto; padding-top: .5rem; }
.svc li { font-size: .8rem; color: var(--faint); display: flex; gap: .5rem; }
.svc li::before { content: '·'; color: var(--moss-lift); font-weight: 700; }

/* ── chip lists (property types, states, standards) ──────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-size: .8rem; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); white-space: nowrap;
}
.chip.on { border-color: var(--moss); color: var(--moss-lift);
           background: color-mix(in srgb, var(--moss) 10%, transparent); }

/* ── numbered pillars ────────────────────────────────────────────────────── */
.pillars { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pillar { border-left: 2px solid var(--moss); padding-left: 1rem; }
.pillar .n { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
             color: var(--moss-lift); text-transform: uppercase; }
.pillar h3 { font-size: 1rem; margin: .4rem 0 .35rem; }
.pillar p  { font-size: .85rem; color: var(--muted); line-height: 1.6; }

/* ── client names ────────────────────────────────────────────────────────── */
.clients { display: flex; flex-wrap: wrap; gap: .5rem .55rem; }
.clients span {
  font-size: .875rem; padding: .5rem .9rem; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
}

/* ── credentials ─────────────────────────────────────────────────────────── */
.creds { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cred { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem;
        background: var(--surface); position: relative; }
.cred .t { font-size: .93rem; font-weight: 600; }
.cred .n { font-family: var(--mono); font-size: .78rem; color: var(--moss-lift); margin-top: .3rem; }
.cred .b { font-size: .78rem; color: var(--faint); margin-top: .5rem; line-height: 1.55; }

/* ── support list ────────────────────────────────────────────────────────── */
.support { display: grid; gap: .8rem; }
.support li { display: flex; gap: .8rem; align-items: flex-start;
              font-size: .9rem; line-height: 1.6; }
.support li svg { width: 17px; height: 17px; flex: none; margin-top: .22rem; color: var(--moss-lift); }
.support li span { color: var(--muted); }
.support li b { color: var(--text); font-weight: 600; }

/* ── the schematic-map legend ────────────────────────────────────────────── */
.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
.legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block;
            margin-right: .45rem; vertical-align: -1px; }
.legend span { font-size: .78rem; color: var(--muted); font-family: var(--mono); }

/* ── contact ─────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: 2rem; grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.cline { display: flex; gap: .9rem; align-items: baseline; padding: .7rem 0;
         border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
.cline:last-child { border-bottom: 0; }
.cline .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--faint); width: 88px; flex: none; }


/* ══════════════════════════════════════════════════════════════════════
   Page furniture, previously inline in index.html. Shared now that the
   site is more than one page — nav, hero, strip, steps, coverage,
   standards, FAQ and footer are identical everywhere.
   ══════════════════════════════════════════════════════════════════════ */

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; padding: 1rem 0;
  transition: background .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.stuck { background: color-mix(in srgb, var(--ink) 82%, transparent);
             backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line);
             padding: .6rem 0; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-links { display: flex; gap: 1.75rem; font-size: .875rem; color: var(--muted); }
.nav-links a { position: relative; transition: color .18s; }
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1.5px;
  background: var(--signal); transition: right .28s var(--ease);
}
.nav-links a:hover::after { right: 0; }
.nav-cta { display: flex; align-items: center; gap: .6rem; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
            border: 1px solid var(--line); background: transparent; cursor: pointer;
            color: var(--muted); transition: all .18s; }
.icon-btn:hover { color: var(--text); border-color: var(--moss); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 9.5rem 0 5rem; overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 80% at 70% 0%, #000 20%, transparent 72%);
}
.hero-glow {
  position: absolute; z-index: 0; width: 780px; height: 780px; border-radius: 50%;
  top: -400px; right: -180px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--moss) 26%, transparent), transparent 62%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-70px, 60px) scale(1.12); } }

.hero-in { position: relative; z-index: 1; display: grid;
           grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
           gap: 3.5rem; align-items: center; }
/* The serif sets wider than the grotesque this was scaled for; 4.35rem
   pushed the second line past its column and under the hero card. */
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); margin: 1.1rem 0 1.25rem; }
/* No nowrap: it forced a line longer than the grid column, which is how the
   headline ended up printed underneath the credentials card. */
.hero h1 .hl { color: var(--moss-lift); position: relative; }
/* The swipe underline is gone. It was absolutely positioned against an inline
   span, which is fine while the span holds one line and nonsense once it wraps
   — it drew a rule under a fragment of the last line only. The colour shift
   already carries the emphasis. */
.hero p.lede { font-size: 1.075rem; color: var(--muted); max-width: 33rem; line-height: 1.65; }
.hero-actions { display: flex; gap: .7rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-note { margin-top: 1.4rem; font-size: .8rem; color: var(--faint); display: flex;
             align-items: center; gap: .5rem; }

/* The hero visual is the document the client actually receives. A live-looking
   feed of invented records would say more about the software than about the
   service, and a prospect cannot verify a ticker — they can read a receipt. */
                letter-spacing: .01em; }
                  text-decoration: underline; text-underline-offset: 3px; }
            font-size: .72rem; font-family: var(--mono); color: #4a5852; }
/* Fixed layout: the content is real product names, and left to size itself
   the table pushed past the card and the Area column was clipped off. */
            border-top: 1px solid #16201a; }
                 color: #5a675f; font-weight: 700; }
            font-size: .68rem; color: var(--faint); font-family: var(--mono);
            letter-spacing: .04em; text-align: center; }

/* ── strip ─────────────────────────────────────────────────────────────── */
.strip { border-block: 1px solid var(--line); padding: 1.4rem 0; }
.strip-in { display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; justify-content: center; }
.strip .lab { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
              text-transform: uppercase; color: var(--faint); }
.strip .co { font-family: var(--display); font-weight: 600; font-size: 1.02rem;
             color: var(--muted); letter-spacing: -.02em; transition: color .2s; }
.strip .co:hover { color: var(--text); }

/* ── sections ──────────────────────────────────────────────────────────── */
section { padding: 6rem 0; }
.sec-head { max-width: 46rem; margin-bottom: 3rem; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: .8rem 0 1rem; }
.sec-head p { color: var(--muted); font-size: 1.02rem; }

/* steps — numbered because this genuinely is a sequence */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 1.6rem 1.4rem; position: relative; overflow: hidden;
        transition: transform .3s var(--ease), border-color .3s; }
.step:hover { transform: translateY(-4px); border-color: var(--moss); }
.step-n { font-family: var(--mono); font-size: .7rem; color: var(--signal); letter-spacing: .1em; }
.step h3 { font-size: 1.2rem; margin: .7rem 0 .55rem; }
.step p { font-size: .885rem; color: var(--muted); }
.step-art { margin-top: 1.2rem; height: 92px; border-radius: var(--radius-sm);
            background: var(--surface-2); border: 1px solid var(--line-soft);
            display: grid; place-items: center; overflow: hidden; position: relative; }

/* portals */
.portals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.portal { border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden;
          background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s; }
.portal:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.portal-top { padding: 1.5rem 1.4rem 1.2rem; }
.portal-top h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.portal-top p { font-size: .875rem; color: var(--muted); min-height: 3.2em; }
.portal ul { list-style: none; padding: 0 1.4rem 1.2rem; margin: 0; display: grid; gap: .45rem; }
.portal li { font-size: .82rem; color: var(--muted); display: flex; gap: .5rem; align-items: flex-start; }
.portal li::before { content: '—'; color: var(--moss-lift); flex: none; }
.portal-foot { padding: 1rem 1.4rem; border-top: 1px solid var(--line); background: var(--surface-2); }

/* coverage */
.cover { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
/* With no state list the section is one short column, and full section padding
   leaves it floating in dead space above the CTA. */
#coverage.slim { padding-block: 4.5rem; }
#coverage.slim .cover { grid-template-columns: 1fr; max-width: 46rem; }
.states { display: flex; flex-wrap: wrap; gap: .45rem; }
.state { font-family: var(--mono); font-size: .74rem; padding: .32rem .7rem; border-radius: 999px;
         border: 1px solid var(--line); color: var(--muted); background: var(--surface);
         transition: all .2s var(--ease); }
.state:hover, .state.hot { border-color: var(--moss); color: var(--text);
         background: color-mix(in srgb, var(--moss) 14%, var(--surface)); }

/* standards — four clauses, four cards; the tag is the clause reference
   because that is the thing a QA head actually searches for */
.std-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.std { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 1.5rem 1.4rem; transition: border-color .3s, transform .3s var(--ease); }
.std:hover { border-color: var(--moss); transform: translateY(-3px); }
.std-tag { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal);
           padding-bottom: .7rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line-soft); }
.std h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.std p { font-size: .865rem; color: var(--muted); }

/* the two documents — the whole commercial argument, side by side */
.deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.deliv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
         padding: 1.9rem 1.8rem; transition: border-color .3s, transform .3s var(--ease); }
.deliv:hover { border-color: var(--moss); transform: translateY(-4px); }
.deliv h3 { font-size: 1.35rem; margin: .8rem 0 .7rem; }
.deliv > p { font-size: .93rem; color: var(--muted); line-height: 1.62; }
.deliv ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .5rem;
            border-top: 1px solid var(--line-soft); padding-top: 1.1rem; }
.deliv li { font-size: .84rem; color: var(--muted); display: flex; gap: .55rem;
            align-items: flex-start; }
.deliv li::before { content: '✓'; color: var(--moss-lift); flex: none; font-weight: 700; }
.deliv-note { margin-top: 1.4rem; font-size: .88rem; color: var(--faint); text-align: center;
              max-width: 46rem; margin-inline: auto; }

/* contact lines render only for details that have actually been filled in */
.contact-lines { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap;
                 font-size: .95rem; }
.contact-lines a { color: var(--text); text-decoration: none; display: flex; gap: .45rem;
                   align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.contact-lines a:hover { border-color: var(--moss-lift); color: var(--moss-lift); }
.contact-lines .k { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--faint); }

.platform { font-size: .82rem; color: var(--faint); }
.platform a { color: var(--muted); text-decoration: none;
              border-bottom: 1px solid var(--line); }
.platform a:hover { color: var(--moss-lift); border-color: var(--moss-lift); }

.proof { margin-top: 2.5rem; display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem;
         align-items: center; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius-lg); padding: 2rem 2.2rem; }
.proof blockquote { margin: .9rem 0 1.4rem; font-family: var(--display); font-weight: 400;
                    font-size: 1.3rem; line-height: 1.45; letter-spacing: -.02em; }
.proof-who { display: flex; align-items: center; gap: .8rem; font-size: .84rem; }
.proof-who .mono { font-size: .72rem; color: var(--faint); }
.avatar-lg { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
             background: var(--surface-3); color: var(--muted); font-family: var(--mono);
             font-size: .8rem; font-weight: 600; flex: none; }
.proof-stat { text-align: center; padding-left: 2rem; border-left: 1px solid var(--line); }
.proof-stat .lab { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.proof-stat .big { font-family: var(--display); font-size: 2.4rem; font-weight: 800;
                   letter-spacing: -.04em; line-height: 1.1; }
.proof-stat .big .u { font-size: .8rem; font-family: var(--body); font-weight: 500;
                      color: var(--muted); margin-left: .35rem; letter-spacing: 0; }
.proof-stat .big.hi { color: var(--moss-lift); }
.proof-stat .arrow { color: var(--signal); font-size: 1.1rem; margin: .1rem 0; }

/* faq — accordion; only one open, because scanning beats reading here */
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; padding: 1.15rem 0; display: flex;
  justify-content: space-between; gap: 1.5rem; align-items: center;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; color: var(--signal); font-size: 1.4rem; font-weight: 400;
                     transition: transform .3s var(--ease); flex: none; line-height: 1; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa .ans { padding: 0 0 1.3rem; color: var(--muted); font-size: .92rem; max-width: 44rem;
           animation: fadeDown .32s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } }

/* cta */
.cta { text-align: center; padding: 6.5rem 0; position: relative; overflow: hidden; }
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--moss) 22%, transparent), transparent 70%);
}
.cta-in { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1rem; }

footer { border-top: 1px solid var(--line); padding: 2.5rem 0; font-size: .82rem; color: var(--faint); }
.foot-in { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }

@media (max-width: 980px) {
  .hero-in, .cover { grid-template-columns: 1fr; }
  .steps, .portals, .std-grid { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.5rem; }
  .proof-stat { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 1.4rem; }
  .deliverables { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .hero { padding-top: 7rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Multi-page site: brand lockup, page heads, guides, prose, mobile nav
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the logo ────────────────────────────────────────────────────────────
   Two files rather than one: the wordmark's "CARE" and "PEST CONTROL" are a
   mid grey that disappears into a navy ground, so the dark variant remaps
   just those neutrals and leaves the blue shield alone. Both are keyed off
   the company's own artwork, so the honeycomb texture survives.
   Sized by height — the aspect ratio comes from the width/height attributes,
   which also stops the header reflowing while the image loads. */
.brand-logo { display: inline-flex; align-items: center; flex: none; }
.brand-logo img { height: 38px; width: auto; display: block; }
.foot-logo img { height: 30px; }
/* display:block — as an inline image it sat on the text baseline and the
   line beneath it rode up into the wordmark. */
.hero-logo { display: block; height: 48px !important; width: auto; margin-bottom: 1.2rem; }

/* `.brand-logo img` is (0,1,1) and beat a bare `.logo-dark` at (0,1,0), so
   both variants rendered at once and the wordmark sat on top of itself.
   Matching element+class on both sides settles it. */
img.logo-dark  { display: none; }
@media (prefers-color-scheme: dark) {
  img.logo-light { display: none; }
  img.logo-dark  { display: block; }
}
[data-theme="dark"]  img.logo-light { display: none; }
[data-theme="dark"]  img.logo-dark  { display: block; }
[data-theme="light"] img.logo-light { display: block; }
[data-theme="light"] img.logo-dark  { display: none; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav-links a.on { color: var(--text); }
.nav-links a.on::after { right: 0; }
.nav-burger { display: none; }

@media (max-width: 940px) {
  .nav-burger { display: grid; }
  .nav-links {
    position: absolute; inset: 100% 0 auto; flex-direction: column; gap: 0;
    background: var(--surface); border-block: 1px solid var(--line);
    padding: .5rem 0; display: none;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: .85rem 1.4rem; min-height: 44px; display: flex; align-items: center; }
  .nav-links a::after { display: none; }
  .nav-cta .btn-ghost { display: none; }
}
@media (max-width: 520px) {
  .brand-logo img { height: 30px; }
  .nav-cta .btn-primary { display: none; }
}

/* ── page head (every page except home) ──────────────────────────────────── */
.page-head { padding: 8.5rem 0 3.2rem; border-bottom: 1px solid var(--line);
             background: var(--surface-2); }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: .8rem 0 1rem; max-width: 20ch; }
.page-head .lede { color: var(--muted); font-size: 1.06rem; max-width: 58ch; }
.page-head .byline { font-size: .74rem; color: var(--faint); margin-top: 1.2rem;
                     letter-spacing: .04em; }

/* ── hero credentials card, in place of the sample receipt ───────────────── */
.hero-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.7rem 1.6rem; box-shadow: var(--shadow-lg);
}
.hero-card-line { font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem; }
.hero-card-creds { display: grid; gap: .55rem; }
.hero-card-creds div { display: flex; justify-content: space-between; gap: 1rem;
                       font-size: .8rem; padding-bottom: .55rem;
                       border-bottom: 1px solid var(--line-soft); }
.hero-card-creds div:last-child { border-bottom: 0; }
.hero-card-creds .n { font-family: var(--mono); color: var(--moss-lift); flex: none; }
.hero-card-foot { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
                  display: flex; flex-direction: column; gap: .3rem; }
.hero-card-foot .big { font-size: 1.12rem; font-weight: 600; }
.hero-card-foot a { color: var(--text); }

/* ── two-column blocks ───────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 1.6rem; } }

.motto { font-size: 1.1rem; line-height: 1.6; margin: .9rem 0 0; font-family: var(--display);
         font-style: italic; color: var(--text); border: 0; padding: 0; }

/* ── clients, grouped ────────────────────────────────────────────────────── */
.sector { margin-bottom: 2.2rem; }
.sector h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.sector .count { font-family: var(--mono); font-size: .72rem; color: var(--faint); }

/* ── guides ──────────────────────────────────────────────────────────────── */
.guide-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.guide-card {
  display: flex; flex-direction: column; gap: .55rem; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; transition: border-color .25s, transform .25s var(--ease);
}
.guide-card:hover { border-color: var(--moss); transform: translateY(-3px); }
.guide-card h3 { font-size: 1.08rem; }
.guide-card p  { font-size: .88rem; color: var(--muted); }
.guide-card .more { margin-top: auto; padding-top: .7rem; font-size: .82rem;
                    color: var(--moss-lift); font-weight: 500; }

/* ── long-form ───────────────────────────────────────────────────────────── */
.wrap.narrow { max-width: 44rem; }
.prose { padding: 3.4rem 0 4rem; font-size: 1.03rem; }
.prose h2 { font-size: 1.42rem; margin: 2.6rem 0 .8rem; }
.prose h3 { font-size: 1.08rem; margin: 1.8rem 0 .5rem; }
.prose p  { margin-bottom: 1.05rem; color: var(--muted); }
.prose p  > em { color: var(--text); font-style: italic; }
.prose ul { margin: 0 0 1.3rem 1.1rem; display: grid; gap: .45rem; }
.prose li { color: var(--muted); line-height: 1.68; }
.prose li::marker { color: var(--moss-lift); }
.prose b  { color: var(--text); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0 1.4rem; }

/* ── closing band ────────────────────────────────────────────────────────── */
.cta-band { background: var(--surface-2); border-top: 1px solid var(--line); }

/* ── hero card sizing ───────────────────────────────────────────────────── */
/* The card carries a licence number and a phone number, both of which are
   worse for breaking. Keep them on one line and let the grid give the column
   the room rather than wrapping "1800 120 009090" in half. */
.hero-card-creds div { align-items: baseline; }
.hero-card-creds span:first-child { min-width: 0; }
.hero-card-foot .big, .hero-card-creds .n { white-space: nowrap; }

@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-card { max-width: 30rem; }
}

/* ── the licence strip ──────────────────────────────────────────────────── */
/* One credential centred in a wide band reads as an orphan. Left-align it
   against the same gutter as everything else and let it grow as licences are
   renewed and reappear. */
.strip-in { justify-content: flex-start; gap: 1.4rem; }
.strip .co { font-family: var(--mono); font-size: .84rem; font-weight: 500;
             letter-spacing: .01em; }

/* ── client marks ─────────────────────────────────────────────────────────
   The artwork came off the company profile and sits on white, so every tile
   carries its own light plate in both themes rather than being keyed out —
   a dozen brands' logos each need their own background treatment to key
   cleanly, and getting one wrong looks worse than a consistent plate.
   Muted at rest so a wall of thirty-six reads as texture, full colour on
   hover for the one somebody is actually looking at. */
.logo-wall, .clients {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.logo-tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  height: 84px; display: grid; place-items: center; padding: .8rem 1rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.logo-tile img {
  max-height: 48px; max-width: 100%; width: auto; object-fit: contain;
  /* Was saturate(.15) opacity(.72), the fashionable treatment, and it made
     half of them unreadable — a client wall nobody can read is decoration
     where the names were the point. */
  filter: saturate(.92); opacity: .94; transition: opacity .2s var(--ease);
}
.logo-tile:hover { border-color: var(--moss); transform: translateY(-2px); }
.logo-tile:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-tile { transition: none; } }

/* ── certificates ─────────────────────────────────────────────────────── */
.cert-shots { display: grid; gap: 1rem;
              grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cert-shot { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
             padding: .7rem; text-align: center; }
.cert-shot img { width: 100%; height: auto; border-radius: 4px; display: block; }
.cert-shot figcaption { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
                        text-transform: uppercase; color: var(--faint); margin-top: .6rem; }