/* SolutionHub brand layer on top of Aventis style.css.
   Colors come from the SolutionHub logo. Loaded last so it wins over the theme. */
:root {
  --primary-color1: #006afc;
  --primary-color1-opc: 0, 106, 252;
  --primary-color2: #003792;
  --primary-color2-opc: 0, 55, 146;
}
/* Theme sets logo width per breakpoint (148/130/120px); keep that, let height follow the aspect ratio. */
header.style-1 .company-logo img,
header.style-1 .mobile-logo-area .mobile-logo-wrap img,
.footer-section .footer-main-wrap .company-logo-area .company-logo img { height: auto; }
/* Staging-only draft banner under the breadcrumb */
.draft-note { background: #fff4c7; border-left: 3px solid #9a5b00; padding: 12px 16px; font-size: 14px; margin: 24px 0 0; font-family: var(--font-poppins); }

/* Lime (#ccf664) was a light accent carrying dark text. Brand blue is dark, so text on it turns white. */
.primary-btn1.two, .primary-btn2.two, .primary-btn3.two,
.home2-banner-bottom-cta-area, .home2-banner-bottom-cta-area h2, .home2-banner-bottom-cta-area h3,
.home2-banner-bottom-cta-area h4, .home2-banner-bottom-cta-area h5, .home2-banner-bottom-cta-area p,
.home2-banner-bottom-cta-area span,
.tax-calculator-wrapper .tax-calculator-form-area .tax-tabs .single-tab.active,
.home1-why-choose-section .why-choose-step-area .step-list li,
.right-sidebar-menu .sidebar-content-wrap .contact-area .contact-title,
.home1-contact-section .contact-wrapper .contact-area .contact-list .single-contact .contact-title,
.solution-dt-contact-section .contact-info-bar .info-item span,
.solution-dt-contact-section .solution-dt-contact-content-wrap .solution-dt-contact-content .contact-area .contact-title,
.solution-dt-benefits-section .solution-dt-benefits-content-wrap .section-title .rating-area .rating-batch,
.home2-banner-bottom-cta-area .banner-cta-wrap > span { color: #fff !important; }
.primary-btn1.two svg, .primary-btn2.two svg, .primary-btn3.two svg { fill: #fff !important; }

/* Home topbar strip: the theme's lime with dark text (user request, 19 Oct 2026; the one non-blue accent). */
.topbar-area.style-3 { background-color: #ccf664; }
.topbar-area.style-3, .topbar-area.style-3 * { color: #1c2333 !important; }
.topbar-area.style-3 svg, .topbar-area.style-3 svg * { fill: #1c2333 !important; }

/* Markdown body inside the theme's terms-page layout. Mirrors .terms-list typography from style.css. */
:is(.terms-page, .sh-body) .prose h2 { color: var(--title-color); font-family: var(--font-inteTight); font-weight: 500; font-size: 35px; line-height: 1.2; margin: 60px 0 25px; }
:is(.terms-page, .sh-body) .prose h2:first-child { margin-top: 0; }
:is(.terms-page, .sh-body) .prose h3 { color: var(--title-color); font-family: var(--font-inteTight); font-weight: 500; font-size: 24px; line-height: 1.3; margin: 40px 0 16px; }
:is(.terms-page, .sh-body) .prose p , :is(.terms-page, .sh-body) .prose li { color: var(--text-color); font-family: var(--font-poppins); font-size: 16px; line-height: 26px; }
:is(.terms-page, .sh-body) .prose p { margin-bottom: 22px; }
:is(.terms-page, .sh-body) .prose ul , :is(.terms-page, .sh-body) .prose ol { padding-left: 22px; margin: 0 0 22px; }
:is(.terms-page, .sh-body) .prose li { margin-bottom: 10px; }
:is(.terms-page, .sh-body) .prose li::marker { color: var(--primary-color1); }
:is(.terms-page, .sh-body) .prose a { color: var(--primary-color1); text-decoration: underline; text-underline-offset: 3px; }
:is(.terms-page, .sh-body) .prose strong { color: var(--title-color); font-weight: 600; }
:is(.terms-page, .sh-body) .prose table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-family: var(--font-poppins); font-size: 15px; }
:is(.terms-page, .sh-body) .prose th , :is(.terms-page, .sh-body) .prose td { border: 1px solid var(--borders-color); padding: 10px 12px; text-align: left; }
@media (max-width: 767px) { :is(.terms-page, .sh-body) .prose h2 { font-size: 26px; margin-top: 44px; } }

/* Google reviews in the home3 testimonial card: the logo slot was sized for wide partner logos. */
.home3-testimonial-section .testimonial-card3 .testimonial-content-wrap .author-area .author-content .logo { width: 26px; height: 26px; }
.home3-testimonial-section .testimonial-card3 .testimonial-content-wrap .testimonial-content .revenue-area h2 { color: #fbbc04; letter-spacing: 2px; }
.testimonial-card3 blockquote { margin: 0; }

/* Inner-page header (home1 white variant): light/dark logo pair and right sidebar logo keep the theme widths. */
.home1-header .company-logo img,
.right-sidebar-menu .company-logo img { height: auto; }

/* Client logos come in mixed shapes (wide wordmarks, square badges): fit each into the theme's 170px slot. */
.partner-section.two .partner-wrap .single-partner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.partner-section.two .partner-wrap .single-partner .partner-location { font-size: 13px; line-height: 1; color: var(--text-color); }
.partner-section.two .partner-wrap .single-partner:has(.partner-location) img { height: 50px; }
.partner-section.two .partner-wrap .single-partner img { width: auto; max-width: 170px; height: 58px; object-fit: contain; }
@media (max-width: 1199px) { .partner-section.two .partner-wrap .single-partner img { max-width: 155px; } }
@media (max-width: 576px) { .partner-section.two .partner-wrap .single-partner img { max-width: 140px; height: 48px; } }
.partner-section .rating-area .content .star li i { color: #fbbc04; }
/* 16 client cards: 4 per row on desktop (the theme's own tablet layout) so every row is full. */
@media (min-width: 992px) { .partner-section.two .partner-wrap { grid-template-columns: repeat(4, 1fr); } }

/* Category hub service cards: the theme ships a placeholder background image; use a site photo under the brand gradient. */
.home1-service-section {
  background-image: linear-gradient(180deg, #003792 26.99%, rgba(0, 55, 146, 0.82) 144.68%), url(/assets/img/sh/team-desk-overhead.webp);
}

/* =====================================================================================================
   Inner-page banner (Breadcrumb.astro). Daylight photos with the subject on the right: a charcoal fade (deep
   page accent at the far left) from
   the left keeps the white H1 and breadcrumb at AA contrast while the right side stays bright. Below md the
   photo is cropped to its center, so the overlay gets stronger and even.
   ===================================================================================================== */
.breadcrumb-section.sh-banner {
  background-image: linear-gradient(90deg, color-mix(in srgb, rgba(var(--acc-deep-rgb, 31, 36, 48), 0.9) 40%, rgba(var(--sh-charcoal-rgb), 0.9)) 0%, rgba(var(--sh-charcoal-rgb), 0.66) 38%, rgba(var(--sh-charcoal-rgb), 0.14) 70%, rgba(0, 0, 0, 0) 100%), var(--banner-img);
  background-position: right center;
  background-size: cover;
}
@media (max-width: 767px) {
  .breadcrumb-section.sh-banner {
    background-image: linear-gradient(180deg, rgba(var(--sh-charcoal-rgb), 0.74) 0%, color-mix(in srgb, rgba(var(--acc-deep-rgb, 31, 36, 48), 0.84) 40%, rgba(var(--sh-charcoal-rgb), 0.84)) 100%), var(--banner-img);
    background-position: center;
  }
}

/* =====================================================================================================
   Site palette (v4, 19 Oct 2026): the two logo blues only, navy #003792 and blue #006AFC, on white and greys.
   (v3 "Peach skyline" backup: scratchpad solutionhub-v3-peach.css.) Older notes below: Per-page accents were dropped at the
   client's request: frontmatter `accent` / data-accent no longer change colors. Balance: ~60% neutrals
   (white, light blue, cream), ~30% palette (slate marks, peach cards), ~10% logo blue (buttons, links, focus).
   Tokens (AA checked):
     --acc-strong   decorative marks only (icons, bars, borders, dots); never carries text
     --acc-ink      accent text on white/tint/soft (>= 5.2:1) and text-carrying pills/cards (white text >= 5.9:1)
     --acc-tint     light card/panel background (charcoal text on it)
     --acc-soft     very light section background
     --acc-deep     dark section background (charcoal with ~28% of the accent ink; white text >= 12:1)
   Inside the page wrapper the theme's --primary-color1/2 are remapped to ink/deep, so every theme element that
   used brand blue/navy for decoration or a dark section takes the accent instead. Buttons, body links and focus
   rings are switched back to the brand pair below (--sh-blue / --sh-navy).
   ===================================================================================================== */
:root {
  --sh-blue: #006afc; --sh-navy: #003792;
  --primary-color1: #006afc; --primary-color1-opc: 0, 106, 252;
  /* Same palette outside .sh-page (home page, header, footer): theme navy sections become slate. */
  --primary-color2: #003792; --primary-color2-opc: 0, 55, 146;
  --sh-cream: #f5f6f8; --sh-stone: #eceff3; --sh-charcoal: #1c2333; --sh-charcoal-rgb: 28, 35, 51; --sh-muted: #5d6575;
}
.sh-page, .sh-page[data-accent] {
  --acc-strong: #006afc; --acc-ink: #003792; --acc-ink-rgb: 0, 55, 146;
  --acc-tint: #f1f3f6; --acc-soft: #f7f8fa; --acc-deep: #003792; --acc-deep-rgb: 0, 55, 146; --acc-on-strong: #fff;
  /* Palette extras for small highlights. */
  --acc-peach: #e6e9ef; --acc-sky: #e5eefe; --acc-mint: #eef1f5;
}
.sh-page {
  /* Theme variables remapped to the accent inside page content. */
  --primary-color1: var(--acc-ink); --primary-color1-opc: var(--acc-ink-rgb);
  --primary-color2: var(--acc-deep); --primary-color2-opc: var(--acc-deep-rgb);
  /* Pre-v2 names still used by the component rules below. */
  --family-tint: var(--acc-tint); --family-strong: var(--acc-strong); --family-on-strong: var(--acc-on-strong); --family-ink: var(--acc-ink);
}
/* Brand blue back on primary buttons, body links and focus rings (the ~10%). */
.sh-page :is(.primary-btn1, .primary-btn2, .primary-btn3, .prose a, .terms-page a:not([class])) {
  --primary-color1: var(--sh-blue); --primary-color1-opc: 0, 106, 252;
  --primary-color2: var(--sh-navy); --primary-color2-opc: 0, 55, 146;
}
.sh-page :focus-visible { outline: 2px solid var(--sh-blue); outline-offset: 2px; }

/* Shared marks: slanted title icons, small triangles. */
.sh-page .sh-statement .title-area .section-title svg,
.sh-page .case-study-details-page .title-area .section-title svg,
.sh-page .industry-default-page .title-area .section-title svg,
.sh-page .industry-details-process-section .home3-process-section .section-title span svg,
.sh-page .solution-dt-overview-value-area .value-title svg,
.sh-page .solution-dt-overview-value-area .value-card .value-content h3 svg,
.sh-page .industry-default-page .industry-area .industry-list li a svg,
.sh-page .industry-default-why-choose-card .why-choose-content h3 svg,
.sh-page .industry-dt-overview-section .counter-area .single-counter .counter-number-area svg,
.sh-page .industry-dt-trends-section .counter-area .single-contact svg,
.sh-page .solution-dt-solution-selection-section .single-solution svg { fill: var(--family-strong); }

/* Icon circles (service photo cards, key facts, problems): accent circle, contrasting glyph. */
.sh-page .service-card2 .service-content .title-area .icon,
.sh-page .business-challenge-card .initial-card-content .challenge-icon,
.sh-page .challenge-card2 .title-area .icon { background-color: var(--family-strong); }
.sh-page .service-card2 .service-content .title-area .icon svg,
.sh-page .business-challenge-card .initial-card-content .challenge-icon svg,
.sh-page .challenge-card2 .title-area .icon svg { fill: var(--family-on-strong); }

/* Step pills (home3 process cards) and the home1 step wheel. */
.sh-page .process-card .step-no { background-color: var(--acc-ink); }
.sh-page .process-card .step-no strong { color: #fff; }
.sh-page .process-card .step-no span { color: var(--family-ink); }
.sh-page .home1-why-choose-section .why-choose-step-area .step-list li { background-color: var(--acc-ink); color: #fff !important; }
.sh-page .home1-why-choose-section .why-choose-step-area .check-list li svg { fill: var(--family-strong); }

/* Card tints. */
.sh-page .solution-dt-overview-value-area .value-card:not(:hover) { background-color: var(--family-tint); border-color: transparent; }
.sh-page .challenge-card2 .content { background-color: var(--family-tint); }
.sh-page .challenge-card2 .content ul li svg rect { fill: var(--family-strong); }
.sh-page .challenge-card2 .content ul li svg path { fill: var(--family-on-strong); }
.sh-page .challenge-card2:hover .content ul li svg rect { fill: #fff; }
.sh-page .challenge-card2:hover .content ul li svg path { fill: var(--primary-color1); }
.sh-page .home3-service-section .service-wrapper .service-card3 { background-color: var(--family-tint); }
.sh-page .home3-service-section .service-wrapper .service-card3 .service-content ul li svg { fill: var(--family-ink); }

/* Stacked process cards (solution2): tint, neutral, light accent, tint. */
.sh-page .solution2-page-process-section .process-wrapper .solution2-process-card { background-color: var(--family-tint); }
.sh-page .solution2-page-process-section .process-wrapper .solution2-process-card:nth-child(2),
.sh-page .solution2-page-process-section .process-wrapper .pin-spacer:nth-child(2) .solution2-process-card { background-color: var(--sh-stone); }
.sh-page .solution2-page-process-section .process-wrapper .solution2-process-card:nth-child(3),
.sh-page .solution2-page-process-section .process-wrapper .pin-spacer:nth-child(3) .solution2-process-card { background-color: color-mix(in srgb, var(--family-strong) 16%, #fff); }
.sh-page .solution2-page-process-section .process-wrapper .solution2-process-card .step-no { color: var(--family-ink); }
/* Theme slot holds small PNG illustrations; site photos get a fixed frame instead. */
.solution2-page-process-section.sh-process-cards .process-wrapper .solution2-process-card .process-img { width: 460px; }
.solution2-page-process-section.sh-process-cards .process-wrapper .solution2-process-card .process-img img { width: 100%; height: 100%; min-height: 300px; max-height: 360px; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 1199px) { .solution2-page-process-section.sh-process-cards .process-wrapper .solution2-process-card .process-img { width: 380px; } }
@media (max-width: 991px) {
  .solution2-page-process-section.sh-process-cards .process-wrapper .solution2-process-card .process-img { width: 100%; }
  .solution2-page-process-section.sh-process-cards .process-wrapper .solution2-process-card .process-img img { min-height: 0; aspect-ratio: 16 / 10; height: auto; max-height: none; }
}

/* Key-fact cards in the photo bands (home2 / home1 Banner2): accent card with dark or white text. */
.sh-page .home2-banner2-section .average-growth-area .content,
.sh-page .home1-banner2-section .banner-content .average-growth-area .content { background-color: var(--acc-ink); }
.sh-page .home2-banner2-section .average-growth-area .content :is(h2, .short-desc, .revenue-area > span),
.sh-page .home1-banner2-section .banner-content .average-growth-area .content > :is(h2, span, .sh-fact-text) { color: #fff; }
.sh-page .home2-banner2-section .average-growth-area .content svg,
.sh-page .home1-banner2-section .banner-content .average-growth-area .content svg { fill: #fff; }
.sh-page .home2-banner2-section .average-growth-area .content .revenue-area { border-bottom-color: rgba(255, 255, 255, 0.2); }
.sh-fact-banner { background-position: center; }
.sh-image-band { background-position: center; }
.sh-image-band .average-growth-area .content .sh-fact-text { font-size: 15px; line-height: 22px; margin: 12px 0 0; }
.sh-fact-banner .average-growth-area .content .revenue-area h2 { font-size: 64px; }
@media (max-width: 576px) { .sh-fact-banner .average-growth-area .content .revenue-area h2 { font-size: 48px; } }

/* Key facts (home2 Business Challenge). The section sits on the family tint so the white cards read; the
   theme's hover swap is kept on desktop, below lg both halves stack so the explanation is never hidden. */
.sh-page .sh-key-facts { background-color: var(--family-tint); }
.sh-key-facts { background-color: #f0f0f0; }
.sh-page .sh-key-facts .business-challenge-card .initial-card-content .card-divider::after { background-color: var(--family-strong); }
.sh-key-facts .business-challenge-card { height: 100%; }
.sh-key-facts .business-challenge-card .hover-card-content { justify-content: center; }
.sh-key-facts .business-challenge-card .hover-card-content .growth-percentage-area h2 { font-size: 56px; }
.sh-page .sh-key-facts .business-challenge-card .hover-card-content .growth-percentage-area h2 { color: var(--family-ink); }
.sh-key-facts .business-challenge-card:not(:has(.hover-card-content)):hover .initial-card-content { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 991px) {
  .sh-key-facts .business-challenge-card .hover-card-content { position: static; height: auto; display: block; opacity: 1; visibility: visible; transform: none; background: transparent; }
  .sh-key-facts .business-challenge-card .hover-card-content .growth-percentage-area p { font-size: 16px; line-height: 24px; color: var(--text-color); }
  .sh-key-facts .business-challenge-card .hover-card-content .growth-percentage-area { padding: 0 25px 35px; }
  .sh-key-facts .business-challenge-card .hover-card-content .growth-percentage-area h2 { display: none; }
  .sh-key-facts .business-challenge-card:hover .initial-card-content { opacity: 1; visibility: visible; transform: none; }
  .sh-key-facts .business-challenge-card .initial-card-content { padding-bottom: 20px; }
}

/* "At a glance" sidebar (case-study-details): tint panel, brand buttons instead of the theme's red/purple. */
.sh-page .case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap { background: var(--family-tint); }
.case-study-details-page .case-study-details-sidebar .sh-glance-title { font-family: var(--font-inteTight); font-size: 22px; font-weight: 600; color: var(--title-color); margin-bottom: 15px; }
.case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap .download-btns li:first-child .primary-btn3 { background-color: var(--primary-color2); }
.case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap .download-btns li .primary-btn3 { background-color: var(--primary-color1); }
.case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap .download-btns li .primary-btn3 span { color: #fff; }
.case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap .download-btns li .primary-btn3 svg { fill: #fff; }
/* Glance rows: label column narrower, values left-aligned so long values wrap cleanly. */
.case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap table tbody tr td { vertical-align: top; text-align: left; font-size: 15px; line-height: 1.45; }
.case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap table tbody tr td:first-child { width: 38%; padding-right: 12px; }
.case-study-details-page .case-study-details-sidebar .case-study-details-info-wrap table tbody tr td:last-child { width: 62%; text-align: left; }
/* Tax service body: no rule under the section (the key-fact band follows). */
.case-study-details-page.sh-body { border-bottom: 0; }
.case-study-details-page .case-study-details-sidebar .note-area .title-area h4 { color: #fff; }
.case-study-details-page .case-study-details-sidebar .note-area .title-area svg { fill: #fff; }
@media (min-width: 992px) { .case-study-details-page .case-study-details-sidebar { position: sticky; top: 30px; } }

/* Formation service: gray band under the accordion photo takes the family tint. */
.sh-page .industry-details-process-section .home3-process-section { background-color: var(--family-tint); }
.sh-industry-process .home3-process-section { padding: 110px 0; }
@media (max-width: 991px) { .sh-industry-process .home3-process-section { padding: 80px 0; } }
.sh-industry-process .indutry-dt-process-banner { background-position: center; }
.sh-industry-process .home3-process-section .section-title span { display: inline-flex; align-items: center; gap: 8px; }
.sh-industry-overview .industry-dt-overview-img img { width: 100%; border-radius: 10px; object-fit: cover; }

/* Audience "why choose" cards: the theme reveals the text only on hover; keep it readable at all times. */
.sh-why-cards .industry-default-why-choose-card .why-choose-content p { opacity: 1; visibility: visible; transform: none; color: var(--text-color); }
.sh-why-cards .industry-default-why-choose-card .read-more-btn { position: static; align-self: flex-start; }
.sh-why-cards .industry-default-why-choose-card:hover .read-more-btn { display: inline-flex; color: #fff; }
.sh-why-cards .industry-default-why-choose-card:hover .read-more-btn svg { fill: #fff; }
.sh-why-cards .industry-default-why-choose-card:hover .why-choose-content p { color: #fff; }
.sh-page .sh-why-cards .industry-default-why-choose-card:not(:hover) { background-color: var(--family-tint); border-color: transparent; }
.sh-why-cards .industry-default-why-choose-card { min-height: 0; height: 100%; gap: 30px; }
.sh-wide-banner img { width: 100%; max-height: 640px; object-fit: cover; display: block; }

/* State cost comparison: CSS bar chart in the theme's chart card (replaces the canvas pie). */
.industry-dt-trends-section .chart-wrapper.sh-bar-chart { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 25px; padding: 35px; }
@media (max-width: 576px) { .industry-dt-trends-section .chart-wrapper.sh-bar-chart { padding: 20px; } }
.industry-dt-trends-section .chart-wrapper.sh-bar-chart > * { width: 100%; max-width: none; }
.sh-bar-chart .bar-chart { margin: 0; }
.sh-bar-chart figcaption { font-family: var(--font-inteTight); font-size: 22px; font-weight: 600; color: var(--title-color); margin-bottom: 20px; }
.sh-bar-chart .bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.sh-bar-chart .bar-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-poppins); font-size: 15px; line-height: 1.4; color: var(--title-color); margin-bottom: 6px; }
.sh-bar-chart .bar-head strong { font-weight: 600; white-space: nowrap; }
.sh-bar-chart .bar-track { height: 12px; border-radius: 100px; background: rgba(5, 5, 5, 0.06); overflow: hidden; }
.sh-bar-chart .bar { display: block; height: 100%; border-radius: 100px; background: var(--family-strong, var(--primary-color1)); }
.sh-bar-chart .bar-note { display: block; font-size: 13px; line-height: 1.4; color: var(--text-color); margin-top: 5px; }
.industry-dt-trends-section .chart-wrapper.sh-bar-chart .chart-label-area { padding: 15px 20px; min-height: 0; }
.sh-bar-chart .sh-chart-source { font-size: 13px; line-height: 1.5; color: var(--text-color); margin: 0; }

/* Photo service cards (home2 Service): images come in mixed sizes, crop to the card. */
.home2-service-section .service-card2 .service-img { object-fit: cover; }
.home3-service-section.sh-deliver .service-card3 .service-img img { width: 100%; height: 100%; object-fit: cover; }

/* Photo band (home1 Banner2; hub-solution1, T5): charcoal/deep-accent fade so the white heading reads on daylight photos;
   the fact value may be a word ("Monthly"), not just a short number. */
.home1-banner2-section.sh-image-band::before { background: linear-gradient(77.61deg, rgba(var(--acc-deep-rgb, 31, 36, 48), 0.9) 0%, rgba(var(--sh-charcoal-rgb), 0.5) 45%, rgba(0, 0, 0, 0) 75%); }
.sh-image-band .banner-content .average-growth-area .content h2 { font-size: 56px; line-height: 1.05; margin-bottom: 14px; }
@media (max-width: 767px) {
  .home1-banner2-section.sh-image-band::before { background: linear-gradient(180deg, rgba(var(--sh-charcoal-rgb), 0.4) 0%, rgba(var(--acc-deep-rgb, 31, 36, 48), 0.88) 100%); }
  .sh-image-band .banner-content .average-growth-area .content h2 { font-size: 42px; }
}

/* =====================================================================================================
   v2 color balance inside page content (.sh-page). Navy/blue section backgrounds and decorative blues become
   neutrals, accent tints or the deep accent; brand blue stays on buttons, body links and focus only.
   ===================================================================================================== */
/* Dark sections: deep accent instead of navy (theme hardcodes #003792 on these). */
.sh-page .home1-service-section {
  background-image: linear-gradient(180deg, var(--acc-deep) 26.99%, rgba(var(--acc-deep-rgb), 0.84) 144.68%), url(/assets/img/sh/team-desk-overhead.webp);
}
.sh-page .home1-why-choose-section .why-choose-card,
.sh-page .home2-service-section { background-color: var(--acc-deep); }
.sh-page .industry-dt-trends-section .chart-wrapper .chart-label-area .chart-label-list li .dot { background-color: var(--acc-ink); }
.sh-page .industry-dt-trends-section .chart-wrapper .chart-label-area .chart-label-list li:nth-child(3) .dot { background-color: var(--acc-strong); }
/* Neutral rhythm: alternate sections sit on cream/stone, not on blue-grey. */
.sh-page .sh-key-facts { background-color: var(--acc-soft); }
.sh-page .home1-faq-section .faq-wrap .accordion .accordion-item .accordion-button:not(.collapsed) { color: var(--acc-ink); }
.sh-page .home1-faq-section .faq-wrap .accordion .accordion-item .accordion-button::after { color: var(--acc-ink); }
.sh-page .breadcrumb-section .banner-content .breadcrumb-list li svg { fill: rgba(255, 255, 255, 0.85); }
.sh-page .solution-dt-solution-selection-section .single-solution svg { fill: var(--acc-strong); }
.sh-page .solution-dt-solution-selection-section .single-solution:hover { border-color: var(--acc-strong); color: var(--acc-ink); }
/* Prose bullets and sidebar marks: accent, not blue (links in prose stay brand blue). */
.sh-page :is(.terms-page, .sh-body) .prose li::marker { color: var(--acc-strong); }

/* Marks on dark accent panels (contact sidebar card, photo benefits band): the theme drew them in its light
   lime, so they take a light accent there instead of the ink (which disappears on the deep background). */
.sh-page { --acc-on-dark: color-mix(in srgb, var(--acc-strong) 55%, #fff); }
.sh-page :is(.contact-page-sidebar .contact-info, .solution-dt-benefits-section:not(.sh-benefits-cards) .solution-dt-benefits-content-wrap) { --primary-color1: var(--acc-on-dark); }
.sh-page .contact-page .contact-page-sidebar .contact-info .contact-list .single-contact .icon svg { fill: var(--acc-on-dark); }
.sh-page .solution-dt-benefits-section .solution-dt-benefits-content-wrap .section-title .rating-area .rating-batch,
.sh-page .solution-dt-benefits-section .solution-dt-benefits-content-wrap .section-title .rating-area .rating-batch::after { background-color: var(--acc-ink); }
.sh-page .solution-dt-benefits-section:not(.sh-benefits-cards) .solution-dt-benefits-content-wrap .section-title .rating-area .rating-batch { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* "Who it's for" panel (Solution Details Contact): accent tint with charcoal text instead of a navy block. */
.sh-page .solution-dt-contact-section .solution-dt-contact-content-wrap { background-color: var(--acc-tint); }
.sh-page .solution-dt-contact-section .solution-dt-contact-content .section-title :is(h2, p) { color: var(--sh-charcoal); }
.sh-page .solution-dt-contact-section .solution-dt-contact-content .contact-area .contact-content-area .content a { color: var(--sh-charcoal); }
.sh-page .solution-dt-contact-section .solution-dt-contact-content .contact-area .contact-content-area .content a:hover { color: var(--sh-blue); }
.sh-page .solution-dt-contact-section .solution-dt-contact-content .contact-area .contact-content-area .content span { color: var(--sh-muted); }
.sh-page .solution-dt-contact-section .solution-dt-contact-content .contact-area .contact-content-area .icon svg { fill: var(--acc-ink); }
.sh-page .solution-dt-contact-section .solution-dt-contact-content-wrap .shape { display: none; }
.sh-page .solution-dt-contact-section .solution-dt-contact-content .contact-info-bar { background-color: #fff; }
/* Desktop bar overlaps photo and the light panel: solid deep accent so the white item text keeps AA. */
.sh-page .solution-dt-contact-section > .contact-info-bar { background-color: rgba(var(--acc-deep-rgb), 0.94); }
.sh-page .solution-dt-contact-section .solution-dt-contact-content .contact-info-bar .info-item p { color: var(--sh-charcoal); }

/* Benefits as cards (T2, T5, T6): no photo, white cards on the accent soft band, charcoal text. */
.sh-page .solution-dt-benefits-section.sh-benefits-cards .solution-dt-benefits-content-wrap { background-color: var(--acc-soft); }
.sh-benefits-cards .solution-dt-benefits-content-wrap .section-title h2 { color: var(--sh-charcoal); }
.sh-benefits-cards .solution-dt-benefits-content-wrap .section-title .rating-area .content span { color: var(--sh-charcoal); }
.sh-benefits-cards .solution-dt-benefits-content-wrap .benefits-list { row-gap: 24px; gap: 24px; }
.sh-benefits-cards .solution-dt-benefits-content-wrap .benefits-list .single-benefit {
  max-width: none; justify-self: stretch !important; background: #fff; border-radius: 12px; padding: 28px 26px;
  border-top: 3px solid var(--acc-strong); box-shadow: 0 1px 2px rgba(var(--sh-charcoal-rgb), 0.06);
}
.sh-benefits-cards .solution-dt-benefits-content-wrap .benefits-list .single-benefit h3 { color: var(--sh-charcoal); font-size: 21px; }
.sh-benefits-cards .solution-dt-benefits-content-wrap .benefits-list .single-benefit h3 svg { fill: var(--acc-strong); }
.sh-benefits-cards .solution-dt-benefits-content-wrap .benefits-list .single-benefit p { color: var(--text-color); font-weight: 400; }
.sh-page .sh-benefits-cards .home2-banner-bottom-cta-area { background-color: var(--sh-charcoal); }

/* Statement facts (T5, T6): two fact tiles under the intro sentence. */
.sh-statement .sh-statement-text { max-width: 760px; margin: 25px auto 0; font-size: 17px; line-height: 1.6; }
.sh-statement .sh-fact-tile { height: 100%; background: var(--acc-tint); border-radius: 12px; padding: 28px 30px; border-left: 4px solid var(--acc-strong); }
.sh-statement .sh-fact-tile strong { display: block; font-family: var(--font-inteTight); font-weight: 600; font-size: 44px; line-height: 1.05; color: var(--acc-ink); margin-bottom: 8px; }
.sh-statement .sh-fact-tile span { display: block; font-family: var(--font-poppins); font-size: 16px; line-height: 1.4; color: var(--sh-charcoal); font-weight: 500; }
.sh-statement .sh-fact-tile p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
@media (max-width: 576px) { .sh-statement .sh-fact-tile strong { font-size: 36px; } }

/* =====================================================================================================
   Header dropdowns (v2): the simple dropdown and the mega menu share one panel style (white, 12px radius,
   soft shadow, 10px inset) and one item style (15px Poppins, rounded hover in a light brand-blue tint).
   Mega panels use the theme's full-width design (19 Oct 2026: user asked for every menu in that style). Desktop only; the
   theme's mobile accordion menu (and custom.js toggles) are unchanged. Inner header switches at 992px,
   home header at 1200px.
   ===================================================================================================== */
@media (min-width: 992px) {
  header.style-1:not(.home2-header) .main-menu > ul > li ul.sub-menu {
    background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 10px; z-index: 99;
    box-shadow: 0 18px 40px -14px rgba(31, 36, 48, 0.22), 0 2px 6px rgba(31, 36, 48, 0.06);
  }
  header.style-1:not(.home2-header) .main-menu > ul > li ul.sub-menu { min-width: 260px; right: auto; }
  header.style-1:not(.home2-header) .main-menu > ul > li ul.sub-menu > li > a {
    display: block; width: auto; padding: 10px 14px; border: 0; border-radius: 8px; background: none;
    color: var(--text-color); font-family: var(--font-poppins); font-weight: 500; font-size: 15px; line-height: 1.3;
    white-space: normal; transition: background-color 0.2s, color 0.2s;
  }
  header.style-1:not(.home2-header) .main-menu > ul > li ul.sub-menu > li > a::before { display: none; }
  header.style-1:not(.home2-header) .main-menu > ul > li ul.sub-menu > li > a:hover,
  header.style-1:not(.home2-header) .main-menu > ul > li ul.sub-menu > li > a:focus-visible { background: rgba(0, 106, 252, 0.07); color: var(--sh-blue); }
  /* Keyboard: a focused trigger or item keeps its panel open. */
  header.style-1:not(.home2-header) .main-menu > ul > li:focus-within > ul.sub-menu,
  header.style-1:not(.home2-header) .main-menu > ul > li:focus-within > .mega-menu { display: block; }
}
@media (min-width: 1200px) {
  header.style-1.home2-header .main-menu > ul > li ul.sub-menu {
    background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 10px; z-index: 99;
    box-shadow: 0 18px 40px -14px rgba(31, 36, 48, 0.22), 0 2px 6px rgba(31, 36, 48, 0.06);
  }
  header.style-1.home2-header .main-menu > ul > li ul.sub-menu { min-width: 260px; right: auto; }
  header.style-1.home2-header .main-menu > ul > li ul.sub-menu > li > a {
    display: block; width: auto; padding: 10px 14px; border: 0; border-radius: 8px; background: none;
    color: var(--text-color); font-family: var(--font-poppins); font-weight: 500; font-size: 15px; line-height: 1.3;
    white-space: normal; transition: background-color 0.2s, color 0.2s;
  }
  header.style-1.home2-header .main-menu > ul > li ul.sub-menu > li > a::before { display: none; }
  header.style-1.home2-header .main-menu > ul > li ul.sub-menu > li > a:hover,
  header.style-1.home2-header .main-menu > ul > li ul.sub-menu > li > a:focus-visible { background: rgba(0, 106, 252, 0.07); color: var(--sh-blue); }
  /* Keyboard: a focused trigger or item keeps its panel open. */
  header.style-1.home2-header .main-menu > ul > li:focus-within > ul.sub-menu,
  header.style-1.home2-header .main-menu > ul > li:focus-within > .mega-menu { display: block; }
}

/* Mobile accordion: the mega menu's second group drops the boxed items so both groups read like the dropdowns. */
@media (max-width: 991px) {
  header.style-1 .main-menu > ul > li .mega-menu .menu-row .menu-single-item.two ul li { margin-bottom: 0; }
  header.style-1 .main-menu > ul > li .mega-menu .menu-row .menu-single-item.two ul li > a { border: 0; padding: 10px 0; background: none; }
  header.style-1 .main-menu > ul > li .mega-menu .menu-row .menu-single-item.two ul li > a svg { display: none; }
}
@media (max-width: 1199px) {
  header.style-1.home2-header .main-menu > ul > li .mega-menu .menu-row .menu-single-item.two ul li { margin-bottom: 0; }
  header.style-1.home2-header .main-menu > ul > li .mega-menu .menu-row .menu-single-item.two ul li > a { border: 0; padding: 10px 0; background: none; }
  header.style-1.home2-header .main-menu > ul > li .mega-menu .menu-row .menu-single-item.two ul li > a svg { display: none; }
}

/* Typography rhythm (Oct 2026 review): balanced headline wrapping so long titles don't break into one long and
   one orphaned line, and justified body paragraphs with hyphenation (html[lang] drives EN/TR hyphen rules). */
h1, h2, h3, h4, .section-title h2, .section-title span { text-wrap: balance; }
/* Banner titles stay on one line on desktop: size steps down with title length instead of wrapping. */
.breadcrumb-section .banner-content h1 { max-width: none; font-size: clamp(40px, 4.3vw, 66px); }
.breadcrumb-section .banner-content h1.is-long { font-size: clamp(34px, 3.3vw, 52px); }
.breadcrumb-section .banner-content h1.is-xlong { font-size: clamp(30px, 2.7vw, 44px); }
@media (min-width: 1200px) { .breadcrumb-section .banner-content h1 { white-space: nowrap; } }
@media (max-width: 767px) {
  .breadcrumb-section .banner-content h1, .breadcrumb-section .banner-content h1.is-long,
  .breadcrumb-section .banner-content h1.is-xlong { font-size: clamp(28px, 7.4vw, 38px); }
}
.sh-page p, .sh-page li, .prose p, .prose li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}
/* Centered blocks, buttons, pills and short card labels stay as designed. */
.sh-page .text-center p, .sh-page .text-center li, .sh-page .section-title p, .sh-page .step-list li,
.sh-page .check-list li, .sh-page .breadcrumb-list li, .sh-page .service-list li, .sh-page nav li,
.sh-page .chip, .sh-page [class*="tag"] li, .sh-page .process-content ul li,
/* Narrow cards (4-up steps, benefit cards, fact tiles): justification opens rivers at ~200px, keep them ragged. */
.sh-page .process-card p, .sh-page .sh-benefits-cards .single-benefit p, .sh-page .sh-fact-tile p, .sh-page .sh-why-cards p, .sh-page .solution2-process-card p, .sh-page .contact-info-bar p {
  text-align: inherit; hyphens: manual; -webkit-hyphens: manual;
}

/* Home header (home2-header.two): six menu items + phone + CTA overflowed and wrapped "Contact" onto a second
   line below ~1800px. Keep the menu on one line and drop the header phone (it is also in the topbar/footer). */
header.style-1.home2-header.two .main-menu > ul { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1799px) {
  header.style-1.home2-header.two .main-menu > ul > li { padding-left: 9px; padding-right: 9px; }
  header.style-1.home2-header.two .nav-right .contact-area { display: none !important; }
}

/* Problem cards (T5 / formation hub): short bullets in narrow cards read better unjustified. */
.sh-page .home3-service-section li, .sh-page .home3-service-section p, .sh-page .sh-problems li, .sh-page .sh-problems p {
  text-align: left; hyphens: manual; -webkit-hyphens: manual;
}

/* List items are short; justifying them opens wide gaps ("Monthly   bookkeeping   keeps…"). Paragraphs stay justified. */
.sh-page li, .prose li { text-align: left; }

/* Footer: office details under the logo, five link columns mirroring the main menu (sitewide internal links),
   and the theme's line-arrow vector (home2 footer) in the bottom-left corner. */
.sh-footer { overflow: hidden; }
.sh-footer .sh-footer-office { margin-top: 32px; }
.sh-footer .sh-footer-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 28px;
}
.sh-footer .sh-footer-columns .footer-menu-list li { text-align: left; }
.sh-footer .sh-footer-columns .footer-menu-list a { line-height: 1.45; display: inline-block; }
@media (max-width: 1399px) { .sh-footer .sh-footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sh-footer .sh-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }
.sh-footer .vector { opacity: .9; pointer-events: none; }
/* The vector sits in the empty bottom-right corner (mirrored) instead of behind the tagline and copyright text. */
.footer-section.two.sh-footer .vector { left: auto; right: 0; transform: scaleX(-1); }
.sh-footer .sh-footer-columns .widget-title { white-space: nowrap; }

/* Card grids (.sh-grid-row, columns from src/lib/grid.ts): no orphan card on the last row, and every card in a
   row has the same height (the card fills its column; its button sits at the bottom). */
.sh-grid-row > .sh-grid-item { display: flex; }
.sh-grid-row > .sh-grid-item > * { flex: 1 1 auto; width: 100%; }
@media (min-width: 1200px) {
  .sh-grid-row[data-xl="1"] > .sh-grid-item { flex: 0 0 auto; width: 100%; }
  .sh-grid-row[data-xl="2"] > .sh-grid-item { flex: 0 0 auto; width: 50%; }
  .sh-grid-row[data-xl="3"] > .sh-grid-item { flex: 0 0 auto; width: 33.3333%; }
  .sh-grid-row[data-xl="4"] > .sh-grid-item { flex: 0 0 auto; width: 25%; }
  .sh-grid-row[data-xl="5"] > .sh-grid-item { flex: 0 0 auto; width: 20%; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .sh-grid-row[data-lg="1"] > .sh-grid-item { flex: 0 0 auto; width: 100%; }
  .sh-grid-row[data-lg="2"] > .sh-grid-item { flex: 0 0 auto; width: 50%; }
  .sh-grid-row[data-lg="3"] > .sh-grid-item { flex: 0 0 auto; width: 33.3333%; }
}
/* Cards with a bottom button/link: stack content and push the action down so buttons line up. */
.sh-grid-row .service-card, .sh-grid-row .service-card2, .sh-grid-row .value-card,
.sh-grid-row .industry-default-why-choose-card, .sh-grid-row .challenge-card2, .sh-grid-row .business-challenge-card {
  display: flex; flex-direction: column; height: 100%;
}
.sh-grid-row .service-card > .primary-btn1, .sh-grid-row .value-card > .read-more-btn,
.sh-grid-row .industry-default-why-choose-card > a:last-child { margin-top: auto; }
.sh-grid-row .challenge-card2 > .title-area { flex: 1 1 auto; }

/* Larger header logo (client request), sized per breakpoint like the theme does. */
header.style-1 .company-logo img { width: 196px; }
@media (max-width: 1599px) { header.style-1 .company-logo img { width: 182px; } }
@media (max-width: 1399px) { header.style-1 .company-logo img { width: 168px; } }
@media (max-width: 1199px) { header.style-1 .mobile-logo-area .mobile-logo-wrap img, header.style-1 .company-logo img { width: 156px; } }

/* Footer v2 (Oct 17 review): top band = brand + office + CTA; below, five full-width link columns with
   compact headings (the theme's 0.4em letter-spacing made long titles collide). */
.sh-footer .sh-footer-main { padding-top: 90px; }
.sh-footer .sh-footer-top {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; align-items: start;
  padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid rgba(31, 36, 48, .1);
}
.sh-footer .sh-footer-brand .company-logo img { width: 200px; height: auto; }
.sh-footer .sh-footer-brand p { margin: 22px 0 20px; font-size: 17px; line-height: 1.55; color: #1F2430; max-width: 34ch; text-align: left; }
.sh-footer .sh-footer-brand .social-list { display: flex; gap: 14px; padding: 0; margin: 0; list-style: none; }
.sh-footer .sh-footer-office { margin-top: 0; }
.sh-footer .sh-footer-office .address-area a { font-size: 16px; line-height: 1.5; }
.sh-footer .sh-footer-cta p { font-size: 16px; line-height: 1.55; color: #1F2430; margin-bottom: 20px; text-align: left; }
.sh-footer .sh-footer-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 36px; }
.sh-footer .widget-title {
  letter-spacing: .08em !important; font-size: 13px !important; font-weight: 600; text-transform: uppercase;
  white-space: nowrap; color: #5B6270; margin-bottom: 18px !important;
}
.sh-footer .sh-footer-columns .footer-menu-list li { margin-bottom: 11px; text-align: left; }
.sh-footer .sh-footer-columns .footer-menu-list li:last-child { margin-bottom: 0; }
.sh-footer .sh-footer-columns .footer-menu-list a { font-size: 15px; line-height: 1.4; display: inline-block; }
@media (max-width: 1199px) {
  .sh-footer .sh-footer-top { grid-template-columns: 1fr 1fr; }
  .sh-footer .sh-footer-cta { grid-column: 1 / -1; }
  .sh-footer .sh-footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sh-footer .sh-footer-main { padding-top: 60px; }
  .sh-footer .sh-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .sh-footer .sh-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}
/* Keep the line-arrow vector in the copyright band only, clear of the link columns. */
.footer-section.two.sh-footer .vector { width: 230px !important; opacity: .55; }
.sh-footer .copyright-area { position: relative; }

/* Equal-height cards in every theme card row (also outside .sh-grid-row, e.g. the home page and process steps). */
.row > [class*="col-"]:has(> .challenge-card2), .row > [class*="col-"]:has(> .service-card),
.row > [class*="col-"]:has(> .business-challenge-card), .row > [class*="col-"]:has(> .value-card),
.row > [class*="col-"]:has(> .industry-default-why-choose-card), .row > [class*="col-"]:has(> .process-card),
.row > [class*="col-"]:has(> .service-card2), .row > [class*="col-"]:has(> .single-step) { display: flex; }
.row > [class*="col-"] > .challenge-card2, .row > [class*="col-"] > .service-card,
.row > [class*="col-"] > .business-challenge-card, .row > [class*="col-"] > .value-card,
.row > [class*="col-"] > .industry-default-why-choose-card, .row > [class*="col-"] > .process-card,
.row > [class*="col-"] > .service-card2, .row > [class*="col-"] > .single-step { width: 100%; }
.home3-challenge-section .challenge-card2 { display: flex; flex-direction: column; }
.home3-challenge-section .challenge-card2 > .title-area { flex: 1 1 auto; }

/* Inner-page header with 8 top-level items (Home + Blog added): keep one line on 1200–1399px laptops. */
@media (min-width: 1200px) and (max-width: 1399px) {
  header.style-1:not(.home2-header) .main-menu > ul > li { padding-left: 7px; padding-right: 7px; }
  header.style-1:not(.home2-header) .main-menu > ul > li > a { font-size: 15px; }
  header.style-1 .main-menu > ul { white-space: nowrap; }
}
@media (min-width: 1400px) and (max-width: 1699px) {
  header.style-1:not(.home2-header) .main-menu > ul > li { padding-left: 8px; padding-right: 8px; }
  header.style-1:not(.home2-header) .main-menu > ul > li > a { font-size: 15.5px; }
  header.style-1 .main-menu > ul { white-space: nowrap; }
}
/* Service cards: reserve two title lines so the grey "What's included" boxes start at the same height in a row. */
.sh-grid-row .service-card .icon-and-title-area h3 { min-height: 2.5em; display: flex; align-items: flex-start; }
.sh-grid-row .service-card2 .title-area h3 { min-height: 2.5em; }
.sh-grid-row .industry-default-why-choose-card h3, .sh-grid-row .value-card h3 { min-height: 2.5em; }
/* Buttons inside flex-column cards keep their natural width. */
.sh-grid-row .service-card > .primary-btn1, .sh-grid-row .value-card > .read-more-btn,
.sh-grid-row .industry-default-why-choose-card > a, .sh-grid-row .service-card2 a.read-more-btn { align-self: flex-start; }

/* =====================================================================================================
   Consent (self-hosted cookie banner + preferences dialog, src/components/consent/). Neutral card, brand-blue
   buttons. Accept / Reject / Preferences share one style so none is more prominent (KVKK Çerez Rehberi).
   Fixed overlay = no layout shift; shown only while <html> has .sh-consent-pending (set by ConsentHead).
   ===================================================================================================== */
.sh-cc { font-family: var(--font-poppins); color: var(--sh-charcoal); }
.sh-cc a { color: var(--sh-blue); text-decoration: underline; text-underline-offset: 2px; }
.sh-cc a:hover { color: var(--sh-navy); }
.sh-cc :focus-visible { outline: 2px solid var(--sh-blue); outline-offset: 2px; }
.sh-cc-banner {
  display: none; position: fixed; z-index: 99990; left: 24px; bottom: 24px; width: min(560px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px); overflow-y: auto; box-sizing: border-box;
  background: #fff; border: 1px solid rgba(31, 36, 48, .12); border-radius: 14px; padding: 24px 24px 20px;
  box-shadow: 0 18px 48px rgba(31, 36, 48, .18), 0 2px 6px rgba(31, 36, 48, .08);
}
.sh-consent-pending .sh-cc-banner { display: block; }
.sh-cc-title { font-family: var(--font-poppins); font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--sh-charcoal); margin: 0 0 8px; letter-spacing: 0; }
.sh-cc-text { text-align: left; font-size: 14.5px; line-height: 1.6; color: #3a4150; margin: 0 0 16px; }
.sh-cc-gpc { font-size: 13.5px; line-height: 1.5; margin: -4px 0 16px; padding: 10px 12px; border-radius: 8px; background: #eef4ff; color: #1b2a4a; border-left: 3px solid var(--sh-blue); }
.sh-cc-gpc[hidden] { display: none; }
.sh-cc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sh-cc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 14px; margin: 0;
  font-family: var(--font-poppins); font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center;
  color: #fff; background: var(--sh-blue); border: 1px solid var(--sh-blue); border-radius: 8px; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.sh-cc-btn:hover { background: var(--sh-navy); border-color: var(--sh-navy); }
.sh-cc-btn:focus-visible { outline: 3px solid var(--sh-charcoal); outline-offset: 2px; }
[data-consent-preferences] .sh-cc-btn { margin: 8px 0 16px; }
.sh-cc-dialog {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; box-sizing: border-box; overflow-y: auto;
  border: 0; border-radius: 14px; background: #fff; color: var(--sh-charcoal); box-shadow: 0 24px 64px rgba(31, 36, 48, .3);
  overscroll-behavior: contain;
}
.sh-cc-dialog::backdrop { background: rgba(31, 36, 48, .55); }
.sh-cc-dialog-inner { padding: 26px 26px 22px; }
.sh-cc-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sh-cc-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px -8px 0 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--sh-charcoal); cursor: pointer;
}
.sh-cc-close:hover { background: var(--sh-stone); }
.sh-cc-cats { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid rgba(31, 36, 48, .1); }
.sh-cc-cat { padding: 14px 0; border-bottom: 1px solid rgba(31, 36, 48, .1); }
.sh-cc-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sh-cc-cat-title { font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--sh-charcoal); margin: 0; cursor: pointer; }
.sh-cc-cat-text { font-size: 13.5px; line-height: 1.55; color: var(--sh-muted); margin: 4px 0 0; }
.sh-cc-always { font-size: 13px; font-weight: 500; color: #1d6b3a; white-space: nowrap; }
.sh-cc-switch { position: relative; flex: none; width: 46px; height: 26px; }
.sh-cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sh-cc-switch-ui { position: absolute; inset: 0; border-radius: 13px; background: #b8bdc7; transition: background-color .2s; }
.sh-cc-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.sh-cc-switch input:checked + .sh-cc-switch-ui { background: var(--sh-blue); }
.sh-cc-switch input:checked + .sh-cc-switch-ui::after { transform: translateX(20px); }
.sh-cc-switch input:focus-visible + .sh-cc-switch-ui { outline: 2px solid var(--sh-blue); outline-offset: 2px; }
.sh-cc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
@media (max-width: 575px) {
  .sh-cc-banner { left: 0; right: 0; bottom: 0; width: 100%; max-height: 85dvh; border-radius: 14px 14px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .sh-cc-title { font-size: 17px; }
  .sh-cc-text { font-size: 14px; margin-bottom: 14px; }
  .sh-cc-actions { grid-template-columns: 1fr; gap: 8px; }
  .sh-cc-btn { min-height: 44px; }
  .sh-cc-dialog-inner { padding: 20px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sh-cc-switch-ui, .sh-cc-switch-ui::after, .sh-cc-btn { transition: none; } }

/* Footer legal links row (under the copyright line). */
.sh-footer .sh-legal-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.sh-footer .sh-legal-links li { display: inline-flex; align-items: center; font-size: 14px; line-height: 1.5; color: #5B6270; }
.sh-footer .sh-legal-links li + li::before { content: "·"; margin: 0 10px; color: #9aa0ab; }
.sh-footer .sh-legal-links a, .sh-footer .sh-legal-links button {
  font-family: var(--font-poppins); font-size: 14px; font-weight: 500; line-height: 1.5; color: #1F2430; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0 1px; background-position: left 95%; transition: background-size .5s;
}
.sh-footer .sh-legal-links a:hover, .sh-footer .sh-legal-links button:hover { background-size: 100% 1px; color: var(--sh-blue); }
.sh-footer .sh-legal-links :focus-visible { outline: 2px solid var(--sh-blue); outline-offset: 2px; }

/* Contact form: sensitive-data notice, privacy line and optional (unchecked) consents. */
.contact-form .sh-form-notice { text-align: left; font-size: 15px; line-height: 1.55; color: #1F2430; background: #fff8e6; border-left: 3px solid #b7791f; padding: 12px 14px; border-radius: 6px; margin: 0; }
.contact-form .sh-form-privacy { text-align: left; font-size: 15px; line-height: 1.55; color: #3a4150; margin: 0; }
.contact-form .sh-form-privacy a { color: var(--sh-blue); text-decoration: underline; }
.contact-form .sh-optin { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form .sh-optin legend { float: none; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #5B6270; margin: 0 0 10px; padding: 0; }
.contact-form .sh-optin .form-check { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; margin-bottom: 12px; }
.contact-form .sh-optin .form-check-input { flex: none; float: none; margin: 4px 0 0; width: 18px; height: 18px; }
.contact-form .sh-optin .form-check-label { text-align: left; font-size: 14px; line-height: 1.55; color: #3a4150; }
.contact-form .sh-optin .sh-optin-note { display: block; font-size: 13px; color: #5B6270; margin-top: 2px; }

/* Legal pages: "In short" summary boxes (Markdown blockquotes). */
.prose blockquote {
  margin: 0 0 32px; padding: 22px 26px; border-left: 4px solid var(--family-strong, #006AFC);
  background: var(--family-soft, #f5f6f8); border-radius: 0 10px 10px 0; color: #1F2430;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote p, .prose blockquote li { text-align: left; }
.prose table th, .prose table td { text-align: left; vertical-align: top; }

/* ---- Free calculators (src/components/tools/ToolShell.astro) ----
   Theme "home3 Tax Calculation" card. On tool pages the card sits right under the banner (no blue top band);
   on the home page the band stays but in charcoal, and the result panel takes the page accent instead of navy. */
.sh-tool { margin-bottom: 140px; }
.sh-tool:not(:has(.tax-calculation-top-area)) .tax-calculator-area { margin-top: 0; }
.sh-tool .tax-calculation-top-area { background-image: url(../img/home3/home3-contact-section-bg.png), linear-gradient(180deg, #003792 0%, #003792 100%); background-size: cover; background-repeat: no-repeat; }
.sh-tool .tax-calculator-wrapper { border: 1px solid #e6e2dc; box-shadow: 0 18px 50px rgba(31, 36, 48, .08); border-radius: 12px; }
.sh-tool .tax-summary-wrap { border-radius: 10px; overflow: hidden; background-color: var(--family-soft, #f5f6f8) !important; }
.sh-tool .payable-tax { background-color: var(--acc-deep, #1f2430) !important; }
.sh-tool .payable-tax strong { font-variant-numeric: tabular-nums; }
.sh-tool .payable-tax .sh-secondary { color: rgba(255, 255, 255, .85); margin: 8px 0 0; font-size: 15px; text-align: center; }
.sh-tool .payable-tax .sh-secondary b { color: #fff; font-weight: 600; }
.sh-tool .tax-summary-table td strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-tool .tax-summary-table tr.is-muted td { color: #5b6270; font-size: 15px; }
.sh-tool .tax-summary-table tr.is-muted td strong { font-weight: 500; }
.sh-tool .tax-summary-table tr.is-strong td { font-weight: 600; }
.sh-tool .tax-summary-table tr.is-minus td strong { color: var(--acc-ink, #a63a17); }
.sh-tool .sh-tool-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 14px; color: #5b6270; text-align: left; }
.sh-tool .sh-tool-meta span { display: inline-flex; align-items: center; gap: 8px; }
.sh-tool .sh-tool-meta span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--family-strong, #006afc); }
.sh-tool .sh-tool-reset { background: none; border: 0; padding: 0; color: var(--primary-color1, #006afc); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sh-tool .sh-field[hidden] { display: none !important; }
.sh-tool .sh-input { position: relative; }
.sh-tool .sh-input input { width: 100%; }
.sh-tool .sh-input.is-money input { padding-left: 34px; }
.sh-tool .sh-input.is-money::before { content: "$"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #5b6270; pointer-events: none; }
.sh-tool .sh-input.is-percent input { padding-right: 38px; }
.sh-tool .sh-input.is-percent::after { content: "%"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #5b6270; pointer-events: none; }
.sh-tool .sh-help { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #5b6270; text-align: left; hyphens: none; }
.sh-tool .sh-native-select { width: 100%; height: 50px; padding: 0 40px 0 16px; border: 1px solid #f0f0f0; border-radius: 5px; background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6270' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; appearance: none; color: var(--title-color); font-size: 16px; }
.sh-tool .sh-native-select:focus, .sh-tool .sh-input input:focus { outline: 2px solid var(--primary-color1, #006afc); outline-offset: 1px; }
.sh-tool fieldset.sh-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.sh-tool .sh-choice legend { font-size: 16px; float: none; width: auto; margin-bottom: 10px; color: var(--title-color); }
.sh-tool .sh-choice .form-check-input[type="radio"] { border-radius: 50%; }
.sh-tool .sh-choice .form-check-input:checked, .sh-tool .sh-toggle .form-check-input:checked { background-color: var(--family-strong, #006afc); border-color: var(--family-strong, #006afc); }
.sh-tool .sh-tool-notes { margin: 22px 0 0; padding-left: 18px; font-size: 14px; color: #5b6270; text-align: left; }
.sh-tool .sh-tool-notes:empty { display: none; }
.sh-tool .sh-tool-notes li { margin-bottom: 6px; list-style: disc; }
.sh-tool .sh-tool-more { margin-top: 20px; align-self: flex-start; }
.sh-tool .tax-summary-area { flex-direction: column; }
@media (max-width: 991px) { .sh-tool { margin-bottom: 100px; } }
.sh-tool .tax-disclaimer p, .sh-tool .tax-disclaimer strong { text-align: left; hyphens: none; max-width: none; }
.sh-tool .payable-tax h4 { text-align: center; }
/* Footer: six link columns since the free tools column (Oct 2026). */
.sh-footer .sh-footer-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 28px; }
@media (max-width: 1399px) { .sh-footer .sh-footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sh-footer .sh-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }
.sh-tool .payable-tax h4 { display: flex; justify-content: center; text-align: center; width: 100%; }
.sh-tool .tax-disclaimer strong { justify-content: flex-start; }
.sh-tool .sh-toggle, .sh-tool .sh-choice { padding-top: 4px; }
.sh-tool .form-inner2 .form-check-input { width: 20px; height: 20px; border: 1.5px solid #8a8f99; background-color: #fff; flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.sh-tool .form-inner2 .form-check { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; }
.sh-tool .form-inner2 .form-check-label { cursor: pointer; font-size: 16px; line-height: 1.4; }
/* Choice fields as pill buttons (radio stays for keyboard + screen readers). */
.sh-tool .tax-calculator-form-wrap .sh-choice ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sh-tool .tax-calculator-form-wrap .sh-choice ul li { margin: 0; }
.sh-tool .tax-calculator-form-wrap .sh-choice .form-check { position: relative; margin: 0; }
.sh-tool .tax-calculator-form-wrap .sh-choice .form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sh-tool .tax-calculator-form-wrap .sh-choice .form-check-label { display: inline-block; padding: 10px 18px; border: 1.5px solid #dcd8d1; border-radius: 100px; background: #fff; font-size: 15px; line-height: 1.3; color: var(--title-color); transition: background-color .15s, border-color .15s; }
.sh-tool .tax-calculator-form-wrap .sh-choice .form-check-input:checked + .form-check-label { background: var(--family-tint, #e2f4f2); border-color: var(--family-strong, #006afc); color: var(--family-ink, #1f2430); font-weight: 500; }
.sh-tool .tax-calculator-form-wrap .sh-choice .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--primary-color1, #006afc); outline-offset: 2px; }
.sh-tool .tax-calculator-form-wrap .sh-toggle .form-check-input { border-radius: 5px !important; }
.sh-tool .tax-calculator-form-wrap .sh-toggle .form-check-input:checked { background-color: var(--family-strong, #006afc); border-color: var(--family-strong, #006afc); }
.sh-tool .tax-summary-table td:last-child { padding-left: 12px; text-align: right; }


/* Header fit (Oct 2026): the theme's built-in spacing (22px caret space on every link, 0.4px letter-spacing,
   inline-block gaps, 90–115px logo gap) made the 8-item menu wider than the screen, and the logo was the
   flex item that shrank (down to 0–47px). Logo is now fixed; spacing is tightened; below 1600px the Home
   link is hidden (the logo links home) and below 1440px the header CTA (same link as the topbar and Contact). */
@media (min-width: 1200px) {
  header.style-1[class][class] .company-logo { flex: 0 0 auto; }
  header.style-1[class][class] .company-logo img { max-width: none; }
  header.style-1[class][class] .menu-wrap { gap: 40px; min-width: 0; }
  header.style-1[class][class] .nav-right { gap: 18px; flex: 0 0 auto; }
  header.style-1[class][class] .main-menu > ul { display: flex; flex-wrap: nowrap; align-items: center; }
  header.style-1[class][class] .main-menu > ul > li { padding-left: 9px; padding-right: 9px; white-space: nowrap; }
  header.style-1[class][class] .main-menu > ul > li > a { letter-spacing: 0; }
  header.style-1[class][class] .main-menu > ul > li:not(:has(> ul, > .mega-menu)) > a { padding-right: 0; }
  header.style-1[class][class] .main-menu > ul > li:has(> ul, > .mega-menu) > a { padding-right: 17px; }
}
@media (min-width: 1600px) {
  header.style-1[class][class] .menu-wrap { gap: 64px; }
  header.style-1[class][class] .main-menu > ul > li { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  header.style-1[class][class] .main-menu > ul > li:first-child { display: none; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  header.style-1[class][class] .nav-right > .primary-btn1, header.style-1[class][class] .nav-right > .primary-btn3 { display: none !important; }
  header.style-1[class][class] .main-menu > ul > li { padding-left: 7px; padding-right: 7px; }
  header.style-1[class][class] .main-menu > ul > li > a { font-size: 15px; }
}
@media (min-width: 1200px) {
  /* Home header phone: inner headers have none, and the number is in the footer and on Contact. */
  header.style-1[class][class] .nav-right > .contact-area { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
  header.style-1[class][class] .menu-wrap { gap: 24px; }
  header.style-1[class][class] .nav-right { gap: 12px; }
  header.style-1[class][class] .main-menu > ul > li { padding-left: 5px; padding-right: 5px; }
  header.style-1[class][class] .main-menu > ul > li > a { font-size: 14.5px; }
}
@media (min-width: 1200px) and (max-width: 1699px) {
  header.style-1[class][class] .nav-right > .primary-btn1 { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  header.style-1[class][class] .company-logo img { width: 156px; }
  header.style-1[class][class] .menu-wrap { gap: 16px; }
  header.style-1[class][class] .main-menu > ul > li { padding-left: 3px; padding-right: 3px; }
  header.style-1[class][class] .main-menu > ul > li > a { font-size: 14px; }
}
@media (min-width: 1200px) {
  /* Caret sits at the end of its own link (the theme placed it from the li edge, so it drifted with padding). */
  header.style-1[class][class] .main-menu > ul > li.menu-item-has-children > a { position: relative; padding-right: 16px; }
  header.style-1[class][class] .main-menu > ul > li.menu-item-has-children > a::before { right: 0; }
}

/* Team page (src/components/sections/Team.astro). */
.sh-team .team-card { height: 100%; display: flex; flex-direction: column; }
.sh-team .sh-avatar { aspect-ratio: 6 / 7; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: linear-gradient(160deg, var(--acc-tint, #f1f3f6) 0%, var(--acc-sky, #e5eefe) 100%); }
.sh-team .sh-avatar span { font-family: var(--font-inteTight); font-size: 64px; font-weight: 500; letter-spacing: .02em; color: var(--acc-deep, #2a3b4c); }
.sh-team .team-content { position: relative; }
.sh-team .team-content .sh-team-bio { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #5b6270; text-align: left; hyphens: none; }
.sh-team .team-content .social { margin-top: 14px; }

/* ---- Blog (src/components/blog/*): theme blog-details/blog1 layouts with Markdown bodies ----
   Markdown cannot carry the theme's classes, so the post body maps h2/h3/lists to the theme's blog-title,
   blog-sub-title and key-points look. */
.sh-post .blog-details-content-wrap .blog-author-meta { margin-bottom: 36px; }
.sh-post .author-info .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sh-post .sh-post-cat { color: var(--acc-ink); font-weight: 500; text-decoration: none; }
.sh-post .sh-post-cred { margin: 6px 0 0 !important; font-size: 14px !important; color: #5b6270 !important; line-height: 1.4 !important; }
.sh-post .sh-in-short { background: var(--acc-tint); border-radius: 12px; padding: 28px 30px; margin-bottom: 44px; }
.sh-post .sh-in-short .blog-sub-title { font-size: 22px; margin-bottom: 16px; }
.sh-post .sh-in-short .key-points li { margin-bottom: 12px; }
.sh-post .sh-in-short .key-points li p { margin: 0; color: var(--title-color); }
.sh-post .sh-post-body h2 { color: var(--title-color); font-family: var(--font-inteTight); font-weight: 500; font-size: 32px; line-height: 1.2; margin: 52px 0 18px; scroll-margin-top: 110px; }
.sh-post .sh-post-body h3 { color: var(--title-color); font-family: var(--font-inteTight); font-weight: 500; font-size: 23px; line-height: 1.3; margin: 34px 0 12px; scroll-margin-top: 110px; }
.sh-post .sh-post-body p, .sh-post .sh-post-body li { font-size: 17px; line-height: 1.7; color: var(--text-color); }
.sh-post .sh-post-body p { margin-bottom: 18px; }
.sh-post .sh-post-body ul, .sh-post .sh-post-body ol { margin: 0 0 22px; padding-left: 22px; }
.sh-post .sh-post-body ul li { list-style: disc; margin-bottom: 8px; }
.sh-post .sh-post-body ol li { list-style: decimal; margin-bottom: 8px; }
.sh-post .sh-post-body ul li::marker { color: var(--acc-strong); }
.sh-post .sh-post-body a { color: var(--sh-blue); text-decoration: underline; text-underline-offset: 3px; }
.sh-post .sh-post-body table { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: 15px; }
.sh-post .sh-post-body th { background: var(--acc-deep); color: #fff; font-weight: 500; text-align: left; padding: 12px 14px; }
.sh-post .sh-post-body td { padding: 11px 14px; border-bottom: 1px solid #e6e2dc; vertical-align: top; text-align: left; }
.sh-post .sh-post-body tr:nth-child(even) td { background: var(--acc-soft); }
.sh-post .sh-post-body .sh-table-wrap { overflow-x: auto; }
.sh-post .sh-post-sources { margin-top: 48px; padding-top: 32px; border-top: 1px solid #e6e2dc; }
.sh-post .sh-post-sources .blog-sub-title { font-size: 22px; margin-bottom: 14px; }
.sh-post .sh-post-sources ol { padding-left: 20px; margin: 0; }
.sh-post .sh-post-sources li { list-style: decimal; font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.sh-post .sh-post-sources a { color: var(--sh-blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.sh-post .sh-post-note { font-size: 14px !important; color: #5b6270 !important; margin-top: 14px; }
.sh-post .sh-post-cta { margin-top: 40px; padding: 30px; border-radius: 12px; background: var(--acc-deep); color: #fff; display: grid; gap: 20px; }
.sh-post .sh-post-cta h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.sh-post .sh-post-cta p { color: rgba(255,255,255,.85); margin: 0; text-align: left; }
.sh-post .sh-post-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.sh-post .sh-post-cta-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.sh-post .sh-post-sidebar { position: relative; }
.sh-post .sh-post-share { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sh-post .sh-post-share span { font-size: 14px; color: #5b6270; margin-right: 4px; }
.sh-post .sh-post-share ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sh-post .sh-post-share a { display: inline-block; padding: 6px 12px; border: 1px solid #dcd8d1; border-radius: 100px; font-size: 13px; color: var(--title-color); }
.sh-post .sh-post-share a:hover { border-color: var(--acc-strong); color: var(--acc-ink); }
@media (max-width: 991px) { .sh-post .sh-post-sidebar { position: static; } .sh-post .sh-post-body h2 { font-size: 27px; } }
.sh-blog-card .category { display: inline-block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--acc-ink, #3b5468); margin-bottom: 10px; }
.sh-blog-card .blog-img img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: 8px; }
.sh-blog-list .sh-blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 44px; padding: 0; list-style: none; }
.sh-blog-list .sh-blog-filter button { padding: 9px 18px; border: 1.5px solid #dcd8d1; border-radius: 100px; background: #fff; font-size: 15px; color: var(--title-color); }
.sh-blog-list .sh-blog-filter button.active { background: var(--acc-tint); border-color: var(--acc-strong); color: var(--acc-ink); font-weight: 500; }
.sh-blog-list [hidden] { display: none !important; }
.sh-blog-list .sh-blog-empty { font-size: 18px; color: #5b6270; }

/* Blog cards: short excerpts in narrow columns read better left-aligned (justify opens wide word gaps). */
.sh-page .sh-blog-card p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }

/* Home (bilingual, src/data/home.ts): service finder phone box, managing-partner card replacing the theme pie chart,
   WhatsApp/email links replacing the theme newsletter form. */
.home3-filter-wrapper .sh-finder-phone { display: block; font-weight: 600; color: inherit; white-space: nowrap; }
.home3-filter-wrapper .sh-finder-phone:hover { color: #006AFC; }
.why-choose-section .sh-founder-profile { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.why-choose-section .sh-founder-profile img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; }
.why-choose-section .sh-founder-name strong { display: block; font-size: 22px; }
.why-choose-section .sh-founder-name span { display: block; opacity: .8; }
.why-choose-section .sh-founder-link { display: inline-block; margin-top: 18px; font-weight: 600; color: #006AFC; }
.home3-contact-section .sh-contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
.home3-contact-section .sh-contact-links a { padding: 12px 22px; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; color: inherit; }
.home3-contact-section .sh-contact-links a:hover { background: #006AFC; border-color: #006AFC; color: #fff; }

/* Video section (src/components/sections/VideoSection.astro): vertical reels in cards, transcript under each. */
.sh-videos-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.sh-videos-head p { text-align: center; }
.sh-videos-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; align-items: start; }
.sh-video-card { background: #fff; border: 1px solid rgba(0,55,146,.14); border-radius: 18px; overflow: hidden; }
.sh-video-card video { display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; background: #1b2633; object-fit: cover; }
.sh-video-body { padding: 18px 20px 20px; }
.sh-video-body h3 { font-size: 19px; line-height: 1.35; margin-bottom: 6px; }
.sh-video-body p { text-align: left; hyphens: manual; }
.sh-video-meta { font-size: 14px; opacity: .7; margin-bottom: 10px; }
.sh-video-body details { margin-top: 12px; border-top: 1px solid rgba(0,55,146,.14); padding-top: 10px; }
.sh-video-body summary { cursor: pointer; font-weight: 600; color: #006AFC; }
.sh-video-transcript { margin-top: 10px; max-height: 320px; overflow-y: auto; font-size: 15px; }

/* Contact page while the form backend is off (site.formEnabled = false): direct contact buttons. */
.sh-direct-contact h3 { margin-bottom: 14px; }
.sh-direct-contact p { text-align: left; margin-bottom: 26px; }
.sh-direct-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* Home "What we do" stacked cards: one soft tone per card (user request 19 Oct: green, lilac, grey family). */
.home3-service-section .service-wrapper .service-card3[data-tone="0"] { background-color: #e4efe4; }
.home3-service-section .service-wrapper .service-card3[data-tone="1"] { background-color: #ece6f6; }
.home3-service-section .service-wrapper .service-card3[data-tone="2"] { background-color: #ecebe8; }
.home3-service-section .service-wrapper .service-card3[data-tone="3"] { background-color: #e3ebf5; }

/* Google reviews: a rating panel instead of the theme's photo (an office photo next to a client quote read oddly). */
.home3-testimonial-section .testimonial-card3 .sh-review-summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 450px; border-radius: 10px; padding: 40px 24px;
  background: url(../img/home3/home3-contact-section-bg.png) center / cover no-repeat, linear-gradient(160deg, #003792 0%, #0a4cc2 100%);
  color: #fff;
}
.home3-testimonial-section .testimonial-card3 .sh-review-summary img { width: 44px; height: 44px; min-height: 0; background: #fff; border-radius: 50%; padding: 8px; box-sizing: content-box; }
.home3-testimonial-section .testimonial-card3 .sh-review-summary strong { font-family: var(--font-inteTight); font-size: 96px; line-height: 1; font-weight: 500; color: #fff; }
.home3-testimonial-section .testimonial-card3 .sh-review-summary .sh-review-stars { color: #fbbc05; font-size: 28px; letter-spacing: 4px; }
.home3-testimonial-section .testimonial-card3 .sh-review-summary .sh-review-count { font-size: 17px; opacity: .9; }
.home3-testimonial-section .testimonial-card3 .sh-review-summary a { margin-top: 8px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.5); }
@media (max-width: 991px) { .home3-testimonial-section .testimonial-card3 .sh-review-summary { min-height: 260px; } }

/* A single video (e.g. the testimonial) sits beside its text instead of alone in a wide empty row. */
.sh-videos-grid[data-count="1"] { grid-template-columns: minmax(0, 1080px); }
.sh-videos-grid[data-count="1"] .sh-video-card { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; align-items: stretch; }
.sh-videos-grid[data-count="1"] .sh-video-card video { height: 100%; aspect-ratio: 9 / 16; }
.sh-videos-grid[data-count="1"] .sh-video-body { padding: 40px 44px; display: flex; flex-direction: column; }
.sh-videos-grid[data-count="1"] .sh-video-body h3 { font-size: 28px; }
.sh-videos-grid[data-count="1"] .sh-video-transcript { max-height: 330px; font-size: 16px; }
@media (max-width: 767px) {
  .sh-videos-grid[data-count="1"] .sh-video-card { grid-template-columns: 1fr; }
  .sh-videos-grid[data-count="1"] .sh-video-body { padding: 22px 20px; }
}

/* Equal cards (19 Oct): cards fill their column; variable-length titles take the slack so inner panels line up. */
.home3-challenge-section .row > [class*="col-"], .sh-page .row > [class*="col-"]:has(> .challenge-card2) { display: flex; }
.challenge-card2 { display: flex; flex-direction: column; width: 100%; height: 100%; }
.challenge-card2 .title-area { flex: 1 1 auto; }
.challenge-card2 .content { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; }

/* Blog cards: fixed line boxes for category, title and excerpt so images and "Read more" align across a row. */
.sh-blog-list .row > [class*="col-"] { display: flex; }
.sh-blog-card { display: flex; width: 100%; height: 100%; }
.sh-blog-card .blog-content { display: flex; flex-direction: column; width: 100%; height: 100%; }
.sh-blog-card .category { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; }
.sh-blog-card h2 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25 !important; min-height: 3.75em; }
.sh-blog-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 6.6em; }
.sh-blog-card .read-more-btn { margin-top: auto; }
.sh-blog-card .blog-img img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; }

/* Card hover (19 Oct): cards no longer flip to the brand navy on hover, which made them vanish on navy sections.
   One hover language everywhere: the card keeps its colours, lifts, gets a deeper shadow and a logo-blue top bar. */
:is(.service-card, .value-card, .industry-default-why-choose-card, .challenge-card2) { position: relative; transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
:is(.service-card, .value-card, .industry-default-why-choose-card, .challenge-card2)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #006afc; border-radius: inherit;
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease; z-index: 2;
}
:is(.service-card, .value-card, .industry-default-why-choose-card, .challenge-card2):hover { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(0, 25, 75, .35); }
:is(.service-card, .value-card, .industry-default-why-choose-card, .challenge-card2):hover::before { transform: scaleX(1); }
.service-card:hover { background-color: var(--white-color) !important; }
.service-card:hover, .service-card:hover :is(h2, h3, h4, p, span, li, a:not(.primary-btn1):not(.primary-btn2):not(.primary-btn3)) { color: var(--title-color) !important; }
.service-card:hover .service-desc, .service-card:hover .service-desc * { color: var(--text-color) !important; }
.service-card:hover .icon svg { fill: #006afc !important; }
.sh-page .solution-dt-overview-value-area .value-card:hover { background-color: var(--family-tint, #f1f3f6) !important; border-color: transparent; }
.sh-page .solution-dt-overview-value-area .value-card:hover *, .industry-default-why-choose-card:hover * { color: var(--title-color) !important; }
.sh-page .solution-dt-overview-value-area .value-card:hover p, .industry-default-why-choose-card:hover p { color: var(--text-color) !important; }
.industry-default-why-choose-section .industry-default-why-choose-card:hover { background-color: var(--white-color) !important; }
.challenge-card2:hover .content { background-color: var(--family-tint, #f1f3f6) !important; }
.challenge-card2:hover .content, .challenge-card2:hover .content * { color: var(--title-color) !important; }
.challenge-card2:hover .content ul li svg rect { fill: var(--family-strong, #006afc) !important; }
.challenge-card2:hover .content ul li svg path { fill: #fff !important; }
@media (prefers-reduced-motion: reduce) { :is(.service-card, .value-card, .industry-default-why-choose-card, .challenge-card2):hover { transform: none; } }