/* ===== base.css ===== */
/* Cognim — base styles (reset, typography, shared tokens).
   Authored from the Stage 0/4 computed-style extraction; no legacy
   code was copied. */

/* Self-hosted Open Sans (Google font the baseline loads; used for the
   nav menu and the 404 figure). Served locally — no runtime CDN. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/open-sans-300.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/open-sans-400.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/open-sans-600.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/open-sans-700.ttf") format("truetype");
}

:root {
  --c-accent: #f96e5b;
  --c-text: #777;
  --c-body: var(--c-text);
  --c-heading: #444;
  --c-muted: #888;
  --c-heading-2: #334444;
  --c-line: #e8e8e8;
  --c-line-2: #e5e5e5;
  --c-band: #f7f7f7;
  --c-footer: #282a2b;
  --c-footer-text: #ddd;
  --font-body: Verdana, Geneva, sans-serif;
  --font-title: "Open Sans", Arial, Helvetica, sans-serif;
  --container-max: 1170px;
  --container-pad: 15px;
  --t-condense: .2s ease; /* header sticky/condense transition */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 13px/1.3 var(--font-body);
  color: var(--c-text);
  background: #fff;
  border-top: 3px solid var(--c-accent);
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--c-heading);
  margin: 0 0 10px;
}
h1 { font-size: 28px; line-height: 38px; }
h2 { font-size: 22px; line-height: 32px; }
h3 { font-size: 18px; line-height: 28px; }
h4 { font-size: 16px; line-height: 26px; }
h5 { font-size: 14px; line-height: 24px; }
h6 { font-size: 12px; line-height: 22px; }

p { margin: 0 0 10px; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent); }

ul, ol { margin: 0 0 10px; padding: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

@media (min-width: 1159px) {
  .container { padding-left: 0; padding-right: 0; }
}

/* Inline icon helper: sizes to the font, inherits colour. */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
}

/* Shared section-title variants. */
.title-outer { margin-bottom: 20px; }
.title-outer h3 {
  display: inline-block;
  font-size: 12px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 4px;
  margin: 0;
}
.title-outer h3::after { content: ""; }
/* Home-page 25px centred variant (OUR SERVICES / LATEST / TESTIMONIALS). */
.title-outer.pos-center { text-align: center; }
.title-outer.pos-center h3.section-title {
  font-size: 25px;
  line-height: 48px;
  color: #232323;
  border-bottom: 1px solid #232323;
  text-transform: uppercase;
  padding-bottom: 0;
}

/* Page-title band (inner pages). */
#page-title {
  background-color: var(--c-band);
  padding: 5px 0;
}
#page-title .container { position: relative; }
#page-title .portfolio-navigation {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -25px;
  height: 40px;
  display: flex;
  align-items: center;
}
.portfolio-navigation a {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: var(--c-heading-2);
}
.portfolio-navigation a + a { margin-left: 5px; }
.page_title_inner { background: #f9f9f9; padding: 15px 0; position: relative; }

/* Centered section titles carry a full-width hairline behind the
   coral underline (theme demo sections). */
.title-outer.center { position: relative; text-align: center; padding-bottom: 1px; }
.title-outer.center::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  border-top: 1px solid #e5e5e5;
}
.page-band-title, .post-band-title {
  font-size: 24px;
  line-height: 28px;
  margin: 0;
  color: var(--c-heading);
}
.breadcrumbs {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 16.9px;
  color: var(--c-muted);
}
.breadcrumbs li {
  display: inline-block;
  font-size: 12px;
  font-style: italic;
}
.breadcrumbs li + li::before {
  content: "/";
  font-style: normal;
  margin: 0 5px;
  color: var(--c-muted);
}
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs li[aria-current="page"] { font-style: normal; }

/* Buttons. */
.simple-button {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: 3px;
  font: 400 12px var(--font-body);
  padding: 10px 15px;
  cursor: pointer;
}
.simple-button:hover { background: #333; color: #fff; }

/* Mobile: the prev/next post chevrons sit as a centred row under the
   breadcrumb (theme moves them out of the right-absolute desktop position). */
@media (max-width: 767px) {
  #page-title .portfolio-navigation {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    margin: 9px auto 0;
    height: auto;
    justify-content: center;
  }
  /* Baseline mobile post band shows large centred chevrons. */
  #page-title .portfolio-navigation a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 40px;
  }
}

/* Mobile: prevent any wide carousel/stage from widening the page. */
@media (max-width: 767px) {
  html { overflow-x: hidden; }
}

/* ===== layout.css ===== */
/* Cognim — layout: top bar, header, content grid, footer, responsive. */

/* Top bar --------------------------------------------------------- */
#top-bar {
  background: var(--c-band);
  border-bottom: 1px solid var(--c-line);
  height: 40px;
  font-size: 12px;
  line-height: 40px;
}
#top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
#top-bar a { color: #777; }
#top-bar a:hover { color: var(--c-accent); }
.top-menu {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  height: 40px;
}
.top-menu .mail {
  display: inline-block;
  margin-left: 7px;
  height: 40px;
}
.top-menu svg.ic { font-size: 14px; }
.top-menu .top-sep {
  width: 1px;
  height: 18px;
  background: #ddd;
  margin-left: 26px;
}
.top-social {
  list-style: none;
  margin: 0;
  display: flex;
  height: 40px;
}
.top-social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #4a4a4a;
}
.top-social svg.ic { font-size: 15px; }
.top-social li a:hover { color: var(--c-accent); }

/* Header ----------------------------------------------------------- */
#header {
  position: relative;
  z-index: 205;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  /* Theme "shadow" header class: soft drop shadow under the header. */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
#header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 97px;
}
#logo img {
  display: block;
  width: 284px;
  height: 75px;
  margin-top: 0;
}
#toggle-nav { display: none; }
#nav { margin-left: auto; }
#nav ul { list-style: none; display: flex; margin: 0; }
#nav a {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: 97px;
  color: var(--c-heading);
  padding: 0 12px;
}
#nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 2px;
  background: var(--c-accent);
  opacity: 0;
  transition: opacity .2s ease;
}
#nav a:hover {
  color: var(--c-accent);
}
#nav a:hover::after {
  opacity: 1;
}

/* Sticky header — desktop only. Two-stage condense matching the original:
   past the top bar, #header pins to the top (logo 70px); past the header's
   own height, it condenses to 81px (logo 60px). Pinning uses position:
   sticky, so the header stays in the flow and its position is driven
   directly by the scroll position - there is no fixed/in-flow swap, so no
   scroll-anchoring or paint-order flicker (the logo never appears part-way
   off the top). The .header-spacer compensates for the condense shrinkage,
   transitioning in sync with the header's min-height so the content offset
   stays constant at 98px. */
@media (min-width: 980px) {
  #header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .header-spacer {
    height: 0;
    transition: height var(--t-condense);
  }
  /* In-page anchor targets must clear the sticky header. */
  html { scroll-padding-top: 98px; }
  #logo img { transition: height var(--t-condense), width var(--t-condense); }
  #header .container { transition: min-height var(--t-condense); }
  #nav a { transition: line-height var(--t-condense); }
  body.is-sticky #logo img { height: 70px; width: auto; }
  /* Stage 2: condense to 82px; the spacer compensates (0 -> 16px, in sync)
     so the content offset stays 98px. */
  body.is-reduced #header .container { min-height: 81px; }
  body.is-reduced #logo img { height: 60px; width: auto; }
  body.is-reduced #nav a { line-height: 81px; }
  body.is-reduced .header-spacer { height: 16px; }
  /* Nav underline stays just below the text: 40px - (97px - 81px) / 2. */
  body.is-reduced #nav a::after { bottom: 32px; }
}

/* Mobile menu (revealed by main.js below 768px). */
#mobile-menu { display: none; }
#mobile-menu nav ul {
  list-style: none;
  border-top: 1px solid var(--c-line);
}
#mobile-menu nav a {
  display: block;
  padding: 12px 15px;
  background: var(--c-band);
  font-size: 13px;
  color: var(--c-heading);
}

/* Content area ------------------------------------------------------ */
.content-wrap { padding: 40px 0; }
.content-wrap .container { display: block; }

.post-layout, .blog-layout { display: flex; align-items: flex-start; }
.post-layout .postcontent, .blog-layout .postcontent {
  width: 800px;
  flex: none;
}
.post-layout .sidebar, .blog-layout .sidebar {
  width: 330px;
  flex: none;
  margin-left: 40px;
}

/* Footer ------------------------------------------------------------- */
#footer-wrap { background: var(--c-footer); }
.copyrights { padding: 23px 30px 22px; }
.copyrights .container { padding: 0; }
.copyright {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--c-footer-text);
}

/* Back-to-top (shown by main.js after scrolling). */
#gotoTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 3px;
  background: var(--c-accent);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease;
}
#gotoTop[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1158px) {
  .post-layout, .blog-layout { flex-wrap: wrap; }
  .post-layout .postcontent, .blog-layout .postcontent { width: 100%; }
  .post-layout .sidebar, .blog-layout .sidebar {
    width: 100%;
    margin-left: 0;
    margin-top: 50px;
  }
}

@media (min-width: 768px) and (max-width: 1158px) {
  .container {
    max-width: 960px;
    padding-left: 0;
    padding-right: 0;
  }
  .post-layout, .blog-layout { flex-wrap: nowrap; }
  .post-layout .postcontent, .blog-layout .postcontent { width: 75%; }
  .post-layout .sidebar, .blog-layout .sidebar {
    width: calc(25% - 30px);
    margin-left: 30px;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .container {
    width: 340px;
    max-width: calc(100% - 35px);
    padding-left: 0;
    padding-right: 0;
  }
  #top-bar {
    height: 101px;
  }
  #top-bar .container {
    display: block;
    height: 100px;
  }
  #top-bar .leftalign,
  #top-bar .rightalign {
    width: 280px;
    margin-left: 30px;
  }
  /* 404 page: the legacy 4!4 template carries a taller mobile header
     (email top, LinkedIn mid, logo low). Approximate the heights so the
     4!4 figure and search box align with the frozen reference. */
  body.error404 #top-bar { height: 217px; }
  body.error404 #top-bar .container { height: 216px; }
  body.error404 #top-bar .top-social { margin-top: 92px; }
  body.error404 #top-bar .top-social .ic { width: 40px; height: 40px; }
  body.error404 #header .container { min-height: 363px; align-items: flex-start; }
  body.error404 #logo img { margin-top: 128px; }
  body.error404 #toggle-nav { margin-top: 0; height: 322px; width: 92px; position: relative; }
  body.error404 #toggle-nav .ic { position: absolute; top: 92px; right: 40px; width: 34px; height: 34px; }
  body.error404 #toggle-nav span { position: absolute; top: 258px; right: 8px; font-size: 30px; font-weight: 400; }
  #top-bar .top-menu,
  #top-bar .top-social {
    justify-content: center;
  }
  #header .container {
    min-height: 110px;
  }
  #logo img {
    width: 188px;
    height: 50px;
    margin-top: 0;
  }
  #toggle-nav {
    width: 87px;
    height: 70px;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  #page-title {
    min-height: 151px;
    /* Baseline mobile: the band sits 5px below the header (shadow gap). */
    margin-top: 5px;
  }
  .content-wrap { padding: 41px 0; }

  /* Raw mobile footer: #copyrights { padding: 20px; } — wider box so the
     copyright line stays on one line. */
  .copyrights { padding: 20px; }
  .post-layout .sidebar,
  .blog-layout .sidebar { margin-top: 40px; }
  #nav { display: none; }
  #toggle-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-heading);
    font-size: 28px;
    line-height: 1;
    margin-right: 0;
  }
  #mobile-menu { display: block; }
  #mobile-menu[hidden] { display: none; }
}

/* ===== components.css ===== */
/* Cognim — components: post cards, meta, share, comments, sidebar,
   forms, 404, testimonials, home sections. */

/* Entry meta row ---------------------------------------------------- */
.entry-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 15px;
}
.postcontent > .entry > .entry-meta {
  display: block;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 10px;
  font-size: 13px;
  line-height: 16.9px;
  position: relative;
}
.postcontent > .entry > .entry-meta li {
  display: list-item;
  float: left;
  margin-bottom: 3px;
}
.postcontent > .entry > .entry-meta::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.entry-meta li {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
}
.entry-meta svg.ic { font-size: 14px; margin-right: 5px; }
/* The legacy FA comment glyph sits slightly lower in the line box than the
   user/bookmark glyphs (line box 16.59px vs 16.89px). Nudge the SVG comment
   icon down to match so the comments meta row height matches the baseline. */
.entry-meta .ic-comment { vertical-align: -0.146em; }
/* Icon box widths mirror the legacy FA glyph advances measured from the
   original site (user 12px, bookmark 11px, comment 14px at 14px font) so
   meta rows wrap exactly like the baseline. */
.entry-meta .ic-user { width: 0.857em; }
.entry-meta .ic-bookmark { width: 0.786em; }
.entry-meta .meta-sep, .entry-meta > li > span:last-child {
  margin-left: 7px;
  font-size: 13px;
}
.entry-meta a { color: var(--c-muted); }
.entry-meta a:hover { color: var(--c-accent); }

/* Date badges --------------------------------------------------------- */
.entry-date {
  width: 50px;
  background: var(--c-accent);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  flex: none;
}
.entry-date .month { display: block; font-size: 14px; line-height: 1; padding: 2px 0; font-weight: 600; }
.entry-date .day { display: block; font-size: 20px; line-height: 1; padding: 0; font-weight: 600; }
.entry-date .year { display: block; font-size: 14px; line-height: 1; padding: 4px 0; font-weight: 600; }

.entry-date-thin {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 60px;
  background: var(--c-accent);
  color: #fff;
  text-align: center;
  text-transform: none;
}
.entry-date-thin .day { display: block; font-size: 24px; line-height: 34px; font-weight: 600; }
.entry-date-thin .month { display: block; font-size: 16px; line-height: 26px; font-weight: 600; }

/* Blog list teasers ----------------------------------------------------- */
.small-posts .entry {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 0 0 30px;
  margin-bottom: 30px;
  border-bottom: 3px double #e5e5e5;
}
.entry-image {
  width: 300px;
  flex: none;
}
.entry-image .slider-wrap { display: block; }
.entry-image .slide { display: block; }
.entry-image img {
  display: block;
  width: 300px;
  height: 200px;
  object-fit: cover;
}
.entry-date { margin-left: 20px; margin-top: 0; }
.small-posts .entry-date { margin: 0 10px 0 0; float: left; }
.entry-c {
  width: 480px;
  margin-left: 20px;
}
.entry-title {
  font-size: 16px;
  line-height: 20px;
  color: var(--c-heading);
  margin: 0 0 11px;
}
.entry-title a { color: var(--c-heading); }
.entry-title a:hover { color: var(--c-accent); }
.small-posts .entry-title { margin-bottom: 10px; }
.small-posts .entry-meta {
  display: block;
  font-size: 12px;
  line-height: 15.6px;
  margin: 10px 0;
  position: relative;
}
.small-posts .entry-meta li {
  display: list-item;
  float: left;
  margin: 0 7px 3px 0;
}
.small-posts .entry-meta::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.entry-excerpt { margin-bottom: 8px; }
.small-posts .entry-excerpt { padding-top: 10px; margin-bottom: 0; }
.continue-reading { margin: 0; font-size: 13px; color: var(--c-heading-2); }
.continue-reading a { color: var(--c-heading-2); }
.continue-reading a:hover { color: var(--c-accent); }

/* Pagination ------------------------------------------------------------ */
/* Legacy .pagination is a plain block whose buttons are display:inline.
   The inline box baseline geometry places the buttons 22px below the last
   entry (30px collapsed margin minus the 8px inline overhang). Keep the
   inline (not inline-block/flex) model to preserve that baseline alignment. */
.blog-pagination {
  display: block;
  margin-top: 30px;
}
.blog-pagination .page-numbers {
  display: inline;
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  font-size: 13px;
  color: var(--c-text);
  background: #fff;
  text-decoration: none;
}
.blog-pagination .page-numbers:hover { background: #f5f5f5; }
.blog-pagination .current {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* Post body ------------------------------------------------------------- */
/* Values mirror the frozen baseline (db047a8): body Verdana 13/16.9, p 20px
   bottom, headings Verdana with bottom padding, pre Consolas 12/19. */
.entry-content { margin-top: 0; padding-top: 10px; font: 400 13px/1.3 var(--font-body); color: var(--c-body); }
.entry-content h3 { margin: 0; padding-bottom: 15px; font-size: 18px; line-height: 28px; font-weight: 400; color: #444; }
.entry-content h4 { margin: 0; padding-bottom: 20px; font-size: 16px; line-height: 22px; font-weight: 400; color: #444; }
.entry-content p { margin: 0 0 20px; }
.entry-content ul, .entry-content ol {
  margin: 0 0 20px;
  padding-left: 40px;
}
.entry-content li { margin-bottom: 3px; }
.entry-content blockquote {
  margin: 0 0 20px;
  padding: 10px 15px;
  border-left: 3px solid var(--c-accent);
  background: #f9f9f9;
}
.entry-content code {
  font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
  font-size: 12px;
  padding: 5px;
  background: #f9f9f9;
  color: #666;
}
.entry-content pre {
  font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
  font-size: 12px;
  line-height: 19px;
  color: #666;
  background: transparent;
  border: 0;
  margin: 0 0 20px;
  padding: 0 10px;
  overflow-x: auto;
}
.entry-content pre code {
  display: block;
  font-size: 12px;
  line-height: 19px;
  padding: 5px;
  background: #f9f9f9;
  color: #666;
}
.entry-content img { display: block; margin: 10px auto; max-width: 100%; }
/* Legacy content JSON carries fixed inline widths on wp-caption divs;
   constrain them to the content column so posts never overflow the
   viewport at tablet/mobile widths (D-011). Desktop keeps the legacy
   wide-image presentation. */
@media (max-width: 1024px) {
  .entry-content .wp-caption {
    width: auto !important;
    max-width: 100%;
  }
}
/* Long unbreakable tokens (e.g. DAX expressions) wrap instead of
   widening the document (D-011). */
.entry-content p { overflow-wrap: break-word; }
.entry-content table { border-collapse: collapse; margin: 0 0 20px; }
.entry-content a { color: var(--c-accent); }

/* Sharing (Share this / Like this) ------------------------------------ */
.share-panel { margin-top: 20px; }
.share-title {
  min-height: 42px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #444;
  border-top: 1px solid #dcdcde;
  padding-top: 15px;
  margin-bottom: 12px;
}
.share-list {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0 0 27px;
}
.share-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
}
.share-list a:hover { transform: translateY(-2px); }
.share-x { background: #0b0c0f; }
.share-linkedin { background: #0077b5; }
.share-facebook { background: #1877f2; }
.share-reddit { background: #FF4500; color: #fff; }
.share-pinterest { background: #bd081c; }
.share-tumblr { background: #354052; }
.share-email { background: #5b6b7d; color: #fff; }
.share-print { background: #6b7280; color: #fff; }

/* Like box (local toggle; see main.js). */
.like-box {
  min-height: 59px;
  border: 1px solid transparent;
}
.like-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font: 400 12px var(--font-body);
  padding: 7px 13px;
  cursor: pointer;
}
.like-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); }
.like-toggle[aria-pressed="true"] {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: #fff6f4;
}
.like-toggle svg.ic { font-size: 13px; }

/* Entry tags ------------------------------------------------------------- */
.entry-tags { margin-top: 0; }
.entry-tags a {
  display: inline-block;
  background: #ececec;
  color: #666;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 3px 9px;
  margin: 0 2px 4px 0;
}
.entry-tags a:hover { background: var(--c-accent); color: #fff; }

/* Related posts ------------------------------------------------------------- */
.related-carousel { position: relative; overflow: hidden; }
.related-posts-wrap .title-outer h3 { line-height: 19.7px; }
.related-posts-wrap .rpost-title {
  font-size: 16px;
  line-height: 20.8px;
  font-weight: 400;
  margin-top: 10px;
}
.related-carousel .cstage { will-change: transform; }
.post-separator {
  border-top: 1px solid var(--c-line-2);
  margin: 24px 0 38px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 0;
}
.related-card { display: block; }
.rpost-image {
  position: relative;
  display: block;
  aspect-ratio: 1.468;
  overflow: hidden;
}
.rpost-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rpost-camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: var(--c-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 3px;
}
.rpost-title {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #333;
}
.related-card:hover .rpost-title { color: var(--c-accent); }
.related-prev, .related-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: #ccc;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.related-prev { left: -8px; }
.related-next { right: -8px; }
.related-prev:hover, .related-next:hover { color: var(--c-accent); }

/* Commenting area ------------------------------------------------------------ */
.commenting-area {
  margin-top: 30px;
}
.comment-list { list-style: none; margin: 0; }
.comment-list .comment { padding: 25px 0 0; }
.comment-list .comment + .comment,
.comment-list .children .comment { border-top: 1px solid var(--c-line-2); }
.comment-wrap { display: flex; align-items: flex-start; }
.comment-avatar {
  flex: none;
  margin: 0 15px 0 10px;
  display: block;
}
.comment-avatar img {
  width: 55px;
  height: 55px;
  border-radius: 3px;
  display: block;
}
.comment-author { width: 55px; }
.comment-content { flex: 1; padding-left: 15px; }
.comment-author-line {
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 14px;
  text-transform: uppercase;
  color: #aaa;
}
.comment-content .fn {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 2px;
}
.comment-author-date a {
  color: #aaa;
  border-bottom: 1px dotted #ccc;
}
.comment-author-date a:hover { color: var(--c-accent); }
.comment-content p { margin: 8px 0; }
.comment-content, .comment-content code, .comment-content pre { overflow-wrap: break-word; word-break: break-word; }
.comment-content pre { white-space: pre-wrap; }
.comment-list .children {
  list-style: none;
  margin: 0;
  padding-left: 65px;
}
.comment-list .children .comment { padding-top: 25px; }

/* Comment form ------------------------------------------------------------------- */
.commenting-area > .title-outer { display: none; }
#respond { margin-top: 0; }
#respond h3 { font-size: 18px; line-height: 28px; margin: 0; }
#respond .comment-reply-title { margin-bottom: 34px; }
/* Inline "Comments are coming soon" status note revealed on submit. */
.comment-coming-soon {
  margin: 4px 0 12px;
  font-weight: 600;
  color: var(--c-muted);
}
.comment-form .col_full { margin-top: 0; margin-bottom: 15px; }
.comment-form textarea {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px solid #dcdcde;
  border-radius: 2px;
  padding: 8px 10px;
  font: 400 13px/1.3 var(--font-body);
  color: #666;
  resize: vertical;
}
.comment-form label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #666;
}
.comment-form label small { color: #999; }
.comment-form input[type="text"] {
  display: block;
  width: 100%;
  height: 36px;
  border: 1px solid #dcdcde;
  border-radius: 2px;
  padding: 0 10px;
  font: 400 13px var(--font-body);
  color: #666;
}
.col_one_third { width: 30.625%; float: left; margin-right: 4%; margin-top: 0; margin-bottom: 15px; }
.col_one_third.col_last { margin-right: 0; float: right; }
.col_full { clear: both; margin-top: 15px; }
.comment-subscription-form {
  clear: both;
  margin: 10px 0 0;
  font-size: 13px;
  color: #666;
}
.comment-subscription-form input {
  width: auto;
  margin: 0 7px 0 0;
  vertical-align: middle;
}
.comment-subscription-form label {
  display: inline-block;
  font-size: 12px;
  line-height: 15.6px;
  margin: 0 0 5px;
}
.form-submit { clear: both; height: 44px; margin: 10px 0 0; }
.form-submit button { margin: 5px 5px 5px 0; }

/* Sidebar -------------------------------------------------------------------------- */
.sidebar .title-outer {
  position: relative;
  top: 1px;
  margin-bottom: 20px;
}
.sidebar .widget + .widget .title-outer { padding-top: 30px; }
.sidebar .title-outer h3 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 18.7px;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 5px;
}
.sidebar .widget + .widget { margin-top: 20px; }
.sidebar ul { list-style: none; }
.sidebar ul li {
  position: relative;
  font-size: 13px;
  line-height: 1.3;
  padding: 0;
  margin-bottom: 8px;
}
.sidebar ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-muted);
}
.sidebar ul li a {
  display: inline-block;
  padding-left: 20px;
  color: var(--c-text);
}
.sidebar ul li a:hover { color: var(--c-accent); }
.widget-top-posts .views {
  padding-bottom: 10px;
  font-size: 11px;
  color: #999;
}
.widget-authors p { margin: 0; font-size: 13px; }
.widget-authors p:last-child { margin-bottom: 20px; }
.widget-rss { min-height: 69px; }
.widget-authors a { color: var(--c-accent); }

@media (min-width: 1159px) {
  .sidebar .widget-authors { height: 99px; }
  .sidebar .widget-recent-posts { height: 247px; }
  .sidebar .widget-rss { height: 69px; }
  .sidebar .widget-top-posts { height: 601px; }
}

/* Home page -------------------------------------------------------------------------- */
.home-banner { width: 100%; }
.home-banner img {
  display: block;
  /* Natural size (1906px); caps to the viewport when narrower, centered —
     matches the original at all widths. */
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.home-services {
  background: #f9f9f9;
  padding: 50px 0 20px;
  margin-top: 30px;
}
.services-intro {
  max-width: 900px;
  margin: 0 auto 0;
  text-align: center;
}
.services-intro p { margin-bottom: 0; }
.services-intro a { color: inherit; }
/* keep the original two-line service introduction */
.services-intro p {
  font-size: 13px;
  line-height: 1.3;
}
/* Full-width grey band; the card row is constrained to the content
   container (3 x 370px cards with 30px gaps), matching the original. */
.home-service-cards {
  background: #f9f9f9;
}
.home-service-cards-row {
  display: flex;
  gap: 30px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.service-card {
  flex: 1;
  min-height: 360px;
  text-align: center;
  padding: 19px 15px 0;
  border: 1px solid #efefef;
  overflow: hidden; /* clips the slide-in elements while they are outside the border */
  transition: background-color .3s ease;
}
/* Hover reaction (owner-refined): the accent background and the white
   icon/title/sub fade in over .3s and fade back out on mouseleave. On hover
   the icon and sub slide in from the left and the header from the right,
   starting hidden outside the card border (overflow: hidden) and fading in.
   The !important overrides the per-card inline icon colour. */
.service-card:hover { background: var(--c-accent); }
.service-card:hover .ca-icon { color: #fff !important; }
.service-card:hover .ca-main { color: #fff; }
.service-card:hover .ca-sub { color: #fff; }
.service-card .ca-icon, .service-card .ca-main, .service-card .ca-sub {
  transition: color .3s ease;
}
.service-card:hover .ca-icon { animation: svc-slide-left .4s ease; }
.service-card:hover .ca-main { animation: svc-slide-right .4s ease; }
.service-card:hover .ca-sub { animation: svc-slide-left .4s ease; }
@keyframes svc-slide-left {
  from { transform: translateX(-120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes svc-slide-right {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.ca-icon {
  display: inline-block;
  width: 100%;
  height: 121px;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 0;
}
.ca-icon svg.ic {
  width: 52px;
  height: 42px;
  position: relative;
  top: 37px;
}
.ca-main {
  display: block;
  font-size: 20px;
  line-height: 24px;
  color: var(--c-heading-2);
  margin-bottom: 24px;
}
.ca-sub {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text);
}
.home-latest { padding: 50px 0 60px; }
.ipost-grid {
  max-width: var(--container-max);
  margin: 60px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 358.36px);
  column-gap: 46.8px;
  row-gap: 45px;
}
.ipost { display: block; position: relative; }
.ipost-image {
  display: block;
  height: 225px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}
.ipost-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ipost-title {
  font-size: 18px;
  line-height: 28px;
  color: var(--c-heading);
  margin-bottom: 10px;
}
.ipost-title h5 { font-size: 18px; line-height: 28px; margin: 0; font-weight: 400; }
.ipost:hover .ipost-title, .ipost:hover .ipost-title h5 { color: var(--c-accent); }
.ipost-content {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Testimonials ------------------------------------------------------------------------- */
.home-testimonials { padding: 50px 0 49px; }
.testi-columns {
  max-width: var(--container-max);
  margin: 35px auto 0;
  padding: 0 15px;
  display: flex;
  gap: 30px;
}
.testimonial-scroller { flex: 1; position: relative; overflow: hidden; }
/* Slide-in: main.js drives .cstage transform; without a transition the
   carousel jumps. The initial show(0) sets translateX(0), so no load
   animation occurs. */
.testimonial-scroller .cstage { transition: transform .6s ease; }
/* Paused highlight: while the scroller is hovered (autoplay paused) the
   current item gets a faint warm tint - subtle, no ring (a ring reads as
   clickable). */
.testimonial-scroller:hover .testimonial-item.is-current {
  background: rgba(249, 110, 91, 0.07);
}
.home-testimonials .testi-columns { padding: 0; margin-top: 45px; }
.home-testimonials .testimonial-scroller { padding-top: 40px; }
.testimonial-item {
  background: #fff;
  border: 1px solid #e7ebef;
  padding: 15px;
}
.testi-content {
  font-size: 13px;
  line-height: 16.6px;
  color: #222;
}
.testi-author {
  margin-top: 15px;
  font-size: 13px;
  font-weight: 600;
  color: #222;
}
.testi-author span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: #999;
  margin-top: 2px;
}

/* 404 ------------------------------------------------------------------------------------- */
.error404-page {
  text-align: center;
  padding: 40px 0 60px;
}
.error404-page > span {
  display: block;
  font-size: 32px;
  line-height: 32px;
  color: var(--c-heading);
}
.nf-404 {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 216px;
  line-height: 1;
  color: #34495e;
  margin: 10px 0 25px;
}

@media (max-width: 1024px) {
  .entry-date .month, .entry-date .year { font-size: 12px; font-weight: 500; }
  .entry-date .day { font-size: 20px; font-weight: 600; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet home: fit the service cards and teaser grid to the 1024px
     viewport (3 x 318px + 31px gaps, per the frozen baseline) instead of
     overflowing to 1169px (D-006), and restore the baseline vertical
     rhythm (D-013). */
  .home-service-cards { padding-top: 20px; }
  .home-service-cards-row { max-width: 985px; }
  .service-card { min-height: 305px; }
  .ca-icon { height: 105px; }
  .ca-icon svg.ic { top: 21px; }
  .ca-main { margin-bottom: 7px; }
  .ca-sub { line-height: 15.6px; }
  .home-latest { padding-top: 101px; }
  .ipost-grid {
    grid-template-columns: repeat(3, 318px);
    column-gap: 31px;
    row-gap: 20px;
  }
  .ipost { padding-bottom: 10px; }
  .ipost-title { margin-bottom: 7px; }
  .ipost-content { line-height: 20px; margin-bottom: 26px; }
}

@media (max-width: 767px) {
  .home-service-cards {
    padding: 35px 15px 29px;
  }
  .home-service-cards-row {
    display: block;
    gap: 0;
  }
  .home-service-cards .service-card {
    min-height: 0;
    width: 100%;
  }
  .home-service-cards .ca-main { margin-bottom: 0; }
  .home-service-cards .ca-sub {
    line-height: 15.6px;
    padding-top: 10px;
  }
  .ipost-grid {
    display: block;
    max-width: none;
    margin: 85px 15px 0;
  }
  .ipost {
    width: 100%;
    margin-bottom: 45px;
  }
  .testi-columns {
    display: block;
    margin: 45px 15px 0;
    padding: 0;
  }
  .home-testimonials .testimonial-scroller {
    width: 100%;
    margin-bottom: 30px;
  }
  .small-posts .entry {
    display: block;
  }
  .small-posts .entry-image {
    width: 100%;
  }
  .small-posts .entry-image img {
    width: 100%;
    height: auto;
  }
  .small-posts .entry-c {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
  .small-posts .entry-excerpt {
    margin-top: 20px;
  }
  /* On mobile the date badge overlays the top-left of the full-width image
     (legacy behaviour); on desktop it sits inline to the right of the thumb. */
  .small-posts .entry-date {
    width: 60px;
    margin: 0;
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .small-posts .entry-meta { display: none; }
  .related-posts-wrap { margin-top: 101px; }
  .commenting-area { padding-bottom: 5px; }
  .related-carousel { height: 150px; }
  .related-carousel .cstage {
    display: flex;
  }
  .related-grid {
    display: flex;
    width: 100%;
    gap: 0;
  }
  .related-card { flex: 0 0 25%; }
  .rpost-image {
    width: 40%;
    height: 98px;
    aspect-ratio: auto;
  }
  .col_one_third {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}

/* ===== pages.css ===== */
/* Cognim — page-specific rules. */

/* 404 page --------------------------------------------------------------------- */
.error404-page {
  text-align: center;
  padding: 0;
}
.error404-page > span {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 32px;
  line-height: 32px;
  font-weight: 200;
  color: var(--c-heading);
  margin-bottom: 23px;
}
.nf-404 {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 216px;
  line-height: 216px;
  color: #34495e;
  margin: 0;
}
.nf-404-icon {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 216px;
  height: 216px;
  border-radius: 50%;
  background: #34495e;
  color: transparent;
  font-size: 0;
  line-height: 216px;
}
.nf-404-icon::before,
.nf-404-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
}
.nf-404-icon::before {
  top: 54px;
  width: 20px;
  height: 67px;
  border-radius: 10px;
}
.nf-404-icon::after {
  top: 135px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* Mobile page-title band: centred title/breadcrumbs (theme mobile layout). */
@media (max-width: 767px) {
  #page-title .page-band-title, #page-title .post-band-title, #page-title .breadcrumbs { text-align: center; }
}