/**
 * Privacy Curtain Co — brand layer.
 * Loaded AFTER tailwind.built.css. Owns identity: display face + tokens +
 * the shape language that separates this brand from the theme's origins.
 */

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/sora-700-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/sora-800-latin.woff2') format('woff2');
}

:root {
    --pcc-primary: #0f766e;   /* deep clinical teal */
    --pcc-primary-dark: #115e59;
    --pcc-ink: #0f172a;
    --pcc-ground: #f6f8f8;    /* cool linen */
    --pcc-accent: #b45309;    /* muted copper — CTAs only, use sparingly */
    --pcc-highlight: #5eead4; /* soft seafoam */

    /* ----------------------------------------------------------------------
       The four below were already in use before they existed.

       .pcc-projects, .pcc-gallery-* and .pcc-figure reference them through
       var(--pcc-rule, #e5e7eb) and friends, at lines 323, 327, 338, 359, 365,
       371, 372. None of the four was ever declared, so every one of those
       resolved to its fallback. Three of the fallbacks were close enough that
       nobody noticed; the fourth was not. --pcc-display falls back to
       `inherit`, which means the "Our work" and gallery headings have been
       rendering in Inter this whole time while every other h2 on the site
       renders in Sora.

       Declaring them changes those headings and tightens the greys. Nothing
       else moves, because nothing else referenced them.
       ---------------------------------------------------------------------- */
    --pcc-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --pcc-rule: #dbe4e3;      /* hairline — a warm-neutral, not Tailwind's blue-grey */
    --pcc-muted: #5b6b77;     /* secondary text; matches the figcaption value below */
    --pcc-surface: #f8fafa;   /* raised panel on --pcc-ground */

    /* ----------------------------------------------------------------------
       Layer scale.

       Before this there were four unrelated z-index systems on one page:
       Tailwind's 10/20/50 in markup, an ad-hoc 60 on the mobile drawer, an
       ad-hoc 1050/1100 on the service-page sub-nav, and 9999/99999 on the
       cortex widgets. Nothing reconciled them, so which element covered which
       was decided by whichever number someone reached for last.

       These tokens are the intended order. Only the declarations this file
       owns are converted to them; a z-index written as a Tailwind utility in
       markup cannot be changed from here, and is noted where it matters.
       ---------------------------------------------------------------------- */
    --pcc-z-sub: 10;          /* in-page sticky bars, below the site chrome */
    --pcc-z-chrome: 50;       /* fixed header, FAB */
    --pcc-z-scrim: 60;        /* dimmer behind an open panel */
    --pcc-z-sheet: 70;        /* the panel itself */
    --pcc-z-dock: 80;         /* the dock: above its own sheet, because it holds
                                 the control that closes it */
    --pcc-z-overlay: 100;     /* true full-screen takeovers: search, chat */

    /* Motion. One curve, one duration pair, so panels agree with each other. */
    --pcc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --pcc-dur-fast: 200ms;
    --pcc-dur-panel: 300ms;
}

/* Display face for headings: the single biggest identity shift. */
h1, h2, h3,
.pcc-display {
    font-family: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.015em;
}

/* Shape language: calmer corners on buttons/CTAs than the origin theme's
   full pills. Circular elements (avatars, step dots, icon bubbles) keep
   rounded-full via their explicit size classes and are not affected. */
a.rounded-full[class*="px-8"],
a.rounded-full[class*="px-6"],
button.rounded-full[class*="px-8"],
button.rounded-full[class*="px-6"] {
    border-radius: 0.625rem;
}

/* ==========================================================================
   Long-form content typography.

   The theme's templates apply `prose prose-lg prose-blue` to authored body
   content — single-r8_service.php:983 among others — but the Tailwind
   typography plugin is not in the compiled stylesheet, so those classes match
   nothing. Every service page was rendering its headings, lists and tables as
   undifferentiated text: the content was correct and completely unstyled.

   Defined here rather than by rebuilding Tailwind with the plugin, because the
   class is already on the markup in a dozen templates and this fixes all of
   them at once without a build step.
   ========================================================================== */

.prose {
    color: #374151;
    line-height: 1.75;
}

.prose > * + * { margin-top: 1.25em; }

.prose h2 {
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.6em;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #0f172a;
    margin-top: 2.25em;
    margin-bottom: 0.75em;
    text-wrap: balance;
}
.prose > h2:first-child { margin-top: 0; }

.prose h3 {
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    margin-top: 1.75em;
    margin-bottom: 0.5em;
}

.prose h4 {
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5em;
    margin-bottom: 0.4em;
}

.prose p { margin-top: 1.1em; margin-bottom: 1.1em; }
.prose strong { color: #0f172a; font-weight: 700; }
.prose em { font-style: italic; }

.prose a {
    color: #0f766e;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose a:hover { color: #115e59; }

.prose ul,
.prose ol {
    margin-top: 1.1em;
    margin-bottom: 1.1em;
    padding-left: 1.5em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 0.25em; }
.prose li::marker { color: #0f766e; }

/* Tables are how the specification content earns its place, so they get real
   treatment rather than inheriting the browser default. The wrapper scrolls
   instead of the page: a five-column spec table must not make the whole
   document slide sideways on a phone. */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.925em;
    margin-top: 1.75em;
    margin-bottom: 1.75em;
    display: block;
    overflow-x: auto;
}
.prose thead { background: #e3eeec; }
.prose th {
    text-align: left;
    font-weight: 700;
    color: #0f172a;
    padding: 0.7em 0.9em;
    border-bottom: 2px solid #0f766e;
    white-space: nowrap;
}
.prose td {
    padding: 0.7em 0.9em;
    border-top: 1px solid #e5e7eb;
    vertical-align: top;
}
.prose tbody tr:nth-child(even) { background: #f8fafa; }

.prose blockquote {
    border-left: 4px solid #0f766e;
    background: #f3f8f7;
    padding: 0.9em 1.2em;
    margin: 1.5em 0;
    border-radius: 0 6px 6px 0;
}
.prose blockquote p { margin: 0.3em 0; }

.prose hr { border: 0; border-top: 1px solid #e5e7eb; margin: 2.5em 0; }

.prose code {
    background: #e3eeec;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ==========================================================================
   Utilities the compiled Tailwind does not contain.

   tailwind.built.css is a fixed artefact: its JIT emitted only the classes
   present in the source when it was built. Any class introduced afterwards
   matches nothing — no error, no warning, the element simply ignores it.
   That is exactly how the site logo shipped to production 401px wide: the
   markup said `h-9`, and `h-9` had never been compiled.

   Rather than rebuild Tailwind, the handful of classes we introduced are
   defined here, where they are under our control and always load.
   ========================================================================== */

.h-9  { height: 2.25rem; }
.top-28 { top: 7rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.text-\[0\.65rem\] { font-size: 0.65rem; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.pb-safe-area { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (min-width: 768px) {
    .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
    .md\:p-7  { padding: 1.75rem; }
}

/* The brand mark, sized here rather than by a utility class.
   The header logo is not a place to depend on whether a particular Tailwind
   size survived the last build. */
.pcc-mark {
    display: block;
    width: auto;
    height: 2.25rem;
    max-width: 100%;
}
.pcc-mark--sm { height: 2rem; }

/* Figures in guide content. Photographs show the activity; the drawn SVG
   diagrams carry the dimensions, so both get the same frame and caption
   treatment and the reader is never left guessing which is authoritative. */
.pcc-figure {
    margin: 2em 0;
}
.pcc-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #dde5e4;
    background: #fff;
}
.pcc-figure figcaption {
    margin-top: 0.7em;
    font-size: 0.9em;
    line-height: 1.6;
    color: #5b6b77;
    border-left: 3px solid #0f766e;
    padding-left: 0.85em;
}

/* The help box that closes a guide. Two ways out of a page that has just
   asked the reader to do arithmetic: ask us, or hand it to us entirely. */
.pcc-help {
    margin: 3em 0 1em;
    padding: 2rem;
    background: #f3f8f7;
    border: 1px solid #d5e5e2;
    border-radius: 14px;
}
.pcc-help__heading {
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #0f172a;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.pcc-help__intro {
    margin: 0 0 1.5rem;
    color: #4a5c5a;
    max-width: 46rem;
}
.pcc-help__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}
.pcc-help__card {
    background: #fff;
    border: 1px solid #dde5e4;
    border-radius: 10px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
}
.pcc-help__card--accent { border-top: 3px solid #0f766e; }
.pcc-help__card h3 {
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.pcc-help__card p {
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #5b6b77;
}
.pcc-help__note {
    font-size: 0.85rem !important;
    font-weight: 600;
    color: #0f766e !important;
}
.pcc-help__cta {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    background: #0f766e;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none !important;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pcc-help__cta:hover {
    background: #115e59;
    color: #fff !important;
    transform: translateY(-1px);
}
.pcc-help__cta + .pcc-help__cta { margin-top: 0.6rem; }
.pcc-help__cta--ghost {
    background: #fff;
    color: #0f766e !important;
    border: 1px solid #0f766e;
}
.pcc-help__cta--ghost:hover {
    background: #e3eeec;
    color: #115e59 !important;
}

/* ---------------------------------------------------------------------------
   Project photography — the "Our work" block on a service page, and the
   gallery page. Written here rather than as Tailwind utilities because the
   build is a pre-compiled artifact: a class that was not present at build
   time silently does nothing.
   --------------------------------------------------------------------------- */

.pcc-projects {
    margin: 3.5rem 0 1rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--pcc-rule, #e5e7eb);
}
.pcc-projects h2,
.pcc-gallery-group h2 {
    font-family: var(--pcc-display, inherit);
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 .35rem;
}
.pcc-gallery-group h2 a { color: inherit; text-decoration: none; }
.pcc-gallery-group h2 a:hover { color: var(--pcc-primary, #0f766e); }

.pcc-projects-lede,
.pcc-gallery-lede {
    margin: 0 0 1.75rem;
    color: var(--pcc-muted, #4b5563);
}

.pcc-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.pcc-project { margin: 0; }
.pcc-project img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem;
    background: #f3f4f6;   /* holds the space while the file is still arriving */
}
.pcc-project figcaption {
    margin-top: .6rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pcc-muted, #4b5563);
}

.pcc-gallery-page { max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.pcc-gallery-head h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 .5rem; }
.pcc-gallery-group { margin-bottom: 3.25rem; }
.pcc-gallery-empty { color: var(--pcc-muted, #4b5563); }

.pcc-gallery-cta {
    margin-top: 1rem;
    padding: 2rem;
    border-radius: .75rem;
    background: var(--pcc-surface, #f8fafc);
    border: 1px solid var(--pcc-rule, #e5e7eb);
}
.pcc-gallery-cta h2 { margin: 0 0 .35rem; font-size: 1.35rem; }
.pcc-gallery-cta p  { margin: 0 0 1.1rem; color: var(--pcc-muted, #4b5563); }
.pcc-btn {
    display: inline-block;
    padding: .7rem 1.35rem;
    border-radius: .5rem;
    background: var(--pcc-primary, #0f766e);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.pcc-btn:hover { filter: brightness(1.08); }

@media (min-width: 768px) {
    .pcc-gallery-head h1 { font-size: 2.75rem; }
}

/* ==========================================================================
   GLOBAL CHROME — corrections that do not need markup.

   Everything below overrides rules that live in other stylesheets, mostly
   inc/mod-global-cortex/assets/cortex-glass.css. That file is enqueued at
   wp_enqueue_scripts, so it prints inside wp_head() -- which header.php:106
   places BEFORE both tailwind.built.css and this file. Equal specificity,
   later in the cascade: these win, without !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The quote button stopped covering the menu.

   .r8-fab-trigger carries z-index: 9999 (cortex-glass.css:221). The mobile
   navigation drawer carries z-[60]. 9999 > 60, and no rule anywhere hid the
   button while the drawer was open, so on every page of the site the floating
   "Get a Free Quote" pill sat on top of the open menu -- over the navigation,
   at the bottom of the screen, where a thumb is.

   Nobody had reported it because the two elements that DO get out of the way
   both do it by hand: sticky-hybrid-nav.php:163 hides .r8-sticky-nav on
   body.mobile-menu-active, and that rule ships only on service pages. There
   was no scale, only a list of exceptions.

   Two changes. The button joins the chrome layer, so it can no longer outrank
   a panel by accident; and it is hidden outright while a panel is open, which
   is the honest statement -- a call to action behind a scrim is not a call to
   action, it is an obstacle.
   -------------------------------------------------------------------------- */
.r8-fab-trigger {
    z-index: var(--pcc-z-chrome);
}

body.mobile-menu-active .r8-fab-trigger {
    display: none !important;
}

/* --------------------------------------------------------------------------
   1b. And on a phone it is gone entirely, because the dock says the same thing.

   cortex-glass.css:305-316 moves the pill to bottom:5.5rem on mobile and
   centres it -- a position chosen to clear the old three-tab bottom bar. Both
   pointed at /quote/. The dock now carries that action as its widest control,
   permanently, so the floating copy is a second button for the same URL sitting
   24px above the first.

   Desktop keeps it: there is no dock above 768px, and the header CTA scrolls
   away with the header.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .r8-fab-trigger {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   2. The quote button became readable.

   cortex-glass.css sets color:#111827 on the pill, its label and its icon
   (lines 223, 239, 249), over a #14857C -> #0F766E gradient. The comment on
   line 208 still describes that gradient as "Vibrant Glossy Gold/Amber",
   which is what it used to be: near-black on gold is legible, and the colour
   survived the retint while the text colour did not.

   Near-black on mid-teal measures about 3:1. WCAG 2.2 AA wants 4.5:1 for the
   1rem/800 label. White on the same gradient measures about 4.6:1.
   -------------------------------------------------------------------------- */
.r8-fab-trigger,
.r8-fab-trigger:hover,
.r8-fab-trigger svg,
.r8-fab-text {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. A visible focus ring, because Tailwind cannot give us one.

   tailwind.built.css contains zero focus-visible: variants -- the safelist in
   build/tailwind.config.js carries hover on colours and md on grid, and
   nothing else. So `focus-visible:ring-2` in markup is not a weak style, it
   is no style, and it fails silently. Written here it always applies.

   :focus-visible rather than :focus, so a mouse click on a button does not
   leave a ring behind; keyboard and other non-pointer input still get one.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--pcc-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Touch targets.

   min-h-[44px], w-11 and h-11 are all absent from the compiled artifact, so
   the 44px floor cannot be expressed as a utility. .pcc-tap is the hook.
   -------------------------------------------------------------------------- */
.pcc-tap {
    min-height: 44px;
    min-width: 44px;
}

/* --------------------------------------------------------------------------
   5. Reduced motion.

   The theme had no prefers-reduced-motion handling at all, and shipped four
   animations that never stop: r8-pulse-gold on the quote pill (a 3s scale and
   glow loop, cortex-glass.css:300), animate-pulse on the mobile phone icon and
   on the chat unread badge, and glow-pulse on the desktop phone pill. For a
   visitor with vestibular sensitivity that is not decoration, it is a page
   that will not sit still -- and this site's readers are working through
   dimension tables.

   motion-reduce: has zero coverage in the compiled artifact, so this is the
   only place the guard can live. Scoped to animation and transition rather
   than a blanket `all` so that scroll-linked layout is untouched.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* These three exist only to move. Stop them rather than run them fast. */
    .r8-fab-trigger,
    .animate-pulse,
    .animate-ping {
        animation: none !important;
    }
}

/* ==========================================================================
   THE MOBILE DOCK AND ITS SHEET.

   The markup is in footer.php and carries no Tailwind utilities on purpose:
   tailwind.built.css is a fixed artifact and a class it has not seen renders
   nothing in production, with no error and no warning, while the local runtime
   compiler supplies it and hides the failure. A component written entirely in
   real CSS cannot fail that way, and this file loads after the utilities so it
   never loses a cascade fight either.

   Mobile only. The desktop header is unchanged and keeps its own nav.
   ========================================================================== */

.pcc-dock,
.pcc-sheet,
.pcc-scrim {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Above 768px none of this exists. !important because Alpine's x-show writes
   an inline display, and an inline style would otherwise win here. */
@media (min-width: 768px) {
    .pcc-dock,
    .pcc-sheet,
    .pcc-scrim {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   The dock.

   64px plus whatever the device reserves at the bottom edge. Two tabs and one
   filled action: the tabs take their content width, the action takes the rest,
   so on any handset width the thing you are most likely to want is the biggest
   target on the screen and sits under the thumb.
   -------------------------------------------------------------------------- */
.pcc-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--pcc-z-dock);
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    height: calc(4rem + env(safe-area-inset-bottom, 0px));
    padding: 0 0.75rem env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--pcc-rule);
}

.pcc-dock__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 0 0 auto;
    min-width: 56px;
    min-height: 44px;          /* min-h-[44px] is not in the artifact. */
    padding: 0 0.5rem;
    background: none;
    border: 0;
    color: var(--pcc-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--pcc-dur-fast) ease;
}

.pcc-dock__tab:hover { color: var(--pcc-ink); }

.pcc-dock__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.pcc-dock__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* The current page, stated once, as an attribute.

   The bar this replaced set the active colour from PHP because a static class
   and a bound :class for the same property fought over source order and the
   highlight silently went grey on the homepage. An attribute selector cannot
   have that argument with anything. */
.pcc-dock__tab[aria-current="page"] {
    color: var(--pcc-primary);
    position: relative;
}

.pcc-dock__tab[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--pcc-primary);
    border-radius: 0 0 2px 2px;
}

.pcc-dock__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 44px;
    margin: 0.625rem 0;
    padding: 0 1rem;
    border-radius: 0.625rem;   /* the shape language already set for CTAs */
    background: var(--pcc-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: background var(--pcc-dur-fast) ease;
}

.pcc-dock__cta:hover,
.pcc-dock__cta:focus {
    background: var(--pcc-primary-dark);
    color: #fff;
}

/* --------------------------------------------------------------------------
   The scrim and the sheet.

   The sheet rises from the bottom edge and rests on top of the dock. It is
   content-height, capped, so a short menu is a short sheet rather than a
   full-screen takeover -- which is the single biggest structural difference
   from the drawer it replaces. That drawer was `fixed inset-0` white and slid
   in from the right; a right-to-left slide is stack grammar, it promises a
   Back button, and this menu has no levels to go back through.
   -------------------------------------------------------------------------- */
.pcc-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--pcc-z-scrim);
    background: rgba(15, 23, 42, 0.5);
}

.pcc-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    z-index: var(--pcc-z-sheet);
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    max-height: 78dvh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 48px -24px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.pcc-sheet__grip {
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    margin: 0.625rem auto 0.25rem;
    border-radius: 2px;
    background: var(--pcc-rule);
}

.pcc-sheet__scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 1.25rem 1.5rem;
}

/* Section labels. <p>, not a heading -- the same decision the mega menu made
   deliberately, so a navigation panel does not inject its labels into the
   heading outline of every page on the site. */
.pcc-sheet__label {
    margin: 1.5rem 0 0.625rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pcc-muted);
}

.pcc-sheet__scroll > .pcc-sheet__label:first-child { margin-top: 0.5rem; }

/* Industries: the buyer's first sentence, so it gets the only cards here. */
.pcc-sheet__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.pcc-sheet__card {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--pcc-rule);
    border-left: 3px solid var(--pcc-primary);
    border-radius: 0.625rem;
    background: var(--pcc-surface);
    color: var(--pcc-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

.pcc-sheet__card:hover { background: #eef4f3; }

.pcc-sheet__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pcc-sheet__group + .pcc-sheet__group { margin-top: 0.25rem; }

.pcc-sheet__sub {
    margin: 0;
    padding: 0 0 0 0.875rem;
    border-left: 1px solid var(--pcc-rule);
    list-style: none;
}

/* Rows. No chevrons anywhere: a chevron promises something behind the row, and
   in a flat index there is nothing behind anything. */
.pcc-sheet__row {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    color: var(--pcc-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
}

.pcc-sheet__row:hover { color: var(--pcc-primary); }

.pcc-sheet__row--lead {
    font-family: var(--pcc-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    min-height: 48px;
}

.pcc-sheet__row--sub {
    color: var(--pcc-muted);
    min-height: 44px;
}

.pcc-sheet__row--sub:hover { color: var(--pcc-primary); }

.pcc-sheet__row[aria-current="page"] {
    color: var(--pcc-primary);
    font-weight: 600;
}

.pcc-sheet__card[aria-current="page"] {
    border-color: var(--pcc-primary);
    background: #eef4f3;
}

.pcc-sheet__contact {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pcc-rule);
}

.pcc-sheet__contact-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--pcc-rule);
    border-radius: 0.625rem;
    background: #fff;
    color: var(--pcc-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.pcc-sheet__contact-btn:hover {
    border-color: var(--pcc-primary);
    color: var(--pcc-primary);
}

/* --------------------------------------------------------------------------
   Transitions. Named classes rather than Tailwind's, because x-transition
   applies whatever class it is given and none of the utility equivalents
   (duration-*, ease-[cubic-bezier(...)]) can be trusted to exist in the
   artifact. The reduced-motion block above neutralises all of them.
   -------------------------------------------------------------------------- */
.pcc-rise {
    transition: transform var(--pcc-dur-panel) var(--pcc-ease-out);
    will-change: transform;
}
.pcc-rise--down { transform: translateY(100%); }
.pcc-rise--up   { transform: translateY(0); }

.pcc-fade { transition: opacity var(--pcc-dur-fast) linear; }
.pcc-fade--out { opacity: 0; }
.pcc-fade--in  { opacity: 1; }

/* --------------------------------------------------------------------------
   MARKETING STATS -- no divider on the outer edge

   The stat cells draw a divider as a left border on anything that does not
   start a row, which is correct only while "a row" is one fixed number of
   columns. The four-stat grid is md:grid-cols-2 lg:grid-cols-4, so between
   768px and 1023px the third stat starts the second row -- and its left
   border hangs on the outside-left of the whole block, attached to nothing.
   Confirmed by pixel scan at 900px: a hairline at the grid's left edge on
   the second row, absent on the first.

   Tailwind cannot express the exception. It needs that one cell bordered
   from lg up only, and lg:border-l is not in the compiled artifact -- the
   sheet is a fixed build and a class it lacks renders nothing in production.
   nth-child states the same rule directly and does not depend on the build.

   Written as "the cell that starts a row has no left border" rather than as
   a fix for the third cell, so it stays true if the grid is re-columned.
   No !important: this is (0,2,0) against Tailwind's (0,1,0) .md\:border-l,
   so it wins on specificity and does not rely on brand.css loading last.

   Scoped to the two-column band. Below md the grid is one column and no
   border is applied; from lg up four columns is the count the PHP already
   assumes, and that case is already right.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .pcc-stats--4 > :nth-child(2n + 1) { border-left-width: 0; }
}