/*
 * services.css — page-specific styles for services.html.
 *
 * Extracted from an inline <style> block in services.html for caching and
 * HTML-payload reduction. Loaded after css/style.css so these rules can
 * override shared component styling where the services page needs to.
 *
 * Scope:
 *   - Split-Hero page overrides (.home-hero__*)
 *   - Service modal base + per-modal styling (.svc-modal*)
 *   - CTA banner page overrides (.cta-banner)
 *   - Service brief / split-brief cards (.svc-brief*)
 *   - Technology & Service Partners (.partners*)
 *   - "What We Do" service-card overrides (#services-overview .service-card)
 */

    /* ═══════════════════════════════════════
       SERVICES PAGE — SPLIT HERO (shared core in css/style.css)
       Per the "Hero Section Standard" in CLAUDE.md, the home page hero
       (index.html) is the canonical reference for spacing, font color,
       and other styling details. Page-specific content (title, copy,
       button labels, credential labels, photo) stays unique to this page.
       ═══════════════════════════════════════ */
    .home-hero__grid {
      display: grid;
      /* Single column, matching the home hero — the photo is no longer a
         grid column; it pins to the section's right half (see
         .home-hero__bleed below). */
      grid-template-columns: 1fr;
    }
    /* ── Hero photo — full-bleed feathered, mirroring the home hero
       (design handoff "Hero — Image Treatments", Option 2). The photo
       pins to the section's right half and dissolves into the navy via
       mask gradients (fade-in from the left over 24%, fade-out at the
       bottom past 78%), with a navy wash over the dissolve so the
       headline stays legible. ── */
    .home-hero__content { position: relative; max-width: 690px; }
    .home-hero__bleed {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      /* Above the section's grid overlay (z 0); .container (z 1) comes
         later in the DOM so text still paints on top. */
      z-index: 1;
      pointer-events: none;
    }
    .home-hero__bleed-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 60% 40%;
      display: block;
      -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 24%),
        linear-gradient(to bottom, #000 78%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, transparent 0%, #000 24%),
        linear-gradient(to bottom, #000 78%, transparent 100%);
      mask-composite: intersect;
    }
    .home-hero__bleed-fade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(11,29,69,0.55) 0%, rgba(11,29,69,0) 34%);
      pointer-events: none;
    }
    .home-hero__credentials {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 20px;
      padding-top: 18px;
      /* flex-wrap kept (not in home hero) because this page has 4 credentials
         vs home's 2 — safety net so they wrap to a second line on narrow
         viewports instead of overflowing the column. */
      flex-wrap: wrap;
    }
    .home-hero__cred {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      /* Muted slate at rest, brand teal on hover — trust-strip styling
         from the design handoff (Hero — Image Treatments); the hover
         tint is decorative since the row isn't interactive. Mirrors the
         home page hero. */
      color: rgba(160, 178, 206, 0.82);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      white-space: nowrap;
      cursor: default;
      transition: color 0.2s ease;
    }
    .home-hero__cred:hover {
      color: var(--teal);
    }
    /* Services-page divider override matching home (global rule in
       css/style.css is 2px x 20px at rgba(255,255,255,0.15)). Design
       handoff trust-strip hairline, thickened to 2px wide. */
    .home-hero__cred-divider {
      width: 2px;
      height: 13px;
      background: rgba(255, 255, 255, 0.22);
    }
    /* Hero glow customizations — mirror the home page hero per CLAUDE.md.
       - Top-right circle glow removed; ::before repurposed as the
         grid-line layer, radially masked (per the design handoff's
         bg-grid) so the grid fades out toward the lower-right and never
         shows behind the full-bleed photo's feathered edges.
       - All glows removed: ::after (which carried the bottom-edge teal
         ellipse glow) is disabled entirely. */
    .home-hero::before {
      display: block;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: auto;
      border-radius: 0;
      background:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
      mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
    }
    /* When the full-bleed photo is showing (>1100px), also clamp the grid
       horizontally so it ends around the section midpoint and never
       reaches the photo's feathered edge — same values as the home hero. */
    @media (min-width: 1101px) {
      .home-hero::before {
        -webkit-mask-image:
          radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
          linear-gradient(to right, #000 45%, transparent 53%);
        -webkit-mask-composite: source-in;
        mask-image:
          radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
          linear-gradient(to right, #000 45%, transparent 53%);
        mask-composite: intersect;
      }
    }
    .home-hero::after {
      display: none;
    }
    /* Below ~1100px the text column would run into the photo's opaque
       zone, so the bleed hides and the hero goes text-only — same
       breakpoint as the home hero. */
    @media (max-width: 1100px) {
      .home-hero__bleed { display: none; }
    }
    @media (max-width: 900px) {
      .home-hero__title { font-size: 38px; }
      /* Drop the forced headline break on small screens — the narrow
         column wraps naturally there (same pattern as the home hero). */
      .home-hero__title br { display: none; }
    }

    /* .svc-modal* base styling now lives in css/style.css (shared
       between services.html and industries.html). Page-level overrides
       for these modals, if any, can still be added here. */

    /* .cta-banner narrow width + bottom-edge teal glow now live in css/style.css
       on .cta-banner.cta-banner--with-image and its ::after — shared site-wide. */

    /* ═══════════════════════════════════════
       SERVICE BRIEF — SPLIT BRIEF CARD (Audits)
       ═══════════════════════════════════════ */
    .svc-brief {
      padding: 64px 64px 80px;
      background: #d6ece9;
      position: relative;
      overflow: hidden;
    }
    .svc-brief--plain {
      background: #fff;
    }
    /* Experiment: Financial Statement Audits + Agreed-Upon Procedures
       section backdrops in the Additional Info button's resting teal
       (#5fc7a8, .btn--primary). Other service sections keep the soft
       turquoise above. */
    #audits.svc-brief,
    #aup.svc-brief {
      background: #5fc7a8;
    }
    /* Experiment: Financial Statement Compilations + Internal Controls
       Consulting section backdrops in a neutral (achromatic) grey — no
       green/blue cast, unlike the site's tinted gray tokens. */
    #compilations.svc-brief,
    #internal-controls.svc-brief {
      background: #e6e6e6;
    }
    .svc-brief__card {
      max-width: 1240px;
      margin: 0 auto;
      background: #fff;
      border: none;
      border-radius: 16px;
      box-shadow:
        0 12px 36px rgba(11, 27, 61, 0.10),
        0 -4px 16px rgba(11, 27, 61, 0.10),
        0 0 16px rgba(11, 27, 61, 0.10);
      display: grid;
      grid-template-columns: 380px 1fr;
      /* Fixed height (not min-height) so every service panel renders at
         the same height. Set tall enough to accommodate the largest
         panel's combined prose + CTA row (the CTA row is ~170px tall
         because the firm logo sits above the schedule link). Shorter
         panels stretch to match via .svc-brief__cta-row's margin-top: auto. */
      height: 600px;
      overflow: hidden;
    }
    .svc-brief__left {
      background: linear-gradient(145deg, var(--navy) 0%, var(--navy-dark) 100%);
      color: #fff;
      padding: 44px 40px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    .svc-brief__left::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
    }
    .svc-brief__left::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 280px;
      background:
        radial-gradient(circle 280px at left bottom, rgba(43, 191, 154, 0.30) 0%, transparent 65%),
        radial-gradient(circle 280px at center bottom, rgba(43, 191, 154, 0.30) 0%, transparent 65%),
        radial-gradient(circle 280px at right bottom, rgba(43, 191, 154, 0.30) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    .svc-brief__kicker {
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }
    .svc-brief__title {
      font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.025em;
      color: #fff;
      margin: 0 0 22px;
      position: relative;
      z-index: 1;
    }
    .svc-brief__back-wrap {
      margin-top: auto;
      padding-top: 32px;
      position: relative;
      z-index: 1;
    }
    .svc-brief__back {
      /* Matches the softened-teal link pattern set by .svc-card__link on the
         homepage (the "Click to learn more →" links). Default soft, hover
         deepens to brand --teal for stronger interaction feedback. */
      color: #5fc7a8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      text-decoration: none;
      transition: color var(--transition);
    }
    .svc-brief__back:hover { color: var(--teal); }
    .svc-brief__right {
      padding: 44px 48px;
      display: flex;
      flex-direction: column;
    }
    .svc-brief__eyebrow {
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 16px;
    }
    .svc-brief__p {
      font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
      font-size: 16px;
      line-height: 1.65;
      color: #5A6B85;
      margin: 0 0 16px;
    }
    .svc-brief__p:last-of-type { margin: 0 0 28px; }
    .svc-brief__cta-row {
      margin-top: auto;
      display: flex;
      /* flex-end aligns the "Additional Info" button bottom with the
         schedule link bottom inside the schedule-wrap (logo sits above
         the link, so the wrap is taller than the button). Without this
         the button would shift up to center against the taller wrap. */
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    /* Right-side column stack: firm-symbol logo above the schedule link.
       align-items: center centers the logo with the link text (the wrap
       itself stays right-anchored in the CTA row via justify-content). */
    .svc-brief__schedule-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }
    /* Decorative logo above the schedule link. Natural colors (no
       filter) at low opacity so it reads as a translucent watermark
       against the white panel. */
    .svc-brief__schedule-logo {
      width: 130px;
      height: auto;
      opacity: 0.30;
      pointer-events: none;
      user-select: none;
    }
    .svc-brief__schedule {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.005em;
      color: var(--teal);
      text-decoration: none;
      transition: color 0.15s;
    }
    .svc-brief__schedule:hover { color: var(--teal-hover); }
    @media (max-width: 960px) {
      .svc-brief { padding: 48px 32px 60px; }
      .svc-brief__card { grid-template-columns: 1fr; min-height: auto; }
      .svc-brief__left { padding: 36px 32px; }
      .svc-brief__back-wrap { padding-top: 24px; }
      .svc-brief__right { padding: 36px 32px; }
    }
    @media (max-width: 640px) {
      .svc-brief { padding: 40px 20px 56px; }
      .svc-brief__title { font-size: 32px; }
      .svc-brief__left, .svc-brief__right { padding: 28px; }
    }

    /* ── Technology & Service Partners ── */
    .partners {
      background: var(--white);
      padding: 12px 0 16px;
    }
    .partners__label {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 32px;
    }
    .partners__grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    .partner-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 91px;
      padding: 0 24px;
    }
    .partner-logo img {
      height: 52px;
      width: auto;
      display: block;
    }
    /* logo 7 (Microsoft) has built-in whitespace padding inside its PNG,
       so the visible mark reads much smaller than the others at the base
       52px height. Scale it up so the visible mark appears proportional. */
    .partner-logo img[src*="logo 7"] {
      height: 120px;
    }
    /* logo 4 (Inflo) + logo 5 (Claude) render slightly tall vs the others
       at the base 52px height; trim 10px each so the row reads balanced. */
    .partner-logo img[src*="logo 4"],
    .partner-logo img[src*="logo 5"] {
      height: 42px;
    }

    /* ── What We Do panel headers — match the section's main header font ── */
    #services-overview .service-card__name {
      font-family: 'DM Serif Display', Georgia, serif;
      font-weight: 400;
      font-size: 17px;
    }
    /* Make every What We Do panel the same exact size regardless of content. */
    #services-overview .services-grid {
      align-items: stretch;
      grid-auto-rows: 1fr;
    }
    /* ── What We Do panels — match the home page service-card style ── */
    #services-overview .service-card {
      height: 100%;
      border: none;
      overflow: hidden;
      box-shadow:
        0 -6px 18px rgba(11, 27, 61, 0.06),
        0 12px 32px rgba(11, 27, 61, 0.06),
        0 2px 8px rgba(11, 27, 61, 0.06);
    }
    /* No teal top bar on hover for this page's What We Do panels — kills
       the shared .service-card::before banner from css/style.css. The
       hover lift + teal glow shadow below are kept. */
    #services-overview .service-card::before {
      display: none;
    }
    #services-overview .service-card:hover {
      border: none;
      box-shadow: 0 18px 44px rgba(43, 191, 154, 0.28), 0 4px 12px rgba(43, 191, 154, 0.14);
      transform: translateY(-3px);
    }