/* ================================================
   DeepConnects company-voice pages: additions on top of home.css.
   Loaded after home.css. Swaps the clay accent for the logo blue and
   adds the logo, the one-page layout of the homepage and the
   founders block. Backgrounds, fonts, cards and spacing stay exactly as
   they are on the live pages.
   ================================================ */

/* ── Accent: the logo blue ──
   Same selectors and specificity as the tokens in home.css; this file
   loads after it, so these values win in every theme state.
   Light: text accent #2453D8 is 6.0:1 on --bg and 5.5:1 on --bg-alt
   (the exact logo blue #2B5FF0 is 4.5:1 there, too tight for the .7rem
   labels). Fills keep the exact logo blue: white text on it is 5.25:1,
   6.4:1 on the #2453D8 hover.
   Dark: #7FA6FF is 7.3:1 on #1B1A18 and 6.4:1 on cards; fills stay the
   logo blue with white text, as the clay fills did in dark mode. */
:root {
  --accent:   #2453D8;
  --accent-2: #1F4BC8;
  --cyan:     #2453D8;
  --accent-fill:       #2B5FF0;
  --accent-fill-hover: #2453D8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:   #7FA6FF;
    --accent-2: #9DBBFF;
    --cyan:     #7FA6FF;
  }
}
:root[data-theme="dark"] {
  --accent:   #7FA6FF;
  --accent-2: #9DBBFF;
  --cyan:     #7FA6FF;
}

/* home.css writes these tints and shadows as raw clay rgba values rather
   than tokens, so they are restated here in the logo blue (43,95,240)
   at the same strengths. */
.svc-tag  { background: rgba(43,95,240,.08); border-color: rgba(43,95,240,.18); }
.proj-cat { background: rgba(43,95,240,.08); border-color: rgba(43,95,240,.2); }
.proj-tag { background: rgba(43,95,240,.08); border-color: rgba(43,95,240,.16); }
.pw-tag   { background: rgba(43,95,240,.08); border-color: rgba(43,95,240,.16); }
.pw-result { background: rgba(43,95,240,.06); border-color: rgba(43,95,240,.16); }
.ip-step-n { background: rgba(43,95,240,.1); border-color: rgba(43,95,240,.25); }
.ip-faq-q[aria-expanded="true"] .ip-faq-icon { background: rgba(43,95,240,.1); }
.ba-col.after { background: rgba(43,95,240,.06); border-color: rgba(43,95,240,.18); }
.compare-col.highlight { background: rgba(43,95,240,.05); }
.cs-toggle { background: rgba(43,95,240,.08); border-color: rgba(43,95,240,.2); }
.cs-toggle:hover { background: rgba(43,95,240,.14); border-color: var(--accent); }
.tag-pill { background: rgba(43,95,240,.08); border-color: rgba(43,95,240,.18); }
.tag-pill:hover { background: rgba(43,95,240,.16); border-color: var(--accent); }
.post-body a { text-decoration-color: rgba(43,95,240,.35); }
.dc-input:focus { box-shadow: 0 0 0 3px rgba(43,95,240,.15); }
.btn-wa, .btn-main, .btn-calendly { box-shadow: 0 2px 10px rgba(43,95,240,.25); }
.btn-wa:hover, .btn-main:hover, .btn-calendly:hover { box-shadow: 0 8px 24px rgba(43,95,240,.35); }
.cal-float { box-shadow: 0 4px 16px rgba(43,95,240,.4); }
.cal-float:hover { box-shadow: 0 8px 24px rgba(43,95,240,.5); }
/* The white WhatsApp button keeps no shadow; the rules above would
   otherwise reach it through its .btn-wa class. */
.btn-wa-secondary, .btn-wa-secondary:hover { box-shadow: none; }

/* ── Logo ──
   Two images, one per theme, swapped with the same selectors the theme
   tokens use in home.css, so the logo follows the toggle and the system
   setting exactly like the colours do. */
.h-logo-img img { height: 36px; width: auto; }
.logo-light { display: block; }
.logo-dark  { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark  { display: block; }
}
.ip-footer .h-logo-img img { height: 26px; }
@media (max-width: 768px) {
  .h-logo-img img { height: 30px; }
}
/* On a 320px phone the Blog link, theme toggle and menu button take about
   150px, so the wordmark has to give way. */
@media (max-width: 360px) {
  .h-logo-img img { height: 24px; }
}

/* D mark above the hero heading, where the photo used to be */
.hero-mark { margin-bottom: 1.5rem; }
.hero-mark img { height: 72px; width: auto; margin: 0 auto; }

/* ── One-page layout ──
   Homepage bands (.sec) hold the inner-page white cards (.ip-card) in a
   .card-stack, so the page keeps the alternating cream bands and the
   card style of the inner pages. */
.card-stack { width: 100%; display: flex; flex-direction: column; gap: 1.75rem; margin-top: 2rem; text-align: left; }
.sec-intro { max-width: 620px; margin: 0 auto; font-size: 1.08rem; }
.sec-cards .ip-btn-row { margin-top: 1.75rem; }
@media (max-width: 768px) {
  .card-stack { gap: 1.25rem; margin-top: 1.5rem; }
}

/* Jump links under the hero */
.chips-nav { margin: 1.75rem 0 0; }
a.chip { color: var(--text-2); text-decoration: none; transition: border-color .2s, color .2s; }
a.chip:hover, a.chip:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ── Who we are ── */
/* The scroll margin allows for the 28px the section's reveal animation
   still moves the block after a jump, so it settles below the header. */
.about-block { width: 100%; margin-top: 4rem; scroll-margin-top: 7rem; }
.founders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; width: 100%; margin-top: 1.75rem; text-align: left; }
.founders-grid .about-bio { margin-top: 0; height: 100%; }
.founder-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .85rem; }
.founder-links a { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; padding: .3rem 0; }
@media (max-width: 768px) {
  .about-block { margin-top: 3rem; }
  .founders-grid { grid-template-columns: 1fr; }
}

/* Post hero images are drawn dark now (pipeline/lib/hero.php), so the
   dark theme's glare filter for light screenshots would only dim them. */
:root[data-theme="dark"] .post-hero { filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .post-hero { filter: none; }
}

/* ── Header: section links and the Book button ──
   Tablets and up get the Book button in the bar; wide screens also get
   the section links, and keep the menu button only below that. */
.h-nav, .h-cta { display: none; }
.h-nav a { font-size: .88rem; font-weight: 600; color: var(--text-2); padding: .45rem .75rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 9px; text-decoration: none; transition: color .2s, background .2s; }
.h-nav a:hover { color: var(--accent); background: var(--tint); }
.h-cta { align-items: center; min-height: 40px; padding: .5rem 1.05rem; margin-left: .4rem; border-radius: 9px; background: var(--accent-fill); color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s; }
.h-cta:hover { background: var(--accent-fill-hover); color: #fff; }
.h-nav a:focus-visible, .h-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 769px) { .h-cta { display: inline-flex; } }
@media (min-width: 1025px) {
  .h-nav { display: flex; align-items: center; }
  .h-menu { display: none; }
}
.menu-nav .menu-link-cta { color: var(--accent); }

/* ── Phone action bar ──
   Replaces the two floating buttons. Like them, it slides away while the
   reader scrolls down (home.js sets .fab-away) and while a form field
   has focus, and the page gets room so it never covers the last line. */
.m-bar { display: none; }
@media (max-width: 768px) {
  .m-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    display: flex; gap: .5rem;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--bar-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    transition: transform .25s, opacity .25s;
  }
  .m-bar a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 10px; font-size: .92rem; font-weight: 600; text-decoration: none; }
  .m-bar-book { flex: 1; background: var(--accent-fill); color: #fff; }
  .m-bar-btn { padding: 0 .95rem; border: 1px solid var(--border-2); color: var(--text); }
  .m-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  body.fab-away .m-bar { transform: translateY(100%); opacity: 0; pointer-events: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Separate rules: a browser without :has() drops only these. */
  body:has(:is(input, textarea, select):focus) .m-bar { transform: translateY(100%); opacity: 0; pointer-events: none; }
  body:has(#ccBanner:not([hidden])) .m-bar { display: none; }
}

/* ── Hero ──
   Shown at once instead of waiting for the script and a 0.8s fade, which
   held back the page's largest paint. */
.js #top .sec-inner { opacity: 1; transform: none; transition: none; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.75rem 0 2.25rem; }
.contact-alt { font-size: .92rem; color: var(--text-2); margin: 1rem 0 0; }
@media (max-width: 768px) {
  .hero-ctas { flex-direction: column; align-items: stretch; max-width: 340px; margin-inline: auto; }
}
/* The call button now sits beside the Book button, not under WhatsApp. */
@media (min-width: 600px) { .contact-wrap .btn-wa-secondary { margin-left: .6rem; } }
.btn-wa-secondary:hover { border-color: var(--accent); }

/* ── Hub homepage and buyer pages ── */
.hero-h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); max-width: 21ch; margin-inline: auto; line-height: 1.06; }
.hero-note { font-size: .92rem; color: var(--text-2); margin: 0; }
.hero-ctas + .hero-note { margin-top: -1.25rem; margin-bottom: 1rem; }
.ip-hero .hero-note { margin-top: 1rem; }
.ip-note { font-size: .92rem; color: var(--text-2); margin-top: 1.25rem; }

/* Results: three lines of proof, each a link to its case study */
.results { list-style: none; margin: 0; padding: 0; text-align: left; }
.results li + li { border-top: 1px solid var(--border); }
.results a { display: block; padding: 1.1rem 0; color: var(--text-2); text-decoration: none; line-height: 1.6; }
.results strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--text); margin-bottom: .2rem; transition: color .2s; }
.results a:hover strong, .results a:focus-visible strong { color: var(--accent); }
.results li:first-child a { padding-top: 0; }

.blog-strip-wrap { width: 100%; text-align: left; }

/* Reminder templates: one click selects the whole text */
.tpl { margin: 1.25rem 0 0; }
.tpl figcaption { font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: .4rem; }
.tpl-text { margin: 0; padding: .9rem 1.1rem; background: var(--inset); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 1rem; line-height: 1.6; cursor: text; -webkit-user-select: all; user-select: all; }
.h-nav a[aria-current="page"] { color: var(--accent); background: var(--tint); }

/* ================================================
   Phase 4: navy neutrals, browser surfaces, quieter chrome
   ================================================ */

/* ── Neutrals tinted toward the logo navy ──
   The surfaces came from the old clay palette and read warm brown under
   a cool navy-and-blue logo. Contrast checked for every pair:
   dark  text 13:1+, text-2 9.6:1+, muted 6.8:1+, faint 5.2:1+ on every
         surface; cards now stand 1.13:1 off their band (was 1.05:1).
   light text 15:1+, text-2 8.8:1+, muted 5.5:1+, faint 4.9:1+.
   Placeholders use --faint, which now passes 4.5:1 in both themes. */
:root {
  --bg:        #F6F7F9;
  --bg-alt:    #EDF0F4;
  --card:      #FFFFFF;
  --inset:     #F6F7F9;
  --text:      #141A24;
  --text-2:    #394252;
  --muted:     #566173;
  --faint:     #5E697B;
  --border:    #E2E6EC;
  --border-2:  #D3D9E2;
  --shadow:        0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --shadow-hover:  0 6px 20px rgba(15,23,42,.09);
  --bar-bg:    rgba(246,247,249,.82);
  --overlay-bg: rgba(246,247,249,.98);
  --tint:      rgba(20,26,36,.05);
  --avatar-shadow: 0 1px 3px rgba(15,23,42,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0E1522;
    --bg-alt:    #121B2B;
    --card:      #1A2639;
    --inset:     #142034;
    --text:      #E9EEF6;
    --text-2:    #C5CFDE;
    --muted:     #A3AEC0;
    --faint:     #8C98AC;
    --border:    #26344C;
    --border-2:  #33445F;
    --shadow:        0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.35);
    --shadow-hover:  0 8px 24px rgba(0,0,0,.5);
    --bar-bg:    rgba(14,21,34,.82);
    --overlay-bg: rgba(14,21,34,.98);
    --tint:      rgba(233,238,246,.06);
    --avatar-shadow: 0 1px 3px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg:        #0E1522;
  --bg-alt:    #121B2B;
  --card:      #1A2639;
  --inset:     #142034;
  --text:      #E9EEF6;
  --text-2:    #C5CFDE;
  --muted:     #A3AEC0;
  --faint:     #8C98AC;
  --border:    #26344C;
  --border-2:  #33445F;
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.35);
  --shadow-hover:  0 8px 24px rgba(0,0,0,.5);
  --bar-bg:    rgba(14,21,34,.82);
  --overlay-bg: rgba(14,21,34,.98);
  --tint:      rgba(233,238,246,.06);
  --avatar-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* ── The browser's own surfaces, in the brand ── */
::selection { background: rgba(43,95,240,.3); color: inherit; }
html { caret-color: var(--accent); scrollbar-color: var(--border-2) var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-n, time, .ip-step-n, .results strong { font-variant-numeric: tabular-nums; }

/* ── Content shows as soon as it is on screen ──
   The fade-and-rise on every section and card (home.js adds .in-view)
   delayed what people came to read and hid it from full-page renders. */
.js .sec-inner, .js .ip-card { opacity: 1; transform: none; transition: none; }

/* ── Quieter chrome ──
   Labels above headings stay only where they say something, and as plain
   small text rather than tracked capitals. */
.ip-label { font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); margin-bottom: .5rem; }
.tools-label { font-size: .85rem; letter-spacing: 0; text-transform: none; }

/* Cards you cannot click do not lift on hover. */
.svc-card:hover, .ip-item:hover { transform: none; box-shadow: var(--shadow); }

/* No card inside a card: items and FAQ rows inside a card become plain
   rows with a rule between them. */
.ip-card .ip-item { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 1.25rem 0 0; box-shadow: none; }
.ip-card .ip-item:hover { box-shadow: none; }
.ip-card .ip-faq { gap: 0; }
.ip-card .ip-faq-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.ip-card .ip-faq-item:has(.ip-faq-q[aria-expanded="true"]) { box-shadow: none; }
.ip-card .ip-faq-q, .ip-card .ip-faq-a { padding-left: 0; padding-right: 0; }

/* ── Left-aligned sections ──
   Headings and intros read from the left like the text under them. The
   hero and the closing contact block stay centred. */
.sec:not(#top):not(#contact) .sec-inner { align-items: flex-start; text-align: left; }
.sec:not(#top):not(#contact) .sec-intro { margin-left: 0; }
.sec:not(#top):not(#contact) .tools-label { text-align: left; }
.sec:not(#top):not(#contact) .tools-row { justify-content: flex-start; }

/* Section labels on the homepage: plain small text like .ip-label, not
   tracked capitals. */
.sec-tag { font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Calendly bubble: bottom right on tablets and desktops. Phones have the
   bottom bar with the same booking link, so it stays hidden there. */
.cal-float { left: auto; right: 1.75rem; }
@media (max-width: 768px) { .cal-float { display: none; } }